@smallwei/avue 3.9.2 → 3.9.4

package/lib/packages/element-plus/flow/index2.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -10,305 +10,347 @@ var src_utils_util = require('../../../src/utils/util.js');
 var node_vue_vue_type_script_lang = require('./node2.js');
 
 var script = src_core_create.default({
-  name: "flow",
+  name: 'flow',
   mixins: [src_core_locale.default],
-  components: {
-    flowNode: node_vue_vue_type_script_lang.default
+  components: { flowNode: node_vue_vue_type_script_lang.default },
+  emits: [
+    'update:modelValue', 'click', 'node-click', 'node-add', 'node-remove',
+    'node-change', 'line-add', 'line-remove', 'change', 'ready', 'error'
+  ],
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    option: {
+      type: Object,
+      default: () => ({ nodeList: [], lineList: [] })
+    },
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    height: {
+      type: [Number, String],
+      default: '100%'
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    showGrid: {
+      type: Boolean,
+      default: true
+    },
+    gridSize: {
+      type: Number,
+      default: 20
+    },
+    nodeWidth: {
+      type: [Number, String],
+      default: 220
+    },
+    nodeHeight: {
+      type: [Number, String],
+      default: 96
+    },
+    confirmDelete: {
+      type: Boolean,
+      default: true
+    }
   },
   data () {
     return {
       active: '',
-      jsPlumb: {},
+      jsPlumb: null,
       id: '',
-      // 默认设置参数
+      isInitializing: false,
       jsplumbSetting: {
-        // 动态锚点、位置自适应
-        Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
+        Anchors: [
+          'Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle',
+          'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'
+        ],
         Container: '',
-        // 连线的样式 StateMachine、Flowchart
-        Connector: 'Flowchart',
-        // 鼠标不能拖动删除线
-        ConnectionsDetachable: false,
-        // 删除线的时候节点不删除
+        Connector: ['Flowchart', { cornerRadius: 6, stub: 18 }],
+        ConnectionsDetachable: true,
         DeleteEndpointsOnDetach: false,
-        // 连线的端点
-        // Endpoint: ["Dot", {radius: 5}],
-        Endpoint: ['Rectangle', { height: 10, width: 10 }],
-        // 线端点的样式
-        EndpointStyle: { fill: 'rgba(255,255,255,0)', outlineWidth: 1 },
-        LogEnabled: true, // 是否打开jsPlumb的内部日志记录
-        // 绘制线
-        PaintStyle: { stroke: 'black', strokeWidth: 3 },
-        // 绘制箭头
-        Overlays: [['Arrow', { width: 12, length: 12, location: 1 }]],
+        Endpoint: ['Dot', { radius: 5 }],
+        EndpointStyle: { fill: '#fff', stroke: '#409eff', strokeWidth: 1.5 },
+        PaintStyle: { stroke: '#409eff', strokeWidth: 2 },
+        HoverPaintStyle: { stroke: '#66b1ff', strokeWidth: 3 },
+        Overlays: [['Arrow', { width: 10, length: 10, location: 1 }]],
         RenderMode: 'svg'
       },
-      // jsplumb连接参数
       jsplumbConnectOptions: {
         isSource: true,
         isTarget: true,
-        // 动态锚点、提供了4个方向 Continuous、AutoDefault
         anchor: 'Continuous'
       },
-
       jsplumbSourceOptions: {
-        filter: '.avue-flow__node-drag', /* "span"表示标签，".className"表示类，"#id"表示元素id*/
+        filter: '.avue-flow__node-drag',
         filterExclude: false,
         anchor: 'Continuous',
         allowLoopback: false
       },
       jsplumbTargetOptions: {
-        filter: '.avue-flow__node-drag', /*"span"表示标签，".className"表示类，"#id"表示元素id */
+        filter: '.avue-flow__node-drag',
         filterExclude: false,
         anchor: 'Continuous',
         allowLoopback: false
-      },
-      loadEasyFlowFinish: false,
+      }
     }
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: () => {
-        return {}
+  computed: {
+    styleName () {
+      return {
+        width: this.setPx(this.width),
+        height: this.setPx(this.height)
       }
     },
-    option: {
-      type: Object
+    canvasStyle () {
+      return {
+        minWidth: this.setPx(this.width),
+        minHeight: this.setPx(this.height)
+      }
     },
-    width: {
-      type: [Number, String],
-      default: '100%'
+    gridStyle () {
+      const size = Math.max(Number(this.gridSize) || 20, 8);
+      return { backgroundSize: `${size}px ${size}px` }
     },
-    height: {
-      type: [Number, String],
-      default: '100%'
+    nodeList () {
+      return Array.isArray(this.option && this.option.nodeList)
+        ? this.option.nodeList
+        : []
+    },
+    lineList () {
+      return Array.isArray(this.option && this.option.lineList)
+        ? this.option.lineList
+        : []
     }
   },
-  created () {
-    this.id = src_utils_util.randomId();
-    this.jsplumbSetting.Container = this.id;
-  },
-  mounted () {
-    this.init();
-  },
   watch: {
     modelValue: {
-      handler (val) {
-        this.active = val;
+      handler (value) {
+        this.active = value;
       },
       immediate: true
     },
-    active (val) {
-      this.$emit('update:modelValue', val);
+    active (value) {
+      this.$emit('update:modelValue', value);
     }
   },
-  computed: {
-    styleName () {
-      return {
-        position: 'relative',
-        width: this.setPx(this.width),
-        height: this.setPx(this.height)
-      }
-    }
+  created () {
+    this.id = src_utils_util.randomId();
+    this.jsplumbSetting.Container = this.id;
+    this.ensureOption();
+  },
+  mounted () {
+    this.init();
+  },
+  beforeUnmount () {
+    if (!this.jsPlumb) return;
+    this.jsPlumb.reset();
+    this.jsPlumb = null;
   },
   methods: {
+    ensureOption () {
+      if (!this.option || typeof this.option !== 'object') return false;
+      if (!Array.isArray(this.option.nodeList)) this.option.nodeList = [];
+      if (!Array.isArray(this.option.lineList)) this.option.lineList = [];
+      return true;
+    },
     init () {
+      if (typeof jsPlumb === 'undefined') {
+        this.$emit('error', new Error('未找到 jsPlumb，请在使用 avue-flow 前引入 jsPlumb。'));
+        return;
+      }
       this.jsPlumb = jsPlumb.getInstance();
-      this.$nextTick(() => {
-        this.jsPlumbInit();
+      this.$nextTick(() => this.jsPlumbInit());
+    },
+    jsPlumbInit () {
+      if (!this.jsPlumb) return;
+      this.jsPlumb.ready(() => {
+        if (!this.jsPlumb) return;
+        this.jsPlumb.importDefaults({
+          ...this.jsplumbSetting,
+          ConnectionsDetachable: this.editable
+        });
+        this.bindJsPlumbEvents();
+        this.isInitializing = true;
+        this.jsPlumb.setSuspendDrawing(true);
+        this.loadEasyFlow();
+        this.jsPlumb.setSuspendDrawing(false, true);
+        this.$nextTick(() => {
+          this.isInitializing = false;
+          this.revalidate();
+          this.$emit('ready', this.jsPlumb);
+        });
+      });
+    },
+    bindJsPlumbEvents () {
+      this.jsPlumb.bind('click', (connection) => {
+        if (!this.editable) return;
+        this.withConfirm(this.t('flow.deleteLineConfirm'), () => {
+          this.jsPlumb.deleteConnection(connection);
+        });
       });
+      this.jsPlumb.bind('connection', (event) => {
+        if (this.isInitializing) return;
+        const from = event.sourceId || (event.source && event.source.id);
+        const to = event.targetId || (event.target && event.target.id);
+        this.addLine(from, to);
+      });
+      this.jsPlumb.bind('connectionDetached', (event) => {
+        if (this.isInitializing) return;
+        this.deleteLine(event.sourceId, event.targetId);
+      });
+      this.jsPlumb.bind('connectionMoved', (event) => {
+        if (this.isInitializing) return;
+        this.deleteLine(event.originalSourceId, event.originalTargetId);
+        this.addLine(event.sourceId, event.targetId);
+      });
+      this.jsPlumb.bind('beforeDrop', (event) => this.canConnect(
+        event.sourceId,
+        event.targetId
+      ));
+    },
+    canConnect (from, to) {
+      if (!this.editable) return false;
+      if (from === to) {
+        this.notifyError(this.t('flow.noSelfConnect'));
+        return false;
+      }
+      if (this.hasLine(from, to)) {
+        this.notifyError(this.t('flow.noDuplicateConnect'));
+        return false;
+      }
+      if (this.hasLine(to, from)) {
+        this.notifyError(this.t('flow.noLoopConnect'));
+        return false;
+      }
+      return true;
+    },
+    notifyError (message) {
+      if (this.$message) this.$message.error(message);
     },
     handleClick (node) {
+      this.active = node.id;
       this.$emit('click', node);
+      this.$emit('node-click', node);
     },
-    // 是否具有该线
     hasLine (from, to) {
-      for (var i = 0; i < this.data.lineList.length; i++) {
-        var line = this.data.lineList[i];
-        if (line.from === from && line.to === to) {
-          return true
-        }
-      }
-      return false
+      return this.lineList.some((line) => line.from === from && line.to === to)
     },
-    // 是否含有相反的线
-    hashOppositeLine (from, to) {
-      return this.hasLine(to, from)
+    addLine (from, to) {
+      if (!from || !to || !this.ensureOption() || this.hasLine(from, to)) return false;
+      const line = { from, to };
+      this.option.lineList.push(line);
+      this.$emit('line-add', line);
+      this.$emit('change', { type: 'line-add', line, option: this.option });
+      return true;
     },
-    // 删除线
     deleteLine (from, to) {
-      this.option.lineList = this.option.lineList.filter(function (line) {
-        return line.from !== from && line.to !== to
-      });
+      if (!this.ensureOption()) return false;
+      const index = this.option.lineList.findIndex((line) => line.from === from && line.to === to);
+      if (index === -1) return false;
+      const [line] = this.option.lineList.splice(index, 1);
+      this.$emit('line-remove', line);
+      this.$emit('change', { type: 'line-remove', line, option: this.option });
+      return true;
     },
-    // 改变连线
-    changeLine (oldFrom, oldTo) {
-      this.deleteLine(oldFrom, oldTo);
-    },
-    // 改变节点的位置
-    changeNodeSite ({ index, left, top }) {
-      for (var i = 0; i < this.option.nodeList.length; i++) {
-        this.option.nodeList[i];
-        if (i === index) {
-          this.option.nodeList[i].left = left;
-          this.option.nodeList[i].top = top;
-        }
-      }
+    changeNodeSite ({ id, left, top }) {
+      const node = this.nodeList.find((item) => item.id === id);
+      if (!node || (Number(node.left) === left && Number(node.top) === top)) return;
+      node.left = left;
+      node.top = top;
+      this.$emit('node-change', node);
+      this.$emit('change', { type: 'node-change', node, option: this.option });
+      this.revalidate();
     },
-    //删除节点
     deleteNode (nodeId) {
-      this.$confirm(this.t('flow.deleteNodeConfirm', { nodeId }), this.t('common.tip'), {
+      const node = this.nodeList.find((item) => item.id === nodeId);
+      if (!node) return Promise.resolve(false);
+      return this.withConfirm(this.t('flow.deleteNodeConfirm', { nodeId }), () => {
+        node.display = true;
+        this.lineList
+          .filter((line) => line.from === nodeId || line.to === nodeId)
+          .forEach((line) => this.deleteLine(line.from, line.to));
+        this.$nextTick(() => {
+          if (this.jsPlumb) this.jsPlumb.removeAllEndpoints(nodeId);
+          this.revalidate();
+        });
+        this.$emit('node-remove', node);
+        this.$emit('change', { type: 'node-remove', node, option: this.option });
+      });
+    },
+    withConfirm (message, callback) {
+      if (!this.confirmDelete || typeof this.$confirm !== 'function') {
+        callback();
+        return Promise.resolve(true);
+      }
+      return this.$confirm(message, this.t('common.tip'), {
         confirmButtonText: this.t('common.submitBtn'),
         cancelButtonText: this.t('common.cancelBtn'),
         type: 'warning',
         closeOnClickModal: false
       }).then(() => {
-        this.option.nodeList.forEach(node => {
-          if (node.id === nodeId) {
-            node.display = true;
-          }
-        });
-        this.$nextTick(function () {
-          this.jsPlumb.removeAllEndpoints(nodeId);
-        });
-      }).catch(() => {
-      });
-      return true
-    },
-    // 添加新的节点
-    addNode (name) {
-      const index = this.option.nodeList.length;
-      let nodeId = 'node' + index;
-      this.option.nodeList.push({
-        id: 'node' + index,
-        name: name,
+        callback();
+        return true;
+      }).catch(() => false);
+    },
+    addNode (name, config = {}) {
+      if (!this.ensureOption()) return null;
+      const nodeId = config.id || this.getNextNodeId();
+      if (this.nodeList.some((node) => node.id === nodeId)) {
+        this.notifyError(`节点 ${nodeId} 已存在`);
+        return null;
+      }
+      const node = {
+        id: nodeId,
+        name,
         left: 0,
         top: 0,
+        ...config
+      };
+      this.option.nodeList.push(node);
+      this.$nextTick(() => {
+        this.makeNodeInteractive(node.id);
+        this.revalidate();
       });
-      this.$nextTick(function () {
-
-        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions);
-
-        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions);
-
-        this.jsPlumb.draggable(nodeId, {
-          containment: 'parent'
-        });
-
-      });
+      this.$emit('node-add', node);
+      this.$emit('change', { type: 'node-add', node, option: this.option });
+      return node;
     },
-    loadEasyFlow () {
-      // 初始化节点
-      for (var i = 0; i < this.option.nodeList.length; i++) {
-        let node = this.option.nodeList[i];
-        // 设置源点，可以拖出线连接其他节点
-        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions);
-        // // 设置目标点，其他源点拖出的线可以连接该节点
-        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
-        this.jsPlumb.draggable(node.id);
-      }
-
-      // 初始化连线
-      for (var i = 0; i < this.option.lineList.length; i++) {
-        let line = this.option.lineList[i];
-        this.jsPlumb.connect({
-          source: line.from,
-          target: line.to
-        }, this.jsplumbConnectOptions);
+    getNextNodeId () {
+      let index = this.nodeList.length;
+      let id = `node${index}`;
+      while (this.nodeList.some((node) => node.id === id)) {
+        index += 1;
+        id = `node${index}`;
       }
-      this.$nextTick(function () {
-        this.loadEasyFlowFinish = true;
-      });
+      return id;
     },
-    jsPlumbInit () {
-      const _this = this;
-      this.jsPlumb.ready(function () {
-        // 导入默认配置
-        _this.jsPlumb.importDefaults(_this.jsplumbSetting);
-        // 会使整个jsPlumb立即重绘。
-        _this.jsPlumb.setSuspendDrawing(false, true);
-        // 初始化节点
-        _this.loadEasyFlow();
-
-        // 单点击了连接线,
-        _this.jsPlumb.bind('click', function (conn, originalEvent) {
-          console.log('click', conn);
-
-          _this.$confirm(_this.t('flow.deleteLineConfirm'), _this.t('common.tip'), {
-            confirmButtonText: _this.t('common.submitBtn'),
-            cancelButtonText: _this.t('common.cancelBtn'),
-            type: 'warning'
-          }).then(() => {
-            _this.jsPlumb.deleteConnection(conn);
-          }).catch(() => {
-          });
-        });
-        // 连线
-        _this.jsPlumb.bind('connection', function (evt) {
-          console.log('connection', evt);
-          let from = evt.source.id;
-          let to = evt.target.id;
-          if (_this.loadEasyFlowFinish) {
-            _this.option.lineList.push({
-              from: from,
-              to: to
-            });
-          }
-        });
-
-        // 删除连线
-        _this.jsPlumb.bind('connectionDetached', function (evt) {
-          console.log('connectionDetached', evt);
-          _this.deleteLine(evt.sourceId, evt.targetId);
-        });
-
-        // 改变线的连接节点
-        _this.jsPlumb.bind('connectionMoved', function (evt) {
-          console.log('connectionMoved', evt);
-          _this.changeLine(evt.originalSourceId, evt.originalTargetId);
-        });
-
-        // 单击endpoint
-        // jsPlumb.bind("endpointClick", function (evt) {
-        //   console.log('endpointClick', evt)
-        // })
-        //
-        // // 双击endpoint
-        // jsPlumb.bind("endpointDblClick", function (evt) {
-        //   console.log('endpointDblClick', evt)
-        // })
-
-        // contextmenu
-        _this.jsPlumb.bind('contextmenu', function (evt) {
-          console.log('contextmenu', evt);
-        });
-
-        // beforeDrop
-        _this.jsPlumb.bind('beforeDrop', function (evt) {
-          console.log('beforeDrop', evt);
-          let from = evt.sourceId;
-          let to = evt.targetId;
-          if (from === to) {
-            _this.$message.error(_this.t('flow.noSelfConnect'));
-            return false
-          }
-          if (_this.hasLine(from, to)) {
-            _this.$message.error(_this.t('flow.noDuplicateConnect'));
-            return false
-          }
-          if (_this.hashOppositeLine(from, to)) {
-            _this.$message.error(_this.t('flow.noLoopConnect'));
-            return false
-          }
-          return true
-        });
-
-        // beforeDetach
-        _this.jsPlumb.bind('beforeDetach', function (evt) {
-          console.log('beforeDetach', evt);
-        });
+    makeNodeInteractive (nodeId) {
+      if (!this.jsPlumb || !this.editable) return;
+      this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions);
+      this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions);
+      this.jsPlumb.draggable(nodeId, { containment: 'parent' });
+    },
+    loadEasyFlow () {
+      this.nodeList.forEach((node) => {
+        if (!node.display) this.makeNodeInteractive(node.id);
       });
+      this.lineList.forEach((line) => {
+        if (this.getVisibleNode(line.from) && this.getVisibleNode(line.to)) {
+          this.jsPlumb.connect({ source: line.from, target: line.to }, this.jsplumbConnectOptions);
+        }
+      });
+    },
+    getVisibleNode (id) {
+      return this.nodeList.find((node) => node.id === id && !node.display)
+    },
+    revalidate () {
+      if (this.jsPlumb) this.jsPlumb.repaintEverything();
     }
   }
 });

package/lib/packages/element-plus/flow/index3.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 var vue = require('vue');
@@ -9,38 +9,49 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_flow_node = vue.resolveComponent("flow-node");
 
   return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(_ctx.b()),
+    class: vue.normalizeClass(_ctx.b({ readonly: !_ctx.editable })),
     style: vue.normalizeStyle(_ctx.styleName)
   }, [
     vue.createElementVNode("div", {
       id: _ctx.id,
-      style: vue.normalizeStyle(_ctx.styleName)
+      class: vue.normalizeClass(_ctx.b('canvas')),
+      style: vue.normalizeStyle(_ctx.canvasStyle)
     }, [
-      _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "avue-grid" }, null, -1 /* HOISTED */)),
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.option.nodeList, (node, index) => {
-        return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+      (_ctx.showGrid)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(_ctx.b('grid')),
+            style: vue.normalizeStyle(_ctx.gridStyle)
+          }, null, 6 /* CLASS, STYLE */))
+        : vue.createCommentVNode("v-if", true),
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodeList, (node) => {
+        return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: node.id
+        }, [
           (!node.display)
             ? (vue.openBlock(), vue.createBlock(_component_flow_node, {
-                node: node,
+                key: 0,
                 id: node.id,
-                onClick: $event => (_ctx.handleClick(node)),
-                onChangeNodeSite: _ctx.changeNodeSite,
-                index: index,
+                node: node,
                 active: _ctx.active,
-                key: index
+                "node-width": _ctx.nodeWidth,
+                "node-height": _ctx.nodeHeight,
+                editable: _ctx.editable,
+                onClick: $event => (_ctx.handleClick(node)),
+                onChangeNodeSite: _ctx.changeNodeSite
               }, {
-                header: vue.withCtx(({node}) => [
-                  vue.renderSlot(_ctx.$slots, "header", { node: node })
+                header: vue.withCtx(({ node: currentNode }) => [
+                  vue.renderSlot(_ctx.$slots, "header", { node: currentNode })
                 ]),
-                default: vue.withCtx(({node}) => [
-                  vue.renderSlot(_ctx.$slots, "default", { node: node })
+                default: vue.withCtx(({ node: currentNode }) => [
+                  vue.renderSlot(_ctx.$slots, "default", { node: currentNode })
                 ]),
                 _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["node", "id", "onClick", "onChangeNodeSite", "index", "active"]))
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["id", "node", "active", "node-width", "node-height", "editable", "onClick", "onChangeNodeSite"]))
             : vue.createCommentVNode("v-if", true)
         ], 64 /* STABLE_FRAGMENT */))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ], 12 /* STYLE, PROPS */, _hoisted_1)
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 14 /* CLASS, STYLE, PROPS */, _hoisted_1)
   ], 6 /* CLASS, STYLE */))
 }
 

package/lib/packages/element-plus/flow/node.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });