Quantcast
Channel: GoJS - Northwoods Software
Viewing all 6943 articles
Browse latest View live
↧

Edit itemDataArray before links drawing

July 6, 2017, 12:58 pm
$
0
0

@llopht wrote:

I want to add new links data properties (with computed value) in a linkDataArray before it was draw by the diagram. Is the only solution is to add a listener on the modelChangedListener and to modify each links after the end of the transaction ? Something like that (not tested) :

myDiagram.model = () => {
  return this.go(go.GraphLinksModel, {
     linkDataArray: [ { from: '1', to: '2' } ]
     ...
  });
}

myDiagram.addModelChangedListener((e) => {
    if (e.model instanceof go.GraphLinksModel &&  e.isTransactionFinished) {
        e.model.linkDataArray.forEach((link) => {
            e.model.setDataProperty(link, 'stroke', '#FF0000');
        });
    }
});

myDiagram.linkTemplate = () => {
  return this.go(go.Link, {
      /* remove to simplify */
    },
    this.go(go.Shape, {
      /* remove to simplify */
    }),
    new go.Binding('stroke', 'stroke'),
  );
}

Is this correct ?

Posts: 4

Participants: 2

Read full topic

↧
Search

Binding to parent value

July 6, 2017, 4:17 pm
$
0
0

@llopht wrote:

My model is like :

