Merge pull request #60 from idrawjs/dev-v0.4

feat: add icons and shared event

README.md

@@ -22,9 +22,11 @@ The preview of `@idraw/studo`.
 
 
 <p align="center">
-  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/62b9bc71-5fca-421d-9c6e-b7512edc77f2" width="700">
 
-  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/5b4cc1dc-89e1-4f67-84fa-578667d42bf7" width="700">
+  <img width="700" alt="idraw-studio-light-theme" src="https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea" />
+
+  <img width="600" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
+
 </p>
 
 ## Usage

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.8",
+  "version": "0.4.0-alpha.9",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +19,7 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.7",
+    "idraw": "0.4.0-beta.9",
     "antd": "5.12.1"
   },
   "devDependencies": {

packages/studio-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio-base",
-  "version": "0.4.0-alpha.8",
+  "version": "0.4.0-alpha.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "antd": "^5.12.1",
     "classnames": "^2.3.2",
-    "idraw": "^0.4.0-beta.7",
+    "idraw": "^0.4.0-beta.9",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio-base/src/icons/app-store.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16z m-52 268H212V212h200v200zM864 144H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16z m-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16z m-52 268H212V612h200v200zM864 544H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16z m-52 268H612V612h200v200z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/database.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32z m-600 72h560v208H232V136z m560 480H232V408h560v208z m0 272H232V680h560v208z"></path>
+        <path d="M344 240m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"></path>
+        <path d="M344 512m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"></path>
+        <path d="M344 784m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/experiment.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M552 472m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"></path>
+        <path d="M879 824.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60-33.9 28.2-76.3 43.9-121.3 43.9-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/home.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/indent.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM400 646c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zM904 160H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 792H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519c4.5-3.5 4.5-10.3 0-13.9L142.4 381.9c-5.8-4.6-14.4-0.5-14.4 6.9v246.3c0 7.4 8.5 11.6 14.4 7z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/index.ts

@@ -3,6 +3,7 @@ import IconAlignLeft from './align-left';
 import IconAlignRight from './align-right';
 import IconArrowRight from './arrow-right';
 import IconApp from './app';
+import IconAppStore from './app-store';
 import IconBorderBottom from './border-bottom';
 import IconBorderDash from './border-dash';
 import IconBorderLeft from './border-left';
@@ -18,17 +19,21 @@ import IconCornerRadiusTopLeft from './corner-radius-top-left';
 import IconCornerRadiusTopRight from './corner-radius-top-right';
 import IconCornerRadius from './corner-radius';
 import IconDark from './dark';
+import IconDatabase from './database';
 import IconDelete from './delete';
 import IconDoubleCircle from './double-circle';
 import IconDoubleLeft from './double-left';
 import IconDown from './down';
 import IconDrag from './drag';
 import IconEdit from './edit';
+import IconExperiment from './experiment';
 import IconFile from './file';
 import IconFullCornerRadius from './full-corner-radius';
 import IconGroup from './group';
 import IconHand from './hand';
+import IconHome from './home';
 import IconHTML from './html';
+import IconIndent from './indent';
 import IconImage from './image';
 import IconInvisible from './invisible';
 import IconLayer from './layer';
@@ -37,8 +42,10 @@ import IconLight from './light';
 import IconLock from './lock';
 import IconMore from './more';
 import IconMouse from './mouse';
+import IconOutdent from './outdent';
 import IconPath from './path';
 import IconPen from './pen';
+import IconPlus from './plus';
 import IconPosition from './position';
 import IconRect from './rect';
 import IconResize from './resize';
@@ -61,6 +68,7 @@ export {
   IconAlignLeft,
   IconAlignRight,
   IconApp,
+  IconAppStore,
   IconArrowRight,
   IconBorderBottom,
   IconBorderDash,
@@ -77,17 +85,21 @@ export {
   IconCornerRadiusTopRight,
   IconCornerRadius,
   IconDark,
+  IconDatabase,
   IconDelete,
   IconDoubleCircle,
   IconDoubleLeft,
   IconDown,
   IconDrag,
   IconEdit,
+  IconExperiment,
   IconFile,
   IconFullCornerRadius,
   IconGroup,
   IconHand,
+  IconHome,
   IconHTML,
+  IconIndent,
   IconImage,
   IconInvisible,
   IconLayer,
@@ -96,8 +108,10 @@ export {
   IconLock,
   IconMore,
   IconMouse,
+  IconOutdent,
   IconPath,
   IconPen,
+  IconPlus,
   IconPosition,
   IconRect,
   IconResize,

packages/studio-base/src/icons/outdent.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM400 646c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zM904 160H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 792H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4 0.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1c-4.5 3.5-4.5 10.3 0 13.8z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/icons/plus.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconWrapper } from './util';
+import type { IconWrapperProps } from './util';
+
+const Icon = (props: IconWrapperProps) => {
+  return (
+    <IconWrapper {...props}>
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
+        <path d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"></path>
+        <path d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"></path>
+      </svg>
+    </IconWrapper>
+  );
+};
+
+export default Icon;

packages/studio-base/src/index.ts

@@ -18,6 +18,7 @@ export {
   IconAlignLeft,
   IconAlignRight,
   IconApp,
+  IconAppStore,
   IconArrowRight,
   IconBorderBottom,
   IconBorderDash,
@@ -34,17 +35,21 @@ export {
   IconCornerRadiusTopRight,
   IconCornerRadius,
   IconDark,
+  IconDatabase,
   IconDelete,
   IconDoubleCircle,
   IconDoubleLeft,
   IconDown,
   IconDrag,
   IconEdit,
+  IconExperiment,
   IconFile,
   IconFullCornerRadius,
   IconGroup,
   IconHand,
+  IconHome,
   IconHTML,
+  IconIndent,
   IconImage,
   IconInvisible,
   IconLayer,
@@ -53,8 +58,10 @@ export {
   IconLock,
   IconMore,
   IconMouse,
+  IconOutdent,
   IconPath,
   IconPen,
+  IconPlus,
   IconPosition,
   IconRect,
   IconResize,

packages/studio/README.md

@@ -22,9 +22,11 @@ The preview of `@idraw/studo`.
 
 
 <p align="center">
-  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/62b9bc71-5fca-421d-9c6e-b7512edc77f2" width="700">
 
-  <img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/5b4cc1dc-89e1-4f67-84fa-578667d42bf7" width="700">
+  <img width="700" alt="idraw-studio-light-theme" src="https://github.com/idrawjs/studio/assets/8216630/8a49bab8-1e4a-44dd-9836-b6ce3861aaea" />
+
+  <img width="600" alt="idraw-studio-dark-theme" src="https://github.com/idrawjs/studio/assets/8216630/479fce0b-891f-47f2-ace8-d91580e68b4b" />
+
 </p>
 
 ## Usage

packages/studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.8",
+  "version": "0.4.0-alpha.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,13 +20,13 @@
   "author": "chenshenhai",
   "license": "MIT",
   "dependencies": {
-    "@idraw/studio-base": "^0.4.0-alpha.8",
+    "@idraw/studio-base": "^0.4.0-alpha.9",
     "classnames": "^2.3.2",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.7",
+    "idraw": "^0.4.0-beta.9",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio/src/index.ts

@@ -1,6 +1,6 @@
 export * from '@idraw/studio-base';
 export { Studio } from './studio';
-export { cloneEditingDataByPosition } from './util/data';
+export { cloneEditingDataByPosition, updateEditingDataChildrenToData } from './util/data';
 export { pickJSONFile } from './util/file';
 export type { StudioProps, StudioImperativeHandle, StudioActionType, StudioState, SharedStore, SharedEvent, StudioThemeMode } from './types';
 export { ExportFile, exportFileDialogWidth } from './modules/export-image-file';

packages/studio/src/studio.tsx

@@ -103,6 +103,16 @@ export const Studio = React.forwardRef((props: StudioProps, ref: any) => {
     sharedEvent?.trigger('changeLocale', { locale: state.localeCode });
   }, [state.localeCode]);
 
+  useEffect(() => {
+    const sharedEvent = refSharedEvent.current;
+    sharedEvent?.trigger('trackDataChange', { data: state.data });
+  }, [state.data]);
+
+  useEffect(() => {
+    const sharedEvent = refSharedEvent.current;
+    sharedEvent?.trigger('trackEditingDataChange', { editingData: state.editingData, editingDataPostion: state.editingDataPostion });
+  }, [state.editingData, state.editingDataPostion]);
+
   return useMemo(() => {
     return (
       <ConfigProvider localeCode={state.localeCode} container={refDashboard.current} topPrefix={prefiexName} themeMode={state.themeMode}>

packages/studio/src/types/lib/shared.ts

@@ -47,6 +47,8 @@ export interface SharedEventMap {
   scrollToLayer: { uuid: string };
   switchTheme: { theme: StudioThemeMode };
   changeLocale: { locale: LocaleCode };
+  trackDataChange: { data: Data };
+  trackEditingDataChange: { editingData: Data; editingDataPostion: ElementPosition };
 }
 
 export type SharedEvent = EventEmitter<SharedEventMap>;