Debug Inspector Usage

GoJS
1

You know there is debug inspector in GOJS extensions. Thanks to it, we can show property of nodes or links. But I want to show combo box or anything else about form elements. How can i do that? I mean that property has options and selected one is showed. In fact this inspector can do it when it shows the default property of nodes. But the important point is data Properties. I want to add combo box to data Properties.

Thank you for your answers.

2

Data Inspector demonstrates how to implement a combobox to allow the user to choose a value for a property. Look for type: "select" and choices in the property descriptor.

We haven’t been improving the Debug Inspector, since people haven’t been using it.

3

You are great, thank you for your answer. I use it now and it works. But when i click the empty area in diagram, the inspector show null properties. Maybe it only shows black area, not null properties. Are there any solution for this?

4

Change Inspector.inspectObject to do what you want.

5

I edit updateAllHTML function in DataInspector.js. I also edit css file. I share it if society want to use.

Inspector.prototype.updateAllHTML = function() {
    var inspectedProps = this._inspectedProperties;
    var diagram = this._diagram;
    var isPart = this.inspectedObject instanceof go.Part;
    var data = isPart ? this.inspectedObject.data : this.inspectedObject;
    if (!data) {  // clear out all of the fields
        var mainDiv = this._div;
        mainDiv.className = "inspector";
        mainDiv.innerHTML = "";
       /* for (var name in inspectedProps) {
            var input = inspectedProps[name];
            if (input instanceof HTMLSelectElement) {
                input.innerHTML = "";
            } else if (input.type === "color") {
                input.value = "#000000";
            } else if (input.type === "checkbox") {
                input.checked = false;
            } else {
                input.value = "";
            }

        }*/
    } else {
        for (var name in inspectedProps) {
            var input = inspectedProps[name];
            var propertyValue = data[name];
            if (input instanceof HTMLSelectElement) {
                var decProp = this.declaredProperties[name];
                this.updateSelect(decProp, input, name, propertyValue);
            } else if (input.type === "color") {
                input.value = this.convertToColor(propertyValue);
            } else if (input.type === "checkbox") {
                input.checked = !!propertyValue;
            } else {
                input.value = this.convertToString(propertyValue);
            }
        }
    }
}

In DataInspector.css

.inspector {
  /*display: inline-block;*/
  font: bold 14px helvetica, sans-serif;
  background-color: #212121; /* Grey 900 */
  color: #F5F5F5; /* Grey 100 */
  cursor: default;
}