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

feat: enhance template preview and element tree
idrawjs · Jul 14, 2024 · a4137a2 · a4137a2
2 parents 4368232 + ae0f61a
commit a4137a2
Show file tree

Hide file tree

Showing 16 changed files with 1,539 additions and 972 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.32",
+  "version": "0.4.0-alpha.33",
   "workspaces": [
     "packages/*"
   ],
@@ -21,57 +21,57 @@
     "upgrade:version": "npm run version:reset && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.32",
+    "idraw": "0.4.0-beta.33",
     "antd": "5.18.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/core": "^7.24.8",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@rc-component/color-picker": "^1.5.3",
+    "@rc-component/color-picker": "^1.6.1",
     "@rollup/plugin-json": "^6.1.0",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.12",
     "@types/koa-compose": "^3.2.8",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/serve-handler": "^6.1.4",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "antd": "^5.18.1",
+    "antd": "^5.19.1",
     "babel-jest": "^29.7.0",
     "chalk": "^5.3.0",
     "dotenv": "^16.4.5",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.21.5",
-    "eslint": "^9.5.0",
-    "execa": "^9.2.0",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.7.0",
+    "execa": "^9.3.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.4.1",
+    "glob": "^11.0.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jimp": "^0.22.12",
     "koa-compose": "^4.1.0",
     "less": "^4.2.0",
-    "pixelmatch": "^5.3.0",
+    "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.18.0",
+    "rollup": "^4.18.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "serve-handler": "^6.1.5",
-    "terser": "^5.31.1",
-    "ts-morph": "^22.0.0",
+    "terser": "^5.31.2",
+    "ts-morph": "^23.0.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1",
-    "vite-node": "^1.6.0"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-node": "^2.0.2"
   }
 }
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.32",
+  "version": "0.4.0-alpha.33",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@rc-component/color-picker": "^1.5.3",
     "antd": "^5.18.3",
     "classnames": "^2.3.2",
-    "idraw": "^0.4.0-beta.32",
+    "idraw": "^0.4.0-beta.33",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/packages/studio-base/src/modules/element-tree/tree-node.tsx b/packages/studio-base/src/modules/element-tree/tree-node.tsx
@@ -15,6 +15,8 @@ import IconImage from '../../icons/image';
 import IconPath from '../../icons/path';
 import IconHTML from '../../icons/html';
 import IconArrowRight from '../../icons/arrow-right';
+import IconLock from '../../icons/lock';
+import IconUnlock from '../../icons/unlock';
 
 import IconCloseCircle from '../../icons/close-circle';
 
@@ -181,16 +183,16 @@ export const TreeNode = (props: TreeNodeProps) => {
     onGoToGroup?.({ uuid, position });
   };
 
