Defining GoJS diagram for React - javascript

I am having a problem about gojs diagram in react. We define the variable myDiagram inside the init() function where the diagram is created.
function initDiagram() {
const $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, {
initialAutoScale: go.Diagram.Uniform,
"clickCreatingTool.archetypeNodeData": {
text: "new node",
color: "lightblue",
},
model: $(go.GraphLinksModel, {
linkKeyProperty: "key",
}),
nodeSelectionAdornmentTemplate: $(
go.Adornment,
"Auto",
{ layerName: "Grid" },
$(go.Shape, "Circle", { fill: "yellow", stroke: null }),
$(go.Placeholder, { margin: 2 })
),
layout: $(GenogramLayout, {
direction: 90,
layerSpacing: 30,
columnSpacing: 10,
}),
});
...
}
But we cannot access this variable outside of the init() function. I created a button to add nodes outside the diagram. What I want is to add a new node with myDiagram.model.addNodeData() when I press the button. But when it runs, I get the error myDiagram is not defined.
When I define the myDiagram variable outside of the init() function, I get the error Uncaught TypeError: Cannot read properties of undefined (reading 'model').
const App = () => {
var myDiagram;
function initDiagram() {
const $ = go.GraphObject.make;
myDiagram = $(go.Diagram, {
initialAutoScale: go.Diagram.Uniform,
"clickCreatingTool.archetypeNodeData": {
text: "new node",
color: "lightblue",
},
model: $(go.GraphLinksModel, {
linkKeyProperty: "key",
}),
nodeSelectionAdornmentTemplate: $(
go.Adornment,
"Auto",
{ layerName: "Grid" },
$(go.Shape, "Circle", { fill: "yellow", stroke: null }),
$(go.Placeholder, { margin: 2 })
),
layout: $(GenogramLayout, {
direction: 90,
layerSpacing: 30,
columnSpacing: 10,
}),
});
...
}
}
return(
...
<ReactDiagram
initDiagram={initDiagram}
divClassName="diagram-component"
onModelChange={handleModelChange}
/>
...
);
The init() function is called when the page is loaded. But I guess I am getting this error because myDiagram is defined outside and myDiagram.model is undefined inside the buttons before the init() function is called.
Where and how do I define it to access myDiagram.model outside of the diagram?
Thanks

Related

Apexcharts cursor pointer

