How to use the gojs.Margin 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 guillaumejacquart / react-traefik / src / components / GoFlow.js View on Github external
isMultiline: false,
                minSize: new go.Size(10, 16)
              },
              new go.Binding("text", "name").makeTwoWay()),
            $(go.TextBlock, "Desc: ", textStyle(), {
              row: 1,
              column: 0
            }),
            $(go.TextBlock, textStyle(), {
                row: 1,
                column: 1,
                columnSpan: 4,
                editable: true,
                isMultiline: false,
                minSize: new go.Size(10, 14),
                margin: new go.Margin(0, 0, 0, 3)
              },
              new go.Binding("text", "desc").makeTwoWay())
          ) // end Table Panel
        ) // end Horizontal Panel
      ); // end Node

    var model = $(go.TreeModel);
    var data =[];
    var backends = {};
    
    for (var p in props.data.providers) {
      for (var b in props.data.providers[p].backends) {
        var urls = '';
        for (var s in props.data.providers[p].backends[b].servers) {
          var url = props.data.providers[p].backends[b].servers[s].url;
          var weight = props.data.providers[p].backends[b].servers[s].weight;
github guillaumejacquart / react-traefik / src / components / GoFlow.js View on Github external
// define the node's outer shape
        $(go.Shape, "Rectangle", {
          name: "SHAPE",
          fill: "#00FF00",
          stroke: null,
          // set the port properties:
          portId: "",
          fromLinkable: true,
          toLinkable: true,
          cursor: "pointer"
        }),
        $(go.Panel, "Horizontal",
          $(go.Picture, {
              name: "Picture",
              desiredSize: new go.Size(39, 50),
              margin: new go.Margin(6, 8, 6, 10),
            },
            new go.Binding("source", "key", findHeadShot)),
          // define the panel where the text will appear
          $(go.Panel, "Table", {
              maxSize: new go.Size(150, 999),
              margin: new go.Margin(6, 10, 0, 3),
              defaultAlignment: go.Spot.Left
            },
            $(go.RowColumnDefinition, {
              column: 2,
              width: 4
            }),
            $(go.TextBlock, textStyle(), // the name
              {
                row: 0,
                column: 0,
github guillaumejacquart / react-traefik / src / components / GoFlow.js View on Github external
portId: "",
          fromLinkable: true,
          toLinkable: true,
          cursor: "pointer"
        }),
        $(go.Panel, "Horizontal",
          $(go.Picture, {
              name: "Picture",
              desiredSize: new go.Size(39, 50),
              margin: new go.Margin(6, 8, 6, 10),
            },
            new go.Binding("source", "key", findHeadShot)),
          // define the panel where the text will appear
          $(go.Panel, "Table", {
              maxSize: new go.Size(150, 999),
              margin: new go.Margin(6, 10, 0, 3),
              defaultAlignment: go.Spot.Left
            },
            $(go.RowColumnDefinition, {
              column: 2,
              width: 4
            }),
            $(go.TextBlock, textStyle(), // the name
              {
                row: 0,
                column: 0,
                columnSpan: 5,
                font: "12pt Segoe UI,sans-serif",
                editable: true,
                isMultiline: false,
                minSize: new go.Size(10, 16)
              },
github cai3178940 / youran / youran-generate-ui / src / views / entity / erDiagram.vue View on Github external
layout: $(go.ForceDirectedLayout),
              'undoManager.isEnabled': true
            })

      // the template for each attribute in a node's array of item data
      const itemTempl =
          $(go.Panel, 'Horizontal',
            $(go.Shape,
              { desiredSize: new go.Size(10, 10),
                margin: new go.Margin(0, 5, 0, 0) },
              new go.Binding('figure', 'figure'),
              new go.Binding('fill', 'color')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif',
                margin: new go.Margin(0, 10, 0, 0) },
              new go.Binding('text', 'name')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif' },
              new go.Binding('text', 'desc'))
          )

      // define the Node template, representing an entity
      this.diagram.nodeTemplate =
          $(go.Node, 'Auto', // the whole node panel
            { selectionAdorned: true,
              resizable: true,
              layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
              fromSpot: go.Spot.AllSides,
              toSpot: go.Spot.AllSides,
              isShadowed: true,
github cai3178940 / youran / youran-generate-ui / src / views / entity / erDiagram.vue View on Github external
this.diagram =
          $(go.Diagram, 'erDiagramDiv', // must name or refer to the DIV HTML element
            {
              initialContentAlignment: go.Spot.Center,
              allowDelete: false,
              allowCopy: false,
              layout: $(go.ForceDirectedLayout),
              'undoManager.isEnabled': true
            })

      // the template for each attribute in a node's array of item data
      const itemTempl =
          $(go.Panel, 'Horizontal',
            $(go.Shape,
              { desiredSize: new go.Size(10, 10),
                margin: new go.Margin(0, 5, 0, 0) },
              new go.Binding('figure', 'figure'),
              new go.Binding('fill', 'color')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif',
                margin: new go.Margin(0, 10, 0, 0) },
              new go.Binding('text', 'name')),
            $(go.TextBlock,
              { stroke: '#333333',
                font: 'bold 14px sans-serif' },
              new go.Binding('text', 'desc'))
          )

      // define the Node template, representing an entity
      this.diagram.nodeTemplate =
          $(go.Node, 'Auto', // the whole node panel
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
const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].stroke;
                    }),
                    new go.Binding('strokeWidth', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].strokeWidth;
                    })
                ),
                $(
                    go.TextBlock,
                    {
                        textAlign: 'center',
                        height: 20,
                        row: 1,
                        column: 0,
                        margin: new go.Margin(5, 10, 0, 10)
                    },
                    new go.Binding('font', 'key', (key: string) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
                        return ServerMapTheme.general.common.font[type];
                    }),
                    new go.Binding('stroke', '', () => {
                        return ServerMapTheme.general.node.normal.text.stroke;
                    }),
                    new go.Binding('text', '', (data) => {
                        return '[' + data.topCountNodes[0].applicationName.split(' ')[1] + ']' + data.serviceType.replace(/(.*)\_.*/ig, '$1');
                    })
                )
            ),
            $(
                go.Panel,
                go.Panel.Auto,
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('font', 'key', (key: string) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
                        return ServerMapTheme.general.common.font[type];
                    }),
                    new go.Binding('stroke', '', () => {
                        return ServerMapTheme.general.node.normal.text.stroke;
                    }),
                    new go.Binding('text', 'applicationName')
                ),
                $(
                    go.Panel, 'Auto',
                    { row: 0, column: 0, alignment: go.Spot.BottomCenter },
                    $(
                        go.TextBlock,
                        {
                            margin: new go.Margin(0, 0, 10, 0),
                        },
                        new go.Binding('visible', 'instanceCount', (v) => {
                            return v > 1 ? true : false;
                        }),
                        new go.Binding('font', '', () => {
                            return ServerMapTheme.general.common.font.normal;
                        }),
                        new go.Binding('stroke', '', () => {
                            return ServerMapTheme.general.instance.text.stroke;
                        }),
                        new go.Binding('text', 'instanceCount')
                    )
                ),
                $(
                    go.Panel, 'Auto',
                    { row: 0, column: 0, alignment: go.Spot.TopCenter },
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('visible', '', (data) => {
                        return data.isAuthorized && data.isWas;
                    }),
                    new go.Binding('parameter1', '', (data) => {
                        return calcuCircleData(CIRCLE_TYPE.RED, data.histogram, 50, 50, 50);
                    })
                ),
                $(
                    go.TextBlock,
                    {
                        textAlign: 'center',
                        height: 20,
                        row: 1,
                        column: 0,
                        margin: new go.Margin(5, 10, 0, 10)
                    },
                    new go.Binding('font', 'key', (key: string) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
                        return ServerMapTheme.general.common.font[type];
                    }),
                    new go.Binding('stroke', '', () => {
                        return ServerMapTheme.general.node.normal.text.stroke;
                    }),
                    new go.Binding('text', 'applicationName')
                ),
                $(
                    go.Panel, 'Auto',
                    { row: 0, column: 0, alignment: go.Spot.BottomCenter },
                    $(
                        go.TextBlock,
                        {

gojs

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

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

Package Health Score

84 / 100
Full package analysis