-  // const onClickToggleLock = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-  //   e.stopPropagation();
-  //   e.preventDefault();
-  //   onOperationToggle?.({
-  //     uuid: nodeKey,
-  //     operations: {
-  //       lock: !operations.lock
-  //     }
-  //   });
-  // };
+  const onClickToggleLock = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onOperationToggle?.({
+      uuid: nodeKey,
+      operations: {
+        locked: !operations.locked
+      }
+    });
+  };
 
   return useMemo(() => {
     refTitle.current = title;
@@ -237,11 +239,11 @@ export const TreeNode = (props: TreeNodeProps) => {
               <IconVisible className={iconClassName} onClick={onClickToggleVisible} />
             )}
 
-            {/* {operations.lock ? (
-            <IconLock className={iconClassName} onClick={onClickToggleLock} />
-          ) : (
-            <IconUnlock className={iconClassName} onClick={onClickToggleLock} />
-          )} */}
+            {operations.locked ? (
+              <IconLock className={iconClassName} onClick={onClickToggleLock} />
+            ) : (
+              <IconUnlock className={iconClassName} onClick={onClickToggleLock} />
+            )}
             {/* <IconEdit className={iconClassName} onClick={onClickToEdit} /> */}
             <IconCloseCircle className={iconClassName} onClick={onClickToDelete} />
           </span>

diff --git a/packages/studio-base/src/modules/page-tree/tree-node.tsx b/packages/studio-base/src/modules/page-tree/tree-node.tsx
@@ -171,7 +171,7 @@ export const TreeNode = (props: TreeNodeProps) => {
   //   onOperationToggle?.({
   //     uuid: nodeKey,
   //     operations: {
-  //       lock: !operations.lock
+  //       locked: !operations.locked
   //     }
   //   });
   // };

diff --git a/packages/studio/package.json b/packages/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.32",
+  "version": "0.4.0-alpha.33",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,13 +21,13 @@
   "license": "MIT",
   "dependencies": {
     "@rc-component/color-picker": "^1.5.3",
-    "@idraw/studio-base": "workspace:^0.4.0-alpha.32",
+    "@idraw/studio-base": "workspace:^0.4.0-alpha.33",
     "classnames": "^2.5.1",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.18.3",
-    "idraw": "^0.4.0-beta.32",
+    "idraw": "^0.4.0-beta.33",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/packages/studio/src/css/modules/template-preview.less b/packages/studio/src/css/modules/template-preview.less
@@ -19,9 +19,11 @@
 .@{mod-template-preview}-footer {
   margin: 0 auto;
   padding-bottom: 40px;
-  display: block;
+  display: flex;
   width: 100%;
   text-align: center;
+  justify-content: center;
+  align-items: center;
 }
 
 .@{mod-template-preview}-item {
@@ -84,3 +86,17 @@
   max-height: 100%;
   overflow: auto;
 }
+
+.@{mod-template-preview}-detail {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  .@{mod-template-preview}-detail-canvas {
+    display: flex;
+  }
+  .@{mod-template-preview}-detail-action {
+    display: flex;
+  }
+}
diff --git a/packages/studio/src/locale/languages/en-US.ts b/packages/studio/src/locale/languages/en-US.ts
@@ -34,6 +34,10 @@ const localeValues: Locale = {
     pcPageTemplates: 'PC page templates',
     mobilePageTemplates: 'Mobile page templates'
   },
+  TemplatePreview: {
+    add: 'Add',
+    cancel: 'Cancel'
+  },
   contextMenu: {
     copy: 'Copy',
     paste: 'Paste',

diff --git a/packages/studio/src/locale/languages/zh-CN.ts b/packages/studio/src/locale/languages/zh-CN.ts
@@ -34,6 +34,10 @@ const localeValues: Locale = {
     pcPageTemplates: 'PC页面模板',
     mobilePageTemplates: '移动页面模板'
   },
+  TemplatePreview: {
+    add: '添加',
+    cancel: '取消'
+  },
   contextMenu: {
     copy: '复制',
     paste: '粘贴',

diff --git a/packages/studio/src/modules/panel-page/add-page-button.tsx b/packages/studio/src/modules/panel-page/add-page-button.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { ConfigContext, generateClassName, IconFileAdd } from '@idraw/studio-base';
 import { Button, Drawer, message } from 'antd';
 import { calcElementListSize, deepCloneElement } from 'idraw';
-import type { PointSize } from 'idraw';
+import type { PointSize, Element } from 'idraw';
 import type { SharedEvent, SharedStore, GetTemplates } from '../../types';
 import { useLocale } from '../../locale';
 import { TemplatePreview, templatePreivewDrawerStyles } from '../template-preview';
@@ -74,7 +74,7 @@ export const AddPageButton = (props: AddPageButtonProps) => {
               }
               sharedEvent.trigger('addPage', {
                 element: {
-                  ...elem,
+                  ...(elem as Element<'group'>),
                   ...start
                 },
                 inPageOverview

diff --git a/packages/studio/src/modules/panel-page/index.tsx b/packages/studio/src/modules/panel-page/index.tsx
@@ -58,6 +58,7 @@ export const PanelPage = (props: PanelPageProps) => {
   const [moduleLocale] = useLocale('PanelPage');
   const [inPageOverview, setInPageOverview] = useState<boolean>(false);
   const refInPageOverview = useRef<boolean>(inPageOverview);
+  const refPreviousSelectedUUIDs = useRef<string[]>([]);
 
   const getSelectedPageKeys = () => {
     const keys: string[] = [];
@@ -161,17 +162,33 @@ export const PanelPage = (props: PanelPageProps) => {
   };
 
   useEffect(() => {
-    sharedEvent.on('scrollToLayer', ({ uuid }) => {
+    const scrollToLayer = ({ uuid }: { uuid: string }) => {
       if (uuid) {
         refElementTree.current?.scrollTo({
           key: uuid,
           align: 'top'
           // offset: 0
         });
       }
-    });
+    };
+    sharedEvent.on('scrollToLayer', scrollToLayer);
+    return () => {
+      sharedEvent.off('scrollToLayer', scrollToLayer);
+    };
   }, []);
 
+  useEffect(() => {
+    if (selectedUUIDs.length === 1) {
+      if (refPreviousSelectedUUIDs.current[0] !== selectedUUIDs[0]) {
+        refElementTree.current?.scrollTo({
+          key: selectedUUIDs[0],
+          align: 'auto'
+        });
+      }
+    }
+    refPreviousSelectedUUIDs.current = [...selectedUUIDs];
+  }, [selectedUUIDs]);
+
   useEffect(() => {
     if (!selectedUUIDs[0]) {
       return;
@@ -362,6 +379,10 @@ export const PanelPage = (props: PanelPageProps) => {
                     type: 'update',
                     payload: { editingData: { ...editingData }, elementTree }
                   });
+                  const idraw = sharedStore.get('idraw');
+                  if (operations.locked === true) {
+                    idraw?.cancelElements();
+                  }
                 }}
                 onSelect={(e) => {
                   if (!selectedUUIDs?.includes(e.uuids[0])) {

diff --git a/packages/studio/src/modules/sketch/index.tsx b/packages/studio/src/modules/sketch/index.tsx
@@ -238,7 +238,7 @@ export const Sketch = (props: SketchProps) => {
       const { w, h, detail } = element;
       const data = refData.current;
       data.elements = [...data.elements, ...[element]];
-      const { children, ...restDetail } = detail;
+      const { children = [], ...restDetail } = detail;
       let editingData: Data = {
         elements: element.detail.children,
         layout: {
@@ -261,6 +261,7 @@ export const Sketch = (props: SketchProps) => {
       }
 
       const elementTree = getElementTree(editingData);
+      idraw.cancelElements();
       idraw.centerContent({ data: editingData });
       dispatch({
         type: 'update',