@@ -34,7 +34,7 @@ export default {
background-color: transparent;
}
-.loading {
+.cc-loading {
position: absolute;
width: 50px;
top: 45%;
diff --git a/hchyun-ui/src/views/system/top/packages/top.js b/hchyun-ui/src/views/system/top/packages/index.js
similarity index 92%
rename from hchyun-ui/src/views/system/top/packages/top.js
rename to hchyun-ui/src/views/system/top/packages/index.js
index a4baaf4..9c694ae 100644
--- a/hchyun-ui/src/views/system/top/packages/top.js
+++ b/hchyun-ui/src/views/system/top/packages/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/20
* @description: 整合所有的组件，对外导出，即一个完整的组件库
*/
@@ -16,7 +16,7 @@ const install = function(Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
- console.info('install----CCEditor: All----')
+ console.info('install----ClayTop: All----')
components.map(component => Vue.component(component.name, component))
}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/index.js b/hchyun-ui/src/views/system/top/packages/topology/index.js
index caeacf1..797809f 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/20
* @description: 导入组件，组件必须声明 name
*/
@@ -8,7 +8,7 @@ import Topology from './src/topology'
// 为组件提供 install 安装方法，供按需引入
Topology.install = function(Vue) {
- console.info('install----CCEditor: Topology----')
+ console.info('install----ClayTop: Topology----')
Vue.component(Topology.name, Topology)
}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
index d4c2c36..76831ff 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
@@ -1,11 +1,9 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用）
*/
-import G6 from '@antv/g6'
-import theme from '../theme'
export default {
name: 'click-add-edge',
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
index 8ed3f44..674f850 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
@@ -1,124 +1,172 @@
/**
- * @author: clay
- * @data: 2021/5/10
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
* @description: edit mode: 鼠标点击交互
*/
// 用来获取调用此js的vue组件实例（this）
-let vm = null
+let vm = null;
const sendThis = (_this) => {
- vm = _this
-}
+ vm = _this;
+};
export default {
sendThis, // 暴露函数
- name: 'click-event-edit',
+ name: "click-event-edit",
options: {
getEvents() {
return {
- 'node:click': 'onNodeClick',
- 'node:contextmenu': 'onNodeRightClick',
- 'edge:click': 'onEdgeClick',
- 'edge:contextmenu': 'onEdgeRightClick',
- 'canvas:click': 'onCanvasClick'
- }
+ "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)
+
+
+ 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
+ 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'
+ vm.rightMenuShow = true;
+ let rightMenu = vm.$refs.rightMenu;
+ rightMenu.style.left = event.clientX + "px";
+ rightMenu.style.top = event.clientY + "px";
} else {
// 隐藏右键菜单
- vm.rightMenuShow = false
+ vm.rightMenuShow = false;
// 先取消所有节点的选中状态
selectedNodes.forEach(node => {
- node.setState('selected', false)
- })
+ node.setState("selected", false);
+ });
// 再添加该节点的选中状态
- clickNode.setState('selected', true)
- vm.currentFocus = 'node'
- this.updateVmData(event)
+ clickNode.setState("selected", true);
+ vm.currentFocus = "node";
+ this.updateVmData(event);
}
- graph.paint()
+ graph.paint();
},
onEdgeClick(event) {
- let clickEdge = event.item
- clickEdge.setState('selected', !clickEdge.hasState('selected'))
- vm.currentFocus = 'edge'
- this.updateVmData(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')
+ 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)
- })
+ graph.findAllByState("edge", "selected").forEach(edge => {
+ edge.setState("selected", false);
+ });
// 再添加该节点的选中状态
- clickEdge.setState('selected', true)
- vm.currentFocus = 'edge'
- this.updateVmData(event)
+ clickEdge.setState("selected", true);
+ vm.currentFocus = "edge";
+ this.updateVmData(event);
}
- let point = { x: event.x, y: event.y }
+ let point = { x: event.x, y: event.y };
},
onCanvasClick() {
- vm.currentFocus = 'canvas'
- vm.rightMenuShow = false
+ vm.currentFocus = "canvas";
+ vm.rightMenuShow = false;
},
updateVmData(event) {
- if (event.item._cfg.type === 'node') {
+ 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
- if (clickNode.hasState('selected')) {
- let clickNodeModel = clickNode.getModel()
- vm.selectedNode = clickNode
- let nodeAppConfig = { ...vm.nodeAppConfig }
+
+
+ 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] = ''
- })
+ nodeAppConfig[key] = "";
+ });
vm.selectedNodeParams = {
- label: clickNodeModel.label || '',
+ label: clickNodeModel.label || "",
appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
- }
+ };
}
- } else if (event.item._cfg.type === 'edge') {
+ } 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 }
+ 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] = ''
- })
+ edgeAppConfig[key] = "";
+ });
vm.selectedEdgeParams = {
- label: clickEdgeModel.label || '',
+ 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/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
index b6cb140..2bf97dd 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
* @description: edit mode: 通过拖拽节点上的锚点添加连线
*/
import utils from '../utils'
@@ -100,7 +100,7 @@ export default {
x: event.x,
y: event.y
},
- type: self.graph.$C.edge.type || 'cc-line',
+ type: self.graph.$C.edge.type || 'top-line',
style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style)
})
self.drawEdge.isMoving = true
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
index cd18baa..08ebc57 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
* @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
index bf2b7e1..8754a5e 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
@@ -1,25 +1,45 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
* @description: edit mode: 悬浮交互
*/
-
+// 用来获取调用此js的vue组件实例（this）
+let vm = null;
+const sendThis = (_this) => {
+ vm = _this;
+};
export default {
- name: 'hover-event-edit',
+ sendThis, // 暴露函数
+ name: "hover-event-edit",
options: {
getEvents() {
return {
- 'node:mouseover': 'onNodeHover',
- 'node:mouseout': 'onNodeOut'
- }
+ "node:mouseover": "onNodeHover",
+ "node:mouseout": "onNodeOut",
+ };
},
onNodeHover(event) {
- let hoverNode = event.item
- hoverNode.setState('hover', true)
+ 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)
+ let hoverNode = event.item;
+ hoverNode.setState("hover", false);
}
}
-}
+};
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
index 6d2f96a..0410bfd 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
* @description: register behaviors
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
index cbd8830..cdb6af3 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
* @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】)
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
index 2604961..a12862d 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/16
* @description: 线条的后期设置
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
index a6c12bb..abed973 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/16
* @description: 配置
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
index 691a2fa..c13add9 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
* @description: 线公共方法
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
index 76924a7..cf0147b 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
@@ -1,13 +1,13 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
* @description: register edges
*/
-import ccLine from './cc-line'
-import ccBrokenline from './cc-brokenline'
-import ccPolyline from './cc-polyline'
-import ccCubic from './cc-cubic'
+import ccLine from './top-line'
+import ccBrokenline from './top-brokenline'
+import ccPolyline from './top-polyline'
+import ccCubic from './top-cubic'
const obj = {
ccLine,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
similarity index 96%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
index 45a294c..8873493 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/10/22
* @description: 折线
*/
@@ -12,7 +12,7 @@ import theme from '../theme'
* 现实现方法参考 https://g6.antv.vision/zh/examples/shape/customEdge#customPolyline
*/
export default {
- name: 'cc-brokenline',
+ name: 'top-brokenline',
extendName: 'line',
options: {
...base,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
similarity index 77%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
index dc01adb..aa83380 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
@@ -1,13 +1,13 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
* @description: 曲线
*/
import base from './base'
export default {
- name: 'cc-cubic',
+ name: 'top-cubic',
extendName: 'cubic',
options: {
...base
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
similarity index 78%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
index 898b532..be5a5ff 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
@@ -1,13 +1,13 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
* @description: 直线
*/
import base from './base'
export default {
- name: 'cc-line',
+ name: 'top-line',
extendName: 'line',
options: {
...base
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
similarity index 98%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
index 7435908..0c9a1c6 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
* @description: 多段线
*/
@@ -8,7 +8,7 @@ import base from './base'
import { polylineFinding } from './polyline-finding'
export default {
- name: 'cc-polyline',
+ name: 'top-polyline',
extendName: 'single-edge',
options: {
...base,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js
new file mode 100644
index 0000000..07d9d01
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js
@@ -0,0 +1,128 @@
+/**
+ * @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/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
index 0e9c346..5099dd9 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: 图的布局方式/图的初始化
*/
@@ -33,7 +33,7 @@ const initGraph = {
// height: options.height
// },
defaultNode: {
- type: 'top-rect',
+ type: 'cc-rect',
labelCfg: {
position: 'bottom'
}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
index eb7feb1..3bdc7ad 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: 节点基础方法
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
deleted file mode 100644
index eb7feb1..0000000
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @author: clay
- * @data: 2021/5/10
- * @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/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
index 85fcbaf..9816418 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
@@ -1,15 +1,17 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: register nodes
*/
-import ccRect from './top-rect'
-import ccImage from './top-image'
+import Rect from './top-rect'
+import Image from './top-image'
+import ErTable from './top-ertable'
const obj = {
- ccRect,
- ccImage
+ Rect,
+ Image,
+ ErTable
}
export default {
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js
new file mode 100644
index 0000000..523b276
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js
@@ -0,0 +1,243 @@
+/**
+ * @author: clay
+ * @data: 2019/07/05
+ * @description: er数据库表基本图像
+ */
+
+import utils from '../utils'
+
+export default {
+ name: "top-ertable",
+ extendName: "ertable",
+ 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 itemHeight = 30;
+ 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.name,
+ 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 ? "expands" : "collapses"
+ });
+
+ 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) {
+ // todo 左侧锚点
+ utils.anchor.erDraw(group, label, 0, i * itemHeight + offsetY, i, itemHeight, offsetY);
+ //todo 右侧锚点
+ utils.anchor.erDraw(group, label, width, i * itemHeight + offsetY, i, itemHeight, offsetY);
+ }
+
+ listContainer.addShape("text", {
+ attrs: {
+ name:'label',
+ 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}`
+ });
+ });
+ }
+ return keyshape;
+ },
+
+ getAnchorPoints() {
+ return [
+ [0, 0],
+ [1, 0]
+ ];
+ }
+ }
+};
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
index 1ffb211..18e0622 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: 图片节点
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
index 4945056..4f7128d 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: 矩形节点
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js
new file mode 100644
index 0000000..b28b04f
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js
@@ -0,0 +1,3 @@
+
+
+
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js b/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
index 1018837..5991259 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
* @description: install 3rd plugins
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
index ab8409b..b7c1832 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/11/20
* @description: dark style
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
index 7459cb6..e2d9c92 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
* @description: default style
*/
@@ -10,8 +10,8 @@ export default {
default: {
stroke: '#CED4D9',
fill: 'transparent',
- shadowOffsetX: 0,
- shadowOffsetY: 4,
+ // shadowOffsetX: 0,
+ // shadowOffsetY: 4,
shadowBlur: 10,
shadowColor: 'rgba(13, 26, 38, 0.08)',
lineWidth: 1,
@@ -20,9 +20,10 @@ export default {
},
selected: {
shadowColor: '#ff240b',
- shadowBlur: 4,
- shadowOffsetX: 0,
- shadowOffsetY: 0
+ shadowBlur: 2,
+ // shadowOffsetX: 0,
+ // shadowOffsetY: 0,
+ // fontSize:'50'
// shadowColor: '#626262',
// shadowBlur: 8,
// shadowOffsetX: -1,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
index dd2290f..02e514a 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
* @description: 编辑器主题样式 - 节点、连线的预设样式
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
index 48f425c..ebd4d55 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
@@ -1,6 +1,6 @@
/**
* @author: clay
- * @data: 2021/5/10
+ * @data: 2019/11/21
* @description: office style
*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
index 70eeb55..10eacef 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
@@ -2,12 +2,12 @@