const nodeDataArray = [
  {
    key: 'node1',
    ports: [
      in: [
        { portId: 'i1', text: 'input 1' },
        { portId: 'i2', text: 'input 2' },
      ],
      out: []
  }
]

I use multiple itemArray (ports.in, ports.out, etc.) to create ports with a basic itemTemplate.

In this itemTemplate a binding refer to the json node corresponding to the current item.

But how to create a binding to get a property from his node parent like the key (or a default value for each ports).

Posts: 1

Participants: 1

Read full topic

↧
↧

Remove watermark

July 6, 2017, 11:45 pm
$
0
0

@SmilyArora wrote:

Hey,
I want to remove the watermark from my diagrams. I have got the license key.
Kindly help with this.

Posts: 4

Participants: 2

Read full topic

↧

Node inheritance

July 7, 2017, 4:17 am
$
0
0

@llopht wrote:

Do you have an example of node inheritance ? I dont find any example in your extensions or samples.

Posts: 4

Participants: 3

Read full topic

↧

Panel - Vertical - Stretch Fill

July 7, 2017, 6:11 am
$
0
0

@BFENico wrote:

          $(go.Node, 'Auto',
            { width: 200, height: 200 },
            $(go.Shape, "RoundedRectangle", {
              fill: 'blue',
              stretch : go.GraphObject.Fill,
            }),
            $(go.Panel, 'Vertical',
              { stretch: go.GraphObject.Fill },
              $(go.TextBlock, 'Hallo', { background: 'white', textAlign: 'center' }),
              $(go.Shape, 'RoundedRectangle', { stretch: go.GraphObject.Fill, fill: 'yellow' })
            )
          );

Hello, why is the yellow Shape not stretch "fill"?

Thank you for help.

Posts: 2

Participants: 2

Read full topic

↧
↧

The mysterious vanishing property lol

July 7, 2017, 7:05 am
$
0
0

@incursus wrote:

Any ideas why the first debug statement would say "null" for the toNode property, yet I can see it populated in the second debug statement?

myDiagram.linkTemplate.fromPortChanged = function(thisLink, oldNode, newNode)
 {
      console.log(thisLink.toNode);
      console.log(thisLink);
 }

Posts: 17

Participants: 2

Read full topic

↧

Geometry path string syntax does not support SVG abbreviated syntax

July 7, 2017, 8:46 am
$
0
0

@llopht wrote:

Walter I share in this post a little issue with a simple SVG :

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="33" viewBox="0 0 25 33"><path fill="gray" d="M16.3 7.33c-.2-.26-.35-.5-.46-.72.56-.66.9-1.53.9-2.5 0-2.25-1.87-4.1-4.18-4.1-2.3 0-4.16 1.86-4.16 4.1 0 .9.3 1.77.82 2.45-.1.24-.26.5-.48.8H2.9C1.3 7.35 0 8.6 0 10.18v6.24c0 1.54.9.8.9.8.67-.44 1.48-.7 2.34-.7 2.33 0 4.22 1.86 4.22 4.15s-1.9 4.14-4.22 4.14c-.98 0-1.87-.3-2.6-.85-.35-.28-.64 0-.64.78v5.44C0 31.72 1.3 33 2.9 33h19.2c1.6 0 2.9-1.28 2.9-2.86V10.18c0-1.57-1.3-2.85-2.9-2.85h-5.8z"/></svg>

GoJS return an error :

Error: PathSegment.endX must be a real number type, and not NaN or Infinity: NaN

I have double check the SVG with illustrator and another soft, I dont see any error.

Do you have an idea ?

Posts: 5

Participants: 2

Read full topic

↧

Why is findNodesInto undefined in binding?

July 7, 2017, 9:03 am
$
0
0

@marin wrote:

I want to write the number of links a node is connected to.
I've tried to do this to begin with:

$(go.Node, 'Spot',
        $(go.Shape, shapes.node, nodeShapeSettings(fillColor)),
        $(go.TextBlock, {editable: false, margin: 8, visible: true, alignment: go.Spot.Left},
            new go.Binding('text', '', function (data, node) {

                    console.log(node.findLinksInto)
                return 0;
            })),
        getPort(portTypes.input),
        getPort(portTypes.output),
        $(go.TextBlock, {editable: false, margin: 8, visible: false},
            new go.Binding('text', 'value')),
        supportedEvents()

but the console prints undefined... I'm curious as to why?

Posts: 7

Participants: 2

Read full topic

↧
Search

Find links between groups?

July 7, 2017, 9:25 am
$
0
0

@tiepna wrote:

Hi,
I'm trying to implement link of my diagram following:

1.No more than one link between 2 groups can be displayed when one of them is collapsed
2.A link is displayed between 2 groups if there is at least one link between two tables located in those groups
3.If two groups are expanded then links between tables should be displayed. (See next slide)

AND I am using this API group.findLinksConnected() to get link of Group. But result allways return count=0.

Please refer to this jsfiddle https://jsfiddle.net/tiepna/aL08ms24/4/
And click expand button of AdministeredItem group.( see in Handle Expand/Collapse Events)

var groupTempl = $(go.Group, "Auto",
{
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isSubGraphExpanded:false
},
new go.Binding("location", "", toLocation).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle", { fill: "white", stroke: "#4472C4", strokeWidth: 2 }),
$(go.Panel, go.Panel.Vertical, // title above Placeholder
$(go.Panel, go.Panel.Horizontal, // button next to
// TextBlock
{ stretch: go.GraphObject.Horizontal, margin: 1 },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5, click: function(e, button) {
var group = button.part;
if (group instanceof go.Adornment) group = group.adornedPart;
if (!(group instanceof go.Group)) return;
var diagram = group.diagram;
if (diagram === null) return;
var cmd = diagram.commandHandler;
if (group.isSubGraphExpanded) {
if (!cmd.canCollapseSubGraph(group)) return;
} else {
if (!cmd.canExpandSubGraph(group)) return;
}
e.handled = true;

		            	    var linksToGroupOnly = group.findLinksConnected();
		            	    var externalLinksConnected = group.findExternalLinksConnected();
		            	    var externalNodesConnected = group.findExternalNodesConnected();

		            	    diagram.startTransaction("expand-collapse");
		            	    if (group.isSubGraphExpanded) {

		            	      cmd.collapseSubGraph(group);
                                          // show link between group and hide links inside group.
		          	    	  showGroupLinkGroup(externalLinksConnected,linksToGroupOnly);

		            	    } else {
		            	      cmd.expandSubGraph(group);
		            	      //hide Groups link, show links inside group
		            	      hideGroupLinkGroup(group,externalNodesConnected,externalLinksConnected,linksToGroupOnly)
		            	    }
		            	    diagram.commitTransaction("expand-collapse");
		            	  }
		              }),
		            $(go.TextBlock,
		              {
		                alignment: go.Spot.Left,
		                margin: 5,
		                font: "bold 18px 'Open Sans'",
		                stroke: "#4472C4"
		              },
		              new go.Binding("text", "label"))
		          ),  // end Horizontal Panel



			       	$(go.Panel, go.Panel.Position,
				  	          $(go.Placeholder,{padding:5})
				       	)
		        )
);

