How to use Inspector on inner Panel properly?

Hi,
I have some trouble with this, when I click a node inspector will show the “fill” property only,
截圖 2022-02-24 上午11.32.36

if I click the panel inside the node, inspector will show “condition”, “showBox”.
截圖 2022-02-24 上午11.32.54

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.
截圖 2022-02-24 上午11.33.33
截圖 2022-02-24 上午11.33.38

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
    );

I’m wondering if when data properties are updated it’s losing its “focus” on what is being inspected. We’ll look into this. Thanks for reporting the problem.

I’m not able to reproduce the problem. I started with a copy of the extensions/DataInspector.html page.

I modified the node template so that it has a list of items in it:

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { locationSpot: go.Spot.Center },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Rectangle",
            {
              stroke: null, strokeWidth: 0,
              fill: "white", // the default fill, if there is no data-binding
              portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
              // allow all kinds of links from and to this port
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
            },
            new go.Binding("fill", "color")),
          $(go.Panel, "Vertical",
            $(go.TextBlock,
              {
                font: "bold 18px sans-serif",
                stroke: '#111',
                margin: 8,  // make some extra space for the shape around the text
                isMultiline: false,  // don't allow newlines in text
                editable: true  // allow in-place editing by user
              },
              new go.Binding("text", "text").makeTwoWay()),
            $(go.Panel, "Vertical",
              new go.Binding("itemArray", "items"),
              {
                stretch: go.GraphObject.Horizontal,
                defaultStretch: go.GraphObject.Horizontal,
                itemTemplate:
                  $(go.Panel,
                    {
                      click: (e, panel) => {
                        inspector2.inspectObject(panel.data);
                      }
                    },
                    new go.Binding("background", "color"),
                    $(go.TextBlock,
                      new go.Binding("text"))
                  )
              }
            )
          )
        );

Most of the details of the itemTemplate don’t really matter, but notice that I did define a click event handler that calls Inspector.inspectObject.

      // Show a "selected" item:
      var inspector2 = new Inspector('myInspectorDiv2', myDiagram,
        {
          // By default the inspector works on the Diagram selection.
          // This property lets us inspect a specific object by calling Inspector.inspectObject.
          inspectSelection: false,
          properties: {
            "text": {},
            // This property we want to declare as a color, to show a color-picker:
            "color": { type: 'color' },
          }
        });

Note that it no longer calls:

      // (deleted)
      // inspector2.inspectObject(myDiagram.nodes.first().data);

Here’s some data:

      var nodeDataArray = [
        { key: 1, text: "Alpha", color: "#B2DFDB", state: "one", items: [ ] },
        { key: 2, text: "Beta", color: "#B2B2DB", state: "two", password: "1234" },
        { key: 3, text: "Gamma", color: "#1DE9B6", state: 2, group: 5, flag: false, choices: [1, 2, 3, 4, 5], items: [ { text: "only" } ] },
        { key: 4, text: "Delta", color: "#00BFA5", state: "three", group: 5, flag: true,
          items: [ { text: "one", color: "magenta" }, { text: "two", color: "orange" }, { text: "three", color: "lime" } ] },
        { key: 5, text: "Epsilon", color: "#00BFA5", isGroup: true }
      ];

Everything works well – modifying the color and/or the text of an item does not change which Object is being inspected.

image