cx-diagrams 26.3.2 → 26.3.4

package/dist/Cell.d.ts

@@ -13,12 +13,15 @@ export interface CellConfig extends NodeConfig {
 interface CellData {
     width: number;
     height: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
-    ms?: number;
-    me?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
+    ms: number;
+    me: number;
+    grow?: boolean;
+    msAuto?: boolean;
+    meAuto?: boolean;
 }
 export interface CellInstance extends NodeInstance {
     data: CellData;

package/dist/Cell.js

@@ -31,6 +31,9 @@ export class Cell extends Node {
             mb: data.mb,
             ms: data.ms,
             me: data.me,
+            grow: data.grow,
+            msAuto: data.msAuto,
+            meAuto: data.meAuto,
         };
         super.explore(context, instance);
     }

package/dist/Flow.d.ts

@@ -38,19 +38,22 @@ interface FlowData {
     padding?: number;
     gap: number;
     p?: number;
-    pl?: number;
-    pr?: number;
-    pt?: number;
-    pb?: number;
+    pl: number;
+    pr: number;
+    pt: number;
+    pb: number;
     px?: number;
     py?: number;
     fixed?: boolean;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
-    ms?: number;
-    me?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
+    ms: number;
+    me: number;
+    grow?: boolean;
+    msAuto?: boolean;
+    meAuto?: boolean;
 }
 export interface FlowInstance extends NodeInstance {
     data: FlowData;

package/dist/Flow.js

@@ -19,10 +19,10 @@ export class Flow extends Node {
     }
     prepareData(context, instance) {
         let { data } = instance;
-        data.pl = data.pl ?? data.px ?? data.p ?? data.padding;
-        data.pr = data.pr ?? data.px ?? data.p ?? data.padding;
-        data.pt = data.pt ?? data.py ?? data.p ?? data.padding;
-        data.pb = data.pb ?? data.py ?? data.p ?? data.padding;
+        data.pl = data.pl ?? data.px ?? data.p ?? data.padding ?? 0;
+        data.pr = data.pr ?? data.px ?? data.p ?? data.padding ?? 0;
+        data.pt = data.pt ?? data.py ?? data.p ?? data.padding ?? 0;
+        data.pb = data.pb ?? data.py ?? data.p ?? data.padding ?? 0;
         super.prepareData(context, instance);
     }
     exploreCleanup(context, instance) {
@@ -133,6 +133,9 @@ export class Flow extends Node {
             ms,
             me,
             selfAlign: this.selfAlign,
+            grow: data.grow,
+            msAuto: data.msAuto,
+            meAuto: data.meAuto,
         };
         super.exploreCleanup(context, instance);
     }
@@ -142,6 +145,116 @@ export class Flow extends Node {
             return;
         let innerWidth = box.width - data.pl - data.pr;
         let innerHeight = box.height - data.pt - data.pb;
+        let horizontal = instance.direction == "left" || instance.direction == "right";
+        // Distribute free space to grow items and auto margins
+        let contentSize = 0;
+        let itemCount = 0;
+        let growCount = 0;
+        let autoMarginCount = 0;
+        for (let { box } of nodes) {
+            if (!box)
+                continue;
+            if (itemCount > 0)
+                contentSize += data.gap;
+            if (horizontal) {
+                contentSize += box.ml + box.ms + box.width + box.mr + box.me;
+            }
+            else {
+                contentSize += box.mt + box.ms + box.height + box.mb + box.me;
+            }
+            if (box.grow)
+                growCount++;
+            if (box.msAuto)
+                autoMarginCount++;
+            if (box.meAuto)
+                autoMarginCount++;
+            itemCount++;
+        }
+        let freeSpace = (horizontal ? innerWidth : innerHeight) - contentSize;
+        if (freeSpace > 0 && (growCount > 0 || autoMarginCount > 0)) {
+            let growExtra = 0;
+            let marginExtra = 0;
+            if (growCount > 0) {
+                growExtra = freeSpace / growCount;
+                freeSpace = 0;
+            }
+            if (freeSpace > 0 && autoMarginCount > 0) {
+                marginExtra = freeSpace / autoMarginCount;
+            }
+            let shift = 0;
+            for (let { box } of nodes) {
+                if (!box)
+                    continue;
+                switch (instance.direction) {
+                    case "right":
+                        box.col += shift;
+                        if (box.msAuto) {
+                            box.ms += marginExtra;
+                            box.col += marginExtra;
+                            shift += marginExtra;
+                        }
+                        if (box.grow) {
+                            box.width += growExtra;
+                            shift += growExtra;
+                        }
+                        if (box.meAuto) {
+                            box.me += marginExtra;
+                            shift += marginExtra;
+                        }
+                        break;
+                    case "left":
+                        box.col -= shift;
+                        if (box.msAuto) {
+                            box.ms += marginExtra;
+                            box.col -= marginExtra;
+                            shift += marginExtra;
+                        }
+                        if (box.grow) {
+                            box.width += growExtra;
+                            box.col -= growExtra;
+                            shift += growExtra;
+                        }
+                        if (box.meAuto) {
+                            box.me += marginExtra;
+                            shift += marginExtra;
+                        }
+                        break;
+                    case "down":
+                        box.row += shift;
+                        if (box.msAuto) {
+                            box.ms += marginExtra;
+                            box.row += marginExtra;
+                            shift += marginExtra;
+                        }
+                        if (box.grow) {
+                            box.height += growExtra;
+                            shift += growExtra;
+                        }
+                        if (box.meAuto) {
+                            box.me += marginExtra;
+                            shift += marginExtra;
+                        }
+                        break;
+                    case "up":
+                        box.row -= shift;
+                        if (box.msAuto) {
+                            box.ms += marginExtra;
+                            box.row -= marginExtra;
+                            shift += marginExtra;
+                        }
+                        if (box.grow) {
+                            box.height += growExtra;
+                            box.row -= growExtra;
+                            shift += growExtra;
+                        }
+                        if (box.meAuto) {
+                            box.me += marginExtra;
+                            shift += marginExtra;
+                        }
+                        break;
+                }
+            }
+        }
         let spacing = 0;
         if (this.justify == "space-between") {
             let contentSize = 0, count = 0, size = 0;

package/dist/FourSides.d.ts

@@ -10,12 +10,12 @@ export interface FourSidesConfig extends NodeConfig {
 interface FourSidesData {
     gap: number;
     slots: Slot[];
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
-    ms?: number;
-    me?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
+    ms: number;
+    me: number;
 }
 export interface FourSidesInstance extends NodeInstance {
     data: FourSidesData;

package/dist/Node.d.ts

@@ -1,5 +1,5 @@
 import { Rect } from "cx/svg";
-import { PureContainerConfig, Instance, RenderingContext, NumberProp, StringProp, PureContainerBase } from "cx/ui";
+import { PureContainerConfig, Instance, RenderingContext, NumberProp, StringProp, BooleanProp, PureContainerBase } from "cx/ui";
 import { DiagramState } from "./DiagramState";
 export interface NodeConfig extends PureContainerConfig {
     /** Unique identifier of the node. */
@@ -24,32 +24,44 @@ export interface NodeConfig extends PureContainerConfig {
     ms?: NumberProp;
     /** End margin (margin after the element in the direction of the flow). */
     me?: NumberProp;
+    /** If set, the element will grow to fill available space in the flow direction. */
+    grow?: BooleanProp;
+    /** If set, the start margin will be automatically calculated to fill available space. */
+    msAuto?: BooleanProp;
+    /** If set, the end margin will be automatically calculated to fill available space. */
+    meAuto?: BooleanProp;
 }
 export interface NodeData {
     id?: string;
     margin?: number;
     m?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
     mx?: number;
     my?: number;
-    ms?: number;
-    me?: number;
+    ms: number;
+    me: number;
+    grow?: boolean;
+    msAuto?: boolean;
+    meAuto?: boolean;
 }
 export interface Box {
     row: number;
     col: number;
     width: number;
     height: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
-    ms?: number;
-    me?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
+    ms: number;
+    me: number;
     selfAlign?: string;
+    grow?: boolean;
+    msAuto?: boolean;
+    meAuto?: boolean;
 }
 export interface NodeInstance extends Instance {
     data: NodeData;

package/dist/Node.js

@@ -17,14 +17,17 @@ export class Node extends PureContainerBase {
             my: undefined,
             ms: undefined,
             me: undefined,
+            grow: undefined,
+            msAuto: undefined,
+            meAuto: undefined,
         });
     }
     prepareData(context, instance) {
         let { data } = instance;
-        data.ml = data.ml ?? data.mx ?? data.m ?? data.margin;
-        data.mr = data.mr ?? data.mx ?? data.m ?? data.margin;
-        data.mt = data.mt ?? data.my ?? data.m ?? data.margin;
-        data.mb = data.mb ?? data.my ?? data.m ?? data.margin;
+        data.ml = data.ml ?? data.mx ?? data.m ?? data.margin ?? 0;
+        data.mr = data.mr ?? data.mx ?? data.m ?? data.margin ?? 0;
+        data.mt = data.mt ?? data.my ?? data.m ?? data.margin ?? 0;
+        data.mb = data.mb ?? data.my ?? data.m ?? data.margin ?? 0;
         super.prepareData(context, instance);
     }
     explore(context, instance) {

package/dist/Shape.d.ts

@@ -1,7 +1,8 @@
 /** @jsxImportSource react */
-import { RenderingContext, Instance, StringProp, NumberProp, ClassProp, StyleProp, Prop } from "cx/ui";
-import { TooltipParentInstance, TooltipConfig } from "cx/widgets";
 import { BoundedObject, BoundedObjectConfig, Rect } from "cx/svg";
+import { ClassProp, Instance, NumberProp, Prop, RenderingContext, StringProp, StructuredProp, StyleProp } from "cx/ui";
+import type { DragEvent } from "cx/widgets";
+import { TooltipConfig, TooltipParentInstance } from "cx/widgets";
 type ShapeType = "rectangle" | "circle" | "rhombus";
 export interface ShapeConfig extends BoundedObjectConfig {
     /** Unique identifier for this shape (used for line connections). */
@@ -32,6 +33,24 @@ export interface ShapeConfig extends BoundedObjectConfig {
     onDoubleClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
     /** Context menu handler. */
     onContextMenu?: string | ((e: React.MouseEvent, instance: Instance) => void);
+    /** Data about the drag source. Enables drag source when set. */
+    dragSource?: StructuredProp;
+    /** Callback when drag starts. Return false to cancel. */
+    onDragStart?: string | ((e: DragEvent, instance: Instance) => any);
+    /** Callback when drag ends. */
+    onDragEnd?: string | ((e: DragEvent, instance: Instance) => void);
+    /** Callback when dropped on this shape. Enables drop zone when set. */
+    onDrop?: string | ((e: DragEvent, instance: Instance) => any);
+    /** Test if drag source is acceptable. */
+    onDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
+    /** CSS class on shape element when cursor is over. */
+    overShapeClass?: ClassProp;
+    /** Style on shape element when cursor is over. */
+    overShapeStyle?: StyleProp;
+    /** CSS class on shape element when drag is active but cursor is not over. */
+    farShapeClass?: ClassProp;
+    /** Style on shape element when drag is active but cursor is not over. */
+    farShapeStyle?: StyleProp;
 }
 interface ShapeData {
     id?: string;
@@ -47,8 +66,13 @@ interface ShapeData {
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
+    dragSource?: any;
+    overShapeClass?: string;
+    overShapeStyle?: any;
+    farShapeClass?: string;
+    farShapeStyle?: any;
 }
-export interface ShapeInstance extends Instance, TooltipParentInstance {
+export interface ShapeInstance extends Instance<Shape>, TooltipParentInstance {
     data: ShapeData;
 }
 export declare class Shape extends BoundedObject<ShapeConfig> {
@@ -62,6 +86,10 @@ export declare class Shape extends BoundedObject<ShapeConfig> {
     onClick?: string | ((e: MouseEvent, instance: Instance) => void);
     onDoubleClick?: string | ((e: MouseEvent, instance: Instance) => void);
     onContextMenu?: string | ((e: MouseEvent, instance: Instance) => void);
+    onDragStart?: string | ((e: DragEvent, instance: Instance) => any);
+    onDragEnd?: string | ((e: DragEvent, instance: Instance) => void);
+    onDrop?: string | ((e: DragEvent, instance: Instance) => any);
+    onDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
     el: SVGElement | null;
     init(): void;
     declareData(...args: any[]): void;

package/dist/Shape.js

@@ -1,7 +1,9 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { parseStyle } from "cx/util";
-import { tooltipMouseMove, tooltipMouseLeave, } from "cx/widgets";
-import { BoundedObject } from "cx/svg";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject, Svg } from "cx/svg";
+import { VDOM, } from "cx/ui";
+import { getTopLevelBoundingClientRect, parseStyle } from "cx/util";
+import { ddDetect, ddMouseDown, ddMouseUp, initiateDragDrop, registerDropZone, tooltipMouseLeave, tooltipMouseMove, tooltipParentWillUnmount, } from "cx/widgets";
 export class Shape extends BoundedObject {
     constructor(config) {
         super(config);
@@ -24,59 +26,20 @@ export class Shape extends BoundedObject {
             shapeStyle: { structured: true },
             textStyle: { structured: true },
             textClass: { structured: true },
+            dragSource: { structured: true },
+            overShapeClass: { structured: true },
+            overShapeStyle: { structured: true },
+            farShapeClass: { structured: true },
+            farShapeStyle: { structured: true },
         });
     }
     render(context, instance, key) {
         let { data } = instance;
-        let { bounds, text, shape } = data;
+        let { bounds } = data;
         if (!bounds.valid())
             return false;
-        let shapeProps = {
-            className: this.CSS.expand(this.CSS.element(this.baseClass, "shape"), data.shapeClass),
-            style: data.shapeStyle || data.style,
-            fill: data.fill,
-            stroke: data.stroke,
-            strokeWidth: data.strokeWidth,
-            ref: undefined,
-        };
-        let gProps = {
-            onMouseMove: (e) => {
-                tooltipMouseMove(e, instance, this.tooltip);
-            },
-            onMouseLeave: (e) => {
-                tooltipMouseLeave(e, instance, this.tooltip);
-            },
-        };
-        if (this.onClick)
-            gProps.onClick = (e) => instance.invoke("onClick", e, instance);
-        if (this.onDoubleClick)
-            gProps.onDoubleClick = (e) => instance.invoke("onDoubleClick", e, instance);
-        if (this.onContextMenu)
-            gProps.onContextMenu = (e) => instance.invoke("onContextMenu", e, instance);
-        if (this.tooltip) {
-            shapeProps.ref = (c) => {
-                this.el = c;
-            };
-        }
-        return (_jsxs("g", { id: data.id, ...gProps, className: data.classNames, style: data.style, children: [this.renderShape(shape, bounds, shapeProps), this.renderText(shape, bounds, text, data), this.renderChildren(context, instance)] }, key));
-    }
-    //   componentWillUnmount() {
-    //     tooltipParentWillUnmount((this as any).props.instance);
-    //   }
-    //   componentWillReceiveProps(props: any) {
-    //     tooltipParentWillReceiveProps(
-    //       this.el!,
-    //       props.instance,
-    //       props.instance.widget.tooltip
-    //     );
-    //   }
-    //   componentDidMount() {
-    //     tooltipParentDidMount(
-    //       this.el!,
-    //       this.props.instance,
-    //       this.props.instance.widget.tooltip
-    //     );
-    //   }
+        return (_jsx(ShapeComponent, { instance: instance, children: this.renderChildren(context, instance) }, key));
+    }
     prepare(context, instance) {
         super.prepare(context, instance);
         if (context.diagram) {
@@ -118,3 +81,168 @@ export class Shape extends BoundedObject {
 Shape.prototype.baseClass = "shape";
 Shape.prototype.anchors = "0 1 1 0";
 Shape.prototype.shape = "rectangle";
+class ShapeComponent extends VDOM.Component {
+    constructor(props) {
+        super(props);
+        this.el = null;
+        this.onMouseDown = (e) => {
+            let { instance } = this.props;
+            let { data } = instance;
+            if (data.dragSource) {
+                ddMouseDown(e);
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        this.onMouseMove = (e) => {
+            let { instance } = this.props;
+            let { widget } = instance;
+            tooltipMouseMove(e, instance, widget.tooltip);
+            if (instance.data.dragSource) {
+                e.stopPropagation();
+                e.preventDefault();
+                if (ddDetect(e))
+                    this.beginDragDrop(e);
+            }
+        };
+        this.onMouseLeave = (e) => {
+            let { instance } = this.props;
+            let { widget } = instance;
+            tooltipMouseLeave(e, instance, widget.tooltip);
+        };
+        this.state = { dropState: false, dragged: false };
+    }
+    render() {
+        let { instance, children } = this.props;
+        let { data } = instance;
+        let { widget } = instance;
+        let { bounds, text, shape } = data;
+        let { CSS, baseClass } = widget;
+        let { dropState } = this.state;
+        let shapeClassName = CSS.expand(CSS.element(baseClass, "shape"), data.shapeClass);
+        let shapeStyle = data.shapeStyle || data.style;
+        if (dropState === "over") {
+            shapeClassName = CSS.expand(shapeClassName, data.overShapeClass);
+            if (data.overShapeStyle)
+                shapeStyle = { ...shapeStyle, ...data.overShapeStyle };
+        }
+        else if (dropState === "far") {
+            shapeClassName = CSS.expand(shapeClassName, data.farShapeClass);
+            if (data.farShapeStyle)
+                shapeStyle = { ...shapeStyle, ...data.farShapeStyle };
+        }
+        let shapeProps = {
+            className: shapeClassName,
+            style: shapeStyle,
+            fill: data.fill,
+            stroke: data.stroke,
+            strokeWidth: data.strokeWidth,
+        };
+        return (_jsxs("g", { id: data.id, ref: (el) => {
+                this.el = el;
+            }, className: CSS.expand(data.classNames, CSS.state({ dragged: this.state.dragged })), style: data.style, onMouseMove: this.onMouseMove, onMouseDown: this.onMouseDown, onMouseUp: ddMouseUp, onMouseLeave: this.onMouseLeave, onClick: widget.onClick
+                ? (e) => instance.invoke("onClick", e, instance)
+                : undefined, onDoubleClick: widget.onDoubleClick
+                ? (e) => instance.invoke("onDoubleClick", e, instance)
+                : undefined, onContextMenu: widget.onContextMenu
+                ? (e) => instance.invoke("onContextMenu", e, instance)
+                : undefined, children: [widget.renderShape(shape, bounds, shapeProps), widget.renderText(shape, bounds, text, data), children] }));
+    }
+    beginDragDrop(e) {
+        let { instance } = this.props;
+        let { data, store } = instance;
+        let { widget } = instance;
+        if (widget.onDragStart &&
+            instance.invoke("onDragStart", e, instance) === false)
+            return;
+        initiateDragDrop(e, {
+            sourceEl: this.el,
+            source: {
+                store: store,
+                data: data.dragSource,
+            },
+            clone: {
+                widget: {
+                    $type: Svg,
+                    style: { width: "100%", height: "100%" },
+                    children: [
+                        {
+                            $type: Shape,
+                            anchors: "0 1 1 0",
+                            shape: data.shape,
+                            fill: data.fill,
+                            stroke: data.stroke,
+                            strokeWidth: data.strokeWidth,
+                            text: data.text,
+                            class: data.classNames,
+                            style: data.style,
+                            shapeClass: data.shapeClass,
+                            shapeStyle: data.shapeStyle,
+                            textClass: data.textClass,
+                            textStyle: data.textStyle,
+                        },
+                    ],
+                },
+                store: store,
+                matchSize: true,
+                matchCursorOffset: true,
+            },
+        }, (dragEvent) => {
+            this.setState({ dragged: false });
+            if (widget.onDragEnd)
+                instance.invoke("onDragEnd", dragEvent, instance);
+        });
+        this.setState({ dragged: true });
+    }
+    componentDidMount() {
+        let { widget } = this.props.instance;
+        if (widget.onDrop) {
+            this.unregisterDropZone = registerDropZone(this);
+        }
+    }
+    componentWillUnmount() {
+        if (this.unregisterDropZone) {
+            this.unregisterDropZone();
+        }
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    // IDropZone methods
+    onDropTest(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        return !widget.onDropTest || instance.invoke("onDropTest", e, instance);
+    }
+    onDragStart(e) {
+        this.setState({ dropState: "far" });
+    }
+    onDragEnd(e) {
+        this.setState({ dropState: false });
+    }
+    onDragEnter(e) {
+        this.setState({ dropState: "over" });
+    }
+    onDragLeave(e) {
+        this.setState({ dropState: "far" });
+    }
+    onDragMeasure(e) {
+        let rect = getTopLevelBoundingClientRect(this.el);
+        let { clientX, clientY } = e.cursor;
+        let over = rect.left <= clientX &&
+            clientX < rect.right &&
+            rect.top <= clientY &&
+            clientY < rect.bottom;
+        return {
+            over: over &&
+                Math.abs(clientX - (rect.left + rect.right) / 2) +
+                    Math.abs(clientY - (rect.top + rect.bottom) / 2),
+            near: false,
+        };
+    }
+    onDrop(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (this.state.dropState === "over" && widget.onDrop) {
+            instance.invoke("onDrop", e, instance);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx-diagrams",
-  "version": "26.3.2",
+  "version": "26.3.4",
   "description": "A library for creating diagrams within CxJS applications",
   "type": "module",
   "main": "dist/index.js",

package/src/Cell.tsx

@@ -19,12 +19,15 @@ export interface CellConfig extends NodeConfig {
 interface CellData {
     width: number;
     height: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-    mb?: number;
-    ms?: number;
-    me?: number;
+    ml: number;
+    mr: number;
+    mt: number;
+    mb: number;
+    ms: number;
+    me: number;
+    grow?: boolean;
+    msAuto?: boolean;
+    meAuto?: boolean;
 }
 
 export interface CellInstance extends NodeInstance {
@@ -68,6 +71,9 @@ export class Cell extends Node {
             mb: data.mb,
             ms: data.ms,
             me: data.me,
+            grow: data.grow,
+            msAuto: data.msAuto,
+            meAuto: data.meAuto,
         };
         super.explore(context, instance);
     }