Skip to content

V
vue-gojs
Commit 85ac5828 by 吴斌
Options

update：连线样式修改

parent 1f4339e1
Showing with 87 additions and 52 deletions
src/App.vue
...@@ -68,7 +68,7 @@ import { ...@@ -68,7 +68,7 @@ import {
nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate, nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
nodeSelectionAdornmentTemplate nodeSelectionAdornmentTemplate
} from "./kit/NodeTemplateKit.ts"; } from "./kit/NodeTemplateKit.ts";
import {linkSelectionAdornmentTemplate, MultiArrowLink} from "./kit/LinkTemplateKit.ts"; import {animateFlow, FlowLink, linkSelectionAdornmentTemplate} from "./kit/LinkTemplateKit.ts";
import {Inspector} from "./kit/DataInspector.ts"; import {Inspector} from "./kit/DataInspector.ts";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
...@@ -195,29 +195,33 @@ function initDiagram() { ...@@ -195,29 +195,33 @@ function initDiagram() {
); );
//多箭头连接线 //多箭头连接线
myDiagram.linkTemplate = GO(MultiArrowLink, myDiagram.linkTemplateMap.add("Arrow",
{selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate}, GO(go.Link,
{relinkableFrom: true, relinkableTo: true, reshapable: true}, {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
{routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4}, {relinkableFrom: true, relinkableTo: true, reshapable: true},
new go.Binding("points", "points").makeTwoWay(), {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4},
GO(go.Shape, // the link path shape new go.Binding("points", "points").makeTwoWay(),
{isPanelMain: true, strokeWidth: 2}, GO(go.Shape, // the link path shape
new go.Binding("stroke", "color").makeTwoWay(), {isPanelMain: true, strokeWidth: 2},
new go.Binding("fill", "color"), new go.Binding("stroke", "color").makeTwoWay(),
), new go.Binding("fill", "color"),
GO(go.TextBlock, ),
{ segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:""}, GO(go.Shape, { toArrow: "Standard", stroke: null }),
new go.Binding("text", "from_text").makeTwoWay() GO(go.TextBlock,
), { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:""},
GO(go.TextBlock, new go.Binding("text", "from_text").makeTwoWay()
{segmentOffset: new go.Point(NaN, NaN), editable:true, text:""}, ),
new go.Binding("text", "middle_text").makeTwoWay() GO(go.TextBlock,
), {segmentOffset: new go.Point(NaN, NaN), editable:true, text:""},
GO(go.TextBlock, new go.Binding("text", "middle_text").makeTwoWay()
{ segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:"" }, ),
new go.Binding("text", "to_text").makeTwoWay() GO(go.TextBlock,
), { segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:"" },
new go.Binding("text", "to_text").makeTwoWay()
),
)
); );
myDiagram.linkTemplateMap.add("Flow", FlowLink);
} }
function initInfo() { function initInfo() {
...@@ -229,12 +233,12 @@ function initInfo() { ...@@ -229,12 +233,12 @@ function initInfo() {
"key": {show: Inspector.showIfPresent}, "key": {show: Inspector.showIfPresent},
"name": {show: Inspector.showIfNode, name:'名称'}, "name": {show: Inspector.showIfNode, name:'名称'},
//连接线基本信息 //连接线基本信息
"color": {show: Inspector.showIfLink, type:'color', name:"颜色"},
"from":{show: Inspector.showIfLink, name:"源", readOnly:true}, "from":{show: Inspector.showIfLink, name:"源", readOnly:true},
"to":{show: Inspector.showIfLink, name:"目的", readOnly:true}, "to":{show: Inspector.showIfLink, name:"目的", readOnly:true},
"from_text": {show:Inspector.showIfLink, name:"源标签"}, "from_text": {show:Inspector.showIfLink, name:"源标签"},
"middle_text": {show:Inspector.showIfLink, name:"中间标签"}, "middle_text": {show:Inspector.showIfLink, name:"中间标签"},
"to_text": {show:Inspector.showIfLink, name:"目的标签"}, "to_text": {show:Inspector.showIfLink, name:"目的标签"},
"category": {show:Inspector.showIfLink, name:"类别", type: "select", choices: ["Arrow", "Flow"]},
"thick":{show: Inspector.showIfNode, name:"厚度", unit:"mm"}, "thick":{show: Inspector.showIfNode, name:"厚度", unit:"mm"},
"temperature":{show: Inspector.showIfNode, name:"温度", unit:"℃"}, "temperature":{show: Inspector.showIfNode, name:"温度", unit:"℃"},
...@@ -263,33 +267,33 @@ function importData() { ...@@ -263,33 +267,33 @@ function importData() {
myDiagram.model = go.Model.fromJson( myDiagram.model = go.Model.fromJson(
{ "class": "GraphLinksModel", { "class": "GraphLinksModel",
"nodeDataArray": [ "nodeDataArray": [
{"name":"压缩机","picture_category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50"}, {"name":"压缩机","picture_category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50","press":39,"thick":"0.86","temperature":9},
{"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-310 120","img_size":"70 70","angle":180}, {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-310 120","img_size":"70 70","angle":180,"press":41,"thick":"0.46","temperature":5},
{"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"60 60"}, {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"60 60","press":91,"thick":"0.85","temperature":2},
{"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 250","img_size":"60 60","thick":0.9,"press":15,"temperature":20,"thing":""}, {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 250","img_size":"60 60","thick":"0.48","press":91,"temperature":7,"thing":""},
{"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 370","angle":180,"img_size":"70 70","thick":0.88,"press":10,"temperature":20,"thing":""}, {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 370","angle":180,"img_size":"70 70","thick":"0.91","press":14,"temperature":9,"thing":""},
{"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270}, {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270,"press":15,"thick":"0.35","temperature":0},
{"name":"冷却器","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-300 -50","img_size":"60 72"}, {"name":"冷却器","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-300 -50","img_size":"60 72","press":27,"thick":"0.10","temperature":9},
{"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"}, {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90","press":89,"thick":"0.93","temperature":2},
{"name":"合成塔","picture_category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240"}, {"name":"合成塔","picture_category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240","press":6,"thick":"0.62","temperature":0},
{"name":"开工炉","picture_category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20","thick":0.88,"press":10,"temperature":20,"thing":""} {"name":"开工炉","picture_category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20","thick":"0.70","press":61,"temperature":0,"thing":""}
], ],
"linkDataArray": [ "linkDataArray": [
{"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":""}, {"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":"","category":"Arrow"},
{"to":-7,"points":[-581,120,-571,120,-533,120,-533,120,-495,120,-485,120],"from_text":"原料气","middle_text":"","to_text":""}, {"to":-7,"points":[-581,120,-571,120,-533,120,-533,120,-495,120,-485,120],"from_text":"原料气","middle_text":"","to_text":"","category":"Arrow"},
{"from":-1,"to":-4,"points":[-170,335,-170,325,-170,307.5,-170,307.5,-170,290,-170,280]}, {"from":-1,"to":-4,"points":[-170,335,-170,325,-170,307.5,-170,307.5,-170,290,-170,280],"category":"Arrow"},
{"from":-6,"to":-1,"points":[-310,155,-310,165,-310,370,-262.5,370,-215,370,-205,370]}, {"from":-6,"to":-1,"points":[-310,155,-310,165,-310,370,-262.5,370,-215,370,-205,370],"category":"Arrow"},
{"from":-3,"to":-7,"points":[-200,130,-210,130,-212,130,-212,164,-356,164,-356,120,-425,120,-435,120]}, {"from":-3,"to":-7,"points":[-170,160,-170,170,-460,170,-460,162.5,-460,155,-460,145],"category":"Arrow"},
{"from":-8,"to":-3,"points":[-170,25,-170,35,-170,62.5,-170,62.5,-170,90,-170,100]}, {"from":-8,"to":-3,"points":[-170,25,-170,35,-170,62.5,-170,62.5,-170,90,-170,100],"category":"Arrow"},
{"from":-3,"to":-5,"points":[-200,130,-210,130,-235,130,-235,-50,-260,-50,-270,-50]}, {"from":-3,"to":-5,"points":[-200,130,-210,130,-235,130,-235,-50,-260,-50,-270,-50],"category":"Arrow"},
{"from":-5,"to":-9,"points":[-330,-50,-340,-50,-372.5,-50,-372.5,-50,-405,-50,-415,-50]}, {"from":-5,"to":-9,"points":[-330,-50,-340,-50,-372.5,-50,-372.5,-50,-405,-50,-415,-50],"category":"Arrow"},
{"from":-9,"points":[-460,-95,-460,-105,-460,-117,-508,-117,-556,-117,-566,-117],"from_text":"","middle_text":"","to_text":"燃料气"}, {"from":-9,"points":[-460,-95,-460,-105,-460,-117,-508,-117,-556,-117,-566,-117],"from_text":"","middle_text":"","to_text":"燃料气","category":"Arrow"},
{"from":-9,"points":[-460,-5,-460,5,-460,19,-513,19,-566,19,-576,19],"from_text":"","middle_text":"","to_text":"氨产品"}, {"from":-9,"points":[-460,-5,-460,5,-460,19,-513,19,-566,19,-576,19],"from_text":"","middle_text":"","to_text":"氨产品","category":"Arrow"},
{"from":-4,"to":-10,"points":[-140,250,-130,250,200,250,200,165,200,80,200,70]}, {"from":-4,"to":-10,"points":[-140,250,-130,250,200,250,200,165,200,80,200,70],"category":"Arrow"},
{"from":-4,"to":-2,"points":[-170,220,-170,210,-170,197,-20,197,-20,150,-20,140]}, {"from":-4,"to":-2,"points":[-170,220,-170,210,-170,197,-20,197,-20,150,-20,140],"category":"Arrow"},
{"from":-10,"to":-2,"points":[150,20,140,20,125,20,125,20,110,20,100,20]}, {"from":-10,"to":-2,"points":[150,20,140,20,125,20,125,20,110,20,100,20],"category":"Flow"},
{"from":-8,"to":-2,"points":[-170,-25,-170,-35,-170,-166,-20,-166,-20,-110,-20,-100]}, {"from":-8,"to":-2,"points":[-170,-25,-170,-35,-170,-166,-20,-166,-20,-110,-20,-100],"category":"Flow"},
{"from":-1,"points":[-135,370,-125,370,-97.3671875,370,-97.3671875,370,-69.734375,370,-59.734375,370]} {"from":-1,"points":[-135,370,-125,370,-97.3671875,370,-97.3671875,370,-69.734375,370,-59.734375,370],"category":"Arrow"}
]} ]}
); );
} }
...@@ -432,6 +436,7 @@ onMounted(() => { ...@@ -432,6 +436,7 @@ onMounted(() => {
initInfo(); initInfo();
importData(); importData();
changeData(); changeData();
animateFlow(myDiagram);
}) })
</script> </script>
......
src/kit/LinkTemplateKit.ts
import {GO} from './GOJSKit' import {GO} from './GOJSKit'
import go from 'gojs' import go from 'gojs'
import {log} from "util";
export var linkSelectionAdornmentTemplate = export var linkSelectionAdornmentTemplate =
GO(go.Adornment, "Link", GO(go.Adornment, "Link",
GO(go.Shape, GO(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry // isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 }, { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
new go.Binding("stroke").makeTwoWay()
) // use selection object's strokeWidth ) // use selection object's strokeWidth
); );
export function MultiArrowLink() { export function MultiArrowLink() {
go.Link.call(this); go.Link.call(this);
// return GO(go.Link, {stroke:"red"})
} }
go.Diagram.inherit(MultiArrowLink, go.Link); go.Diagram.inherit(MultiArrowLink, go.Link);
MultiArrowLink.prototype.makeGeometry = function() { MultiArrowLink.prototype.makeGeometry = function() {
...@@ -54,4 +55,33 @@ MultiArrowLink.prototype.makeGeometry = function() { ...@@ -54,4 +55,33 @@ MultiArrowLink.prototype.makeGeometry = function() {
fy = ay; fy = ay;
} }
return geo; return geo;
}; };
\ No newline at end of file
export var FlowLink =
GO(go.Link,{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpGap,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
// resegmentable: true,
},
new go.Binding("points", "points").makeTwoWay(),
GO(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'red'}),
GO(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'green',name:"FLOW", strokeDashArray: [10, 10]}),
GO(go.Shape, { toArrow: "Standard", stroke: null })
);
export function animateFlow(myDiagram:go.Diagram){
// if (myAnimation) myAnimation.stop();
// Animate the flow in the pipes
let myAnimation = new go.Animation();
myAnimation.easing = go.Animation.EaseLinear;
myDiagram.links.each(link => link.findObject("FLOW")?myAnimation.add(link.findObject("FLOW"), "strokeDashOffset", 20, 0): null);
myDiagram.links.each(link => console.log(link))
// Run indefinitely
myAnimation.runCount = Infinity;
myAnimation.start();
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment