diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-add-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-add-edge.js deleted file mode 100644 index 76831ff..0000000 --- a/ebts-ui/src/views/tool/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/tool/top/packages/topology/src/behavior/click-event-edit.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js deleted file mode 100644 index 41cb95d..0000000 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js +++ /dev/null @@ -1,173 +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") { - console.log("jshdjhd") - // 更新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/tool/top/packages/topology/src/behavior/dice-er-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js deleted file mode 100644 index a26c3c0..0000000 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/18 14:21 - * @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/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js index f861dac..576a5ff 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js @@ -19,7 +19,14 @@ const isInBBox = (point, bbox) => { return x < maxX && x > minX && y > minY && y < maxY; }; +let vm = null; + +const sendThis = (_this) => { + vm = _this; +}; + export default { + sendThis, name: 'dice-er-node', options: { getDefaultCfg() { @@ -31,8 +38,11 @@ export default { return { itemHeight: 50, wheel: "scroll", - "node:click": "click", - // "node:mousemove": "moves", + "node:click": "onNodeClick", + "edge:click": "onEdgeClick", + "node:contextmenu": "onNodeRightClick", + "edge:contextmenu": "onEdgeRightClick", + "canvas:click": "onCanvasClick", }; }, scroll(e) { @@ -73,7 +83,113 @@ export default { }, - click(e) { + onNodeClick(event) { + this.shrinkage(event) + vm.currentFocus = "node"; + vm.rightMenuShow = false; + this.updateVmData(event); + }, + /** + * 点击连线 + * @param event + */ + onEdgeClick(event) { + let clickEdge = event.item; + clickEdge.setState("selected", !clickEdge.hasState("selected")); + vm.currentFocus = "edge"; + + 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(); + }, + /** + * + * @param 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) { + if (event.item._cfg.type === "node") { + let clickNode = event.item; + 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 || "", + sourceAttrs:clickEdgeModel.sourceAttrs, + targetAttrs:clickEdgeModel.targetAttrs, + appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } + }; + } + } + }, + shrinkage(e){ const { graph } = this; @@ -82,7 +198,7 @@ export default { if (!item) { return; } - if (shape.get("name") === "collapse") { + if (shape.get("name") === "collapse") { graph.updateItem(item, { collapsed: true, size: [300, 50], @@ -95,13 +211,12 @@ export default { }); setTimeout(() => graph.layout(), 100); }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'); - - } + // 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'); + } }, moves(e) { const name = e.shape.get("name"); 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 5e46648..c27c0af 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 @@ -79,6 +79,7 @@ export default { let sourceAnchor = self.evtInfo.node.getAnchorPoints(); let sourceNodeModel = self.evtInfo.node.getModel(); + console.log("sourceNodeModel",sourceNodeModel) // 锚点数据 let anchorPoints = self.evtInfo.node.getAnchorPoints(); // 处理线条目标点 @@ -94,6 +95,7 @@ export default { id: utils.generateUUID(), // 起始节点 source: sourceNodeModel.id, + sourceAttrs:sourceNodeModel.attrs, sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "", // 终止节点/位置 target: { @@ -139,7 +141,8 @@ export default { } self.graph.updateItem(self.drawEdge.currentLine, { target: targetNodeModel.id, - targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "" + targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "", + targetAttrs:targetNodeModel.attrs, }); // ************** 记录historyData的逻辑 start ************** 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 9d9becd..748e43b 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 @@ -6,20 +6,16 @@ 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 diceErNode from './dice-er-node' -import diceErEdge from './dice-er-edge' const obj = { dragAddEdge, hoverEventEdit, - // clickEventEdit, dragEventEdit, keyupEventEdit, diceErNode, - diceErEdge } export default { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/wheel-node.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/wheel-node.js deleted file mode 100644 index 8b9a443..0000000 --- a/ebts-ui/src/views/tool/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/tool/top/packages/topology/src/config/edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js index 1a15a43..e908144 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 @@ -8,6 +8,6 @@ export default { type: 'top-cubic', style: { startArrow: false, - endArrow: false + endArrow: true } } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js index 4a10aea..a694c89 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js @@ -1,7 +1,6 @@ /** - * @author: winyuan + * @author: Clay * @data: 2019/07/18 - * @repository: https://github.com/winyuan * @description: 线公共方法 */ @@ -21,6 +20,7 @@ export default { }, name: 'edge-shape' }) + console.log(keyShape.attrs.endArrow = true) return keyShape }, setState(name, value, item) { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/polyline-finding.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/polyline-finding.js deleted file mode 100644 index 39531fc..0000000 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/polyline-finding.js +++ /dev/null @@ -1,275 +0,0 @@ -/** - * 带圆角折线连线的策略 - * 文档：https://www.yuque.com/antv/blog/eyi70n - * 参考：https://github.com/guozhaolong/wfd/blob/master/src/item/edge.js - * 引用：https://github.com/OXOYO/X-Flowchart-Vue/blob/master/src/global/lib/g6/edge/polylineFinding.js - */ - -// 折线寻径 -export const polylineFinding = function(sNode, tNode, sPort, tPort, offset = 10) { - const sourceBBox = sNode && sNode.getBBox ? sNode.getBBox() : getPointBBox(sPort) - const targetBBox = tNode && tNode.getBBox ? tNode.getBBox() : getPointBBox(tPort) - // 获取节点带 offset 的区域（扩展区域） - const sBBox = getExpandedBBox(sourceBBox, offset) - const tBBox = getExpandedBBox(targetBBox, offset) - // 获取扩展区域上的起始和终止连接点 - const sPoint = getExpandedPort(sBBox, sPort) - const tPoint = getExpandedPort(tBBox, tPort) - // 获取合法折点集 - let points = getConnectablePoints(sBBox, tBBox, sPoint, tPoint) - // 过滤合法点集，预处理、剪枝等 - filterConnectablePoints(points, sBBox) - // 过滤合法点集，预处理、剪枝等 - filterConnectablePoints(points, tBBox) - // 用 A-Star 算法寻径 - let polylinePoints = AStar(points, sPoint, tPoint, sBBox, tBBox) - return polylinePoints -} - -const getPointBBox = function(t) { - return { - centerX: t.x, - centerY: t.y, - minX: t.x, - minY: t.y, - maxX: t.x, - maxY: t.y, - height: 0, - width: 0 - } -} - -// 获取扩展区域 -const getExpandedBBox = function(bbox, offset) { - if (bbox.width === 0 && bbox.height === 0) { - return bbox - } - return { - centerX: bbox.centerX, - centerY: bbox.centerY, - minX: bbox.minX - offset, - minY: bbox.minY - offset, - maxX: bbox.maxX + offset, - maxY: bbox.maxY + offset, - height: bbox.height + 2 * offset, - width: bbox.width + 2 * offset - } -} - -// 获取扩展区域上的连接点 -const getExpandedPort = function(bbox, point) { - // 判断连接点在上下左右哪个区域，相应地给x或y加上或者减去offset - if (Math.abs(point.x - bbox.centerX) / bbox.width > Math.abs(point.y - bbox.centerY) / bbox.height) { - return { - x: point.x > bbox.centerX ? bbox.maxX : bbox.minX, - y: point.y - } - } - return { - x: point.x, - y: point.y > bbox.centerY ? bbox.maxY : bbox.minY - } -} - -// 获取合法折点集合 -const getConnectablePoints = function(sBBox, tBBox, sPoint, tPoint) { - let lineBBox = getBBoxFromVertexes(sPoint, tPoint) - let outerBBox = combineBBoxes(sBBox, tBBox) - let sLineBBox = combineBBoxes(sBBox, lineBBox) - let tLineBBox = combineBBoxes(tBBox, lineBBox) - let points = [ - ...vertexOfBBox(sLineBBox), - ...vertexOfBBox(tLineBBox), - ...vertexOfBBox(outerBBox) - ] - const centerPoint = { x: outerBBox.centerX, y: outerBBox.centerY } - let bboxes = [outerBBox, sLineBBox, tLineBBox, lineBBox] - bboxes.forEach(bbox => { - // 包含 bbox 延长线和线段的相交线 - points = [ - ...points, - ...crossPointsByLineAndBBox(bbox, centerPoint) - ] - }) - points.push({ x: sPoint.x, y: tPoint.y }) - points.push({ x: tPoint.x, y: sPoint.y }) - return points -} - -const getBBoxFromVertexes = function(sPoint, tPoint) { - const minX = Math.min(sPoint.x, tPoint.x) - const maxX = Math.max(sPoint.x, tPoint.x) - const minY = Math.min(sPoint.y, tPoint.y) - const maxY = Math.max(sPoint.y, tPoint.y) - - return { - centerX: (minX + maxX) / 2, - centerY: (minY + maxY) / 2, - maxX: maxX, - maxY: maxY, - minX: minX, - minY: minY, - height: maxY - minY, - width: maxX - minX - } -} - -const combineBBoxes = function(sBBox, tBBox) { - const minX = Math.min(sBBox.minX, tBBox.minX) - const minY = Math.min(sBBox.minY, tBBox.minY) - const maxX = Math.max(sBBox.maxX, tBBox.maxX) - const maxY = Math.max(sBBox.maxY, tBBox.maxY) - - return { - centerX: (minX + maxX) / 2, - centerY: (minY + maxY) / 2, - minX: minX, - minY: minY, - maxX: maxX, - maxY: maxY, - height: maxY - minY, - width: maxX - minX - } -} - -const vertexOfBBox = function(bbox) { - return [ - { x: bbox.minX, y: bbox.minY }, - { x: bbox.maxX, y: bbox.minY }, - { x: bbox.maxX, y: bbox.maxY }, - { x: bbox.minX, y: bbox.maxY } - ] -} - -const crossPointsByLineAndBBox = function(bbox, centerPoint) { - let crossPoints = [] - if (!(centerPoint.x < bbox.minX || centerPoint.x > bbox.maxX)) { - crossPoints = [ - ...crossPoints, - { x: centerPoint.x, y: bbox.minY }, - { x: centerPoint.x, y: bbox.maxY } - ] - } - if (!(centerPoint.y < bbox.minY || centerPoint.y > bbox.maxY)) { - crossPoints = [ - ...crossPoints, - { x: bbox.minX, y: centerPoint.y }, - { x: bbox.maxX, y: centerPoint.y } - ] - } - - return crossPoints -} - -// 过滤连接点 -const filterConnectablePoints = function(points, bbox) { - return points.filter(point => { - return point.x <= bbox.minX || point.x >= bbox.maxX || point.y <= bbox.minY || point.y >= bbox.maxY - }) -} - -const crossBBox = function(bboxes, p1, p2) { - for (let i = 0; i < bboxes.length; i++) { - const bbox = bboxes[i] - if (p1.x === p2.x && bbox.minX < p1.x && bbox.maxX > p1.x) { - if ((p1.y < bbox.maxY && p2.y >= bbox.maxY) || (p2.y < bbox.maxY && p1.y >= bbox.maxY)) { - return true - } - } else if (p1.y === p2.y && bbox.minY < p1.y && bbox.maxY > p1.y) { - if ((p1.x < bbox.maxX && p2.x >= bbox.maxX) || (p2.x < bbox.maxX && p1.x >= bbox.maxX)) { - return true - } - } - } - return false -} - -const getCost = function(p1, p2) { - return Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y) -} - -// aStar 寻径 -const AStar = function(points, sPoint, tPoint, sBBox, tBBox) { - const openList = [sPoint] - const closeList = [] - points.forEach(item => { - item.id = item.x + '-' + item.y - }) - let tmpArr = [] - points.forEach(item => { - if (!tmpArr.includes(target => target.id === item.id)) { - tmpArr.push(item) - } - }) - points = [ - ...tmpArr, - tPoint - ] - let endPoint - while (openList.length > 0) { - let minCostPoint - openList.forEach((p, i) => { - if (!p.parent) { - p.f = 0 - } - if (!minCostPoint) { - minCostPoint = p - } - if (p.f < minCostPoint.f) { - minCostPoint = p - } - }) - if (minCostPoint.x === tPoint.x && minCostPoint.y === tPoint.y) { - endPoint = minCostPoint - break - } - openList.splice(openList.findIndex(o => o.x === minCostPoint.x && o.y === minCostPoint.y), 1) - closeList.push(minCostPoint) - const neighbor = points.filter(p => { - return (p.x === minCostPoint.x || p.y === minCostPoint.y) && - !(p.x === minCostPoint.x && p.y === minCostPoint.y) && - !crossBBox([sBBox, tBBox], minCostPoint, p) - } - ) - neighbor.forEach(p => { - const inOpen = openList.find(o => o.x === p.x && o.y === p.y) - const currentG = getCost(p, minCostPoint) - if (!closeList.find(o => o.x === p.x && o.y === p.y)) { - if (inOpen) { - if (p.g > currentG) { - p.parent = minCostPoint - p.g = currentG - p.f = p.g + p.h - } - } else { - p.parent = minCostPoint - p.g = currentG - let h = getCost(p, tPoint) - if (crossBBox([tBBox], p, tPoint)) { - // 如果穿过bbox则增加该点的预估代价为bbox周长的一半 - h += (tBBox.width / 2 + tBBox.height / 2) - } - p.h = h - p.f = p.g + p.h - openList.push(p) - } - } - }) - } - if (endPoint) { - const result = [] - result.push({ - x: endPoint.x, - y: endPoint.y - }) - while (endPoint.parent) { - endPoint = endPoint.parent - result.push({ - x: endPoint.x, - y: endPoint.y - }) - } - return result.reverse() - } - return [] -} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js index 6c66842..c53d53f 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js @@ -1,13 +1,10 @@ /** - * @author: winyuan + * @author: Clay * @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/theme/default-style.js b/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js index 3cb5cd0..7838462 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js @@ -74,15 +74,15 @@ export default { r: 3, symbol: 'circle', lineWidth: 1, - fill: 'white', + fill: '#FFFFFF', fillOpacity: 1, stroke: '#096DD9', strokeOpacity: 1, cursor: 'crosshair' }, hover: { - fillOpacity: 1, - strokeOpacity: 1 + fillOpacity: 0.3, + strokeOpacity: 0.5 }, unhover: { fillOpacity: 0, 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 fc135d4..faa87eb 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 @@ -14,7 +14,8 @@
+ :key="nodeType.guid" + > + ref="graphContainer" + >
节点
节点标签 - - + +
{{ value }} - - + + +
连线
- 连线标签 - -
- {{ value }} - + + +
+ 查询方式 +
+ + + + + +
+
+ 主表字段 +
+ + + +
+
+
+ 关联字段 +
+ + + +
+
+ + + + + + +
@@ -101,30 +141,30 @@