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

prepublish for version 0.4.0-alpha.10
idrawjs · Jan 27, 2024 · 0ec5912 · 0ec5912
2 parents 1d48166 + 7eb1079
commit 0ec5912
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 114 deletions.
diff --git 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
@@ -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-base/src/hooks/theme.ts 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
@@ -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
@@ -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
@@ -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/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/packages/studio/src/modules/context.ts b/packages/studio/src/modules/context.ts
@@ -13,20 +13,20 @@ 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 {
     localeCode: props?.defaultLocale || defaultLocale,
     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
@@ -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
@@ -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,82 +153,85 @@ 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({
           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-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({
         type: 'update',
         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
@@ -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
@@ -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
@@ -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>;