暂存，改bug先

src/views/sandbox_manage/common/edge.js

@@ -0,0 +1,321 @@
+import { configOpt } from './toolConfig';
+
+const { line} = configOpt;
+
+//定义图形
+// const configStyles = {
+// 	rect: {
+// 		width: '60px',
+// 		height: '40px',
+// 		border: `1px solid ${border.borderColor}`,
+// 		backgroundColor: border.fill,
+// 	},
+// 	roundRect: {
+// 		width: '60px',
+// 		height: '40px',
+// 		border: `1px solid ${border.borderColor}`,
+// 		backgroundColor: border.fill,
+// 		borderRadius:"8px"
+// 	},
+// 	ellipse:{
+// 		width: '60px',
+// 		height: '40px',
+// 		border: `1px solid ${border.borderColor}`,
+// 		backgroundColor: border.fill,
+// 		borderRadius:"100%"
+// 	},
+// 	rhomboid:{
+// 		width: '50px',
+// 		height: '50px',
+// 		border: `1px solid ${border.borderColor}`,
+// 		backgroundColor: border.fill,
+// 		transform: 'rotate(-45deg) scale(0.7)'
+// 	},
+// 	text: {
+// 		width: '60px',
+// 		height: '40px',
+// 		textAlign: 'center',
+// 		lineHeight: '40px',
+// 		background: '#fff',
+// 		color: text.color,
+// 		fontSize: '14px',
+// 		fontWeight: 'normal',
+// 	},
+// }
+
+// export const myEdges = [
+// 	{
+// 		key: 'noArrowStraight',
+//     ImgUrl:'~@/assets/icons/arrow.svg'
+// 	}
+// ]
+
+
+// /* ports 样式 */
+// export const portStyle = {
+// 	attrs: {
+// 		circle: {
+// 				// dataClass: 'choice-point',
+// 				r: 5,
+// 				magnet: true,
+// 				stroke: border.borderColor,
+// 				strokeWidth: 1,
+// 				fill: '#fff'
+// 		}
+// 	}
+// }
+// // 创建的节点配置 矩形、圆角矩形、椭圆形、菱形、文本
+// export const myNodeOption = (key) => {
+// 	switch (key) {
+// 		case 'rect': 
+// 			return {
+// 				width: 60,
+// 				height: 40,
+// 				data: {
+// 					key
+// 				},
+// 				attrs: {
+// 					rect: {
+// 						stroke: border.borderColor,
+// 						strokeWidth: border.width,
+// 						fill: border.fill,
+// 						strokeDasharray: null,
+// 					},
+// 					text: {
+// 						fill: text.color,
+// 						fontSize: text.size,
+// 						lineHeight: text.lineHeight,
+// 						fontWeight: 'normal',
+// 						textWrap: {
+// 							width: -10,
+// 						},
+// 					}
+// 				},
+// 				ports: {
+// 					items: [
+// 							{ group: 'port-top', id: 'p_top' },
+// 							{ group: 'port-bottom', id: 'p_bottom' },
+// 							{ group: 'port-left', id: 'p_left' },
+// 							{ group: 'port-right', id: 'p_right' },
+// 					],
+// 					groups: {
+// 							"port-top": {
+// 									position: 'top',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-bottom": {
+// 									position: 'bottom',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-left": {
+// 									position: 'left',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-right": {
+// 									position: 'right',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 					}
+// 				},
+// 			}
+// 		case 'roundRect': 
+// 			return {
+// 				width: 60,
+// 				height: 40,
+// 				data: {
+// 					key
+// 				},
+// 				attrs: {
+// 					rect: {
+// 						stroke: border.borderColor,
+// 						strokeWidth: border.width,
+// 						fill: border.fill,
+// 						strokeDasharray: null,
+// 						rx:8,
+// 						ry:8
+// 					},
+// 					text: {
+// 						fill: text.color,
+// 						fontSize: text.size,
+// 						lineHeight: text.lineHeight,
+// 						fontWeight: 'normal',
+// 						textWrap: {
+// 							width: -10,
+// 						},
+// 					}
+// 				},
+// 				ports: {
+// 					items: [
+// 							{ group: 'port-top', id: 'p_top' },
+// 							{ group: 'port-bottom', id: 'p_bottom' },
+// 							{ group: 'port-left', id: 'p_left' },
+// 							{ group: 'port-right', id: 'p_right' },
+// 					],
+// 					groups: {
+// 							"port-top": {
+// 									position: 'top',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-bottom": {
+// 									position: 'bottom',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-left": {
+// 									position: 'left',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-right": {
+// 									position: 'right',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 					}
+// 				},
+// 			}
+// 		case 'ellipse': 
+// 			return {
+// 				width: 60,
+// 				height: 40,
+// 				data: {
+// 					key
+// 				},
+// 				attrs: {
+// 					ellipse: {
+// 						stroke: border.borderColor,
+// 						strokeWidth: border.width,
+// 						fill: border.fill,
+// 						strokeDasharray: null,
+// 					},
+// 					text: {
+// 						fill: text.color,
+// 						fontSize: text.size,
+// 						lineHeight: text.lineHeight,
+// 						fontWeight: 'normal',
+// 						textWrap: {
+// 							width: -10,
+// 						},
+// 					}
+// 				},
+// 				ports: {
+// 					items: [
+// 							{ group: 'port-top', id: 'p_top' },
+// 							{ group: 'port-bottom', id: 'p_bottom' },
+// 							{ group: 'port-left', id: 'p_left' },
+// 							{ group: 'port-right', id: 'p_right' },
+// 					],
+// 					groups: {
+// 							"port-top": {
+// 									position: 'top',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-bottom": {
+// 									position: 'bottom',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-left": {
+// 									position: 'left',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-right": {
+// 									position: 'right',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 					}
+// 				},
+// 			}
+// 		case 'rhomboid': 
+// 			return {
+// 				width: 60,
+// 				height: 60,
+// 				// angle:-45,
+// 				data: {
+// 					key
+// 				},
+// 				attrs: {
+// 					body: {
+// 						stroke: border.borderColor,
+// 						strokeWidth: border.width,
+// 						fill: border.fill,
+// 						strokeDasharray: null,
+// 						refPoints: '0,10 10,0 20,10 10,20',
+// 					},
+// 					text: {
+// 						fill: text.color,
+// 						fontSize: text.size,
+// 						lineHeight: text.lineHeight,
+// 						fontWeight: 'normal',
+// 						textWrap: {
+// 							width: -10,
+// 						},
+// 					}
+// 				},
+// 				ports: {
+// 					items: [
+// 							{ group: 'port-top', id: 'p_top' },
+// 							{ group: 'port-bottom', id: 'p_bottom' },
+// 							{ group: 'port-left', id: 'p_left' },
+// 							{ group: 'port-right', id: 'p_right' },
+// 					],
+// 					groups: {
+// 							"port-top": {
+// 									position: 'top',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-bottom": {
+// 									position: 'bottom',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-left": {
+// 									position: 'left',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 							"port-right": {
+// 									position: 'right',
+// 									zIndex: 20,
+// 									...portStyle
+// 							},
+// 					}
+// 				},
+// 			}
+// 		case 'text': 
+// 			return {
+// 				width: 60,
+// 				height: 40,
+// 				data: {
+// 					key,
+// 				},
+// 				attrs: {
+// 					rect: {
+// 						stroke: '',
+// 						strokeWidth: 0,
+// 						fill: 'transparent',
+// 					},
+// 					text: {
+// 						text: '文本框',
+// 						fontSize: text.size,
+// 						lineHeight: text.lineHeight,
+// 						fontWeight: 'normal',
+// 						fill: text.color,
+// 						textWrap: {
+// 							width: -10,
+// 						},
+// 					}
+// 				},
+// 			}
+// 	}
+// }
+

src/views/sandbox_manage/common/events.js

@@ -1,5 +1,7 @@
 import { store } from "../../../main";
+import { configOpt } from './toolConfig';
 
+const { line} = configOpt;
 /* 节点操作监听事件 */
 export const myEvents = (graph) => {
 
@@ -16,7 +18,7 @@ export const myEvents = (graph) => {
 			edit_area.style.outline = "none";
 			edit_area.style.padding = "4px";
 			edit_area.style.boxSizing = "border-box";
-			$('#flow-container')[0].appendChild(edit_area);
+			$('#sand-chart-container')[0].appendChild(edit_area);
 
 			const position = node.position();
       const size = node.size();
@@ -34,7 +36,7 @@ export const myEvents = (graph) => {
 			edit_area.style.left = `${pos.x}px`;
 			edit_area.style.top = `${pos.y}px`;
 			edit_area.style.width = `${width * zoom}px`;
-			// edit_area.style.height = `${height}px`;
+			edit_area.style.height = `${height}px`;
 
 			edit_area.style.lineHeight = `${text.lineHeight * zoom}px`;
 			edit_area.style.textAlign = `center`;
@@ -69,10 +71,9 @@ export const myEvents = (graph) => {
 				const domH = (edit_area.getBoundingClientRect().height) /zoom;
 				node.size(width,domH > 50 ? domH : 50);
 				
-				$('#flow-container')[0].removeChild(edit_area);
+				$('#sand-chart-container')[0].removeChild(edit_area);
 			}
 
-
 			// node.addTools({
 			// 	name: 'node-editor',
 			// 	args: {
@@ -85,7 +86,6 @@ export const myEvents = (graph) => {
 			// 	},
 			// })
 		})
-
 		/* 鼠标移入移出控制连接桩 */
 		graph.on('node:mouseenter', ({ node, e }) => {
 			// console.log(node)
@@ -153,6 +153,68 @@ export const myEvents = (graph) => {
 			
 			selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 		})
+
+		/* 监听选中事件 */
+		// graph.on('selection:drag',({selected}) => {
+	
+		// 	selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
+		// })
+		// 鼠标 Hover 时添加小工具
+		// graph.on('edge:mouseenter', ({ cell }) => {
+		// 	cell.addTools({
+		// 		name: 'vertices',
+		// 		tools: ['vertices'],
+		// 	})
+		// })
+
+		// graph.on('edge:mouseleave', ({ cell }) => {
+		// 	if (cell.hasTools('onhover')) {
+		// 		cell.removeTools()
+		// 	}
+		// })
+		graph.on('edge:mouseenter', ({ cell }) => {
+			cell.addTools([
+				{
+					name: 'source-arrowhead',
+					args: {
+						attrs:{
+							d: 'M 8 -6 -8 0 8 6 Z',
+							fill: line.color
+						}
+					}
+				},
+				{
+					name: 'target-arrowhead',
+					args: {
+						attrs:{
+							d: 'M -8 -6 8 0 -8 6 Z',
+							fill: line.color
+						}
+					}
+				},
+				// {
+				// 	name: 'vertices',
+				// 	args:{
+				// 		addable:false,
+				// 	},
+				// }
+				{
+					name: 'segments',
+					args: {
+						snapRadius: 20,
+					},
+				}
+			])
+		})
+		
+		graph.on('edge:mouseleave', ({ cell }) => {
+			cell.removeTools()
+		})
+
+		// graph.on('graph:mouseup', (e) => {
+		// 	console.log(e,'mouseup');
+		// })
+		// console.log(document.getElementById('sand-chart-container'));
 }
 
 /* 绑定键盘事件 */

src/views/sandbox_manage/common/gragh.js

@@ -25,10 +25,10 @@ export function myGraph (wrapper) {
 			multiple: false
 		},
 		snapline: true, //对齐线
-		// panning: { //画布拖动
-		// 	enabled: true,
-		// 	eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
-		// },
+		panning: { //画布拖动
+			enabled: true,
+			eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
+		},
 		clipboard: true,
 		keyboard: {
 			enabled: true,
@@ -40,7 +40,7 @@ export function myGraph (wrapper) {
 		}, //滚轮缩放
 		grid: {
 			size: 10,      // 网格大小
-			visible: true,
+			visible: false,
 		},
 		highlighting: {
 			// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
@@ -68,8 +68,8 @@ export function myGraph (wrapper) {
 		},
 		connecting: {
 			snap: true,
-			// 不允许连接到空白位置
-			allowBlank: false,
+			// 允许连接到空白位置
+			allowBlank: true,
 			// 不允许创建循环连线
 			allowLoop: false,
 			// 不允许在相同节点创建多条边
@@ -114,7 +114,10 @@ export function myGraph (wrapper) {
         minimap: {
             enabled: true,
             container: document.getElementById("minimap"),
-        }
+        },
+				interacting:{
+					arrowheadMovable:true
+				}
 	})
 
 	/* 节点操作事件 */
@@ -124,4 +127,4 @@ export function myGraph (wrapper) {
 	bindKey(graph);
 
 	return graph;
-}
+}

src/views/sandbox_manage/common/node.js

@@ -5,69 +5,85 @@ const { line,border,text } = configOpt;
 //定义图形
 const configStyles = {
 	rect: {
-		width: '120px',
+		width: '60px',
+		height: '40px',
+		border: `1px solid ${border.borderColor}`,
+		backgroundColor: border.fill,
+	},
+	roundRect: {
+		width: '60px',
+		height: '40px',
+		border: `1px solid ${border.borderColor}`,
+		backgroundColor: border.fill,
+		borderRadius:"8px"
+	},
+	ellipse:{
+		width: '60px',
+		height: '40px',
+		border: `1px solid ${border.borderColor}`,
+		backgroundColor: border.fill,
+		borderRadius:"100%"
+	},
+	rhomboid:{
+		width: '50px',
 		height: '50px',
-		textAlign: 'center',
-		lineHeight: '50px',
-		border: '1px solid #5b8ffa',
+		border: `1px solid ${border.borderColor}`,
 		backgroundColor: border.fill,
-		borderColor: border.borderColor,
-		borderRadius: '4px',
-		color: '#7D7671',
-		margin: '0 10px 20px 0',
+		transform: 'rotate(-45deg) scale(0.7)'
 	},
 	text: {
-		width: '110px',
-		height: '50px',
+		width: '60px',
+		height: '40px',
 		textAlign: 'center',
-		lineHeight: '50px',
+		lineHeight: '40px',
 		background: '#fff',
 		color: text.color,
 		fontSize: '14px',
 		fontWeight: 'normal',
-		
 	},
-	date: {
-		width: '120px',
-		height: '50px',
-		textAlign: 'center',
-		lineHeight: '50px',
-		backgroundColor: '#5B9BD5',
-		borderRadius: '4px',
-		color: '#fff',
-		fontSize: '14px',
-		fontWeight: 'bold'
-	}
-
 }
 
-/* 图形种类 */
 export const myNodes = [
 	{
 		shape: 'rect',
 		key: 'rect',
-		label: '双击输入文本',
+		label:'',
 		styles: {
 			...configStyles.rect,
 		}
 	},
 	{
 		shape: 'rect',
-		key: 'text',
-		label: '双击替换文本',
+		key: 'roundRect',
+		label:'',
 		styles: {
-			...configStyles.text,
+			...configStyles.roundRect,
+		}
+	},
+	{
+		shape: 'ellipse',
+		key: 'ellipse',
+		label:'',
+		styles: {
+			...configStyles.ellipse,
+		}
+	},
+	{
+		shape: 'polygon',
+		key: 'rhomboid',
+		label:'',
+		styles: {
+			...configStyles.rhomboid,
 		}
 	},
 	{
 		shape: 'rect',
-		key: 'date',
-		label:'Date:',
+		key: 'text',
+		label: '文本框',
 		styles: {
-			...configStyles.date,
+			...configStyles.text,
 		}
 	},
-
 ]
 
 
@@ -84,13 +100,13 @@ export const portStyle = {
 		}
 	}
 }
-// 创建的节点配置 框 文本 日期
+// 创建的节点配置 矩形、圆角矩形、椭圆形、菱形、文本
 export const myNodeOption = (key) => {
 	switch (key) {
 		case 'rect': 
 			return {
-				width: 120,
-				height: 50,
+				width: 60,
+				height: 40,
 				data: {
 					key
 				},
@@ -114,9 +130,13 @@ export const myNodeOption = (key) => {
 				ports: {
 					items: [
 							{ group: 'port-top', id: 'p_top' },
+							{ group: 'port-top', id: 'p_top-1' },
 							{ group: 'port-bottom', id: 'p_bottom' },
+							{ group: 'port-bottom', id: 'p_bottom-1' },
 							{ group: 'port-left', id: 'p_left' },
+							{ group: 'port-left', id: 'p_left-1' },
 							{ group: 'port-right', id: 'p_right' },
+							{ group: 'port-right', id: 'p_right-1' },
 					],
 					groups: {
 							"port-top": {
@@ -138,40 +158,187 @@ export const myNodeOption = (key) => {
 									position: 'right',
 									zIndex: 20,
 									...portStyle
-							},
+							}
 					}
 				},
 			}
-		case 'date': 
+		case 'roundRect': 
 			return {
-				width: 120,
-				height: 50,
+				width: 60,
+				height: 40,
 				data: {
-					key,
+					key
 				},
 				attrs: {
 					rect: {
-						stroke: '#5B9BD5',
-						strokeWidth: 1,
-						fill: '#5B9BD5'
+						stroke: border.borderColor,
+						strokeWidth: border.width,
+						fill: border.fill,
+						strokeDasharray: null,
+						rx:8,
+						ry:8
 					},
 					text: {
-						text: 'Date:',
-						fill: '#fff',
-						fontSize: 18,
+						fill: text.color,
+						fontSize: text.size,
+						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
+						textWrap: {
+							width: -10,
+						},
+					}
+				},
+				ports: {
+					items: [
+							{ group: 'port-top', id: 'p_top' },
+							{ group: 'port-bottom', id: 'p_bottom' },
+							{ group: 'port-left', id: 'p_left' },
+							{ group: 'port-right', id: 'p_right' },
+					],
+					groups: {
+							"port-top": {
+									position: 'top',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-bottom": {
+									position: 'bottom',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-left": {
+									position: 'left',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-right": {
+									position: 'right',
+									zIndex: 20,
+									...portStyle
+							},
+					}
+				},
+			}
+		case 'ellipse': 
+			return {
+				width: 60,
+				height: 40,
+				data: {
+					key
+				},
+				attrs: {
+					ellipse: {
+						stroke: border.borderColor,
+						strokeWidth: border.width,
+						fill: border.fill,
+						strokeDasharray: null,
+					},
+					text: {
+						fill: text.color,
+						fontSize: text.size,
 						lineHeight: text.lineHeight,
+						fontWeight: 'normal',
 						textWrap: {
 							width: -10,
 						},
 					}
 				},
-				ports: false
+				ports: {
+					items: [
+							{ group: 'port-ellipse', id: 'p_top' },
+							{ group: 'port-ellipse', id: 'p_bottom' },
+							{ group: 'port-ellipse', id: 'p_left' },
+							{ group: 'port-ellipse', id: 'p_right' },
+							{ group: 'port-ellipse', id: 'p_top-1' },
+							{ group: 'port-ellipse', id: 'p_bottom-1' },
+							{ group: 'port-ellipse', id: 'p_left-1' },
+							{ group: 'port-ellipse', id: 'p_right-1' },
+					],
+					groups: {
+							"port-ellipse": {
+									position: 'ellipseSpread',
+									zIndex: 20,
+									...portStyle
+							},
+							// "port-bottom": {
+							// 		position: 'bottom',
+							// 		zIndex: 20,
+							// 		...portStyle
+							// },
+							// "port-left": {
+							// 		position: 'left',
+							// 		zIndex: 20,
+							// 		...portStyle
+							// },
+							// "port-right": {
+							// 		position: 'right',
+							// 		zIndex: 20,
+							// 		...portStyle
+							// },
+					}
+				},
+			}
+		case 'rhomboid': 
+			return {
+				width: 60,
+				height: 60,
+				// angle:-45,
+				data: {
+					key
+				},
+				attrs: {
+					body: {
+						stroke: border.borderColor,
+						strokeWidth: border.width,
+						fill: border.fill,
+						strokeDasharray: null,
+						refPoints: '0,10 10,0 20,10 10,20',
+					},
+					text: {
+						fill: text.color,
+						fontSize: text.size,
+						lineHeight: text.lineHeight,
+						fontWeight: 'normal',
+						textWrap: {
+							width: -10,
+						},
+					}
+				},
+				ports: {
+					items: [
+							{ group: 'port-top', id: 'p_top' },
+							{ group: 'port-bottom', id: 'p_bottom' },
+							{ group: 'port-left', id: 'p_left' },
+							{ group: 'port-right', id: 'p_right' },
+					],
+					groups: {
+							"port-top": {
+									position: 'top',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-bottom": {
+									position: 'bottom',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-left": {
+									position: 'left',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-right": {
+									position: 'right',
+									zIndex: 20,
+									...portStyle
+							},
+					}
+				},
 			}
 		case 'text': 
 			return {
-				width: 120,
-				height: 50,
+				width: 60,
+				height: 40,
 				data: {
 					key,
 				},
@@ -182,7 +349,7 @@ export const myNodeOption = (key) => {
 						fill: 'transparent',
 					},
 					text: {
-						text: '双击替换文本',
+						text: '文本框',
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
@@ -192,7 +359,41 @@ export const myNodeOption = (key) => {
 						},
 					}
 				},
+				ports: {
+					items: [
+							{ group: 'port-top', id: 'p_top' },
+							{ group: 'port-top', id: 'p_top-1' },
+							{ group: 'port-bottom', id: 'p_bottom' },
+							{ group: 'port-bottom', id: 'p_bottom-1' },
+							{ group: 'port-left', id: 'p_left' },
+							{ group: 'port-left', id: 'p_left-1' },
+							{ group: 'port-right', id: 'p_right' },
+							{ group: 'port-right', id: 'p_right-1' },
+					],
+					groups: {
+							"port-top": {
+									position: 'top',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-bottom": {
+									position: 'bottom',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-left": {
+									position: 'left',
+									zIndex: 20,
+									...portStyle
+							},
+							"port-right": {
+									position: 'right',
+									zIndex: 20,
+									...portStyle
+							}
+					}
+				},
 			}
 	}
-	
-}
+}
+

src/views/sandbox_manage/common/toolConfig.js

@@ -8,14 +8,14 @@ export let configOpt = {
 		lineHeight: TEXT_SIZE * 1.3,
 	},
 	line: { //线条设置
-		width: 2,
-		color: '#5B9BD5',
+		width: 1,
+		color: '#0052D9',
 	},
 	border: { //线框设置
-		isDash: 0, // 0实 1虚线
+		isDash: 0, // 0实 1虚线border: 1px solid #0052D9
 		width: 2,
-		fill: '#fff',
-		borderColor: '#5B9BD5',
+		fill: '#DAE8FF',
+		borderColor: '#0052D9',
 	}
 }
 

src/views/sandbox_manage/index_new_version.vue

@@ -21,7 +21,7 @@
           </el-select>
         </div>
         <div class="sandbox-content-tree">
-          <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" />
+          <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" key="classify" />
           <div class="add-classify">
             <img src="~@/assets/img/sand_new/add_ico.png"/>
             <span @click="addLevelOneHandle">添加分类</span>
@@ -121,30 +121,39 @@
       :visible.sync="saveOtherShow"
       :append-to-body="true"
       :close-on-click-modal="false"
-      @closed="classifyAddClosed"
-      width="560px">
+      @closed="saveOtherClosed"
+      width="600px">
       <div style="padding: 10px 40px 0;">
-        <el-form :model="classifyForm" ref="classifyFormRef" :rules="classifyFormRules" 
-        label-width="80px">
-          <el-form-item label="上级目录" v-if="lastLevelClassifyName">
-            {{ lastLevelClassifyName }}
+        <el-form :model="saveOtherForm" ref="saveOtherFormRef"
+        label-width="96px">
+          <el-form-item label="逻辑图名称" prop="chartName" :rules="{required:true,message:'请输入逻辑图名称',trigger:'blur'}">
+            <el-input v-model="saveOtherForm.chartName" style="width: 317px;" placeholder="请输入逻辑图名称"></el-input>
           </el-form-item>
-          <el-form-item label="目录名称" prop="classifyName">
-            <el-input v-model="classifyForm.classifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
-          </el-form-item>
-          <el-form-item label="关联品种" prop="varietyId">
-            <el-cascader 
-							:options="classifyArr"
-							:props="classifyProps"
-							v-model="classifyForm.varietyId" 
-							placeholder="请选择对应品种" 
-              id="classifyAddCascader"
-						/>
+          <el-form-item label="分类" prop="classifyId" :rules="{required:true,message:'请选择分类',trigger:'change'}" >
+            <el-popover
+              placement="bottom"
+              width="400"
+              popper-class="classify-popper"
+              trigger="click"
+              v-model="selectClassifyShow">
+                <tree :nodes="treeData" :setting="selectSetting" key="saveOther" @onCreated="getSelectZTree" @onClick="selectClassify" />
+              <!-- <el-button slot="reference">click 激活</el-button> -->
+                <el-cascader 
+                slot="reference"
+                :options="treeData"
+                :props="{children: 'Children',
+                  label: 'ChartClassifyName',
+                   value: 'ChartClassifyId',emitPath:false,checkStrictly:true}"
+                v-model="saveOtherForm.classifyId" 
+                popper-class="classify-cascader-popper"
+                placeholder="请选择分类">
+                </el-cascader>
+            </el-popover>
           </el-form-item>
         </el-form>
         <div style="text-align: center;padding:40px 0 ;">
-          <el-button @click="classifyAddSubmit" type="primary" style="width: 120px;" size="large">保存</el-button>
-          <el-button @click="classifyAddShow=false" style="width: 120px;margin-left: 28px;" size="large">取消</el-button>
+          <el-button @click="saveOtherSubmit" type="primary" style="width: 120px;" size="large">保存</el-button>
+          <el-button @click="saveOtherShow=false" style="width: 120px;margin-left: 28px;" size="large">取消</el-button>
         </div>
       </div>
     </el-dialog>
@@ -230,6 +239,25 @@ import { dataBaseInterface } from '@/api/api.js';
           }
         },
         zTreeObj:{},
+        selectSetting:{
+          data:{
+            key:{
+              name:"ChartClassifyName",
+              children:"Children"
+            },
+            simpleData:{
+              idKey:"ChartClassifyId",
+              pIdKey:"ParentId"
+            }
+          },
+          view:{
+            showLine:false,
+            showIcon:false,
+            selectedMulti:false
+          }
+        },
+        selectClassifyShow:false,
+        selectZTreeObj:{},
         copyImgLoding:null,
         // ------- 添加分类弹窗
         classifyAddTitle:"添加分类",
@@ -250,7 +278,11 @@ import { dataBaseInterface } from '@/api/api.js';
 			  },
         classifyArr:[{ChartPermissionId:1,ClassifyName:'品种11',Items:[{ChartPermissionId:11,ClassifyName:'品种112',Items:null}]}],
         // 另存为弹窗
-        saveOtherShow:false
+        saveOtherShow:false,
+        saveOtherForm:{
+          chartName:"逻辑图名称",
+          classifyId:""
+        }
       }
     },
     created(){
@@ -264,6 +296,9 @@ import { dataBaseInterface } from '@/api/api.js';
       getZTree(zTree){
         this.zTreeObj=zTree
       },
+      getSelectZTree(zTree){
+        this.selectZTreeObj=zTree
+      },
       zTreeDropBefore(treeId,treeNodes,targetNode,moveType,isCopy){
         console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
         return false
@@ -462,7 +497,25 @@ import { dataBaseInterface } from '@/api/api.js';
         window.open(href, '_blank');
       },
       saveOther(){
-
+        this.saveOtherShow=true
+      },
+      saveOtherSubmit(){
+        //提交
+        this.$refs.saveOtherFormRef.validate(valid=>{
+          if(valid){
+            // TODO: 提交接口对接
+            this.saveOtherShow=false
+            this.$message.success("另存为成功")
+          }
+        })
+      },
+      saveOtherClosed(){
+        this.saveOtherForm={
+          chartName:"逻辑图名称",
+          classifyId:""
+        }
+        this.selectZTreeObj.cancelSelectedNode()
+        this.$refs.saveOtherFormRef.clearValidate()
       },
       copySandHandle: _.debounce(function() {
         return 
@@ -553,6 +606,10 @@ import { dataBaseInterface } from '@/api/api.js';
             
         })
       },500),
+      selectClassify(event,treeId,treeNode,clickFlag){
+        this.saveOtherForm.classifyId = treeNode.ChartClassifyId
+        this.selectClassifyShow = false
+      }
     }
   }
 </script>
@@ -824,4 +881,11 @@ import { dataBaseInterface } from '@/api/api.js';
     width: 317px;
   }
 }
+.classify-popper{
+  height: 400px;
+  overflow: auto;
+}
+.classify-cascader-popper{
+  display: none;
+}
 </style>

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -1,7 +1,57 @@
 <template>
   <div id="sand-edit-container" class="sand-edit-container">
     <div class="sand-toolbar">
+      <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
+        <el-tab-pane label="元素库" name="元素库">
+          <div class="sand-elements-tab">
+            <div class="sand-elements sand-elements-line">
+              <span>线条</span>
+              <div class="elements-row" >
+                <!-- <img :src="edge.ImgUrl" v-for="edge in myEdges" :key="edge.key"
+                @mousedown="edgeDragStart(edge,$event)" /> -->
+                <img src="~@/assets/icons/arrow.svg" :draggable="true" @dragstart="edgeDragStart('noArrowStraight',$event)" />
+                <img src="~@/assets/img/chart_m/change.png" />
+                <img src="~@/assets/img/chart_m/Group.png" />
+                <img src="~@/assets/img/chart_m/Group_act.png" />
+                <img src="~@/assets/img/chart_m/User.png" />
+                <img src="~@/assets/img/chart_m/User_act.png" />
+                <img src="~@/assets/img/chart_m/View.png" />
+                <img src="~@/assets/img/chart_m/View_act.png" />
+              </div>
+            </div>
+            <div class="sand-elements sand-elements-shape">
+              <span>基本形状</span>
+              <div class="elements-row">
+                <div 
+                  class="elements-shape-item"
+                  v-for="shape in myNodes" 
+                  :key="shape.key"
+                  :style="shape.styles" 
+                  @mousedown="dragStart(shape,$event)"
+                >
+                  {{shape.label}}
+                </div>
+              </div>
+            </div>
+            <div class="sand-elements sand-elements-mind">
+              <span>思维导图</span>
+              <div class="elements-row-mind">
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+                <img src="~@/assets/icons/arrow.svg" />
+              </div>
+            </div>
+          </div>
 
+        </el-tab-pane>
+        <el-tab-pane label="风格" name="风格">
+          风格
+        </el-tab-pane>
+      </el-tabs>
     </div>
     <div class="sand-main">
       <div class="sand-main-top">
@@ -29,24 +79,166 @@
           <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;">保存</el-button>
         </div>
       </div>
+      <div class="sand-main-body">
+        <div class="sand-mainBody-tool">
+          撤销
+        </div>
+        <div class="sand-mainBody-chart" id="sand-mainBody-chart">
+          <div id="sand-chart-container" ></div>
+
+          <!-- 缩略图 -->
+          <div id="minimap" class="minimap"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { myGraph } from '../common/gragh';
+import { myNodes,myNodeOption } from '../common/node';
+import { myEdges } from '../common/edge';
+import { Addon } from '@antv/x6'
+import { configOpt } from '../common/toolConfig';
+
+const { line} = configOpt;
   export default {
     name:"sandFlowIndex",
     data() {
       return {
-        
+        graph: null,
+        dnd:null,
+        initData: {},
+        activeToolTabName:"元素库",
+        addEdgeType:"",
+        tx:0,
+        ty:0
+      }
+    },
+    watch: {
+      initData(newval) {
+        console.log(newval)
+        this.graph.fromJSON(newval);
+      },
+	  },
+    computed:{
+      myNodes(){
+        return myNodes
+      },
+      myEdges(){
+        return myEdges
       }
     },
+    mounted(){
+      this.init()
+      console.log(document.getElementsByClassName('x6-graph-scroller-content')[0].clientWidth);
+      document.getElementsByClassName('x6-graph-scroller-content')[0].addEventListener("dragover",this.edgeDragover)
+      document.getElementsByClassName('x6-graph-scroller-content')[0].addEventListener("drop",this.edgeDrop)
+    },
+    beforeDestroy(){
+      document.getElementById('sand-mainBody-chart').removeEventListener("dragover",this.edgeDragover)
+      document.getElementById('sand-mainBody-chart').removeEventListener("drop",this.edgeDrop)
+    },
     methods: {
+      // 初始化画布
+      init() {
+        const graph = new myGraph('sand-chart-container');
+        this.graph = graph;
+        this.dnd = new Addon.Dnd({
+          target: this.graph,
+          animation: true,
+          validateNode() {
+            return true;
+          },
+        });
+        // graph.on('translate', ({ tx, ty }) => {
+        //   this.tx = tx
+        //   this.ty = ty
+        //   console.log(tx, ty);
+        // })
+		  },
+      dragStart(data,e) {
+        // console.log(data,e,"触发了")
+        const { key,shape } = data;
+        
+        const	node = this.graph.createNode({
+          shape,
+          ...myNodeOption(key),
+        });
+        this.dnd.start(node,e);
+      },
+      edgeDragStart(type){
+        this.addEdgeType = type
+        console.log(type,"触发了边")
+      },
+      edgeDragover(e){
+        e.preventDefault()
+      },
+      edgeDrop(e){
+        if(!this.addEdgeType){
+          return 
+        }
+        console.log(this.addEdgeType,e);
+        console.log(this.graph);
+        // console.log(e.offsetX-this.tx,e.offsetY-this.ty);
+        // return 
+        this.graph.addEdge({
+          shape:'edge',
+          // shape,
+          // ...myNodeOption(key),
+          // source: { x: 240, y: 40 },
+          // source: { x: e.screenX-40, y: e.screenX-40 },
+          // target: { x: e.screenY+40, y: e.screenY+40 },
+          // source: { x: 0, y: 0 },
+          // target: { x: 0 ,y: 80 },
+          source: { x: e.offsetX, y: e.offsetY },
+          target: { x: e.offsetX ,y: e.offsetY+80 },
+          router: {
+            name: 'normal',
+            args: {
+              padding: {
+                left: 10,
+              }
+            }
+          },
+          attrs:{
+            line:{
+              stroke: line.color,
+							strokeWidth: line.width,
+              sourceMarker: false,//起始箭头 
+							targetMarker: false,//终止箭头
+            }
+          },
+          connector: {
+            name: 'normal',
+          },
+          // tools: {
+          //   items: [
+          //     {
+          //       name: 'vertices',
+          //       args: {
+          //         attrs: { fill: '#666' },
+          //       },
+          //     },
+          //     // {
+          //     //   name: 'segments',
+          //     //   args: {
+          //     //     snapRadius: 20,
+          //     //     attrs: {
+          //     //       fill: '#444',
+          //     //     },
+          //     //   },
+          //     // },
+          //   ],
+          // },
+          // vertices: [{ x: 240, y: 140 }]
+        });
+      },
       copySandHandle(){
 
       },
       saveChart(){
-
+        console.log(this.myEdges);
       }
     },
   }
@@ -60,15 +252,63 @@
     flex-wrap: nowrap;
     .sand-toolbar{
       min-width: 400px;
+      width: 400px;
       background-color: white;
       border-radius: 4px;
       border: 1px solid #DCDFE6;
       height: 100%;
       box-sizing: border-box;
       margin-right: 20px;
+      padding-bottom: 20px;
+      .sand-elements-tab{
+        padding: 0 30px;
+        overflow: auto;
+        height: calc(100vh - 220px);
+        .sand-elements{
+          padding: 30px 0 20px;
+          border-bottom: 1px solid #C8CDD9 ;
+          span{
+            display: inline-block;
+            margin-bottom: 10px;
+            font-size: 16px;
+            color: #999999;
+          }
+          .elements-row{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-right: -10px;
+            .elements-shape-item,img{
+              margin-right: 10px;
+              margin-bottom: 10px;
+              cursor: pointer;
+            }
+            img{
+              height: 26px;
+              width: 26px;
+            }
+          }
+        }
+        .sand-elements-mind{
+          border-bottom: none;
+          padding-bottom: 0;
+          .elements-row-mind{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            img{
+              width: calc(50% - 10px);
+            }
+          }
+        }
+
+      }
     }
     .sand-main{
-      flex-grow: 1;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       .sand-main-top{
         padding: 20px 20px 10px;
         display: flex;
@@ -79,6 +319,7 @@
         box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
         border: 1px solid #DCDFE6;
         border-radius: 4px;
+        margin-bottom: 20px;
         .sand-mainTop-form{
           margin-bottom: 10px;
           margin-right: 20px;
@@ -100,21 +341,84 @@
           }
         }
       }
-
+      .sand-main-body{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        background-color: white;
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        .sand-mainBody-tool{
+          height: 50px;
+          width: 100%;
+          background-color: #F5F6F7;
+          box-sizing: border-box;
+          border-radius: 4px;
+        }
+        .sand-mainBody-chart{
+          height: calc(100% - 50px);
+          // flex: 1;
+          position: relative;
+          display: flex;
+          .minimap{
+            position:absolute;
+            right:6px;
+            bottom:6px;
+            box-sizing: border-box;
+          }
+        }
+      }
     }
   }
   @media screen and (max-width:1680px) {
     #sand-edit-container{
       .sand-toolbar{
         min-width: 330px;
+        width: 330px;
       }
     }
   }
 </style>
 <style lang="scss">
+  .sand-toolbar-tabs{
+    .el-tabs__header{
+      padding-top: 16px;
+      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
+    }
+  }
   .el-cascader{
     .el-input{
       width: 240px;
     }
   }
+  .sand-mainBody-chart{
+    #sand-chart-container{
+      flex: 1;
+    }
+    .x6-graph-scroller {
+      flex: 1;
+    }
+
+    .x6-port-body {
+      display: none;
+    }
+
+    /* reseize 框样式 */
+    .x6-widget-transform {
+      .x6-widget-transform-resize {
+        border-radius: 0;
+      }
+    }
+    .x6-widget-minimap-viewport{
+      border-color: red;
+      .x6-widget-minimap-viewport-zoom{
+        border-color: red;
+      }
+    }
+    .x6-widget-minimap{
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+
 </style>