Properties in the DataInspector should be included in the model

GoJS
1

I have a button in a customized inspector that appears in a flowchart when a validation figure is selected. This button opens a modal, and inside the modal, there’s a textarea. How can I add the data from the textarea to the diagram model in such a way that, when importing, exporting, or saving, this custom property is included in the generated JSON?

diagram.addDiagramListener("ChangedSelection", (e: { subject: { first: () => any; each: (arg0: { (part: go.Node): void; (part: Node): void; }) => void; }; diagram: { nodes: { each: (arg0: (node: go.Node) => void) => void; }; model: { removeNodeData: (arg0: any) => void; }; }; }) => {
    const selectedNode = e.subject.first();
    const category = selectedNode ? selectedNode.data.category : null;

    // Mostrar u ocultar el segundo inspector basado en la categoría del nodo seleccionado
    if (category === 'Message' || (category === 'Question' && textTypes.includes(selectedNode?.data.question_type_id))) {
      showInspector2(propertiesText);
    } else if (category === 'Question' && optionTypes.includes(selectedNode?.data.question_type_id) || category === 'Template') {
      showInspector2(propertiesOption);
    } else if (category === 'Question' && selectedNode?.data.question_type_id === 'Number') {
      showInspector2(PropertiesNumber);
    } else if (category === 'Validation') {
      validate.value = true;

 <div v-if="validate" id="propertyInspector" class="inspector">
          <h2 class="im-w-full im-text-left im-text-primary-jade-500 im-font-figtree">Validation (*)</h2>
          <Button id="confirm-modal" label="Validation" @click="openModalValidation" color="jade" /fv>
        </div>```

diagram.model = new GraphLinksModel(state.nodeDataArray, state.linkDataArray, {
linkFromPortIdProperty: “formPort”,
linkToPortIdProperty: “toPort”,
});
});

2

You can probably just call Model.set to ensure the data property is set in the model. Then it will be included if you call Model.toJson.

3

Thanks Jhardy, that’s the solution.

const model = diagramRef.value?.model;
        
        const nodeData = model!.findNodeDataForKey(validationNode.value);
        if (nodeData) {
          model!.set(nodeData, "code", code);
        }
4

I hope you are executing such modifications within a transaction, so thatundi and redo work.

5

No, I’m not including it within a transaction. Thanks for your observation, I’ll do that!