diff --git a/docs/guide/extension/component-dnd-panel.md b/docs/guide/extension/component-dnd-panel.md
index e2cfd4058..40384e057 100644
--- 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
new file mode 100644
index 000000000..10d7515be
--- /dev/null
+++ b/packages/extension/examples/components/dnd-panel/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ LOGIC FLOW
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/extension/examples/components/dnd-panel/index.mjs b/packages/extension/examples/components/dnd-panel/index.mjs
new file mode 100644
index 000000000..b70160ccc
--- /dev/null
+++ 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));
+})
\ No newline at end of file
diff --git a/packages/extension/src/components/dnd-panel/index.ts b/packages/extension/src/components/dnd-panel/index.ts
index bc543d17c..9e86212cf 100644
--- 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;
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
index 4ec1f6ffc..64e063e4c 100644
--- a/packages/extension/src/style/index.css
+++ b/packages/extension/src/style/index.css
@@ -105,6 +105,10 @@
text-align: center;
font-size: 14px;
}
+.lf-dnd-item.disabled > div {
+ color: #a8abb2;
+ cursor: not-allowed;
+}
.lf-dnd-shape {
width: 36px;
height: 36px;