refactor: refactor the ItemPanel component

alibaba · Jan 9, 2020 · 871e311 · 871e311
1 parent 6ddd73a
commit 871e311
Show file tree

Hide file tree

Showing 8 changed files with 396 additions and 221 deletions.
diff --git a/examples/component-item-panel/index.less b/examples/component-item-panel/index.less
@@ -0,0 +1,36 @@
+:global {
+  #root {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+.editor {
+  display: flex;
+  flex: 1;
+  background-color: #f4f6f8;
+
+  &-hd {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px;
+    background: #ffffff;
+    border-right: 1px solid #e8e8e8;
+
+    .item {
+      margin-bottom: 24px;
+      user-select: none;
+
+      img {
+        display: block;
+      }
+    }
+  }
+
+  &-bd {
+    flex: 1;
+  }
+}
diff --git a/examples/component-item-panel/index.tsx b/examples/component-item-panel/index.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import GGEditor, { Flow, Item, ItemPanel } from '@/index';
+import data from '../mock/flow.json';
+import styles from './index.less';
+
+class Index extends React.Component {
+  render() {
+    return (
+      <GGEditor className={styles.editor}>
+        <ItemPanel className={styles.editorHd}>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'circle',
+              size: 100,
+              label: 'circle',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1IRuSnRr0gK0jSZFnXXbRRXXa-110-112.png"
+              width="55"
+              height="56"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'rect',
+              size: [100, 50],
+              label: 'rect',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1reKOnUT1gK0jSZFrXXcNCXXa-178-76.png"
+              width="89"
+              height="38"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'ellipse',
+              size: [100, 50],
+              label: 'ellipse',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1AvmVnUH1gK0jSZSyXXXtlpXa-216-126.png"
+              width="108"
+              height="63"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'diamond',
+              size: 100,
+              label: 'diamond',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1EB9VnNz1gK0jSZSgXXavwpXa-178-184.png"
+              width="89"
+              height="92"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'triangle',
+              size: 100,
+              label: 'triangle',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB12sC2nKH2gK0jSZJnXXaT1FXa-126-156.png"
+              width="63"
+              height="78"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'star',
+              size: 100,
+              label: 'star',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1m4O1nO_1gK0jSZFqXXcpaXXa-194-198.png"
+              width="97"
+              height="99"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'image',
+              size: 100,
+              label: 'image',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1eP94nKH2gK0jSZJnXXaT1FXa-112-134.png"
+              width="56"
+              height="67"
+              draggable={false}
+            />
+          </Item>
+          <Item
+            className={styles.item}
+            model={{
+              shape: 'bizNode',
+              size: [112, 66],
+              label: 'bizNode',
+              center: 'topLeft',
+            }}
+          >
+            <img
+              src="https://gw.alicdn.com/tfs/TB1_cbfnHj1gK0jSZFuXXcrHpXa-244-132.png"
+              width="112"
+              height="66"
+              draggable={false}
+            />
+          </Item>
+        </ItemPanel>
+        <Flow
+          className={styles.editorBd}
+          data={data}
+          graphConfig={{
+            defaultNode: {
+              shape: 'bizNode',
+            },
+            defaultEdge: {
+              shape: 'bizFlowEdge',
+            },
+          }}
+        />
+      </GGEditor>
+    );
+  }
+}
+
+ReactDOM.render(<Index />, document.getElementById('root'));
diff --git a/src/common/constants/index.ts b/src/common/constants/index.ts
@@ -1,6 +1,9 @@
 export const FLOW_CONTAINER_ID = 'J_FlowContainer';
 export const MIND_CONTAINER_ID = 'J_MindContainer';
 
+export const ADD_NODE_MODEL = 'ADD_NODE_MODEL';
+export const ADD_NODE_DELEGATE_SHAPE = 'ADD_NODE_DELEGATE_SHAPE';
+
 export const LABEL_DEFAULT_TEXT = '新建节点';
 
 export enum ShapeClassName {
@@ -30,6 +33,11 @@ export enum GraphType {
   Mind = 'Mind',
 }
 
+export enum GraphMode {
+  Default = 'default',
+  AddNode = 'addNode',
+}
+
 export enum GraphState {
   NodeSelected = 'NodeSelected',
   EdgeSelected = 'EdgeSelected',

diff --git a/src/common/interfaces/index.ts b/src/common/interfaces/index.ts
@@ -50,6 +50,10 @@ interface EdgeLabelCfg {
  */
 export interface NodeModel {
   id: string;
+  x?: number;
+  y?: number;
+  size?: number | number[];
+  anchorPoints?: number[][];
   shape?: string;
   style?: {
     // 节点填充颜色
@@ -71,10 +75,11 @@ export interface NodeModel {
   };
   label?: string;
   labelCfg?: NodeLabelCfg;
-  x?: number;
-  y?: number;
-  size?: number | number[];
-  anchorPoints?: number[][];
+
+  // 节点中心位置
+  center?: 'center' | 'topLeft';
+
+  [propName: string]: any;
 }
 
 /**
@@ -83,6 +88,18 @@ export interface NodeModel {
  */
 export interface EdgeModel {
   id: string;
+  source: string;
+  target: string;
+  sourceAnchor?: number;
+  targetAnchor?: number;
+  startPoint?: {
+    x: number;
+    y: number;
+  };
+  endPoint?: {
+    x: number;
+    y: number;
+  };
   shape?: string;
   style?: {
     // 边线颜色
@@ -106,18 +123,8 @@ export interface EdgeModel {
   };
   label?: string;
   labelCfg?: EdgeLabelCfg;
-  source: string;
-  target: string;
-  sourceAnchor?: number;
-  targetAnchor?: number;
-  startPoint?: {
-    x: number;
-    y: number;
-  };
-  endPoint?: {
-    x: number;
-    y: number;
-  };
+
+  [propName: string]: any;
 }
 
 /**