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

feat: enhance clipboard action
idrawjs · Aug 11, 2024 · 772374a · 772374a
2 parents 0cd7e49 + 4027cf2
commit 772374a
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 131 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.36",
+  "version": "0.4.0-alpha.37",
   "workspaces": [
     "packages/*"
   ],
@@ -21,7 +21,7 @@
     "upgrade:version": "npm run version:reset && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.36",
+    "idraw": "0.4.0-beta.37",
     "antd": "5.19.3"
   },
   "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.36",
+  "version": "0.4.0-alpha.37",
   "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.19.3",
     "classnames": "^2.3.2",
-    "idraw": "^0.4.0-beta.36",
+    "idraw": "^0.4.0-beta.37",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/packages/studio-base/src/modules/element-tree/index.tsx b/packages/studio-base/src/modules/element-tree/index.tsx
@@ -77,8 +77,7 @@ export const ElementTree = React.forwardRef((props: ElementTreeProps, ref: any)
     onDelete,
     onExpand,
     onGoToGroup,
-    // reverse // TODO
-    reverse = true
+    reverse
   } = props;
 
   const onSelectNode: TreeProps['onSelect'] = (skeys, info) => {

diff --git a/packages/studio/package.json b/packages/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio",
-  "version": "0.4.0-alpha.36",
+  "version": "0.4.0-alpha.37",
   "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.36",
+    "@idraw/studio-base": "workspace:^0.4.0-alpha.37",
     "classnames": "^2.5.1",
     "is-hotkey": "^0.2.0"
   },
   "peerDependencies": {
     "antd": "^5.19.3",
-    "idraw": "^0.4.0-beta.36",
+    "idraw": "^0.4.0-beta.37",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/packages/studio/src/modules/context-menu.tsx b/packages/studio/src/modules/context-menu.tsx
@@ -87,7 +87,7 @@ export const useContextMenuOptions: HookUseContextMenuOptions = (opts: { sharedE
   const updateContextMenuOptions: UpdateContextMenuOptions = (opts) => {
     const { selectedElements } = opts;
     innerItems?.forEach((item) => {
-      if (item && ['copy', 'paste', 'cut', 'delete'].includes(item?.key as string)) {
+      if (item && ['copy', 'cut', 'delete'].includes(item?.key as string)) {
         (item as any).disabled = selectedElements?.length > 0 ? false : true;
       }
     });

diff --git a/packages/studio/src/modules/dashboard/index.tsx b/packages/studio/src/modules/dashboard/index.tsx
@@ -10,6 +10,7 @@ import { Sketch } from '../sketch';
 // import SplitPane from '../split-pane';
 import type { SharedEvent, SharedStore, HookUseContextMenuOptions, GetTemplates } from '../../types';
 import { Context } from '../context';
+import { generatePasteEventCallback } from '../../shared/event';
 
 const modName = 'mod-dashboard';
 const leftSiderDefaultWidth = 240;
@@ -24,6 +25,7 @@ export interface DashboardProps {
   logo?: React.ReactNode;
   navigationMenu?: React.ReactNode;
   navigationCenter?: React.ReactNode;
+  reverseTree?: boolean;
   defaultSelectedElementUUIDs?: string[];
   sharedStore: SharedStore;
   sharedEvent: SharedEvent;
@@ -55,7 +57,8 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
     useContextMenuOptions,
     handleKeyboard,
     getPageTemplates,
-    getMaterialTemplates
+    getMaterialTemplates,
+    reverseTree
   } = props;
   const { state } = useContext(Context);
   const { editMode } = state;
@@ -69,9 +72,14 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
       }
       handleKeyboard(e, { sharedEvent, sharedStore });
     };
+
+    const pasteCallback = generatePasteEventCallback({ sharedStore, sharedEvent });
+
     window.addEventListener('keydown', hotKeyCallback);
+    window.addEventListener('paste', pasteCallback);
     return () => {
       window.removeEventListener('keydown', hotKeyCallback);
+      window.removeEventListener('paste', pasteCallback);
     };
   }, []);
 
@@ -182,6 +190,7 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
                   <PanelPage
                     height={height - headerHeight}
                     className={leftClassName}
+                    reverseTree={!!reverseTree}
                     defaultSelectedElementUUIDs={defaultSelectedElementUUIDs}
                     sharedEvent={sharedEvent}
                     sharedStore={sharedStore}
@@ -192,6 +201,7 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
                   <PanelLayer
                     height={height - headerHeight}
                     className={leftClassName}
+                    reverseTree={!!reverseTree}
                     // defaultSelectedElementUUIDs={defaultSelectedElementUUIDs}
                     sharedEvent={sharedEvent}
                     sharedStore={sharedStore}

diff --git a/packages/studio/src/modules/hot-key.ts b/packages/studio/src/modules/hot-key.ts
@@ -9,16 +9,17 @@ export const handleKeyboard = (
   }
 ) => {
   const { sharedEvent } = opts;
+  // if (isHotkey('mod+v', e)) {
+  //   sharedEvent.trigger('paste');
+  // } else
   if (isHotkey('mod+c', e)) {
-    sharedEvent.trigger('copy', undefined);
-  } else if (isHotkey('mod+v', e)) {
-    sharedEvent.trigger('paste', undefined);
+    sharedEvent.trigger('copy');
   } else if (isHotkey('mod+x', e)) {
-    sharedEvent.trigger('cut', undefined);
+    sharedEvent.trigger('cut');
   } else if (isHotkey('del', e)) {
-    sharedEvent.trigger('delete', undefined);
+    sharedEvent.trigger('delete');
   } else if (isHotkey('backspace', e)) {
-    sharedEvent.trigger('delete', undefined);
+    sharedEvent.trigger('delete');
   } else if (isHotkey('mod+s', e)) {
     console.log('Save ... '); //  TODO
   }

diff --git a/packages/studio/src/modules/panel-layer/index.tsx b/packages/studio/src/modules/panel-layer/index.tsx
@@ -15,13 +15,14 @@ export interface PanelLayerProps {
   height: number;
   style?: CSSProperties;
   // defaultSelectedElementUUIDs?: string[];
+  reverseTree: boolean;
   sharedStore: SharedStore;
   sharedEvent: SharedEvent;
   useContextMenuOptions: HookUseContextMenuOptions;
 }
 
 export const PanelLayer = (props: PanelLayerProps) => {
-  const { className, style, height, sharedStore, sharedEvent, useContextMenuOptions } = props;
+  const { className, style, height, sharedStore, sharedEvent, reverseTree, useContextMenuOptions } = props;
   const { state, dispatch } = useContext(Context);
   const { elementTree, selectedUUIDs, editingData } = state;
 
@@ -128,6 +129,7 @@ export const PanelLayer = (props: PanelLayerProps) => {
             <ElementTree
               ref={refTree}
               height={elementsHeight}
+              reverse={reverseTree}
               treeData={elementTree}
               selectedKeys={selectedUUIDs}
               onTitleChange={({ uuid, value }) => {

diff --git a/packages/studio/src/modules/panel-page/add-page-button.tsx b/packages/studio/src/modules/panel-page/add-page-button.tsx
@@ -20,10 +20,11 @@ export interface AddPageButtonProps {
   sharedStore: SharedStore;
   inPageOverview: boolean;
   getPageTemplates?: GetTemplates;
+  disabled: boolean;
 }
 
 export const AddPageButton = (props: AddPageButtonProps) => {
-  const { className, style, parentModName, inPageOverview, sharedEvent, sharedStore, getPageTemplates } = props;
+  const { className, style, parentModName, inPageOverview, sharedEvent, sharedStore, getPageTemplates, disabled } = props;
   const rootClassName = generateClassName(parentModName, modName);
   const [moduleLocale] = useLocale('PanelPage');
   const { getContainer } = useContext(ConfigContext);
@@ -38,6 +39,7 @@ export const AddPageButton = (props: AddPageButtonProps) => {
           type="text"
           style={style}
           className={classnames(rootClassName, className)}
+          disabled={disabled}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();

diff --git a/packages/studio/src/modules/panel-page/index.tsx b/packages/studio/src/modules/panel-page/index.tsx
@@ -22,6 +22,7 @@ export interface PanelPageProps {
   sharedEvent: SharedEvent;
   useContextMenuOptions: HookUseContextMenuOptions;
   getPageTemplates?: GetTemplates;
+  reverseTree: boolean;
 }
 
 const pageTreeKey = 'page-tree';
@@ -31,7 +32,7 @@ const pageTreeHeightRatio = 1;
 const elementTreeHeightRatio = 3;
 
 export const PanelPage = (props: PanelPageProps) => {
-  const { className, style, height, defaultSelectedElementUUIDs = [], sharedStore, sharedEvent, useContextMenuOptions, getPageTemplates } = props;
+  const { className, style, height, defaultSelectedElementUUIDs = [], sharedStore, sharedEvent, useContextMenuOptions, getPageTemplates, reverseTree } = props;
   const { state, dispatch } = useContext(Context);
   const { pageTree, elementTree, selectedUUIDs, editingData, editingDataPosition, data } = state;
 
@@ -73,7 +74,7 @@ export const PanelPage = (props: PanelPageProps) => {
   useEffect(() => {
     const idraw = sharedStore.getStatic('idraw');
     const listenSelectedPage = (e: { uuids?: string[] }) => {
-      if (refInPageOverview.current === true) {
+      if (inPageOverview === true) {
         const { uuids = [] } = e;
         setSelectedPageUUIDs([...uuids]);
       }
@@ -83,7 +84,7 @@ export const PanelPage = (props: PanelPageProps) => {
     return () => {
       idraw?.off(eventKeys.SELECT, listenSelectedPage);
     };
-  }, []);
+  }, [inPageOverview]);
 
   useEffect(() => {
     if (editingDataPosition.length === 1 && pageTree.length > 0) {
@@ -127,7 +128,10 @@ export const PanelPage = (props: PanelPageProps) => {
       const pageKeys: string[] = [];
       if (pageTree.length > 0) {
         pageKeys.push(pageTree[0].uuid);
-        sharedEvent.trigger('resetEditingView', { type: 'go-to-page', position: [0] });
+        sharedEvent.trigger('resetEditingView', {
+          type: 'go-to-page',
+          position: reverseTree === true ? [pageTree.length > 0 ? pageTree.length - 1 : 0] : [0]
+        });
       }
       setSelectedPageUUIDs(pageKeys);
       idraw?.enable('selectInGroup');
@@ -238,6 +242,7 @@ export const PanelPage = (props: PanelPageProps) => {
           </div>
           <div style={{ display: 'flex' }}>
             <AddPageButton
+              disabled={inPageOverview}
               inPageOverview={inPageOverview}
               parentModName={modName}
               sharedEvent={sharedEvent}
@@ -253,6 +258,7 @@ export const PanelPage = (props: PanelPageProps) => {
             <PageTree
               ref={refPageTree}
               height={pageTreeHeight}
+              reverse={reverseTree}
               treeData={pageTree}
               selectedKeys={selectedPageUUIDs}
               onTitleChange={({ uuid, value }) => {
@@ -355,6 +361,7 @@ export const PanelPage = (props: PanelPageProps) => {
               <ElementTree
                 ref={refElementTree}
                 height={elementTreeHeight}
+                reverse={reverseTree}
                 treeData={elementTree}
                 selectedKeys={selectedUUIDs}
                 // expandedKeys={expandedElementKeys}