From 4ab89f68ff1b6e7e8c2550e3b65cee55c414245e Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sat, 27 Jan 2024 15:27:14 +0800
Subject: [PATCH 1/2] feat: improve studio context

---
 packages/studio-base/src/hooks/theme.ts       | 15 +++++
 .../src/icons/util/icon-wrapper.tsx           |  2 +-
 packages/studio-base/src/index.ts             |  1 +
 .../src/modules/config-provider/index.tsx     | 14 ++---
 packages/studio/src/modules/context.ts        | 10 +--
 .../studio/src/modules/panel-layer/index.tsx  | 10 +--
 packages/studio/src/modules/sketch/index.tsx  | 63 ++++++++++---------
 packages/studio/src/studio.tsx                | 24 ++-----
 packages/studio/src/types/lib/context.ts      |  2 +-
 packages/studio/src/types/lib/shared.ts       |  2 +-
 10 files changed, 72 insertions(+), 71 deletions(-)
 create mode 100644 packages/studio-base/src/hooks/theme.ts

diff --git a/packages/studio-base/src/hooks/theme.ts b/packages/studio-base/src/hooks/theme.ts
new file mode 100644
index 0000000..b8b985a
--- /dev/null
+++ b/packages/studio-base/src/hooks/theme.ts
@@ -0,0 +1,15 @@
+import { generateClassName } from '../css';
+import classnames from 'classnames';
+import type { ThemeMode } from '../types';
+
+export const useThemeClassName = (props: { themeMode?: ThemeMode }) => {
+  const { themeMode } = props;
+  const themeName = 'theme';
+  const themeClassName = generateClassName(themeName);
+  const themeDarkClassName = generateClassName(themeName, 'dark');
+  const className = classnames({
+    [themeClassName]: true,
+    [themeDarkClassName]: themeMode === 'dark'
+  });
+  return { themeMode, className };
+};
diff --git a/packages/studio-base/src/icons/util/icon-wrapper.tsx b/packages/studio-base/src/icons/util/icon-wrapper.tsx
index a52317e..581acb7 100644
--- a/packages/studio-base/src/icons/util/icon-wrapper.tsx
+++ b/packages/studio-base/src/icons/util/icon-wrapper.tsx
@@ -25,5 +25,5 @@ export const IconWrapper = (props: IconWrapperProps) => {
         {children}
       </span>
     );
-  }, [iconClassName]);
+  }, [iconClassName, style, className]);
 };
diff --git a/packages/studio-base/src/index.ts b/packages/studio-base/src/index.ts
index bd42dee..6b0ac1b 100644
--- a/packages/studio-base/src/index.ts
+++ b/packages/studio-base/src/index.ts
@@ -11,6 +11,7 @@ export { ElementDetail, type ElementDetailProps } from './modules/element-detail
 
 export { getElementTree } from './tools';
 export { setClassNameTopPrefix, generateClassName } from './css/index';
