Palette appears like a small box in accordion

I am evaluating GoJs and I am trying to add a palette to an angular-material-accordion. And each accordion is placed under angular material tabs.
I am using angular 9 and gojs-angular.
Working on Windows 10.

my Node template and palette looks like below.

        initPalette(): go.Palette {
        const $ = go.GraphObject.make;
         this.palette = $(go.Palette);

 this.palette.nodeTemplate =$(go.Node, "Auto",
 // for sorting, have the Node.text be the
 new go.Binding("text", "name"),
 // bind the Part.layerName to control the Node's layer depending on whether it isSelected
 new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; 
  // define the node's outer shape
 $(go.Shape, "Rectangle",
     name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
     // set the port properties:
     portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
     margin: 0
 $(go.Panel, "Horizontal",
       name: "Picture",
       desiredSize: new go.Size(35,35)
     new go.Binding("source", "key", findHeadShot)),
   // define the panel where the text will appear
   $(go.Panel, "Table",
       minSize: new go.Size(130, NaN),
       maxSize: new go.Size(180, NaN),
       margin: new go.Margin(0, 0, 0, 0),
       defaultAlignment: go.Spot.Left
     $(go.RowColumnDefinition, { column: 2, width: 2}),
     $(go.TextBlock, textStyle(),  // the name
         row: 0, column: 0, columnSpan: 3,
         font: "10pt Segoe UI,sans-serif",
         editable: true, isMultiline: false,
         minSize: new go.Size(10, 16),
          margin: 0
       new go.Binding("text", "name").makeTwoWay())

        )  // end Table Panel
      ) // end Horizontal Panel
    );  // end Node

     // This function provides a common style for most of the TextBlocks.
        // Some of these values may be overridden in a particular TextBlock.
        function textStyle() {
     return { font: "8pt  Segoe UI,sans-serif", stroke: "white" };

   // This converter is used by the Picture.
   function findHeadShot(key) {
 if (key < 0 || key > 16) return "images/HSnopic.jpg"; // There are only 16 images on the server
 return "assets/demo-client.png";

//------------------Set the Layout for palette------------------------------------
   this.palette.layout= $(go.GridLayout,
     { sorting: go.GridLayout.Ascending},
     {wrappingColumn: 1},
     {cellSize: go.Size.parse('1 1')},
     {spacing: new go.Size(0,0) },
     {arrangement: go.GridLayout.LeftToRight},

//---------------Layout Styling ends here----------------------------
 return this.palette;

My project is shared here on stackblitz.

In First Tab and(Self aware panel) accordion the palette appears normal like below.

But in the Second tab and accordion the palette looks like this.

I tried searching for similar issues, and this appears similar to this.

My guess is that you need to inform the Diagram that its HTML DIV element has changed size. Please read

Hi walter,

The palette is not resizing after using the this.palette.requestUpdate() on the accordion open event.

here is my updated stackblitz with the code.

If I am understanding your code correctly, it seems wasteful to re-create the Palette each time the panel is expanded.

You need to call Palette.requestUpdate after the panel DIV element has gotten a new width and height.

Hi walter,

I removed the palette code which was creating the palette each time the panel is expanded. The issue is that in initPalette() method , i am initializing the palette as this.palette = $(go.Palette); But once the updatePalette() is invoked , the value of this.palette appears null.

Ideally in angular, the value of class variables is bound with html. But here the value of this.palette is lost .
I observed another behavior that if i create another method and try to access it from initPalette() using this.someMethod(). Then it is also not accessible.
I have updated the StackBlitz with my changes. And the issue is visible in the stackblitz console.

If you set this.someProperty = 17, I would expect that this.someProperty be 17 afterwards. It sounds as if this is a different object. You need to understand that before you can progress.

i have observed this behavior only with initpalette(), this method is mapped with . I tried the project here.
I tested my observation with this project as well. But whatever i try to do within initpalette() apart from initializing the palette, by using this(which specifies current component ) . In those scenario this. or this. are not identified .

Is your use of this within a function(...) { ... }? That would be an error.

I am not calling this from inside a function. To further explain i created below project.
Here is a link of the gojs-angular demo on stackblitz.

the palette is mapped to initPalette() and below code shows it.

 public initPalette(): go.Palette {
const $ = go.GraphObject.make;
const palette = $(go.Palette);

// define the Node template
palette.nodeTemplate =
  $(go.Node, 'Auto',
    $(go.Shape, 'RoundedRectangle',
        stroke: null
      new go.Binding('fill', 'color')
    $(go.TextBlock, { margin: 8 },
      new go.Binding('text', 'key'))

palette.model = $(go.GraphLinksModel,
    linkKeyProperty: 'key'  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
  //Check if this works in initPalette.
return palette;

 // Call this method from initPalette()

I have created another method which is ngOnInit() , i am able to successfully call (this reference) from here.
Please have a look at the stackblitz code.

When I open your StackBlitz sample, there are a lot of errors in the console.

In particular, this one looks suspicious:

preview-00cf61ef72af9a6058a4b.js:1 ERROR TypeError: this.test is not a function
    at PaletteComponent.AppComponent.initPalette (app.component.ts:92)

Check in the window console here in stackblitz.


My point is if i use this reference in ngonInit() it works fine.
Why doesn’t it work in initPalette().
This is weird behavior.

Oh, you aren’t asking anything about GoJS, but about how Angular and JavaScript work.

I think it’s because the class implements an interface, but you are defining a method on the class. At the time the function that is part of the interface is called, it’s not being called on an instance of the class, but on just a regular object having those functional properties on it, so there is no “this” value.

At least that’s my guess. You’ll need to either step through the app in the Angular code, or ask someone who actually knows something about Angular.

Is there anyone who has worked on this angular project. The gojs-angular one. mentioned here:

I need to save the instance of palette and use it later.Which is not happening.Whatever object initPalette() is creating for us. For now initPalette() creates a const palette and returns it. i am trying to save it to a different variable which is a class member. But that is not happening because this reference is not working there. Is there any other way i can do that.

But it’s already available on the PaletteComponent as the PaletteComponent.palette property. That’s what saves the return value from the initPalette function.

And you can get the PaletteComponent in your AppComponent as the AppComponent.myPaletteComponent.