Hi,
I need help in setting up the SwimLanes Vertical Nodes like a BPMN Diagram, this is the current swimlane that I am working on
and this is the pattern that it needs to have
Please note that this has no location property and I am using the same codes being used in https://gojs.net/latest/samples/swimLanesVertical.html
How can I align the nodes a2, c1 and d1?
I will appreciate any ideas since I am just new in using SwimLanes GoJS.
Thank You.
The expectation in pools with swim lanes is that swimmers mostly stay in their lanes and swim independently from each other. That is why the SwimLanes sample has a separate layout in each lane, causing layouts to be independent of each other.
I cannot tell what expectations you have. Perhaps this will meet your needs:
https://gojs.net/latest/extensions/SwimLaneLayout.html
Or maybe one of the TableLayouts:
https://gojs.net/latest/extensions/Table.html
https://gojs.net/extras/TableGeneral.html
https://gojs.net/extras/TableCellLayout.html
But probably not. Why do you say that “b1” should be in the first row of nodes but the empty node or “c1” should be in the second row?
There is also a FlowchartLayout that we’ve been working on for a long time. For example, https://gojs.net/temp/FlowchartLanes4.html looks like this:
Other variations are at:
https://gojs.net/temp/FlowchartLanes3.html
https://gojs.net/temp/FlowchartLanes2.html
All of these depend on an as-yet-unreleased layout defined in:
https://gojs.net/temp/FlowchartLayout.js
Hi Walter,
Thank You for replying :)
Closest in achieving it is by using locations but it is currently hard to achieve, is there a property from layouts or nodes that can help me auto calculate the locations?
Why do you say that “b1” should be in the first row of nodes but the empty node or “c1” should be in the second row?
Answer: Since its connection is b1 to a2, It needs to be aligned to a1
For the Flowchartlayout, can it be customized to look like SwimLanes?
Thank You for your answer I appreciate it!
Layouts require calculations. I don’t know what you mean by “property”.
Yes, you can change appearances by customizing the code in commitLanes.
Hi Walter,
Property like angle, text, pickable. Is there something I can use to calculate the locations?
Noted on commitLanes :)
I am having problems using the FlowchartLayout library its stating that go cannot be found, but I am using it too, I tried adding import to the library but its unsuccessful, how can I add the go js library directly to the FlowchartLayout.js? Does this have a minified version? Apologies if I have many questions
and is this compatible with any versions of go library?
Thank You!!
If you use FlowchartLayout, you have the complete code there and can see and adapt how it does its positioning of nodes and routing of links.
You can adapt it to use whatever module system you are using. And you can minify it as part of your build process, if desired.
Hi Walter,
Okay then thanks for all the details :)
For the FlowchartLayout.js, do you have an alternative js that has a definition? so that I can use FlowchartLayout as a global variable?
And in using this js do we need a license? (We just have to make sure since this is part of a project)
We currently have an on going license for Go 2.0
Thank You.
Use of all of our samples and example code is covered by the license agreement.
The file I gave you does define a “global” symbol. It, like all of the other extensions in the extensions directory, can be loaded with a <script> tag assuming the GoJS library has already been loaded.
If you want to change the code to define a UMD module, you can. There are lots of examples in the extensionsTS directory. Or search the web for descriptions of how to do it.
If you want to change the code to define an ES6 module, you can. There are lots of examples in the extensionsJSM directory.
Hi Walter,
The problem is we are not allowed to define it inside a tag, we are using a factory type definitions on all the external library, in there it reads the gojs library however when its the FlowchartLayout.js it is loaded but I cannot access the FlowchartLayout()
So I need to convert the library to UMD and ES6 module?
Thank you!
Just that one file, to whatever kind of module system that you are using.
Hi Walter,
I’ve converted it to UMD but it still can’t see the definition for it when I add it to my factory, Apologies walter I don’t have any experience regarding the modules
This is the factory that I’m using its SAPUI5:
This is the converted js:
(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('b'));
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['b'], function (b) {
return (root.returnExportsGlobal = factory(b));
});
} else {
// Global Variables
root.returnExportsGlobal = factory(root.b);
}
}(this, function (b) {
'use strict';
function FlowchartLayout() {
go.Layout.call(this);
this._angle = 90;
this._nodeSpacing = 40; // between nodes in same layer
this._layerSpacing = 40; // between nodes in different layers
this._laneProperty = "lane"; // name of data property that identifies lane as a unique number or a string
this._laneComparer = null; // function for sorting FlowchartLanes
this._reset();
}
go.Diagram.inherit(FlowchartLayout, go.Layout);
/*The rest of the code of FlowchartLayout*/
return FlowchartLayout;
}));
Hope you can still extend help.
Thank You!
What is “b”?
Hi Walter,
I just want you to know that it is fine now :) I’ve fixed it by using window.FlowchartLayout = FlowchartLayout.
However the lanes are not showing up, is the commitLanes not kicking in?
Thank You always for your help :)
As demonstrated in that sample, there is a custom FlowchartLayout that implements the “drawing” of both (vertical) lanes and (horizontal) bands by overriding the commitLanes and commitLayers methods, respectively. So you need to see if you have something like that code in your app.
Hi Walter,
Thank You for all your replies it is taking into shape :)
Hopefully my last question to you how can I add a title row before the swimlane headers?
Like the J45 title here? I tried adding a go.Part on the this.diagram on the commitLanes but it does not render there.
Thank You so much :)
If you had specified that before, I could have included it in my sample.
I suggest that you modify commitLanes to add an extra Part at the desired position and of the desiredSize.
Hi Walter,
I didn’t thought that it will be that hard :( okay noted on that
This is where I’ve positioned it on the code, will make changes on it later
and for this one, I have another question apologies if I keep on asking, I need to have a border at the top of the table headers however only left and right are covered by the strokes
here is what I have added
Apologies walter for all the questions. Hoping you can help me on this part too :(
Thank You so much!
Your “test” Part has neither a position nor a desiredSize (or width and height) computed and set on it.
Actually, adding the code to the override of commitLayers is pretty easy. Something like:
if (!lay.title) {
lay.title =
$(go.Part, "Auto",
{ height: 50, position: new go.Point(0, -50) },
$(go.Shape, { fill: "yellow" }),
$(go.TextBlock, "Some Header")
);
this.diagram.add(lay.title);
}
lay.title.width = layerRects[0].width;
Hmmm, I’m not sure about what you should do when there are no layers at all.
Note that with all of those background Parts, they are being added programmatically to the Diagram, so they are not data-bound, which means there’s no point in having Bindings in there.
Hi Walter,
That is solved already thanks to your help again! :D
Apologies but I have another one that is related to the FlowchartLayout library, it’s when I try to go to another window then go back to generate some FlowchartLayout it will have this error
It comes from go.js when its inheriting the Flowchartlayout
In FlowchartLayout.js the errors comes from here this.makeNetwork
Hope you can help me this time too since I don’t know what is the problem when I’m navigating to other window then go back to the window in generating the FlowchartLayout again :(
Thank You!