I used apexcharts.js for making chartbar on js. So i want to change cursor to pointer. help please! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
my-code!
var options = {
series: [{
name: 'series1',
data: [60, 85, 75, 120, 100, 109, 97]
}],
toolbar: {
show: false,
},
chart: {
height: 350,
type: 'area',
fontFamily: 'Proxima Nova',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I had encountered the same problem. I will present you two solutions:
1st method : Found on Github
You can set the cursor to point with:
chart: {
...
events: {
dataPointMouseEnter: function(event) {
event.path[0].style.cursor = "pointer";
}
}
}
See more details in this github link : https://github.com/apexcharts/apexcharts.js/issues/1466
2nd method : My own method
You can target the class name of the apexchart component via Inspector, then at the code level add the following property to this class :
cursor: pointer
Example :
// Change cursor on hover
.apexcharts-pie {
cursor: pointer;
}
I had same problem. Here is two solutions:
chart: {
width: 320,
type: ...,
events: {
dataPointMouseEnter: function(event) {
event.target.style.cursor = "pointer";
// or
event.fromElement.style.cursor = "pointer";
}
},
}

Nivo bar chart calling label function hundreds of times

I'm using Nivo bar to represent a user's progress on a budget. I've normalized the data by dividing the category balance by the category goal. Example data.
[{
"category": "Gas",
"budget": 0.24,
"over_budget": 0.0
},
{
"category": "Groceries",
"budget": 1.0,
"over_budget": 0.26
}]
I don't want these values to be used as the label on the chart. I plan to use the actual balance value as the label. I have an endpoint that will return the balance for a category and have attempted the following to use that value:
<ResponsiveBar
...
label={d => this.getDollarAmount(d.value)}
...
>
With the function POC as:
getDollarAmount(value) {
console.log("hitting getDollarAmount")
return 1
};
The log message gets logged 500+ times. My expectation would be that the function would only be hit once for each bar in the chart.
I'm still learning react so this could be something obvious. Thanks in advance!
EDIT - Here's the entire BarChart component:
import axios from 'axios';
import React, { Component } from "react";
import { ResponsiveBar } from '#nivo/bar'
// Nivo theming
const theme = {
axis: {
ticks: {
line: {
stroke: "#e9ecee",
strokeWidth: 40
},
text: {
// fill: "#919eab",
fill: "black",
fontFamily: "BlinkMacSystemFont",
fontSize: 16
}
}
},
grid: {
line: {
stroke: "#e9ecee",
strokeWidth: 5
}
},
legends: {
text: {
fontFamily: "BlinkMacSystemFont"
}
}
};
let budgetStatusAPI = 'http://127.0.0.1:8000/api/budget_status/?auth_user=1&month=2020-02-01';
class BarChart extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
this.getDollarAmount = this.getDollarAmount.bind(this);
}
componentDidMount() {
console.log("component did mount")
axios.get(budgetStatusAPI).then(response => {
this.setState({
data: response.data
}, function () {
console.log(this.state.data);
})
});
}
componentDidUpdate() {
console.log("component did update")
}
getDollarAmount(value) {
console.log("hitting getDollarAmount")
console.log(value)
return 1
};
render() {
const hard_data = [
{
"category": "Groceries",
"budget_status": 1.0,
"over_budget": .26,
},
{
"category": "Gas",
"budget_status": .24,
"over_budget": 0.0,
}]
return(
<ResponsiveBar
maxValue={1.5}
markers={[
{
axis: 'x',
value: 1,
lineStyle: { stroke: 'rgba(0, 0, 0, .35)', strokeWidth: 2 },
legend: 'Goal',
legendOrientation: 'horizontal',
legendPosition: 'top'
},
]}
enableGridX={false}
gridXValues={[1]}
enableGridY={false}
data={this.state.data}
// data={hard_data}
keys={['budget_status', 'over_budget']}
indexBy="category"
margin={{ top: 25, right: 130, bottom: 50, left: 125 }}
padding={0.3}
layout="horizontal"
colors={{ scheme: 'set2' }}
theme={theme}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
axisBottom={null}
label={d => this.getDollarAmount(d.value)}
isInteractive={false}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
)
}
}
export default BarChart;
Reproduced here: https://codesandbox.io/s/nivo-bar-label-issue-k4qek
The multiple calling is happening because the bar chart is calling label function for each animation tick/frame render. If we setup a counter, we'll see with animate prop set to true it will render from 450+ to 550+ times, but if we set the prop animate to false, we'll it renders 6 times which is exactly how many price values are > 0.0.
If you want to avoid all these renders, you'll have to disable animation using animate={false} prop like this:
getDollarAmount(value) {
// Remove every console.log inside this function
return `$${value}`
}
render() {
return (
<ResponsiveBar
animate={false}
label={d => this.getDollarAmount(d.value)}
...
);
}
You can check it running to your cloned CodeSandbox. I have set animate to false and the counter log inside getDollarAmount is calling 6 times. Try to change animate to true and you'll see the 500+- renders.
Also, you don't have to create a function for each label call, you can just pass the getDollarAmount function and let it handle the whole d parameter like this:
getDollarAmount(d) {
// Remove every console.log inside this function
return `$${d.value}`
}
render() {
return (
<ResponsiveBar
animate={false}
label={this.getDollarAmount}
...
);
}

Issue in creating ports with GoJS

I am testing the GoJS library for Javascript.
I'm looking to create ports on the sides of a group.
I attach an executable extract from the program.
When I create a new object from the palette, right-click on the object, and select "Add left port", the debugging message shows that the variable "arr" is declared "undefined" at execution. (program lines 111 and 112).
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic Ports</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go-debug.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<!-- LL <script>goCode("diagramEvents", 600, 200)</script>-->
<script src="/Users/leonlevy/gojs/site/extensionsTS/ResizeMultipleScript.js"></script>
<span id="diagramEventsMsg" style="color: red"></span>
<span id="changeMethodsMsg" style="color: red"></span>
<span id="BackgroundDoubleClicked" style="color: red"></span>
<p>
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
allowDrop: true, // from Palette
// what to do when a drag-drop occurs in the Diagram's background
mouseDrop: function(e) { finishDrop(e, null); },
// layout: null, // Diagram has no layout
/* $(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) }),*/
initialContentAlignment: go.Spot.Center,
"commandHandler.archetypeGroupData": { isGroup: true, category: "OfGroups" },
"undoManager.isEnabled": true
});
// LL
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
myDiagram.addDiagramListener("ObjectSingleClicked",
function(e) {
var part = e.subject.part;
var heightPart = part.actualBounds.height;
var widthPart = part.actualBounds.width;
var xPart = part.actualBounds.position.x;
var yPart = part.actualBounds.position.y;
var xMouseClic = myDiagram.lastInput.documentPoint.x;
var yMouseClic = myDiagram.lastInput.documentPoint.y;
var xPartMiddle = xPart+ widthPart/2;
var side = xMouseClic<= xPartMiddle ? "Left" : "Right";
if (!(part instanceof go.Link)) {console.log("hello leon");}
});
myDiagram.addDiagramListener("BackgroundSingleClicked",
function(e) {
showMessage("Clicked on background " + myDiagram.lastInput.documentPoint);
//console.log("hello leon");}
});
myDiagram.addDiagramListener("BackgroundDoubleClicked", // LL KO
function(e) {
showMessage("Double-clicked at " );//+ e.myDiagram.lastInput.documentPoint);
//showMessage("Clicked on " + myDiagram.lastInput.documentPoint);
});
myDiagram.addDiagramListener("ClipboardPasted",
function(e) { showMessage("Pasted " + e.myDiagram.selection.count + " parts"); });
// LL end
// To simplify this code we define a function for creating a context menu button:
function makeButton(text, action, visiblePredicate) {
return $("ContextMenuButton",
$(go.TextBlock, text),
{ click: action },
//{showMessage( "button: " + myDiagram.lastInput.button);
// don't bother with binding GraphObject.visible if there's no predicate
visiblePredicate ? new go.Binding("visible", "", function(o, e) { return o.myDiagram ? visiblePredicate(o, e) : false; }).ofObject() : {});
//}
}
var nodeMenu = // context menu for each Node
$(go.Adornment, "Horizontal",
makeButton("Add left port",
function (e, obj) { addPort("left"); }),
makeButton("Add right port",
function (e, obj) { addPort("right"); }),
); //Leon end nodeM
// Add a port to the specified side of the selected nodes.
function addPort(side) {
myDiagram.startTransaction("addPort");
myDiagram.selection.each(function(node) {
// skip any selected Links
if (!(node instanceof go.Node)) return;
// compute the next available index number for the side
var i = 0;
while (node.findPort(side + i.toString()) !== node) i++;
// now this new port name is unique within the whole Node because of the side prefix
var name = side + i.toString();
// get the Array of port data to be modified
var arr = node.data[side + "Array"];
showMessage ("node: " + node + "; name: " + name + ";arr: " + arr + ";node.data: " + node.data);
if (arr) {
// create a new port data object
var newportdata = {
portId: name,
portColor: go.Brush.randomColor()
// if you add port data properties here, you should copy them in copyPortData above
};
// and add it to the Array of port data
myDiagram.model.insertArrayItem(arr, -1, newportdata);
}
});
myDiagram.commitTransaction("addPort");
}
var portSize = new go.Size(8, 8);
// this function is used to highlight a Group that the selection may be dropped into
function highlightGroup(e, grp, show) {
if (!grp) return; showMessage("ok")
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;
}
// Upon a drop onto a Group, we try to add the selection as members of the Group.
// Upon a drop onto the background, or onto a top-level Node, make selection top-level.
// If this is OK, we're done; otherwise we cancel the operation to rollback everything.
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();
}
var portMenu = // context menu for each port
$(go.Adornment, "Vertical",
makeButton("Remove port",
// in the click event handler, the obj.part is the Adornment;
// its adornedObject is the port
function (e, obj) { removePort(obj.part.adornedObject); }),
makeButton("Change color",
function (e, obj) { changeColor(obj.part.adornedObject); }),
makeButton("Remove side ports",
function (e, obj) { removeAll(obj.part.adornedObject); })
);
// support double-clicking in the background to add a copy of this data as a node
myDiagram.toolManager.clickCreatingTool.archetypeNodeData = {
name: "Unit",
leftArray: [],
rightArray: [],
topArray: [],
bottomArray: []
};
myDiagram.groupTemplateMap.add("OfGroups",
$(go.Group, "Table",
{ locationObjectName: "BODY",
locationSpot: go.Spot.Center,
selectionObjectName: "BODY",
contextMenu: nodeMenu
},
{
background: "transparent",
resizable: true,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
//computesBoundsAfterDrag: true,
mouseDrop: finishDrop,
resizable: true, resizeObjectName: "SHAPE"
//, minSize: new go.Size(36, 46)
},
new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(0,0,255,0.)" : "transparent"; }).ofObject(),
// save the modified size in the model node data
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{ fill: null, stroke: "rgba(0,50,255,1)", strokeWidth: 3, name: "SHAPE"}),
$(go.Panel, "Vertical", {alignment: go.Spot.Top},// title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "rgba(0,0,255,0.1)" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{ //text: "verticalAlignment: Top", verticalAlignment: go.Spot.Top,
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 18px sans-serif",
opacity: 0.75,
stroke: "#404040"
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5, alignment: go.Spot.TopLeft })
), // end Vertical Panel
// the Panel holding the left port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.leftArray
$(go.Panel, "Vertical",
new go.Binding("itemArray", "leftArray"),
{ row: 1, column: 0,
itemTemplate:
$(go.Panel,
{ _side: "left", // internal property to make it easier to tell which side it's on
fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu },
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1,0) },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Vertical Panel
// the Panel holding the right port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.rightArray
$(go.Panel, "Vertical",
new go.Binding("itemArray", "rightArray"),
{ row: 1, column: 2,
itemTemplate:
$(go.Panel,
{ _side: "right",
fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu },
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1, 0) },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Vertical Panel
)
); // end groupTemplateMap.add("OfGroups"
// initialize the Palette and its contents
myPalette =
$(go.Palette, "myPaletteDiv",
{
groupTemplateMap: myDiagram.groupTemplateMap,
layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position })
});
myPalette.nodeTemplate =
$(go.Node, "Horizontal",
$(go.Shape,
{ width: 10, height: 10, fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
new go.Binding("text", "color"))
);
myPalette.model = new go.GraphLinksModel([
{ key: 101, text: 'UNIT', isGroup: true, isSubProcess: true,
category: "OfGroups", isAdHoc: true, loc: '0 0' },
]);
}
</script>
</head>
<body onload="init()">
<!-- LL -->
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 480px; border: solid 1px black"></div>
</div>
<p>
See the Ports Intro page for an explanation of GoJS ports.
</p>
<textarea id="mySavedModel" style="width:100%;height:250px">
</textarea>
</div>
</div>
</body>
</html>
You need to make sure that the node is bound to the correct data. In particular, the data object should have a leftArray property that is an Array holding port descriptor objects. (And it seems to expect a rightArray property too.) You can determine the expected properties for each Node by looking at the source property names of each of the Bindings that are in the node template.
You can determine the expected properties for each of the port descriptors in either data Array by looking at the properties that the Panel.itemTemplate uses in its data Bindings.

Conditionally change link color?

I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data (color, in this case). I am attempting to call my method to change the link color by doing the following:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
new go.Binding("geometry", "color", setLinkColor))); // the link shape and color
However, my setLinkColor method is never called. Here it is for reference:
function setLinkColor(color) {
console.log("value of color: ", color);
switch(color) {
case "critical":
link = go.Shape.stroke(colors["orange"]);
break;
default:
link = go.Shape.stroke(colors["white"]);
}
return link;
}
How can I conditionally color my Links depending on the value of color?
UPDATE
I have tried implementing Walter's suggestion as follows:
var linkColors = {true: colors["orange"], false: colors["white"]};
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
myDiagram.model = new go.GraphLinksModel(
[
{ key: 2, geo: "thing1", color: colors["white"], critical: false },
{ key: 3, geo: "thing2", color: "#F47321", critical: true },
{ key: 4, geo: "thing3", color: colors["white"], critical: false },
{ key: 5, geo: "thing4", color: colors["white"], critical: false },
However this still is not coloring the links, what am I doing wrong?
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
var myColors = { "A": "red", "B": "green", "C": "blue" };
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; }))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, color: "A" },
{ from: 1, to: 3, color: "B" },
{ from: 2, to: 2 },
{ from: 3, to: 4, color: "C" },
{ from: 4, to: 1, color: "D" }
]);
}
function test() {
myDiagram.model.commit(function(m) {
m.set(m.linkDataArray[0], "color", "B");
});
}
The link template shows one way of binding the link path's stroke color to the value of the link's data.color property lookup of a CSS color in the myColors object.
The test function shows one way of modifying the color of the first link. More discussion is at https://gojs.net/latest/learn/graphObject.html

How to refactor JS function according to module pattern?

