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

feat: add export files features

Author: chenshenhai

README.md

@@ -13,16 +13,7 @@
   <a href="https://idraw.js.org/studio/" target="_blank">idraw.js.org/studio/</a>
 </p>
 
-> Note:
-> At present, the development content of the main branch is v0.4, and it is currently in the development and reconstruction stage, mainly based on the v0.3 version for optimization and reconstruction.
-> The npm module is version v0.2.0-alpha.*. If you encounter any problems while using the npm module, you can view the content of this branch: [https://github.com/idrawjs/studio/tree/v0.3](https://github.com/idrawjs/studio/tree/v0.3)
-
-
-> 注意:
-> 当前`main`分支开发内容为`v0.4`，目前处于开发重构阶段，主要基于`v0.3`版本进行优化重构。
-> 目前npm 模块是`v0.3 `版本。 如果你在使用npm模块的过程中遇到什么问题，可以查看这个分支的内容： [https://github.com/idrawjs/studio/tree/v0.3](https://github.com/idrawjs/studio/tree/v0.3)
-
-
+ 
 ## @idraw/studio Preview
 
 You can click [idraw.js.org/studio/](https://idraw.js.org/studio) to experience it.
@@ -84,7 +75,7 @@ git clone [email protected]:idrawjs/studio.git
 
 cd studio
 
-npm install
+pnpm install
 
 npm run dev
 ```

examples/studio-dist/index.tsx

@@ -24,6 +24,12 @@ const App = () => {
 
   return (
     <Studio
+      logo={
+        <span style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+          <img style={{ width: 24, marginRight: 10 }} src="https://github.com/idrawjs/idraw/assets/8216630/bcf8fbc6-6374-4cb9-a67f-1687d029a863" />
+          <span>@idraw/studio</span>
+        </span>
+      }
       width={width}
       height={height}
       style={style}

examples/studio/index.tsx

@@ -24,6 +24,12 @@ const App = () => {
 
   return (
     <Studio
+      logo={
+        <span style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+          <img style={{ width: 24, marginRight: 10 }} src="https://github.com/idrawjs/idraw/assets/8216630/bcf8fbc6-6374-4cb9-a67f-1687d029a863" />
+          <span>@idraw/studio</span>
+        </span>
+      }
       width={width}
       height={height}
       style={style}

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.5",
+  "version": "0.4.0-alpha.6",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +19,7 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.1",
+    "idraw": "0.4.0-beta.4",
     "antd": "5.12.1"
   },
   "devDependencies": {

packages/studio-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/studio-base",
-  "version": "0.4.0-alpha.5",
+  "version": "0.4.0-alpha.6",
   "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.1",
+    "idraw": "^0.4.0-beta.4",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"

packages/studio-base/src/css/modules/element-tree.less

@@ -48,7 +48,7 @@
     top: 0;
     bottom: 0;
     left: 0;
-    right: 8px;
+    right: 0;
     display: inline-flex;
     // display: none;
     float: inline-start;

packages/studio-base/src/css/modules/scale-selector.less

@@ -14,7 +14,7 @@
 
 .@{base-scale-selector}-menu-item {
   display: inline-flex;
-  width: 150px;
+  width: 100px;
 
   .@{base-scale-selector}-input {
     width: 100%;

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

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { Tree } from 'antd';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import type { CSSProperties } from 'react';
-import type { TreeProps } from 'antd';
+import type { TreeProps, TreeDataNode } from 'antd';
 import type { ElementPosition } from 'idraw';
 import { ConfigContext } from '../config-provider';
 import { wrapTreeViewData } from './wrap';
@@ -13,17 +13,15 @@ import type { ElementTreeData } from '../../types';
 const { DirectoryTree } = Tree;
 const modName = 'base-element-tree';
 
-export type ElementTreeProps = Pick<
-  TreeNodeProps,
-  'onTitleChange' | 'onOperationToggle'
-> & {
+export type ElementTreeProps = Pick<TreeNodeProps, 'onTitleChange' | 'onOperationToggle'> & {
   height: number;
   className?: string;
   style?: CSSProperties;
   treeData?: ElementTreeData;
   selectedKeys?: string[];
   defaultExpandedKeys?: string[];
   expandedKeys?: string[];
+  onExpand?: (keys: string[], e: { expanded: boolean; nativeEvent: React.PointerEvent; node: TreeDataNode }) => void;
   defaultExpandAll?: boolean;
   onSelect?: (e: { uuids: string[]; positions: ElementPosition[] }) => void;
   onDrop?: (e: { from: ElementPosition; to: ElementPosition }) => void;
@@ -36,7 +34,7 @@ const treePosToElementPosition = (pos: string) => {
   return elemPos;
 };
 
-export const ElementTree = (props: ElementTreeProps) => {
+export const ElementTree = React.forwardRef((props: ElementTreeProps, ref: any) => {
   const {
     height,
     className,
@@ -48,7 +46,9 @@ export const ElementTree = (props: ElementTreeProps) => {
     selectedKeys,
     onDrop,
     defaultExpandedKeys,
-    onDelete
+    expandedKeys,
+    onDelete,
+    onExpand
   } = props;
   const { createPrefixName } = useContext(ConfigContext);
   const getPrefixName = createPrefixName(modName);
@@ -68,16 +68,19 @@ export const ElementTree = (props: ElementTreeProps) => {
       getPrefixName,
       onTitleChange,
       onOperationToggle,
-      onDelete: onElementDelete
+      onDelete: onElementDelete,
+      position: []
     });
 
     return (
       <DirectoryTree
+        ref={ref}
         height={height}
         style={style}
         className={classnames(getPrefixName(), className)}
         showLine
         blockNode
+        multiple
         selectedKeys={selectedKeys}
         switcherIcon={<DownOutlined />}
         // icon={(props: any) => {
@@ -88,8 +91,9 @@ export const ElementTree = (props: ElementTreeProps) => {
         onSelect={onSelectNode}
         treeData={wrappedTreeData}
         defaultExpandedKeys={defaultExpandedKeys}
-        // expandedKeys={expandedKeys}
+        expandedKeys={expandedKeys}
         // defaultExpandAll={defaultExpandAll}
+        onExpand={onExpand as any}
         draggable={{
           icon: false,
           nodeDraggable: () => true
@@ -112,4 +116,4 @@ export const ElementTree = (props: ElementTreeProps) => {
       />
     );
   }, [className, style, onSelectNode, treeData, selectedKeys]);
-};
+});

packages/studio-base/src/modules/element-tree/tree-node.tsx

@@ -1,13 +1,14 @@
-import React, { useMemo, useState, useRef } from 'react';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
-import type { ElementType, ElementOperations } from 'idraw';
+import type { ElementType, ElementOperations, ElementPosition } from 'idraw';
 import { Input } from 'antd';
+import type { InputRef } from 'antd';
 import IconVisible from '../../icons/visible';
 import IconInvisible from '../../icons/invisible';
 // import IconUnlock from '../../icons/unlock';
 // import IconLock from '../../icons/lock';
-import IconCheck from '../../icons/check';
+// import IconCheck from '../../icons/check';
 import IconRect from '../../icons/rect';
 import IconCircle from '../../icons/circle';
 import IconText from '../../icons/text';
@@ -16,28 +17,31 @@ import IconStar from '../../icons/star';
 import IconImage from '../../icons/image';
 import IconPath from '../../icons/path';
 import IconHTML from '../../icons/html';
-import IconEdit from '../../icons/edit';
+// import IconEdit from '../../icons/edit';
 // import IconDelete from '../../icons/delete';
 
 import IconCloseCircle from '../../icons/close-circle';
 
 const modName = 'node';
 
 export interface TreeNodeProps {
+  uuid: string;
   nodeKey: string;
   title: string;
-  operatinos: ElementOperations;
+  operations: ElementOperations;
+  position: ElementPosition;
   className?: string;
   type?: ElementType;
   style?: CSSProperties;
   getPrefixName: (...args: string[]) => string;
   onTitleChange?: (e: { uuid: string; value: string }) => void;
   onOperationToggle?: (e: { uuid: string; operations: ElementOperations }) => void;
   onDelete?: (e: { uuid: string }) => void;
+  onSelect?: (e: { uuids: string[]; positions: ElementPosition[] }) => void;
 }
 
 export const TreeNode = (props: TreeNodeProps) => {
-  const { className, style, type, nodeKey, title, getPrefixName, onTitleChange, onOperationToggle, onDelete, operatinos } = props;
+  const { className, style, type, uuid, nodeKey, title, position, getPrefixName, onTitleChange, onOperationToggle, onDelete, onSelect, operations } = props;
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [showAction, setShowAction] = useState<boolean>(false);
   const refTitle = useRef<string>(title);
@@ -48,6 +52,8 @@ export const TreeNode = (props: TreeNodeProps) => {
   const titleInputClassName = getPrefixName(modName, 'title', 'input');
   const titleIconClassName = getPrefixName(modName, 'title', 'icon');
   const actionClassName = getPrefixName(modName, 'action');
+  const clickTime = useRef<number>(0);
+  const refInput = useRef<InputRef | null>(null);
 
   // useEffect(() => {
   //   refTitle.current = title;
@@ -71,15 +77,21 @@ export const TreeNode = (props: TreeNodeProps) => {
   //   setIsEdit(true);
   // };
 
+  useEffect(() => {
+    if (isEdit === true) {
+      refInput.current?.focus();
+    }
+  }, [isEdit]);
+
   const onTitleInputBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
     setIsEdit(false);
     onTitleChange?.({ uuid: nodeKey, value: e.target.value || '' });
   };
-  const onTitleInputOk = (e: any) => {
-    e.stopPropagation();
-    setIsEdit(false);
-    onTitleChange?.({ uuid: nodeKey, value: refTitle.current || '' });
-  };
+  // const onTitleInputOk = (e: any) => {
+  //   e.stopPropagation();
+  //   setIsEdit(false);
+  //   onTitleChange?.({ uuid: nodeKey, value: refTitle.current || '' });
+  // };
   const onTitleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     refTitle.current = e.target.value || '';
   };
@@ -105,10 +117,26 @@ export const TreeNode = (props: TreeNodeProps) => {
     setShowAction(false);
   };
 
-  const onClickToEdit = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setIsEdit(true);
+  // const onClickToEdit = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  //   e.stopPropagation();
+  //   e.preventDefault();
+  //   setIsEdit(true);
+  // };
+
+  const onClickTitle = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const nowTime = Date.now();
+    const countTime = nowTime - clickTime.current;
+    clickTime.current = nowTime;
+
+    onSelect?.({
+      uuids: [uuid],
+      positions: [position]
+    });
+    if (countTime <= 300 && countTime > 0) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsEdit(true);
+    }
   };
 
   const onClickToDelete = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -125,7 +153,7 @@ export const TreeNode = (props: TreeNodeProps) => {
     onOperationToggle?.({
       uuid: nodeKey,
       operations: {
-        invisible: !operatinos.invisible
+        invisible: !operations.invisible
       }
     });
   };
@@ -136,7 +164,7 @@ export const TreeNode = (props: TreeNodeProps) => {
   //   onOperationToggle?.({
   //     uuid: nodeKey,
   //     operations: {
-  //       lock: !operatinos.lock
+  //       lock: !operations.lock
   //     }
   //   });
   // };
@@ -165,42 +193,50 @@ export const TreeNode = (props: TreeNodeProps) => {
     }
 
     return (
-      <span key={nodeKey} style={style} className={classnames(rootClassName, className)} onMouseOver={onNodeMouseOver} onMouseLeave={onNodeMouseLeave}>
+      <span
+        key={nodeKey}
+        style={style}
+        className={classnames(rootClassName, className)}
+        onClick={onClickTitle}
+        onMouseOver={onNodeMouseOver}
+        onMouseLeave={onNodeMouseLeave}
+      >
         <span className={titleClassName}>
           {getIcon(type)}
           <span>{title}</span>
         </span>
         {showAction && (
           <span className={actionClassName}>
-            {operatinos.invisible ? (
+            {operations.invisible ? (
               <IconInvisible className={iconClassName} onClick={onClickToggleVisible} />
             ) : (
               <IconVisible className={iconClassName} onClick={onClickToggleVisible} />
             )}
-            {/* {operatinos.lock ? (
+            {/* {operations.lock ? (
             <IconLock className={iconClassName} onClick={onClickToggleLock} />
           ) : (
             <IconUnlock className={iconClassName} onClick={onClickToggleLock} />
           )} */}
-            <IconEdit className={iconClassName} onClick={onClickToEdit} />
+            {/* <IconEdit className={iconClassName} onClick={onClickToEdit} /> */}
             <IconCloseCircle className={iconClassName} onClick={onClickToDelete} />
           </span>
         )}
 
         {isEdit && (
           <span className={titleInputClassName}>
             <Input
+              ref={refInput}
               size="small"
               defaultValue={title}
               onBlur={onTitleInputBlur}
               onClick={onTitleInputClick}
               onKeyDown={onTitleInputKeyDown}
               onChange={onTitleInputChange}
-              addonAfter={<IconCheck onClick={onTitleInputOk} />}
+              // addonAfter={<IconCheck onClick={onTitleInputOk} />}
             />
           </span>
         )}
       </span>
     );
-  }, [nodeKey, title, isEdit, type, showAction, operatinos]);
+  }, [nodeKey, title, isEdit, type, showAction, operations]);
 };