diff --git a/ebts-ui/src/router/index.js b/ebts-ui/src/router/index.js index b8fbfed..31ba445 100644 --- a/ebts-ui/src/router/index.js +++ b/ebts-ui/src/router/index.js @@ -92,19 +92,6 @@ export const constantRoutes = [ } ] }, - { - path: '/top', - component: Layout, - hidden: true, - children: [ - { - path: '/', - component: (resolve) => require(['@/views/system/top/demo-topology'], resolve), - name:'Top', - meta: {title: 'top视图'} - } - ] - }, { path: '/apiclass', component: Layout, diff --git a/ebts-ui/src/views/system/top/demo-topology.vue b/ebts-ui/src/views/system/top/demo-topology.vue deleted file mode 100644 index fd86ae6..0000000 --- a/ebts-ui/src/views/system/top/demo-topology.vue +++ /dev/null @@ -1,224 +0,0 @@ - - - - - - - diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.css b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.css deleted file mode 100644 index 142743d..0000000 --- a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.css +++ /dev/null @@ -1,109 +0,0 @@ -@font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1568972645985'); /* IE9 */ - src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), - url('iconfont.woff?t=1568972645985') format('woff'), - url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ - url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */ -} - -.iconfont { - font-family: "iconfont" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-download:before { - content: "\e68d"; -} - -.icon-zoom-out:before { - content: "\e69c"; -} - -.icon-image:before { - content: "\e752"; -} - -.icon-iconedit:before { - content: "\e650"; -} - -.icon-actualsize:before { - content: "\e665"; -} - -.icon-copy:before { - content: "\e61c"; -} - -.icon-zoom-in:before { - content: "\e600"; -} - -.icon-clear:before { - content: "\e700"; -} - -.icon-flow-line:before { - content: "\e660"; -} - -.icon-redo:before { - content: "\e716"; -} - -.icon-undo:before { - content: "\e71a"; -} - -.icon-fit:before { - content: "\e7cb"; -} - -.icon-to-front:before { - content: "\e7cc"; -} - -.icon-to-back:before { - content: "\e7cd"; -} - -.icon-roi-select:before { - content: "\e7ce"; -} - -.icon-json:before { - content: "\e623"; -} - -.icon-fullscreen:before { - content: "\e648"; -} - -.icon-broken:before { - content: "\e9ad"; -} - -.icon-curve:before { - content: "\e9b0"; -} - -.icon-paste:before { - content: "\e963"; -} - -.icon-group:before { - content: "\e915"; -} - -.icon-ungroup:before { - content: "\e917"; -} - -.icon-arrow-dropdown:before { - content: "\e601"; -} - diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot deleted file mode 100644 index 3eda34f..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.js b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.js deleted file mode 100644 index 9467797..0000000 --- a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -!function(i){var c,o='',h=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(h&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var h=function(){document.removeEventListener("DOMContentLoaded",h,!1),c()};document.addEventListener("DOMContentLoaded",h,!1)}else document.attachEvent&&(t=c,l=i.document,e=!1,(v=function(){try{l.documentElement.doScroll("left")}catch(c){return void setTimeout(v,50)}o()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,o())});function o(){e||(e=!0,t())}var t,l,e,v}(function(){var c,h;(c=document.createElement("div")).innerHTML=o,o=null,(h=c.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",function(c,h){h.firstChild?function(c,h){h.parentNode.insertBefore(c,h)}(c,h.firstChild):h.appendChild(c)}(h,document.body))})}(window); \ No newline at end of file diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg deleted file mode 100644 index f4aa4a7..0000000 --- a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - -Created by iconfont - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf deleted file mode 100644 index d5ab0e1..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff deleted file mode 100644 index 6bfe8bd..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2 b/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2 deleted file mode 100644 index 482e53e..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2 and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/images/client.png b/ebts-ui/src/views/system/top/packages/assets/images/client.png deleted file mode 100644 index f2fe60e..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/images/client.png and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/images/database.png b/ebts-ui/src/views/system/top/packages/assets/images/database.png deleted file mode 100644 index 809869e..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/images/database.png and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/images/firewall.png b/ebts-ui/src/views/system/top/packages/assets/images/firewall.png deleted file mode 100644 index c364c42..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/images/firewall.png and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/images/server.png b/ebts-ui/src/views/system/top/packages/assets/images/server.png deleted file mode 100644 index 0e49219..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/images/server.png and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/assets/logo.png b/ebts-ui/src/views/system/top/packages/assets/logo.png deleted file mode 100644 index fb83843..0000000 Binary files a/ebts-ui/src/views/system/top/packages/assets/logo.png and /dev/null differ diff --git a/ebts-ui/src/views/system/top/packages/elements/button.vue b/ebts-ui/src/views/system/top/packages/elements/button.vue deleted file mode 100644 index 52d48c6..0000000 --- a/ebts-ui/src/views/system/top/packages/elements/button.vue +++ /dev/null @@ -1,93 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/elements/checkbox.vue b/ebts-ui/src/views/system/top/packages/elements/checkbox.vue deleted file mode 100644 index aa36f62..0000000 --- a/ebts-ui/src/views/system/top/packages/elements/checkbox.vue +++ /dev/null @@ -1,79 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/elements/dropdown.vue b/ebts-ui/src/views/system/top/packages/elements/dropdown.vue deleted file mode 100644 index fc71705..0000000 --- a/ebts-ui/src/views/system/top/packages/elements/dropdown.vue +++ /dev/null @@ -1,228 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/elements/index.js b/ebts-ui/src/views/system/top/packages/elements/index.js deleted file mode 100644 index 81367e7..0000000 --- a/ebts-ui/src/views/system/top/packages/elements/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/14 - * @description: ClayTop内部的通用组件 - */ - -import Checkbox from './checkbox' -import Button from './button' -import Dropdown from './dropdown' -import Loading from './loading' - -export { - Checkbox, - Button, - Dropdown, - Loading -} diff --git a/ebts-ui/src/views/system/top/packages/elements/loading.vue b/ebts-ui/src/views/system/top/packages/elements/loading.vue deleted file mode 100644 index f410a92..0000000 --- a/ebts-ui/src/views/system/top/packages/elements/loading.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js deleted file mode 100644 index 76831ff..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js +++ /dev/null @@ -1,93 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用） - */ - - -export default { - name: 'click-add-edge', - options: { - getEvents() { - return { - 'node:click': 'onNodeClick', - 'canvas:mousemove': 'onMousemove', - 'edge:click': 'onEdgeClick' // 点击空白处，取消边 - } - }, - onNodeClick(event) { - let graph = this.graph - let node = event.item - let point = { x: event.x, y: event.y } - let model = node.getModel() - let edgeShape = self.currentEdgeShape.guid || 'line' - if (this.addingEdge && this.edge) { - // 点击第二个节点 - graph.updateItem(this.edge, { - target: model.id - }) - this.edge = null - this.addingEdge = false - // 记录【连线】前后的数据状态 - if (this.historyData) { - let graph = this.graph - // 如果当前点过【撤销】了，连线后没有【重做】功能 - // 重置undoCount，连线后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (self.undoCount > 0) { - self.historyIndex = self.historyIndex - self.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= self.undoCount; i++) { - let key = `graph_history_${self.historyIndex + i}` - self.removeHistoryData(key) - } - self.undoCount = 0 - } else { - // 正常顺序执行的情况，记录【连线】前的数据状态 - let key = `graph_history_${self.historyIndex}` - self.addHistoryData(key, this.historyData) - } - // 记录【连线】后的数据状态 - self.historyIndex += 1 - let key = `graph_history_${self.historyIndex}` - let currentData = JSON.stringify(graph.save()) - self.addHistoryData(key, currentData) - } - } else { - // 点击第一个节点 - this.historyData = JSON.stringify(graph.save()) - if (edgeShape === 'stepline') { - this.edge = graph.addItem('edge', { - source: model.id, - target: point, - type: edgeShape, - controlPoints: [{ x: 100, y: 70 }] - }) - } else { - this.edge = graph.addItem('edge', { - source: model.id, - target: point, - type: edgeShape - }) - } - this.addingEdge = true - } - }, - onMousemove(event) { - const point = { x: event.x, y: event.y } - if (this.addingEdge && this.edge) { - this.graph.updateItem(this.edge, { - target: point - }) - } - }, - onEdgeClick(ev) { - let graph = this.graph - const currentEdge = ev.item - // 拖拽过程中，点击会点击到新增的边上 - if (this.addingEdge && this.edge === currentEdge) { - graph.removeItem(this.edge) - this.edge = null - this.addingEdge = false - } - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js deleted file mode 100644 index 674f850..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js +++ /dev/null @@ -1,172 +0,0 @@ -/** - * @author: winyuan - * @data: 2019/07/16 - * @repository: https://github.com/winyuan - * @description: edit mode: 鼠标点击交互 - */ - -// 用来获取调用此js的vue组件实例（this） -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, // 暴露函数 - name: "click-event-edit", - options: { - getEvents() { - return { - "node:click": "onNodeClick", - "node:contextmenu": "onNodeRightClick", - "edge:click": "onEdgeClick", - "edge:contextmenu": "onEdgeRightClick", - "canvas:click": "onCanvasClick", - }; - }, - - - onNodeClick(event) { - // todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态 - // let clickNode = event.item; - // clickNode.setState('selected', !clickNode.hasState('selected')); - - - vm.currentFocus = "node"; - vm.rightMenuShow = false; - this.updateVmData(event); - }, - onNodeRightClick(event) { - let graph = vm.graph; - let clickNode = event.item; - let clickNodeModel = clickNode.getModel(); - let selectedNodes = graph.findAllByState("node", "selected"); - let selectedNodeIds = selectedNodes.map(item => { - return item.getModel().id; - }); - vm.selectedNode = clickNode; - // 如果当前点击节点是之前选中的某个节点，就进行下面的处理 - if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) { - vm.rightMenuShow = true; - let rightMenu = vm.$refs.rightMenu; - rightMenu.style.left = event.clientX + "px"; - rightMenu.style.top = event.clientY + "px"; - } else { - // 隐藏右键菜单 - vm.rightMenuShow = false; - // 先取消所有节点的选中状态 - selectedNodes.forEach(node => { - node.setState("selected", false); - }); - // 再添加该节点的选中状态 - clickNode.setState("selected", true); - vm.currentFocus = "node"; - this.updateVmData(event); - } - graph.paint(); - }, - onEdgeClick(event) { - let clickEdge = event.item; - clickEdge.setState("selected", !clickEdge.hasState("selected")); - vm.currentFocus = "edge"; - this.updateVmData(event); - }, - onEdgeRightClick(event) { - let graph = vm.graph; - let clickEdge = event.item; - let clickEdgeModel = clickEdge.getModel(); - let selectedEdges = graph.findAllByState("edge", "selected"); - // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 - if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { - // 先取消所有节点的选中状态 - graph.findAllByState("edge", "selected").forEach(edge => { - edge.setState("selected", false); - }); - // 再添加该节点的选中状态 - clickEdge.setState("selected", true); - vm.currentFocus = "edge"; - this.updateVmData(event); - } - let point = { x: event.x, y: event.y }; - }, - onCanvasClick() { - vm.currentFocus = "canvas"; - vm.rightMenuShow = false; - }, - updateVmData(event) { - let self = this - if (event.item._cfg.type === "node") { - - // const item = event.item; - // let group = item.getContainer(); - // let children = group.get("children"); - // for (let i = 0, len = children.length; i < len; i++) { - // const shape = children[i]; - // if (shape.get("name") === "collapses") { - // console.log(shape.get("name"),"dkfjg"); - // self.graph.updateItem(item, { - // collapsed: true, - // size: [300, 50] - // }); - // setTimeout(() => graph.layout(), 100); - // } else if (shape.get("name") === "expands") { - // - // console.log(shape.get("name"),"expands"); - // self.graph.updateItem(item, { - // collapsed: false, - // size: [300, 500] - // }); - // setTimeout(() => graph.layout(), 100); - // } - // } - // 更新vm的data: selectedNode 和 selectedNodeParams - - - let clickNode = event.item; - // console.log(clickNode) - if (clickNode.hasState("selected")) { - let clickNodeModel = clickNode.getModel(); - vm.selectedNode = clickNode; - let nodeAppConfig = { ...vm.nodeAppConfig }; - Object.keys(nodeAppConfig).forEach(function(key) { - nodeAppConfig[key] = ""; - }); - vm.selectedNodeParams = { - label: clickNodeModel.label || "", - appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig } - }; - } - } else if (event.item._cfg.type === "edge") { - // 更新vm的data: selectedEdge 和 selectedEdgeParams - let clickEdge = event.item; - if (clickEdge.hasState("selected")) { - let clickEdgeModel = clickEdge.getModel(); - vm.selectedEdge = clickEdge; - let edgeAppConfig = { ...vm.edgeAppConfig }; - Object.keys(edgeAppConfig).forEach(function(key) { - edgeAppConfig[key] = ""; - }); - vm.selectedEdgeParams = { - label: clickEdgeModel.label || "", - appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } - }; - } - } - } - } -}; -const isInBBox = (point, bbox) => { - const { - x, - y - } = point; - const { - minX, - minY, - maxX, - maxY - } = bbox; - - return x < maxX && x > minX && y > minY && y < maxY; -}; diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/dice-er-scroll.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/dice-er-scroll.js deleted file mode 100644 index c8ee530..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/dice-er-scroll.js +++ /dev/null @@ -1,122 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/14 23:20 - * @email: clay@hchyun.com - * @description: node - */ -const isInBBox = (point, bbox) => { - const { - x, - y - } = point; - const { - minX, - minY, - maxX, - maxY - } = bbox; - - return x < maxX && x > minX && y > minY && y < maxY; -}; - -export default { - name: 'dice-er-scroll', - options: { - getDefaultCfg() { - return { - multiple: true, - }; - }, - getEvents() { - return { - itemHeight: 50, - wheel: "scroll", - click: "click", - "node:mousemove": "moves", - }; - }, - scroll(e) { - console.log(454) - e.preventDefault(); - const { - graph - } = this; - const nodes = graph.getNodes().filter((n) => { - const bbox = n.getBBox(); - - return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); - }); - if (nodes) { - nodes.forEach((node) => { - const model = node.getModel(); - if (model.attrs.length < 9) { - return; - } - const idx = model.startIndex || 0; - let startX = model.startX || 0.5; - let startIndex = idx + e.deltaY * 0.02; - startX -= e.deltaX; - if (startIndex < 0) { - startIndex = 0; - } - if (startX > 0) { - startX = 0; - } - if (startIndex > model.attrs.length - 1) { - startIndex = model.attrs.length - 1; - } - graph.update(node, { - startIndex, - startX, - }); - }); - } - - - }, - click(e) { - console.log(789) - const { - graph - } = this; - const { - // eslint-disable-next-line no-unused-vars - y - } = e; - const item = e.item; - const shape = e.shape; - if (!item) { - return; - } - // eslint-disable-next-line no-unused-vars - const model = item.getModel(); - - if (shape.get("name") === "collapse") { - graph.updateItem(item, { - collapsed: true, - size: [300, 50], - }); - setTimeout(() => graph.layout(), 100); - } else if (shape.get("name") === "expand") { - graph.updateItem(item, { - collapsed: false, - size: [300, 500], - }); - setTimeout(() => graph.layout(), 100); - } - }, - moves(e) { - const name = e.shape.get("name"); - const item = e.item; - if (name && name.startsWith("item")) { - this.graph.updateItem(item, { - selectedIndex: Number(name.split("-")[1]), - }); - } else { - this.graph.updateItem(item, { - selectedIndex: NaN, - }); - } - }, - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js deleted file mode 100644 index cab35e9..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 通过拖拽节点上的锚点添加连线 - */ -import utils from "../utils"; - -// 用来获取调用此js的vue组件实例（this） -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -import G6 from "@antv/g6"; -import theme from "../theme"; - -export default { - sendThis, // 暴露函数 - name: "drag-add-edge", - options: { - getEvents() { - return { - "node:mousedown": "onNodeMousedown", - "node:mouseup": "onNodeMouseup", - "edge:mouseup": "onEdgeMouseup", - "mousemove": "onMousemove" - }; - }, - onNodeMousedown(event) { - let self = this; - // 交互过程中的信息 - self.evtInfo = { - action: null, - node: event.item, - target: event.target - }; - if (self.evtInfo.target && self.evtInfo.target.attrs.name) { - // todo...未来可能针对锚点增加其它功能(例如拖拽调整大小) - switch (self.evtInfo.target.attrs.name) { - case "anchor": - self.evtInfo.action = "drawEdge"; - break; - } - } - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].start.call(self, event); - } - }, - onNodeMouseup(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].stop.call(self, event); - } - }, - onEdgeMouseup(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action === "drawEdge") { - self[self.evtInfo.action].stop.call(self, event); - } - }, - onMousemove(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].move.call(self, event); - } - }, - drawEdge: { - isMoving: false, - currentLine: null, - start: function(event) { - let self = this; - let themeStyle = theme.defaultStyle; // todo...先使用默认主题，后期可能增加其它风格的主体 - - // ************** 暂存【连线】前的数据状态 start ************** - let graph = vm.graph; - self.historyData = JSON.stringify(graph.save()); - // ************** 暂存【连线】前的数据状态 end ************** - - let sourceAnchor = self.evtInfo.node.getAnchorPoints(); - let sourceNodeModel = self.evtInfo.node.getModel(); - // 锚点数据 - let anchorPoints = self.evtInfo.node.getAnchorPoints(); - // 处理线条目标点 - if (anchorPoints && anchorPoints.length) { - // 获取距离指定坐标最近的一个锚点 - // sourceAnchor = self.evtInfo.node.getLinkPoint({ - // x: event.x, - // y: event.y - // }) - } - console.log(anchorPoints, sourceAnchor); - self.drawEdge.currentLine = self.graph.addItem("edge", { - // id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复 - id: utils.generateUUID(), - // 起始节点 - source: sourceNodeModel.id, - sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "", - // 终止节点/位置 - target: { - x: event.x, - y: event.y - }, - type: self.graph.$C.edge.type || "top-line", - style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style) - }); - self.drawEdge.isMoving = true; - }, - move(event) { - let self = this; - if (self.drawEdge.isMoving && self.drawEdge.currentLine) { - self.graph.updateItem(self.drawEdge.currentLine, { - target: { - x: event.x, - y: event.y - } - }); - } - }, - stop(event) { - let self = this; - if (self.drawEdge.isMoving) { - if (self.drawEdge.currentLine === event.item) { - // 画线过程中点击则移除当前画线 - self.graph.removeItem(event.item); - } else { - let targetNode = event.item; - let targetNodeModel = targetNode.getModel(); - let targetAnchor = null; - // 锚点数据 - let anchorPoints = targetNode.getAnchorPoints(); - // 处理线条目标点 - if (anchorPoints && anchorPoints.length) { - // 获取距离指定坐标最近的一个锚点 - targetAnchor = targetNode.getLinkPoint({ - x: event.x, - y: event.y - }); - } - self.graph.updateItem(self.drawEdge.currentLine, { - target: targetNodeModel.id, - targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "" - }); - - // ************** 记录historyData的逻辑 start ************** - if (this.historyData) { - let graph = this.graph; - // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能 - // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.undoCount > 0) { - vm.historyIndex = vm.historyIndex - vm.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.undoCount; i++) { - let key = `graph_history_${vm.historyIndex + i}`; - vm.removeHistoryData(key); - } - vm.undoCount = 0; - } else { - // 正常顺序执行的情况，记录拖拽前的数据状态 - let key = `graph_history_${vm.historyIndex}`; - vm.addHistoryData(key, this.historyData); - } - // 记录拖拽后的数据状态 - vm.historyIndex += 1; - let key = `graph_history_${vm.historyIndex}`; - let currentData = JSON.stringify(graph.save()); - vm.addHistoryData(key, currentData); - } - // ************** 记录historyData的逻辑 end ************** - } - } - self.drawEdge.currentLine = null; - self.drawEdge.isMoving = false; - self.evtInfo = null; - } - } - } -}; diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js deleted file mode 100644 index 08ebc57..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】) - */ - -// 用来获取调用此js的vue组件实例（this） -let vm = null - -const sendThis = (_this) => { - vm = _this -} - -export default { - sendThis, // 暴露函数 - name: 'drag-event-edit', - options: { - getEvents() { - return { - 'node:dragstart': 'onNodeDragstart', - 'node:dragend': 'onNodeDragend' - } - }, - onNodeDragstart() { - let graph = vm.graph - this.historyData = JSON.stringify(graph.save()) - }, - onNodeDragend() { - if (this.historyData) { - let graph = this.graph - // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能 - // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.undoCount > 0) { - vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.undoCount; i++) { - let key = `graph_history_${vm.historyIndex + i}` - vm.removeHistoryData(key) - } - vm.undoCount = 0 - } else { - // 正常顺序执行的情况，记录拖拽前的数据状态 - let key = `graph_history_${vm.historyIndex}` - vm.addHistoryData(key, this.historyData) - } - // 记录拖拽后的数据状态 - vm.historyIndex += 1 - let key = `graph_history_${vm.historyIndex}` - let currentData = JSON.stringify(graph.save()) - vm.addHistoryData(key, currentData) - } - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js deleted file mode 100644 index 8754a5e..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 悬浮交互 - */ -// 用来获取调用此js的vue组件实例（this） -let vm = null; -const sendThis = (_this) => { - vm = _this; -}; -export default { - sendThis, // 暴露函数 - name: "hover-event-edit", - options: { - getEvents() { - return { - "node:mouseover": "onNodeHover", - "node:mouseout": "onNodeOut", - }; - }, - onNodeHover(event) { - let graph = vm.graph; - let hoverNode = event.item; - - const name = event.shape.get("name"); - const item = event.item; - - if (name && name.startsWith("item")) { - graph.updateItem(item, { - selectedIndex: Number(name.split("-")[1]) - }); - } else { - graph.updateItem(item, { - selectedIndex: NaN - }); - } - // console.log(item); - hoverNode.setState("hover", true); - }, - onNodeOut(event) { - let hoverNode = event.item; - hoverNode.setState("hover", false); - } - } -}; diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/index.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/index.js deleted file mode 100644 index 20d1cb8..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/index.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: register behaviors - */ - -import dragAddEdge from './drag-add-edge' -import hoverEventEdit from './hover-event-edit' -import clickEventEdit from './click-event-edit' -import dragEventEdit from './drag-event-edit' -import keyupEventEdit from './keyup-event-edit' -import diceErScroll from './dice-er-scroll' - -const obj = { - // dragAddEdge, - // hoverEventEdit, - // clickEventEdit, - dragEventEdit, - keyupEventEdit, - diceErScroll -} - -export default { - obj, - register(G6) { - Object.values(obj).map(item => { - G6.registerBehavior(item.name, item.options) - }) - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js deleted file mode 100644 index cdb6af3..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】) - */ - -// 用来获取调用此js的vue组件实例（this） -let vm = null - -const sendThis = (_this) => { - vm = _this -} - -export default { - sendThis, // 暴露函数 - name: 'keyup-event-edit', - options: { - getEvents() { - return { - 'keyup': 'onKeyup' - } - }, - onKeyup(event) { - let graph = this.graph - let selectedNodes = graph.findAllByState('node', 'selected') - let selectedEdges = graph.findAllByState('edge', 'selected') - if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) { - - // ************** 记录【删除】前的数据状态 start ************** - let historyData = JSON.stringify(graph.save()) - let key = `graph_history_${vm.historyIndex}` - vm.addHistoryData(key, historyData) - // ************** 记录【删除】前的数据状态 end ************** - - // 开始删除 - for (let i = 0; i < selectedNodes.length; i++) { - graph.removeItem(selectedNodes[i]) - } - for (let i = 0; i < selectedEdges.length; i++) { - graph.removeItem(selectedEdges[i]) - } - - // ************** 记录【删除】后的数据状态 start ************** - // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能 - // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.undoCount > 0) { - vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.undoCount; i++) { - let key = `graph_history_${vm.historyIndex + i}` - vm.removeHistoryData(key) - } - vm.undoCount = 0 - } - // 记录【删除】后的数据状态 - vm.historyIndex += 1 - key = `graph_history_${vm.historyIndex}` - let currentData = JSON.stringify(graph.save()) - vm.addHistoryData(key, currentData) - // ************** 记录【删除】后的数据状态 end ************** - } - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/behavior/wheel-node.js b/ebts-ui/src/views/system/top/packages/topology/src/behavior/wheel-node.js deleted file mode 100644 index 8b9a443..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/behavior/wheel-node.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/13 23:14 - * @email: clay@hchyun.com - * @description: node - */ - - -export default { - name: "wheel-node", - options: { - getEvents() { - return { - wheel: "scorll" - }; - }, - scorll(e) { - console.log(456) - e.preventDefault(); - const { - graph - } = this; - const nodes = graph.getNodes().filter((n) => { - const bbox = n.getBBox(); - - return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); - }); - if (nodes) { - nodes.forEach((node) => { - const model = node.getModel(); - if (model.attrs.length < 9) { - return; - } - const idx = model.startIndex || 0; - let startX = model.startX || 0.5; - let startIndex = idx + e.deltaY * 0.02; - startX -= e.deltaX; - if (startIndex < 0) { - startIndex = 0; - } - if (startX > 0) { - startX = 0; - } - if (startIndex > model.attrs.length - 1) { - startIndex = model.attrs.length - 1; - } - graph.update(node, { - startIndex, - startX, - }); - }); - } - - - }, - } -}; - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/config/edge.js b/ebts-ui/src/views/system/top/packages/topology/src/config/edge.js deleted file mode 100644 index a12862d..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/config/edge.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/16 - * @description: 线条的后期设置 - */ - -export default { - type: 'cc-line', - style: { - startArrow: false, - endArrow: false - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/config/index.js b/ebts-ui/src/views/system/top/packages/topology/src/config/index.js deleted file mode 100644 index abed973..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/config/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/16 - * @description: 配置 - */ - -import edge from './edge' - -export default { - edge -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js deleted file mode 100644 index 0d47f19..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js +++ /dev/null @@ -1,130 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/14 23:46 - * @email: clay@hchyun.com - * @description: node - */ -import {Util} from '@antv/g6' -export default { - name: 'dice-er-edge', - options: { - draw(cfg, group) { - //todo 画线 - // console.log("cfg",cfg,"group",group) - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - - const sourceIndex = sourceNode.attrs.findIndex( - (e) => e.key === cfg.sourceKey - ); - - const sourceStartIndex = sourceNode.startIndex || 0; - - let sourceY = 15; - - if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { - sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30; - sourceY = Math.min(sourceY, 300); - } - - const targetIndex = targetNode.attrs.findIndex( - (e) => e.key === cfg.targetKey - ); - - const targetStartIndex = targetNode.startIndex || 0; - - let targetY = 15; - - if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { - targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30; - targetY = Math.min(targetY, 300); - } - - const startPoint = { - ...cfg.startPoint - }; - const endPoint = { - ...cfg.endPoint - }; - - startPoint.y = startPoint.y + sourceY; - endPoint.y = endPoint.y + targetY; - - let shape; - if (sourceNode.id !== targetNode.id) { - shape = group.addShape("path", { - attrs: { - stroke: "#53da3a", - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - endPoint.x / 3 + (2 / 3) * startPoint.x, - startPoint.y, - endPoint.x / 3 + (2 / 3) * startPoint.x, - endPoint.y, - endPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } else if (!sourceNode.collapsed) { - let gap = Math.abs((startPoint.y - endPoint.y) / 3); - if (startPoint["index"] === 1) { - gap = -gap; - } - shape = group.addShape("path", { - attrs: { - stroke: "#53da3a", - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - startPoint.x - gap, - startPoint.y, - startPoint.x - gap, - endPoint.y, - startPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } - - return shape; - }, - afterDraw(cfg, group) { - // eslint-disable-next-line no-unused-vars - const labelCfg = cfg.labelCfg || {}; - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - if (sourceNode.collapsed && targetNode.collapsed) { - return; - } - const path = group.find( - (element) => element.get("name") === "path-shape" - ); - - const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true); - const label = group.addShape("text", { - attrs: { - ...labelStyle, - text: cfg.label || '', - fill: "#000", - textAlign: "center", - stroke: "#fff", - lineWidth: 1, - }, - }); - label.rotateAtStart(labelStyle.rotate); - }, - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/index.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/index.js deleted file mode 100644 index 379aff0..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/18 - * @description: register edges - */ - -import Line from './top-line' -import Brokenline from './top-brokenline' -import Polyline from './top-polyline' -import Cubic from './top-cubic' - -import diceErEdge from './dice-er-edge' - -const obj = { - // Line, - // Brokenline, - // Polyline, - // Cubic - diceErEdge -} - -export default function(G6) { - Object.values(obj).map(item => { - G6.registerEdge(item.name, item.options, item.extendName) - }) -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js deleted file mode 100644 index 8873493..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @author: clay - * @data: 2019/10/22 - * @description: 折线 - */ - -import base from './base' -import theme from '../theme' - -/** - * fix: 继承 polyline 在 G6 3.x 里面有bug - * 现实现方法参考 https://g6.antv.vision/zh/examples/shape/customEdge#customPolyline - */ -export default { - name: 'top-brokenline', - extendName: 'line', - options: { - ...base, - getPath(points) { - const startPoint = points[0] - const endPoint = points[1] - return [ - ['M', startPoint.x, startPoint.y], - ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y], - ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y], - ['L', endPoint.x, endPoint.y] - ] - }, - getShapeStyle(cfg) { - const { startPoint, endPoint } = cfg - const controlPoints = this.getControlPoints(cfg) - let points = [startPoint] // 添加起始点 - // 添加控制点 - if (controlPoints) { - points = points.concat(controlPoints) - } - // 添加结束点 - points.push(endPoint) - const path = this.getPath(points) - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - const style = { - stroke: '#BBB', - lineWidth: 1, - path, - startArrow: false, - endArrow: false, - ...themeStyle.edgeStyle.default - } - return style - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-line.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/top-line.js deleted file mode 100644 index be5a5ff..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-line.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/18 - * @description: 直线 - */ - -import base from './base' - -export default { - name: 'top-line', - extendName: 'line', - options: { - ...base - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js deleted file mode 100644 index 0c9a1c6..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/18 - * @description: 多段线 - */ - -import base from './base' -import { polylineFinding } from './polyline-finding' - -export default { - name: 'top-polyline', - extendName: 'single-edge', - options: { - ...base, - draw(cfg, group) { - const { startPoint, endPoint } = cfg - const controlPoints = this.getControlPoints(cfg) - let points = [startPoint] - if (controlPoints) { - points.push(controlPoints) - } - points.push(endPoint) - let path = this.getPath(points) - const keyShape = group.addShape('path', { - className: 'edge-shape', - attrs: { - ...cfg, - path: path - }, - draggable: true, - name: 'edge-shape' - }) - return keyShape - }, - getPath(points) { - const path = [] - for (let i = 0; i < points.length; i++) { - const point = points[i] - if (i === 0) { - path.push(['M', point.x, point.y]) - } else if (i === points.length - 1) { - path.push(['L', point.x, point.y]) - } else { - const prevPoint = points[i - 1] - let nextPoint = points[i + 1] - let cornerLen = 5 - if (Math.abs(point.y - prevPoint.y) > cornerLen || Math.abs(point.x - prevPoint.x) > cornerLen) { - if (prevPoint.x === point.x) { - path.push(['L', point.x, point.y > prevPoint.y ? point.y - cornerLen : point.y + cornerLen]) - } else if (prevPoint.y === point.y) { - path.push(['L', point.x > prevPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y]) - } - } - const yLen = Math.abs(point.y - nextPoint.y) - const xLen = Math.abs(point.x - nextPoint.x) - if (yLen > 0 && yLen < cornerLen) { - cornerLen = yLen - } else if (xLen > 0 && xLen < cornerLen) { - cornerLen = xLen - } - if (prevPoint.x !== nextPoint.x && nextPoint.x === point.x) { - path.push(['Q', point.x, point.y, point.x, point.y > nextPoint.y ? point.y - cornerLen : point.y + cornerLen]) - } else if (prevPoint.y !== nextPoint.y && nextPoint.y === point.y) { - path.push(['Q', point.x, point.y, point.x > nextPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y]) - } - } - } - return path - }, - getControlPoints(cfg) { - if (!cfg.sourceNode) { - return cfg.controlPoints - } - return polylineFinding(cfg.sourceNode, cfg.targetNode, cfg.startPoint, cfg.endPoint, 40) - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-table.js b/ebts-ui/src/views/system/top/packages/topology/src/edge/top-table.js deleted file mode 100644 index 07d9d01..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-table.js +++ /dev/null @@ -1,128 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/12 0:05 - * @email: clay@hchyun.com - * @description: node - */ -export default { - name: 'top-table', - extendName: 'table', - options:{ - draw(cfg, group) { - //todo 画线 - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - - const sourceIndex = sourceNode.attrs.findIndex( - (e) => e.key === cfg.sourceKey - ); - - const sourceStartIndex = sourceNode.startIndex || 0; - - let sourceY = 15; - - if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { - sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30; - sourceY = Math.min(sourceY, 300); - } - - const targetIndex = targetNode.attrs.findIndex( - (e) => e.key === cfg.targetKey - ); - - const targetStartIndex = targetNode.startIndex || 0; - - let targetY = 15; - - if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { - targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30; - targetY = Math.min(targetY, 300); - } - - const startPoint = { - ...cfg.startPoint - }; - const endPoint = { - ...cfg.endPoint - }; - - startPoint.y = startPoint.y + sourceY; - endPoint.y = endPoint.y + targetY; - - let shape; - if (sourceNode.id !== targetNode.id) { - shape = group.addShape("path", { - attrs: { - stroke: "#5B8FF9", - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - endPoint.x / 3 + (2 / 3) * startPoint.x, - startPoint.y, - endPoint.x / 3 + (2 / 3) * startPoint.x, - endPoint.y, - endPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } else if (!sourceNode.collapsed) { - let gap = Math.abs((startPoint.y - endPoint.y) / 3); - if (startPoint["index"] === 1) { - gap = -gap; - } - shape = group.addShape("path", { - attrs: { - stroke: "#5B8FF9", - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - startPoint.x - gap, - startPoint.y, - startPoint.x - gap, - endPoint.y, - startPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } - - return shape; - }, - afterDraw(cfg, group) { - const labelCfg = cfg.labelCfg || {}; - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - if (sourceNode.collapsed && targetNode.collapsed) { - return; - } - const path = group.find( - (element) => element.get("name") === "path-shape" - ); - - const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true); - const label = group.addShape("text", { - attrs: { - ...labelStyle, - text: cfg.label || '', - fill: "#000", - textAlign: "center", - stroke: "#fff", - lineWidth: 1, - }, - }); - label.rotateAtStart(labelStyle.rotate); - }, - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/graph/index.js b/ebts-ui/src/views/system/top/packages/topology/src/graph/index.js deleted file mode 100644 index 896a784..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/graph/index.js +++ /dev/null @@ -1,159 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: 图的布局方式/图的初始化 - */ - -import d3 from '../plugins/d3-installer' -import theme from '../theme' - -/** - * 图的布局方式/图的初始化 - * @type {{commonGraph: (function(*, *): G6.Graph)}} - */ -const initGraph = { - /** - * 一般布局 - * @param G6 - * @param options - * @returns {G6.Graph} - */ - commonGraph: function(G6, options) { - let graphData = options.graphData - let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // 生成G6实例 - let graph = new G6.Graph({ - plugins: options.plugins, - container: options.container, - width: options.width, - height: options.height, - // layout: { - // type: 'random', - // width: options.width, - // height: options.height - // }, - defaultNode: { - type: 'dice-er-box', - labelCfg: { - position: 'bottom' - } - }, - defaultEdge: { - type: 'dice-er-edge', - labelCfg: { - position: 'center', - autoRotate: false - } - }, - nodeStateStyles: themeStyle.nodeStyle, - // nodeStyle: { - // selected: { - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - // } - // }, - edgeStateStyles: themeStyle.edgeStyle, - // edgeStyle: { - // default: { - // stroke: '#e2e2e2', - // lineWidth: 3, - // lineAppendWidth: 10 - // }, - // selected: { - // shadowColor: '#626262', - // shadowBlur: 3 - // } - // }, - modes: options.modes - }) - // 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理 - graph.read(graphData) - graph.render() - // 返回G6实例 - return graph - }, - /** - * 力导布局 - * @param G6 - * @param options - * @returns {*} - */ - forceLayoutGraph: function(resolve, G6, options) { - let graphData = options.graphData - let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // 生成G6实例 - let graph = new G6.Graph({ - container: options.container, - width: options.width, - height: options.height, - nodeStateStyles: themeStyle.nodeStyle, - edgeStateStyles: themeStyle.edgeStyle - }) - // 初始化力导布局 - let simulation = d3 - .forceSimulation() - .force( - 'link', - d3 - .forceLink() - .id(function(d) { - return d.id - }) - .distance(linkDistance) - .strength(0.5) - ) - .force('charge', d3.forceManyBody().strength(-500).distanceMax(500).distanceMin(100)) - .force('center', d3.forceCenter(options.width / 2, options.height / 2)) - // 定义节点数据 - simulation.nodes(graphData.nodes).on('tick', ticked) - // 定义连线数据 - let edges = [] - for (let i = 0; i < graphData.edges.length; i++) { - edges.push({ - id: graphData.edges[i].id, - source: graphData.edges[i].source, - target: graphData.edges[i].target - }) - } - simulation.force('link').links(edges) - graph.data(graphData) - graph.render() - - function linkDistance(d) { - return 150 - } - - function ticked() { - // protect: planA: 移除事件监听器 planB: 手动停止力模拟 - if (graph.destroyed) { - // simulation.nodes(graphData.nodes).on('tick', null) - simulation.stop() - return - } - if (!graph.get('data')) { - // 若是第一次渲染，定义数据，渲染 - graph.data(graphData) - graph.render() - } else { - // 后续渲染，直接刷新所有点和边的位置 - graph.refreshPositions() - } - } - - // 控制时间: 只布局10秒 - let t = setTimeout(function() { - simulation.stop() - resolve(graph) - }, 10000) - - // 判断force-layout结束 - simulation.on('end', () => { - clearTimeout(t) - resolve(graph) - }) - } -} - -export default initGraph diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/base.js b/ebts-ui/src/views/system/top/packages/topology/src/node/base.js deleted file mode 100644 index 3bdc7ad..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/base.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: 节点基础方法 - */ - -import utils from '../utils' - -export default { - setState(name, value, item) { - // 设置节点状态 - utils.node.setState(name, value, item) - // 设置锚点状态 - utils.anchor.setState(name, value, item) - }, - // 绘制后附加锚点 - afterDraw(cfg, group) { - // 绘制锚点 - utils.anchor.draw(cfg, group) - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/dice-er-box.js b/ebts-ui/src/views/system/top/packages/topology/src/node/dice-er-box.js deleted file mode 100644 index 80f2fee..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/dice-er-box.js +++ /dev/null @@ -1,280 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/15 0:16 - * @email: clay@hchyun.com - * @description: node - */ -import utils from '../utils/index' - -const itemHeight = 30; -export default { - name: 'dice-er-box', - options: { - setState(name, value, item,group) { - // 设置节点状态 - // utils.node.setState(name, value, item,group); - // 设置锚点状态 - utils.anchor.setState(name, value, item); - // //设置收缩状态 - // utils.collapse.setState(item) - }, - draw(cfg, group) { - const width = 250; - const height = 316; - const itemCount = 10; - const boxStyle = { - stroke: "#096DD9", - radius: 4, - }; - - const { - attrs = [], - startIndex = 0, - selectedIndex, - collapsed, - icon, - } = cfg; - const list = attrs; - const afterList = list.slice( - Math.floor(startIndex), - Math.floor(startIndex + itemCount - 1) - ); - const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; - - group.addShape("rect", { - attrs: { - fill: boxStyle.stroke, - height: 30, - width, - radius: [boxStyle.radius, boxStyle.radius, 0, 0], - }, - draggable: true, - }); - - let fontLeft = 12; - - if (icon && icon.show !== false) { - group.addShape("image", { - attrs: { - x: 8, - y: 8, - height: 16, - width: 16, - ...icon, - }, - }); - fontLeft += 18; - } - - group.addShape("text", { - attrs: { - y: 22, - x: fontLeft, - fill: "#fff", - text: cfg.label, - fontSize: 12, - fontWeight: 500, - }, - }); - - group.addShape("rect", { - attrs: { - x: 0, - y: collapsed ? 30 : 300, - height: 15, - width, - fill: "#eee", - radius: [0, 0, boxStyle.radius, boxStyle.radius], - cursor: "pointer", - }, - name: collapsed ? "expand" : "collapse", - }); - - group.addShape("text", { - attrs: { - x: width / 2 - 6, - y: (collapsed ? 30 : 300) + 12, - text: collapsed ? "+" : "-", - width, - fill: "#000", - radius: [0, 0, boxStyle.radius, boxStyle.radius], - cursor: "pointer", - }, - name: collapsed ? "expand" : "collapse", - }); - - const keyshape = group.addShape("rect", { - attrs: { - x: 0, - y: 0, - width, - height: collapsed ? 45 : height, - ...boxStyle, - }, - draggable: true, - }); - - if (collapsed) { - return keyshape; - } - - const listContainer = group.addGroup({}); - listContainer.setClip({ - type: "rect", - attrs: { - x: -8, - y: 30, - width: width + 16, - height: 300 - 30, - }, - }); - listContainer.addShape({ - type: "rect", - attrs: { - x: 1, - y: 30, - width: width - 2, - height: 300 - 30, - fill: "#fff", - }, - draggable: true, - }); - - if (list.length > itemCount) { - const barStyle = { - width: 4, - padding: 0, - boxStyle: { - stroke: "#00000022", - }, - innerStyle: { - fill: "#00000022", - }, - }; - - listContainer.addShape("rect", { - attrs: { - y: 30, - x: width - barStyle.padding - barStyle.width, - width: barStyle.width, - height: height - 30, - ...barStyle.boxStyle, - }, - }); - - const indexHeight = - afterList.length > itemCount ? - (afterList.length / list.length) * height : - 10; - - listContainer.addShape("rect", { - attrs: { - y: 30 + - barStyle.padding + - (startIndex / list.length) * (height - 30), - x: width - barStyle.padding - barStyle.width, - width: barStyle.width, - height: Math.min(height, indexHeight), - ...barStyle.innerStyle, - }, - }); - } - if (afterList) { - afterList.forEach((e, i) => { - const isSelected = - Math.floor(startIndex) + i === Number(selectedIndex); - let { - key = "", type - } = e; - if (type) { - key += " - " + type; - } - const label = key.length > 26 ? key.slice(0, 24) + "..." : key; - - listContainer.addShape("rect", { - attrs: { - x: 1, - y: i * itemHeight - itemHeight / 2 + offsetY, - width: width - 4, - height: itemHeight, - radius: 2, - lineWidth: 1, - cursor: "pointer", - }, - name: `item-${Math.floor(startIndex) + i}-content`, - draggable: true, - }); - - if (!cfg.hideDot) { - // utils.anchor.erDrawLeft(group,label,0,i * itemHeight + offsetY) - // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) - listContainer.addShape("marker", { - attrs: { - x: 0, - y: i * itemHeight + offsetY, - r: 3, - stroke: boxStyle.stroke, - fill: "white", - radius: 2, - lineWidth: 1, - cursor: "pointer", - }, - name: 'marker-shape' - }); - listContainer.addShape("marker", { - attrs: { - x: width, - y: i * itemHeight + offsetY, - r: 3, - stroke: boxStyle.stroke, - fill: "white", - radius: 2, - lineWidth: 1, - cursor: "pointer", - }, - name: 'markerBg-shape' - }); - - - - - - - - - } - - listContainer.addShape("text", { - attrs: { - x: 12, - y: i * itemHeight + offsetY + 6, - text: label, - fontSize: 12, - fill: "#000", - fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", - full: e, - fontWeight: isSelected ? 500 : 100, - cursor: "pointer", - }, - name: `item-${Math.floor(startIndex) + i}`, - }); - }); - } - - - // console.log(keyshape); - return keyshape; - }, - getAnchorPoints() { - return [ - [0, 0], - [1, 0], - ]; - }, - } -} - - - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/index.js b/ebts-ui/src/views/system/top/packages/topology/src/node/index.js deleted file mode 100644 index da94bdb..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: register nodes - */ - -// import Rect from './top-rect' -// import Image from './top-image' - -import diceErBox from './dice-er-box' -const obj = { - // Rect, - // Image, - diceErBox -} - -export default { - obj, - register(G6) { - Object.values(obj).map(item => { - G6.registerNode(item.name, item.options, item.extendName) - }) - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/top-image.js b/ebts-ui/src/views/system/top/packages/topology/src/node/top-image.js deleted file mode 100644 index 18e0622..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/top-image.js +++ /dev/null @@ -1,126 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: 图片节点 - */ - -import utils from '../utils' - -// 用来获取调用此js的vue组件实例（this） -let vm = null - -const sendThis = (_this) => { - vm = _this -} - -export default { - sendThis, - name: 'top-image', - extendName: 'image', - options: { - setState(name, value, item) { - // 设置节点状态 - utils.node.setState(name, value, item) - // 设置锚点状态 - if (vm.graphMode === 'edit') { - utils.anchor.setState(name, value, item) - } - }, - // 绘制后附加锚点 - afterDraw(cfg, group) { - // 绘制锚点 - if (vm.graphMode === 'edit') { - utils.anchor.draw(cfg, group) - } - }, - // 设置告警状态 - afterUpdate(cfg, node) { - const group = node.getContainer() - // 获取children - const halos = group.findAll(function(item) { - return item.attrs.name === 'halo' - }) - // 告警 - if (cfg.appState && cfg.appState.alert) { - if (halos.length > 0) { - return - } - let size = this.getSize(cfg) || [48, 48] - let r = size[0] / 2 - let { id } = cfg - let halo1 = group.addShape('circle', { - id: id + '_halo_' + 1, - attrs: { - name: 'halo', - x: 0, - y: 0, - r: r, - fill: cfg.color || '#F56C6C', - opacity: 0.6 - }, - name: 'halo', - zIndex: -3 - }) - let halo2 = group.addShape('circle', { - id: id + '_halo_' + 2, - attrs: { - name: 'halo', - x: 0, - y: 0, - r: r, - fill: cfg.color || '#F56C6C', // 为了显示清晰，随意设置了颜色 - opacity: 0.6 - }, - name: 'halo', - zIndex: -2 - }) - let halo3 = group.addShape('circle', { - id: id + '_halo_' + 3, - attrs: { - name: 'halo', - x: 0, - y: 0, - r: r, - fill: cfg.color || '#F56C6C', - opacity: 0.6 - }, - name: 'halo', - zIndex: -1 - }) - group.sort() // 排序，根据zIndex 排序 - halo1.animate({ // 逐渐放大，并消失 - r: r + 10, - opacity: 0.1, - }, { - repeat: true, // 循环 - duration: 3000, - easing: 'easeCubic', - delay: 0 // 无延迟 - }) - halo2.animate({ // 逐渐放大，并消失 - r: r + 10, - opacity: 0.1 - }, { - repeat: true, // 循环 - duration: 3000, - easing: 'easeCubic', - delay: 1000 // 1 秒延迟 - }) - halo3.animate({ // 逐渐放大，并消失 - r: r + 10, - opacity: 0.1 - }, { - repeat: true, // 循环 - duration: 3000, - easing: 'easeCubic', - delay: 2000 // 2 秒延迟 - }) - } else { - halos.forEach(halo => { - // FIXME: G6 3.x在底层库遗留了bug，导致removeChild()方法报错，等待解决 - group.removeChild(halo) - }) - } - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/top-rect.js b/ebts-ui/src/views/system/top/packages/topology/src/node/top-rect.js deleted file mode 100644 index 4f7128d..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/top-rect.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: 矩形节点 - */ - -import base from './base' -import theme from '../theme' - -export default { - name: 'top-rect', - extendName: 'rect', - options: { - ...base, - getShapeStyle(cfg) { - const size = this.getSize(cfg) || [48, 48] - const width = size[0] - const height = size[1] - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - const style = { - x: 0 - width / 2, - y: 0 - height / 2, - width: width, - height: height, - ...themeStyle.nodeStyle.default - } - return style - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/node/top-test.js b/ebts-ui/src/views/system/top/packages/topology/src/node/top-test.js deleted file mode 100644 index b28b04f..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/node/top-test.js +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js b/ebts-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js deleted file mode 100644 index 5991259..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: install 3rd plugins - */ - -import * as d3 from 'd3-force/dist/d3-force' - -export default d3 diff --git a/ebts-ui/src/views/system/top/packages/topology/src/theme/dark-style.js b/ebts-ui/src/views/system/top/packages/topology/src/theme/dark-style.js deleted file mode 100644 index b7c1832..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/theme/dark-style.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/20 - * @description: dark style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: 'transparent', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - // 节点标签样式 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#FFF' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#53da3a', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - radius: 3, - symbol: 'circle', - fill: '#FFFFFF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - radius: 10, - symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/theme/default-style.js b/ebts-ui/src/views/system/top/packages/topology/src/theme/default-style.js deleted file mode 100644 index 7462011..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/theme/default-style.js +++ /dev/null @@ -1,178 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: default style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: 'transparent', - // shadowOffsetX: 0, - // shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 2, - // shadowOffsetX: 0, - // shadowOffsetY: 0, - // fontSize:'50' - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - // 节点标签样式 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#000' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#A3B1BF', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - r: 10, - // symbol: 'circle', - fill: '#FFFFFF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - // cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - r: 10, - // symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - // cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/theme/index.js b/ebts-ui/src/views/system/top/packages/topology/src/theme/index.js deleted file mode 100644 index 02e514a..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/theme/index.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: 编辑器主题样式 - 节点、连线的预设样式 - */ - -import defaultStyle from './default-style' -import darkStyle from './dark-style' -import officeStyle from './office-style' - -export default { - defaultStyle, - darkStyle, - officeStyle -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/theme/office-style.js b/ebts-ui/src/views/system/top/packages/topology/src/theme/office-style.js deleted file mode 100644 index ebd4d55..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/theme/office-style.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/21 - * @description: office style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: '#FFFFFF', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - // 节点标签样式 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#000' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#41c23a', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - radius: 3, - symbol: 'circle', - fill: '#FFFFFF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - radius: 10, - symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue b/ebts-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue deleted file mode 100644 index 10eacef..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue +++ /dev/null @@ -1,162 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue b/ebts-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue deleted file mode 100644 index c0c7a0d..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue +++ /dev/null @@ -1,171 +0,0 @@ - - - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/topology.vue b/ebts-ui/src/views/system/top/packages/topology/src/topology.vue deleted file mode 100644 index aad4eb8..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/topology.vue +++ /dev/null @@ -1,1373 +0,0 @@ - - - - - - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw-left.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw-left.js deleted file mode 100644 index b56b459..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw-left.js +++ /dev/null @@ -1,44 +0,0 @@ -import theme from '../../theme' - - - - -export default function(group,label,x,y,i) { - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - let anchorBgShape = group.addShape('marker', { - id: label+ '_anchor_bg_lift_' + i, - attrs: { - name: 'anchorBg', - x: x, - y: y, - ...themeStyle.anchorBgStyle.default - }, - draggable: false, - name: 'markerBg-shape' - }) - - let anchorShape = group.addShape('marker', { - id: label+ '_anchor_bg_lift_' + i, - attrs: { - name: 'anchor', - x: x, - y: y, - ...themeStyle.anchorStyle.default - }, - draggable: false, - name: 'marker-shape' - }) - - anchorShape.on('mouseenter', function() { - anchorBgShape.attr({ - ...themeStyle.anchorBgStyle.active - }) - }) - anchorShape.on('mouseleave', function() { - anchorBgShape.attr({ - ...themeStyle.anchorBgStyle.inactive - }) - }) - - -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js deleted file mode 100644 index ed1f7f1..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: anchor - */ - -// import draw from './draw' -import erDrawLeft from './er-draw-left' -import setState from './set-state' -// import update from './update' - -export default { - // draw, - setState, - // update, - erDrawLeft, -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js deleted file mode 100644 index 0713055..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set anchor state - */ - -import theme from '../../theme' - -export default function(name, value, item) { - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // console.log(item) - if (name === 'hover') { - let group = item.getContainer() - let children = group.get('children') - for (let i = 0, len = children.length; i < len; i++) { - let child = children[i] - // 处理锚点状态 - if (child.attrs.name === 'anchor') { - if (value) { - child.attr(themeStyle.anchorStyle.hover) - } else { - child.attr(themeStyle.anchorStyle.unhover) - } - } - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js deleted file mode 100644 index 1509f05..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: update anchor - */ - -export default function(cfg, group) { - let { anchorPoints, width, height, id } = cfg - if (anchorPoints && anchorPoints.length) { - for (let i = 0, len = anchorPoints.length; i < len; i++) { - let [x, y] = anchorPoints[i] - // 计算Marker中心点坐标 - let originX = -width / 2 - let originY = -height / 2 - let anchorX = x * width + originX - let anchorY = y * height + originY - // 锚点背景 - let anchorBgShape = group.findById(id + '_anchor_bg_' + i) - // 锚点 - let anchorShape = group.findById(id + '_anchor_' + i) - anchorBgShape.attr({ - x: anchorX, - y: anchorY - }) - anchorShape.attr({ - x: anchorX, - y: anchorY - }) - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js deleted file mode 100644 index d43dc28..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/11 17:28 - * @email: clay@hchyun.com - * @description: node - */ -import setState from './set-state' - -export default { - setState -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js deleted file mode 100644 index 139e6d3..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/11 17:33 - * @email: clay@hchyun.com - * @description: node - */ -export default function(e){ - e.preventDefault(); - const { - graph - } = this; - const nodes = graph.getNodes().filter((n) => { - const bbox = n.getBBox(); - - return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); - }); - if (nodes) { - nodes.forEach((node) => { - const model = node.getModel(); - if (model.attrs.length < 9) { - return; - } - const idx = model.startIndex || 0; - let startX = model.startX || 0.5; - let startIndex = idx + e.deltaY * 0.02; - startX -= e.deltaX; - if (startIndex < 0) { - startIndex = 0; - } - if (startX > 0) { - startX = 0; - } - if (startIndex > model.attrs.length - 1) { - startIndex = model.attrs.length - 1; - } - graph.update(node, { - startIndex, - startX, - }); - }); - } -} -const isInBBox = (point, bbox) => { - const { - x, - y - } = point; - const { - minX, - minY, - maxX, - maxY - } = bbox; - - return x < maxX && x > minX && y > minY && y < maxY; -}; - diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js deleted file mode 100644 index c946239..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/11 17:28 - * @email: clay@hchyun.com - * @description: node - */ -export default function(e){ - const { - graph - } = this; - const { - y - } = e; - const item = e.item; - const shape = e.shape; - if (!item) { - return; - } - - if (shape.get("name") === "collapse") { - graph.updateItem(item, { - collapsed: true, - size: [300, 50], - }); - setTimeout(() => graph.layout(), 100); - } else if (shape.get("name") === "expand") { - graph.updateItem(item, { - collapsed: false, - size: [300, 500], - }); - setTimeout(() => graph.layout(), 100); - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/index.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/index.js deleted file mode 100644 index 8002373..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: edge - */ - -import setState from './set-state' - -export default { - setState -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js deleted file mode 100644 index 9090426..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set edge state - */ - -import theme from '../../theme' - -export default function(name, value, item) { - const group = item.getContainer() - const shape = group.get('children')[0] // 顺序根据 draw 时确定 - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - if (name === 'active') { - if (value) { - shape.attr(themeStyle.edgeStyle.active) - } else { - shape.attr(themeStyle.edgeStyle.inactive) - } - } else if (name === 'selected') { - if (value) { - shape.attr(themeStyle.edgeStyle.selected) - } else { - shape.attr(themeStyle.edgeStyle.unselected) - } - } -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/index.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/index.js deleted file mode 100644 index 2b33f54..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/index.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: graph utils - */ - -import node from './node' -import anchor from './anchor' -import edge from './edge' -import collapse from './collapse' - -/** - * 比较两个对象的内容是否相同（两个对象的键值都相同） - * @param obj1 - * @param obj2 - * @returns {*} - */ -const isObjectValueEqual = function(obj1, obj2) { - let o1 = obj1 instanceof Object - let o2 = obj2 instanceof Object - // 不是对象的情况 - if (!o1 || !o2) { - return obj1 === obj2 - } - // 对象的属性（key值）个数不相等 - if (Object.keys(obj1).length !== Object.keys(obj2).length) { - return false - } - // 判断每个属性（如果属性值也是对象则需要递归） - for (let attr in obj1) { - let t1 = obj1[attr] instanceof Object - let t2 = obj2[attr] instanceof Object - if (t1 && t2) { - return isObjectValueEqual(obj1[attr], obj2[attr]) - } else if (obj1[attr] !== obj2[attr]) { - return false - } - } - return true -} - - -/** - * 生成uuid算法,碰撞率低于1/2^^122 - * @returns {string} - */ -const generateUUID = function() { - let d = new Date().getTime() - // x 是 0-9 或 a-f 范围内的一个32位十六进制数 - let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { - let r = (d + Math.random() * 16) % 16 | 0 - d = Math.floor(d / 16) - return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16) - }) - return uuid -} - -export default { - node, - anchor, - edge, - collapse, - // 通用工具类函数 - isObjectValueEqual, - generateUUID -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/node/index.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/node/index.js deleted file mode 100644 index 61e5741..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/node/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: node - */ - -import setState from './set-state' - -export default { - setState -} diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js b/ebts-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js deleted file mode 100644 index 4b60368..0000000 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set node state - */ - -import theme from '../../theme' - -export default function(name, value, item) { - const group = item.getContainer() - const shape = group.get('children')[0] // 顺序根据 draw 时确定 - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - if (name === 'active') { - if (value) { - shape.attr(themeStyle.nodeStyle.active) - } else { - shape.attr(themeStyle.nodeStyle.inactive) - } - } else if (name === 'selected') { - if (value) { - group.attr(themeStyle.nodeStyle.selected) - } else { - group.attr(themeStyle.nodeStyle.default) - } - } - -} diff --git a/ebts-ui/src/views/system/top/utils/index.js b/ebts-ui/src/views/system/top/utils/index.js deleted file mode 100644 index 21ebc8c..0000000 --- a/ebts-ui/src/views/system/top/utils/index.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * Created by clay on 2019/10/14 - * Description: common utils - */ - -/** - * This is just a simple version of deep copy - * Has a lot of edge cases bug - * If you want to use a perfect deep copy, use lodash's _.cloneDeep - * @param {Object} source - * @returns {Object} targetObj - */ -export function deepClone(source) { - if (!source && typeof source !== 'object') { - throw new Error('error arguments: deepClone') - } - let targetObj = source.constructor === Array ? [] : {} - Object.keys(source).forEach(key => { - if (source[key] && typeof source[key] === 'object') { - targetObj[key] = deepClone(source[key]) - } else { - targetObj[key] = source[key] - } - }) - return targetObj -} - -/** - * Randomly extract one or more elements from an array - * If you want to use a perfect solution, use lodash's _.sample or _.sampleSize - * @param {Array} arr - * @param {number} count - * @returns {Array} arr - */ -export function getRandomArrayElements(arr, count = 1) { - if (count > arr.length) { - throw new Error('error arguments: count is greater than length of array') - } - let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index - while (i-- > min) { - index = Math.floor((i + 1) * Math.random()) - temp = shuffled[index] - shuffled[index] = shuffled[i] - shuffled[i] = temp - } - return shuffled.slice(min) -} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js index cab35e9..5e46648 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js @@ -84,12 +84,11 @@ export default { // 处理线条目标点 if (anchorPoints && anchorPoints.length) { // 获取距离指定坐标最近的一个锚点 - // sourceAnchor = self.evtInfo.node.getLinkPoint({ - // x: event.x, - // y: event.y - // }) + sourceAnchor = self.evtInfo.node.getLinkPoint({ + x: event.x, + y: event.y + }) } - console.log(anchorPoints, sourceAnchor); self.drawEdge.currentLine = self.graph.addItem("edge", { // id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复 id: utils.generateUUID(), @@ -101,11 +100,12 @@ export default { x: event.x, y: event.y }, - type: self.graph.$C.edge.type || "top-line", - style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style) + type: self.graph.$C.edge.type || "top-cubic", + style: themeStyle.edgeStyle.default|| self.graph.$C.edge.style }); self.drawEdge.isMoving = true; }, + move(event) { let self = this; if (self.drawEdge.isMoving && self.drawEdge.currentLine) { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js index e61ce9e..1b83d59 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js @@ -5,6 +5,7 @@ */ // 用来获取调用此js的vue组件实例（this） let vm = null; +var hourItem = null; const sendThis = (_this) => { vm = _this; }; @@ -16,6 +17,7 @@ export default { return { "node:mouseover": "onNodeHover", "node:mouseout": "onNodeOut", + "node:mouseleave":"onNodeLeave", }; }, onNodeHover(event) { @@ -34,20 +36,30 @@ export default { selectedIndex: NaN }); } - // console.log(item); if (name && name.startsWith("marker")) { - hoverNode.setState(graph,"hover", true, graph); + hoverNode.setState("hover", true, graph); + hourItem=hoverNode; + }else { + if (hourItem!=null){ + hourItem.setState("hover", false) + } } }, onNodeOut(event) { - const name = event.shape.get("name"); - console.log("out", name) let hoverNode = event.item; if (name && name.startsWith("marker")) { - hoverNode.setState(graph,"hover", false); + hoverNode.setState("hover", false); + } + if (hourItem!=null){ + hourItem.setState("hover", false) + } + hoverNode.setState("hover", false); + }, + onNodeLeave(event) { + if (hourItem!=null){ + hourItem.setState("hover", false) } - // hoverNode.setState("hover", false); } } }; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js index 34f323b..9d9becd 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js @@ -13,7 +13,7 @@ import diceErNode from './dice-er-node' import diceErEdge from './dice-er-edge' const obj = { - // dragAddEdge, + dragAddEdge, hoverEventEdit, // clickEventEdit, dragEventEdit, diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js index a12862d..1a15a43 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js @@ -5,7 +5,7 @@ */ export default { - type: 'cc-line', + type: 'top-cubic', style: { startArrow: false, endArrow: false diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/base.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js similarity index 90% rename from ebts-ui/src/views/system/top/packages/topology/src/edge/base.js rename to ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js index c13add9..4a10aea 100644 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/base.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js @@ -1,6 +1,7 @@ /** - * @author: clay + * @author: winyuan * @data: 2019/07/18 + * @repository: https://github.com/winyuan * @description: 线公共方法 */ diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js deleted file mode 100644 index 2605a65..0000000 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js +++ /dev/null @@ -1,140 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/14 23:46 - * @email: clay@hchyun.com - * @description: node - */ -import {Util} from '@antv/g6' -import utils from "@/views/system/top/packages/topology/src/utils"; - -export default { - name: 'dice-er-edge', - options: { - - - draw(cfg, group) { - //todo 画线 - // console.log("cfg",cfg,"group",group) - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - - const sourceIndex = sourceNode.attrs.findIndex( - (e) => e.key === cfg.sourceKey - ); - - const sourceStartIndex = sourceNode.startIndex || 0; - - let sourceY = 15; - - if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { - sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30; - sourceY = Math.min(sourceY, 300); - } - - const targetIndex = targetNode.attrs.findIndex( - (e) => e.key === cfg.targetKey - ); - - const targetStartIndex = targetNode.startIndex || 0; - - let targetY = 15; - - if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { - targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30; - targetY = Math.min(targetY, 300); - } - - const startPoint = { - ...cfg.startPoint - }; - const endPoint = { - ...cfg.endPoint - }; - - startPoint.y = startPoint.y + sourceY; - endPoint.y = endPoint.y + targetY; - - let shape; - if (sourceNode.id !== targetNode.id) { - shape = group.addShape("path", { - attrs: { - stroke: "#5B8FF9", - lineAppendWidth:15, - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - endPoint.x / 3 + (2 / 3) * startPoint.x, - startPoint.y, - endPoint.x / 3 + (2 / 3) * startPoint.x, - endPoint.y, - endPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } else if (!sourceNode.collapsed) { - let gap = Math.abs((startPoint.y - endPoint.y) / 3); - if (startPoint["index"] === 1) { - gap = -gap; - } - shape = group.addShape("path", { - attrs: { - stroke: "#5B8FF9", - lineAppendWidth:15, - path: [ - ["M", startPoint.x, startPoint.y], - [ - "C", - startPoint.x - gap, - startPoint.y, - startPoint.x - gap, - endPoint.y, - startPoint.x, - endPoint.y, - ], - ], - endArrow: true, - }, - name: "path-shape", - }); - } - - return shape; - }, - afterDraw(cfg, group) { - // eslint-disable-next-line no-unused-vars - const labelCfg = cfg.labelCfg || {}; - const edge = group.cfg.item; - const sourceNode = edge.getSource().getModel(); - const targetNode = edge.getTarget().getModel(); - if (sourceNode.collapsed && targetNode.collapsed) { - return; - } - const path = group.find( - (element) => element.get("name") === "path-shape" - ); - - const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true); - const label = group.addShape("text", { - attrs: { - ...labelStyle, - text: cfg.label || '', - fill: "#000", - textAlign: "center", - stroke: "#fff", - lineWidth: 1, - }, - }); - label.rotateAtStart(labelStyle.rotate); - }, - setState(name, value, item) { - // 设置边状态 - utils.edge.setState(name, value, item) - } - } -} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js index fe26e88..bcbbbe4 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js @@ -5,10 +5,10 @@ */ -import diceErEdge from './dice-er-edge' +import topCubic from './top-cubic' const obj = { - diceErEdge + topCubic } export default function(G6) { diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/polyline-finding.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/polyline-finding.js similarity index 100% rename from ebts-ui/src/views/system/top/packages/topology/src/edge/polyline-finding.js rename to ebts-ui/src/views/tool/top/packages/topology/src/edge/polyline-finding.js diff --git a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js similarity index 54% rename from ebts-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js rename to ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js index aa83380..6c66842 100644 --- a/ebts-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js @@ -1,11 +1,13 @@ /** - * @author: clay + * @author: winyuan * @data: 2019/07/18 + * @repository: https://github.com/winyuan * @description: 曲线 */ +import utils from "../utils"; import base from './base' - +import { polylineFinding } from './polyline-finding' export default { name: 'top-cubic', extendName: 'cubic', diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js index 5b6581e..928ff74 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js @@ -39,7 +39,7 @@ const initGraph = { } }, defaultEdge: { - type: 'dice-er-edge', + type: 'top-cubic', labelCfg: { position: 'center', autoRotate: false diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js index b5da5f0..cf4467f 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js @@ -15,6 +15,14 @@ export default { sendThis, name: 'dice-er-box', options: { + setState(name, value, item) { + // 设置节点状态 + utils.node.setState(name, value, item) + // 设置锚点状态 + // if (vm.graphMode === 'edit') { + utils.anchor.setState(name, value, item) + // } + }, draw(cfg, group) { const width = 250; const height = 316; @@ -203,8 +211,8 @@ export default { }); if (!cfg.hideDot) { - utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) - utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) + // utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) + // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) // listContainer.addShape("marker", { // attrs: { // x: 0, @@ -254,25 +262,20 @@ export default { }); }); } - - - // console.log(keyshape); return keyshape; }, - getAnchorPoints() { - return [ - [0, 0], - [1, 0], - ]; - }, - setState(graph,name, value, item) { - // 设置节点状态 - // utils.node.setState(name, value, item) - // 设置锚点状态 - // if (vm.graphMode === 'edit') { - utils.anchor.setState(graph,name, value, item) - // } + // getAnchorPoints() { + // return [ + // [0, 0], + // [1, 0], + // ]; + // }, + // 绘制后附加锚点 + afterDraw(cfg, group) { + // 绘制锚点 + utils.anchor.drawMark(cfg, group) }, + } } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue index c4b1732..fc135d4 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue +++ b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue @@ -188,6 +188,7 @@ export default { //todo 设置线段的选择 edgeShapeList: [ { guid: "top-line", label: "直线", class: "iconfont icon-flow-line" }, + { guid: "dice-er-edge", label: "连线", class: "iconfont icon-flow-line" }, { guid: "top-brokenline", label: "折线", class: "iconfont icon-flow-broken" }, { guid: "top-polyline", label: "多段线", class: "iconfont icon-flow-broken" }, { guid: "top-cubic", label: "曲线", class: "iconfont icon-flow-curve" } @@ -199,7 +200,7 @@ export default { graphMode: "edit", //todo 默认使用连线 currentEdgeShape: { - guid: "top-line", + guid: "top-cubic", label: "直线" }, currentFocus: "canvas", @@ -301,7 +302,7 @@ export default { mounted() { Node.obj.diceErBox.sendThis(this) // Behavior.obj.clickEventEdit.sendThis(this); - // Behavior.obj.dragAddEdge.sendThis(this); + Behavior.obj.dragAddEdge.sendThis(this); Behavior.obj.dragEventEdit.sendThis(this); Behavior.obj.keyupEventEdit.sendThis(this); Behavior.obj.hoverEventEdit.sendThis(this); @@ -910,16 +911,17 @@ export default { // 开始添加 let droppoint = graph.getPointByClient(clientX, clientY); + console.log(droppoint.x,droppoint.y) let node = graph.addItem("node", { id: utils.generateUUID(), - x: droppoint.x, - y: droppoint.y, + x: (droppoint.x)-(125), + y: (droppoint.y)-(158), labels: nodeType.label, // labelCfg: { // position: "bottom" // }, //todo 设置拖拽的属性 - type: "top-ertable", + type: "dice-er-box", attrs: [ { key: "id", @@ -984,8 +986,8 @@ export default { ], // img: nodeType.imgSrc, size: [55, 55], - width: 48, - height: 48, + width: 250, + height: 316, anchorPoints: [ [0.5, 0], // top [1, 0.5], // right diff --git a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js similarity index 88% rename from ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js rename to ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js index 3913093..6e185cb 100644 --- a/ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js @@ -1,22 +1,21 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: draw anchor - */ + + + import theme from '../../theme' - export default function(cfg, group) { const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 + // console.log("cfg",cfg) let { anchorPoints, width, height, id } = cfg + // console.log("基础信息",anchorPoints,"宽",width,"高",height,"节点id",id) if (anchorPoints && anchorPoints.length) { for (let i = 0, len = anchorPoints.length; i < len; i++) { let [x, y] = anchorPoints[i] // 计算Marker中心点坐标 let originX = -width / 2 let originY = -height / 2 - let anchorX = x * width + originX - let anchorY = y * height + originY + let anchorX = x * width + originX+125 + let anchorY = y * height + originY+158 // 添加锚点背景 let anchorBgShape = group.addShape('marker', { id: id + '_anchor_bg_' + i, diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js index 1553898..875f653 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js @@ -7,9 +7,11 @@ // import draw from './draw' import erDrawLeft from './er-draw-left' import setState from './set-state' +import drawMark from './draw_mark' // import update from './update' export default { setState, erDrawLeft, + drawMark, } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js index f7c9e4e..fa3fd65 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js @@ -5,18 +5,19 @@ */ import theme from '../../theme' -export default function(graph,name, value, item) { +export default function(name, value, item) { const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 if (name === 'hover') { + // console.log(item) let group = item.getContainer() let children = group.get('children') for (let i = 0, len = children.length; i < len; i++) { let child = children[i] // 处理锚点状态 - if (child.attrs.name === 'anchorg') { + // console.log(child.attrs.name) + if (child.attrs.name === 'anchorBg') { if (value) { - console.log(graph) child.attr(themeStyle.anchorStyle.hover) } else { child.attr(themeStyle.anchorStyle.unhover) diff --git a/ebts-ui/src/views/tool/top/topology.vue b/ebts-ui/src/views/tool/top/topology.vue index fd86ae6..e73aefa 100644 --- a/ebts-ui/src/views/tool/top/topology.vue +++ b/ebts-ui/src/views/tool/top/topology.vue @@ -27,113 +27,113 @@ export default { return { graphData: { nodes: [ - { - "id": "info", - "label": "Employee", - "attrs": [{ - "key": "id", - "type": "number(6)" - }, - { - "key": "key", - "type": "varchar(255)" - }, - { - "key": "gender", - "type": "enum(M, F)" - }, - { - "key": "birthday", - "type": "date" - }, - { - "key": "hometown", - "type": "varchar(255)" - }, - { - "key": "country", - "type": "varchar(255)" - }, - { - "key": "nation", - "type": "varchar(255)" - }, - { - "key": "jobId", - "type": "number(3)", - "relation": [{ - "key": "id", - "nodeId": "job" - }] - }, - { - "key": "phone", - "type": "varchar(255)" - }, - { - "key": "deptId", - "type": "number(6)", - "relation": [{ - "key": "id", - "nodeId": "dept" - }] - }, - { - "key": "startTime", - "type": "date" - }, - { - "key": "leaveTime", - "type": "date" - } - ] - }, - { - "id": "job", - "label": "Job", - "attrs": [{ - "key": "id", - "type": "number(3)" - }, - { - "key": "title", - "type": "varchar(255)" - }, - { - "key": "level", - "type": "number(3)" - } - ] - }, - { - "id": "dept", - "label": "Department", - "attrs": [{ - "key": "id", - "type": "number(6)" - }, - { - "key": "title", - "type": "varchar(255)" - }, - { - "key": "desc", - "type": "text" - }, - { - "key": "parent", - "type": "number(6)", - "relation": [{ - "key": "id", - "nodeId": "dept" - }] - }, - { - "key": "manager", - "type": "number(6)" - } - ] - } + // { + // "id": "info", + // "label": "Employee", + // "attrs": [{ + // "key": "id", + // "type": "number(6)" + // }, + // { + // "key": "key", + // "type": "varchar(255)" + // }, + // { + // "key": "gender", + // "type": "enum(M, F)" + // }, + // { + // "key": "birthday", + // "type": "date" + // }, + // { + // "key": "hometown", + // "type": "varchar(255)" + // }, + // { + // "key": "country", + // "type": "varchar(255)" + // }, + // { + // "key": "nation", + // "type": "varchar(255)" + // }, + // { + // "key": "jobId", + // "type": "number(3)", + // "relation": [{ + // "key": "id", + // "nodeId": "job" + // }] + // }, + // { + // "key": "phone", + // "type": "varchar(255)" + // }, + // { + // "key": "deptId", + // "type": "number(6)", + // "relation": [{ + // "key": "id", + // "nodeId": "dept" + // }] + // }, + // { + // "key": "startTime", + // "type": "date" + // }, + // { + // "key": "leaveTime", + // "type": "date" + // } + // ] + // }, + // { + // "id": "job", + // "label": "Job", + // "attrs": [{ + // "key": "id", + // "type": "number(3)" + // }, + // { + // "key": "title", + // "type": "varchar(255)" + // }, + // { + // "key": "level", + // "type": "number(3)" + // } + // ] + // }, + // { + // "id": "dept", + // "label": "Department", + // "attrs": [{ + // "key": "id", + // "type": "number(6)" + // }, + // { + // "key": "title", + // "type": "varchar(255)" + // }, + // { + // "key": "desc", + // "type": "text" + // }, + // { + // "key": "parent", + // "type": "number(6)", + // "relation": [{ + // "key": "id", + // "nodeId": "dept" + // }] + // }, + // { + // "key": "manager", + // "type": "number(6)" + // } + // ] + // } ], edges: [ {