northwoodssoftware / gojs Goto Github PK
View Code? Open in Web Editor NEWJavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Home Page: http://gojs.net
License: Other
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Home Page: http://gojs.net
License: Other
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>
vue is very popular now ,and i am using it to ,so can you support vue or add a example like angular?:)
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:
<li id="cut" onclick="cxcommand(this.textContent);">Cut</li>
- otherwise, the menu blur will stop the tool before any click can be handled.cxElement.addEventListener("contextmenu", function(e) { this.focus(); e.preventDefault(); return false; }, false );
cxElement.addEventListener("blur", function(e) { cxTool.stopTool() }, false);
Regars, Martien van Lent
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)
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
I'm experiencing a few rendering issues when using an extended "flowchart" example you have here. I am using version 1.6.16
.
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"
})
);
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.
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?
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.
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.
Can this be used in react? If so, is there a guide? Thanks in advanced
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.
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.
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.
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
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 : MappingHi,
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?
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
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.
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)
Hello!
How do I change the type of card (item or geometric shapes) diagram without purging, is there any way to do this?
Grateful!
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
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 :
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
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.
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?
Can not view whole word in TextBlock.
Demo URL: http://gojs.net/latest/samples/selectableFields.html
A permanent call will cause a browser crash(jsheap rise)
Hi,
is it possible to use "use strict" with GoJS library?
Thanks! :)
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)
}
}
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/):
File .angular-cli.json
is missing from the Angular-basic
and project fails to run with:
Cannot read property 'config' of null
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.
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.
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;
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.
这个GOJS是否收费?
Find an example here.
Steps to Reproduce:
The desired result should probably be that drawing links between nodes shouldn't affect the layout of nodes.
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"
});
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?
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.
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
"
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?
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
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.
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.
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!
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.
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.
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.
Code example is too small and is on the right side.
Chrome v. 63.0.3239.84 Win10.
Also Github link isn't work.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.