Skip to content

V
vue-gojs
Commit c3433f26 by 吴斌
Options

update：动态数据，修改阈值。

parent 1f6bb6b6
Showing with 164 additions and 127 deletions
README.md
# Vue-gojs
使用 node 版本为 [v18.18.0](https://nodejs.org/download/release/v18.18.0/node-v18.18.0-win-x64.zip)
项目启动
```bash
npm install
npm run dev
......
src/App.vue
<template>
<div class="space-y-4 h-90vh">
<div class="flex h-full space-x-4">
<div class="w-[400px] h-full border-1 border-black rounded border-solid">
<el-collapse>
<el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name>
<SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse>
</el-collapse-item>
</el-collapse>
</div>
<div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></div>
<div class="w-[400px] h-full border-1 border-black rounded border-solid">
<div id="myInfo"></div>
</div>
</div>
<div class="flex">
<div class="w-full"></div>
<el-button @click="importData">导入</el-button>
<el-button type="primary" @click="exportData">导出</el-button>
</div>
</div>
<div class="space-y-4 h-90vh">
<div class="flex h-full space-x-4">
<div class="w-[400px] h-full border-1 border-black rounded border-solid">
<el-collapse>
<el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name>
<SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse>
</el-collapse-item>
</el-collapse>
</div>
<div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></div>
<div class="w-[400px] h-full border-1 border-black rounded border-solid flex-col">
<div id="myInfo"> </div>
</div>
</div>
<div class="flex">
<div class="w-full"></div>
<el-button @click="importData">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import go from "gojs";
import * as go from "gojs";
import SourceCollapse from "./components/source-panel/source-collapse.vue";
import {onMounted, ref} from "vue";
import {picCategory} from "./kit/ModelData.ts";
import {$, makePort, showSmallPorts} from "./kit/GOJSKit.ts";
import {GO, makePort, showSmallPorts} from "./kit/GOJSKit.ts";
import {
makeKitTopRotatingTool,
nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
......@@ -38,14 +38,17 @@ import {Inspector} from "./kit/DataInspector.ts";
const categoryList: any = ref(null)
let myDiagram: any = null;
let inspector:any = null
let inspector: any = null
let inspector2: any = null
function initPalette(){
let changeTimer: any = null
function initPalette() {
categoryList.value = picCategory
}
function initDiagram(){
myDiagram = $(go.Diagram, "myDiagram", {
function initDiagram() {
myDiagram = GO(go.Diagram, "myDiagram", {
initialContentAlignment: go.Spot.Center,
//允许撤销
"undoManager.isEnabled": true,
......@@ -53,15 +56,14 @@ function initDiagram(){
"grid.visible": true,
//滚轮缩放
"allowZoom": true,
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true,
//旋转点相关
"rotatingTool": $(makeKitTopRotatingTool()),
"rotatingTool": GO(makeKitTopRotatingTool()),
"rotatingTool.handleAngle": 270,
"rotatingTool.handleDistance": 50,
"rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15,
//连接线相关
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true,
"draggingTool.isGridSnapEnabled": true,
"linkingTool.isUnconnectedLinkValid": true,
......@@ -69,50 +71,68 @@ function initDiagram(){
"relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
GO(go.Shape, "Diamond", {segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred"}),
"relinkingTool.toHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
GO(go.Shape, "Diamond", {segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato"}),
"linkReshapingTool.handleArchetype":
$(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, "Diamond", {desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue"}),
//调整大小
"resizingTool.handleArchetype":
$(go.Shape, "Rectangle", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, "Rectangle", {desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue"}),
"resizingTool.isGridSnapEnabled": true,
//tooltip
"toolManager.hoverDelay": 200 ,
})
myDiagram.nodeTemplate = $(go.Node, "Auto",
myDiagram.nodeTemplate = GO(go.Node, "Auto",
new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{ resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
{resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
{rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot: go.Spot.Center},
new go.Binding('angle').makeTwoWay(),
$(go.Picture, {name:"view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill},
GO(go.Picture, {name: "view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill},
new go.Binding("source", "img")),
$(go.TextBlock, {margin: 4, text:"", editable:true}, new go.Binding("text", "name").makeTwoWay()),
// GO(go.TextBlock, {margin: 4, text: "", editable: true},
// new go.Binding("text", "name").makeTwoWay(),
// ),
GO(go.TextBlock, {margin: 4, text: "", editable: true},
new go.Binding("text", "press"),
new go.Binding("stroke", "",
function(data,_node) { return data.press>data.pressLimit?"red":"green"}
)
),
// four small named ports, one on each side:
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function(e, node) { showSmallPorts(node, true); console.log(myDiagram.model.toJson())},
mouseLeave: function(e, node) { showSmallPorts(node, false); },
mouseEnter: function (_e, node) {
showSmallPorts(node, true);
console.log(myDiagram.model.toJson())
},
mouseLeave: function (_e, node) {
showSmallPorts(node, false);
},
},
{
toolTip:GO("ToolTip", GO(go.TextBlock, {margin: 4}, new go.Binding("text", "press")))
}
);
myDiagram.linkTemplate = $(go.Link,
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{ routing: go.Link.AvoidsNodes, corner: 5, curve: go.Link.JumpOver, toShortLength: 4 },
myDiagram.linkTemplate = GO(go.Link,
{selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
{relinkableFrom: true, relinkableTo: true, reshapable: true},
{routing: go.Link.AvoidsNodes, corner: 10, curve: go.Link.JumpOver, toShortLength: 4},
new go.Binding("points").makeTwoWay(),
new go.Binding("stroke").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
GO(go.Shape, // the link path shape
{isPanelMain: true, strokeWidth: 2}),
GO(go.Shape, // the arrowhead
{toArrow: "Standard", stroke: null}),
GO(go.Panel, "Auto",
// new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "transparent", stroke: null }),
$(go.TextBlock,
GO(go.Shape, "RoundedRectangle", // the link shape
{fill: "transparent", stroke: null}),
GO(go.TextBlock,
{
textAlign: "center",
font: "10pt",
......@@ -124,40 +144,64 @@ function initDiagram(){
)
)
);
myDiagram.addDiagramListener("Modified", function(e) {
if (myDiagram.isModified) {
console.log(myDiagram.model.toJson())
}
});
}
function initInfo(){
function initInfo() {
inspector = new Inspector('myInfo', myDiagram,
{
includesOwnProperties: false,
properties: {
// key would be automatically added for nodes, but we want to declare it read-only also:
"key": { readOnly: true, show: Inspector.showIfPresent },
// fill and stroke would be automatically added for nodes, but we want to declare it a color also:
"fill": { show: Inspector.showIfPresent, type: 'color' },
"stroke": { show: Inspector.showIfPresent, type: 'color' },
"name":{show:Inspector.showIfPresent, readOnly:true},
"press":{show:Inspector.showIfPresent, readOnly:true},
"img":{show:Inspector.showIfPresent, readOnly:true},
"category":{show:Inspector.showIfPresent, readOnly:true},
"loc": {show: Inspector.showIfPresent},
"pressLimit": {show: Inspector.showIfPresent},
}
});
}
function importData() {
myDiagram.model = go.Model.fromJson(
{ "class": "GraphLinksModel",
"nodeDataArray": [
{"name":"valve2","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-1,"press":"120", "pressLimit": 50},
{"name":"valve3","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-2,"press":"121", "pressLimit": 50},
{"name":"valve4","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-3,"press":"122", "pressLimit": 50},
{"name":"valve5","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-4,"press":"123", "pressLimit": 50},
],
"linkDataArray": [
{'from': -1, 'to': -2},
{'from': -1, 'to': -3},
{'from': -1, 'to': -4},
]}
);
}
function importData(){
console.log("import");
myDiagram.model = go.Model.fromJson({ "class": "GraphLinksModel",
"nodeDataArray": [{"name":"valve2","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-1,"loc":"-198.477783203125 -137.25607910156253","size":"190 230"}],
"linkDataArray": []});
function exportData() {
console.log(myDiagram.model.toJson())
}
function exportData(){
console.log("export");
function changePress(){
let model = myDiagram.model
changeTimer = setInterval(()=>{
let nodeDataArray = myDiagram.model.nodeDataArray
nodeDataArray.forEach((item:any)=>{
model.set(item, "press", Math.floor(Math.random()*100))
})
console.log(myDiagram.model.nodeDataArray)
},1000)
}
onMounted(()=>{
initPalette();
initDiagram();
initInfo();
onMounted(() => {
initPalette();
initDiagram();
initInfo();
importData();
changePress();
// changePress2();
})
</script>
\ No newline at end of file
src/components/source-panel/source-collapse.vue
......@@ -5,7 +5,7 @@
import { onMounted, ref } from 'vue';
import go from 'gojs'
import {$} from '../../kit/GOJSKit'
import {GO} from '../../kit/GOJSKit'
import { SourcePictureNodeTemplate} from '../../kit/NodeTemplateKit';
import {picModel} from '../../kit/ModelData.ts'
......@@ -22,8 +22,8 @@ var sourcePalette: any = ref(null)
var sourceModel:any = ref(null)
function init(){
sourcePalette = $(go.Palette, props.category, {
layout: $(go.GridLayout, { alignment: go.GridLayout.Location }),
sourcePalette = GO(go.Palette, props.category, {
layout: GO(go.GridLayout, { alignment: go.GridLayout.Location }),
nodeTemplate: SourcePictureNodeTemplate,
allowZoom: false
})
......
src/kit/GOJSKit.ts
import go from 'gojs';
export var $ = go.GraphObject.make;
export var GO = go.GraphObject.make;
/**
* 用于连接的锚点效果
......@@ -9,8 +9,8 @@ export var $ = go.GraphObject.make;
* @param {Boolean} output 是否可以从此锚点连接出去
* @param {Boolean} input 是否可以连接到此锚点
*/
export function makePort(name, spot, output, input) {
return $(go.Shape, "Circle",
export function makePort(name:any, spot:any, output:any, input:any) {
return GO(go.Shape, "Circle",
{
fill: null,
stroke: null,
......@@ -28,10 +28,11 @@ export function makePort(name, spot, output, input) {
* @param {Node} node 节点
* @param {Boolean} show 是否展示
*/
export function showSmallPorts(node, show) {
node.ports.each(function(port) {
export function showSmallPorts(node:any, show:any) {
node.ports.each(function(port:any) {
if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
}
\ No newline at end of file
}
src/kit/LinkTemplateKit.ts
import {$} from './GOJSKit'
import {GO} from './GOJSKit'
import go from 'gojs'
export var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link",
$(go.Shape,
GO(go.Adornment, "Link",
GO(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
new go.Binding("stroke").makeTwoWay()
......
src/kit/NodeTemplateKit.ts
import {$, makePort, showSmallPorts} from './GOJSKit.js';
import {GO, makePort, showSmallPorts} from './GOJSKit.js';
import go from 'gojs';
// 节点选中时的边框效果
export var nodeSelectionAdornmentTemplate =
$(go.Adornment, "Auto",
$(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
$(go.Placeholder)
GO(go.Adornment, "Auto",
GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
GO(go.Placeholder)
);
// 表示节点旋转的锚点效果
export const makeKitTopRotatingTool = () => (
class KitTopRotatingTool extends go.RotatingTool {
updateAdornments(part) {
updateAdornments(part: any) {
go.RotatingTool.prototype.updateAdornments.call(this, part)
const adornment = part.findAdornment('Rotating');
if (adornment !== null) {
adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)) // above middle top
}
}
//动一下就是 90 度
// rotate(newangle) {
// go.RotatingTool.prototype.rotate.call(this, newangle + 90)
// }
}
)
export var nodeRotateAdornmentTemplate =
$(go.Adornment,
GO(go.Adornment,
{ locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
$(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
GO(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
);
// 可以调整节点大小的锚点效果
export var nodeResizeAdornmentTemplate =
$(go.Adornment, "Spot",
GO(go.Adornment, "Spot",
{ locationSpot: go.Spot.Right },
$(go.Placeholder),
$(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
GO(go.Placeholder),
GO(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
GO(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
);
export var SourcePictureNodeTemplate =
$(go.Node, "Vertical",
$(go.Picture,
GO(go.Node, "Vertical",
GO(go.Picture,
{ width:80,height:80},
new go.Binding("source", "img")
),
$(go.TextBlock,
GO(go.TextBlock,
{ margin: 8 ,text: "123"},
new go.Binding("text", "name"))
)
export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
export var DiagramPictureNodeTemplate = GO(go.Node, "Spot",
new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{ resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
{resizable: true, resizeObjectName: "view"},
new go.Binding('angle').makeTwoWay(),
$(go.Panel, "Vertical",
GO(go.Panel, "Vertical",
{name:"PANEL", cursor: "pointer", background: "lightblue"},
$(go.Panel, "Viewbox",{name:"view", viewboxStretch: go.GraphObject.Uniform},
GO(go.Panel, "Viewbox",{name:"view", viewboxStretch: go.GraphObject.Uniform},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Picture, new go.Binding("source", "img")),
GO(go.Picture, new go.Binding("source", "img")),
),
$(go.TextBlock, {margin: 4, text:"", editable:true, background:"green", alignment:go.Spot.Bottom, alignmentFocus:go.Spot.Top}, new go.Binding("text", "name").makeTwoWay()),
GO(go.TextBlock, {margin: 4, text:"", editable:true, background:"green", alignment:go.Spot.Bottom, alignmentFocus:go.Spot.Top}, new go.Binding("text", "name").makeTwoWay()),
),
// four small named ports, one on each side:
makePort("T", go.Spot.Top, true, true),
......@@ -78,8 +74,8 @@ export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function(e, node) { showSmallPorts(node, true); console.log(myDiagram.model.toJson())},
mouseLeave: function(e, node) { showSmallPorts(node, false); }
mouseEnter: function(_e, node) { showSmallPorts(node, true);},
mouseLeave: function(_e, node) { showSmallPorts(node, false); }
}
);
src/pages/index.vue deleted 100644 → 0
<template>
</template>
<script setup lang="ts">
</script>
\ 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