logic-helper
Version:
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
1,112 lines (1,067 loc) • 46.9 kB
JavaScript
import '@/assets/go.js';
import {
ElMessage
} from 'element-plus'
import {
store
} from '../../common/js/app.js';
import Immutable from 'immutable';
export class Record {
constructor() {
this.records = [];
this.index = 0;
this.currentData = null
}
setData(data) {
data = Immutable.fromJS(data);
if (Immutable.is(this.currentData, data)) {
return;
}
if (this.index != this.records.length - 1) {
this.records = this.records.slice(0, this.index + 1);
}
this.records.push(Immutable.fromJS(data));
this.index = this.records.length - 1;
}
getData() {
this.currentData = this.records[this.index]
return this.currentData.toJS();
}
prev() {
if (this.index > 0) {
this.index--;
}
return this.getData();
}
next() {
if (this.index < this.records.length - 1) {
this.index++;
}
return this.getData();
}
}
const $ = go.GraphObject.make; // for conciseness in defining templates
// Define a function for creating a "port" that is normally transparent.
// The "name" is used as the GraphObject.portId,
// the "align" is used to determine where to position the port relative to the body of the node,
// the "spot" is used to control how links connect with the port and whether the port
// stretches along the side of the node,
// and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
const makePort = (name, align, spot, output, input) => {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return $(go.Shape, {
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: (e, port) => { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: (e, port) => port.fill = "transparent"
});
}
const invalidSymbol = /[`~!@#$^&*()=|{}´:;´,\[\].<>/?~！@#￥……&*（）——|\-{}【】‘；：”“´。，、？\.]/;
function textValidation(newstr, type, textBlock) {
let text = newstr.trim();
if (type == 'node') {
const nodes = Object.keys(store.model.nodes).map(id => store.model.nodes[id]).filter(item => {
return item.key != textBlock.part.data.key
}).map(item => item.text);
if (nodes.includes(text)) {
ElMessage({
showClose: true,
message: '节点不能重名',
type: 'error',
})
return false;
}
}
let errorMsg = '';
if (text.length < 1) {
errorMsg = '不能为空';
} else if (invalidSymbol.test(text)) {
errorMsg = '不能包含特殊字符';
}
if (errorMsg) {
ElMessage({
showClose: true,
message: errorMsg,
type: 'error',
})
}
return !errorMsg.length;
}
function textEdited(textBlock, oldText, newText) {
if (textValidation(newText, 'node', textBlock)) {
textBlock.diagram.startTransaction("change text");
const text = newText.trim().replace(invalidSymbol, '').replace(/\s+/g, '').replace(/[\r\n]/g, "");
textBlock.part.data.text = text;
textBlock.diagram.commitTransaction("change text");
} else {
textBlock.text = oldText;
}
}
function toggleTextBlock(textBlock, show = false) {
textBlock.visible = show!==false&&show!=='false';
}
function linkTextEdited(textBlock, oldText, newText) {
textBlock.diagram.startTransaction("change text");
var node = textBlock.part;
node.data.text = newText.trim().replace(/\s+/g, '').replace(/[\r\n]/g, "");
textBlock.diagram.commitTransaction("change text");
}
function nodeStyle(style={}) {
return [
// The Node.location comes from the "loc" property of the node data,
// converted by the Point.parse static method.
// If the Node.location is changed, it updates the "loc" property of the node data,
// converting back using the Point.stringify static method.
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
// the Node.location is at the center of each node
locationSpot: go.Spot.Center,
...style
}
];
}
function createContextMenuBtn(name, callback) {
const myDiagram = this;
return $("ContextMenuButton",
$(go.Panel, "Spot",
$(go.Shape, "Rectangle", {
desiredSize: new go.Size(100, 30),
fill: "#f5f5f5",
}),
$(go.TextBlock, name), {
click: (e, button) => {
const node = button.part.adornedPart;
if (node !== null) {
const transaction = `ctx menu btn ${name}`
myDiagram.startTransaction(transaction);
callback && callback(node, name);
myDiagram.commitTransaction(transaction);
}
}
}
),
);
}
export function createContextMenu(btnName, callback) {
const myDiagram = this;
if (typeof btnName == "string") {
btnName = [btnName];
}
if (Array.isArray(btnName)) {
return $("ContextMenu",
btnName.map(name => createContextMenuBtn.call(myDiagram, name, callback))
);
}
}
function createTextBlockBox(Block, boxStyle = {}) {
const blockStyle = {
row: 1,
column: 0,
columnSpan: 5,
margin: new go.Margin(0, 0, 10, 0),
...boxStyle,
font: "11pt sans-serif",
wrap: go.TextBlock.WrapFit,
editable: true, // by default newlines are allowed
minSize: new go.Size(100, 14)
}
return $(go.Panel, "Table", {
maxSize: new go.Size(150, NaN),
},
Block,
$(go.TextBlock, textStyle(), // the comments
blockStyle,
new go.Binding("text", 'caption').makeTwoWay(),
new go.Binding("stroke", "", function (...arg) {
const node = arg[1]
const {
isCaptionVisible,
isTextVisible,
caption
} = node.part.data;
toggleTextBlock(node, !!caption&&isCaptionVisible!==false)
//change margin of n
let margin = blockStyle.margin;
if(typeof margin == 'number'){
margin = new go.Margin(margin, margin, margin, margin)
}
if (isTextVisible !== false) {
margin.top= 0;
} else {
margin.top= 10;
}
node.margin = margin
}).ofObject(),
)
)
}
go.Shape.defineFigureGenerator("MagneticTape", function(shape, w, h) {
var geo = new go.Geometry();
var cpOffset = KAPPA * .5;
var radius = .5;
var fig = new go.PathFigure(.5 * w, h, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Bezier, 0, radius * h, (radius - cpOffset) * w, h,
0, (radius + cpOffset) * h));
fig.add(new go.PathSegment(go.PathSegment.Bezier, radius * w, 0, 0, (radius - cpOffset) * h,
(radius - cpOffset) * w, 0));
fig.add(new go.PathSegment(go.PathSegment.Bezier, w, radius * h, (radius + cpOffset) * w, 0,
w, (radius - cpOffset) * h));
fig.add(new go.PathSegment(go.PathSegment.Bezier, (radius + .1) * w, .9 * h, w, (radius + cpOffset) * h,
(radius + cpOffset) * w, .9 * h));
fig.add(new go.PathSegment(go.PathSegment.Line, w, .9 * h));
fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
fig.add(new go.PathSegment(go.PathSegment.Line, .5 * w, h));
geo.spot1 = new go.Spot(.15, .15);
geo.spot2 = new go.Spot(.85, .8);
return geo;
});
function defaultColor(horiz) { // a Binding conversion function
return horiz ? "rgba(255, 221, 51, 0.55)" : "rgba(51,211,229, 0.5)";
}
function defaultFont(horiz) { // a Binding conversion function
return horiz ? "bold 20px sans-serif" : "bold 16px sans-serif";
}
function makeLayout(horiz) { // a Binding conversion function
if (horiz) {
return new go.GridLayout(
{
wrappingWidth: Infinity, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4)
});
} else {
return new go.GridLayout(
{
wrappingColumn: 1, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4)
});
}
}
function finishDrop(e, grp) {
var ok = (grp !== null
? grp.addMembers(grp.diagram.selection, true)
: e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
if (!ok) e.diagram.currentTool.doCancel();
}
function highlightGroup(e, grp, show) {
if (!grp) return;
e.handled = true;
if (show) {
// cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
// instead depend on the DraggingTool.draggedParts or .copiedParts
var tool = grp.diagram.toolManager.draggingTool;
var map = tool.draggedParts || tool.copiedParts; // this is a Map
// now we can check to see if the Group will accept membership of the dragged Parts
if (grp.canAddMembers(map.toKeySet())) {
grp.isHighlighted = true;
return;
}
}
grp.isHighlighted = false;
}
function textStyle() {
return {
font: "bold 11pt Lato, Helvetica, Arial, sans-serif",
stroke: "#F8F8F8"
}
}
var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
go.Shape.defineFigureGenerator("HalfEllipse", function(shape, w, h) {
return new go.Geometry()
.add(new go.PathFigure(0, 0, true)
.add(new go.PathSegment(go.PathSegment.Bezier, w, .5 * h, KAPPA * w, 0, w, (.5 - KAPPA / 2) * h))
.add(new go.PathSegment(go.PathSegment.Bezier, 0, h, w, (.5 + KAPPA / 2) * h, KAPPA * w, h).close()))
.setSpots(0, 0.156, 0.844, 0.844);
});
go.Shape.defineFigureGenerator("Repeat", function(shape, w, h) {
var geo = new go.Geometry();
var fig = new go.PathFigure(w * 0, h * .45, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, w * .25, h * 0));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .50, h * .45));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .30, h * .45));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .30, h * .90));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .60, h * .90));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .65, h * 1));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .20, h * 1));
fig.add(new go.PathSegment(go.PathSegment.Line, w * .20, h * .45).close());
var fig2 = new go.PathFigure(w * 1, h * .55, true); // is filled in our not
geo.add(fig2);
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .75, h * 1));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .50, h * .55));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .70, h * .55));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .70, h * .10));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .40, h * .10));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .35, h * 0));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .80, h * 0));
fig2.add(new go.PathSegment(go.PathSegment.Line, w * .80, h * .55).close());
return geo;
});
go.Shape.defineFigureGenerator('Interrupt', (shape, w, h) => {
const geo = new go.Geometry();
const fig = new go.PathFigure(w, .5 * h, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, 0, h));
fig.add(new go.PathSegment(go.PathSegment.Line, 0, 0));
fig.add(new go.PathSegment(go.PathSegment.Line, w, .5 * h));
const fig2 = new go.PathFigure(w, .5 * h, false);
geo.add(fig2);
fig2.add(new go.PathSegment(go.PathSegment.Line, w, h));
const fig3 = new go.PathFigure(w, .5 * h, false);
geo.add(fig3);
fig3.add(new go.PathSegment(go.PathSegment.Line, w, 0));
geo.spot1 = new go.Spot(0, .25);
geo.spot2 = new go.Spot(.5, .75);
return geo;
});
go.Shape.defineFigureGenerator("Delay", "HalfEllipse");
go.Shape.defineFigureGenerator("Procedure", function (shape, w, h) {
var geo = new go.Geometry();
var param1 = shape ? shape.parameter1 : NaN;
// Distance of left and right lines from edge
if (isNaN(param1)) param1 = .1;
var fig = new go.PathFigure(0, 0, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, w, 0));
fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
var fig2 = new go.PathFigure((1 - param1) * w, 0, false);
geo.add(fig2);
fig2.add(new go.PathSegment(go.PathSegment.Line, (1 - param1) * w, h));
fig2.add(new go.PathSegment(go.PathSegment.Move, param1 * w, 0));
fig2.add(new go.PathSegment(go.PathSegment.Line, param1 * w, h));
//??? geo.spot1 = new go.Spot(param1, 0);
//??? geo.spot2 = new go.Spot(1 - param1, 1);
return geo;
});
go.Shape.defineFigureGenerator('Parallelogram1', (shape, w, h) => {
let param1 = shape ? shape.parameter1 : NaN; // indent's x distance
if (isNaN(param1)) param1 = 10;
else if (param1 < -1) param1 = -w;
else if (param1 > 1) param1 = w;
const indent = Math.abs(param1);
if (param1 === 0) {
const geo = new go.Geometry(go.Geometry.Rectangle);
geo.startX = 0;
geo.startY = 0;
geo.endX = w;
geo.endY = h;
return geo;
} else {
const geo = new go.Geometry();
if (param1 > 0) {
geo.add(new go.PathFigure(indent, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w - indent, h))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
} else { // param1 < 0
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w - indent, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, indent, h).close()));
}
if (indent < w / 2) {
geo.setSpots(indent / w, 0, (w - indent) / w, 1);
}
return geo;
}
});
export function createTemplate(type = '') {
switch (type) {
case 'Start':
return $(go.Node, "Table", nodeStyle(),
$(go.Panel, "Spot",
$(go.Shape, "Circle", {
desiredSize: new go.Size(60, 60),
fill: "#282c34",
stroke: "#09d3ac",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "isHighlighted", function (h) {
return h ? "#DC3C00" : "#09d3ac";
})
.ofObject(),
),
$(go.TextBlock, "Start", textStyle(),
new go.Binding("text"),
//hightlight the start node
new go.Binding("stroke", "isHighlighted", function (s) {
return s ? "#DC3C00" : "#fff";
}).ofObject(),
),
),
// three named ports, one on each side except the top, all output only:
makePort("L", go.Spot.Left, go.Spot.Left, true, false),
makePort("R", go.Spot.Right, go.Spot.Right, true, false),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
);
case 'End':
return $(go.Node, "Table", nodeStyle(),
$(go.Panel, "Spot",
$(go.Shape, "Circle", {
desiredSize: new go.Size(60, 60),
fill: "#282c34",
stroke: "#DC3C00",
strokeWidth: 3.5
},
// highlight the end node
new go.Binding("stroke", "isHighlighted", function (s) {
return s ? "#DC3C00" : "#DC3C00";
}).ofObject(),
),
$(go.TextBlock, "End", textStyle(),
new go.Binding("text"),
//hightlight the end node
new go.Binding("stroke", "isHighlighted", function (s) {
return s ? "#DC3C00" : "#fff";
}).ofObject()
)
),
// three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, false, true),
makePort("R", go.Spot.Right, go.Spot.Right, false, true)
);
case 'Comment':
return $(go.Node, "Auto", nodeStyle(),
$(go.Shape, "File", {
fill: "#282c34",
stroke: "#DEE0A3",
strokeWidth: 3
}),
$(go.TextBlock, textStyle(), {
margin: 8,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
textEdited
},
new go.Binding("text").makeTwoWay())
// no ports, because no links are allowed to connect with a comment
);
case 'Group':
return new go.Group("Auto", {
locationSpot: go.Spot.Center,
background: "blue",
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
})
.bind(new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify))
.bind(new go.Binding("background", "isHighlighted", h => h ? "rgba(255,0,0,0.2)" : "transparent").ofObject())
.add(new go.Shape("Rectangle",
{ fill: null, stroke: defaultColor(false), fill: defaultColor(false), strokeWidth: 2 ,
locationSpot: go.Spot.Center,})
.bind("stroke", "horiz", defaultColor)
.bind("fill", "horiz", defaultColor))
.add(
new go.Panel("Vertical") // title above Placeholder
.add(new go.Panel("Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: defaultColor(false) })
.bind("background", "horiz", defaultColor)
.add(go.GraphObject.make("SubGraphExpanderButton", { alignment: go.Spot.Center, margin: 5 }))
.add(new go.TextBlock(
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: defaultFont(false),
opacity: 0.95, // allow some color to show through
stroke: "#404040"
})
.bind("font", "horiz", defaultFont)
.bind("text", "text", null, null)) // `null` as the fourth argument makes this a two-way binding
) // end Horizontal Panel
.add(new go.Placeholder({ padding: 5, alignment: go.Spot.Center }))
); // end Vertical Panel
case 'Repeat':
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Repeat", {
fill: "#282c34",
stroke: '#DC3C00',
strokeWidth: 3.5,
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled,
}, n) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#DC3C00";
})
.ofObject(),
),
//################# TextBlock #################
createTextBlockBox($(go.TextBlock, textStyle(), {
row: 0,
margin: new go.Margin(5, 10, 5, 10),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
}, //hightlight the end node
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#fff";
}).ofObject(),
new go.Binding("text", '', function ({
isTextVisible = true
}, n) {
toggleTextBlock(n, isTextVisible)
return n.part.data.text
}).makeTwoWay()))
//################# TextBlock #################
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
)
case 'Conditional':
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Diamond", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled,
}, n) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
})
.ofObject(),
),
//################# TextBlock #################
createTextBlockBox($(go.TextBlock, textStyle(), {
row: 0,
margin: 2,
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
}, //hightlight the end node
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#fff";
}).ofObject(),
new go.Binding("text", '', function ({
isTextVisible = true
}, n) {
toggleTextBlock(n, isTextVisible)
return n.part.data.text
}).makeTwoWay()))
//################# TextBlock #################
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
)
case 'Link':
return $(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: (e, link) => link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)",
mouseLeave: (e, link) => link.findObject("HIGHLIGHT").stroke = "transparent",
selectionAdorned: false
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the highlight shape, normally transparent
{
isPanelMain: true,
strokeWidth: 3,
stroke: "transparent",
name: "HIGHLIGHT",
}),
$(go.Shape, // the link path shape
{
isPanelMain: true,
stroke: "gray",
strokeWidth: 2
},
new go.Binding("stroke", "isSelected", sel => sel ? "dodgerblue" : "gray").ofObject(),
// when highlighted, draw as a thick red line
new go.Binding("stroke", "isHighlighted", function (h) {
return h ? "#DC3C00" : "gray";
})
.ofObject(), ),
$(go.Shape, // the arrowhead
{
toArrow: "standard",
strokeWidth: 3,
stroke: "gray",
fill: "gray"
},
// when highlighted, draw as a thick red line
new go.Binding("fill", "isHighlighted", function (h) {
return h ? "#DC3C00" : "#00A9C9";
})
.ofObject(), ),
$(go.Panel, "Auto", // the link label, normally not visible
{
visible: false,
name: "LABEL",
segmentIndex: 2,
segmentFraction: 0.5
},
new go.Binding("visible", "visible").makeTwoWay(),
$(go.Shape, "RoundedRectangle", // the label shape
{
fill: "#F8F8F8",
strokeWidth: 0
}),
$(go.TextBlock, "Yes", // the label
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true,
},
new go.Binding("text").makeTwoWay())
)
);
case "Input":
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Parallelogram1", {
fill: "#282c34",
stroke: "orange",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "orange";
})
.ofObject(),
new go.Binding("figure", "figure")),
//################# TextBlock #################
createTextBlockBox($(go.TextBlock, textStyle(), {
textEdited,
margin: new go.Margin(8, 10, 8, 10),
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
}, //hightlight the end node
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#fff";
}).ofObject(),
new go.Binding("text", '', function ({
isTextVisible = true
}, n) {
toggleTextBlock(n, isTextVisible)
return n.part.data.text
}).makeTwoWay()), {
margin: new go.Margin(0, 0, 10, 0),
})
//################# TextBlock #################
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
);
case "Subroutine":
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Procedure", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
})
.ofObject(),
new go.Binding("figure", "figure")),
createTextBlockBox($(go.TextBlock, {
...textStyle(),
margin: new go.Margin(10, 20, 10, 20),
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
}, //hightlight the end node
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#fff";
}).ofObject(),
new go.Binding("text", '', function ({
isTextVisible = true
}, n) {
toggleTextBlock(n, isTextVisible)
return n.part.data.text
}).makeTwoWay()), {
margin: new go.Margin(0, 20, 10, 20),
})
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
);
case "Delay":
return $(go.Node, "Table", nodeStyle(),
$(go.Panel, "Auto",
$(go.Shape, "Delay", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
}
).ofObject(),
new go.Binding("figure", "figure")),
createTextBlockBox($(go.TextBlock, textStyle(), {
margin: 5,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
},
new go.Binding("text").makeTwoWay()), {
margin: new go.Margin(0, 0, 10, 0),
})
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
);
case "Sequential":
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "MagneticTape", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
}
).ofObject(),
new go.Binding("figure", "figure")),
createTextBlockBox($(go.TextBlock, textStyle(), {
margin: new go.Margin(2, 0, 2, 5),
maxSize: new go.Size(80, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
},
new go.Binding("text").makeTwoWay()), {
margin: new go.Margin(0, 0, 10, 0),
})
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
);
case "Interrupt":
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Interrupt", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
}
).ofObject(),
new go.Binding("figure", "figure")
),
createTextBlockBox($(go.TextBlock, textStyle(), {
margin: new go.Margin(2, 0, 2, 5),
maxSize: new go.Size(80, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
},
new go.Binding("text").makeTwoWay()),
)
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, true, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, true)
);
default:
return $(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "#282c34",
stroke: "#00A9C9",
strokeWidth: 3.5
},
// when highlighted, draw as a thick red line
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#00A9C9";
})
.ofObject(),
new go.Binding("figure", "figure")),
createTextBlockBox($(go.TextBlock, textStyle(), {
margin: 5,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited
}, //hightlight the end node
new go.Binding("stroke", "", function ({
isHighlighted,
isEnabled
}) {
if (!isEnabled&&!isHighlighted) {
return 'gray'
}
return isHighlighted ? "#DC3C00" : "#fff";
}).ofObject(),
new go.Binding("text", '', function ({
isTextVisible = true
}, n) {
toggleTextBlock(n, isTextVisible)
return n.part.data.text
}).makeTwoWay()), {
margin: new go.Margin(0, 10, 10, 10),
})
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
)
}
}
function getLastSelections(e) {
let selections = e.diagram.selection;
let arr = selections.toArray();
return arr.pop();
}
export const allEvents = [
'Modified',
//重置link
'LinkRelinked',
//串接link
'LinkDrawn',
//复制
'ClipboardChanged',
//粘贴
'ClipboardPasted',
//点击事件
'ObjectSingleClicked',
//右键单击
'ObjectContextClicked',
//拖拽添加
'ExternalObjectsDropped',
// 改变选择后事件
'ChangedSelection',
//失去焦点
'LostFocus',
]
export const gojsEventParser = (e, chart) => {
const event = {
name: e.name,
diagram: e.diagram,
subject: e.subject,
parameter: e.parameter,
data: {},
}
let target = e.subject ? e.subject : getLastSelections(e);
if (target) {
event.target = target.part ? target.part : getLastSelections(e);
try {
event.data = event.target ?.data || {};
event.data.category = event.target ?.category;
if (event.data.key !== undefined) {
event.el = chart.getElementById(event.data.key)[getEleType(event.data)];
}
} catch (e) {
console.error(e, event)
}
}
return event;
}
export function getFormatData(el) {
if (!el) {
return null;
}
return {
...el.data,
category: el.category,
type: el.type.name,
};
}
export function getEleType(data) {
if (data.from && data.to && data.fromPort && data.toPort) {
return 'link';
}
return 'node';
}
export const transformer = (data, store) => {
if (data) {
const nodeMap = {};
const nodes = {};
const nodelist = data.nodeDataArray.filter(item => {
return item.category != 'Comment'
}).map(item => {
nodeMap[item.category || 'Step'] = nodeMap[item.category || 'Step'] || [];
nodeMap[item.category || 'Step'].push(item.text)
nodes[item.key] = item;
return `${item.text}`
});
const linklist = data.linkDataArray.map(item => {
const fromNode = nodes[item.from];
const toNode = nodes[item.to];
return `${fromNode.text}>${item.text||''}>${toNode.text}`
})
return {
topo: {
link: linklist,
node: nodelist,
topo: {
name: store.currentTopo.config.name,
group: store.currentTopo.config.group
},
},
config: {
data
},
}
}
}
function formateName(name) {
if (name.trim() === '???') {
return 'Conditional'
}
return name.trim().replace(/\s+/g, '').replace(/[`~!@#$^&*()=|{}´:;´,\[\].<>/?~！@#￥……&*（）——|{}【】‘；：”“´。，、？\.]/g, '');
}
export function formateModelData(data) {
if (data) {
data.nodeDataArray.forEach(item => {
item.text = formateName(item.text);
item.isCaptionVisible = item.isCaptionVisible === undefined ? true : item.isCaptionVisible;
item.isTextVisible = item.isTextVisible === undefined ? true : item.isTextVisible;
})
data.linkDataArray.forEach(item => {
if (typeof item.text == 'string') {
item.text = formateName(item.text || '');
}
})
}
return data;
}