Angular Property Binding - NodeDataArray & modelChange - draft.modelData

Hi,

Applied the property Binding to state.nodeDataArray respectively for all of my Palette and Diagram Nodes, but the palette and nodes are not visible in html once it is loaded, which should be similar to angular-GoJS Basic Project…
Am not sure where am getting missed up and request your help on the attached component.
public state = {
// Diagram state props
selectedNodeData: null,
keyMapNodeData: ,
keyMapModelData: { prop: “value” },
skipsDiagramUpdate: false,
// Palette state props
lineNodeData: this.lineDataArray,
fcNodeData: this.fcDataArray,
radioNodeData: this.radDataArray,
paAlarmNodeData: this.paAlarmDataArray,
lineModelData: { prop: “val” },
fcModelData: { prop: “val” },
radioModelData: { prop: “val” },
paAlarmModelData: { prop: “val” }
};
To add on am having a few set of diagrams, is the property is not getting updated because of same repeated names, but they are in different components for sure…

Next can’t use this method to see the changes in one of the other component and ignored it… But it is must for this diagram component and debugged it after setting the timout @ ModelChange Method, but @Line 388 diagram.modelData is not getting triggered from State and prompts with below Error
Property ‘prop’ is missing in type ‘ObjectData’ but required in type ‘WritableDraft<{ prop: string; }>’. and the initDiagram with same key and property as angular gojs basic project…
Kindly request your help for the above two issues.
And attached the codes in the url below
https://angular-apvxer.stackblitz.io
kvm.diagram

Thanks,
Ganesh

I’m sorry, but there isn’t enough information in your post for me to understand what you are doing and thus what might be wrong.

Furthermore when I try to open the stackblitz page, it seems to be “Starting dev server” forever.

It’s odd that you have so many “state” properties that are Objects whose only property is “prop”. Or did you elide the actual data just to show the structure?

I highly recommend trying to simplify as much as possible, starting with something that shows the simplest cases, and then making it more complicated step by step.

Hi Walter, Am working almost similar to the sample project provided in the * Sample app showcasing gojs-angular components For use with gojs-angular version 2.x *

  • public state = {
    // Diagram state props
    diagramNodeData: [
    { id: “Alpha”, text: “Alpha”, color: “lightblue”, loc: “0 0” },
    { id: “Beta”, text: “Beta”, color: “orange”, loc: “100 0” },
    { id: “Gamma”, text: “Gamma”, color: “lightgreen”, loc: “0 100” },
    { id: “Delta”, text: “Delta”, color: “pink”, loc: “100 100” },
    ],
    diagramLinkData: [
    { key: -1, from: “Alpha”, to: “Beta”, fromPort: “r”, toPort: “1” },
    { key: -2, from: “Alpha”, to: “Gamma”, fromPort: “b”, toPort: “t” },
    { key: -3, from: “Beta”, to: “Beta” },
    { key: -4, from: “Gamma”, to: “Delta”, fromPort: “r”, toPort: “l” },
    { key: -5, from: “Delta”, to: “Alpha”, fromPort: “t”, toPort: “r” },
    ],
    diagramModelData: { prop: “value” },
    skipsDiagramUpdate: false,
    selectedNodeData: null, // used by InspectorComponent

    // Palette state props
    paletteNodeData: [
    { key: “Epsilon”, text: “Epsilon”, color: “red” },
    { key: “Kappa”, text: “Kappa”, color: “purple” },
    ],
    paletteModelData: { prop: “val” },
    };*
    Here all are static and in my case I don’t have any linkData. and not static data… That’s the only difference.

And I didn’t elide the data to be shown in palette & diagram… It’s Just appearing directly from the respective GET API without any changes. And due to data policy, can’t share the static data… further it is same as array of objects on the gojs sample mentioned above… Will share a simple output of (jpeg) what am getting while am not using state as nodeDataArray and without modelChange Function…

My concern is in the sample am not managing any data with
palette.model.nodeDataArray… As it works in the sample with property Binding of [nodeDataArray]=state.diagramNodeData… In my codes in stackbiltz, also is not executable as I can’t share the real output… I need to work with respective palette.model.nodeDataArray and diagramModelChange() function, which is not taking effect as shown in sample and there are no any errors… But would like to know the bugs and errors in my code to resolve it…

diagram.model.nodeDataArray = this.state.propertyName is not used in gojs sample and directly managed in HTML with Property Binding, but in my execution am not able to achieve this… and need to assign respectively and update when there are changes for all palettes and diagram…
Which also causes the issue in using diagramModelChange() with diagramModelData and the error for this is

Property ‘prop’ is missing in type ‘ObjectData’ but required in type ‘WritableDraft<{ prop: string; }

Only number of palettes, no linkData and data passed to state is not static are the differences between gojs sample and my component… Request your help on this.

Thanks,
Ganesh

What do you mean by this phrase? How does it change and how are the changes made?

The “gojs-angular” v2 package requires the use of immutable data/state.

Sorry, may be in other terms is dynamic and updating the state nodes with respective API to get the updated one from the backend at all times…

I’m sorry, but I still cannot discern a question that I can answer given the information that you have provided.