Hi,
I have some trouble with this, when I click a node inspector will show the “fill” property only,
if I click the panel inside the node, inspector will show “condition”, “showBox”.
The weird thing is, editing node’s properties on inspector is fine, but when I edit something inside node’s panel (e.g. change text of “condition” or select the drop down box on “showBox”), the inspector will automatically went back to node’s properties.
Is there any way to fix this? Thanks in advance.
inspector code:
var inspector = new Inspector('myInspectorDiv', myDiagram,
{
// allows for multiple nodes to be inspected at once
multipleSelection: false,
// // uncomment this line to only inspect the named properties below instead of all properties on each object:
includesOwnProperties: false,
// inspectSelection: false
properties: {
"fill": { show: Inspector.showIfPresent, type: 'color' },
"condition": { show: Inspector.showIfPresent },
"showBox": {
show: function (part) {
if (part.condition != null) {
return true;
}
return false;
},
type: "select",
choices: function (node, propName) {
return [
"文字比對",
"關鍵字比對",
"時間日期比對"
];
}
},
"comText": {
show: function (part) {
if (part.showBox == "文字比對") {
return true;
}
return false;
}
}
}
});
node code:
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)
},
new go.Binding("fill", "fill").makeTwoWay()
),
$(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: false, cursor: "pointer"
},
{
click: function (e, item) {
inspector.inspectObject(item.data);
}
},
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: false, 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
);