Using GoJs in ReactJs

Asked 6/11, 2016 at 16:31 Answered 10/9, 2023 at 17:25

im trying to create a parser tree in React Js for a NLP/POS-tagger project.i found that GoJs provides a cool parser tree GoJs-parser-tree,but i could not find documentation for react js implementation. i tried out some examples but i could not use it with react heres my code that i need to use it in react

<!DOCTYPE html>
<html>
<head>
<title>Parse Tree</title>
<meta name="description" content="A collapsible tree layout with all of the leaf nodes at the same layer." />
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <script src="go.js"></script>
  <link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
  <script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            allowCopy: false,
            allowDelete: false,
            allowMove: false,
            initialContentAlignment: go.Spot.Center,
            initialAutoScale: go.Diagram.Uniform,
            layout:
              $(FlatTreeLayout,  // custom Layout, defined below
                { angle: 90,
                  compaction: go.TreeLayout.CompactionNone }),
            "undoManager.isEnabled": true
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          { selectionObjectName: "BODY" },
          $(go.Panel, "Auto", { name: "BODY" },
            $(go.Shape, "RoundedRectangle",
              new go.Binding("fill"),
              new go.Binding("stroke")),
            $(go.TextBlock,
              { font: "bold 12pt Arial, sans-serif", margin: new go.Margin(4, 2, 2, 2) },
              new go.Binding("text"))
          ),
          $(go.Panel,  // this is underneath the "BODY"
            { height: 15 },  // always this height, even if the TreeExpanderButton is not visible
            $("TreeExpanderButton")
          )
        );

      myDiagram.linkTemplate =
        $(go.Link,
          $(go.Shape, { strokeWidth: 1.5 }));

      // set up the nodeDataArray, describing each part of the sentence
      var nodeDataArray = [
        { key: 1, text: "Sentence", fill: "#f68c06", stroke: "#4d90fe" },
        { key: 2, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 1 },
        { key: 3, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 2 },
        { key: 4, text: "A", fill: "#f8f8f8", stroke: "#4d90fe", parent: 3 },
        { key: 5, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 2 },
        { key: 6, text: "rare", fill: "#f8f8f8", stroke: "#4d90fe", parent: 5 },
        { key: 7, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 2 },
        { key: 8, text: "black", fill: "#f8f8f8", stroke: "#4d90fe", parent: 7 },
        { key: 9, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 2 },
        { key: 10, text: "squirrel", fill: "#f8f8f8", stroke: "#4d90fe", parent: 9 },
        { key: 11, text: "VP", fill: "#f68c06", stroke: "#4d90fe", parent: 1 },
        { key: 12, text: "VBZ", fill: "#ccc", stroke: "#4d90fe", parent: 11 },
        { key: 13, text: "has", fill: "#f8f8f8", stroke: "#4d90fe", parent: 12 },
        { key: 14, text: "VP", fill: "#f68c06", stroke: "#4d90fe", parent: 11 },
        { key: 15, text: "VBN", fill: "#ccc", stroke: "#4d90fe", parent: 14 },
        { key: 16, text: "become", fill: "#f8f8f8", stroke: "#4d90fe", parent: 15 },
        { key: 17, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 14 },
        { key: 18, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 17 },
        { key: 19, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 18 },
        { key: 20, text: "a", fill: "#f8f8f8", stroke: "#4d90fe", parent: 19 },
        { key: 21, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 18 },
        { key: 22, text: "regular", fill: "#f8f8f8", stroke: "#4d90fe", parent: 21 },
        { key: 23, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 18 },
        { key: 24, text: "visitor", fill: "#f8f8f8", stroke: "#4d90fe", parent: 23 },
        { key: 25, text: "PP", fill: "#f68c06", stroke: "#4d90fe", parent: 17 },
        { key: 26, text: "TO", fill: "#ccc", stroke: "#4d90fe", parent: 25 },
        { key: 27, text: "to", fill: "#f8f8f8", stroke: "#4d90fe", parent: 26 },
        { key: 28, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 25 },
        { key: 29, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 28 },
        { key: 30, text: "a", fill: "#f8f8f8", stroke: "#4d90fe", parent: 29 },
        { key: 31, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 28 },
        { key: 32, text: "suburban", fill: "#f8f8f8", stroke: "#4d90fe", parent: 31 },
        { key: 33, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 28 },
        { key: 34, text: "garden", fill: "#f8f8f8", stroke: "#4d90fe", parent: 33 },
        { key: 35, text: ".", fill: "#ccc", stroke: "#4d90fe", parent: 1 },
        { key: 36, text: ".", fill: "#f8f8f8", stroke: "#4d90fe", parent: 35 }
      ]

      // create the Model with data for the tree, and assign to the Diagram
      myDiagram.model =
        $(go.TreeModel,
          { nodeDataArray: nodeDataArray });
    }

    // Customize the TreeLayout to position all of the leaf nodes at the same vertical Y position.
    function FlatTreeLayout() {
      go.TreeLayout.call(this);  // call base constructor
    }
    go.Diagram.inherit(FlatTreeLayout, go.TreeLayout);

    // This assumes the TreeLayout.angle is 90 -- growing downward
    /** @override */
    FlatTreeLayout.prototype.commitLayout = function() {
      go.TreeLayout.prototype.commitLayout.call(this);  // call base method first
      // find maximum Y position of all Nodes
      var y = -Infinity;
      this.network.vertexes.each(function(v) {
          y = Math.max(y, v.node.position.y);
        });
      // move down all leaf nodes to that Y position, but keeping their X position
      this.network.vertexes.each(function(v) {
          var node = v.node;
          if (node.isTreeLeaf) {
            node.position = new go.Point(node.position.x, y);
          }
        });
    };
    // end FlatTreeLayout
  </script>
