cx-diagrams 22.3.2 → 22.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx-diagrams",
-  "version": "22.3.2",
+  "version": "22.3.3",
   "description": "A library for creating diagrams within CxJS applications",
   "main": "src/index.js",
   "scripts": {

package/src/DiagramState.js

@@ -21,4 +21,8 @@ export class DiagramState {
          );
       return data;
    }
+
+   hasShape(id) {
+      return !!this.shapes[id];
+   }
 }

package/src/Flow.d.ts

@@ -37,6 +37,12 @@ export interface FlowProps extends NodeProps {
 
    /** Alignment of items. */
    align?: "start" | "center";
+
+   /** Distribute items */
+   justify?: null | "stretch";
+
+   /** Change alignment of this particular item */
+   selfAlign?: null | "stretch";
 }
 
 export class Flow extends Widget<FlowProps> {}

package/src/Flow.js

@@ -35,6 +35,8 @@ export class Flow extends Node {
       let direction = (instance.direction =
          context.rotateDirection && !data.fixed ? context.rotateDirection(this.direction) : this.direction);
 
+      let stretchItems = [];
+
       let { pl, pr, pt, pb, gap, ml, mr, mt, mb, ms, me } = data;
       if (direction == "right") {
          width += pl;
@@ -49,6 +51,7 @@ export class Flow extends Node {
             width += box.mr;
             width += box.me;
             height = Math.max(height, box.row + box.height + box.mb + pb);
+            if (box.selfAlign == "stretch") stretchItems.push(box);
          }
          width += pr;
       }
@@ -65,6 +68,7 @@ export class Flow extends Node {
             width += box.ml;
             width += box.me;
             height = Math.max(height, box.row + box.height + box.mb + pb);
+            if (box.selfAlign == "stretch") stretchItems.push(box);
          }
          width += pl;
       } else if (direction == "down") {
@@ -78,6 +82,7 @@ export class Flow extends Node {
             height += box.height;
             height += box.mb;
             width = Math.max(width, box.col + box.width + box.mr + pr);
+            if (box.selfAlign == "stretch") stretchItems.push(box);
          }
          height += pb;
       } else if (direction == "up") {
@@ -93,10 +98,17 @@ export class Flow extends Node {
             height += box.mt;
             height += box.me;
             width = Math.max(width, box.col + box.width + box.mr + pr);
+            if (box.selfAlign == "stretch") stretchItems.push(box);
          }
          height += pt;
       }
 
+      if (direction == "left" || direction == "right") {
+         for (let box of stretchItems) box.height = height - pt - pb;
+      } else if (direction == "up" || direction == "down") {
+         for (let box of stretchItems) box.width = width - pl - pr;
+      }
+
       instance.box = {
          row,
          col,
@@ -108,6 +120,7 @@ export class Flow extends Node {
          mt,
          ms,
          me,
+         selfAlign: this.selfAlign,
       };
 
       super.exploreCleanup(context, instance);
@@ -118,12 +131,39 @@ export class Flow extends Node {
       let innerWidth = box.width - data.pl - data.pr;
       let innerHeight = box.height - data.pt - data.pb;
 
+      let spacing = 0;
+
+      if (this.justify == "space-between") {
+         let contentSize = 0,
+            count = 0,
+            size = 0;
+         if (instance.direction == "left" || instance.direction == "right") {
+            for (let { box } of nodes) {
+               if (!box) continue;
+               contentSize += box.width;
+               count++;
+            }
+            size = innerWidth;
+         } else {
+            for (let { box } of nodes) {
+               if (!box) continue;
+               contentSize += box.height;
+               count++;
+            }
+            size = innerHeight;
+         }
+         spacing = (size - contentSize) / (count - 1) - data.gap;
+      }
+
+      let index = 0;
+
       for (let child of nodes) {
          if (!child.box) continue;
 
          switch (instance.direction) {
             case "right":
                child.box.col += box.col;
+               child.box.col += index * spacing;
                child.box.row += box.row;
 
                if (this.align == "center") child.box.row += (innerHeight - child.box.height) / 2;
@@ -133,12 +173,14 @@ export class Flow extends Node {
             case "down":
                child.box.col += box.col;
                child.box.row += box.row;
+               child.box.row += index * spacing;
 
                if (this.align == "center") child.box.col += (innerWidth - child.box.width) / 2;
                break;
 
             case "left":
                child.box.col += box.col + box.width;
+               child.box.col += index * spacing;
                child.box.row += box.row;
 
                if (this.align == "center") child.box.row += (innerHeight - child.box.height) / 2;
@@ -147,10 +189,13 @@ export class Flow extends Node {
             case "up":
                child.box.col += box.col;
                child.box.row += box.row + box.height;
+               child.box.row += index * spacing;
 
                if (this.align == "center") child.box.col += (innerWidth - child.box.width) / 2;
                break;
          }
+
+         index++;
       }
       super.prepare(context, instance);
    }
@@ -158,6 +203,8 @@ export class Flow extends Node {
 
 Flow.prototype.direction = "right";
 Flow.prototype.align = "start";
+Flow.prototype.selfAlign = null;
+Flow.prototype.justify = null;
 Flow.prototype.gap = 0;
 Flow.prototype.padding = 0;
 Flow.prototype.margin = 0;

package/src/Shape.d.ts

@@ -3,6 +3,7 @@ import { BoundedObjectProps } from "cx/src/svg/BoundedObject";
 import { Instance } from "cx/src/ui/Instance";
 
 export interface ShapeProps extends BoundedObjectProps {
+   id?: StringProp;
    text?: StringProp;
    shape?: "rect" | "circle";
    tooltip?: StringProp | Config;

package/src/StraightLine.js

@@ -15,6 +15,8 @@ export class StraightLine extends Container {
 
       if (!data.from || !data.to || !context.diagram) return new Rect();
 
+      if (!context.diagram.hasShape(data.from) || !context.diagram.hasShape(data.to)) return new Rect();
+
       let { bounds: sb, shape: startShape } = context.diagram.getShape(data.from);
       let { bounds: eb, shape: endShape } = context.diagram.getShape(data.to);
 

package/src/ThreeSegmentLine.js

@@ -26,6 +26,8 @@ export class ThreeSegmentLine extends Container {
 
       if (!data.from || !data.to || !context.diagram) return new Rect();
 
+      if (!context.diagram.hasShape(data.from) || !context.diagram.hasShape(data.to)) return new Rect();
+
       let { bounds: sb, shape: startShape } = context.diagram.getShape(data.from);
       let { bounds: eb, shape: endShape } = context.diagram.getShape(data.to);
 

package/src/TwoSegmentLine.js

@@ -26,6 +26,8 @@ export class TwoSegmentLine extends Container {
 
       if (!data.from || !data.to || !context.diagram) return new Rect();
 
+      if (!context.diagram.hasShape(data.from) || !context.diagram.hasShape(data.to)) return new Rect();
+
       let { bounds: sb, shape: startShape } = context.diagram.getShape(data.from);
       let { bounds: eb, shape: endShape } = context.diagram.getShape(data.to);