I have 2 JS files.
1) The first one is main one and it's organized according to module pattern. It looks as following:
"use strict";
var SchemaEditor = (function () {
/* Private members */
var black = "black";
var transparent = "transparent";
var sd = {
mode: "pointer", // Set to default mode. Alternatives are "node" and "link", for adding a new node or a new link respectively.
itemType: "pointer", // Set when user clicks on a node or link button.
nodeCounter: {}
};
var myDiagram;
var $ = go.GraphObject.make;
/* Private methods */
// update the diagram every 250 milliseconds
function loop() {
setTimeout(function () { updateStates(); loop(); }, 250);
}
// update the value and appearance of each node according to its type and input values
function updateStates() {
var oldskip = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
// do all "input" nodes first
myDiagram.nodes.each(function (node) {
if (node.category === "input") {
doInput(node);
}
});
// now we can do all other kinds of nodes
myDiagram.nodes.each(function (node) {
switch (node.category) {
case "image1": doImage1(node); break;
case "image2": doImage2(node); break;
case "image3": doImage3(node); break;
case "image4": doImage4(node); break;
case "image5": doImage5(node); break;
case "image6": doImage6(node); break;
case "image7": doImage7(node); break;
case "image8": doImage8(node); break;
case "image9": doImage9(node); break;
case "image10": doImage10(node); break;
case "table": doTable(node); break;
case "hBar": dohBar(node); break;
}
});
myDiagram.skipsUndoManager = oldskip;
}
// update nodes by the specific function for its type
// determine the color of links coming out of this node based on those coming in and node type
function doImage1(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage2(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage3(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage4(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage5(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage6(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage7(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage8(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage9(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doImage10(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function doTable(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function dohBar(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(function (link) { node.findObject("NODESHAPE1").fill = link.findObject("SHAPE").stroke; });
}
function BarLink() {
go.Link.call(this);
}
go.Diagram.inherit(BarLink, go.Link);
/** #override */
BarLink.prototype.getLinkPoint = function (node, port, spot, from, ortho, othernode, otherport) {
if (node.category === "hBar") {
var op = go.Link.prototype.getLinkPoint.call(this, othernode, otherport, this.computeSpot(!from), !from, ortho, node, port);
var r = new go.Rect(port.getDocumentPoint(go.Spot.TopLeft),
port.getDocumentPoint(go.Spot.BottomRight));
var y = (op.y > r.centerY) ? r.bottom : r.top;
if (op.x < r.left) return new go.Point(r.left, y);
if (op.x > r.right) return new go.Point(r.right, y);
return new go.Point(op.x, y);
} else {
return go.Link.prototype.getLinkPoint.call(this, node, port, spot, from, ortho, othernode, otherport);
}
};
/** #override */
BarLink.prototype.getLinkDirection = function (node, port, linkpoint, spot, from, ortho, othernode, otherport) {
var p = port.getDocumentPoint(go.Spot.Center);
var op = otherport.getDocumentPoint(go.Spot.Center);
var below = op.y > p.y;
return below ? 90 : 270;
};
// end BarLink class
var setMode = function (mode, itemType) {
myDiagram.startTransaction();
sd.mode = mode;
sd.itemType = itemType;
if (mode === "link") {
if (itemType === 'default') {
if (document.getElementById("defaultMode").classList.contains('non-pushed')) {
document.getElementById("defaultMode").classList.remove('non-pushed');
document.getElementById("defaultMode").classList.add('pushed');
document.getElementById("orthoMode").classList.add('non-pushed');
document.getElementById("cornerMode").classList.add('non-pushed');
}
}
if (itemType === 'ortho') {
if (document.getElementById("orthoMode").classList.contains('non-pushed')) {
document.getElementById("orthoMode").classList.remove('non-pushed');
document.getElementById("orthoMode").classList.add('pushed');
document.getElementById("defaultMode").classList.add('non-pushed');
document.getElementById("cornerMode").classList.add('non-pushed');
}
}
if (itemType === 'corner') {
if (document.getElementById("cornerMode").classList.contains('non-pushed')) {
document.getElementById("cornerMode").classList.remove('non-pushed');
document.getElementById("cornerMode").classList.add('pushed');
document.getElementById("defaultMode").classList.add('non-pushed');
document.getElementById("orthoMode").classList.add('non-pushed');
}
}
myDiagram.allowLink = true;
myDiagram.nodes.each(function (n) { n.port.cursor = "pointer"; });
}
myDiagram.commitTransaction("mode changed");
};
// save a model to and load a model from JSON text, displayed below the Diagram
var save = function () {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
};
var load = function () {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
};
function addLinkTemplateMaps() {
// creates relinkable Links that will avoid crossing Nodes when possible and will jump over other Links in their paths
myDiagram.linkTemplateMap.add("default",
$(go.Link,
{
relinkableFrom: true, relinkableTo: true,
selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
shadowOffset: new go.Point(0, 0), shadowBlur: 5, shadowColor: "black"
},
new go.Binding("isShadowed", "isSelected").ofObject(),
$(go.Shape,
{ name: "SHAPE", strokeWidth: 2, stroke: black })));
myDiagram.linkTemplateMap.add("corner",
$(go.Link,
{ reshapable: true, resegmentable: true, routing: go.Link.AvoidsNodes },
new go.Binding("points").makeTwoWay(), // TwoWay Binding of Link.points
$(go.Shape)
));
myDiagram.linkTemplateMap.add("ortho",
$(BarLink, // subclass defined below
{
routing: go.Link.Orthogonal,
relinkableFrom: true,
relinkableTo: true,
toPortChanged: function (link, oldport, newport) {
if (newport instanceof go.Shape) link.path.stroke = newport.fill;
}
},
$(go.Shape,
{ strokeWidth: 2 })
));
};
var initSchemaEditor = function () {
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
allowDrop: true, // Nodes from the Palette can be dropped into the Diagram
"undoManager.isEnabled": true,
"grid.visible": true,
"linkingTool.portGravity": 0, // no snapping while drawing new links
"linkingTool.doActivate": function () {
// change the curve of the LinkingTool.temporaryLink
this.temporaryLink.curve = (sd.itemType === "default") ? go.Link.Normal : go.Link.Orthogonal;
go.LinkingTool.prototype.doActivate.call(this);
},
// override the link creation process
"linkingTool.insertLink": function (fromnode, fromport, tonode, toport) {
// to control what kind of Link is created,
// change the LinkingTool.archetypeLinkData's category
myDiagram.model.setCategoryForLinkData(this.archetypeLinkData, sd.itemType);
// also change the text indicating the condition, which the user can edit
this.archetypeLinkData.text = sd.itemType;
return go.LinkingTool.prototype.insertLink.call(this, fromnode, fromport, tonode, toport);
},
"clickCreatingTool.archetypeNodeData": {}, // enable ClickCreatingTool
"clickCreatingTool.isDoubleClick": false, // operates on a single click in background
"clickCreatingTool.canStart": function () { // but only in "node" creation mode
return sd.mode === "node" && go.ClickCreatingTool.prototype.canStart.call(this);
},
"clickCreatingTool.insertPart": function (loc) { // customize the data for the new node
sd.nodeCounter[sd.itemType] += 1;
var newNodeId = sd.itemType + sd.nodeCounter[sd.itemType];
this.archetypeNodeData = {
key: newNodeId,
category: sd.itemType,
label: newNodeId
};
return go.ClickCreatingTool.prototype.insertPart.call(this, loc);
}
});
myDiagram.requestUpdate();
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function (e) {
var button = document.getElementById("saveModel");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
myDiagram.model =
$(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort" // identifies data property names
});
addLinkTemplateMaps();
loadNodes();
myDiagram.nodeTemplateMap.add("image1", image1Template);
myDiagram.nodeTemplateMap.add("image2", image2Template);
myDiagram.nodeTemplateMap.add("image3", image3Template);
myDiagram.nodeTemplateMap.add("image4", image4Template);
myDiagram.nodeTemplateMap.add("image5", image5Template);
myDiagram.nodeTemplateMap.add("image6", image6Template);
myDiagram.nodeTemplateMap.add("image7", image7Template);
myDiagram.nodeTemplateMap.add("image8", image8Template);
myDiagram.nodeTemplateMap.add("image9", image9Template);
myDiagram.nodeTemplateMap.add("image10", image10Template);
myDiagram.nodeTemplateMap.add("table", tableTemplate);
myDiagram.nodeTemplateMap.add("hBar", hBarTemplate);
var palette = new go.Palette("palette"); // create a new Palette in the HTML DIV element "palette"
// share the template map with the Palette
palette.nodeTemplateMap = myDiagram.nodeTemplateMap;
//palette.groupTemplateMap = myDiagram.groupTemplateMap;
palette.model.nodeDataArray = [
{ category: "image1" },
{ category: "image2" },
{ category: "image3" },
{ category: "image4" },
{ category: "image5" },
{ category: "image6" },
{ category: "image7" },
{ category: "image8" },
{ category: "image9" },
{ category: "image10" },
{ category: "table" },
{ category: "hBar" }
];
myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) {
if (myDiagram.currentTool instanceof go.TextEditingTool) {
myDiagram.currentTool.acceptText(go.TextEditingTool.LostFocus);
}
myDiagram.commandHandler.ungroupSelection();
jQuery.ajax({
type: "GET",
url: '/Home/GetRandomObjectProperties'
}).done(function (data) {
// loop through selection to find table node and populate properties
myDiagram.selection.each(function (p) {
if (p instanceof go.Node && p.category === "table") {
var nodedata = p.data;
var properties = data.map(function (item) {
return { "property_name": item.Item1.toString(), "property_value": item.Item2.toString() };
});
myDiagram.model.setDataProperty(nodedata, "properties", properties);
return;
}
});
});
});
// load the initial diagram
load();
// continually update the diagram
loop();
};
/* Public methods */
return {
initSchemaEditor: initSchemaEditor,
setMode: setMode,
save: save,
load: load
};
})();
2) The second JS file is not organized according to module pattern and it looks as following:
"use strict";
var sharedToolTip;
var image1Template;
var image2Template;
var image3Template;
var image4Template;
var image5Template;
var image6Template;
var image7Template;
var image8Template;
var image9Template;
var image10Template;
var tableTemplate;
var hBarTemplate;
function loadNodes() {
var $ = go.GraphObject.make;
// node template helpers
sharedToolTip =
$(go.Adornment, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightyellow" }),
$(go.TextBlock, { margin: 2 },
new go.Binding("text", "", function (d) { return d.category; })));
// define some common property settings
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isShadowed", "isSelected").ofObject(),
{
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: "blue",
toolTip: sharedToolTip
}
];
}
function portStyle0(input) {
return {
desiredSize: new go.Size(3, 3),
fill: "black",
fromLinkable: !input,
toLinkable: input,
cursor: "pointer"
};
}
function portStyle1() {
return {
desiredSize: new go.Size(3, 3),
fill: "black",
toLinkable: true,
cursor: "pointer",
fromLinkable: true,
fromSpot: go.Spot.TopBottomSides,
toSpot: go.Spot.TopBottomSides
};
}
image1Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Cell_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.18, 0) })
);
image2Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Cell_2.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.33, 0) })
);
image3Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/GTU.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.215, 0) })
);
image4Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(false),
{ portId: "1", alignment: new go.Spot(0.125, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "2", alignment: new go.Spot(0.125, 0) })
);
image5Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(true),
{ portId: "3", alignment: new go.Spot(0.523, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_2.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "4", alignment: new go.Spot(0.523, 0) })
);
image6Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(true),
{ portId: "", alignment: new go.Spot(0.12, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_3.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.12, 0) })
);
image7Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Tr_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.42, 0) })
);
image8Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.59, 0) }),
$(go.Picture, "Images/ElectricalElements/Tr_2.svg")
);
image9Template =
$(go.Node, "Vertical", nodeStyle(),
{
resizable: true,
resizeObjectName: "SHAPE", selectionObjectName: "SHAPE"
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: transparent,
width: 60,
height: 40,
stroke: black,
strokeWidth: 1,
strokeDashArray: [5, 5]
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
);
image10Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.TextBlock,
{
text: "text",
editable: true,
isMultiline: true
},
new go.Binding("text", "text").makeTwoWay())
);
tableTemplate =
$(go.Node, go.Panel.Auto, nodeStyle(),
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 1 }),
{ movable: true },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Table",
new go.Binding("itemArray", "properties"),
{
defaultAlignment: go.Spot.Left,
defaultColumnSeparatorStroke: "black",
itemTemplate:
$(go.Panel, "TableRow",
$(go.TextBlock, new go.Binding("text", "property_name"),
{ column: 0, margin: 1, font: "bold 7pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "property_value"),
{ column: 1, margin: 1 })
)
},
$(go.Panel, "TableRow",
{ isPanelMain: true },
$(go.TextBlock, "Name",
{ column: 0, margin: new go.Margin(1, 1, 0, 1), font: "bold 7pt sans-serif" }),
$(go.TextBlock, "Value",
{ column: 1, margin: new go.Margin(1, 1, 0, 1), font: "bold 7pt sans-serif" })
),
$(go.RowColumnDefinition,
{ row: 0, background: "lightgray" }),
$(go.RowColumnDefinition,
{ row: 1, separatorStroke: "black" })
)
);
hBarTemplate =
$(go.Node,
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
{
layerName: "Background",
// special resizing: just at the ends
resizable: true, resizeObjectName: "SHAPE",
resizeAdornmentTemplate:
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape, // left resize handle
{
alignment: go.Spot.Left, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}),
$(go.Shape, // right resize handle
{
alignment: go.Spot.Right, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
})),
rotatable: true
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "black", stroke: null, strokeWidth: 0,
width: 60, height: 5,
minSize: new go.Size(50, 5),
maxSize: new go.Size(Infinity, 5)
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("fill"),
{ portId: "", toLinkable: true })
);
};
I call the function loadNodes from second JS file in main JS file and it works.
But, when I've tried to organize the second JS file according to module pattern it stopped working.
I've tried the folowing:
1) The main file:
...
NodeRepository.loadNodes();
myDiagram.nodeTemplateMap.add("image1", NodeRepository.image1Template);
myDiagram.nodeTemplateMap.add("image2", NodeRepository.image2Template);
myDiagram.nodeTemplateMap.add("image3", NodeRepository.image3Template);
myDiagram.nodeTemplateMap.add("image4", NodeRepository.image4Template);
myDiagram.nodeTemplateMap.add("image5", NodeRepository.image5Template);
myDiagram.nodeTemplateMap.add("image6", NodeRepository.image6Template);
myDiagram.nodeTemplateMap.add("image7", NodeRepository.image7Template);
myDiagram.nodeTemplateMap.add("image8", NodeRepository.image8Template);
myDiagram.nodeTemplateMap.add("image9", NodeRepository.image9Template);
myDiagram.nodeTemplateMap.add("image10", NodeRepository.image10Template);
myDiagram.nodeTemplateMap.add("table", NodeRepository.tableTemplate);
myDiagram.nodeTemplateMap.add("hBar", NodeRepository.hBarTemplate);
...
2) The second file:
"use strict";
var NodeRepository = (function () {
var sharedToolTip;
var image1Template;
var image2Template;
var image3Template;
var image4Template;
var image5Template;
var image6Template;
var image7Template;
var image8Template;
var image9Template;
var image10Template;
var tableTemplate;
var hBarTemplate;
function loadNodes() {
var $ = go.GraphObject.make;
...
};
return {
image1Template: image1Template,
image2Template: image2Template,
image3Template: image3Template,
image4Template: image4Template,
image5Template: image5Template,
image6Template: image6Template,
image7Template: image7Template,
image8Template: image8Template,
image9Template: image9Template,
image10Template: image10Template,
tableTemplate: tableTemplate,
hBarTemplate: hBarTemplate,
loadNodes: loadNodes
};
})();
What I'm doing wrong?
Here's what I did:
"use strict";
var NodeRepository = (function () {
var sharedToolTip;
var image1Template;
var image2Template;
var image3Template;
var image4Template;
var image5Template;
var image6Template;
var image7Template;
var image8Template;
var image9Template;
var image10Template;
var tableTemplate;
var hBarTemplate;
function image1Public() {
return image1Template;
}
function image2Public() {
return image2Template;
}
function image3Public() {
return image3Template;
}
function image4Public() {
return image4Template;
}
function image5Public() {
return image5Template;
}
function image6Public() {
return image6Template;
}
function image7Public() {
return image7Template;
}
function image8Public() {
return image8Template;
}
function image9Public() {
return image9Template;
}
function image10Public() {
return image10Template;
}
function image11Public() {
return tableTemplate;
}
function image12Public() {
return hBarTemplate;
}
function loadNodes() {
var $ = go.GraphObject.make;
// node template helpers
sharedToolTip =
$(go.Adornment, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightyellow" }),
$(go.TextBlock, { margin: 2 },
new go.Binding("text", "", function (d) { return d.category; })));
// define some common property settings
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isShadowed", "isSelected").ofObject(),
{
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: "blue",
toolTip: sharedToolTip
}
];
}
function portStyle0(input) {
return {
desiredSize: new go.Size(3, 3),
fill: "black",
fromLinkable: !input,
toLinkable: input,
cursor: "pointer"
};
}
function portStyle1() {
return {
desiredSize: new go.Size(3, 3),
fill: "black",
toLinkable: true,
cursor: "pointer",
fromLinkable: true,
fromSpot: go.Spot.TopBottomSides,
toSpot: go.Spot.TopBottomSides
};
}
image1Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Cell_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.18, 0) })
);
image2Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Cell_2.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.33, 0) })
);
image3Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/GTU.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.215, 0) })
);
image4Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(false),
{ portId: "1", alignment: new go.Spot(0.125, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "2", alignment: new go.Spot(0.125, 0) })
);
image5Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(true),
{ portId: "3", alignment: new go.Spot(0.523, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_2.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "4", alignment: new go.Spot(0.523, 0) })
);
image6Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle0(true),
{ portId: "", alignment: new go.Spot(0.12, 0) }),
$(go.Picture, "Images/ElectricalElements/Sec_3.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.12, 0) })
);
image7Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture, "Images/ElectricalElements/Tr_1.svg"),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.42, 0) })
);
image8Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.59, 0) }),
$(go.Picture, "Images/ElectricalElements/Tr_2.svg")
);
image9Template =
$(go.Node, "Vertical", nodeStyle(),
{
resizable: true,
resizeObjectName: "SHAPE", selectionObjectName: "SHAPE"
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: transparent,
width: 60,
height: 40,
stroke: black,
strokeWidth: 1,
strokeDashArray: [5, 5]
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
);
image10Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.TextBlock,
{
text: "text",
editable: true,
isMultiline: true
},
new go.Binding("text", "text").makeTwoWay())
);
tableTemplate =
$(go.Node, go.Panel.Auto, nodeStyle(),
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 1 }),
{ movable: true },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Table",
new go.Binding("itemArray", "properties"),
{
defaultAlignment: go.Spot.Left,
defaultColumnSeparatorStroke: "black",
itemTemplate:
$(go.Panel, "TableRow",
$(go.TextBlock, new go.Binding("text", "property_name"),
{ column: 0, margin: 1, font: "bold 7pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "property_value"),
{ column: 1, margin: 1 })
)
},
$(go.Panel, "TableRow",
{ isPanelMain: true },
$(go.TextBlock, "Name",
{ column: 0, margin: new go.Margin(1, 1, 0, 1), font: "bold 7pt sans-serif" }),
$(go.TextBlock, "Value",
{ column: 1, margin: new go.Margin(1, 1, 0, 1), font: "bold 7pt sans-serif" })
),
$(go.RowColumnDefinition,
{ row: 0, background: "lightgray" }),
$(go.RowColumnDefinition,
{ row: 1, separatorStroke: "black" })
)
);
hBarTemplate =
$(go.Node,
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
{
layerName: "Background",
// special resizing: just at the ends
resizable: true, resizeObjectName: "SHAPE",
resizeAdornmentTemplate:
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape, // left resize handle
{
alignment: go.Spot.Left, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}),
$(go.Shape, // right resize handle
{
alignment: go.Spot.Right, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
})),
rotatable: true
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "black", stroke: null, strokeWidth: 0,
width: 60, height: 5,
minSize: new go.Size(50, 5),
maxSize: new go.Size(Infinity, 5)
},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("fill"),
{ portId: "", toLinkable: true })
);
};
return {
image1Public: image1Public,
image2Public: image2Public,
image3Public: image3Public,
image4Public: image4Public,
image5Public: image5Public,
image6Public: image6Public,
image7Public: image7Public,
image8Public: image8Public,
image9Public: image9Public,
image10Public: image10Public,
image11Public: image11Public,
image12Public: image12Public,
loadNodes: loadNodes
};
})();

Categories

Resources