northwoodssoftware/gojs

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

gojs's Issues

GOJS Diagram doesnt render on the UIB tabset.

I am trying to incorporate the GOJS Diagram as part of modal popup which has a UIB TABSET which has 4 tabs and this diagram is part of an HTML included on 3rd TAB. The issue that we have here is for some reason the diagram initializes to zero size since it’s not on the first one.

The same diagram works perfectly alright when I call that html as part of the first tab. Things to be noted here is each tab includes a html file which has its own controller.

I went through one of the forum which recommends calling the below function

myDiagram.requestUpdate() // here myDiagram has my diagram description

(function() {
    'use strict';

    angular
        .module('TESTUi')
        .directive('goDiagram', function() {
  return {
    restrict: 'E',
    template: '<div></div>',  // just an empty DIV element
    replace: true,
    scope: { model: '=goModel' },
    link: function(scope, element, attrs) {
      var $ = go.GraphObject.make;
      var fieldTemplate =
          $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
            new go.Binding("portId", "name"),  // this Panel is a "port"
            {
              background: "transparent",  // so this port's background can be picked by the mouse
              fromSpot: go.Spot.Right,  // links only go from the right side to the left side
              toSpot: go.Spot.Left,
              // allow drawing links from or to this port:
              fromLinkable: true, toLinkable: true
            },
            $(go.Shape,
              { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
                // but disallow drawing links from or to this shape:
                fromLinkable: false, toLinkable: false },
              new go.Binding("figure", "figure"),
              new go.Binding("fill", "color")),
            $(go.TextBlock,
              { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
                // and disallow drawing links from or to this text:
                fromLinkable: false, toLinkable: false },
              new go.Binding("text", "name")),
            $(go.TextBlock,
              { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif" },
              new go.Binding("text", "info"))
          );

      var diagram =  // create a Diagram for the given HTML DIV element
        $(go.Diagram, element[0],
          {
            nodeTemplate: $(go.Node, "Auto",
                            { locationSpot: go.Spot.Center,
                              movable: false,
                              copyable: false,
                              deletable: false
                            },
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                            $(go.Shape,
                                    { fill: "#EEEEEE" }),
                                  // the content consists of a header and a list of items
                                  $(go.Panel, "Vertical",
                                    // this is the header for the whole node
                                    $(go.Panel, "Auto",
                                      { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
                                      $(go.Shape,
                                        { fill: "#1570A6", stroke: null }),
                                      $(go.TextBlock,
                                        {
                                          alignment: go.Spot.Center,
                                          margin: 3,
                                          stroke: "white",
                                          textAlign: "center",
                                          font: "bold 12pt sans-serif"
                                        },
                                        new go.Binding("text", "key"))),
                                     // this Panel holds a Panel for each item object in the itemArray;
                                        // each item Panel is defined by the itemTemplate to be a TableRow in this Table
                                        $(go.Panel, "Table",
                                          {
                                            padding: 2,
                                            minSize: new go.Size(100, 10),
                                            defaultStretch: go.GraphObject.Horizontal,
                                            itemTemplate: fieldTemplate
                                          },
                                          new go.Binding("itemArray", "fields")
                                        )  // end Table Panel of items
                                      )  // end Vertical Panel
                                    ),


                            linkTemplate: $(go.Link,
                            { relinkableFrom: true, relinkableTo: true,toShortLength: 4 },
                            $(go.Shape, { strokeWidth: 1.5 }),
                            $(go.Shape, { toArrow: "Standard", stroke: null })
                          ),
            initialContentAlignment: go.Spot.Center,
            "ModelChanged": updateAngular,
            "undoManager.isEnabled": true
          });
      // whenever a GoJS transaction has finished modifying the model, update all Angular bindings
      function updateAngular(e) {
        if (e.isTransactionFinished) scope.$apply();
      }
      // notice when the value of "model" changes: update the Diagram.model
      scope.$watch("model", function(newmodel) {
        var oldmodel = diagram.model;
        if (oldmodel !== newmodel) {
          diagram.removeDiagramListener("ChangedSelection", updateSelection);
          diagram.model = newmodel;
          diagram.addDiagramListener("ChangedSelection", updateSelection);
        }
      });
      scope.$watch("model.selectedNodeData.name", function(newname) {
        if (!diagram.model.selectedNodeData) return;
        // disable recursive updates
        diagram.removeModelChangedListener(updateAngular);
        // change the name
        diagram.startTransaction("change name");
        // the data property has already been modified, so setDataProperty would have no effect
        var node = diagram.findNodeForData(diagram.model.selectedNodeData);
        if (node !== null) node.updateTargetBindings("name");
        diagram.commitTransaction("change name");
        // re-enable normal updates
        diagram.addModelChangedListener(updateAngular);
      });
      // update the model when the selection changes
      function updateSelection(e) {
        var selnode = diagram.selection.first();
        diagram.model.selectedNodeData = (selnode instanceof go.Node ? selnode.data : null);
        scope.$apply();
      }
      diagram.addDiagramListener("ChangedSelection", updateSelection);
    }
  };
})
    .controller('MappingController', MappingController);

    function MappingController($log, $scope, $http) {

        var vm = this;
        vm.hideMe = true;

       /* vm.mapClick = function() {
            alert("Map!");
        }*/
        $scope.model =go.GraphObject.make(go.GraphLinksModel,
                  {
                    linkFromPortIdProperty: "fromPort",
                    linkToPortIdProperty: "toPort",
                    nodeDataArray: [
                      { key: "Record1",
                        fields: [
                          { name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
                          { name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
                          { name: "fieldThree", info: "3rd", color: "#00BCF2" }
                        ],
                        loc: "0 0" },
                      { key: "Record2",
                        fields: [
                          { name: "fieldA", info: "",       color: "#FFB900", figure: "Diamond" },
                          { name: "fieldB", info: "",       color: "#F25022", figure: "Rectangle" },
                          { name: "fieldC", info: "",       color: "#7FBA00", figure: "Diamond" },
                          { name: "fieldD", info: "fourth", color: "#00BCF2",  figure: "Rectangle" }
                        ],
                        loc: "250 0" }
                    ],
                    linkDataArray: [
                      { from: "Record1", fromPort: "field1", to: "Record2", toPort: "fieldA" },
                      { from: "Record1", fromPort: "field2", to: "Record2", toPort: "fieldD" },
                      { from: "Record1", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" }
                    ]
                  });
        $scope.model.selectedNodeData = null;


    }
})();

Below is the include of the page in tab set

Step 3 : Mapping

About group style

Hi!
I think each change group with and height on expanded or collapse, But i can't find about simple or API document, help me please.
Thanks!

Problem with nodeIsGroupProperty and Palette

Hi,

I have a diagram and a palette that both share the same nodeTemplateMap and groupTemplateMap. My objects do not have a property isGroup, and I would highly prefer it if it could stay that way. The problem is, when I go and set nodeIsGroupProperty with a function on the GraphLinksModel, the groups are displayed properly on the diagram but the Palette contains -1, -2 and outputs

No NodeTemplate found for category name of group category.

This tells me that the Palette could not tell my element was a group. How could I make the Palette display groups like the ones in the diagram?

GoJS and Bootstrap Tabs issue

Hello there,

i've got a strange issue with GoJS and bootstrap tabs.

The think is (and i'm unfortunately not able to show the code) that if my diagram is in the active tab (fist tab of tabset) it works like a charm.
if i move the gojs diagram into for example the second tab and reload the page when i will click the second tab to see the diagram it simply does not render. Everything is there but not render in screen.
All elements gets a width and height of 1px.

I know i'm not very helpful but maybe you have been there. Tried already for hours to find a solution in my source and online but i have no errors at all.

Internal links do not move with collapsed group

When a collapsed group is moved, its internal links stay in their old position.

In your example, the groups have a layout, which solves this problem by rearranging the links afterwards. However, this doesn't happen if the group has no layout. Expanding the group after moving as collapsed shows the links detached.

I don't know how, but expanding and collapsing a group after moving in DraggingTool doDactivate works as a temp solution.

Model.dataFormat in Internet Explorer issue

When I set Model.dataFormat to a non-empty string, pasting in the same model is no longer possible in IE11. It works fine in Chrome. Can you think of anything I can do to solve this?

Typescript compile error: "... node_modules/gojs/release/go.d.ts' is not a module"

I use Typescript 1.8 but to fix this issue I need to change following lines in go.d.ts file:

declare module "go" {  
  export = go;         
}

to
export = go;

Diagram context menu not opening on long-press with Pen (Microsoft Surface 4 Pro)

Hello,

I opened the goJS basic sample page on a Microsoft Surface 4 Pro (Edge, Chrome). However, it is not possible to open the context menu using the surface pen. I can see a circle which is usually displayed when a long-press is performed, but no context menu is displayed.
Opening the context menu using a finger instead (long-touch) works as expected. (Also see #25).

Any idea or more information I could provide?

Best regards,
Dominic

Angular Sample: $digest already in progress

Running https://gojs.net/latest/samples/angular.html in developer mode we get the below error in the console.
To reproduce: move one node and afterwards press "Replace Model" button.

We are evaluating GoJS at the moment and we use Toastr in our programs to display errors, also in production we will. We hope you can have a look into this issue and hopefully fix it soon.

"Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.2/$rootScope/inprog?p0=%24digest
C/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:6:449
f@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:95:393
zd/this.$get</g.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:101:300
.link/<@https://gojs.net/latest/samples/angular.html:78:13
E.prototype.Ba@https://gojs.net/latest/release/go.js:885:387
E.prototype.yw@https://gojs.net/latest/release/go.js:788:228
@https://gojs.net/latest/release/go.js:825:253
.link/<@https://gojs.net/latest/samples/angular.html:57:15
zd/this.$get</g.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:99:139
zd/this.$get</g.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:101:367
Mc[c]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:177:147
Yc/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:27:13
q@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:7:253
Yc/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js:26:1
"

Request for using GoJS in sky-walking open source apm.

Hi, I am the founder and developer of sky-walking apm. In its 3.0 version, we will provide a topological graph about a distributed application cluster. Also as a core member of OpenTracing, inferring applications topological graph is a very important feature.

Right now, I can do this:

I have tried to use GoJS to do the topological graph, it works better. Although GoJS is open source, it has a license restriction.

I want you to approve us using GoJS in sky-walking apm. Hope you can help our open source team.

makeUniqueKeyFunction is not called for first node of a template

I opened a new issue as per your instructions. See #19

Please test with the following sample:
flowchart2.html.txt

The makeUniqueKeyFunction sets "key" fix to 1001 (only for this sample).
The palette does not have nodes with an attribute "key".
We load an initial empty model.

Add a node from the palette and save: key = -1
Add another node and save: key = 1001.

Why is the variable key for the first node not 1001?

The other question is not answered:
When adding to the model

"nodeKeyProperty": "uuid",
"linkKeyProperty": "uuid",

the function gets called, and the value is correct for uuid, but it is unclear why there is also a "key" saved, which is even not unique.
Why?

the Diagram in hidden tabitem is not work

Hi:
When I use gojs，it's very good.but when I use bootsrap's tab, I find as question: the Diagram in hidden tabitem is not work.
code :

• workfow
• other

---

• other
• workfow

<script type="text/javascript"> //var diagram; $(document).ready(function () { fn_LoadWokflowDiagram(); $('#configTab li:eq(0) a').tab('show'); $('#configTab1 li:eq(0) a').tab('show'); });

        function fn_LoadWokflowDiagram() {

            var myDiagram = new go.Diagram("myDiagramDiv");
            myDiagram.model = new go.GraphLinksModel(
                [{ key: "Hello" },   // two node data, in an Array
                { key: "World!" }],
                [{ from: "Hello", to: "World!" }]  // one link, in an Array
            );

            var myDiagram1 = new go.Diagram("myDiagramDiv1");
            myDiagram1.model = new go.GraphLinksModel(
                [{ key: "Hello" },   // two node data, in an Array
                { key: "World!" }],
                [{ from: "Hello", to: "World!" }]  // one link, in an Array
            );
        }
    </script>

please help,thank you

Support modules for tree shaking

Are there any plans for using ES6 modules, so that tools like webpack/rollup.js can tree shake? I'm worried about the size of the library, and ideally only want to package up the sections I'm using.

License terms for the sample code?

Hi,

I can't seem to find any LICENSE file or anything relating to licensing in the repo - are the bits of sample code free to reuse?

Cheers!

Phantomjs can't use makeImageData method to export gojs diagram which have go.picture

Please see
https://forum.nwoods.com/t/server-side-images-of-diagrams-with-pictures-using-phantomjs/7418/6

below is demo code:

myDiagram.nodeTemplate =
    $(go.Part, "Vertical",
        $(go.Picture,'00000000-0000-0000-0000-00000000002e.png',{
                 name:'Picture',
                 desiredSize: new go.Size(55, 55),
                 background: 'White'
             })
    );
    var a = myDiagram.makeImageData({
    scale: 1,
    // PhantomJS tends to handle transparency poorly in the images it renders,
    // so we prefer to use a white background:
    background: "white"
  });

makeUniqueKeyFunction is not called for first node of a template

We adapted load() from the workflow sample to generate unique UUIDs (similar to stateChartIncremental sample).

  function load() {
      var model = go.Model.fromJson(document.getElementById("mySavedModel").value);

      model.makeUniqueKeyFunction = function (model, data) {
          var uuid = new UUID(4).format(); //pure-uuid
          data.uuid = uuid;
          return uuid;
      };

      model.makeUniqueLinkKeyFunction = function (model, data) {
          var uuid = new UUID(4).format(); //pure-uuid
          data.uuid = uuid;
          return uuid;
      };

      myDiagram.model = model;
  }

Now we noticed that for the first node of a specific template the function is never called.

For the stateChartIncremental this would mean that the additional data.id for every first node of a specific template when taken from a palette would not be set.

{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ 
{"category":"Start", "text":"Start", "key":-1, "loc":"-380 -280"},
{"category":"Start", "text":"Start", "key":"addc329b-6e0e-4867-b257-895cf7284731", "loc":"-40 -180", "uuid":"addc329b-6e0e-4867-b257-895cf7284731"},
{"category":"Comment", "text":"Comment", "key":-8, "loc":"-180 120"},
{"category":"Comment", "text":"Comment", "key":"92b4479c-ee2e-4a1c-afdd-3fb111be6382", "loc":"120 100", "uuid":"92b4479c-ee2e-4a1c-afdd-3fb111be6382"}
 ],
  "linkDataArray": []}

Did some further testing:
It seems to be dependent on the nodeKeyProperty. When set the function is called.

When adding to the model

  "nodeKeyProperty": "uuid",
  "linkKeyProperty": "uuid",

{ "class": "go.GraphLinksModel",
  "nodeKeyProperty": "uuid",
  "linkKeyProperty": "uuid",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ 
{"category":"Start", "text":"Start", "key":-1, "loc":"-300 -180", "uuid":"a7d3e978-5042-4da5-95af-464eb4c9c420"},
{"category":"RunClass", "text":"RunClass ...", "key":-2, "loc":"-300 40", "uuid":"fac335a8-34ec-49e9-a1c7-e9f2f6966e70"},
{"category":"Start", "text":"Start", "key":-1, "loc":"120 -180", "uuid":"fcf834e2-e7da-45d7-83a7-9695f4a66214"},
{"category":"RunClass", "text":"RunClass ...", "key":-2, "loc":"160 40", "uuid":"fbd7798a-117b-4ded-8c1e-d9eb989cc769"}
 ],
  "linkDataArray": [ 
{"from":"a7d3e978-5042-4da5-95af-464eb4c9c420", "to":"fac335a8-34ec-49e9-a1c7-e9f2f6966e70", "fromPort":"B", "toPort":"T", "uuid":"793d60d4-e5f3-4146-aac9-d235a6d18859", "points":[-300,-140,-300,-130,-300,-60,-300,-60,-300,10,-300,20]},
{"from":"fcf834e2-e7da-45d7-83a7-9695f4a66214", "to":"fbd7798a-117b-4ded-8c1e-d9eb989cc769", "fromPort":"B", "toPort":"L", "uuid":"d04e2a90-0646-457e-9315-c6edf40884ce", "points":[120,-140,120,-130,120,-59,50,-59,50,40,60,40]}
 ]}

the function gets called, but it is unclear why there is also a "key" saved, which is even not unique.

line-height is not ok

Can not view whole word in TextBlock.
Demo URL: http://gojs.net/latest/samples/selectableFields.html

Problem with GoJS and bootstrap

There is a problem with GoJS library, if I use twitter's bootstrap in the same time.
Scrollbars of the stage are dislocated if diagram is bigger than the div container.
Some screen caputres of Internet Explorer 9 (similar problem in Chrome too).

With bootstrap (http://getbootstrap.com/):

Without bootstrap:

Items can only be moved when pressing hard on touch device (Microsoft Surface)

In the latest version (1.8.11) items can only be moved via touch gesture on a Microsoft Surface Tablet when I press quite hard on the item (both palette and modelling area).

Until 1.8.2 and between 1.8.8 and 1.8.10 (e.g. https://gojs.net/1.8.10/samples/flowchart.html), I just needed to touch an item slightly to be able to move it around.
In 1.8.11 (e.g. https://gojs.net/1.8.11/samples/flowchart.html) and from 1.8.3 to 1.8.7, I need to press quite hard else the item gets only selected and the diagram is scrolled.

This seems to be related to #52: In versions where the drag into the diagram area works correctly, a hard press is needed.

这个GOJS是否收费？

这个GOJS是否收费？

Integrate GoJS in mobile (Native)

Hello,

Can it be used in mobile platforms like iOS and Android? Because we are going to build mobile app with this kind of feature like this one.

Thank you.

Can this be used in React?

Can this be used in react? If so, is there a guide? Thanks in advanced

OrthogonalLinkReshapingTool with Angular2 Error

Hi,
Thanks for great library,,,, i want to run OrthogonalLinkReshaping example on angular 2, i've already tested the gojs angular sample example, and it work perfectly, after that i add OrthogonalLinkReshapingTool.js to my .angular-cli.json and add OrthogonalLinkReshapingTool sample code to my app.component.ts. here is my app.component.ts file

import { Component, OnInit, ViewChild, ElementRef, AfterContentInit } from '@angular/core';
import * as go from 'gojs';
declare var OrthogonalLinkReshapingTool;
@Component({
  selector: 'app-home',
  template: `
  <div id="myDiagramDiv" #myDiagramDiv style="border: solid 1px black; width:100%; height:600px"></div>
  `,
})
export class HomeComponent implements OnInit, AfterContentInit {

  @ViewChild('myDiagramDiv') myDiagramDiv: ElementRef

  public myDiagram: any;
  constructor(private element: ElementRef) {
  }
  ngOnInit() {
  }
  ngAfterContentInit() {
    let $ = go.GraphObject.make;
    console.log($);
    this.myDiagram = $(go.Diagram, this.myDiagramDiv.nativeElement,({
        "initialContentAlignment": go.Spot.Center,
        "undoManager.isEnabled": true,
        "linkReshapingTool": new OrthogonalLinkReshapingTool()
    }));
    // Rest OF the Code from GOJS OrthogonalLinkReshaping.html sample
  }
   
}

when i run this code i got this error:

ERROR Error: ToolManager.replaceStandardTool:newtool value is not an instance of Tool: OrthogonalLinkReshaping Tool
    at Object.k (go.js:14)
    at Object.Dd (go.js:15)
    at Object.G (go.js:14)
    at Dk (go.js:688)
    at ih.eval (go.js:691)
    at Object.Su (go.js:27)
    at dp (go.js:1094)
    at bp (go.js:1089)
    at HomeComponent.ngAfterContentInit (home.component.ts:30)
    at callProviderLifecycles (core.js:12423)

I've seen some error like this from this post :
https://forum.nwoods.com/t/presales-question-draggable-link-error/7564
but mine is different coz i used OrthogonalLinkReshapingTool.js file. so how can i solve this?
thanks in advance

odoo v9

good afternoon, do you know where the error may come:

Uncaught Error: Trying to set undefined property "length" on object: Diagram ""
Uncaught Error: Trying to set undefined property "length" on object: Diagram ""

http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7035
Traceback:
Error: Trying to set undefined property "length" on object: Diagram ""
at Error (native)
at Object.k (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7035:4193)
at Object.pu (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7037:1256)
at hn (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7194:898)
at fn (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7191:259)
at OdooClass.render_map (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7371:168)
at OdooClass. (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:7371:420)
at OdooClass.trigger (http://127.0.0.1:8069/web/content/246-1aefcb8/web.assets_common.js:2613:180)
at OdooClass.trigger (http://127.0.0.1:8069/web/content/246-1aefcb8/web.assets_common.js:2615:669)
at _notify (http://127.0.0.1:8069/web/content/1020-bda5065/web.assets_backend.js:3256:443)

.angular-cli.json Missing for Angular 4 project

File .angular-cli.json is missing from the Angular-basic and project fails to run with:
Cannot read property 'config' of null

“setDataProperty” cannot be called forever

A permanent call will cause a browser crash（jsheap rise）

Trying to set undefined property ' ' on object

Hi,
I'm trying to run dynamicPorts example with reactjs. i've already run some gojs samples with react but i have problem with this one. i copy and paste the code from original example to my code. btw i used npm as package manager and webpack. here is part of my code that cause error.

this.state.myDiagram.linkTemplate =
    $(CustomLink,
        {
          routing: go.Link.AvoidsNodes,
          corner: 4,
          curve: go.Link.JumpGap,
          reshapable: true,
          resegmentable: true,
          relinkableFrom: true,
          relinkableTo: true
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 })
      );

function CustomLink() {
      go.Link.call(this);
    };

but when i run this i got

Error: Trying to set undefined property "routing" on object: [object Object]
go.js:14:14

any idea abt this?
Thanks

GuidedDraggingTool error

Hi.

I found error in GuidedDraggingTool. The condition of occurring error in the sample page(hyperlink) is dragging links(not nodes). When I drag a link, looping errors occur. I captured one of them.

Cannot add a Part to a Panel: Group#434

I want to add some spots on groups in order to draw links between then by hand, but I get error "Cannot add a Part to a Panel: Group#434".

Here is my code:

<title>Regrouping Demo</title> <script src="./go.js"></script> <script src="./port.js"></script> <script src="./filed.js"></script> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make;

myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      allowDrop: true, // from Palette
      // what to do when a drag-drop occurs in the Diagram's background
      mouseDrop: function(e) { finishDrop(e, null); },
      layout:  // Diagram has simple horizontal layout
        $(go.GridLayout,
          { wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) }),
      initialContentAlignment: go.Spot.Center,
      "commandHandler.archetypeGroupData": { isGroup: true, category: "OfNodes" },
      "undoManager.isEnabled": true
    });

// There are two templates for Groups, "OfGroups" and "OfNodes".

// this function is used to highlight a Group that the selection may be dropped into
function highlightGroup(e, grp, show) {
  if (!grp) return;
  e.handled = true;
  if (show) {
    // cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
    // instead depend on the DraggingTool.draggedParts or .copiedParts
    var tool = grp.diagram.toolManager.draggingTool;
    var map = tool.draggedParts || tool.copiedParts;  // this is a Map
    // now we can check to see if the Group will accept membership of the dragged Parts
    if (grp.canAddMembers(map.toKeySet())) {
      grp.isHighlighted = true;
      return;
    }
  }
  grp.isHighlighted = false;
}

// Upon a drop onto a Group, we try to add the selection as members of the Group.
// Upon a drop onto the background, or onto a top-level Node, make selection top-level.
// If this is OK, we're done; otherwise we cancel the operation to rollback everything.
function finishDrop(e, grp) {
  var ok = (grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
  if (!ok) e.diagram.currentTool.doCancel();
}

myDiagram.groupTemplateMap.add("OfGroups",
$(go.Node,"Spot",nodeStyle(),
  $(go.Group, "Auto",
    {
      background: "transparent",
      // highlight when dragging into the Group
      mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
      mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
      computesBoundsAfterDrag: true,
      // when the selection is dropped into a Group, add the selected Parts into that Group;
      // if it fails, cancel the tool, rolling back any changes
      mouseDrop: finishDrop,
      handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
      // Groups containing Groups lay out their members horizontally
      layout:
        $(go.GridLayout,
          { wrappingWidth: Infinity, alignment: go.GridLayout.Position,
              cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) })
    },
    new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
    $(go.Shape, "Rectangle",
      { fill: null, stroke: "#FFDD33", strokeWidth: 2 }),
    $(go.Panel, "Vertical",  // title above Placeholder
      $(go.Panel, "Horizontal",  // button next to TextBlock
        { stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
        $("SubGraphExpanderButton",
          { alignment: go.Spot.Right, margin: 5 }),
        $(go.TextBlock,
          {
            alignment: go.Spot.Left,
            editable: true,
            margin: 5,
            font: "bold 18px sans-serif",
            opacity: 0.75,
            stroke: "#404040"
          },
          new go.Binding("text", "text").makeTwoWay())
      ),  // end Horizontal Panel
      $(go.Placeholder,
        { padding: 5, alignment: go.Spot.TopLeft })
    )  // end Vertical Panel
  )),
  makePort("T", go.Spot.Top, true, true),
  makePort("L", go.Spot.Left, true, true),
  makePort("R", go.Spot.Right, true, true),
  makePort("B", go.Spot.Bottom, true, true)
  );  // end Group and call to add to template Map

myDiagram.groupTemplateMap.add("OfNodes",
  $(go.Group, "Auto",
    {
      background: "transparent",
      ungroupable: true,
      // highlight when dragging into the Group
      mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
      mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
      computesBoundsAfterDrag: true,
      // when the selection is dropped into a Group, add the selected Parts into that Group;
      // if it fails, cancel the tool, rolling back any changes
      mouseDrop: finishDrop,
      handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
      // Groups containing Nodes lay out their members vertically
      layout:
        $(go.GridLayout,
          { wrappingColumn: 1, alignment: go.GridLayout.Position,
              cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) })
    },
    new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
    $(go.Shape, "Rectangle",
      { fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
    $(go.Panel, "Vertical",  // title above Placeholder
      $(go.Panel, "Horizontal",  // button next to TextBlock
        { stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
        $("SubGraphExpanderButton",
          { alignment: go.Spot.Right, margin: 5 }),
        $(go.TextBlock,
          {
            alignment: go.Spot.Left,
            editable: true,
            margin: 5,
            font: "bold 16px sans-serif",
            opacity: 0.75,
            stroke: "#404040"
          },
          new go.Binding("text", "text").makeTwoWay())
      ),  // end Horizontal Panel
      $(go.Placeholder,
        { padding: 5, alignment: go.Spot.TopLeft })
    )  // end Vertical Panel
  ));  // end Group and call to add to template Map

  // This template represents a whole "record".
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",nodeStyle(),
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      // this rectangular shape surrounds the content of the node
      $(go.Shape,
        { fill: "#fff" }),
      // the content consists of a header and a list of items
      $(go.Panel, "Vertical",
        // this is the header for the whole node
        $(go.Panel, "Auto",
          { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
          $(go.Shape,
            { fill: "gray", stroke: null },new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              alignment: go.Spot.Center,
              margin: 3,
              stroke: "#fff",
              textAlign: "center",
              font: "bold 12pt sans-serif",
              editable:true
            },
            new go.Binding("text", "text"))),
        $(go.Panel, "Table",{
          name: "TABLE",
          padding: 1,
          minSize: new go.Size(100, 10),
          defaultStretch: go.GraphObject.Horizontal,
          itemTemplate: fieldTemplate
        },new go.Binding("itemArray", "fields"))
      ),  // end Vertical Panel
      makePort("T", go.Spot.Top, true, true),
      makePort("L", go.Spot.Left, true, true),
      makePort("R", go.Spot.Right, true, true),
      makePort("B", go.Spot.Bottom, true, true)
    );  // end Node

//删除
// this is a bit inefficient, but should be OK for normal-sized graphs with reasonable numbers of items per node
function findAllSelectedItems() {
var items = [];
for (var nit = myDiagram.nodes; nit.next(); ) {
var node = nit.value;
var table = node.findObject("TABLE");
if (table) {
for (var iit = table.elements; iit.next(); ) {
var itempanel = iit.value;
if (itempanel.background !== "transparent") items.push(itempanel);
}
}
}
return items;
}

//删除
myDiagram.commandHandler.canDeleteSelection = function() {
// true if there are any selected deletable nodes or links,
// or if there are any selected items within nodes
return go.CommandHandler.prototype.canDeleteSelection.call(myDiagram.commandHandler) ||
findAllSelectedItems().length > 0;
};

myDiagram.commandHandler.deleteSelection = function() {
var items = findAllSelectedItems();
if (items.length > 0) { // if there are any selected items, delete them
myDiagram.startTransaction("delete items");
for (var i = 0; i < items.length; i++) {
var panel = items[i];
var nodedata = panel.part.data;
var itemarray = nodedata.fields;
var itemdata = panel.data;
var itemindex = itemarray.indexOf(itemdata);
myDiagram.model.removeArrayItem(itemarray, itemindex);
}
myDiagram.commitTransaction("delete items");
} else { // otherwise just delete nodes and/or links, as usual
go.CommandHandler.prototype.deleteSelection.call(myDiagram.commandHandler);
}
}; //end of commandHandler

load();

}

function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</script>

<textarea id="mySavedModel" style="width:100%;height:300px"> { "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":1, "text":"Main 1", "isGroup":true, "category":"OfGroups"}, {"key":2, "text":"Main 2", "isGroup":true, "category":"OfGroups"}, {"key":3, "text":"Group A", "isGroup":true, "category":"OfNodes", "group":1}, {"key":4, "text":"Group B", "isGroup":true, "category":"OfNodes", "group":1}, {"key":5, "text":"Group C", "isGroup":true, "category":"OfNodes", "group":2}, {"key":6, "text":"Group D", "isGroup":true, "category":"OfNodes", "group":2}, {"key":7, "text":"Group E", "isGroup":true, "category":"OfNodes", "group":6}, {"text":"first A", "group":3, "key":-7 }, {"text":"second A", "group":3, "key":-8}, {"text":"first B", "group":4, "key":-9}, {"text":"second B", "group":4, "key":-10}, {"text":"third B", "group":4, "key":-11}, {"text":"first C", "group":5, "key":-12}, {"text":"second C", "group":5, "key":-13}, {"text":"first D", "group":6, "key":-14}, {"text":"first E", "group":7, "key":-15}, {"key":"01", "color":"blue", "text":"Set", "fields":[ {"name":"field1"},{"name":"field2"},{"name":"field3"} ], "loc":"16.44921875 12.66328125"} ], "linkDataArray": [ ]} </textarea>

about background

how to clear background's text

how to update the nodedata on color change

I am using the hymlinteraction file to change the color of each node . I am able to change the color but can you please tell how can i update the nodejson so that i can save the json to db.

holdDelay

If I time the holdDelay in the Minimal Sample, like so:

    myDiagram.toolManager.doMouseDown=function(){
        start = new Date().getTime();
        go.Tool.prototype.doMouseDown.call(myDiagram.toolManager)
    }

    myDiagram.toolManager.dragSelectingTool.doActivate=function(){
        console.log('Execution time: ' + (new Date().getTime() - start)); 
        go.DragSelectingTool.prototype.doActivate.call(myDiagram.toolManager.dragSelectingTool)
    }

then the dragSelectingTool starts very much earlier then the value of holdDelay, down to a 180ms.

And if I try it on a shape with:

    mouseHold:function(e,p){
        console.log('Execution time: ' + (new Date().getTime() - start)); 
    }

then the result varies mostly between about 200ms and 800ms, but sometimes it's 50ms and at other times it does not fire at all.

Furthermore, the value of the actual holdDelay does not have an effect on the results.

Please advice.

angular2 minimal project

Have just followed instructions on angular2 minimal project and am getting the following error.

Flowchart: how to change category of nodeDataArray on double click item?

Hello!

How do I change the type of card (item or geometric shapes) diagram without purging, is there any way to do this?

Grateful!

Bug in HTML

Code example is too small and is on the right side.
Chrome v. 63.0.3239.84 Win10.

Also Github link isn't work.

https://gojs.net/latest/samples/twodiagrams.html

Single Parent Scenario

No provision to add a single parent - child relation.
So far i have been able to add this, but when i add such relation where mother and father are same for child(no biological mother) are same i am not able to get a proper hierarchy, the node slides left to the father on same level.

 function setupParents(diagram) {
      var model = diagram.model;
      var nodeDataArray = model.nodeDataArray;
      for (var i = 0; i < nodeDataArray.length; i++) {
        var data = nodeDataArray[i];
        var key = data.key;
        var mother = data.m;
        var father = data.f;
        if (mother !== undefined && father !== undefined) {
          var link = findMarriage(diagram, mother, father);
          if (link === null && mother != father) {
            // or warn no known mother or no known father or no known marriage between them
            if (window.console) window.console.log("unknown marriage: " + mother + " & " + father);
            continue;
          }
if (mother == father)
{
  var cdata = { from: father, to: key };
}
else
{
          var mdata = link.data;
          var mlabkey = mdata.labelKeys[0];
          var cdata = { from: mlabkey, to: key };
}
          myDiagram.model.addLinkData(cdata);
        }
      }
    }

can you please help with this

When loading images too much

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
at Xl.bk (http://localhost:60074/_theme/go/go.js:106:2083)
at Xl.f.bf (http://localhost:60074/_theme/go/go.js:80:257)
at z.f.bk (http://localhost:60074/_theme/go/go.js:88:1354)
at z.f.bf (http://localhost:60074/_theme/go/go.js:80:257)
at S.f.bk (http://localhost:60074/_theme/go/go.js:88:1354)
at S.f.bf (http://localhost:60074/_theme/go/go.js:80:257)
at De.f.bf (http://localhost:60074/_theme/go/go.js:55:4954)
at c (http://localhost:60074/_theme/go/go.js:61:1872)
at C.bf (http://localhost:60074/_theme/go/go.js:61:1920)
at Jg (http://localhost:60074/_theme/go/go.js:60:4292)

API Documentation default values.

Most of API documentation lack of default values of class properties. An example; what is the default value of GridLayout.arrangement property if not specified ? Otherwise it's hard to understand why and how it behaves.

As a suggestion you may include an additional column in properties table to put default value.

samples/customContextMenu.html Eventlisteners

samples/customContextMenu.html

The blur listener can not work. Currently, the context menu is stopped internally by GoJS' commandHandler / background click handler.
If you want the contextMenuTool to stop by an element outside the canvas gaining focus, the menu should gain focus in the first place, before it can fire blur.

A possible scenario:

1. allow for the menu div to gain focus by setting tabindex="1" and set focus in the contextmenu eventhandler.
2. prevent the links inside from taking over focus - use onclick on de li-elements, like so: <li id="cut" onclick="cxcommand(this.textContent);">Cut</li> - otherwise, the menu blur will stop the tool before any click can be handled.
3. adjust the stylesheet accordingly
4. put the eventlisteners after the cxTool declaration and change to:

cxElement.addEventListener("contextmenu", function(e) { this.focus(); e.preventDefault(); return false; }, false );
cxElement.addEventListener("blur", function(e) { cxTool.stopTool() }, false);

Regars, Martien van Lent

toIncrementalJson results in "Too much Recursion" for certain types of objects

Anyway around this? It seems the codebase doesn't use JSON.stringify to handle the JSON creation, because I created a custom "toJSON" method to prevent recursion, but the output for toIncrementalJSON (it uses the full output) differs from the one in JSON.stringify.

http://stackoverflow.com/a/3895474

latest release 1.7.11 - release directory d.ts files not properly installing

OS: Windows 7 SP1
Node: 7.10.0
GoJS: 1.7.11 (latest)

The latest release looks like it includes a Typescript definition file for the go-debug.js library. Thank you!

Strangely, however, the file does not actually installed when using the npm install command on the latest package. I verified that this file exists on your repo. Then I checked to see the results of the npm install, and noted that the go-debug.d.ts file is not actually installed in the node_modules/gojs/release directory. See attached screen shot as well.

You can confirm this behavior by doing an npm install as well.

Cannot allways drag parts out of group

In my apllication, when dragging a part out of a group, the group resizes after dropping. This happens because of the settings draggingTool.isGridSnapRealtime=false and isGridSnapEnabled=true.

For now, this works for me: isGridSnapEnabled=false and with custom snap-function in DraggingTool.prototype.doDeactivate and ExternalObjectsDropped:

function snapPartToGrid(part){
if(!(part instanceof go.Link)){
var csz=part.diagram.grid.gridCellSize,
grd=part.location.snapToGrid(0,0,csz.width,csz.height);
part.move(part.findObject(part.locationObjectName).actualBounds.copy().setSpot(grd.x,grd.y,part.locationSpot).position)
}
}

Applying a circular layout to a diagram, then drawing a link between nodes, triggers a redraw of the circle

Find an example here.

Steps to Reproduce:

• Draw a few nodes on the example.
• Draw a link between two nodes.
• Nodes are reorganized based on the newly created/selected link.

The desired result should probably be that drawing links between nodes shouldn't affect the layout of nodes.

Diagram context menu not opening on long-press in Edge (Microsoft Surface 4 Pro)

Hello,

I opened the goJS basic sample page in Edge browser on a Microsoft Surface 4 Pro.
According to the description, holding the finger stationary should bring up a context menu. However, this is not happening. I can see the square which is usually displayed when a long-press is performed, but no context menu is displayed. Doing the same in Chrome on the Surface 4 works just fine.

Any idea or more information which I could provide?

Best regards,
Dominic

Update to Support TypeScript Module Resolution

In the release folder, you have a gojs.d.ts file for TypeScript support.

The latest releases of TypeScript support automatically loading the .d.ts file, if the file is in the root of the package, or if the package.json file includes the "typings" key that points to the .d.ts file.

Could you please update the package to support automatic module resolution in TypeScript?

Microsoft Edge : Palette items disappear when dragging them to the diagram using touch controls

When I drag an item (touch gesture) in Microsoft Edge on the Microsoft Surface Tablet from a palette to the modellig area, the item disappers as soon as the modelling area is entered.
Reproduced with this diagram: https://gojs.net/latest/samples/flowchart.html

Seems to work correctly on Google Chrome.

"use strict" compatibility

Hi,
is it possible to use "use strict" with GoJS library?

Thanks! :)

Rendering inconsistencies

I'm experiencing a few rendering issues when using an extended "flowchart" example you have here. I am using version 1.6.16.

Image 1:

Image 2:

Issue #1: Diamond

The Diamond symbol has several ports connected, and the links pictured (in image 1) are going from different ports to different nodes. So it correctly differentiates them and draws individual links. However occasionally the links are rendered on the same line which makes differentiation difficult. The nodes are anchored (and cannot be moved) but if you try to move the node you can recreate this issue.

I'll try to add all the relevant details but I'm still learning, as I'm evaluating this for commericial use:

this.diagram = go.GraphObject.make(go.Diagram, this.foo.fooCanvas,
            {
                allowMove: false,
                initialAutoScale: go.Diagram.Uniform,
                initialContentAlignment: go.Spot.Center,
                layout: go.GraphObject.make(go.TreeLayout,
                    {
                        angle: 90,
                        arrangement: go.TreeLayout.ArrangementHorizontal,
                        sorting: go.TreeLayout.SortingForwards
                    }),
                "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            });

this.diagram.linkTemplate = go.GraphObject.make(go.Link,
            {
                corner: 5,
                curve: go.Link.JumpOver,
                routing: go.Link.AvoidsNodes,
                toShortLength: 4
            },
            go.GraphObject.make(go.Shape,
                {
                    stroke: "gray",
                    strokeWidth: 2
                }),
            go.GraphObject.make(go.Shape,
                {
                    fill: "gray",
                    stroke: null,
                    toArrow: "Standard"
                })
        );

Issue #2: Not avoiding nodes

I've used the routing: go.Link.AvoidsNodes so as not to draw over nodes. This works absolutely fine, apart from in the top right (image 1) this goes straight through the next node. However, once again if you try and move the top node around. It realigns itself correctly, as shown in image 2.

Afterthoughts

I'm fairly sure these are rendering issues as opposed to something I've missed out in setup/config of the graphs. Trying to realign nodes and links almost "flushes" through some of the above issues. Any thoughts?

is there a plan to support vue :)

vue is very popular now ,and i am using it to ,so can you support vue or add a example like angular?:)

Possible regression in setKeyForNodeData

When testing an upgrade from 1.4.27 to 1.5.20 I noticed a change in behaviour for go.Model.setKeyForNodeData.

Specifically, when the node has connected Links and the node key is changed, the connected link data (to/from attributes) are either updated (1.4.27) or not updated (1.5.20) accordingly.

Please see attached test to replicate.

index.html.zip