NorthwoodsSoftware

NorthwoodsSoftware

World-class diagramming libraries to drive your data in the Web and beyond

Member Since 7 years ago

Nashua, NH, USA

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
12
repos
Activity
Jan
12
1 week ago
started
started time in 1 week ago
started
started time in 1 week ago
started
started time in 1 week ago
Activity icon
fork

cradele forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
cradele Updated
fork time in 1 week ago
Jan
11
1 week ago
started
started time in 1 week ago
Activity icon
fork

hasanovkamol forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
hasanovkamol Updated
fork time in 1 week ago
started
started time in 1 week ago
Activity icon
fork

eldrogachino21 forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
eldrogachino21 Updated
fork time in 1 week ago
started
started time in 1 week ago
started
started time in 1 week ago
Jan
10
1 week ago
Activity icon
fork

OWLThreatIntel forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
OWLThreatIntel Updated
fork time in 1 week ago
Activity icon
fork

Viraajnehal forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Viraajnehal Updated
fork time in 1 week ago
Activity icon
fork

tBlabs forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
tBlabs Updated
fork time in 1 week ago
started
started time in 1 week ago
started
started time in 1 week ago
Activity icon
fork

bhikkhu-kosalla-china forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
bhikkhu-kosalla-china Updated
fork time in 1 week ago
Jan
9
1 week ago
Activity icon
fork

chris-han forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
chris-han Updated
fork time in 1 week ago
Jan
8
1 week ago
started
started time in 1 week ago
started
started time in 1 week ago
Jan
7
1 week ago
Activity icon
fork

Yitter-Crushes2 forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Yitter-Crushes2 Updated
fork time in 1 week ago
started
started time in 1 week ago
Activity icon
fork

sarthya forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
sarthya Updated
fork time in 1 week ago
Activity icon
issue

matthewmicallef issue comment NorthwoodsSoftware/gojs-angular

matthewmicallef
matthewmicallef

(modelChange) not being triggered when the link object is custom and `data` prop modified

Hi,

I'm not exactly positive if this is a bug or not but it's a scenario I've encountered in one of my usages of the library.

The (modelChange) Angular output on the <gojs-diagram> component, does not trigger whenever i specifically try modifying the data property of a specific link. I am including a code sample below for further clarification.

Note: My gut feeling tells me I'm somehow doing this wrong but on other node properties, using the setProperties(...) works perfectly fine, while on link properties the setProperties(...) is only working for 'original' (non-custom) link properties.

Example: (please note example has been simplified on-purpose HTML:

    <gojs-diagram
      #myDiagram
      (modelChange)='diagramModelChange($event)'
      [initDiagram]='initDiagram'
      [linkDataArray]='state.diagramLinkData'
      [nodeDataArray]='state.diagramNodeData'
      [skipsDiagramUpdate]='state.skipsDiagramUpdate'
      divClassName='myDiagramDiv'
    >
    </gojs-diagram>

TS:

...

state = {
  diagramNodeData: [
    {
      id: 1,
      text: 'Alpha',
    },
    {
      id: 2,
      text: 'Beta',
    },
  ],
  diagramLinkData: [
    {
      key: 1,
      from: 1,
      to: 2,
      text: 'transition',
      customLabel: 'myCustomLabel' // <--- This is my issue (custom property)
    },
  ],
}

...

Then in the initDiagram() function where I declare my link template I am binding the customLabel text as follows:

...
      $$(
        go.TextBlock, new go.Binding('text', 'customLabel'),
      ),
...

My main issue/question here is: how do I update the customLabel text dynamically/programmatically?

I've tried using the below approach but even though the text update happens successfully, whenever I use the below code and update the data property below, from that point onwards the (modelChange) output stops triggering for any links that get deleted, whilst for nodes updates it still works ok.

      // once the below code executes, I stop receiving updates on the `modelChange` for any links (e.g. link deletion, etc...)
      this.myDiagramComponent.diagram
        .findLinkForKey(1) // using ID 1 for example
        .setProperties({
          data: {
            customLabel: 'newCustomLabelValue'
          }
        });

I'm concerned that I'm doing the above, last part wrong here, but I couldn't find any other way of how to update 'custom labels' dynamically on links and couldn't find any examples in the docs.

Thanks!

matthewmicallef
matthewmicallef

Yes @WalterNorthwoods I understand. Thanks a lot for the help! Much appreciated.

Activity icon
issue

WalterNorthwoods issue comment NorthwoodsSoftware/gojs-angular

WalterNorthwoods
WalterNorthwoods

(modelChange) not being triggered when the link object is custom and `data` prop modified

Hi,

I'm not exactly positive if this is a bug or not but it's a scenario I've encountered in one of my usages of the library.

The (modelChange) Angular output on the <gojs-diagram> component, does not trigger whenever i specifically try modifying the data property of a specific link. I am including a code sample below for further clarification.

Note: My gut feeling tells me I'm somehow doing this wrong but on other node properties, using the setProperties(...) works perfectly fine, while on link properties the setProperties(...) is only working for 'original' (non-custom) link properties.

Example: (please note example has been simplified on-purpose HTML:

    <gojs-diagram
      #myDiagram
      (modelChange)='diagramModelChange($event)'
      [initDiagram]='initDiagram'
      [linkDataArray]='state.diagramLinkData'
      [nodeDataArray]='state.diagramNodeData'
      [skipsDiagramUpdate]='state.skipsDiagramUpdate'
      divClassName='myDiagramDiv'
    >
    </gojs-diagram>

TS:

...

state = {
  diagramNodeData: [
    {
      id: 1,
      text: 'Alpha',
    },
    {
      id: 2,
      text: 'Beta',
    },
  ],
  diagramLinkData: [
    {
      key: 1,
      from: 1,
      to: 2,
      text: 'transition',
      customLabel: 'myCustomLabel' // <--- This is my issue (custom property)
    },
  ],
}

...

Then in the initDiagram() function where I declare my link template I am binding the customLabel text as follows:

...
      $$(
        go.TextBlock, new go.Binding('text', 'customLabel'),
      ),
...

My main issue/question here is: how do I update the customLabel text dynamically/programmatically?

I've tried using the below approach but even though the text update happens successfully, whenever I use the below code and update the data property below, from that point onwards the (modelChange) output stops triggering for any links that get deleted, whilst for nodes updates it still works ok.

      // once the below code executes, I stop receiving updates on the `modelChange` for any links (e.g. link deletion, etc...)
      this.myDiagramComponent.diagram
        .findLinkForKey(1) // using ID 1 for example
        .setProperties({
          data: {
            customLabel: 'newCustomLabelValue'
          }
        });

I'm concerned that I'm doing the above, last part wrong here, but I couldn't find any other way of how to update 'custom labels' dynamically on links and couldn't find any examples in the docs.

Thanks!

WalterNorthwoods
WalterNorthwoods

About calling GraphObject.setProperties:

Normally one should not call this at run-time, because it is inefficient. But you are just modifying one link, and you are using Angular anyway, so that's not a problem. https://gojs.net/latest/api/symbols/GraphObject.html#setProperties

But the real issue is that you are setting Panel.data, which is normally reserved to the internal code that copies templates and manages bindings and all that. https://gojs.net/latest/api/symbols/Panel.html#data

Activity icon
issue

matthewmicallef issue NorthwoodsSoftware/gojs-angular

matthewmicallef
matthewmicallef

(modelChange) not being triggered when the link object is custom and `data` prop modified

Hi,

I'm not exactly positive if this is a bug or not but it's a scenario I've encountered in one of my usages of the library.

The (modelChange) Angular output on the <gojs-diagram> component, does not trigger whenever i specifically try modifying the data property of a specific link. I am including a code sample below for further clarification.

Note: My gut feeling tells me I'm somehow doing this wrong but on other node properties, using the setProperties(...) works perfectly fine, while on link properties the setProperties(...) is only working for 'original' (non-custom) link properties.

Example: (please note example has been simplified on-purpose HTML:

    <gojs-diagram
      #myDiagram
      (modelChange)='diagramModelChange($event)'
      [initDiagram]='initDiagram'
      [linkDataArray]='state.diagramLinkData'
      [nodeDataArray]='state.diagramNodeData'
      [skipsDiagramUpdate]='state.skipsDiagramUpdate'
      divClassName='myDiagramDiv'
    >
    </gojs-diagram>

TS:

...

state = {
  diagramNodeData: [
    {
      id: 1,
      text: 'Alpha',
    },
    {
      id: 2,
      text: 'Beta',
    },
  ],
  diagramLinkData: [
    {
      key: 1,
      from: 1,
      to: 2,
      text: 'transition',
      customLabel: 'myCustomLabel' // <--- This is my issue (custom property)
    },
  ],
}

...

Then in the initDiagram() function where I declare my link template I am binding the customLabel text as follows:

...
      $$(
        go.TextBlock, new go.Binding('text', 'customLabel'),
      ),
...

My main issue/question here is: how do I update the customLabel text dynamically/programmatically?

I've tried using the below approach but even though the text update happens successfully, whenever I use the below code and update the data property below, from that point onwards the (modelChange) output stops triggering for any links that get deleted, whilst for nodes updates it still works ok.

      // once the below code executes, I stop receiving updates on the `modelChange` for any links (e.g. link deletion, etc...)
      this.myDiagramComponent.diagram
        .findLinkForKey(1) // using ID 1 for example
        .setProperties({
          data: {
            customLabel: 'newCustomLabelValue'
          }
        });

I'm concerned that I'm doing the above, last part wrong here, but I couldn't find any other way of how to update 'custom labels' dynamically on links and couldn't find any examples in the docs.

Thanks!

Activity icon
issue

matthewmicallef issue comment NorthwoodsSoftware/gojs-angular

matthewmicallef
matthewmicallef

(modelChange) not being triggered when the link object is custom and `data` prop modified

Hi,

I'm not exactly positive if this is a bug or not but it's a scenario I've encountered in one of my usages of the library.

The (modelChange) Angular output on the <gojs-diagram> component, does not trigger whenever i specifically try modifying the data property of a specific link. I am including a code sample below for further clarification.

Note: My gut feeling tells me I'm somehow doing this wrong but on other node properties, using the setProperties(...) works perfectly fine, while on link properties the setProperties(...) is only working for 'original' (non-custom) link properties.

Example: (please note example has been simplified on-purpose HTML:

    <gojs-diagram
      #myDiagram
      (modelChange)='diagramModelChange($event)'
      [initDiagram]='initDiagram'
      [linkDataArray]='state.diagramLinkData'
      [nodeDataArray]='state.diagramNodeData'
      [skipsDiagramUpdate]='state.skipsDiagramUpdate'
      divClassName='myDiagramDiv'
    >
    </gojs-diagram>

TS:

...

state = {
  diagramNodeData: [
    {
      id: 1,
      text: 'Alpha',
    },
    {
      id: 2,
      text: 'Beta',
    },
  ],
  diagramLinkData: [
    {
      key: 1,
      from: 1,
      to: 2,
      text: 'transition',
      customLabel: 'myCustomLabel' // <--- This is my issue (custom property)
    },
  ],
}

...

Then in the initDiagram() function where I declare my link template I am binding the customLabel text as follows:

...
      $$(
        go.TextBlock, new go.Binding('text', 'customLabel'),
      ),
...

My main issue/question here is: how do I update the customLabel text dynamically/programmatically?

I've tried using the below approach but even though the text update happens successfully, whenever I use the below code and update the data property below, from that point onwards the (modelChange) output stops triggering for any links that get deleted, whilst for nodes updates it still works ok.

      // once the below code executes, I stop receiving updates on the `modelChange` for any links (e.g. link deletion, etc...)
      this.myDiagramComponent.diagram
        .findLinkForKey(1) // using ID 1 for example
        .setProperties({
          data: {
            customLabel: 'newCustomLabelValue'
          }
        });

I'm concerned that I'm doing the above, last part wrong here, but I couldn't find any other way of how to update 'custom labels' dynamically on links and couldn't find any examples in the docs.

Thanks!

matthewmicallef
matthewmicallef

Great, thanks @rjohnson465 it worked! I was using immer to immutable update other custom node/link properties but strangely enough, not for this one.

Just to confirm, is it wrong to use setProperties in all scenarios (e.g. updating node color, link category, etc...)? So that I would avoid it if that's the case.

Thanks again! Much appreciated. Closing this issue.

Activity icon
fork

jagoraxm forked NorthwoodsSoftware/GoJS

⚡ JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
jagoraxm Updated
fork time in 1 week ago
Jan
6
2 weeks ago
Activity icon
issue

rjohnson465 issue comment NorthwoodsSoftware/gojs-angular

rjohnson465
rjohnson465

(modelChange) not being triggered when the link object is custom and `data` prop modified

Hi,

I'm not exactly positive if this is a bug or not but it's a scenario I've encountered in one of my usages of the library.

The (modelChange) Angular output on the <gojs-diagram> component, does not trigger whenever i specifically try modifying the data property of a specific link. I am including a code sample below for further clarification.

Note: My gut feeling tells me I'm somehow doing this wrong but on other node properties, using the setProperties(...) works perfectly fine, while on link properties the setProperties(...) is only working for 'original' (non-custom) link properties.

Example: (please note example has been simplified on-purpose HTML:

    <gojs-diagram
      #myDiagram
      (modelChange)='diagramModelChange($event)'
      [initDiagram]='initDiagram'
      [linkDataArray]='state.diagramLinkData'
      [nodeDataArray]='state.diagramNodeData'
      [skipsDiagramUpdate]='state.skipsDiagramUpdate'
      divClassName='myDiagramDiv'
    >
    </gojs-diagram>

TS:

...

state = {
  diagramNodeData: [
    {
      id: 1,
      text: 'Alpha',
    },
    {
      id: 2,
      text: 'Beta',
    },
  ],
  diagramLinkData: [
    {
      key: 1,
      from: 1,
      to: 2,
      text: 'transition',
      customLabel: 'myCustomLabel' // <--- This is my issue (custom property)
    },
  ],
}

...

Then in the initDiagram() function where I declare my link template I am binding the customLabel text as follows:

...
      $$(
        go.TextBlock, new go.Binding('text', 'customLabel'),
      ),
...

My main issue/question here is: how do I update the customLabel text dynamically/programmatically?

I've tried using the below approach but even though the text update happens successfully, whenever I use the below code and update the data property below, from that point onwards the (modelChange) output stops triggering for any links that get deleted, whilst for nodes updates it still works ok.

      // once the below code executes, I stop receiving updates on the `modelChange` for any links (e.g. link deletion, etc...)
      this.myDiagramComponent.diagram
        .findLinkForKey(1) // using ID 1 for example
        .setProperties({
          data: {
            customLabel: 'newCustomLabelValue'
          }
        });

I'm concerned that I'm doing the above, last part wrong here, but I couldn't find any other way of how to update 'custom labels' dynamically on links and couldn't find any examples in the docs.

Thanks!

rjohnson465
rjohnson465

Don't use setProperties -- the model will not know about that change.

Either use immer to immutably update the data at the app-level, or use model.setDataProperty so the GoJS model is alerted of the change. https://gojs.net/latest/api/symbols/Model.html#setDataProperty