</head>
<body onload="init()">
<div id="sample">
  <h3>GoJS Parse Tree</h3>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
  <p>A <em>parse tree</em> is an ordered, rooted tree representing the structure of a sentence, broken down to parts-of-speech.</p>
  <p>
    This diagram uses a custom <a>TreeLayout</a> called <b>FlatTreeLayout</b> that places all leaf nodes at the same Y position.
    It also makes use of a <b>TreeExpanderButton</b> on the node template. See the <a href="../intro/buttons.html">Intro page on Buttons</a> for more GoJS button information.
  </p>
  <p>
    The abbreviations used in this diagram are:
    <ul>
      <li><b>NP</b>, a noun phrase</li>
      <li><b>VP</b>, a verb phrase</li>
      <li><b>PP</b>, a prepositional phrase</li>
      <li><b>DT</b>, a determiner</li>
      <li><b>JJ</b>, an adjective</li>
      <li><b>NN</b>, a common noun</li>
      <li><b>VBZ</b>, a third person singular present verb</li>
      <li><b>VBN</b>, a past participle verb</li>
    </ul>
  </p>
</div>
</body>
</html>

and this the code i got when trying to use it react

import React, {Component} from 'react';
import go from 'gojs';
const goObj = go.GraphObject.make;

export default class GoJs extends Component {
  constructor (props) {
    super (props);

    this.renderCanvas = this.renderCanvas.bind (this);

    this.state = {myModel: null, myDiagram: null}
  }

  renderCanvas () {
    let model = goObj (go.TreeModel);
    let diagram = goObj (go.Diagram, this.refs.goJsDiv, {initialContentAlignment: go.Spot.Center});
    this.setState({myModel: model, myDiagram: diagram},
      () => {
        model.nodeDataArray = this.props.data;
        diagram.model = model;
        this.setState({myModel: model, myDiagram: diagram});
      }
    );
  }

  componentDidMount () {
    this.renderCanvas ();
  }

  componentWillUpdate (prevProps) {
    if (this.props.data !== prevProps.data) {
      console.log ('Updating');
      const model = this.state.myModel;
      const diagram = this.state.myDiagram;
      model.nodeDataArray = this.props.data;
      diagram.model = model;
      this.setState({myModel: model, myDiagram: diagram});
    }
  }

  render () {
    return <div ref="goJsDiv" style={{'width': '500px', 'height': '500px', 'backgroundColor': '#DAE4E4'}}></div>;
  }
}

GoJs.propTypes = { data: React.PropTypes.string.isRequired };
GoJs.defaultProps = { data: '[]' };

im unable to figure out whats missing and the out put i get from this is a total mess.

Pawn answered 6/11, 2016 at 16:31 Comment(1)

Note there is now the official example project: github.com/NorthwoodsSoftware/GoJS-React-Basic – Convalescence 6/9, 2019 at 15:49

