nope/pages/test/test-gojs-editor.tsx

import { faHatWizard } from "@fortawesome/free-solid-svg-icons";
import * as React from "react";
import { DiagramWrapper } from "../../resources/ui/gojs/DiagramWrapper";
import { transitionTemplate } from "../../resources/ui/gojs/nodes/transition";
import { OverviewWrapper } from "../../resources/ui/gojs/OverviewWrapper";
import { PaletteWrapper } from "../../resources/ui/gojs/PaletteWrapper";
import DynLayout, {
  IDynamicLayoutProps,
} from "../../resources/ui/layout/dynamicLayout";

interface EditorState {
  diagramReady: boolean;
  update: any;
}

class TestDynLayoutComponent extends React.Component<never, EditorState> {
  /**
   * Ref to keep a reference to the component, which provides access to the GoJS diagram via getDiagram().
   */

  constructor(props: never) {
    super(props);
    this.setState({ diagramReady: false });
  }

  protected _links: go.ObjectData[] = [];
  protected _nodes: go.ObjectData[] = [];
  protected _modelData: go.ObjectData = {};
  protected _diagram: go.Diagram;
  protected _overview: any;

  /**
   * Helper to update the model, and let it be rendered,
   * if it is correct.
   * @param model
   */
  protected _updateModel(model: go.GraphLinksModel): void {
    this._nodes = model.nodeDataArray;
    this._links = model.linkDataArray;

    // if (this._overview) {
    //   this._overview.update();
    // }
  }

  public render(): JSX.Element {
    const _this = this;
    const settings: IDynamicLayoutProps<any> = {
      components: [
        {
          visible: true,
          component(...args) {
            return (
              <PaletteWrapper
                nodeTemplates={[
                  {
                    name: "transition",
                    template: transitionTemplate(),
                    sampleData: {
                      label: "Transtion",
                      guard: "true",
                      category: "transition",
                      description: "A Logical Transition without a service",
                      serviceName: "None",
                      serviceInputs: [],
                      serviceOutputs: [],
                      guardInputs: [],
                      guardOutputs: [
                        {
                          portId: 1,
                          label: "result",
                        },
                      ],
                    },
                  },
                ]}
              ></PaletteWrapper>
            );
          },
          gridSettings: {
            h: 3,
            w: 3,
            x: 0,
            y: 0,
            minW: 3,
            maxH: 5,
            minH: 5,
            maxW: 5,
          },
          id: "palette",
          label: "Node-Palette",
          props: {},
          hideable: true,
        },
        {
          visible: true,
          component(...args) {
            return (
              <OverviewWrapper
                getObservedDiagram={() => _this._diagram}
                onReady={(_wrapper) => (_this._overview = _wrapper)}
              ></OverviewWrapper>
            );
          },
          gridSettings: {
            h: 2,
            w: 3,
            x: 0,
            y: 3,
            minW: 3,
            maxH: 5,
            minH: 5,
            maxW: 5,
          },
          id: "overview",
          label: "Overview",
          props: {},
          hideable: true,
        },
        {
          visible: true,
          component() {
            return (
              <DiagramWrapper
                linkDataArray={_this._links}
                modelData={_this._modelData}
                templates={
                  [
                    // {
                    //   name: "transition",
                    //   template: transitionTemplate(),
                    // },
                  ]
                }
                diagramType="petri-net"
                nodeDataArray={_this._nodes}
                onModelChange={(e) => {
                  _this._updateModel(e as go.GraphLinksModel);
                }}
                onDiagramReady={(diagram) => {
                  // Store the Diagramm
                  _this._diagram = diagram;

                  if (_this._overview) {
                    _this._overview.update();
                  }
                }}
                skipsDiagramUpdate={true}
              ></DiagramWrapper>
            );
          },
          gridSettings: {
            h: 5,
            w: 12,
            x: 5,
            y: 0,
            minW: 5,
            maxH: 5,
            minH: 5,
          },
          id: "editor",
          label: "Main-Frame",
          props: {},
          hideable: false,
          bg: "light",
          onUnmount() {
            console.log(_this._modelData, _this._nodes, _this._links);
          },
        },
      ],
      layoutSettings: {
        width: process.browser ? window.innerWidth : 1920,
        autoSize: false,
        preventCollision: false,
        cols: 15,
        compactType: "horizontal",
      },
      toolbar: {
        items: [
          {
            type: "link",
            label: "docs",
            ref: "/docs",
            icon: faHatWizard,
          },
        ],
      },
      generateData() {
        return {
          content: "hello",
        };
      },
    };

    return React.createElement(DynLayout, settings);
  }
}

export default TestDynLayoutComponent;