northwoodssoftware / gojs-angular Goto Github PK

Adding angular's component member function as callback to context menu button click is giving error

TypeError: `functionName` is not a function

The stackblitz example: https://stackblitz.com/edit/angular-gojs-family-tree

I have added two menu for explanation where first menu is working fine but the second one where callback method is used is not working.

I also tried to bind the callback to this context using

click: this.buttonCallback.bind(this)

But error is still there.

Same issue is being faced where external methods are being used to return some value to the diagram properties.

Ex.,

$(go.TextBlock, this.getStyle(), new go.Binding('text', 'name'));

private getStyle() {
   return {
        font: '700 12px Droid Serif, sans-serif',
        textAlign: 'center',
        margin: 10, maxSize: new go.Size(80, NaN)
   };
}

I am currently migrating to Angular 16 and encountered a build error related to the gojs-angular library, which seems not to be compatible with Ivy. The error message is as follows:

  node_modules/gojs-angular/lib/gojs-angular.module.d.ts:1:22
    1 export declare class GojsAngularModule {
                           ~~~~~~~~~~~~~~~~~
    This likely means that the library (gojs-angular) which declares GojsAngularModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I would appreciate it if you could provide any updates regarding Ivy compatibility or if there's a workaround to resolve this issue. Thank you!

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!

The error still appears. I have established an easy way of reproducing the error.

First cause the modelchange to fire with any change you want (move a step or copy paste a few graph items).
Then Change the node and link array passed into gojs angular using immer produce ( draft.diagramLinkData.push(any new data)/ draft.diagramNodeData.push(any new data).
Error will appear in console.

SyncLinkData or SyncNodeData is the cause for the error, i am not certain as to why

In the SyncNodeData method of the DataSyncService the following code is not correct:

// account for removed node data
if (changes.removedNodeKeys) {
    const removals = changes.removedNodeKeys.map(key => keyIdxMap.get(key)).sort();
    for (let i = removals.length - 1; i >= 0; i--) {
        draft.splice(removals[i], 1);
    }
}

Specifically the sort() function of javascript is sorting the array of indices as strings. This is the default behavior if no sort function is provided. If you try deleting multiple nodes with indices of different orders of magnitude (for example [10, 11, 7]) a semi-random node will be deleted instead. The correct version of the code would look like this:

// account for removed node data
if (changes.removedNodeKeys) {
    const removals = (changes.removedNodeKeys.map((key) => keyIdxMap.get(key)) as number[]).sort(
        (a, b) => a - b
    );
    for (let i = removals.length - 1; i >= 0; i--) {
        draft.splice(removals[i], 1);
    }
}

The SyncLinkData method behaves analogously.

I'm using gojs-angular in my Angular 8 application.

I followed the instructions from the Family Tree example: https://gojs.net/latest/samples/familyTree.html

But to render the family tree using gojs-angular, I have to pass the family data at three different places.

1. nodeDataArray input of the component
2. modelData input of the component
3. Also assign to go diagram model property.

Recreate Issue

I created an example stackblitz: https://stackblitz.com/edit/angular-gojs-family-tree

Remove any of the above property and the graph rendering will fail.

Environment

Angular: 8
gojs-angular: 1.0.0
gojs: 2.1.5

Once again I am faced with this error. After a lot of tracing I found that it occurs when you bind an itemarray to a property on the nodedata. When a change is triggered on the node data and the updatetargetbindings gets called, it tries to add gohashid to the itemarray object and the objects inside the array for some reason? It is not two way binding.

Since gojs angular uses immutable data, it then breaks.

createPortArea(direction: string, alignment: go.Spot, portCollection: string): go.GraphObject {
        const portTemplate = new PortTemplate(this.canvasService);
        return goMake(go.Panel, direction, {
            name: portCollection,
            alignment,
            itemTemplate: portTemplate.getPortTemplate(alignment)
        } as go.Panel,
        new go.Binding('itemArray', '', (node: NodeData, target: go.GraphObject): PortData[] => node[portCollection])

        );
    }

After I delete a link and the synclinkdata function runs, I receive an error:

This seems to happen when there is a change that contains both a removal and a change in link data.

No app.component file found in the solution

When using the data sync service, if the nodeCategoryProperty is set to a custom field or if the
linkKeyProperty is set to a value other than 'key', the sync does not work.

The lines responsible of this behaviour are:

There is a case that makes the method mergeChanges(component, kvchanges, str) from the gojs-angular library get stuck in an infinite loop. More specifically, is a non-ending recursion call in the compareObjs(obj1, obj2) method.

I think it's caused by the circular structure discussed here.

My guess is that in the line if (!compareObjs(obj1[p], obj2[p])) it never ends, because of that circular structure mentioned before.

Here is the code, just imagine that the obj1 has a reference to itself in any property: the recursion would never end.

function compareObjs(obj1, obj2) {
            // Loop through properties in object 1
            for (const p in obj1) {
                // Check property exists on both objects
                if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p))
                    return false;
                switch (typeof (obj1[p])) {
                    // Deep compare objects
                    case 'object':
                        if (!compareObjs(obj1[p], obj2[p]))
                            return false;
                        break;
                    // Compare values
                    default:
                        if (obj1[p] !== obj2[p])
                            return false;
                }
            }
            // Check object 2 for any extra properties
            for (const p in obj2) {
                if (typeof (obj1[p]) === 'undefined')
                    return false;
            }
            return true;
        }

Please only report potential bugs or suggestions for gojs-angular itself.

For GoJS help and support generally, please use the GoJS forum: https://forum.nwoods.com/c/gojs

Or Contact Us: https://www.nwoods.com/contact.html

with immer 10 syncNodeData and syncLinkData cause undefined-type errors

Sincerely request for immer 10 support

I am trying to have a discussion with support and it would be very easy to share code on Stackblitz, but once I upgrade after Angular 12.5 things stop working. Here is an example I got up to Angular 12.5 then past that it won't work, just to be clear the only thing I did between 12.5 working example is upgrade dependencies:

Works (v12.5)

https://stackblitz.com/edit/angular-gojs-xa4mc1?file=README.md

Does NOT work (v14+)

https://stackblitz.com/edit/angular-gojs-48pipq?file=README.md

Error in src/app/library/library.component.ts (1:29)
Cannot find module '@angular/compiler/src/render3/r3_ast' or its corresponding type declarations.

Here is another example that works LOCALLY on my machine but doesn't work in Stackblitz:

https://stackblitz.com/edit/github-xjnzp2?file=src/app/_components/drag-drop/drag-drop.component.ts

Error in src/app/app.module.ts (19:5)
'GojsAngularModule' does not appear to be an NgModule class.

I am getting an error after making changes to the model input by using immer produce. This happens after a change triggers a diagram update.