After spending hours of changing code here and there i managed to make what was required heres my final code

import React, {Component} from 'react';
import go from 'gojs';
const goObj = go.GraphObject.make;

export default class GoJs extends Component {
  constructor (props) {
    super (props);

    this.renderCanvas = this.renderCanvas.bind (this);

    this.state = {myModel: null, myDiagram: null}
  }

  renderCanvas () {

  function FlatTreeLayout () {
     go.TreeLayout.call(this);  // call base constructor
   }
   go.Diagram.inherit(FlatTreeLayout, go.TreeLayout);

   // This assumes the TreeLayout.angle is 90 -- growing downward
   /** @override */
   FlatTreeLayout.prototype.commitLayout = function () {
     go.TreeLayout.prototype.commitLayout.call(this);  // call base method first
     // find maximum Y position of all Nodes
     var y = -Infinity;
     this.network.vertexes.each(function(v) {
         y = Math.max(y, v.node.position.y);
       });
     // move down all leaf nodes to that Y position, but keeping their X position
     this.network.vertexes.each(function(v) {
         var node = v.node;
         if (node.isTreeLeaf) {
           node.position = new go.Point(node.position.x, y);
         }
       });
   };

    let model = goObj (go.TreeModel);
    let diagram = goObj (go.Diagram, this.refs.goJsDiv,          {
               allowCopy: false,
               allowDelete: false,
               allowMove: false,
               initialContentAlignment: go.Spot.Center,
               initialAutoScale: go.Diagram.Uniform,
               layout:
                 goObj(FlatTreeLayout,  // custom Layout, defined below
                   { angle: 90,
                     compaction: go.TreeLayout.CompactionNone }),
               "undoManager.isEnabled": true
             });

             diagram.nodeTemplate = goObj(go.Node, "Vertical",
                      { selectionObjectName: "BODY" },
                      goObj(go.Panel, "Auto", { name: "BODY" },
                        goObj(go.Shape, "RoundedRectangle",
                          new go.Binding("fill"),
                          new go.Binding("stroke")),
                        goObj(go.TextBlock,
                          { font: "bold 12pt Arial, sans-serif", margin: new go.Margin(4, 2, 2, 2) },
                          new go.Binding("text"))
                      ),
                      goObj(go.Panel,  // this is underneath the "BODY"
                        { height: 15 },  // always this height, even if the TreeExpanderButton is not visible
                        goObj("TreeExpanderButton")
                      )
                    );

             diagram.linkTemplate = goObj(go.Link,goObj(go.Shape, { strokeWidth: 1.5 }));

    this.setState({myModel: model, myDiagram: diagram},
      () => {
        model.nodeDataArray = this.props.data;
        diagram.model = model;
        this.setState({myModel: model, myDiagram: diagram});
      }
    );

  }



  componentDidMount () {
    this.renderCanvas ();
  }

  componentWillUpdate (prevProps) {
    if (this.props.data !== prevProps.data) {
      console.log ('Updating');
      const model = this.state.myModel;
      const diagram = this.state.myDiagram;
      model.nodeDataArray = this.props.data;
      diagram.model = model;
      this.setState({myModel: model, myDiagram: diagram});
    }
  }

  render () {
    return <div ref="goJsDiv" style={{'width': '500px', 'height': '500px', 'backgroundColor': '#DAE4E4'}}></div>;
  }
}

GoJs.propTypes = { data: React.PropTypes.string.isRequired };
GoJs.defaultProps = { data: '[]' };

Since its a dumb(stateless) component we have to pass data from the parent component via props.

from parent component

   render(){
     return(
       <div>
         <PTagBox data={nodeDataArray}/>
       </div>
     );
   }

where PTagBox is the dumb or child component

Pawn answered 6/11, 2016 at 18:28 Comment(1)

Did you ever end up using the DataInspector? – Butt 2/4, 2018 at 18:56

import React, { useRef, useState } from "react";

import * as go from "gojs";
import { ReactDiagram, ReactPalette } from "gojs-react";

import "./styles.css"; // contains .diagram-component CSS`enter code here`
import solar_inverter from "./icons/Solar-Inverter.png";`enter code here`
import natgasIcon from "./icons/icons8-solar-panel-100.png";
import { v4 as uuidv4 } from "uuid";

// ...

/**
 * Diagram initialization method, which is passed to the ReactDiagram component.
 * This method is responsible for making the diagram and initializing the model and any templates.
 * The model's data should not be set here, as the ReactDiagram component handles that via the other props.
 */

/**
 * This function handles any changes to the GoJS model.
 * It is here that you would make any updates to your React state, which is discussed below.
 */
function handleModelChange(changes) {
  alert("GoJS model changed!");
}

// render function...
export default function App() {
  const [nodes, setNodes] = useState([
    // { key: 0, text: "Alpha", color: "lightblue", loc: "0 0", src: natgasIcon }
  ]);
  console.log(nodes, "32");

  const [paletteNode, setPaletteNode] = useState([
    { key: "gasCompany", text: "Gas\nCompanies", icon: solar_inverter },
    { key: "oil", text: "Oil\nCompanies", icon: natgasIcon },
    { key: "gasProcessing", icon: natgasIcon, text: "Gas Processing" },
    { key: "gasFraction", icon: natgasIcon, text: "Gas Fractionation" },
    { key: "pyrolysis", icon: natgasIcon, text: "Pyrolysis (Cracking)" },
    { key: "basicP", icon: natgasIcon, text: "Basic Polymers" },
    { key: "intermediate", text: "Intermediates", icon: natgasIcon },
    { key: "lpg", icon: natgasIcon, text: "LPG, Naphtha,\nMTBE" }
  ]);

  const [linkData, setLinkData] = useState([]);

  function initDiagram() {
    const $ = go.GraphObject.make;

    var Colors = {
      red: "#be4b15",
      green: "#52ce60",
      blue: "#6ea5f8",
      lightred: "#fd8852",
      lightblue: "#afd4fe",
      lightgreen: "#b9e986",
      pink: "#faadc1",
      purple: "#d689ff",
      orange: "#f08c00"
    };

    var ColorNames = [];
    for (var n in Colors) ColorNames.push(n);

    // a conversion function for translating general color names to specific colors
    function colorFunc(colorname) {
      var c = Colors[colorname];
      if (c) return c;
      return "gray";
    }
    // set your license key here before creating the diagram: go.Diagram.licenseKey = "...";

    const myDiagram = $(go.Diagram, {
      initialAutoScale: go.Diagram.Uniform, // scale to show all of the contents
      ChangedSelection: onSelectionChanged, // view additional information
      "draggingTool.gridSnapCellSize": new go.Size(10, 1),
      "draggingTool.isGridSnapEnabled": true,
      "undoManager.isEnabled": true,
      // model: $(go.GraphLinksModel, {
      //   linkKeyProperty: "key" // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
      // }),
      model: $(go.GraphLinksModel, {
        linkKeyProperty: "key", // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
        // positive keys for nodes
        // makeUniqueKeyFunction: (m: go.Model, data: any) => {
        //   let k = data.key || 1;
        //   while (m.findNodeDataForKey(k)) k++;
        //   data.key = k;
        //   return k;
        // }
        // negative keys for links
        makeUniqueLinkKeyFunction: (m: go.GraphLinksModel, data: any) => {
          let k = data.key || -1;
          console.log(k, data, "94");
          setLinkData((prevLinkData) => [...prevLinkData, data]);
          while (m.findLinkDataForKey(k)) k--;
          data.key = k;
          return k;
        }
      }),
      ModelChanged: (e) => {
        // just for demonstration purposes,
        if (e.isTransactionFinished) {
          // show the model data in the page's TextArea
          // document.getElementById(
          //   "mySavedModel"
          // ).textContent = e.model.toJson();
        }
      }
    });

    // define a simple Node template
    myDiagram.nodeTemplate = $(
      go.Node,
      "Auto", // the Shape will go around the TextBlock
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
        go.Point.stringify
      ),
      $(
        go.Shape,
        "RoundedRectangle",
        {
          name: "SHAPE",
          fill: "grey",
          strokeWidth: 0,
          portId: "",
          fromLinkable: true,
          toLinkable: true,
          cursor: "pointer"
        },
        // Shape.fill is bound to Node.data.color
        new go.Binding("fill", "color")
      ),
      $(
        go.Picture,
        { width: 64, height: 64 },
        new go.Binding("source", "icon")
      ),
      $(
        go.TextBlock,
        { margin: 8, editable: true }, // some room around the text
        new go.Binding("text").makeTwoWay()
      )
    );

    // myDiagram.linkTemplate = $(
    //   go.Link,

    //   new go.Binding("relinkableFrom", "canRelink").ofModel(),
    //   new go.Binding("relinkableTo", "canRelink").ofModel(),
    //   $(go.Shape),
    //   $(go.Shape, { toArrow: "Standard" })
    // );
    myDiagram.linkTemplate = $(
      go.Link,
      {
        layerName: "Background",
        routing: go.Link.Orthogonal,
        corner: 15,
        reshapable: true,
        resegmentable: true,
        fromSpot: go.Spot.RightSide,
        toSpot: go.Spot.LeftSide
      },
      // make sure links come in from the proper direction and go out appropriately
      new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
      new go.Binding("toSpot", "toSpot", go.Spot.parse),
      new go.Binding("points").makeTwoWay(),
      // mark each Shape to get the link geometry with isPanelMain: true
      $(
        go.Shape,
        { isPanelMain: true, stroke: "gray", strokeWidth: 10 },
        // get the default stroke color from the fromNode
        new go.Binding("stroke", "fromNode", (n) =>
          go.Brush.lighten((n && Colors[n.data.color]) || "gray")
        ).ofObject(),
        // but use the link's data.color if it is set
        new go.Binding("stroke", "color", colorFunc)
      ),
      $(go.Shape, {
        isPanelMain: true,
        stroke: "white",
        strokeWidth: 3,
        name: "PIPE",
        strokeDashArray: [20, 40]
      })
    );

    // This function generates a unique key for a new link.
    // function getNextLinkKey() {
    //   setNodes((prevLinkData) => [...prevLinkData]);
    //   // Implement your logic to generate a unique key here, e.g., using a counter.
    //   // You can also use a library like uuid to generate unique keys.
    // }

    return myDiagram;

    function addLink(fromKey, toKey) {
      // Create a new link data object
      const newLink = {
        key: uuidv4(), // Generate a unique key for the link (using uuid or another method)
        from: fromKey,
        to: toKey
        // Add any other properties you want for the link
      };

      // Add the new link to the linkData state
      setLinkData((prevLinkData) => [...prevLinkData, newLink]);
    }

    function onSelectionChanged() {
      const selectedNodes = myDiagram.selection.first();
      if (!(selectedNodes instanceof go.Node)) return;
      let data = selectedNodes.data;

      //setNodes((prevLinkData) => [...prevLinkData, data]);
      setNodes((prevLinkData) => {
        // Check if any element in prevLinkData has the same key as data
        const hasDuplicateKey = prevLinkData.some((n) => n.key === data.key);

        // If there's no element with the same key, add data to the array
        if (!hasDuplicateKey) {
          return [...prevLinkData, data];
        }

        // If there is a duplicate key, return the original array without modification
        return prevLinkData;
      });

      console.log(data, "224");
      // if (selectedNodes.length === 2) {
      //   // Assuming you have a way to identify nodes uniquely (e.g., using their keys)
      //   const fromNodeKey = selectedNodes[0].data.key;
      //   const toNodeKey = selectedNodes[1].data.key;
      //   addLink(fromNodeKey, toNodeKey);
      //   addNode(data.text, "lightblue", data.loc, data.icon);
      // }
    }

    // function onSelectionChanged(data) {
    //   var node = myDiagram.selection.first();
    //   if (!(node instanceof go.Node)) return;
    //   var data = node.data;
    //   // console.log(data);
    //   var image = document.getElementById("Image");
    //   var title = document.getElementById("Title");
    //   var description = document.getElementById("Description");
    //   if (data.imgsrc) {
    //     image.src = data.imgsrc;
    //     image.alt = data.caption;
    //   } else {
    //     // let a = nodes.push(data);
    //     // return a;
    //     let b = (data) => {
    //       console.log(data, "106");
    //       setNodes(nodes.push(data));
    //     };
    //     b(data);
    //     // console.log(nodes);
    //     // console.log(data, "103");
    //     // setNodes((data) => {
    //     //   console.log(data, "106");
    //     // });
    //     // setNodes([a]);
    //     // setNodes([
    //     //   {
    //     //     key: data.key,
    //     //     text: data.text,
    //     //     color: "lightblue",
    //     //     loc: data.loc,
    //     //     src: data.icon
    //     //   }
    //     // ]);
    //     // data.icon = {};
    //     // image.alt = "";
    //   }
    //   // title.textContent = data.text;
    //   // description.textContent = data.description;
    // }
  }
  const paletteRef = useRef(null);

  function initPalette() {
    const $ = go.GraphObject.make;

    const myPalette = new go.Palette(paletteRef.current, {
      layout: $(go.GridLayout, { cellSize: new go.Size(1, 1) }),
      initialContentAlignment: go.Spot.TopLeft,
      initialScale: 0.8,

      nodeTemplate: $(
        go.Node,
        "Auto",
        $(
          go.Picture,
          {
            width: 50,
            height: 50,

            margin: 10
          },
          new go.Binding("source", "src")
        ),

        $(
          go.Shape,
          "RoundedRectangle",
          { name: "SHAPE", fill: "white", strokeWidth: 0 },
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")
        ),
        $(go.TextBlock, { margin: 0 }, new go.Binding("text"))
      ),
      model: $(go.GraphLinksModel, {
        nodeDataArray: [
          { key: "gasCompany", text: "Gas\nCompanies", src: solar_inverter },
          { key: "oil", text: "Oil\nCompanies", src: natgasIcon },
          { key: "gasProcessing", src: natgasIcon, text: "Gas Processing" },
          { key: "gasFraction", src: natgasIcon, text: "Gas Fractionation" },
          { key: "pyrolysis", src: natgasIcon, text: "Pyrolysis (Cracking)" },
          { key: "basicP", src: natgasIcon, text: "Basic Polymers" },
          { key: "intermediate", text: "Intermediates", src: natgasIcon },
          { key: "lpg", src: natgasIcon, text: "LPG, Naphtha,\nMTBE" }
        ]
      })
    });
    myPalette.nodeTemplate = $(
      go.Node,
      // "Auto",
      "RoundedRectangle",
      {
        cursor: "pointer", // Set cursor to indicate draggable
        fromLinkable: true, // Allow outgoing links from this node
        toLinkable: true, // Allow incoming links to this node
        locationSpot: go.Spot.Center,
        selectionAdornmentTemplate: $(
          go.Adornment,
          "Auto",
          $(go.Shape, {
            stroke: "dodgerblue",
            strokeWidth: 2,
            fill: "rgba(0, 0, 0, 0)"
          }),
          $(go.Placeholder)
        )
      },
      $(
        go.Picture,
        {
          width: 80,
          height: 70,
          margin: 5
        },
        new go.Binding("source", "icon")
      ),
      $(go.TextBlock, { margin: 0 }, new go.Binding("text"))
    );

    return myPalette;
  }

  return (
    <div className="gojs-wrapper-div">
      ...
      <ReactPalette
        id="palette"
        initPalette={initPalette}
        divClassName="palette-component"
        // nodeDataArray={[
        //   { key: "gasCompany", text: "Gas\nCompanies", icon: solar_inverter },
        //   { key: "oil", text: "Oil\nCompanies", icon: natgasIcon },
        //   { key: "gasProcessing", icon: natgasIcon, text: "Gas Processing" },
        //   { key: "gasFraction", icon: natgasIcon, text: "Gas Fractionation" },
        //   { key: "pyrolysis", icon: natgasIcon, text: "Pyrolysis (Cracking)" },
        //   { key: "basicP", icon: natgasIcon, text: "Basic Polymers" },
        //   { key: "intermediate", text: "Intermediates", icon: natgasIcon },
        //   { key: "lpg", icon: natgasIcon, text: "LPG, Naphtha,\nMTBE" }
        // ]}
        nodeDataArray={paletteNode}
      />
      <ReactDiagram
        initDiagram={initDiagram}
        divClassName="diagram-component"
        // nodeDataArray={[
        //   { key: 0, text: "Alpha", color: "lightblue", loc: "0 0" },
        //   { key: 1, text: "Beta", color: "orange", loc: "150 0" },
        //   { key: 2, text: "Gamma", color: "lightgreen", loc: "0 150" },
        //   { key: 3, text: "Delta", color: "pink", loc: "150 150" }
        // ]}
        nodeDataArray={nodes}
        // linkDataArray={[]}
        linkDataArray={linkData}
        // onModelChange={handleModelChange}
      />
      ...
    </div>
  );
}

Rabkin answered 10/9, 2023 at 17:25 Comment(1)

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Copra 12/9, 2023 at 2:42

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags