How to use gojs - 10 common examples

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github external
default: return "";
      }
    }

    function convertToArrow(r) {
      switch (r) {
        case "generalization": return "Triangle";
        case "aggregation": return "StretchedDiamond";
        default: return "";
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
        $(go.Shape),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("fromArrow", "relationship", convertFromArrow)),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("toArrow", "relationship", convertToArrow))
      );

    // console.log('doc engine response', this.props.docs);
    
    // setup a few example class nodes and relationships
    var nodedata: any = [
      {
        key: 1,
        name: this.props.docs.rootModel.modelName,
        libraries: [],
        components: []
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;
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
            });
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github external
case "generalization": return "";
        default: return "";
      }
    }

    function convertToArrow(r) {
      switch (r) {
        case "generalization": return "Triangle";
        case "aggregation": return "StretchedDiamond";
        default: return "";
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
        $(go.Shape),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("fromArrow", "relationship", convertFromArrow)),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("toArrow", "relationship", convertToArrow))
      );

    // console.log('doc engine response', this.props.docs);
    
    // setup a few example class nodes and relationships
    var nodedata: any = [
      {
        key: 1,
        name: this.props.docs.rootModel.modelName,
        libraries: [],
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github external
switch (r) {
        case "generalization": return "";
        default: return "";
      }
    }

    function convertToArrow(r) {
      switch (r) {
        case "generalization": return "Triangle";
        case "aggregation": return "StretchedDiamond";
        default: return "";
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
        $(go.Shape),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("fromArrow", "relationship", convertFromArrow)),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("toArrow", "relationship", convertToArrow))
      );

    // console.log('doc engine response', this.props.docs);
    
    // setup a few example class nodes and relationships
    var nodedata: any = [
      {
        key: 1,
        name: this.props.docs.rootModel.modelName,
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;
github nimble-platform / frontend-service / src / app / explorative-search / explorative-search-details.component.ts View on Github external
ngAfterViewInit(): void {
        this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
            {
                initialContentAlignment: go.Spot.Center,
                padding: 10,
                isReadOnly: false,
                'animationManager.isEnabled': false, // disable Animation
                'allowVerticalScroll': false, // no vertical scroll for diagram
                'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
            });
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
        let commonToolTip = this.$(go.Adornment, 'Auto',
            {
                isShadowed: true
            },
            this.$(go.Shape, { fill: '#FFFFCC' }),
            this.$(go.Panel, 'Vertical',
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 nimble-platform / frontend-service / src / app / explorative-search / explorative-search-details.component.ts View on Github external
ngAfterViewInit(): void {
        this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
            {
                initialContentAlignment: go.Spot.Center,
                padding: 10,
                isReadOnly: false,
                'animationManager.isEnabled': false, // disable Animation
                'allowVerticalScroll': false, // no vertical scroll for diagram
                'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
            });
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
        let commonToolTip = this.$(go.Adornment, 'Auto',
            {
                isShadowed: true
            },
            this.$(go.Shape, { fill: '#FFFFCC' }),
            this.$(go.Panel, 'Vertical',
                {
                    margin: 3
                },
                this.$(go.TextBlock,  // bound to node data
                    {
                        margin: 4, font: 'bold 12pt sans-serif'
                    },
                    new go.Binding('text')),
                this.$(go.TextBlock,  // bound to Adornment because of call to Binding.ofObject
                    new go.Binding('text', '',
                        (ad) => {

gojs

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

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

Package Health Score

79 / 100
Full package analysis