Posts: 1

Participants: 1

Read full topic

↧
↧

BPMN editor -> Palette parts as Tree

July 7, 2017, 1:35 pm
$
0
0

@mohanr.k wrote:

I have below requirement to implement for my custom data in BPMN Editor
1) Like Parts in "Level 1 items", "Level 2 items", "Level 3 items", I need to have one more Palette having custom data in Tree format
2) All the parts of this Palette will be Data Objects
3) On top of this Tree I need to implement AutoComplete search field to search the data in tree and scroll automatically to selected node

Want to know if this is possible to implement with gojs.

Posts: 2

Participants: 2

Read full topic

↧

Auto link node dragged from palette to node on canvas

July 7, 2017, 2:11 pm
$
0
0

@RAlfonso wrote:

Howdy,

One of my coworkers already asked a similar question and it was answered here:

We've implemented this and it works very well! However, we'd like to have the same functionality when dragging a new node from the palette to the canvas. I've attempted to set the draggingTool for the palette to the very same draggingTool referenced in the linked answer. However, that doesn't seem to be doing the trick. Is there any way to have the same behavior with an object dragged from the palette? (Showing the blue temp link when you are near a linkable node and auto linking on a drop?)

Thanks again!

Posts: 3

Participants: 2

Read full topic

↧

BPMN Editor positioning drag and dropped custom node

July 7, 2017, 8:35 pm
$
0
0

@mohanr.k wrote:

I have custom data as tree in one of the palettes of BPMN Editor and I used code from http://gojs.net/latest/samples/htmldragdrop.html sample to position the drag and dropped node to diagram.

My issue is all drag and dropped nodes are going to start position of the diagram that is left top. Below is the code used

var div = document.getElementById(this.BPMNDiagramId);
let _this:any=this;
div.addEventListener("dragover", function(event:any) {
if (this === _this.BPMNDiagram.div) {
var can = event.target;
var pixelratio = window.PIXELRATIO;

			// if the target is not the canvas, we may have trouble, so just quit:
			if (!(can instanceof HTMLCanvasElement)) return;

			var bbox = can.getBoundingClientRect();
			var bbw = bbox.width;
			if (bbw === 0) bbw = 0.001;
			var bbh = bbox.height;
			if (bbh === 0) bbh = 0.001;
			var mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
			var my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
			var point = _this.BPMNDiagram.transformViewToDoc(new go.Point(mx, my));
			var curnode = _thisBPMNDiagram.findPartAt(point, true);
			/*if (curnode instanceof go.Node) {
				highlight(curnode);
			} else {
				highlight(null);
			}*/
		}

		if (event.target.className === "dropzone") {
			// Disallow a drop by returning before a call to preventDefault:
			return;
		}

		// Allow a drop on everything else
		event.preventDefault();
	},false);
	div.addEventListener("drop", function(event:any) {
        event.preventDefault();
		// Dragging onto a Diagram
		console.log("Dragged")

		if (this === _this.BPMNDiagram.div) {
			var can = event.target;
			console.log(can)
			var pixelratio = window.PIXELRATIO;

			// if the target is not the canvas, we may have trouble, so just quit:
			if (!(can instanceof HTMLCanvasElement)) return;

			var bbox = can.getBoundingClientRect();
			var bbw = bbox.width;
			if (bbw === 0) bbw = 0.001;
			var bbh = bbox.height;
			if (bbh === 0) bbh = 0.001;
			var mx = event.clientX - bbox.left * ((can.width/pixelratio) / bbw);
			var my = event.clientY - bbox.top * ((can.height/pixelratio) / bbh);
			var point = _this.BPMNDiagram.transformViewToDoc(new go.Point(mx, my));
			console.log(point)
			_this.BPMNDiagram.startTransaction('new node');
			_thisBPMNDiagram.model.addNodeData({
				location: point,
				category:"dataobject",
				text:_this.draggedNode.displayName
			});
			_this.BPMNDiagram.commitTransaction('new node');
		}
	}, false);

