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

Dev v0.4

.github/workflows/release.yml

@@ -13,11 +13,12 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
           registry-url: 'https://registry.npmjs.org'
-      - run: npm install --global pnpm
+      - run: npm install --global pnpm@9
       - run: pnpm i
       - run: npm run build
+      - run: npm run version:reset-for-release
       # - run: npm publish --provenance --access public -w ./packages/studio-base --tag next
       - run: npm publish --provenance --access public -w ./packages/studio-base
         env:

examples/studio/data.ts

@@ -1,7 +1,7 @@
 import type { Data } from 'idraw';
-import signIn from './page-pc/sign-in';
-import signUp from './page-pc/sign-up';
-import home from './page-pc/home';
+// import signIn from './page-pc/sign-in';
+// import signUp from './page-pc/sign-up';
+// import home from './page-pc/home';
 
 import mSignIn from './page-mobile/sign-in';
 import mSignUp from './page-mobile/sign-up';
@@ -23,22 +23,22 @@ const data: Data = {
       ...mSignUp,
       x: startX + 500,
       y: startY
-    },
-    {
-      ...signIn,
-      x: 1000 + startX,
-      y: 0 + startY
-    },
-    {
-      ...signUp,
-      x: 2500 + startX,
-      y: 0 + startY
-    },
-    {
-      ...home,
-      x: 4000 + startX,
-      y: 0 + startY
     }
+    // {
+    //   ...signIn,
+    //   x: 1000 + startX,
+    //   y: 0 + startY
+    // },
+    // {
+    //   ...signUp,
+    //   x: 2500 + startX,
+    //   y: 0 + startY
+    // },
+    // {
+    //   ...home,
+    //   x: 4000 + startX,
+    //   y: 0 + startY
+    // }
   ]
 };
 export default data;

examples/studio/index.tsx

