How to use the gojs.Link 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.

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
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 nimble-platform / frontend-service / src / app / explorative-search / explorative-search-details.component.ts View on Github external
locationSpot: go.Spot.Center,
                    selectionAdorned: true,
                    toolTip: commonToolTip
                },
                this.$(go.Shape, 'Circle',
                    { fill: 'white' }),
                this.$(go.TextBlock,
                    { font: 'bold 12pt sans-serif', margin: 5 },
                    new go.Binding('text'))
            ));

        // define the Link template
        this.myDiagram.linkTemplate =
            this.$(go.Link,
                {
                    routing: go.Link.Normal,
                    curve: go.Link.Bezier,
                    selectionAdorned: false,
                    layerName: 'Background'
                },
                this.$(go.Shape,
                    {
                        stroke: 'black',  // default value, but is data-bound
                        strokeWidth: 1
                    },
                    new go.Binding('stroke', 'color'))
            );
        this.myDiagram.addDiagramListener('ChangedSelection', (e: any) => {
            // check for selection changes.. especially when Multiselect is off
            if (e.diagram.selection.count === 0) { // if in non Multiselect all selections removed
                // reset all
                this.selectedProperties = [];
github cai3178940 / youran / youran-generate-ui / src / views / entity / erDiagram.vue View on Github external
textAlign: 'center',
                font: 'bold 14px sans-serif',
                stroke: '#1967B3',
                segmentIndex: 0,
                segmentOffset: new go.Point(NaN, NaN),
                segmentOrientation: go.Link.OrientUpright
              },
              new go.Binding('text', 'text')),
            $(go.TextBlock, // the 'to' label
              {
                textAlign: 'center',
                font: 'bold 14px sans-serif',
                stroke: '#1967B3',
                segmentIndex: -1,
                segmentOffset: new go.Point(NaN, NaN),
                segmentOrientation: go.Link.OrientUpright
              },
              new go.Binding('text', 'toText'))
          )
    },
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / statemachinedoc.tsx View on Github external
});
    }

    var linkSelectionAdornmentTemplate =
      $(go.Adornment, "Link",
        $(go.Shape,
          // isPanelMain declares that this Shape shares the Link.geometry
          { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
      );

    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          $(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          $(go.TextBlock,
            {
              textAlign: "center",
github cai3178940 / youran / youran-generate-ui / src / views / entity / erDiagram.vue View on Github external
defaultAlignment: go.Spot.Left,
                  stretch: go.GraphObject.Horizontal,
                  itemTemplate: itemTempl
                },
                new go.Binding('itemArray', 'fields'))
            ) // end Table Panel
          ) // end Node

      // define the Link template, representing a relationship
      this.diagram.linkTemplate =
          $(go.Link, // the whole link panel
            {
              selectionAdorned: true,
              layerName: 'Foreground',
              reshapable: true,
              routing: go.Link.AvoidsNodes,
              corner: 5,
              curve: go.Link.JumpOver
            },
            $(go.Shape, // the link shape
              { stroke: '#303B45', strokeWidth: 2.5 }),
            $(go.TextBlock, // the 'from' label
              {
                textAlign: 'center',
                font: 'bold 14px sans-serif',
                stroke: '#1967B3',
                segmentIndex: 0,
                segmentOffset: new go.Point(NaN, NaN),
                segmentOrientation: go.Link.OrientUpright
              },
              new go.Binding('text', 'text')),
            $(go.TextBlock, // the 'to' label
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / statemachinedoc.tsx View on Github external
node.ports.each(function(port) {
        if (port.portId !== "") {  // don't change the default port, which is the big shape
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    }

    var linkSelectionAdornmentTemplate =
      $(go.Adornment, "Link",
        $(go.Shape,
          // isPanelMain declares that this Shape shares the Link.geometry
          { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
      );

    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          $(go.Shape, "RoundedRectangle",  // the link shape
github nimble-platform / frontend-service / src / app / explorative-search / explorative-search-details.component.ts View on Github external
this.$(go.Node, 'Auto',
                {
                    locationSpot: go.Spot.Center,
                    selectionAdorned: true,
                    toolTip: commonToolTip
                },
                this.$(go.Shape, 'Circle',
                    { fill: 'white' }),
                this.$(go.TextBlock,
                    { font: 'bold 12pt sans-serif', margin: 5 },
                    new go.Binding('text'))
            ));

        // define the Link template
        this.myDiagram.linkTemplate =
            this.$(go.Link,
                {
                    routing: go.Link.Normal,
                    curve: go.Link.Bezier,
                    selectionAdorned: false,
                    layerName: 'Background'
                },
                this.$(go.Shape,
                    {
                        stroke: 'black',  // default value, but is data-bound
                        strokeWidth: 1
                    },
                    new go.Binding('stroke', 'color'))
            );
        this.myDiagram.addDiagramListener('ChangedSelection', (e: any) => {
            // check for selection changes.. especially when Multiselect is off
            if (e.diagram.selection.count === 0) { // if in non Multiselect all selections removed
github naver / pinpoint / web / src / main / webapp / v2 / src / app / core / components / server-map / class / server-map-template-with-gojs.class.ts View on Github external
new go.Binding('routing', 'routing', (val) => {
                return go.Link[val];
            }),
            new go.Binding('curve', 'curve', (val) => {
github naver / pinpoint / web / src / main / webapp / v2 / src / app / core / components / server-map / class / server-map-template-with-gojs.class.ts View on Github external
public static makeLinkTemplate(serverMapComponent: any) {
        const $ = go.GraphObject.make;
        return $(
            go.Link,
            {
                corner: 10,
                cursor: 'pointer',
                layerName: 'Foreground',
                reshapable: false,
                selectionAdorned: false,
                click: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onClickLink(event, obj);
                },
                doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onDoubleClickLink(event, obj);
                },
                contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickLink(event, obj);
                }
            },

gojs

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

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

Package Health Score

79 / 100
Full package analysis