feat: add rect radius

nefe · Mar 1, 2020 · f9a2647 · f9a2647
1 parent 1a5a3f8
commit f9a2647
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 35 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: ['@typescript-eslint/tslint', 'react-hooks'],
+  rules: {
+    '@typescript-eslint/tslint/config': ['warn'],
+    'no-restricted-globals': 0,
+    'no-undef': 0,
+    'no-template-curly-in-string': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn'
+  }
+};
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@types/jest": "^24.9.1",
     "@types/node": "^12.12.29",
     "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react-dom": "^16.9.5"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/editor/EditorNode.scss b/src/editor/EditorNode.scss
@@ -12,11 +12,11 @@
     border-color: #6ca0f5;
   }
 
-  .polygon-border {
+  .rectRadius-border {
     border-color: #65ca92;
   }
 
-  .ellipse-border {
+  .diamond-border {
     border-color: #c6aaa7;
   }
 
@@ -28,11 +28,11 @@
     background: #6ca0f5;
   }
 
-  .polygon-bgColor {
+  .rectRadius-bgColor {
     background: #65ca92;
   }
 
-  .ellipse-bgColor {
+  .diamond-bgColor {
     background: #c6aaa7;
   }
 
@@ -44,11 +44,11 @@
     border-color: #5084d8;
   }
 
-  .polygon-clicked {
+  .rectRadius-clicked {
     border-color: #3b9262;
   }
 
-  .ellipse-clicked {
+  .diamond-clicked {
     border-color: #906e6a;
   }
 
@@ -64,11 +64,11 @@
     background: #5084d8;
   }
 
-  .polygon-parallel-clicked {
+  .rectRadius-parallel-clicked {
     background: #3b9262;
   }
 
-  .ellipse-parallel-clicked {
+  .diamond-parallel-clicked {
     background: #906e6a;
   }
 
@@ -111,3 +111,8 @@
 .editorNode-circle {
   border-radius: 50%;
 }
+
+.editorNode-rectRadius {
+  border-radius: 15px;
+}
+
diff --git a/src/editor/EditorNode.tsx b/src/editor/EditorNode.tsx
@@ -120,16 +120,23 @@ export function EditorNode(props: EditorNodeProps) {
     borderColor = `${currentNode.key}-border`;
   }
 
-  // 是否是圆形，TODO: 后续放开多边形
+  // 是否是圆形
   const isCircle = currentNode.key === "circle";
 
+  // 是否为圆角
+  const isRadius = currentNode.key === 'rectRadius';
+
+  // 是否为菱形
+  const isDiamond = currentNode.key === 'diamond';
+
   const borderClass = classNames(
     "editorNode-box",
     borderColor,
     {
       dragging: isDragged
     },
-    { "editorNode-circle": isCircle }
+    { "editorNode-circle": isCircle },
+    { "editorNode-rectRadius": isRadius},
   );
 
   const menuList = [
@@ -189,7 +196,7 @@ export function EditorNode(props: EditorNodeProps) {
       onContextMenu={interactive ? onContextMenu : null}
     >
       <div className="editorNode" ref={editorNodeRef}>
-        <div className={borderClass}>
+        <div className={borderClass} style={ { transform: isDiamond?`rotateZ(45deg) skew(30deg,30deg)`: 'none'}}>
           <div className="editorNode-box-property">
             <div className="editorNode-name">{currentNode.name}</div>
           </div>

diff --git a/src/editor/components/Node.tsx b/src/editor/components/Node.tsx
@@ -164,7 +164,6 @@ const Node = React.forwardRef((props: NodeProps, ref: any) => {
             data-type="edge"
             data-position={item.position}
             key={item.position}
-            href="javascript:void(0)"
             className={`node-selector`}
             style={item.style}
           />

diff --git a/src/editor/components/NodePanel.scss b/src/editor/components/NodePanel.scss
@@ -2,7 +2,6 @@
   width: 100%;
   height: 100%;
 
-  // é¡¶é¨æ§å¶æ¡é«åº¦
   $barHeight: 33px;
   $textColor: #4c4c4c;
   $activeColor: #d9dbe8;
@@ -154,4 +153,14 @@
       }
     }
   }
+
+  .diamond {
+    width: 36px; 
+    height: 36px; 
+    margin-top:5px;
+    transform:rotate(-45deg); 
+    background: transparent;
+    border:2px solid rgb(82, 97, 155);
+  }
+
 }
diff --git a/src/editor/defines.tsx b/src/editor/defines.tsx
@@ -154,7 +154,9 @@ export const LINKICON_HEIGHT = 18;
 
 export enum ComponentKey {
   rect = "rect",
+  rectRadius = 'rectRadius',
   circle = "circle",
+  diamond = "diamond",
   polygon = "polygon",
   ellipse = "ellipse",
   star = "star"
@@ -175,6 +177,18 @@ const COMMON_COMPONENT: Node[] = [
     ),
     disabled: false
   },
+  /** 矩形带圆角 */
+  {
+    type: ComponentType.common,
+    key: ComponentKey.rectRadius,
+    name: "RECT-RADIU",
+    width: 100,
+    height: 100,
+    icon: (
+      <div style={{ width: 36, height: 36, border: "2px solid #52619b", borderRadius: 10 }} />
+    ),
+    disabled: false
+  },
   /** 圆形 */
   {
     type: ComponentType.common,
@@ -200,7 +214,21 @@ const COMMON_COMPONENT: Node[] = [
       </svg>
     ),
     disabled: false
-  }
+  },
+  /** TODO 菱形 */
+  // {
+  //   type: ComponentType.common,
+  //   key: ComponentKey.diamond,
+  //   name: "DIAMOND",
+  //   width: 100,
+  //   height: 100,
+  //   icon: (
+  //     <div className="diamond">
+
+  //     </div>
+  //   ),
+  //   disabled: false
+  // }
   /** 多边形 */
   // {
   //   type: ComponentType.common,

diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -28,43 +28,43 @@ export default function EditorDemo(props) {
     setCopiedNodes
   } = useEditorStore();
 
-  // ç»å¸å®¹å¨
+  // 画布容器
   const screenRef = useRef(null);
 
-  // ç»å¸ ref
+  // 画布 ref
   const canvasRef = useRef({
     getWrappedInstance: () => Object
   } as any);
 
   const canvasInstance = canvasRef.current;
 
-  /** å é¤ç»ä»¶ */
+  /** 删除组件 */
   const handleDeleteNodes = (ids: string[]) => {
     if (!ids) {
       return;
     }
-    // å é¤ä¸ç»ä»¶ç¸è¿çè¿çº¿ï¼ä¸è®ºä¸æ¸¸æä¸æ¸¸
+    // 删除与组件相连的连线，不论上游或下游
 
     const newLinks = _.cloneDeep(links);
     ids.forEach(id => {
-      // å é¤ä¸èç¹è¿æ¥çä»»æè¾¹
+      // 删除与节点连接的任意边
       _.remove(newLinks, link => link.source === id || link.target === id);
     });
-    // æ´æ°è¿çº¿
+    // 更新连线
     setLinks(newLinks);
 
-    // åé¤components
+    // 剔除components
     const cloneNodes = _.cloneDeep(nodes);
     const newNodes = _.remove(cloneNodes, item => !ids.includes(item.id));
 
     setNodes(newNodes);
 
-    // æ¸ç©ºé«äº®ç¶æ
+    // 清空高亮状态
     setSelectedLinks([]);
     setSelectedNodes([]);
   };
 
-  /** å é¤è¿çº¿ */
+  /** 删除连线 */
   const handleDeleteLinks = (activeLinks: string[]) => {
     if (!activeLinks) {
       return;
@@ -75,7 +75,7 @@ export default function EditorDemo(props) {
     setLinks(newLinks);
   };
 
-  /** å¤å¶èç¹ */
+  /** 复制节点 */
   const handleNodesCopy = (ids: string[]) => {
     const newCopiedNodes = ids.map(id => {
       return _.find(nodes, item => item.id === id);
@@ -84,14 +84,14 @@ export default function EditorDemo(props) {
     setCopiedNodes(newCopiedNodes);
   };
 
-  /** ç²è´´èç¹ */
+  /** 粘贴节点 */
   const handleNodesPaste = () => {
     if (copiedNodes) {
       const currentCopied = copiedNodes.map(node => {
         return {
           ...node,
           id: uuid.v4(),
-          /**  @todo åç»å¯ä¼åå¸å±ç®æ³ */
+          /**  @todo 后续可优化布局算法 */
           x: node.x + node.width + 20,
           ref: React.createRef()
         };
@@ -101,29 +101,29 @@ export default function EditorDemo(props) {
     }
   };
 
-  // åªå
+  // 剪切
   const handleShear = () => {
     if (selectedNodes) {
       handleNodesCopy(selectedNodes);
       handleDeleteNodes(selectedNodes);
     }
   };
 
-  // å¤å¶
+  // 复制
   const handleCopy = () => {
     if (selectedNodes) {
       handleNodesCopy(selectedNodes);
     }
   };
 
-  // ç²è´´
+  // 粘贴
   const handlePaste = () => {
     if (copiedNodes) {
       handleNodesPaste();
     }
   };
 
-  // å é¤
+  // 删除
   const handleDelete = () => {
     if (selectedNodes) {
       handleDeleteNodes(selectedNodes);
@@ -159,7 +159,7 @@ export default function EditorDemo(props) {
 
 
 
-  /** æä½åº */
+  /** 操作区 */
   const renderOperation = (
     <div>
       <Toolbar
@@ -176,14 +176,14 @@ export default function EditorDemo(props) {
       />
     </div>
   );
-  /** æ¸²æèç¹éæ©åº */
+  /** 渲染节点选择区 */
   const renderNodePanel = (
     <div className="editor-nodePanel">
       <NodePanel onDrag={setDragNode} />
     </div>
   );
 
-  /** æ¸²æä¸é´ç»å¸åº */
+  /** 渲染中间画布区 */
   const renderCanvas = (
     <div className="editor-canvas">
       <CanvasContent
@@ -207,7 +207,7 @@ export default function EditorDemo(props) {
     </div>
   );
 
-  /** æ¸²æéç½®åº */
+  /** 渲染配置区 */
   const renderProperty = <div className="editor-property"></div>;
 
   return (