Merge pull request #116 from towersxu/master

yhlchao · web-flow · commit 7edae48b3f43 · 2021-04-09T19:33:54.000+08:00
fix: minimap support register node
diff --git a/docs/guide/extension/component-minimap.md b/docs/guide/extension/component-minimap.md
@@ -35,4 +35,14 @@ MiniMap.show(leftPosition?: number, topPosition?: number);
 MiniMap.hide();
 ```
 
+## 禁用插件
+
+MiniMap和正常的画布共享LogicFlow，可以在MiniMap中不显示某些插件，例如不显示工具栏。
+
+```ts
+MiniMap.init({
+  disabledPlugins: [Control.name, Snapshot.name, SelectionSelect.name]
+})
+```
+
 <example href="/examples/#/extension/components/mini-map" :height="350" ></example>
diff --git a/packages/extension/examples/components/minimap/index.html b/packages/extension/examples/components/minimap/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="format-detection" content="telephone=no, email=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>LOGIN FLOW</title>
+  <link rel="stylesheet" href="/core/dist/style/index.css">
+  <!-- <link rel="stylesheet" href="http://0.0.0.0:9090/src/style/index.css"> -->
+  <link rel="stylesheet" href="/extension/src/style/index.css">
+  <style>
+    html,body {
+      padding: 0;
+      margin: 0;
+    }
+    body {
+      background-color: #FFF;
+    }
+    #app {
+      width: 1200px;
+      height: 500px;
+      border: 1px solid #efefef;
+    }
+  </style>
+</head>
+<body>
+  <button id="mini-map">显示</button>
+  <div class="rules-graph">
+    <div id="app"></div>
+  </div>
+  <script src="/core/dist/logic-flow.js"></script>
+  <!-- <script src="http://localhost:9090/logic-flow.js"></script> -->
+  <script src="/MiniMap.js"></script>
+  <script>
+    LogicFlow.use(MiniMap);
+  </script>
+  <script src="./index.js"></script>
+  
+</body>
+</html>
diff --git a/packages/extension/examples/components/minimap/index.js b/packages/extension/examples/components/minimap/index.js
@@ -0,0 +1,77 @@
+window.addEventListener('DOMContentLoaded', () => {
+  console.log(document.querySelector('#app'))
+  const lf = new LogicFlow({
+    container: document.querySelector('#app'),
+    edgeTextDraggable: true,
+    nodeTextDraggable: true,
+    metaKeyMultipleSelected: true,
+    grid: {
+      type: 'dot',
+      size: 20,
+    },
+    keyboard: {
+      enabled: true,
+    },
+    snapline: true,
+  });
+  console.log(5);
+  lf.register('x-node', ({ RectNode, RectNodeModel }) => {
+    return {
+      view: RectNode,
+      model: RectNodeModel,
+    }
+  })
+  lf.render({
+    nodes: [
+      {
+        id: 'c_1',
+        type: 'circle',
+        x: 100,
+        y: 100
+      },
+      {
+        id: 'c_3',
+        type: 'x-node',
+        x: 500,
+        y: 200
+      },
+      {
+        id: 'c_2',
+        type: 'circle',
+        x: 300,
+        y: 200
+      }
+    ],
+    edges: [
+      {
+        id: 'e_1',
+        type: 'polyline',
+        pointsList: [
+          {
+            x: 140,
+            y: 100,
+          },
+          {
+            x: 200,
+            y: 100
+          },
+          {
+            x: 200,
+            y: 200,
+          },
+          {
+            x: 250,
+            y: 200
+          }
+        ],
+        sourceNodeId: 'c_1',
+        targetNodeId: 'c_2'
+      }
+    ]
+  });
+
+  document.querySelector('#mini-map').addEventListener('click', () => {
+    console.log(444)
+    MiniMap.show();
+  })
+})
diff --git a/packages/extension/src/components/mini-map/index.ts b/packages/extension/src/components/mini-map/index.ts
@@ -210,8 +210,18 @@ const MiniMap: MiniMapPlugin = {
   __setView() {
     // 1. 获取到图中所有的节点中的位置，将其偏移到原点开始（避免节点位置为负的时候无法展示问题）。
     const data = MiniMap.__resetData(MiniMap.__lf.getGraphRawData());
-    // 2. 将偏移后的数据渲染到minimap画布上
+    // 由于随时都会有新节点注册进来，需要同步将注册的
+    const viewMap = MiniMap.__lf.viewMap;
+    const modelMap = MiniMap.__lf.graphModel.modelMap;
+    const minimapViewMap = MiniMap.__lfMap.viewMap;
+    for (let key of viewMap.keys()) {
+      if (!minimapViewMap.has(key)) {
+        MiniMap.__lfMap.setView(key, viewMap.get(key));
+        MiniMap.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
+      }
+    }
     MiniMap.__lfMap.render(data);
+    // 2. 将偏移后的数据渲染到minimap画布上
     // 3. 计算出所有节点在一起的边界。
     const { left, top, right, bottom } = MiniMap.__getBounds(data);
     // 4. 计算所有节点的边界与minimap看板的边界的比例.