@@ -34,28 +34,26 @@ const App = () => {
       height={height}
       style={style}
       data={data}
-      defaultScaleInfo={{
-        // scale: 0.4,
-        // offsetX: -200,
-        // offsetY: -200
-
-        // scale: 0.5,
-        // offsetX: 1400,
-        // offsetY: -200
-
-        // scale: 0.1,
-        // offsetX: -1000,
-        // offsetY: -500
-
-        scale: 0.12,
-        offsetX: -800,
-        offsetY: -500
-        // offsetY: 4100
-
-        // scale: 1,
-        // offsetX: 0,
-        // offsetY: 0
-      }}
+      // defaultScaleInfo={
+      //   {
+      //     // scale: 0.4,
+      //     // offsetX: -200,
+      //     // offsetY: -200
+      //     // scale: 0.5,
+      //     // offsetX: 1400,
+      //     // offsetY: -200
+      //     // scale: 0.1,
+      //     // offsetX: -1000,
+      //     // offsetY: -500
+      //     // offsetY: 4100
+      //     // scale: 1,
+      //     // offsetX: 0,
+      //     // offsetY: 0
+      //     // scale: 0.12,
+      //     // offsetX: -800,
+      //     // offsetY: -500
+      //   }
+      // }
     />
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.21",
+  "version": "0.4.0-alpha.24",
   "workspaces": [
     "packages/*"
   ],
@@ -16,11 +16,13 @@
     "precommit": "npm run lint",
     "prepush": "npm run lint",
     "clear:jest": "rm -rf ./packages/*/__tests__/__snapshots__",
-    "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
+    "version:reset": "ts-node --project ./tsconfig.node.json ./scripts/upgrade-version.ts",
+    "version:reset-for-release": "ts-node --project ./tsconfig.node.json ./scripts/upgrade-version.ts --for-release",
+    "upgrade:version": "npm run version:reset && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.21",
-    "antd": "5.12.1"
+    "idraw": "0.4.0-beta.24",
+    "antd": "5.17.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",

packages/studio-base/package.json

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

packages/studio-base/src/modules/page-tree/index.tsx

@@ -65,7 +65,7 @@ export const PageTree = React.forwardRef((props: PageTreeProps, ref: any) => {
         className={classnames(generateClassName(modName), className)}
         showLine
         blockNode
-        // multiple
+        multiple
         selectedKeys={selectedKeys}
         switcherIcon={<IconDown />}
         // icon={(props: any) => {

packages/studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.21",
+  "version": "0.4.0-alpha.24",
   "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.21",
+    "@idraw/studio-base": "workspace:^0.4.0-alpha.24",
     "classnames": "^2.3.2",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
-    "antd": "^5.12.1",
-    "idraw": "^0.4.0-beta.21",
+    "antd": "^5.17.3",
+    "idraw": "^0.4.0-beta.24",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio/src/modules/nav-menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useContext } from 'react';
+import React, { useMemo, useState, useContext, useEffect } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import { generateClassName, IconRect, IconCircle, IconText, IconStar, IconGroup, IconImage, IconHTML } from '@idraw/studio-base';
@@ -37,10 +37,21 @@ export const NavMenu = (props: NavMenuProps) => {
     domEvent.preventDefault();
     sharedEvent.trigger('createElement', { type: key as ElementType, element: { name: key } });
   };
-
   const { state } = useContext(Context);
   const { editMode, pageTree } = state;
-  const disabledAddElement = !!(editMode === 'page' && pageTree.length === 0);
+
+  const [isPageOverview, setIsPageOverview] = useState<boolean>(false);
+  useEffect(() => {
+    const switchPageOverviewCallback = (e: { isPageOverview: boolean }) => {
+      const { isPageOverview } = e;
+      setIsPageOverview(!!isPageOverview);
+    };
+    sharedEvent.on('switchPageOverview', switchPageOverviewCallback);
+    return () => {
+      sharedEvent.off('switchPageOverview', switchPageOverviewCallback);
+    };
+  }, []);
+  const disabledAddElement = !!(editMode === 'page' && (pageTree.length === 0 || isPageOverview));
 
   const resetDevicePixelRatio = (radio: number) => {
     const idraw = sharedStore.get('idraw');

packages/studio/src/modules/panel-page/add-page-button.tsx

@@ -14,10 +14,11 @@ export interface AddPageButtonProps {
   parentModName: string;
   sharedEvent: SharedEvent;
   sharedStore: SharedStore;
+  inPageOverview: boolean;
 }
 
 export const AddPageButton = (props: AddPageButtonProps) => {
-  const { className, style, parentModName, sharedEvent, sharedStore } = props;
+  const { className, style, parentModName, inPageOverview, sharedEvent, sharedStore } = props;
   const rootClassName = generateClassName(parentModName, modName);
 
   return useMemo(() => {
@@ -80,7 +81,8 @@ export const AddPageButton = (props: AddPageButtonProps) => {
                     }
                   };
                   sharedEvent.trigger('addPage', {
-                    element: pageElement
+                    element: pageElement,
+                    inPageOverview
                   });
                 }
               }
@@ -138,7 +140,8 @@ export const AddPageButton = (props: AddPageButtonProps) => {
                     }
                   };
                   sharedEvent.trigger('addPage', {
-                    element: pageElement
+                    element: pageElement,
+                    inPageOverview
                   });
                 }
               }
@@ -162,5 +165,5 @@ export const AddPageButton = (props: AddPageButtonProps) => {
         </Button>
       </Dropdown>
     );
-  }, [style, className]);
+  }, [style, className, inPageOverview]);
 };

packages/studio/src/modules/panel-page/index.tsx

