An HTML-based inspector that displays and allows editing of data for the selected Part (for example portId)

{"key":3, "name":"unit Three", "loc":"384 319",
"leftArray":[ {"portColor":"#bd8f27", "portId":"left0"},
{"portColor":"#c14617", "portId":"left1"},
{"portColor":"#47fa60", "portId":"left2"} ],
"topArray":[ {"portColor":"#d08154", "portId":"top0"} ],
"bottomArray":[ {"portColor":"#6cafdb", "portId":"bottom0"} ],
"rightArray":[  ] }

Is the sideArray an array?
How to bind sideArray(topArray,bottomArray,rightArray,leftArray) and how do I display the portId of the sideArray in the inspector??

var inspector = new Inspector('myInspectorDiv', myDiagram,
    // uncomment this line to only inspect the named properties below instead of all properties on each object:
    // includesOwnProperties: false,
    properties: {
      "text": { },
      // key would be automatically added for nodes, but we want to declare it read-only also:
      "key": { readOnly: true, show: Inspector.showIfPresent },
      // color would be automatically added for nodes, but we want to declare it a color also:
      "color": { show: Inspector.showIfPresent, type: 'color' },
      // Comments and LinkComments are not in any node or link data (yet), so we add them here:
      "Comments": { show: Inspector.showIfNode  },
      "LinkComments": { show: Inspector.showIfLink },
      "isGroup": { readOnly: true, show: Inspector.showIfPresent },
      "flag": { show: Inspector.showIfNode, type: 'checkbox' },
      "state": {
        show: Inspector.showIfNode,
        type: "select",
        choices: function(node, propName) {
          if (Array.isArray( return;
          return ["one", "two", "three", "four", "five"];
      "choices": { show: false },  // must not be shown at all
      // an example of specifying the  type
      "password": { show: Inspector.showIfPresent, type: 'password' }

I don’t think that the Inspector knows how to handle Arrays. That’s something that you will need to implement.

How do display or hide some properties in inspector?
For example, I’ve bound key, but I don’t want to show it in inspector?
How to implement the Inspector handle Arrays?Is there any information about the Inspector?

The show option on the property that you care about lets you control whether the property is shown.

The complete implementation for the Inspector is in the extensions directory: and .css

A post was split to a new topic: How to bind text on ports