From bd5e9f4db36cfc48282642487fe8f168ce33f629 Mon Sep 17 00:00:00 2001 From: "20932067@zju.edu.cn" Date: Tue, 18 May 2021 15:41:48 +0800 Subject: [PATCH] =?UTF-8?q?iot=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topology/src/edge/dice-er-edge.js | 4 +- .../top/packages/topology/src/topology.vue | 7 +- .../topology/src/behavior/click-event-edit.js | 1 + .../topology/src/behavior/dice-er-edge.js | 37 ++ .../topology/src/behavior/dice-er-node.js | 10 +- .../packages/topology/src/behavior/index.js | 6 +- .../topology/src/edge/dice-er-edge.js | 222 ++++---- .../top/packages/topology/src/graph/index.js | 25 +- .../packages/topology/src/node/dice-er-box.js | 515 +++++++++--------- .../topology/src/theme/default-style.js | 10 +- .../top/packages/topology/src/topology.vue | 13 +- .../topology/src/utils/anchor/index.js | 2 - .../topology/src/utils/anchor/set-state.js | 3 +- 13 files changed, 451 insertions(+), 404 deletions(-) diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js index 6dcbdac..0d47f19 100644 --- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js +++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js @@ -55,7 +55,7 @@ export default { if (sourceNode.id !== targetNode.id) { shape = group.addShape("path", { attrs: { - stroke: "#5B8FF9", + stroke: "#53da3a", path: [ ["M", startPoint.x, startPoint.y], [ @@ -79,7 +79,7 @@ export default { } shape = group.addShape("path", { attrs: { - stroke: "#5B8FF9", + stroke: "#53da3a", path: [ ["M", startPoint.x, startPoint.y], [ diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue b/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue index 2472bda..aad4eb8 100644 --- a/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue +++ b/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue @@ -300,11 +300,12 @@ export default { }, mounted() { Node.obj.Image.sendThis(this); - Behavior.obj.clickEventEdit.sendThis(this); - Behavior.obj.dragAddEdge.sendThis(this); + // Behavior.obj.clickEventEdit.sendThis(this); + // Behavior.obj.dragAddEdge.sendThis(this); Behavior.obj.dragEventEdit.sendThis(this); Behavior.obj.keyupEventEdit.sendThis(this); - Behavior.obj.hoverEventEdit.sendThis(this); + // Behavior.obj.hoverEventEdit.sendThis(this); + Behavior.obj this.clearHistoryData(); // this.initTopo(this.graphData) // this.autoZoomHandler() diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js index 674f850..41cb95d 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js @@ -138,6 +138,7 @@ export default { }; } } else if (event.item._cfg.type === "edge") { + console.log("jshdjhd") // 更新vm的data: selectedEdge 和 selectedEdgeParams let clickEdge = event.item; if (clickEdge.hasState("selected")) { diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js index 5224317..a26c3c0 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js @@ -4,3 +4,40 @@ * @email: clay@hchyun.com * @description: node */ +let vm = null; +const sendThis = (_this) => { + vm = _this; +}; + +export default { + sendThis, + name: 'dice-er-edge', + options: { + getDefaultCfg() { + return { + multiple: true, + }; + }, + getEvents() { + return { + "edge:click": "onEdgeClick", + } + }, + onEdgeClick(event) { + let clickEdge = event.item; + console.log(789) + console.log(clickEdge); + clickEdge.setState("selected", !clickEdge.hasState("selected")); + console.log(clickEdge); + let model = clickEdge.getModel(); + console.log(model); + model.label = "4564654" + model.stroke='#e2e2e2' + clickEdge.update(model) + + // console.log(vm) + // vm.currentFocus = "edge"; + this.updateVmData(event); + }, + } +} diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js index 0f8881b..8132517 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js @@ -77,10 +77,6 @@ export default { const { graph } = this; - const { - // eslint-disable-next-line no-unused-vars - y - } = e; const item = e.item; const shape = e.shape; if (!item) { @@ -101,9 +97,9 @@ export default { }else { // eslint-disable-next-line no-unused-vars const model = item.getModel(); - console.log(JSON.stringify(model)); - console.log(model.style.default.fill = '#4eb922'); - console.log(model.style.selected.shadowColor = '#4eb922'); + // console.log(JSON.stringify(model)); + // console.log(model.style.default.fill = '#4eb922'); + // console.log(model.style.selected.shadowColor = '#4eb922'); } }, diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/index.js b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/index.js index 94a269b..c508e1e 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/index.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/behavior/index.js @@ -9,7 +9,8 @@ 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-node' +import diceErNode from './dice-er-node' +import diceErEdge from './dice-er-edge' const obj = { // dragAddEdge, @@ -17,7 +18,8 @@ const obj = { // clickEventEdit, dragEventEdit, keyupEventEdit, - diceErScroll + diceErNode, + diceErEdge } export default { diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js b/hchyun-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js index 6dcbdac..835d3d4 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js @@ -5,126 +5,134 @@ * @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(); + name: 'dice-er-edge', + options: { - const sourceIndex = sourceNode.attrs.findIndex( - (e) => e.key === cfg.sourceKey - ); - const sourceStartIndex = sourceNode.startIndex || 0; + 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(); - let sourceY = 15; + const sourceIndex = sourceNode.attrs.findIndex( + (e) => e.key === cfg.sourceKey + ); - if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { - sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30; - sourceY = Math.min(sourceY, 300); - } + const sourceStartIndex = sourceNode.startIndex || 0; - const targetIndex = targetNode.attrs.findIndex( - (e) => e.key === cfg.targetKey - ); + let sourceY = 15; - const targetStartIndex = targetNode.startIndex || 0; + if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { + sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30; + sourceY = Math.min(sourceY, 300); + } - let targetY = 15; + const targetIndex = targetNode.attrs.findIndex( + (e) => e.key === cfg.targetKey + ); - if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { - targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30; - targetY = Math.min(targetY, 300); - } + const targetStartIndex = targetNode.startIndex || 0; - const startPoint = { - ...cfg.startPoint - }; - const endPoint = { - ...cfg.endPoint - }; + let targetY = 15; - startPoint.y = startPoint.y + sourceY; - endPoint.y = endPoint.y + targetY; + if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { + targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30; + targetY = Math.min(targetY, 300); + } - 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", - }); - } + const startPoint = { + ...cfg.startPoint + }; + const endPoint = { + ...cfg.endPoint + }; - 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); + 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) { + // 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/hchyun-ui/src/views/tool/top/packages/topology/src/graph/index.js b/hchyun-ui/src/views/tool/top/packages/topology/src/graph/index.js index 896a784..5b6581e 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/graph/index.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/graph/index.js @@ -54,18 +54,19 @@ const initGraph = { // shadowOffsetY: 3 // } // }, - edgeStateStyles: themeStyle.edgeStyle, - // edgeStyle: { - // default: { - // stroke: '#e2e2e2', - // lineWidth: 3, - // lineAppendWidth: 10 - // }, - // selected: { - // shadowColor: '#626262', - // shadowBlur: 3 - // } - // }, + edgeStateStyles:{ + edgeStyle: { + default: { + stroke: '#e2e2e2', + lineWidth: 3, + lineAppendWidth: 10 + }, + selected: { + shadowColor: '#626262', + shadowBlur: 3 + } + }, + }, modes: options.modes }) // 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理 diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js b/hchyun-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js index 80f2fee..95cf178 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js @@ -6,272 +6,271 @@ */ import utils from '../utils/index' +let vm = null; +const sendThis = (_this) => { + vm = _this; +}; 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) + sendThis, + name: 'dice-er-box', + options: { + 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], }, - draw(cfg, group) { - const width = 250; - const height = 316; - const itemCount = 10; - const boxStyle = { - stroke: "#096DD9", - radius: 4, - }; + draggable: true, + }); - 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; + let fontLeft = 12; - group.addShape("rect", { - attrs: { - fill: boxStyle.stroke, - height: 30, - width, - radius: [boxStyle.radius, boxStyle.radius, 0, 0], - }, - draggable: true, - }); + if (icon && icon.show !== false) { + group.addShape("image", { + attrs: { + x: 8, + y: 8, + height: 16, + width: 16, + ...icon, + }, + }); + fontLeft += 18; + } - 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; + group.addShape("text", { + attrs: { + y: 22, + x: fontLeft, + fill: "#fff", + text: cfg.label, + fontSize: 12, + fontWeight: 500, }, - getAnchorPoints() { - return [ - [0, 0], - [1, 0], - ]; + }); + + 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], + ]; + }, + setState(name, value, item) { + // 设置节点状态 + // utils.node.setState(name, value, item) + // 设置锚点状态 + // if (vm.graphMode === 'edit') { + utils.anchor.setState(name, value, item) + // } + }, + } } diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/theme/default-style.js b/hchyun-ui/src/views/tool/top/packages/topology/src/theme/default-style.js index 7462011..e2d9c92 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/theme/default-style.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/theme/default-style.js @@ -71,13 +71,13 @@ export default { // 锚点样式 anchorStyle: { default: { - r: 10, - // symbol: 'circle', + r: 3, + symbol: 'circle', fill: '#FFFFFF', fillOpacity: 0, stroke: '#1890FF', strokeOpacity: 0, - // cursor: 'crosshair' + cursor: 'crosshair' }, hover: { fillOpacity: 1, @@ -100,12 +100,12 @@ export default { anchorBgStyle: { default: { r: 10, - // symbol: 'circle', + symbol: 'circle', fill: '#1890FF', fillOpacity: 0, stroke: '#1890FF', strokeOpacity: 0, - // cursor: 'crosshair' + cursor: 'crosshair' }, hover: { fillOpacity: 1, diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/topology.vue b/hchyun-ui/src/views/tool/top/packages/topology/src/topology.vue index 5db142b..0e8630b 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/topology.vue +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/topology.vue @@ -299,12 +299,14 @@ export default { created() { }, mounted() { - Node.obj.Image.sendThis(this); - Behavior.obj.clickEventEdit.sendThis(this); - Behavior.obj.dragAddEdge.sendThis(this); + Node.obj.diceErBox.sendThis(this) + // Behavior.obj.clickEventEdit.sendThis(this); + // Behavior.obj.dragAddEdge.sendThis(this); Behavior.obj.dragEventEdit.sendThis(this); Behavior.obj.keyupEventEdit.sendThis(this); - Behavior.obj.hoverEventEdit.sendThis(this); + // Behavior.obj.hoverEventEdit.sendThis(this); + Behavior.obj.diceErEdge.sendThis(this) + this.clearHistoryData(); // this.initTopo(this.graphData) // this.autoZoomHandler() @@ -465,7 +467,8 @@ export default { // "drag-event-edit", "keyup-event-edit", "drag-add-edge", - 'dice-er-node' + 'dice-er-node', + "dice-er-edge" ], addEdge: [ "drag-canvas", diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js b/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js index ed1f7f1..1553898 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js @@ -10,8 +10,6 @@ import setState from './set-state' // import update from './update' export default { - // draw, setState, - // update, erDrawLeft, } diff --git a/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js b/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js index 0713055..7891a89 100644 --- a/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js +++ b/hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js @@ -8,8 +8,9 @@ import theme from '../../theme' export default function(name, value, item) { const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // console.log(item) + console.log(name) if (name === 'hover') { + console.log(456) let group = item.getContainer() let children = group.get('children') for (let i = 0, len = children.length; i < len; i++) {