Merge pull request #1506 from wuchenguang1998/dnd-item-disabled

feat:拖拽面板 DndPanel的拖拽节点增加disabled禁用功能
didi · Apr 2, 2024 · b1363dd · b1363dd
2 parents 05ed811 + 1ffc821
commit b1363dd
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 0 deletions.
diff --git a/docs/guide/extension/component-dnd-panel.md b/docs/guide/extension/component-dnd-panel.md
@@ -27,6 +27,7 @@ PatternItem：
 | 名称 | 类型 | 必选 | 默认值 | 描述 |
 | :- | :- | :- | :- | :- |
 |type|string|非必须|无|指定用户鼠标可以拖入的节点类型，包括自定义节点类型， 不传则不会创建节点，只会触发callback|
+|disabled|boolean|非必须|无|节点是否为禁用状态|
 |text|string|非必须|无|创建节点的文本|
 |properties|object|非必须|无|创建节点的properties|
 |label|string|非必须|无|拖拽面板节点文本描述|

diff --git a/packages/extension/examples/components/dnd-panel/index.html b/packages/extension/examples/components/dnd-panel/index.html
@@ -0,0 +1,37 @@
+<!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>LOGIC FLOW</title>
+  <link rel="stylesheet" href="/core/dist/style/index.css">
+  <!-- <link rel="stylesheet" href="http://0.0.0.0:9099/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: 1400px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+<body>
+  <button id="setDisabled">禁用面板circle</button>
+  <button id="setUsable">启用面板circle</button>
+  <div class="rules-graph">
+    <div id="app"></div>
+  </div>
+  <!-- <script src="/core/dist/logic-flow.js"></script> -->
+  <script src="http://localhost:9093/logic-flow.js"></script>
+  <script src="/DndPanel.js"></script>
+  <script type="module" src="./index.mjs"></script>
+
+</body>
+</html>
diff --git a/packages/extension/examples/components/dnd-panel/index.mjs b/packages/extension/examples/components/dnd-panel/index.mjs
@@ -0,0 +1,48 @@
+const lf = new LogicFlow({
+  container: document.querySelector('#app'),
+  grid: true,
+  width: 1400,
+  multipleSelectKey: 'alt',
+  autoExpand: false,
+  plugins: [DndPanel],
+  height: 800
+})
+lf.setTheme({
+  baseNode: {
+    stroke: '#51a1ff',
+    strokeWidth: 8,
+  },
+});
+
+const rect = {
+  type: 'rect',
+  label: 'rect',
+  icon: 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAcACEDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAkBAwQGBwr/xAAxEAAABgIAAgQPAQAAAAAAAAABAgMEBQcABggRCRITFRQXGTlUVVh3lJWWs9PW1yH/xAAWAQEBAQAAAAAAAAAAAAAAAAAHAwj/xAAkEQABBQACAgICAwAAAAAAAAAEAQIDBQYREgAHFSETJBYiQf/aAAwDAQACEQMRAD8A9YfE5aPE4bivr2gaCsPXdKDcKrJtIF2eAg5CJ72YydgryTlzIutT2iYQ7eI1hs2bt2zdRt4SkmIpIdu4cZPiy6Uj2iaN+Qsv4jk2R50qgfcNM/ZuvGZ5oPRaqLF0vrgKrx3r0z5T19V3Z5l3iqO3sCrAm4vRJZpjShnTydoQB2oj3OVFRy8/2+hikz0mptdyVYabaDfH7Q+qDGqtVb1oQ4UFXTExxRCDkNhZxKXMq9GtRUcicfX2svxZdKR7RNG/IWX8RzXK0sjjA0jjCrKhr5tLUtxitt03YNydNdP12AQYLMUoXd04xBeTNourTLd42mNWM8VSaAVA6INiHcrEWctitXxZlkedKoH3DTP2brymQ18eyi2tXa4v1yPEN6529qMTVYagrTxT66jnmDJGNHFSaCWCZEljkic17JER7XNciKk9Lmn5iTK2FdqdvNJNuMlXTwWOtuDwyAzreCEqCcWchYpo5ouWPY9HNc1zmuRUcqKzPDDDM8eNfigOKe2NUpDpCacsvdQkza7AUUok9JDsyP5I6kxI27CtCtmyrhqkfk6kETrCo5SAiBFTlE6hSJH675U7hi9Gsz6Ujv2PGLuI9g6OCjpk0cqAUCAo4bIrHAgCJgIBlCGMBQExhAoDyATCPLmI5R3ND+qo34Fr+LGOXd4G3qsuJp8Je2Vhms6JnIzq7axVI5IohhxscihOzB6xSLLYTo79qTlvVOfrwxjyGyrbHQE0GvqAQr67IvHiHZWWxmgIIFDEfGhbdAGkjEjBi4/XZ9q9f9Thd/lTuGL0azPpSO/Y84Fpt+6JxGdI1SW718ScThYuqtl1ZyXYI9CNejJsYa05ZcUkEHr8h23gs2yAiorFMZUFiCmAJgY7je5of1VG/AtfxZajGRrdQqzePYoKk59RVFogkoXrFEpuqciZTF6xTGKPIQ5lEQH/AARDKg7315RC6D+OYC/Bs7vMX2aYYfuYbIcWK9r5QJSHBNyoazuhSRJGxoTD26q3u3sjmzLx+2tyKb5vZUxYFVf0168UPJSgzkSU5sRkcCFO0RSQpKsasc/8EvXt26O46rm4YYYL+KXn/9k=',
+}
+const circle = {
+  type: 'circle',
+  label: 'circle',
+  icon: 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAiACIDASIAAhEBAxEB/8QAGwABAQEAAgMAAAAAAAAAAAAAAAkIAgMEBwr/xAAkEAABBQACAgIDAQEAAAAAAAADAQIEBQYABwgSERMJFCIWMf/EABcBAQEBAQAAAAAAAAAAAAAAAAcABAX/xAAfEQADAAMBAAMBAQAAAAAAAAADBAUBAgYABxEUExX/2gAMAwEAAhEDEQA/APv45Pfsfz+zsHYTeuOhOtdZ5E7atKYFl/jkOzMQSBcgzOHc19ZfSrMUQiESVLi1gqX4H8Cu3IpHh838hnZepynVGb62wcksPad6bGB13AkgM6NIFTzPRlyyPIYjyCJZGl1NEdzGeza+4nPG8Z2BVdI9CdFYnx86+qsLjoAGEECOfR3zgsbaam++pEmXFpI+PtIryqRsCK57gVkL6oMRrAi/pXhx+W5rk0e17GYbpGegdoJcpy2j7EtE68jcIady4+lnV/8AINs+qKM9Iqpmjha3KzoEePs5rVOhu9G3ynMPihgjKJNdF0O6YaDYT0tSFQkyU2vtP9JFhbNtuNjYEuEq+o19yk+8Yrk+dXenXrW2/d/h9u8vjGua6dp87OlWTKgCr8q+WGZThqlerfn1ZOv6ZHOb6o5flfXenVPbvX3deSibXrjQxr+lkOQEhGI4FhUz2jGU9Vc1xkbJrrGO0jFIAzPQo3DkxSyIhgSC+xjBFIEWPIEM4DjeEwTMaURhFarCCKN6OYQZGOcx7HtVr2qrXIqKqclFPzcbw782+ulw7VqeoPKN583a5COiCqajZBlxoUV1TGaiijAjXV3Qy4DERv6kS+vaqI0MFIwxdJNTjPkhSsjD5gfE9nNlUbcteXTp0YPTLSFSP05e6thh52bWHNXZbnmXd3TbyuZdgASbiNnCyz1PDMzm618nV8s/RRk0DUEEErEE9NgaSFDRiWBNR6bu8cK7ojqaNL4MMwSl01IPFYeOOOC3lT00fyRwbLP03Qfd8OCayg9L9wU91dRY6NV7IE+bUTwSSe6sG0L7PNQKpHve1P2raIxf5e5zKKZvRUuuoKbUZyxjW1DoK2Hb1FlEIhI82vngZIjHG5P+e43t9mORHjejhka0jHNTp1eVz+4zd3kNVVxbrO6Kuk1VxVzGK4EuFLGoyMVWq0gisVULGkheOTEkjFJjFFIEMjZjV3S/mJ4hz7GD46SqXu/paVOkWEHrvYzQRdDmUkkeWSOC+RYUY2uV5Fcp6OzfHs5P3TpeVBKI8hmOTiR3vExOSPclc51XHNV9oe95vWdE6CLcaHQYQ3qm+1Z1afS/QZX9uy6rq7uRf31KHH0YUf8AT4/q6vRhk0LfPdOvNxX1jr7PVo1WSDZIDms4WcMPTXUP4jYwpoZlUymCfx2GXPqs8lz5NWUft3zX8UuoMwRlhP6o0JuztyWMqEHTRwTc9pQQJ5U/mKda7Jhco3KjnroqgbV+6QJi87Dtj8jfZ0cmbx/QmW6bfMY6NN2+muYsslQwjVG6XXCsJ5E+xjnezXBzWjKxqew4/siFTR3i94rVfj9G0GkvNFM7A7d3b0lbnfWf3PNJcQyTDVVUsohpbK5ZyrKmS5ZnTrmWMMuY0Ao8GBB6UWUj8UaUumt9Bz1Hqto1iTy3N85ZS6AoHrc5iQe1celEamIpT0HmTLJ7N7uvtbBxqMIR7lzhq0W/kXZCDJjW0uexUmUuhu3JbcUZVJLwKYpclSjou+2264oAR2sL6Kpr4LnJCk31HjWvHHHAry75xxxy9eccccvXnHHHL17/2Q==',
+};
+const disabledCircle = {
+  type: 'circle',
+  label: 'circle',
+  disabled: true,
+  icon: 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAhACIDASIAAhEBAxEB/8QAGgABAQEAAwEAAAAAAAAAAAAAAAgHBAUGCv/EACQQAAICAgICAgMBAQAAAAAAAAIDAQQFBgAHEhMIERQhIhUy/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAIB/8QAIREAAgMAAgICAwAAAAAAAAAAAREAITFBUWFxAiKBsfH/2gAMAwEAAhEDEQA/APv1YxaVm1pgpSgJjGMIQWtYDJGZmUwIAAxJERTAiMTMzERyOs58nNj2rP3NV+PvX7uxbeOMlX9oyBsqashwslcepnvoKdUZMT6b13MYldjwMqardeRsz3Xy/wBqy2H62x+qYBpJy/Y+x0dRgxOVz/m2Qa2+qGRBEMXGDTxz4gZ86d20MzH6gt3660LB9aahh9QwCFrq4yssbNqFAuxlMiYD+dlbpAMS23ddEsIimYUqFVleFdCVhoQDTLQeUt73JLJJApJn3wPxzcl+x2f8udPWWY27p3V9hwKIl19GpXSnLV0h/bfUNXYNgsfQrgylg4a6sPHyYwY/6oHqbuPT+4cI3KazYcm7QlSs3gcgIKyuHsNEpAXrAjB1V0g2Kt5BEh8LYE+qwp9dOrchntHFp6b+Q/WHY+tD/nYrs3KnqO742rAqpWrFuzQrFkWoCBHzdN6tlWQv6kshhZtH5Ntv9uhfKkjwsPjnh2x5iwrJFC1yQHn7lzccccmVJH+YuAylnr7A7phklYu9cbdjNlcoRk/rHfc13ukR+zka92cc55QMwqoFlx+K1EQ0dpO44TftXw+269aXaxmYprsB4GJsqv8AqBtULUD+1XKFiGVbSiiJByij68ZGZ9JZrV7lexTtoTaqWktrWq1hYORYrvAlOQ9LIJbUuWRLasxIDAiEokZmORfe+PnZ3WGcyWe+Ou6U8Xhso+bl/r7Z5Y/E+6Y8ZGi9yLyGxAyC0HZHH5CvXUKTzNoYEI0IhNFsPLW9ZsmwSRb0c11362WtyHu6sgntDv7p/qzX2BejSc1O5bq+uUMVjV1H4+5+C9sfyiyqjQJbInziLObxyJ+nwxXOVYx3zV3Fc4e9kdB68pOj1W81iGCzIyif0wqhIdnrKrBRE+sq84xkFMeNqvH9jt3TfSOt9O4y4NGxYzuz5o/fsW25IIjI5RsmTZUoJY8qdGHGbvx/yLDXPOX3LVpoqJej62wSqAvezldRZVEBgl+Eav8AnubTxxxyZUccccRHHHHERxxxxE//2Q==',
+  callback: () => alert('面板的circle拖拽已被禁用了！'),
+};
+
+const buildItems = (isCircleDisabled = false) => {
+  return isCircleDisabled ? [rect, disabledCircle] : [rect, circle];
+}
+
+lf.extension.dndPanel.setPatternItems(buildItems());
+
+lf.render();
+
+document.querySelector('#setDisabled').addEventListener('click', () => {
+  lf.extension.dndPanel.setPatternItems(buildItems(true));
+})
+document.querySelector('#setUsable').addEventListener('click', () => {
+  lf.extension.dndPanel.setPatternItems(buildItems(false));
+})
diff --git a/packages/extension/src/components/dnd-panel/index.ts b/packages/extension/src/components/dnd-panel/index.ts
@@ -6,6 +6,7 @@ type ShapeItem = {
   icon?: string;
   label?: string;
   className?: string;
+  disabled?: boolean;
   properties?: Record<string, any>;
   callback?: (lf: LogicFlow, container: HTMLElement) => void;
 };
@@ -67,6 +68,16 @@ class DndPanel {
       text.className = 'lf-dnd-text';
       el.appendChild(text);
     }
+    if (shapeItem.disabled) {
+      el.classList.add('disabled');
+      // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
+      el.onmousedown = () => {
+        if (shapeItem.callback) {
+          shapeItem.callback(this.lf, this.domContainer);
+        }
+      };
+      return el;
+    }
     el.onmousedown = () => {
       if (shapeItem.type) {
         this.lf.dnd.startDrag({

diff --git a/packages/extension/src/style/index.css b/packages/extension/src/style/index.css