how to listen list item change on inspector

[falmko]

Introduction

When I use Inspector, I encount a failure.
It is that how to listen change on list.
I find that below is valid, but how to get index of list item I changed.

argsInspector.on('change:args/0/type', function(cell, changes) {
    console.log('Args inspector change:', changes);
});

'args/${index}/type' is invalid which is valid in 'when' option.
inspector inputs below
'Port': {
tabs: ['general', 'args', 'return'],
inputs: {
general: {
name: {
type: "text",
group: "basic",
label: "Port Name"
},
kind: {
type: "select",
options: portKindOptions,
group: "basic",
label: "Port Kind"
},
namespace: {
type: "text",
group: "basic",
label: "Namespace"
},
priority: {
type: "number",
group: "advanced",
label: "Priority",
when: { eq: { kind: PortKind.ASYNC_INPUT } },
defaultValue: 1
},
max_number: {
type: "number",
group: "advanced",
label: "Max Number"
},
full: {
type: "select",
options: queueFullOptions,
group: "advanced",
label: "Queue Full Behavior",
when: { eq: { kind: PortKind.ASYNC_INPUT } },
defaultValue: queueFullOptions[0].value
},
role: {
type: "text",
group: "advanced",
label: "Role"
},
comment: {
type: "textarea",
group: "basic",
label: "Description"
}
},
args: {
args: {
type: "list",
addButtonLabel: "Add Argument",
item: {
type: "object",
properties: {
name: {
type: "text",
label: "Argument Name",
index: 1,
defaultValue: "arg"
},
type: {
type: "select",
options: fppTypeOptions,
label: "Type",
index: 2,
defaultValue: 0
},
size: {
type: "number",
label: "Size (string only)",
index: 3,
when: { eq: { 'args/${index}/type': 11 }}, // string类型索引
defaultValue: 20
},
pass_by: {
type: "select",
options: passByOptions,
label: "Pass By",
index: 4,
defaultValue: PassBy.DEFAULT
}
}
}
}
},
return: {
"return": {
type: "object",
properties: {
type: {
type: "select",
options: [
{ value: null, content: 'None (void)' },
...fppTypeOptions
],
label: "Return Type",
defaultValue: null
},
pass_by: {
type: "select",
options: passByOptions,
label: "Pass By",
when: { notnull: { 'return/type': null } },
defaultValue: PassBy.DEFAULT
}
}
}
}
}
}

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[zbynekstara]

Hi falmko,

Unfortunately, the inspector always triggers a specific event name for changes in lists (like change:args/0/type) and not a generic one like what works in the when definition.

As a workaround, you can use the graph (or element) listener (see here for details: https://docs.jointjs.com/api/dia/Element/#change), check if the change is coming from inspector (i.e. opt.inspector is not undefined), and see what the original property path was via opt.propertyPath or opt.propertyPathArray (see here: https://docs.jointjs.com/learn/features/shapes/model-attributes#relationship-between-prop-and-attr-methods).

For example:

graph.on('change:args', (element, modifiedArray, opt) => {
    if (opt.inspector) {
        console.log(opt.propertyPathArray, 'was changed'); // --> ['args', '0', 'type'] 'was changed'
    }
});

[falmko]

@zbynekstara Thanks for your suggestion. I get it!

Below are generated by AI for recording this issue.

JointJS Community Q&A: Optimizing Port Inspector Event Listening Mechanism

Background

While developing a graphical editor using the JointJS library, I based my work on the official Port Drag & Drop demo and UML Class Shape Inspector examples to add property editing functionality for ports.

🔍 Key Issue: Temporary Model and Data Binding

Important Implementation Detail:

When configuring an inspector for a port, I created a temporary model as the data source:

let tempModel = null;
if (port.properties.classType === 'InputPort') {
    // Create temporary model for Inspector to use
    tempModel = new dia.Cell({
        id: `port-${portId}`,
        type: 'InputPort',
        classType: 'InputPort',  // Add classType to match inspectorConfigs key
        // Expand port properties, ensuring each property is a top-level property
        ...JSON.parse(JSON.stringify(port.properties))
    });
} else {
    // Create temporary model for Inspector to use
    tempModel = new dia.Cell({
        id: `port-${portId}`,
        type: 'OutputPort',
        classType: 'OutputPort',  // Add classType to match inspectorConfigs key
        // Expand port properties, ensuring each property is a top-level property
        ...JSON.parse(JSON.stringify(port.properties))
    });
}

Key Challenge: How to bind data updates from the tempModel to the actual model

Initial Inefficient Solution

My initial solution: Add individual event listeners for each property and for every possible position in the args array, regardless of whether they exist. This approach was inefficient and resulted in redundant code.

// Add separate listeners for each regular property
const propertyKeys = ['name', 'kind', 'namespace', 'priority', 'max_number', 'full', 'role', 'comment'];
propertyKeys.forEach(key => {
    generalInspector.on(`change:${key}`, function(value, inputEl) {
        _element.portProp(portId, `properties/${key}`, value);
        // Special property handling...
    });
});

// Add listeners for each possible position in the args list
for(let i = 0; i < 5; i++){
    propertyKeys.push(`args/${i}/type`);
    propertyKeys.push(`args/${i}/pass_by`);
    // ...more properties
}
// Similar approach for handling return properties

This approach was inefficient because:

• It required many individual event listeners
• It artificially limited the number of args to monitor
• Code was verbose and repetitive
• Adding new properties required modifying the listener setup

Community Question

I posted a question on the JointJS community forum, describing my implementation and asking if there was a more efficient solution.

Expert Answer

Community member zbynekstara pointed out that I could use the tempModel's change event and the propertyPath information in the opt parameter to simplify the code using a single event listener.

Implemented Solution

Based on the expert's suggestion, I refactored my code:

tempModel.on('change', function(element, opt) {
    console.log("tempModel change", element, opt);
    
    // Ensure there is valid change information
    if (!opt || !opt.propertyPath || opt.propertyValue === undefined) return;
    
    // Update port property
    _element.portProp(portId, `properties/${opt.propertyPath}`, opt.propertyValue);
    
    // Handle special properties
    if (opt.propertyPath === 'name') {
        _element.portProp(portId, 'attrs/portLabel/text', opt.propertyValue);
    } else if (opt.propertyPath === 'kind') {
        const portColors = {
            'SYNC_INPUT': '#ff9580',
            'GUARDED_INPUT': '#ffc880',
            'ASYNC_INPUT': '#ffff80',
            'OUTPUT': '#80ff95'
        };
        _element.portProp(portId, 'attrs/portBody/fill', portColors[opt.propertyValue] || '#ff9580');
    }
});

---

JointJS社区问答记录：优化端口Inspector事件监听机制

背景情况

在使用JointJS库开发图形编辑器时，我基于官方的Port Drag & Drop demo和UML Class Shape Inspector示例，为端口添加了属性编辑功能。

🔍 关键问题：临时模型与数据绑定

重要实现细节：

在为端口配置inspector时，我创建了临时模型作为数据源：

let tempModel = null;
if (port.properties.classType === 'InputPort') {
    // 创建临时模型以供Inspector使用
    tempModel = new dia.Cell({
        id: `port-${portId}`,
        type: 'InputPort',
        classType: 'InputPort',  // 添加classType以匹配inspectorConfigs的键
        // 展开端口属性，确保每个属性都是顶级属性
        ...JSON.parse(JSON.stringify(port.properties))
    });
} else {
    // 创建临时模型以供Inspector使用
    tempModel = new dia.Cell({
        id: `port-${portId}`,
        type: 'OutputPort',
        classType: 'OutputPort',  // 添加classType以匹配inspectorConfigs的键
        // 展开端口属性，确保每个属性都是顶级属性
        ...JSON.parse(JSON.stringify(port.properties))
    });
}

关键挑战：如何将tempModel的数据更新绑定到真正的model上

初始低效解决方案

我最初的解决方案：为每个属性单独添加事件监听器，并为args数组的每个可能位置添加监听器，无论它们是否存在。这种方法效率低下且代码冗余。

// 为每个普通属性添加单独的监听器
const propertyKeys = ['name', 'kind', 'namespace', 'priority', 'max_number', 'full', 'role', 'comment'];
propertyKeys.forEach(key => {
    generalInspector.on(`change:${key}`, function(value, inputEl) {
        _element.portProp(portId, `properties/${key}`, value);
        // 特殊属性处理...
    });
});

// 为args列表中的每个可能位置添加监听器
for(let i = 0; i < 5; i++){
    propertyKeys.push(`args/${i}/type`);
    propertyKeys.push(`args/${i}/pass_by`);
    // ...更多属性
}
// 类似的方式处理return属性

这种方法效率低下，原因如下：

• 需要创建大量单独的事件监听器
• 人为限制了要监控的args数量
• 代码冗长且重复
• 添加新属性需要修改监听器设置

社区提问

我在JointJS社区论坛上提出了问题，描述了我的实现方式，并询问是否有更高效的解决方案。

专家解答

社区成员zbynekstara指出可以利用tempModel的change事件和opt参数中的propertyPath信息来简化代码，使用单一的事件监听器。

实施解决方案

根据专家建议，我重构了代码：

tempModel.on('change', function(element, opt) {
    console.log("tempModel change", element, opt);
    
    // 确保有有效的变更信息
    if (!opt || !opt.propertyPath || opt.propertyValue === undefined) return;
    
    // 更新端口属性
    _element.portProp(portId, `properties/${opt.propertyPath}`, opt.propertyValue);
    
    // 处理特殊属性
    if (opt.propertyPath === 'name') {
        _element.portProp(portId, 'attrs/portLabel/text', opt.propertyValue);
    } else if (opt.propertyPath === 'kind') {
        const portColors = {
            'SYNC_INPUT': '#ff9580',
            'GUARDED_INPUT': '#ffc880',
            'ASYNC_INPUT': '#ffff80',
            'OUTPUT': '#80ff95'
        };
        _element.portProp(portId, 'attrs/portBody/fill', portColors[opt.propertyValue] || '#ff9580');
    }
});