diff --git a/README.md b/README.md
index b144f20..9ac76b3 100644
--- a/README.md
+++ b/README.md
@@ -22,9 +22,11 @@ The preview of `@idraw/studo`.
- 
- 
+ 
+
+ 
+
## Usage
diff --git a/package.json b/package.json
index e066188..ae91c3a 100644
--- a/package.json
+++ b/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": {
diff --git a/packages/studio-base/package.json b/packages/studio-base/package.json
index de77d12..5552fe5 100644
--- a/packages/studio-base/package.json
+++ b/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"
diff --git a/packages/studio-base/src/icons/app-store.tsx b/packages/studio-base/src/icons/app-store.tsx
new file mode 100644
index 0000000..a564702
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/database.tsx b/packages/studio-base/src/icons/database.tsx
new file mode 100644
index 0000000..7a8b7a9
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/experiment.tsx b/packages/studio-base/src/icons/experiment.tsx
new file mode 100644
index 0000000..8b48706
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/home.tsx b/packages/studio-base/src/icons/home.tsx
new file mode 100644
index 0000000..7569756
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/indent.tsx b/packages/studio-base/src/icons/indent.tsx
new file mode 100644
index 0000000..9ce997f
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/index.ts b/packages/studio-base/src/icons/index.ts
index 3eb1204..09de87d 100644
--- a/packages/studio-base/src/icons/index.ts
+++ b/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,
diff --git a/packages/studio-base/src/icons/outdent.tsx b/packages/studio-base/src/icons/outdent.tsx
new file mode 100644
index 0000000..a549643
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/icons/plus.tsx b/packages/studio-base/src/icons/plus.tsx
new file mode 100644
index 0000000..72f711b
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Icon;
diff --git a/packages/studio-base/src/index.ts b/packages/studio-base/src/index.ts
index d8c8076..bd42dee 100644
--- a/packages/studio-base/src/index.ts
+++ b/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,
diff --git a/packages/studio/README.md b/packages/studio/README.md
index b144f20..9ac76b3 100644
--- a/packages/studio/README.md
+++ b/packages/studio/README.md
@@ -22,9 +22,11 @@ The preview of `@idraw/studo`.
-
-
+
+
+
+
## Usage
diff --git a/packages/studio/package.json b/packages/studio/package.json
index 1af5f27..4158866 100644
--- a/packages/studio/package.json
+++ b/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"
diff --git a/packages/studio/src/index.ts b/packages/studio/src/index.ts
index 62904c2..a3d32b9 100644
--- a/packages/studio/src/index.ts
+++ b/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';
diff --git a/packages/studio/src/studio.tsx b/packages/studio/src/studio.tsx
index 2fc2696..72b2cc7 100644
--- a/packages/studio/src/studio.tsx
+++ b/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 (
diff --git a/packages/studio/src/types/lib/shared.ts b/packages/studio/src/types/lib/shared.ts
index 5dcde92..a384f49 100644
--- a/packages/studio/src/types/lib/shared.ts
+++ b/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;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60e2c7c..68d201b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
specifier: 5.12.1
version: 5.12.1(react-dom@18.2.0)(react@18.2.0)
idraw:
- specifier: 0.4.0-beta.7
- version: 0.4.0-beta.7
+ specifier: 0.4.0-beta.9
+ version: 0.4.0-beta.9
devDependencies:
'@ant-design/icons':
specifier: ^5.2.6
@@ -160,7 +160,7 @@ importers:
packages/studio:
dependencies:
'@idraw/studio-base':
- specifier: ^0.4.0-alpha.8
+ specifier: ^0.4.0-alpha.9
version: link:../studio-base
antd:
specifier: ^5.12.1
@@ -169,8 +169,8 @@ importers:
specifier: ^2.3.2
version: 2.3.2
idraw:
- specifier: ^0.4.0-beta.7
- version: 0.4.0-beta.7
+ specifier: ^0.4.0-beta.9
+ version: 0.4.0-beta.9
is-hotkey:
specifier: ^0.2.0
version: 0.2.0
@@ -206,8 +206,8 @@ importers:
specifier: ^2.3.2
version: 2.3.2
idraw:
- specifier: ^0.4.0-beta.7
- version: 0.4.0-beta.7
+ specifier: ^0.4.0-beta.9
+ version: 0.4.0-beta.9
react:
specifier: ^18.2.0
version: 18.2.0
@@ -2022,42 +2022,42 @@ packages:
react: 18.2.0
dev: false
- /@idraw/board@0.4.0-beta.7(@idraw/renderer@0.4.0-beta.7)(@idraw/util@0.4.0-beta.7):
- resolution: {integrity: sha512-GOXdu1WxXY2/Hn+ztisi3Ti4cLnIlSVulmgyP0Ik5cg1OKAfNwmVBADUUuijO2PCeIsvWFynHshQIkanU6QfEQ==}
+ /@idraw/board@0.4.0-beta.9(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9):
+ resolution: {integrity: sha512-tKGvTvGQVOYJ0F4QTaRISyjA/D1ibgi0lT+bjdRzbFSpalk7nu/ZgzYMn5988Q9b6uogWBOZ/NKYgiZpaF3AAw==}
peerDependencies:
- '@idraw/renderer': ^0.4.0-beta.7
- '@idraw/util': ^0.4.0-beta.7
+ '@idraw/renderer': ^0.4.0-beta.9
+ '@idraw/util': ^0.4.0-beta.9
dependencies:
- '@idraw/renderer': 0.4.0-beta.7(@idraw/util@0.4.0-beta.7)
- '@idraw/util': 0.4.0-beta.7
+ '@idraw/renderer': 0.4.0-beta.9(@idraw/util@0.4.0-beta.9)
+ '@idraw/util': 0.4.0-beta.9
dev: false
- /@idraw/core@0.4.0-beta.7(@idraw/board@0.4.0-beta.7)(@idraw/renderer@0.4.0-beta.7)(@idraw/util@0.4.0-beta.7):
- resolution: {integrity: sha512-TSxE2Hk7F8mq1DxZ6FGtF0Nx+rpVzn9IWkVrDsRVYS6FxeQVooqAEgS3BFPnYSUEySxQdqyXzT5bnpthfAqZeg==}
+ /@idraw/core@0.4.0-beta.9(@idraw/board@0.4.0-beta.9)(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9):
+ resolution: {integrity: sha512-5qdEGTuqwc5hgl46RO+QCgYw7ly+0mV1pf6cl2ebeb3spsPjbp9etnV5Gc751TTg7Mb/KEGNJzOnNaRgJxXO7g==}
peerDependencies:
- '@idraw/board': ^0.4.0-beta.7
- '@idraw/renderer': ^0.4.0-beta.7
- '@idraw/util': ^0.4.0-beta.7
+ '@idraw/board': ^0.4.0-beta.9
+ '@idraw/renderer': ^0.4.0-beta.9
+ '@idraw/util': ^0.4.0-beta.9
dependencies:
- '@idraw/board': 0.4.0-beta.7(@idraw/renderer@0.4.0-beta.7)(@idraw/util@0.4.0-beta.7)
- '@idraw/renderer': 0.4.0-beta.7(@idraw/util@0.4.0-beta.7)
- '@idraw/util': 0.4.0-beta.7
+ '@idraw/board': 0.4.0-beta.9(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9)
+ '@idraw/renderer': 0.4.0-beta.9(@idraw/util@0.4.0-beta.9)
+ '@idraw/util': 0.4.0-beta.9
dev: false
- /@idraw/renderer@0.4.0-beta.7(@idraw/util@0.4.0-beta.7):
- resolution: {integrity: sha512-RxVn3KCdGjLUXQePXEn9NQL1vXD9q/UfPr7F9wbqRskaz+vseswbZh/tE4yuPI91Gupfgc5MaeQoboOuLJGqAw==}
+ /@idraw/renderer@0.4.0-beta.9(@idraw/util@0.4.0-beta.9):
+ resolution: {integrity: sha512-toZysIG1g6jSCHm+7yH4+VL6goHaxFa+vXfeXw/Mh6rDT7ITSv0IJxdNgeFprI0u4lf7MTP7F6GCDu/7/dkgBA==}
peerDependencies:
- '@idraw/util': ^0.4.0-beta.7
+ '@idraw/util': ^0.4.0-beta.9
dependencies:
- '@idraw/util': 0.4.0-beta.7
+ '@idraw/util': 0.4.0-beta.9
dev: false
- /@idraw/types@0.4.0-beta.7:
- resolution: {integrity: sha512-WT20KbPXAZ4OoIycGVKu8TUOr0yV/zGrMFD/uBpXalM/KDXUeS7ciXc4DhVSeof7KZ/kNcC/hyu1LHO4S+2f1g==}
+ /@idraw/types@0.4.0-beta.9:
+ resolution: {integrity: sha512-GMkyvbBeXyaPyGFREB1rAtyzy/NmLd74G62R0AhpPput33fh923ZwvtMSlYyfX7P+XE0pbDAyn+jdReq0TBLmg==}
dev: false
- /@idraw/util@0.4.0-beta.7:
- resolution: {integrity: sha512-lSdf3ZZl0BQ7CZ3NhvTlQNeF/r0Vat92lMPu/bExVgtvOD02Ylv4SZ1BXqNTsfyORcTOgQMNJJFPztItTib0PQ==}
+ /@idraw/util@0.4.0-beta.9:
+ resolution: {integrity: sha512-Tf9pi2cJ9YTjmRueGEgSqW29lt/eHJ64W7RohT0Yb7JI9MjB90jPUkVPzny/Pr04aVCTTsLOU7hB2MflOrDW8g==}
dev: false
/@isaacs/cliui@8.0.2:
@@ -4877,14 +4877,14 @@ packages:
safer-buffer: 2.1.2
dev: true
- /idraw@0.4.0-beta.7:
- resolution: {integrity: sha512-EVs7ggoPXOTGlXvBr1iBUIYjMtO4SRh8LxeOgaf+tn1k+nYLQXL3D5ydyT4b0AdvkC/dG0Bld+Q8tYguw65/Ew==}
+ /idraw@0.4.0-beta.9:
+ resolution: {integrity: sha512-T7z2nBmtoHopPboEBFdqwRM08QBKPSCsh3FA4Gi8wOctbFZrC9t8jpsnaYjn9/9u6H2var09Xk9mhPZYDLS8Qw==}
dependencies:
- '@idraw/board': 0.4.0-beta.7(@idraw/renderer@0.4.0-beta.7)(@idraw/util@0.4.0-beta.7)
- '@idraw/core': 0.4.0-beta.7(@idraw/board@0.4.0-beta.7)(@idraw/renderer@0.4.0-beta.7)(@idraw/util@0.4.0-beta.7)
- '@idraw/renderer': 0.4.0-beta.7(@idraw/util@0.4.0-beta.7)
- '@idraw/types': 0.4.0-beta.7
- '@idraw/util': 0.4.0-beta.7
+ '@idraw/board': 0.4.0-beta.9(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9)
+ '@idraw/core': 0.4.0-beta.9(@idraw/board@0.4.0-beta.9)(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9)
+ '@idraw/renderer': 0.4.0-beta.9(@idraw/util@0.4.0-beta.9)
+ '@idraw/types': 0.4.0-beta.9
+ '@idraw/util': 0.4.0-beta.9
dev: false
/ieee754@1.2.1: