| | |
| | | var data = window.parent.document.getElementById("svgContentId").value |
| | | svgCanvas.clear() |
| | | if(data){ |
| | | console.log(data,'data data') |
| | | window.methodDraw.loadSvgString(data) |
| | | window.methodDraw.updateCanvas() |
| | | } |
| | |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 100, |
| | | "width": 60, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | |
| | | group: 'left', |
| | | }, |
| | | ], |
| | | }, |
| | | initJson: { |
| | | "cells": [ |
| | | { |
| | | "position": { |
| | | "x": -600, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "start", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/start.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": "10000", |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "endNodeId": "20000", |
| | | "dataId": "", |
| | | "nodeType": "start", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 1 |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 0, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 100, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "dashedBox", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/dashedBox.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": 15000, |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "dataId": "", |
| | | "nodeType": "dashedBox", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 2 |
| | | }, |
| | | { |
| | | "position": { |
| | | "x": 600, |
| | | "y": 0 |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "end", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | | "xlink:href": "/modelImg/end.svg" |
| | | } |
| | | }, |
| | | "visible": true, |
| | | "shape": "image", |
| | | "id": "20000", |
| | | "data": { |
| | | "type": "imageNodes", |
| | | "startNodeId": "10000", |
| | | "dataId": "", |
| | | "nodeType": "end", |
| | | "nodeTypeExt": "", |
| | | "voteNum": "" |
| | | }, |
| | | "ports": { |
| | | "groups": { |
| | | "top": { |
| | | "position": { |
| | | "name": "top" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "right": { |
| | | "position": { |
| | | "name": "right" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "bottom": { |
| | | "position": { |
| | | "name": "bottom" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "left": { |
| | | "position": { |
| | | "name": "left" |
| | | }, |
| | | "attrs": { |
| | | "circle": { |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | "items": [ |
| | | { |
| | | "id": "top1", |
| | | "group": "top" |
| | | }, |
| | | { |
| | | "id": "right1", |
| | | "group": "right" |
| | | }, |
| | | { |
| | | "id": "bottom1", |
| | | "group": "bottom" |
| | | }, |
| | | { |
| | | "id": "left1", |
| | | "group": "left" |
| | | } |
| | | ] |
| | | }, |
| | | "zIndex": 3 |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7", |
| | | "router": { |
| | | "name": "manhattan" |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | | }, |
| | | "source": { |
| | | "cell": "10000", |
| | | "port": "right1" |
| | | }, |
| | | "target": { |
| | | "cell": 15000, |
| | | "port": "left1" |
| | | }, |
| | | "zIndex": 4 |
| | | }, |
| | | { |
| | | "shape": "edge", |
| | | "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f", |
| | | "router": { |
| | | "name": "manhattan" |
| | | }, |
| | | "connector": { |
| | | "name": "rounded" |
| | | }, |
| | | "source": { |
| | | "cell": 15000, |
| | | "port": "right1" |
| | | }, |
| | | "target": { |
| | | "cell": "20000", |
| | | "port": "left1" |
| | | }, |
| | | "zIndex": 5 |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | |
| | | getDropNode: (node) => { |
| | | const {width, height} = node.size() |
| | | if (node.getData().type && node.getData().nodeType === 'dashedBox') { |
| | | return node.clone().size(100, 60) |
| | | return node.clone().size(60, 60) |
| | | } |
| | | if (node.getData().type && node.getData().type === 'imageNodes2') { |
| | | return node.clone({keepId: true}) |
| | |
| | | width = 60 |
| | | height = 60 |
| | | } else if (dragNodeType === 'dashedBox') { |
| | | width = 100 |
| | | width = 60 |
| | | height = 60 |
| | | } else if (dragNodeType === 'bridgeConnection') { |
| | | width = 550 |
| | |
| | | let dashedBox = this.graph.addNode({ |
| | | shape: 'image', |
| | | // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), |
| | | width: 100, |
| | | width: 60, |
| | | height: 60, |
| | | id: dashId, |
| | | data: { |