Hi, I’m using inspector and having some questions.
Here’s my Node object:
var templateConditionNode =
$(go.Node, "Auto",
{contextMenu: nodeMenu},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle",
{ /*becasue shape has a black fill by default, so set to null if tranparency is required */
fill:"darkblue", stroke: "#151B54", strokeWidth:3, column:1,stretch: go.GraphObject.Fill,
minSize: new go.Size(110, 70)
},
),
$(go.TextBlock,
{ name:"TEXT", margin: 3,
stroke:"white", alignment: go.Spot.Top,
editable: true, font: "bold 16px Segoe UI,sans-serif",
},
new go.Binding("text", "name").makeTwoWay(),
new go.Binding("scale", "scale").makeTwoWay(),
new go.Binding("font", "font").makeTwoWay(),
new go.Binding("stroke", "stroke").makeTwoWay()
),
),
// 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"),
{
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Bottom, margin:new go.Margin(25, 0, 0, 10),
itemTemplate:
$(go.Panel, "Table",
{
_side: "right",
fromSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer"
},
new go.Binding("portId", "portId"),
$(go.Shape, "RoundedRectangle",
{ /*becasue shape has a black fill by default, so set to null if tranparency is required */
fill:"lightgray", stroke: "grey", strokeWidth:3, margin:3,
name:"PANEL", stretch: go.GraphObject.Fill, minSize: new go.Size(80, 30),
alignment: go.Spot.Bottom
}
),
$(go.TextBlock,
{
row:0, column:0, editable: true, margin: 10, isMultiline: false, textAlign: "center"
},
new go.Binding("text", "condition").makeTwoWay()
),
$(go.Shape, "Circle",
{
row:0,column:1,
stroke: "DarkOrange", strokeWidth: 2,
desiredSize: new go.Size(15, 15),
margin: new go.Margin(1, 0)
},
new go.Binding("fill", "portColor")
)
) // end itemTemplate
}
),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "leftArray"),
{
alignment: go.Spot.Left,
itemTemplate:
$(go.Panel,
{
_side: "left",
toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true, cursor: "pointer"
},
new go.Binding("portId", "portId"),
$(go.Shape, "Circle",
{
stroke: "DarkOrange", strokeWidth: 2,
desiredSize: new go.Size(15, 15),
margin: new go.Margin(0,100,0,0)
},
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
)
// end Vertical Panel
);
Inspector :
var inspector = new Inspector('myInspectorDiv', myDiagram,
{
// allows for multiple nodes to be inspected at once
multipleSelection: true,
// uncomment this line to only inspect the named properties below instead of all properties on each object:
includesOwnProperties: false,
properties: {
"fill": { show: Inspector.showIfPresent, type: 'color' }
}
});
I want to edit the condition on my node’s rightArray, so on the properties of inspector, I try to put the “rightArray.condition” or “rightArray” but it doesn’t make any sense by just showing [object Object].
Is it possible to edit some attribute on itemArray? On my case,I want to create a decision Node (logic/ if-else node), I can add new condition on my node by clicking the Add button on contextMenu, so if there is five condition on one Node, inspector will have five condition edit columns for user to input. Thanks for your answer.
[click ADD button will add new condition panel]
[node’s attribute on myDiagram]
[on the first condition the next node will be queue, second will be DB and so on]