Palette Drag and Drop in Angular

bhcarranj · July 22, 2024, 4:05pm

I noticed in the drag and drop sample that there is a palette inside an html div and that the diagram canvas is in a separate html div. I’m trying to recreate the same effect inside an Angular Project where one component contains the diagram and a separate component contains the Palette. I have the Palette and the Diagram appearing but I can’t get the drag and drop feature to work. Below is the code that is related to the diagram and Palette. I have both diagrams appearing on the screen. I just don’t have them interacting with one another. Any help on achieving this in Angular would be appreciated. thanks.

Sample Reference.

Palette typescript File

 initPaletteDiagram(): go.Palette {

    const samplePalette = new go.Palette();

    samplePalette.allowMove = true;
    samplePalette.allowDragOut = true;
    samplePalette.allowResize = true;
    samplePalette.contentAlignment = go.Spot.Center;
    samplePalette.zoomToFit();

    samplePalette.nodeTemplate = 
      new go.Node('Auto')
      .add(
        new go.Shape('RoundedRectangle', {stroke:null})
        .bind('fill', 'color'),
        new go.TextBlock({margin:8})
        .bind('text', 'key')
      );

      

      samplePalette.model = new go.GraphLinksModel(
        {
          linkKeyProperty: 'key'  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
        });
      
        // the list of data to show in the Palette
        samplePalette.model.nodeDataArray = [
  { key: "C", color: "cyan" },
  { key: "LC", color: "lightcyan" },
  { key: "A", color: "aquamarine" },
  { key: "T", color: "turquoise" },
  { key: "PB", color: "powderblue" },
  { key: "LB", color: "lightblue" },
  { key: "LSB", color: "lightskyblue" },
  { key: "DSB", color: "deepskyblue" }
];
    
    return samplePalette;

  }

Palette HTML

<gojs-palette 
    #samplePalette
    [initPalette]="initPaletteDiagram"
    [divClassName]="paletteClassName"
    />

Diagram ts file

initDiagram = (): go.Diagram => {
  const dia = $(go.Diagram, {
      allowDrop: true,
      allowSelect: true
  }

  dia.nodeTemplate =
    new go.Node("Auto")
      .add(
        new go.Shape("RoundedRectangle", {
            fill: "white",
            portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
          })
          .bind("fill", "color"),
        new go.TextBlock({ margin: 5 })
          .bind("text", "color")
      );
  dia.undoManager.isEnabled = true;

  return dia;
}

bhcarranj · July 22, 2024, 4:55pm

I also don’t see that I’m currently able to drag from the Palette. I was noticing that on the Pipes Sample if you click and drag from the palette that the Pipe gets duplicated and it is obvious that you are dragging a Pipe while the mouse is left click and dragged. I do not see that any of my objects are being duplicated at the moment from the panel.

Reference:

walter · July 22, 2024, 5:06pm

So you are saying that a drag within the Palette isn’t showing any interactive behavior, especially the cursor because normally a drop is not allowed in the Palette. If you experiment by setting Palette.isReadOnly to false and Palette.allowMove to true (the opposite of how the Palette constructor sets it up), is the user able to move nodes around within the Palette?

BTW, allowDrop and allowSelect default to true for a regular Diagram instance, so you don’t need to set them.

[EDIT] Have you tried setting the encapsulation option on your components to something other than ViewEncapsulation.ShadowDom? I’m wondering if there’s a problem there.

bhcarranj · July 22, 2024, 8:37pm

I already had allowMove to true, but I did change isReadOnly to false and the shapes were able to drag within the Palette. But that’s not what I’m trying to achieve. Maybe I misspoke with my objective. My objective is to drag a shape from the Palette, and add that selected shape to the Diagram.

bhcarranj · July 22, 2024, 8:40pm

I tried the ViewEncasuplation at None, Emulated, and ShadowDom and neither fixed the issue, in fact the Palette gets cut off if the encapsulation is set to SahdowDom. I currently have it set to None.

walter · July 22, 2024, 8:52pm

Maybe you also need to have the same encapsulation setting for the component holding the target Diagram?

bhcarranj · July 22, 2024, 9:34pm

Both have an Encapsulation of none.

To clarify, in your sample BPMN Editor. If I click and drag then you can see that you have something being dragged.

In my Palette that does not appear. I only see the Circle with the line through it but no shape is visible.

bhcarranj · July 22, 2024, 9:35pm

But any guidance on how I can move the shape from my palette to the diagram in Angular would be very helpful. Thank you

walter · July 22, 2024, 11:16pm

Might Palette.allowCopy be false? (Although I don’t see it in your code.) Check in the debugger.

Your code looks good to me. I could imagine a problem with the cross-component drag-and-drop, but I don’t understand why the user would not be able to start a drag-and-drop, entirely within the Palette although a drop is not allowed, as you have seen in the samples that use a Palette.

By the way, calling zoomToFit before the nodes exist in the Palette (i.e. before you have set up the templates and then assigned the Palette.model) won’t have the effect that I think you are seeking. I suggest that you set Palette.initialAutoScale.

bhcarranj · July 23, 2024, 6:48pm

I found one solution. I had allowMove set to true in the Palette and that apparently was disabling me from dragging the shape from the Palette.

Now that I have that solved, I still see that I am unable to drop the shape into the Diagram. Keep in mind I have the palette in a separate html class. Similar to how the BPMN sample is.

Screenshot to show shape dragging in Palette section

Screenshot to show shape does not get added to the diagram.

Reference
https://gojs.net/latest/samples/bpmn/BPMN.html

walter · July 24, 2024, 12:30am

I don’t know what could be wrong. I tried modifying a sample so that it had two separate diagram components, and drag-and-drop between them worked well.

bhcarranj · July 24, 2024, 2:53pm

I got it working. I found a couple of things that were preventing me from dragging onto the screen.

I had allowMove set to true in the Palette. That was preventing me from dragging the shape inside the Palette.
The nodeTemplateMap was not of the same Type in the Palette and Diagram. Apparently they needed to be of the same type in order for me to drag onto the diagram.

I now have a working Palette and Diagram.

bhcarranj · July 24, 2024, 2:53pm

Thank you for your help :)

walter · July 24, 2024, 2:58pm

No, it should be quite possible, if not commonplace, for the templates to be different in one Diagram/Palette from other Diagram/Palettes. For example: Palette | GoJS
This sample shows three diagrams (two Palettes and one Diagram), each with its
own templates.

On the other hand, you have to make sure that the Model.dataFormat are the same. But it’s unusual to set that property. Model | GoJS API