Implement grouping in react js

GoJS
1

Hi I need to implement grouping and draggable link in same canvas. Also I need to design it in react js. I can’t find a way out for this. Please provide me a solution for this. Thanks

2

Are you starting from the Draggable Link sample? Draggable Link

Are you using gojs-react? Are you defining a React.Component class to hold your custom diagram that uses a ReactDiagram component from gojs-react?

If so, you need to initialize the diagram the way that you want in your initDiagram function, pretty much copying the code from the init function in the sample, but excluding the loading of the model.

The same goes for any Palette that you want to show, using the ReactPalette component. But presumably it will be simpler, since it’s read-only.

3

Thank you for the response. It worked for me. But I am not able to create a Plaette. Actually Palette accepts a myDiagram object which I have initialised in initDiagram code. How can we use that in initPalette. Since both are two seperate componets to me

4

Do they have to be two separate components? Normally I would think that you would define a component that includes both a Diagram and a Palette.

5

In gojsReact,
<ReactPalette
initPalette={this.initPalette}
divClassName=‘palette-component’
nodeDataArray={[{ key: 0, text: ‘Alpha’ }]}
/>

I am using this component fro Palette. It needs initPalette, How could I pass myDiagram to this funtion

6

Since you asked here, I’ll close the GitHub issue.

What is your initPalette function that you are passing in?

7

myPalette =
$(go.Palette, “myPaletteDiv”,
{
nodeTemplate: myDiagram.nodeTemplate,
contentAlignment: go.Spot.Center,
layout:
$(go.GridLayout,
{ wrappingColumn: 1, cellSize: new go.Size(2, 2) }),
“ModelChanged”: function(e) { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page’s TextArea
document.getElementById(“mySavedPaletteModel”).textContent = e.model.toJson();
}
}
});

But I don’t know how to pass myDiagram to it. Or If you have any sample example fot initPatlette for reactjs Do let me know.

8

Ahh, so you want to share the node template between the Palette and Diagram. Because React doesn’t guarantee the order that components are rendered, you’ll want to pull the nodeTemplate definition out into its own method. You could also have it as a class property or local variable in a functional component.

  constructor(props: MyProps) {
    super(props);
    // bind methods
    this.initDiagram = this.initDiagram.bind(this);
    this.initPalette = this.initPalette.bind(this);
  }

  private defineSharedNodeTemplate(): go.Node {
    const $ = go.GraphObject.make;
    return $(go.Node, ...);
  }

  private initDiagram(): go.Diagram {
    const $ = go.GraphObject.make;
    const diagram =
      $(go.Diagram, ...);

    diagram.nodeTemplate = this.defineSharedNodeTemplate();

    ...

    return diagram;
  }

  private initPalette(): go.Palette {
    const $ = go.GraphObject.make;
    const palette = $(go.Palette,
      {
        nodeTemplate: this.defineSharedNodeTemplate(),
        contentAlignment: go.Spot.Center,
        layout:
          $(go.GridLayout,
            { wrappingColumn: 1, cellSize: new go.Size(2, 2) }), ...
      });
    return palette;
  }