Customize Node size

[acrisci]

Some of the names of my nodes are kind of long and they don't fit in the boxes properly. They overflow the edges which doesn't look good.

Node size is currently hardcoded in shared/shapes.ts as IMAGE_H and IMAGE_W. I would like to configure this to be something slightly larger to accommodate my longest name.

In the future, I would like to make the nodes size themselves dynamically based on the width of the label.

[BoykoAlex]

@acrisci this is just the starting size... you can set it on shape with jointjs by calling #set('size', {width=200, height=80}) on a jointjs model object.
There is also a function that we have in the client app that fits the label inside the node and adds ellipsis at the end to truncate the label if necessary. We may consider moving it in here, in spring-flo

[acrisci]

Thanks.

I just tried this approach but it only resizes the outermost element (the joint-viewport). Am I doing this correctly?

diff --git a/src/demo/app/renderer.ts b/src/demo/app/renderer.ts
index 0d38c3d..66cc6e4 100644
--- a/src/demo/app/renderer.ts
+++ b/src/demo/app/renderer.ts
@@ -58,7 +58,9 @@ export class Renderer implements Flo.Renderer {
     }

     createNode(metadata : Flo.ElementMetadata, props : Map<string, any>): dia.Element {
-      return new joint.shapes.flo.Node();
+      let node = new joint.shapes.flo.Node();
+      node.set('size', {width:300, height:80});
+      return node;
     }

     initializeNewNode(node : dia.Element, viewerDescriptor : Flo.ViewerDescriptor) {

[BoykoAlex]

@acrisci you're probably right (i haven't tried it yet, I'll try it out a bit later), I see that example shape consists of a number of SVG elements where offsets are are all in terms of fixed size. However, you can create your own shape using JointJS and set all those offsets for ports labels etc relative to parent shape dimensions. See this: https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes.ref
You can try devs.Model shapes but i haven't supported them for links/ports, hence they may not work well, but at the same time they might be a good source for examples.

[acrisci]

Ok, that's definitely an option. Do you see any path to framework support for this feature?

[BoykoAlex]

Support devs.Model shapes? Think they are supported up to ports... Think for ports imay not use jointjs conventional port attribute values, but otherwise it should be ok. As far as I remember it's important to have port attribute in Flo to equal either 'input' or 'output'... for now at least... otherwise you should be ok building any jointjs shape you like... I haven't explored the limitations though.
I belive it can all be adopted in Flo at some point of time... some trivial refactoring will be involved i think.

[acrisci]

Do you think it would be possible to move the default width/height for new node creation to the Flo global? Then I can change it as soon as my app starts so all the new nodes have those dimensions.

Another option might be to add the width/height as a parameter to the constructor.

I'm also going to modify the label. It might be good to add something like this to the demo:

diff --git a/src/demo/app/renderer.ts b/src/demo/app/renderer.ts
index 0d38c3d..dea484b 100644
--- a/src/demo/app/renderer.ts
+++ b/src/demo/app/renderer.ts
@@ -64,7 +64,9 @@ export class Renderer implements Flo.Renderer {
     initializeNewNode(node : dia.Element, viewerDescriptor : Flo.ViewerDescriptor) {
       let metadata : Flo.ElementMetadata = node.attr('metadata');
       if (metadata) {
-        node.attr('.label/text', node.attr('metadata/name'));
+        let name = node.attr('metadata/name');
+        name = joint.util.breakText(name, {width:120}, node.attr('.label'));
+        node.attr('.label/text', name);
         let group = node.attr('metadata/group');
         if (group === 'source') {
           node.attr('.input-port/display','none');

[BoykoAlex]

@acrisci you mean IMAGE_W and IMAGE_H? I guess we could have... can you submit the PR for what you'd like to have?