@@ -55,6 +55,7 @@ export const PanelPage = (props: PanelPageProps) => {
   const [contextMenuOptions] = useContextMenuOptions({ sharedEvent, sharedStore });
   const [moduleLocale] = useLocale('contextMenu');
   const [inPageOverview, setInPageOverview] = useState<boolean>(false);
+  const refInPageOverview = useRef<boolean>(inPageOverview);
 
   const getSelectedPageKeys = () => {
     const keys: string[] = [];
@@ -66,6 +67,21 @@ export const PanelPage = (props: PanelPageProps) => {
   };
   const [selectedPageUUIDs, setSelectedPageUUIDs] = useState<string[]>(getSelectedPageKeys());
 
+  useEffect(() => {
+    const idraw = sharedStore.get('idraw');
+    const listenSelectedPage = (e: { uuids: string[] }) => {
+      if (refInPageOverview.current === true) {
+        const { uuids } = e;
+        setSelectedPageUUIDs([...uuids]);
+      }
+    };
+    idraw?.on(eventKeys.select, listenSelectedPage);
+
+    return () => {
+      idraw?.off(eventKeys.select, listenSelectedPage);
+    };
+  }, []);
+
   useEffect(() => {
     if (editingDataPosition.length === 1 && pageTree.length > 0) {
       const pageUUID = pageTree[editingDataPosition[0]]?.uuid;
@@ -122,6 +138,11 @@ export const PanelPage = (props: PanelPageProps) => {
     resetContentHeight();
   }, [height, inPageOverview]);
 
+  useEffect(() => {
+    refInPageOverview.current = inPageOverview;
+    sharedEvent.trigger('switchPageOverview', { isPageOverview: !!inPageOverview });
+  }, [inPageOverview]);
+
   const getCurrentName = () => {
     if (editingDataPosition.length === 0) {
       return '';
@@ -186,9 +207,8 @@ export const PanelPage = (props: PanelPageProps) => {
       collapsible: inPageOverview ? 'disabled' : undefined,
       label: (
         <div className={headerClassName} style={{ height: headerHeight }}>
-          <span style={{ marginRight: 10 }}>Pages</span>
           <div style={{ display: 'flex' }}>
-            <AddPageButton parentModName={modName} sharedEvent={sharedEvent} sharedStore={sharedStore} />
+            <span style={{ marginRight: 10 }}>Pages</span>
             <Button
               className={headerBtnClassName}
               style={{ marginLeft: '10px' }}
@@ -201,6 +221,9 @@ export const PanelPage = (props: PanelPageProps) => {
               }}
             />
           </div>
+          <div style={{ display: 'flex' }}>
+            <AddPageButton inPageOverview={inPageOverview} parentModName={modName} sharedEvent={sharedEvent} sharedStore={sharedStore} />
+          </div>
         </div>
       ),
       children: (
@@ -239,15 +262,17 @@ export const PanelPage = (props: PanelPageProps) => {
               }}
               onSelect={(e) => {
                 if (e?.positions.length === 1) {
+                  const idraw = sharedStore.get('idraw');
+                  idraw?.trigger(eventKeys.select, { uuids: [] });
+                  idraw?.trigger(eventKeys.clearSelect);
                   if (inPageOverview) {
                     if (!selectedPageUUIDs?.includes(e.uuids[0])) {
                       selectElementsByPositions(e.positions);
                       setSelectedPageUUIDs([e.uuids[0]]);
                     }
                     return;
                   }
-                  const idraw = sharedStore.get('idraw');
-                  idraw?.trigger(eventKeys.clearSelect);
+
                   sharedEvent.trigger('resetEditingView', { type: 'go-to-page', position: e.positions[0] });
 
                   const keys: string[] = [];

packages/studio/src/modules/sketch/index.tsx

@@ -233,12 +233,13 @@ export const Sketch = (props: SketchProps) => {
     };
 
     const addPageCallback = (e: SharedEventMap['addPage']) => {
-      const { element } = e;
+      const { element, inPageOverview } = e;
+
       const { w, h, detail } = element;
       const data = refData.current;
       data.elements = [...data.elements, ...[element]];
       const { children, ...restDetail } = detail;
-      const editingData: Data = {
+      let editingData: Data = {
         elements: element.detail.children,
         layout: {
           x: 0,
@@ -257,6 +258,12 @@ export const Sketch = (props: SketchProps) => {
       };
 
       const pageTree = getElementTree(data);
+      let editingDataPosition: ElementPosition = [pageTree.length - 1];
+      if (inPageOverview === true) {
+        editingData = data;
+        editingDataPosition = [];
+      }
+
       const elementTree = getElementTree(editingData);
       idraw.centerContent({ data: editingData });
       dispatch({
@@ -266,7 +273,7 @@ export const Sketch = (props: SketchProps) => {
           editingData: editingData,
           elementTree,
           pageTree,
-          editingDataPosition: [pageTree.length - 1]
+          editingDataPosition
         }
       });
     };

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

@@ -35,6 +35,7 @@ export interface SharedEventMap {
   };
   addPage: {
     element: Element<'group'>;
+    inPageOverview: boolean;
   };
   deletePage: {
     uuid: string;
@@ -58,6 +59,7 @@ export interface SharedEventMap {
   changeLocale: { locale: LocaleCode };
   trackDataChange: { data: Data };
   trackEditingDataChange: { editingData: Data; editingDataPosition: ElementPosition };
+  switchPageOverview: { isPageOverview: boolean };
 }
 
 export type SharedEvent = EventEmitter<SharedEventMap>;