+export { useThemeClassName } from './hooks/theme';
 export * from './locale/types';
 
 export {
diff --git a/packages/studio-base/src/modules/config-provider/index.tsx b/packages/studio-base/src/modules/config-provider/index.tsx
index e4898e7..9bdda6b 100644
--- a/packages/studio-base/src/modules/config-provider/index.tsx
+++ b/packages/studio-base/src/modules/config-provider/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { createContext, useEffect, useState, useContext } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import { ConfigProvider as AntdConfigProvider, theme } from 'antd';
-import classnames from 'classnames';
 import { createPrefixName, generateClassName, getClassNameTopPrefix, setClassNameTopPrefix } from '../../css';
 import { LocaleCode } from '../../locale';
 import { DEFAULT_LOCALE_CODE } from '../../locale';
 import { ThemeMode } from '../../types';
+import { useThemeClassName } from '../../hooks/theme';
 
 export interface ConfigContextValue {
   topPrefix: string;
@@ -39,19 +39,15 @@ export const ConfigContext: React.Context<ConfigContextValue> = createContext<Co
 export interface ConfigProviderProps extends Pick<Partial<ConfigContextValue>, 'topPrefix' | 'localeCode' | 'container' | 'themeMode'> {
   children?: React.ReactNode;
 }
+
 export const ConfigProvider: React.FC<ConfigProviderProps> = (props) => {
   const { children, topPrefix, localeCode, container, themeMode } = props;
   const contextValue: ConfigContextValue = getDefaultConfigValue({
     topPrefix,
     localeCode
   });
-
-  const themeName = 'theme';
   const [context, setContext] = useState<ConfigContextValue>(contextValue);
-  const { createPrefixName } = useContext(ConfigContext);
-  const themePrefixName = createPrefixName(themeName);
-  const themeClassName = themePrefixName();
-  const themeDarkClassName = themePrefixName('dark');
+  const { className } = useThemeClassName({ themeMode });
 
   useEffect(() => {
     setContext({
@@ -63,7 +59,7 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = (props) => {
   return (
     <ConfigContext.Provider value={{ ...context }}>
       <AntdConfigProvider theme={{ algorithm: themeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
-        <div className={classnames([themeClassName, themeMode === 'dark' ? themeDarkClassName : ''])}>{children}</div>
+        <div className={className}>{children}</div>
       </AntdConfigProvider>
     </ConfigContext.Provider>
   );
diff --git a/packages/studio/src/modules/context.ts b/packages/studio/src/modules/context.ts
index 8fc17f3..5ad758d 100644
--- a/packages/studio/src/modules/context.ts
+++ b/packages/studio/src/modules/context.ts
@@ -13,12 +13,12 @@ export function createStudioContextStateByProps(props?: StudioProps): StudioStat
     elements: [],
     ...(props?.data || {})
   };
-  let editingDataPostion: ElementPosition = [];
+  let editingDataPosition: ElementPosition = [];
   let editingData: Data = data;
   if (props?.defaultEditingGroupUUID) {
-    editingDataPostion = getElementPositionFromList(props.defaultEditingGroupUUID, data.elements);
+    editingDataPosition = getElementPositionFromList(props.defaultEditingGroupUUID, data.elements);
   }
-  editingData = cloneEditingDataByPosition(editingDataPostion, data);
+  editingData = cloneEditingDataByPosition(editingDataPosition, data);
   const treeData = getElementTree(editingData);
 
   return {
@@ -26,7 +26,7 @@ export function createStudioContextStateByProps(props?: StudioProps): StudioStat
     themeMode: props?.defaultThemeMode || defaultThemeMode,
     data,
     editingData,
-    editingDataPostion,
+    editingDataPosition,
     treeData,
     selectedUUIDs: props?.defaultSelectedElementUUIDs || [],
     scaleInfo: {
@@ -51,7 +51,7 @@ export function createStudioContextState(opts?: Partial<StudioState>): StudioSta
       ...(opts?.data || {})
     },
     editingData: cloneEditingDataByPosition([], data),
-    editingDataPostion: [],
+    editingDataPosition: [],
     treeData: [],
     selectedUUIDs: [],
     scaleInfo: {
diff --git a/packages/studio/src/modules/panel-layer/index.tsx b/packages/studio/src/modules/panel-layer/index.tsx
index 74f2b23..c4f68d3 100644
--- a/packages/studio/src/modules/panel-layer/index.tsx
+++ b/packages/studio/src/modules/panel-layer/index.tsx
@@ -39,10 +39,10 @@ export const PanelLayer = (props: PanelLayerProps) => {
   const [contextMenuOptions] = useContextMenuOptions({ sharedEvent, sharedStore });
 
   const getCurrentName = () => {
-    if (state.editingDataPostion.length === 0) {
+    if (state.editingDataPosition.length === 0) {
       return '';
     }
-    const elem = findElementFromListByPosition(state.editingDataPostion, state.data.elements);
+    const elem = findElementFromListByPosition(state.editingDataPosition, state.data.elements);
     return elem?.name || elem?.type || '';
   };
 
@@ -123,10 +123,10 @@ export const PanelLayer = (props: PanelLayerProps) => {
             className={headerBtnClassName}
             size="small"
             icon={<IconDoubleLeft />}
-            disabled={!(state.editingDataPostion.length > 0)}
+            disabled={!(state.editingDataPosition.length > 0)}
             onClick={onClickBackRootEdit}
           />
-          <Button className={headerBtnClassName} size="small" icon={<IconLeft />} disabled={!(state.editingDataPostion.length > 0)} onClick={onClickBackOne} />
+          <Button className={headerBtnClassName} size="small" icon={<IconLeft />} disabled={!(state.editingDataPosition.length > 0)} onClick={onClickBackOne} />
           <span className={headerTitleClassName}>{getCurrentName()}</span>
         </div>
         <Dropdown menu={{ items: contextMenuOptions }} trigger={['contextMenu']}>
@@ -193,5 +193,5 @@ export const PanelLayer = (props: PanelLayerProps) => {
         {/* <div className={footerClassName}>footer</div> */}
       </div>
     );
-  }, [treeData, selectedUUIDs, expandedKeys, editingData.elements, state.editingDataPostion, contextMenuOptions]);
+  }, [treeData, selectedUUIDs, expandedKeys, editingData.elements, state.editingDataPosition, contextMenuOptions]);
 };
diff --git a/packages/studio/src/modules/sketch/index.tsx b/packages/studio/src/modules/sketch/index.tsx
index c425807..063cd0a 100644
--- a/packages/studio/src/modules/sketch/index.tsx
+++ b/packages/studio/src/modules/sketch/index.tsx
@@ -37,10 +37,10 @@ export const Sketch = (props: SketchProps) => {
   const [contextMenuOptions] = useContextMenuOptions({ sharedEvent, sharedStore });
 
   useEffect(() => {
-    refEditingDataPosition.current = [...state.editingDataPostion];
+    refEditingDataPosition.current = [...state.editingDataPosition];
     refData.current = state.data;
     refEditingData.current = state.editingData;
-  }, [state.editingDataPostion, state.data, state.editingData]);
+  }, [state.editingDataPosition, state.data, state.editingData]);
 
   useEffect(() => {
     if (!ref?.current) {
@@ -153,8 +153,8 @@ export const Sketch = (props: SketchProps) => {
 
       if (type === 'go-to-group' && position) {
         // update new editing data
-        const newEditingDataPostion = [...editingDataPosition, ...position];
-        const newEditingData = cloneEditingDataByPosition(newEditingDataPostion, data);
+        const newEditingDataPosition = [...editingDataPosition, ...position];
+        const newEditingData = cloneEditingDataByPosition(newEditingDataPosition, data);
         const newTreeData = getElementTree(newEditingData);
 
         dispatch({
@@ -162,65 +162,68 @@ export const Sketch = (props: SketchProps) => {
           payload: {
             data: { ...data },
             editingData: { ...newEditingData },
-            editingDataPostion: newEditingDataPostion,
+            editingDataPosition: newEditingDataPosition,
             treeData: newTreeData
           }
         });
-        idraw.setViewScale({
-          scale: 1,
-          offsetX: 0,
-          offsetY: 0
-        });
+        // idraw.setViewScale({
+        //   scale: 1,
+        //   offsetX: 0,
+        //   offsetY: 0
+        // });
+        idraw.centerContent({ data: newEditingData });
 
         idraw.trigger(middlewareEventSelectClear, {});
       } else if (type === 'back-one' && editingDataPosition.length > 0) {
-        const newEditingDataPostion = [...editingDataPosition];
-        newEditingDataPostion.pop();
+        const newEditingDataPosition = [...editingDataPosition];
+        newEditingDataPosition.pop();
 
-        const newEditingData = cloneEditingDataByPosition(newEditingDataPostion, data);
+        const newEditingData = cloneEditingDataByPosition(newEditingDataPosition, data);
         const newTreeData = getElementTree(newEditingData);
         dispatch({
           type: 'update',
           payload: {
             data: { ...data },
             editingData: { ...newEditingData },
-            editingDataPostion: [...newEditingDataPostion],
+            editingDataPosition: [...newEditingDataPosition],
             treeData: newTreeData
           }
         });
-        idraw.setViewScale({
-          scale: 1,
-          offsetX: 0,
-          offsetY: 0
-        });
+        // idraw.setViewScale({
+        //   scale: 1,
+        //   offsetX: 0,
+        //   offsetY: 0
+        // });
+        idraw.centerContent({ data: newEditingData });
         idraw.trigger(middlewareEventSelectClear, {});
       } else if (type === 'back-root') {
         // update new editing data
-        const newEditingDataPostion: ElementPosition = [];
-        const newEditingData = cloneEditingDataByPosition(newEditingDataPostion, data);
+        const newEditingDataPosition: ElementPosition = [];
+        const newEditingData = cloneEditingDataByPosition(newEditingDataPosition, data);
         const newTreeData = getElementTree(newEditingData);
         dispatch({
           type: 'update',
           payload: {
             data: { ...data },
             editingData: newEditingData,
-            editingDataPostion: newEditingDataPostion,
+            editingDataPosition: newEditingDataPosition,
             treeData: newTreeData
           }
         });
-        idraw.setViewScale({
-          scale: 1,
-          offsetX: 0,
-          offsetY: 0
-        });
+        // idraw.setViewScale({
+        //   scale: 1,
+        //   offsetX: 0,
+        //   offsetY: 0
+        // });
+        idraw.centerContent({ data: newEditingData });
         idraw.trigger(middlewareEventSelectClear, {});
       }
     };
 
     const resetDataCallback = (e: SharedEventMap['resetData']) => {
       const { data } = e;
-      const newEditingDataPostion: ElementPosition = [];
-      const newEditingData = cloneEditingDataByPosition(newEditingDataPostion, data);
+      const newEditingDataPosition: ElementPosition = [];
+      const newEditingData = cloneEditingDataByPosition(newEditingDataPosition, data);
       const newTreeData = getElementTree(newEditingData);
 
       dispatch({
@@ -228,7 +231,7 @@ export const Sketch = (props: SketchProps) => {
         payload: {
           data: { ...data },
           editingData: { ...newEditingData },
-          editingDataPostion: newEditingDataPostion,
+          editingDataPosition: newEditingDataPosition,
           treeData: newTreeData
         }
       });
diff --git a/packages/studio/src/studio.tsx b/packages/studio/src/studio.tsx
index 72b2cc7..ea87e88 100644
--- a/packages/studio/src/studio.tsx
+++ b/packages/studio/src/studio.tsx
@@ -19,27 +19,13 @@ export const Studio = React.forwardRef((props: StudioProps, ref: any) => {
     })
   );
 
-  // useEffect(() => {
-  //   if (data) {
-  //     dispatch({
-  //       type: 'update',
-  //       payload: {
-  //         data,
-  //         editingData: cloneEditingDataByPosition([], data),
-  //         editingDataPostion: [],
-  //         treeData: getElementTree(data)
-  //       }
-  //     });
-  //   }
-  // }, [data]);
-
   useEffect(() => {
-    const elem = findElementFromListByPosition(state.editingDataPostion, state.data.elements);
+    const elem = findElementFromListByPosition(state.editingDataPosition, state.data.elements);
     onEditGroupElement?.({
       uuid: elem?.uuid,
-      position: [...state.editingDataPostion]
+      position: [...state.editingDataPosition]
     });
-  }, [state.editingDataPostion]);
+  }, [state.editingDataPosition]);
 
   useImperativeHandle(
     ref,
@@ -110,8 +96,8 @@ export const Studio = React.forwardRef((props: StudioProps, ref: any) => {
 
   useEffect(() => {
     const sharedEvent = refSharedEvent.current;
-    sharedEvent?.trigger('trackEditingDataChange', { editingData: state.editingData, editingDataPostion: state.editingDataPostion });
-  }, [state.editingData, state.editingDataPostion]);
+    sharedEvent?.trigger('trackEditingDataChange', { editingData: state.editingData, editingDataPosition: state.editingDataPosition });
+  }, [state.editingData, state.editingDataPosition]);
 
   return useMemo(() => {
     return (
diff --git a/packages/studio/src/types/lib/context.ts b/packages/studio/src/types/lib/context.ts
index 33ad1bc..e1cb20a 100644
--- a/packages/studio/src/types/lib/context.ts
+++ b/packages/studio/src/types/lib/context.ts
@@ -9,7 +9,7 @@ export interface StudioState {
   themeMode: StudioThemeMode;
   data: Data;
   editingData: Data;
-  editingDataPostion: ElementPosition;
+  editingDataPosition: ElementPosition;
   treeData: ElementTreeData;
   selectedUUIDs: string[];
   scaleInfo: {
diff --git a/packages/studio/src/types/lib/shared.ts b/packages/studio/src/types/lib/shared.ts
index a384f49..2bb772b 100644
--- a/packages/studio/src/types/lib/shared.ts
+++ b/packages/studio/src/types/lib/shared.ts
@@ -48,7 +48,7 @@ export interface SharedEventMap {
   switchTheme: { theme: StudioThemeMode };
   changeLocale: { locale: LocaleCode };
   trackDataChange: { data: Data };
-  trackEditingDataChange: { editingData: Data; editingDataPostion: ElementPosition };
+  trackEditingDataChange: { editingData: Data; editingDataPosition: ElementPosition };
 }
 
 export type SharedEvent = EventEmitter<SharedEventMap>;

From 7eb107994b6a288c83d23a5ffb1dfa93ba717ad9 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sat, 27 Jan 2024 15:37:42 +0800
Subject: [PATCH 2/2] chore: bump version 0.4.0-alpha.10

---
 package.json                      |  4 +-
 packages/studio-base/package.json |  4 +-
 packages/studio/package.json      |  6 +--
 pnpm-lock.yaml                    | 72 +++++++++++++++----------------
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index ae91c3a..f7d412a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.9",
+  "version": "0.4.0-alpha.10",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +19,7 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.9",
+    "idraw": "0.4.0-beta.10",
     "antd": "5.12.1"
   },
   "devDependencies": {
diff --git a/packages/studio-base/package.json b/packages/studio-base/package.json
index 5552fe5..55def76 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.9",
+  "version": "0.4.0-alpha.10",
   "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.9",
+    "idraw": "^0.4.0-beta.10",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"
diff --git a/packages/studio/package.json b/packages/studio/package.json
index 4158866..f095fba 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.9",
+  "version": "0.4.0-alpha.10",
   "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.9",
+    "@idraw/studio-base": "^0.4.0-alpha.10",
     "classnames": "^2.3.2",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.9",
+    "idraw": "^0.4.0-beta.10",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68d201b..84e4e6b 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.9
-        version: 0.4.0-beta.9
+        specifier: 0.4.0-beta.10
+        version: 0.4.0-beta.10
     devDependencies:
       '@ant-design/icons':
         specifier: ^5.2.6
@@ -160,7 +160,7 @@ importers:
   packages/studio:
     dependencies:
       '@idraw/studio-base':
-        specifier: ^0.4.0-alpha.9
+        specifier: ^0.4.0-alpha.10
         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.9
-        version: 0.4.0-beta.9
+        specifier: ^0.4.0-beta.10
+        version: 0.4.0-beta.10
       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.9
-        version: 0.4.0-beta.9
+        specifier: ^0.4.0-beta.10
+        version: 0.4.0-beta.10
       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.9(@idraw/renderer@0.4.0-beta.9)(@idraw/util@0.4.0-beta.9):
-    resolution: {integrity: sha512-tKGvTvGQVOYJ0F4QTaRISyjA/D1ibgi0lT+bjdRzbFSpalk7nu/ZgzYMn5988Q9b6uogWBOZ/NKYgiZpaF3AAw==}
+  /@idraw/board@0.4.0-beta.10(@idraw/renderer@0.4.0-beta.10)(@idraw/util@0.4.0-beta.10):
+    resolution: {integrity: sha512-qtAo7xXbo/Z0WlpaU93A+lURUL6ebKbwS8jITv/eUQhrCuA1joQmKxysL4bgqmcQww/EN5iH5S6+Z3JjiskfUw==}
     peerDependencies:
-      '@idraw/renderer': ^0.4.0-beta.9
-      '@idraw/util': ^0.4.0-beta.9
+      '@idraw/renderer': ^0.4.0-beta.10
+      '@idraw/util': ^0.4.0-beta.10
     dependencies:
-      '@idraw/renderer': 0.4.0-beta.9(@idraw/util@0.4.0-beta.9)
-      '@idraw/util': 0.4.0-beta.9
+      '@idraw/renderer': 0.4.0-beta.10(@idraw/util@0.4.0-beta.10)
+      '@idraw/util': 0.4.0-beta.10
     dev: false
 
-  /@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==}
+  /@idraw/core@0.4.0-beta.10(@idraw/board@0.4.0-beta.10)(@idraw/renderer@0.4.0-beta.10)(@idraw/util@0.4.0-beta.10):
+    resolution: {integrity: sha512-0xmrU7Fi+99yaQfCkIt4uHq6wsGfz4+aL2O4kNla/r0KfxTmasWRnDbL2NQVA43zu+VbDnX/zFTNyRXjJsdeDQ==}
     peerDependencies:
-      '@idraw/board': ^0.4.0-beta.9
-      '@idraw/renderer': ^0.4.0-beta.9
-      '@idraw/util': ^0.4.0-beta.9
+      '@idraw/board': ^0.4.0-beta.10
+      '@idraw/renderer': ^0.4.0-beta.10
+      '@idraw/util': ^0.4.0-beta.10
     dependencies:
-      '@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
+      '@idraw/board': 0.4.0-beta.10(@idraw/renderer@0.4.0-beta.10)(@idraw/util@0.4.0-beta.10)
+      '@idraw/renderer': 0.4.0-beta.10(@idraw/util@0.4.0-beta.10)
+      '@idraw/util': 0.4.0-beta.10
     dev: false
 
-  /@idraw/renderer@0.4.0-beta.9(@idraw/util@0.4.0-beta.9):
-    resolution: {integrity: sha512-toZysIG1g6jSCHm+7yH4+VL6goHaxFa+vXfeXw/Mh6rDT7ITSv0IJxdNgeFprI0u4lf7MTP7F6GCDu/7/dkgBA==}
+  /@idraw/renderer@0.4.0-beta.10(@idraw/util@0.4.0-beta.10):
+    resolution: {integrity: sha512-GXxATN7i2aScg5PnByuN1Js+bd2+/CiM8nJM/RiRZjiFQJNB3AXGDYQlXPjGlMvKxseuxQBSNy7QpKUbXYjJUw==}
     peerDependencies:
-      '@idraw/util': ^0.4.0-beta.9
+      '@idraw/util': ^0.4.0-beta.10
     dependencies:
-      '@idraw/util': 0.4.0-beta.9
+      '@idraw/util': 0.4.0-beta.10
     dev: false
 
-  /@idraw/types@0.4.0-beta.9:
-    resolution: {integrity: sha512-GMkyvbBeXyaPyGFREB1rAtyzy/NmLd74G62R0AhpPput33fh923ZwvtMSlYyfX7P+XE0pbDAyn+jdReq0TBLmg==}
+  /@idraw/types@0.4.0-beta.10:
+    resolution: {integrity: sha512-BNB8ZwCsx0POaJaxAE3Y28SLBExS/bqSgYqeF9nHzIp1xTM05sSYsgNMKpl/SiflqlLJBIfIi986k7GjGMbUww==}
     dev: false
 
-  /@idraw/util@0.4.0-beta.9:
-    resolution: {integrity: sha512-Tf9pi2cJ9YTjmRueGEgSqW29lt/eHJ64W7RohT0Yb7JI9MjB90jPUkVPzny/Pr04aVCTTsLOU7hB2MflOrDW8g==}
+  /@idraw/util@0.4.0-beta.10:
+    resolution: {integrity: sha512-YW6oufQsG+eRYf0FH4fQ39sdC/drVUAW4NeTfSzmQcK+uWwJ6nXL+IKuQNQ5dqC9uZN7h8CaZlcciBhgDBJdtA==}
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -4877,14 +4877,14 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /idraw@0.4.0-beta.9:
-    resolution: {integrity: sha512-T7z2nBmtoHopPboEBFdqwRM08QBKPSCsh3FA4Gi8wOctbFZrC9t8jpsnaYjn9/9u6H2var09Xk9mhPZYDLS8Qw==}
+  /idraw@0.4.0-beta.10:
+    resolution: {integrity: sha512-zGy69kEUbGlmIxcFaJto1zjo72q79ZGUJQ6utlXdmQ5EZVCHcozC6H1ixLnXGIXnw7ZDfj94joG9iHzMpKAy2g==}
     dependencies:
-      '@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
+      '@idraw/board': 0.4.0-beta.10(@idraw/renderer@0.4.0-beta.10)(@idraw/util@0.4.0-beta.10)
+      '@idraw/core': 0.4.0-beta.10(@idraw/board@0.4.0-beta.10)(@idraw/renderer@0.4.0-beta.10)(@idraw/util@0.4.0-beta.10)
+      '@idraw/renderer': 0.4.0-beta.10(@idraw/util@0.4.0-beta.10)
+      '@idraw/types': 0.4.0-beta.10
+      '@idraw/util': 0.4.0-beta.10
     dev: false
 
   /ieee754@1.2.1: