How to use the gojs.TreeLayout function in gojs

To help you get started, we’ve selected a few gojs examples, based on popular ways it is used in public projects.

github nicolaserny / react-gojs-example / src / GraphView.tsx View on Github external
init() {
        const $ = go.GraphObject.make;  // for conciseness in defining templates

        this.myDiagram = $(
            go.Diagram,
            'myDiagramDiv',  // create a Diagram for the DIV HTML element
            {
                initialContentAlignment: go.Spot.LeftCenter,
                layout: $(
                    go.TreeLayout,
                    {
                        angle: 0,
                        arrangement: go.TreeLayout.ArrangementVertical,
                        treeStyle: go.TreeLayout.StyleLayered
                    }),
                isReadOnly: true
            });

        this.myDiagram.allowHorizontalScroll = true;
        this.myDiagram.allowVerticalScroll = true;
        this.myDiagram.allowZoom = false;
        this.myDiagram.allowSelect = true;
        this.myDiagram.autoScale = Diagram.Uniform;
        this.myDiagram.contentAlignment = go.Spot.LeftCenter;
        this.myDiagram.toolManager.panningTool.isEnabled = false;
        this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        // define a simple Node template
        this.myDiagram.nodeTemplate =
            $(
github nicolaserny / react-gojs-example / src / GraphView.tsx View on Github external
init() {
        const $ = go.GraphObject.make;  // for conciseness in defining templates

        this.myDiagram = $(
            go.Diagram,
            'myDiagramDiv',  // create a Diagram for the DIV HTML element
            {
                initialContentAlignment: go.Spot.LeftCenter,
                layout: $(
                    go.TreeLayout,
                    {
                        angle: 0,
                        arrangement: go.TreeLayout.ArrangementVertical,
                        treeStyle: go.TreeLayout.StyleLayered
                    }),
                isReadOnly: true
            });

        this.myDiagram.allowHorizontalScroll = true;
        this.myDiagram.allowVerticalScroll = true;
        this.myDiagram.allowZoom = false;
        this.myDiagram.allowSelect = true;
        this.myDiagram.autoScale = Diagram.Uniform;
        this.myDiagram.contentAlignment = go.Spot.LeftCenter;
        this.myDiagram.toolManager.panningTool.isEnabled = false;
        this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        // define a simple Node template
        this.myDiagram.nodeTemplate =
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github external
componentDidMount() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });

    // show visibility or access as a single character at the beginning of each property or method
    function convertVisibility(v) {
      switch (v) {
        case "public": return "+";
        case "private": return "-";
        case "protected": return "#";
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github external
componentDidMount() {
    var $ = go.GraphObject.make;
    var myDiagram: any = {};
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });

    // show visibility or access as a single character at the beginning of each property or method
    function convertVisibility(v) {
      switch (v) {
        case "public": return "+";
        case "private": return "-";
        case "protected": return "#";
        case "package": return "~";
        default: return v;
      }
github nicolaserny / react-gojs-example / src / components / MyDiagram.tsx View on Github external
private createDiagram(diagramId: string): Diagram {
        const $ = go.GraphObject.make;

        const myDiagram: Diagram = $(go.Diagram, diagramId, {
            initialContentAlignment: go.Spot.LeftCenter,
            layout: $(go.TreeLayout, {
                angle: 0,
                arrangement: go.TreeLayout.ArrangementVertical,
                treeStyle: go.TreeLayout.StyleLayered
            }),
            isReadOnly: false,
            allowHorizontalScroll: true,
            allowVerticalScroll: true,
            allowZoom: false,
            allowSelect: true,
            autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited
        });

        myDiagram.toolManager.panningTool.isEnabled = false;
        myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        myDiagram.nodeTemplate = $(
github nicolaserny / react-gojs-example / src / components / MyDiagram.tsx View on Github external
private createDiagram(diagramId: string): Diagram {
        const $ = go.GraphObject.make;

        const myDiagram: Diagram = $(go.Diagram, diagramId, {
            initialContentAlignment: go.Spot.LeftCenter,
            layout: $(go.TreeLayout, {
                angle: 0,
                arrangement: go.TreeLayout.ArrangementVertical,
                treeStyle: go.TreeLayout.StyleLayered
            }),
            isReadOnly: false,
            allowHorizontalScroll: true,
            allowVerticalScroll: true,
            allowZoom: false,
            allowSelect: true,
            autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited
        });

        myDiagram.toolManager.panningTool.isEnabled = false;
        myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

gojs

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

SEE LICENSE IN license.html
Latest version published 15 days ago

Package Health Score

81 / 100
Full package analysis

Similar packages