Posts: 4

Participants: 2

Read full topic

↧

I need show in textbox link from and to property

July 9, 2017, 10:29 am
$
0
0

@samanelf wrote:

hi
i use flowchart of gojs and i want when i click on link get from and to node and show in textbox?
i tried some way but i cant find anythings
anyone can help me i really need that

Posts: 2

Participants: 2

Read full topic

↧
↧

Questions about the group

July 9, 2017, 8:24 pm
↧

Smooth Path Animation

July 9, 2017, 8:39 pm
$
0
0

@Rajeshpatil74 wrote:

With the Path animation sample, with new version it is possible to have animation on curved or multi segment lines.

But the path animation is not smooth. For eq. when the nodes are close to each other , the line length is small and have smooth animation but increasing the distance between nodes (having larger line length) animation of token become fast.

How one can have smooth animation across all links independent of their line length ??

Posts: 1

Participants: 1

Read full topic

↧
Search

How to keep new location when group moved?

July 9, 2017, 8:50 pm
↧

Bug: When dragging a group node, the links inside the dragged group will separate from the nodes

July 10, 2017, 12:20 am
$
0
0

@weng wrote:

When there is three level nodes, I drag the second level node, the links within the dragged group node will be separated from the node.

Here is the demo data:
var nodeDataArray = [
{ key: "node1", text: "node1", isGroup: true },
{ key: "node1-1", text: "node1-1", isGroup:true, group: "node1" },
{ key: "node1-1-1", text: "node1-1-1", group: "node1-1" },
{ key: "node1-1-2", text: "node1-1-2", group: "node1-1" },
{ key: "node1-1-3", text: "node1-1-3", group: "node1-1" },
{ key: "node1-2", text: "node1-2", group: "node1" },
{ key: "node2", text: "node2", isGroup: true }
];
var linkDataArray = [
{ from: "node1-1-1", to: "node2", text: "1" },
{ from: "node1-1-2", to: "node2",text: "1"},
{ from: "node1-1-3", to: "node2",text: "1"},
{ from: "node1-1-1", to: "node1-1-3",text: "1"},
{ from: "node1-1-2", to: "node1-1-3",text: "1"}
];

For the demo, when I drag "node1-1", the two links within it ( 'from: "node1-1-1", to: "node1-1-3"' and 'from: "node1-1-1", to: "node1-1-3"') will be separated.
And when the layout type is go.TreeLayout, this problem showed everytime I drag the second level node; when the layout type is ForceDirectedLayout, this problem showed when I drag the second level node fastly.

Environment: gojs v1.7.15, windows7, chrome

Posts: 1

Participants: 1

Read full topic

↧
↧

ChangedListener evet object diagram always null

July 10, 2017, 12:22 am
$
0
0

@BATU wrote:

I add some function to addModelChangedListener, but I always got event.diagram is null.

function somefunction (event) {
var diag = event.diagram;
}
diagram.addModelChangedListener(somefunction);

why it is always null, or something work around ?

Posts: 1

Participants: 1

Read full topic

↧

Show/Hide Contents inside Node based on Zoom Level

July 10, 2017, 3:56 am
$
0
0

@rdheepan wrote:

Hello, I want to show/hide contents inside node based on the zoom level. For example in an organization chart, I want to show only the Name of the employee when the zoom level is small. As the user zoom, i need to show some more contents like, title, email, phone number etc..

Is it possible to achieve this effect with GoJs?

Posts: 2

Participants: 2

Read full topic

↧

Installing a multi site license

July 10, 2017, 5:02 am
$
0
0

@idekkers wrote:

Hey

I've done 2 of the steps that are required in your email,
the one I have an issue with is the one with the go.js file:
I'm using gojs from npm not from a file, how do I handle this?

thanks

Posts: 2

Participants: 2

Read full topic

↧
Viewing all 6943 articles
Browse latest View live
Search