feat: 1.1.19工作流新的拖拽模式

Author: demonray

web/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@dataspherestudio/apiServices",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "dependencies": {
-    "@dataspherestudio/shared": "^1.1.18"
+    "@dataspherestudio/shared": "^1.1.19"
   }
 }

web/packages/apiServices/package.json

@@ -0,0 +1,155 @@
+# 说明
+Cytoscape.js 是一个用于分析和可视化复杂网络数据的 JavaScript 库。它主要用于渲染图形，支持节点和边的自定义样式，并提供了丰富的交互功能。Cytoscape.js 可以用于创建网络图（如社交网络、生物学网络等）、流程图、组织图、文件系统图等。
+主要特点：
+
+高度可定制：节点和边的样式可以自定义，支持多种形状、颜色、大小等属性。
+强大的布局算法：内置多种布局算法，如环形布局、力导布局、矩阵布局等，也支持自定义布局。
+丰富的交互：支持多种交互方式，如拖拽、缩放、选择、悬停等，可以方便地与其他库集成。
+插件扩展：通过插件，可以扩展 Cytoscape.js 的功能，如添加新的布局算法、新的交互方式等。
+数据驱动：Cytoscape.js 使用 JSON 格式来表示网络数据，方便数据处理和管理。
+
+cyeditor 使用Cytoscape.js配合一些扩展开发实现DSS工作流编辑视图功能。
+
+# 目录及文件说明
+
+```
+├─cyeditor-context-menu   # 右键菜单扩展
+├─cyeditor-dom-node       # DOM节点
+├─cyeditor-drag-add-nodes # 节点拖拽添加
+├─cyeditor-edgehandles    # 连线
+│  └─edgehandles
+├─cyeditor-navigator      # 缩略图导航
+├─cyeditor-snap-grid      # 网格画布
+├─defaults                # 默认设置
+├─utils
+├─index.css
+└─index.js
+```
+
+# 开发调试
+
+  next-web目录下启动
+
+```
+# 调试
+npm run serve_cyeditor 
+# 构建
+npm run build_cyeditor 
+```
+
+# 配置项
+
+```json
+{
+  cy: {         // cytoscape.js的配置
+    layout: {}, // 布局方式
+    styleEnabled: true,
+    style: [],  // cytoscape.js的节点、连线样式配置
+    minZoom: 0.1,
+    maxZoom: 10
+  },
+  editor: {           // 编辑器的配置
+    container: '',    // 组件初始化dom
+    zoomRate: 0.2,
+    lineType: 'bezier',
+    dragAddNodes: true,
+    snapGrid: true,
+    contextMenu: true,
+    navigator: true,
+    nodeTypes: [],    // 节点类型
+    beforeAdd (el) {
+      return true
+    },
+    afterAdd (el) {
+
+    }
+  }
+}
+```
+# API
+ - deleteSelected
+
+    设置viewport进行缩放
+
+ - save
+ 
+    设置viewport进行缩放
+
+ - fit
+
+    设置画布viewport缩放显示所有元素
+ - zoom
+
+    设置viewport进行缩放
+
+ - toggleGrid
+ 
+    切换网格辅助
+
+ - jpg
+ - png
+ - json
+ 
+    JSON格式数据设置、获取
+
+ - data
+
+    设置、获取关联的自定义数据
+
+ - removeData
+
+    删除关联的自定义数据
+ - destroy
+
+# 使用
+
+```javascript
+const cyeditorel = ref<any>(null);
+onMounted(() => {
+  const container = cyeditorel.value;
+  let config = {
+    cy: {
+      layout: {
+        name: 'klay',
+        rows: 5,
+      },
+      styleEnabled: true,
+      minZoom: 0.1,
+      maxZoom: 10,
+    },
+    editor: {
+      container,
+      zoomRate: 0.2,
+      lineType: 'bezier',
+      dragAddNodes: true,
+      snapGrid: true,
+      contextMenu: true,
+      navigator: true,
+      // nodeTypes: [],
+      beforeAdd() {
+        return true;
+      },
+      afterAdd() {
+        //
+      },
+    },
+  };
+  const { editor, cy } = new CyEditor(config);
+  editor.json({
+    boxSelectionEnabled: true,
+    elements: props.data,
+    pan: { x: 0, y: 0 },
+    panningEnabled: true,
+    userPanningEnabled: true,
+    userZoomingEnabled: true,
+    zoom: 1,
+    zoomingEnabled: true,
+  });
+  cy.layout(config.cy.layout).run();
+  editor.on('change', (scope, editor) => {
+    let json = editor.json();
+    console.log(json);
+  });
+});
+```
+

web/packages/cyeditor/README.md

