I have referred and applied the node template logics with reference to Planogram, shopfloor Monitor, to get the Palatte, group structure, with grid layout form, but the images are not able to seen in the palette or in group diagram. And getting the Error as mentioned in Topic… Attached the code here for your reference.
Images are in the assets and checked for typo as well.
ts code is as below:
import * as go from 'gojs';
import { CoreService } from 'src/app/service/core.service';
import { environment } from 'src/environments/environment';
const $: any = go.GraphObject.make;
@Component({
selector: 'app-recording-view-diagram',
templateUrl: './recording-view-diagram.component.html',
styleUrls: ['./recording-view-diagram.component.css']
})
export class RecordingViewDiagramComponent implements OnInit {
url_grp_view: any;
rgwdata: any;
constructor(private service: CoreService) { }
ngOnInit(): void { }
@Input()
public model!: go.GraphLinksModel;
public ngAfterViewInit() {
var AllowTopLevel = false;
var CellSize = new go.Size(5000, 5000);
function nodeTypeImage(deviceTpyeID) {
switch (deviceTpyeID) { // Image sizes
case "12": return "/assets/img/ST-I.png"; // 55x55
case "13": return "/assets/img/ST-X.png"; // 55x55
};
};
function save() {
myDiagram.model = go.Model.fromJson(document.getElementById("savedModel").nodeValue);
};
function nodeProblemConverter(msg) {
if (msg) return "red";
return 'rgba(0,0,0,0)';
};
function nodeStatusConverter(s) {
if (s >= 2) return "red";
if (s >= 1) return "yellow";
return "green";
}
// The first Diagram showcases what the Nodes might look like "in action"
const myDiagram = new go.Diagram("recordingDiagramDiv",
{
grid: $(go.Panel, "Grid",
{ gridCellSize: CellSize },
$(go.Shape), //"LineH", { stroke: "lightgray" }),
$(go.Shape) //, "LineV", { stroke: "lightgray" })
),
// support grid snapping when dragging and when resizing
"draggingTool.isGridSnapEnabled": true,
"draggingTool.gridSnapCellSpot": go.Spot.Center,
"resizingTool.isGridSnapEnabled": true,
// For this sample, automatically show the state of the diagram's model on the page
"ModelChanged": e => {
if (e.isTransactionFinished) {
document.getElementById("savedModel").textContent = myDiagram.model.toJson();
}
},
"animationManager.isEnabled": true,
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
resizable: true, resizeObjectName: "SHAPE",
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),
mouseDragEnter: (e, node) => {
e.handled = true;
node.findObject("SHAPE").fill = "red";
e.diagram.currentCursor = "not-allowed";
highlightGroup(node.containingGroup, false);
},
mouseDragLeave: (e, node) => node.updateTargetBindings(),
mouseDrop: (e, node) => node.diagram.currentTool.doCancel()
},
// always save/load the point that is the top-left corner of the node, not the location
new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Spot",
$(go.Panel, "Auto",
{ name: "SHAPE" },
$(go.Shape,
{ fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
new go.Binding("background", "problem", nodeProblemConverter),
new go.AnimationTrigger('background')),
$(go.Picture,
{ margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
{ name: "SHAPE", desiredSize: new go.Size(100, 80) },
new go.Binding("source", "deviceTpyeID", nodeTypeImage)),
), //END Auto Panel
$(go.Shape, "Circle",//To get to know the STATUS
{
alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
width: 12, height: 12, fill: "blue"
},
new go.Binding("fill", "status", nodeStatusConverter),
new go.AnimationTrigger('fill'))
), //END Spot Panel
$(go.TextBlock,
{
row: 2, alignment: go.Spot.Center,
maxSize: new go.Size(160, NaN),
margin: 10,
stroke: "white"
},
new go.Binding("text", "name")
),
{
toolTip:
$("ToolTip",
{ "Border.stroke": colors["gray"], "Border.strokeWidth": 2 },
$(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
new go.Binding("text", "name")))
}
);//END Node Template
// Groups represent racks where items (Nodes) can be placed.
// Currently they are movable and resizable, but you can change that
// if you want the racks to remain "fixed".
// Groups provide feedback when the user drags nodes onto them.
function highlightGroup(grp, show) {
if (!grp) return false;
// check that the drop may really happen into the Group
var tool = grp.diagram.toolManager.draggingTool;
grp.isHighlighted = show && grp.canAddMembers(tool.draggingParts);
return grp.isHighlighted;
}
var groupFill = "rgba(128,128,128,0.2)";
var groupStroke = "gray";
var dropFill = "rgba(128,255,255,0.2)";
var dropStroke = "red";
myDiagram.groupTemplate =
$(go.Group,
{
layerName: "Background",
resizable: true, resizeObjectName: "SHAPE",
// because the gridSnapCellSpot is Center, offset the Group's location
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2)
},
// always save/load the point that is the top-left corner of the node, not the location
new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
{ // what to do when a drag-over or a drag-drop occurs on a Group
mouseDragEnter: (e, grp, prev) => {
if (!highlightGroup(grp, true)) e.diagram.currentCursor = "not-allowed"; else e.diagram.currentCursor = "";
},
mouseDragLeave: (e, grp, next) => highlightGroup(grp, false),
mouseDrop: (e, grp) => {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
}
},
$(go.Panel, "Spot",
$(go.Panel, "Auto",
{ name: "SHAPE" },
$(go.Shape,
{ fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
new go.AnimationTrigger('background')),
$(go.Picture,
{ margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
{ name: "SHAPE", desiredSize: new go.Size(100, 80) },
new go.Binding("source", "deviceTpyeID", nodeTypeImage),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("fill", "isHighlighted", h => h ? dropFill : groupFill).ofObject(),
new go.Binding("stroke", "isHighlighted", h => h ? dropStroke : groupStroke).ofObject()
),
), //END Auto Panel
), //END Spot Panel
$(go.TextBlock,
{
row: 2, alignment: go.Spot.Center,
maxSize: new go.Size(160, NaN),
margin: 10,
stroke: "white"
},
new go.Binding("text", "name")
),
{
toolTip:
$("ToolTip",
{ "Border.stroke": colors["gray"], "Border.strokeWidth": 2 },
$(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
new go.Binding("text", "name")))
}
),
// decide what kinds of Parts can be added to a Group
myDiagram.commandHandler.memberValidation = (grp, node) => {
if (grp instanceof go.Group && node instanceof go.Group) return false; // cannot add Groups to Groups
// but dropping a Group onto the background is always OK
return true;
},
// what to do when a drag-drop occurs in the Diagram's background
myDiagram.mouseDragOver = e => {
if (!AllowTopLevel) {
// OK to drop a group anywhere or any Node that is a member of a dragged Group
var tool = e.diagram.toolManager.draggingTool;
if (!tool.draggingParts.all(p => p instanceof go.Group ||
(!p.isTopLevel && tool.draggingParts.contains(p.containingGroup)))) {
e.diagram.currentCursor = "not-allowed";
} else {
e.diagram.currentCursor = "";
}
}
},
myDiagram.mouseDrop = e => {
if (AllowTopLevel) {
// when the selection is dropped in the diagram's background,
// make sure the selected Parts no longer belong to any Group
if (!e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true)) {
e.diagram.currentTool.doCancel();
}
} else {
// disallow dropping any regular nodes onto the background, but allow dropping "racks",
// including any selected member nodes
if (!e.diagram.selection.all(p => {
return p instanceof go.Group || (!p.isTopLevel && p.containingGroup.isSelected);
})) {
e.diagram.currentTool.doCancel();
}
}
}
// start off with four "racks" that are positioned next to each other
myDiagram.model = new go.GraphLinksModel([
{ key: "G1", isGroup: true, pos: "0 0", size: "8000 8000" },
{ key: "G2", isGroup: true, pos: "8000 0", size: "2000 5000" }
]);
// this sample does not make use of any links
// initialize the first Palette
let myPaletteSmall =
$(go.Palette, "myPaletteSmall",
{ // share the templates with the main Diagram
nodeTemplate: myDiagram.nodeTemplate,
groupTemplate: myDiagram.groupTemplate
},
$(go.Panel, "Vertical",
$(go.Panel, "Auto",
{ name: "SHAPE" },
$(go.Shape,
{ fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
new go.AnimationTrigger('background')),
$(go.Picture,
{ margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
{ name: "SHAPE", desiredSize: new go.Size(100, 80) },
new go.Binding("source", "deviceTpyeID", nodeTypeImage),
), //END Auto Panel
), //END Vertical Panel
$(go.TextBlock, { margin: 5, textAlign: "center", stroke: "white", font: 'bold 16px sans-serif' },
new go.Binding("text", "name")),
));//END of Palette
var green = '#B2FF59';
var blue = '#81D4FA';
var yellow = '#FFEB3B';
// specify the contents of the Palette
this.url_grp_view = environment.url_gojs_endterminal_get //able to recieve the data in the two console logs below
.replace('{server_ip}', environment.server_ip)
.replace('{server_port}', environment.server_port);
myPaletteSmall.model = new go.GraphLinksModel([
this.service.getRecords(this.url_grp_view).subscribe((res) => {
debugger
console.log(res);
myPaletteSmall.model.nodeDataArray = res;
this.rgwdata = res;
console.log(this.rgwdata);
})
]);
}
}```
And html is as below:
```<div style="width: 100%; display: flex; justify-content: space-between">
<div style="width: 135px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black">
<div class="tabs">
<div class="tab">
<input id="rd1" name="rd" checked="true">
<label class="tab-label" for="rd1">DEVICES</label>
<div class="tab-content">
<div id="myPaletteSmall" style="width: 140px; height: 340px"></div>
</div>
</div>
<!-- <div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">RADIO</label>
<div class="tab-content">
<div id="myPaletteTall" style="width: 140px; height: 340px"></div>
</div>
</div>
<div class="tab">
<input type="radio" id="rd3" name="rd">
<label class="tab-label" for="rd3">FC</label>
<div class="tab-content">
<div id="myPaletteWide" style="width: 140px; height: 340px"></div>
</div>
</div>
<div class="tab">
<input type="radio" id="rd4" name="rd">
<label class="tab-label" for="rd4">LINE</label>
<div class="tab-content">
<div id="myPaletteBig" style="width: 140px; height: 340px"></div>
</div>
</div> -->
</div>
</div>
<div id='recordingDiagramDiv' style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</div>
<div>
Diagram Model saved in JSON format, automatically updated after each transaction:
<button id="savedModel" style="height:250px" onclick="save()">Save</button>
</div>
<script src = "go-debug.js"></script>```
And my JSON data would be something as below:
{
"id": 30,
"name": "STX In1",
"fullName": "",
"deviceCategoryID": 33,
"deviceTpyeID": 12,
"siteID": 2,
"description": "OPS",
"dateCreated": "2023-02-13T14:47:57.000+08:00",
"dateUpdated": "2023-08-04T15:35:35.000+08:00"
},
Request your help to understand and solve to retrieve the respective images based on switch case.