Conditional Property in Inspector

GoJS
1

Hello,

Below is my Inspector Properties.

myInspector = new Inspector(“myInspector”, myDiagram,
{
properties: {
id: { readOnly: true,show: Inspector.showIfNode},
key: { show: false },
pos: { show: false },
name: { show: Inspector.showIfNode },
text: { show: Inspector.showIfNode },
icon: { show: Inspector.showIfNode, type: “select”, choices: IconNames },
//color: { type: “select”, choices: ColorNames },
color: { show: true, type: ‘color’ },
//caption: { show: Inspector.showIfNode },
//imgsrc: { show: Inspector.showIfNode },
from: { show: false },
to: { show: false },
points: { show: false },
fromSpot: { show: Inspector.showIfLink, type: “select”, choices: SpotNames },
toSpot: { show: Inspector.showIfLink, type: “select”, choices: SpotNames },
//category: { show: Inspector.showIfLink, type: “select”, choices: ConnectorNames },
toarrowOption: { show: Inspector.showIfLink, type: “select”, choices: toArrowOptionNames },
fromarrowOption: { show: Inspector.showIfLink, type: “select”, choices: fromArrowOptionNames },
dash: { show: Inspector.showIfLink }
},
propertyModified: onSelectionChanged
});

Inspector has show property which is set based on Inspector.showIfLink,Inspector.showIfNode .
I had icon property and based on the selection I want to make some property visible or invisible.
eg: icon will have Inverter,Battery etc option which user can select. If user select Inverter I want some property ‘P1’ to be visible but if user select Battery then property ‘p1’ should be invisible.

Thanks
Pankaj

2

Use a custom predicate for each of those property descriptors, instead of ones such as Inspector.showIfNode.

3

Thanks Walter… I am able to Achieve using custom predicate.
it is possible I can get all types (please share the link for the same) like we have color type so I can create interactive user friendly as show in below image i.e. instead of name of arrow user can select the shape of arrow they have to use.

color: { show: true, type: ‘color’ }

image
image862×637 75.7 KB

Please share any tutorials/docs/example for the same

Thanks
Pankaj

4

The complete source code for the Data Inspector is right there in the extensions or extensionsJSM subdirectory. We figure that if you want your own nice UI for showing and editing property values you would want to implement it yourself – there’s no way that the Inspector could be suitable for most applications.

But if you want a quick-and-dirty color picker in the Inspector, set { type: "color" }.

You might also be interested in how the Block Editor supports customizing the nodes and the links via context menu: Simple Block Editor

5

Hi Walter,

I am trying to set the height of my icon(shape) dynamically but it is not working.

image
image1336×541 74 KB

image
image1372×769 109 KB

My node template is below:

myDiagram.nodeTemplate =
$(go.Node, “Auto”,
{
locationObjectName: “PORT”,
locationSpot: go.Spot.Top,
linkConnected: updatePortHeight,
linkDisconnected: updatePortHeight,
toolTip:
$(“ToolTip”,
$(go.TextBlock, { margin: 4, width: 140 },
new go.Binding(“text”, “”, data => data.text + “:\n\n” + data.description))
)
},
new go.Binding(“location”, “pos”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, “Vertical”,
$(go.Shape,
{
width: 50, height: 40,
stroke: null, strokeWidth: 0, fill: “gray”,
portId: “”, cursor: “pointer”, fromLinkable: true, toLinkable: true
},
new go.Binding(“height”, “icon”, data => data.height),
new go.Binding(“width”, “icon”, () => 70),
new go.Binding(“fill”, “color”),
new go.Binding(“geometry”, “icon”, geoFunc)),

            $(go.TextBlock,
                {
                    font: "Bold 14px Lato, sans-serif",
                    textAlign: "center",
                    margin: 3,
                    maxSize: new go.Size(100, NaN),
                    alignment: go.Spot.Top,
                    alignmentFocus: go.Spot.Bottom,
                    editable: true
                },
                new go.Binding("text").makeTwoWay())
        ),
        //new go.Binding("height", "node", () => 160),
    );

what am I missing?

Thanks
Pankaj

6

Twice you misspelled the “number” type.

The Data Inspector doesn’t really support nested structures. Your node data seems to have a property named “icon” that is an Object with the property “height”. You will have to extend the implementation of DataInspector.js to show what you want for that “icon” data property.

7

got it. Thanks