@@ -0,0 +1,184 @@
+import utils from '../utils'
+
+const defaults = {
+  menus: [
+    {
+      id: 'remove',
+      content: 'remove',
+      disabled: false,
+      divider: true
+    },
+    {
+      id: 'hide',
+      content: 'hide',
+      disabled: false
+    }
+  ],
+  beforeShow: (e) => { return e.target.isNode() || e.target.isEdge() },
+  beforeClose: () => { return true }
+}
+
+class ContextMenu {
+  constructor(cy, params) {
+    this.cy = cy
+    this._options = Object.assign({}, defaults, params)
+    this._listeners = {}
+    this._init()
+  }
+  _init() {
+    this._initContainer()
+    this._initDom()
+    this._initEvents()
+  }
+
+  _initContainer() {
+    this._container = this.cy.container()
+    this.ctxmenu = document.createElement('div')
+    this.ctxmenu.className = 'cy-editor-ctx-menu'
+    this._container.append(this.ctxmenu)
+  }
+
+  _initDom() {
+    function getSvgIcon(icon) {
+      return `<svg aria-hidden="true" class="icon designer-menu-li-icon"><use xlink:href="#icon-${icon}"></use></svg>`
+    }
+    this.ctxmenu.innerHTML = this._options.menus.reduce((str, item) => {
+      return str + `<div class="ctx-menu-item ${item.disabled ? 'ctx-menu-item-disabled' : ''}" data-menu-item="${item.id}">
+                  ${getSvgIcon(item.icon)}
+                  <span class="ctx-menu-item-title">${item.content}</span>
+                  ${item.children && item.children.length ? '>' : ''}
+                  ${ item.children && item.children.length ?
+                    `<div class="ctx-submenu-wrap">
+                      ${item.children.reduce((text, child) => text + `<div class="ctx-submenu-item" data-menu-item="${item.id}" data-submenu-item="${child.value}">${getSvgIcon(child.icon)}<span>${child.text}</span></div>`, '')}
+                    </div>` :
+                    ''
+                  }
+                </div>`;
+    }, '');
+  }
+
+  _initEvents() {
+    this._listeners.eventCyTap = (event) => {
+      this.renderedPos = event.renderedPosition || event.cyRenderedPosition
+      let left = this.renderedPos.x
+      let top = this.renderedPos.y
+      utils.css(this.ctxmenu, {
+        top: top + 'px',
+        left: (left + 200) + 'px'
+      })
+      this.show(event)
+    }
+    this._listeners.eventTapstart = (e) => {
+      this.close(e)
+    }
+    this._listeners.click = (e) => {
+      e.stopPropagation();
+      let target = e.target;
+      let id = target.getAttribute('data-menu-item');
+      if (!id) {
+        target = e.target.parentNode;
+        id = target.getAttribute('data-menu-item');
+      }
+      let menuItem = this._options.menus.find(item => item.id === id);
+      const subId = target.getAttribute('data-submenu-item');
+      if (subId) {
+        menuItem = menuItem.children.find(item => item.value === subId);
+        menuItem.id = subId;
+      }
+      const pan = this.triggerEvt.cy.pan()
+      const zoom = this.triggerEvt.cy.zoom()
+      this.cy.trigger('cyeditor.ctxmenu', {
+        menuItem,
+        target: this.triggerEvt.target,
+        event: {
+          offsetX: (this.renderedPos.x - pan.x) / zoom,//+ 75 ,
+          offsetY: (this.renderedPos.y - pan.y) / zoom  //+ 20s
+        }
+      })
+      this.close(e);
+    }
+    this.ctxmenu.addEventListener('mousedown', this._listeners.click)
+    this.cy.on('cxttap', this._listeners.eventCyTap)
+    this.cy.on('tapstart', this._listeners.eventTapstart)
+  }
+
+  disable(id, disabled = true) {
+    const items = utils.query(`.cy-editor-ctx-menu [data-menu-item=${id}]`)
+    items.forEach(menuItem => {
+      if (disabled) {
+        utils.addClass(menuItem, 'ctx-menu-item-disabled')
+      } else {
+        utils.removeClass(menuItem, 'ctx-menu-item-disabled')
+      }
+    })
+  }
+
+  changeMenus(menus) {
+    this._options.menus = menus
+    this._initDom()
+  }
+
+  show(e) {
+    if (e.target.data().type === 'edgehandle') return
+    this.triggerEvt = e;
+    if (typeof this._options.beforeShow === 'function' && !this.isShow) {
+      const show = this._options.beforeShow(e, this._options.menus.slice(0))
+      if (!show) return
+      if (show && show.then) {
+        show.then((res) => {
+          if (res) {
+            utils.css(this.ctxmenu, {
+              display: 'block'
+            })
+            this.isShow = true
+          }
+        })
+        return
+      }
+      if (Array.isArray(show) && show.length) {
+        this.changeMenus(show)
+      } else {
+        return
+      }
+      utils.css(this.ctxmenu, {
+        display: 'block'
+      })
+      this.isShow = true
+    }
+  }
+
+  close(e) {
+    if (typeof this._options.beforeShow === 'function' && this.isShow) {
+      const close = this._options.beforeClose(e)
+      if (close === true) {
+        utils.css(this.ctxmenu, {
+          display: 'none'
+        })
+        this.isShow = false
+      } else if (close.then) {
+        close.then(() => {
+          utils.css(this.ctxmenu, {
+            display: 'none'
+          })
+          this.isShow = false
+        })
+      }
+    }
+  }
+
+  destroy() {
+    this.ctxmenu.removeEventListener('mousedown', this._listeners.click)
+    this.cy.off('tapstart', this._listeners.eventTapstart)
+    this.cy.off('cxttap', this._listeners.eventCyTap)
+  }
+}
+
+export default (cytoscape) => {
+  if (!cytoscape) {
+    return
+  }
+
+  cytoscape('core', 'contextMenu', function (options) {
+    return new ContextMenu(this, options)
+  })
+}