Merge pull request #17 from yhlchao/master

fix(core): move the tool overlay out of the graph

Author: sunyongjian

Diff for: docs/guide/extension/extension-components.md

@@ -6,12 +6,12 @@
 
 ```ts
 import LogicFlow from '@logicflow/core';
-import { Control, Menu, Dnd } from '@logicflow/extension';
+import { Control, Menu, DndPanel } from '@logicflow/extension';
 import '@logicflow/extension/lib/style.css';
 
 LogicFlow.use(Control);
 LogicFlow.use(Menu);
-LogicFlow.use(Dnd);
+LogicFlow.use(DndPanel);
 ```
 
 ## 控制面板
@@ -249,15 +249,15 @@ lf.setDefaultEdgeType('custome_edge');
 
 ## 拖拽面板
 
-注册`Dnd`组件后，Logic Flow 会在画布左上方创建一个拖拽面板，如下所示
+注册`DndPanel`组件后，Logic Flow 会在画布左上方创建一个拖拽面板，如下所示
 
-<example href="/examples/#/extension/components/dnd"></example>
+<example href="/examples/#/extension/components/dnd-panel"></example>
 
-`Dnd`组件在 Logic Flow 内置节点的基础上新增了三种类型，分别是`star`（五角星）、`triangle`（三角形）和`hexagon`（六边形），如果只想使用其中的某几个图形，可以通过`setShapeList`方法来实现。
+`DndPanel`组件在 Logic Flow 内置节点的基础上新增了三种类型，分别是`star`（五角星）、`triangle`（三角形）和`hexagon`（六边形），如果只想使用其中的某几个图形，可以通过`setShapeList`方法来实现。
 
 ```ts
 // 注册插件
-LogicFlow.use(Dnd);
+LogicFlow.use(DndPanel);
 
 // 示例化 LogicFlow
 const lf = new LogicFlow();
@@ -325,4 +325,4 @@ const Dnd = {
 }
 ```
 
-自定义组件的详细案例请参考拖拽面板的实现[源码]()
+自定义组件的详细案例请参考拖拽面板的实现[源码](https://github.com/didi/LogicFlow/blob/master/packages/extension/src/components/dnd-panel/index.ts)

Diff for: examples/src/pages/extension/adapter/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import LogicFlow from '@logicflow/core';
-import { BpmnAdapter, Control, Dnd } from '@logicflow/extension';
+import { BpmnAdapter, Control, DndPanel } from '@logicflow/extension';
 import ExampleHeader from '../../../components/example-header';
 import { Button } from 'antd';
 import { ExportOutlined } from '@ant-design/icons';
@@ -23,7 +23,7 @@ export default function AdapterExample() {
     // 注册插件
     LogicFlow.use(BpmnAdapter);
     LogicFlow.use(Control);
-    LogicFlow.use(Dnd);
+    LogicFlow.use(DndPanel);
 
     lf = new LogicFlow({
       container: document.querySelector('#graph') as HTMLElement,

Diff for: examples/src/pages/extension/components/dnd/index.tsx renamed to examples/src/pages/extension/components/dnd-panel/index.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
 import LogicFlow from '@logicflow/core';
-import { Dnd } from '@logicflow/extension'
+import { DndPanel } from '@logicflow/extension'
 
 const config = {
   stopScrollGraph: true,
   stopZoomGraph: true,
 };
 
-export default function DndPanleExample() {
+export default function DndPanelExample() {
   useEffect(() => {
-    LogicFlow.use(Dnd);
+    LogicFlow.use(DndPanel);
     const lf = new LogicFlow({
       ...config,
       grid: {

Diff for: examples/src/routes.tsx

@@ -14,7 +14,7 @@ import Theme from './pages/advance/theme';
 import Snapshot from './pages/extension/snapshot';
 import Control from './pages/extension/components/control';
 import Menu from './pages/extension/components/menu';
-import DndPandel from './pages/extension/components/dnd/index';
+import DndPanel from './pages/extension/components/dnd-panel';
 import CustomMenu from './pages/extension/components/custom-menu';
 import CustomDnd from './pages/extension/components/custom-dnd';
 import UserTaskNode from './pages/advance/custom-node/userTask';
@@ -49,7 +49,7 @@ export default (
     <Route path="/extension/snapshot" exact component={Snapshot} />
     <Route path="/extension/components/control" exact component={Control} />
     <Route path="/extension/components/menu" exact component={Menu} />
-    <Route path="/extension/components/dnd" exact component={DndPandel} />
+    <Route path="/extension/components/dnd-panel" exact component={DndPanel} />
     <Route path="/extension/components/custom-menu" exact component={CustomMenu} />
     <Route path="/extension/components/custom-dnd" exact component={CustomDnd} />
     <Route path="/extension/bpmn-elements" exact component={BpmnElements} />

Diff for: packages/core/src/view/Graph.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from 'preact';
+import { Component, Fragment, h } from 'preact';
 import { observer, inject } from 'mobx-react';
 import { map } from 'lodash-es';
 import GraphModel from '../model/GraphModel';
@@ -69,33 +69,35 @@ class Graph extends Component<IProps> {
     const { adjustEdge } = editConfig;
 
     return (
-      <div
-        className="lf-graph"
-        {...dnd.eventMap()}
-        style={style}
-      >
-        <CanvasOverlay
-          graphModel={graphModel}
-          eventCenter={eventCenter}
+      <Fragment>
+        <div
+          className="lf-graph"
+          {...dnd.eventMap()}
+          style={style}
         >
-          <g className="lf-base">
+          <CanvasOverlay
+            graphModel={graphModel}
+            eventCenter={eventCenter}
+          >
+            <g className="lf-base">
+              {
+                map(graphModel.sortElements, (nodeModel) => (
+                  this.getComponent(nodeModel, graphModel, eventCenter)
+                ))
+              }
+            </g>
             {
-              map(graphModel.sortElements, (nodeModel) => (
-                this.getComponent(nodeModel, graphModel, eventCenter)
-              ))
+              fakerNode ? this.getComponent(fakerNode, graphModel, eventCenter) : ''
             }
-          </g>
-          {
-            fakerNode ? this.getComponent(fakerNode, graphModel, eventCenter) : ''
-          }
-          {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
-          <OutlineOverlay graphModel={graphModel} />
-          {!options.isSilentMode && options.snapline !== false ? <SnaplineOverlay snaplineModel={snaplineModel} /> : ''}
-        </CanvasOverlay>
+            {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
+            <OutlineOverlay graphModel={graphModel} />
+            {!options.isSilentMode && options.snapline !== false ? <SnaplineOverlay snaplineModel={snaplineModel} /> : ''}
+          </CanvasOverlay>
+          {options.background && <BackgroundOverlay background={options.background} />}
+          {options.grid && <Grid {...options.grid} graphModel={graphModel} />}
+        </div>
         <ToolOverlay graphModel={graphModel} tool={tool} />
-        {options.background && <BackgroundOverlay background={options.background} />}
-        {options.grid && <Grid {...options.grid} graphModel={graphModel} />}
-      </div>
+      </Fragment>
     );
   }
 }

Diff for: packages/extension/scripts/webpack.config.base.js

@@ -10,7 +10,7 @@ const packagesEntry = {
   ResizeNode: path.resolve(__dirname, "../src/resize-node/index.ts"),
   Control: path.resolve(__dirname, "../src/components/control/index.ts"),
   Menu: path.resolve(__dirname, "../src/components/menu/index.ts"),
-  Dnd: path.resolve(__dirname, "../src/components/dnd/index.ts"),
+  DndPanel: path.resolve(__dirname, "../src/components/dnd-panel/index.ts"),
 };
 
 module.exports = {

Diff for: packages/extension/src/components/dnd/index.ts renamed to packages/extension/src/components/dnd-panel/index.ts

@@ -5,15 +5,15 @@ type Shape = {
   type: string;
 };
 
-interface Dnd extends Extension {
+interface DndPanel extends Extension {
   lf: LogicFlow;
   shapeList: Shape[];
   getDnd: () => HTMLElement;
   registerNode: () => void;
   handleMouseDown: (config: Shape) => void;
 }
 
-const Dnd: Dnd = {
+const DndPanel: DndPanel = {
   lf: null,
   shapeList: [
     {
@@ -42,24 +42,24 @@ const Dnd: Dnd = {
     },
   ],
   install(lf) {
-    Dnd.lf = lf;
-    Dnd.registerNode();
+    DndPanel.lf = lf;
+    DndPanel.registerNode();
     lf.setShapeList = (config) => {
       if (!Array.isArray(config)) {
-        throw new TypeError('Dnd 的 ShapeList 必须是数组');
+        throw new TypeError('DndPanel 的 ShapeList 必须是数组');
       } else if (config.length > 0) {
-        Dnd.shapeList = config;
+        DndPanel.shapeList = config;
       }
     };
   },
   render(lf, container) {
-    container.appendChild(Dnd.getDnd());
+    container.appendChild(DndPanel.getDnd());
   },
   getDnd() {
-    const { handleMouseDown } = Dnd;
+    const { handleMouseDown } = DndPanel;
     const dndContainer = document.createElement('div');
     dndContainer.className = 'lf-dnd';
-    Dnd.shapeList.forEach((shape) => {
+    DndPanel.shapeList.forEach((shape) => {
       const { type, text } = shape;
       const dndItem = document.createElement('div');
       const dndIcon = document.createElement('div');
@@ -74,7 +74,7 @@ const Dnd: Dnd = {
     return dndContainer;
   },
   registerNode() {
-    const { lf } = Dnd;
+    const { lf } = DndPanel;
     lf.register('star', ({ PolygonNode, PolygonNodeModel }) => {
       class StarNode extends PolygonNode {
       }
@@ -158,12 +158,12 @@ const Dnd: Dnd = {
     });
   },
   handleMouseDown(config) {
-    const { lf } = Dnd;
+    const { lf } = DndPanel;
     lf.dnd.startDrag(config);
   },
 };
 
-export default Dnd;
+export default DndPanel;
 export {
-  Dnd,
+  DndPanel,
 };

Diff for: packages/extension/src/index.ts

@@ -3,4 +3,4 @@ export * from './snapshot';
 export * from './adapter';
 export * from './components/control';
 export * from './components/menu';
-export * from './components/dnd';
+export * from './components/dnd-panel';

Diff for: packages/site/src/app.tsx

@@ -1,6 +1,6 @@
 import { Component, h } from 'preact';
 import LogicFlow from '@logicflow/core';
-import { Snapshot, Dnd, Menu } from '@logicflow/extension';
+import { Snapshot, DndPanel, Menu } from '@logicflow/extension';
 import Share from './component/Share';
 import Setting from './component/Setting';
 import Links from './component/Links';
@@ -9,7 +9,7 @@ import CustomNode from './utils/registerNode';
 import CustomListener from './utils/addListener';
 
 LogicFlow.use(Snapshot);
-LogicFlow.use(Dnd);
+LogicFlow.use(DndPanel);
 LogicFlow.use(Menu);
 
 type IProps = {