@focus.matters/diagrams 0.2.1 → 0.2.20

package/dist/src/Diagrams/components/objects/RenderEdge/types.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
-import { Coordinates } from '../../../store/primitives/Coordinates';
-import { EdgeArrowHead, EdgeLineStyle, EdgePathType } from '../../../store/types';
-import { EdgePoint } from '../../../store/elements/EdgePoint';
 import { Edge } from '../../../store/elements/Edge';
+import { EdgePoint } from '../../../store/elements/EdgePoint';
 import { AnyMouseEvent } from '../../../store/elements/Events';
+import { Coordinates } from '../../../store/primitives/Coordinates';
+import { EdgeArrowHead, EdgeLineStyle, EdgePathType } from '../../../store/types';
 export interface RenderEdgeProps {
     edge?: Edge;
     points: (Coordinates | EdgePoint)[];
@@ -18,13 +18,16 @@ export interface RenderEdgeProps {
     lineStyle?: EdgeLineStyle;
     pathType?: EdgePathType;
     draggable?: boolean;
+    selected?: boolean;
     onMidpointMouseDown?: (p: Midpoint, ev: React.MouseEvent) => void;
     onEndpointMouseDown?: (endpoint: "from" | "to", ev: React.MouseEvent) => void;
 }
+/** Represents the editable midpoint between two consecutive routed edge points. */
 export declare class Midpoint extends Coordinates {
     id: string;
     edge: Edge;
     points: [Coordinates, Coordinates];
     constructor(id: string, edge: Edge, points: [Coordinates, Coordinates], items?: AnyMouseEvent | Event | Coordinates | number[]);
+    /** Creates an independent midpoint while preserving its edge and segment data. */
     copy(): Midpoint;
 }

package/dist/src/Diagrams/components/objects/edgeLabelPlacement.d.ts

@@ -1,4 +1,7 @@
 import { Edge } from '../../store/elements/Edge';
 import { Coordinates } from '../../store/primitives/Coordinates';
 /** Places a new label beside the clicked route segment instead of over its stroke. */
-export declare function positionEdgeLabelBesideRoute(edge: Edge, clicked: Coordinates, clearance?: number): Coordinates;
+export declare function positionEdgeLabelBesideRoute(edge: Edge, clicked: Coordinates, size?: {
+    height: number;
+    width: number;
+}, clearance?: number): Coordinates;

package/dist/src/Diagrams/components/stopDiagramControlEvent.d.ts

@@ -0,0 +1,11 @@
+/** Keeps contained toolbar gestures out of the canvas without swallowing portalled control events. */
+export declare function stopDiagramControlEvent(event: {
+    target: EventTarget | null;
+    currentTarget: {
+        contains(target: EventTarget | null): boolean;
+    };
+    stopPropagation(): void;
+    nativeEvent?: {
+        stopImmediatePropagation?(): void;
+    };
+}): void;

package/dist/src/Diagrams/components/useDiagramPointerCapture.d.ts

@@ -0,0 +1,14 @@
+import { PointerEvent } from 'react';
+import { Diagram } from '../store/Diagram';
+/** Captures diagram gestures safely while keeping embedded controls and portalled menus interactive. */
+export declare function useDiagramPointerCapture(diagram?: Diagram, controls?: string): {
+    ref: import('react').RefObject<HTMLDivElement | null>;
+    onPointerDownCapture(event: PointerEvent<HTMLDivElement>): void;
+    onPointerMove(event: PointerEvent<HTMLDivElement>): void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+    onLostPointerCapture: () => void;
+    onDragStart(event: {
+        preventDefault(): void;
+    }): void;
+};

package/dist/src/Diagrams/custom/mr/bindAttributeRelationshipHover.d.ts

@@ -0,0 +1,3 @@
+import { MRDiagram } from './MRDiagram';
+/** Highlights connections and adjacent tables for hovered attributes, including custom table renderers. */
+export declare function bindAttributeRelationshipHover(root: HTMLElement, diagram: MRDiagram): () => void;

package/dist/src/Diagrams/store/Canvas.d.ts

@@ -10,11 +10,23 @@ export type ScaleEvent = {
 /** Owns viewport scale, displacement, interaction sessions, and rendered canvas bounds. */
 export declare class Canvas extends Element {
     private unbindDocumentEvents;
+    private readonly detachHandlers;
     private mouseSessionStartedInFrame;
+    private keyboardSessionActive;
     private centerAnimationFrame;
     protected _displacement: Coordinates;
     _scale: number;
     private gridSize;
+    private minimumScale;
+    private maximumScale;
+    private wheelSensitivity;
+    private animatedZoom;
+    private zoomFrame;
+    private zoomTarget;
+    private zoomDeadline;
+    private zoomLastFrame;
+    private zoomCenter;
+    private applyingZoomFrame;
     size: Coordinates;
     get scale(): number;
     element: HTMLElement | null;
@@ -26,6 +38,8 @@ export declare class Canvas extends Element {
     constructor(parent: Diagram);
     /** Releases document listeners and cancels any viewport animation still in flight. */
     dispose(): void;
+    /** Registers cleanup for decorations owned by a currently attached canvas surface. */
+    onDetach(callback: () => void): () => void;
     /** Marks programmatic pointer sessions as eligible for the canvas drag lifecycle. */
     markMouseSessionStartedInFrame(): void;
     get dragging(): boolean;
@@ -35,6 +49,11 @@ export declare class Canvas extends Element {
     protected bound(): void;
     /** Centers a world point in the viewport and optionally animates the pan. */
     centerOnPoint(c: Coordinates, animated?: boolean): void;
+    /**
+     * Minimally pans the viewport until a world-space box has the requested margin.
+     */
+    ensureVisible(box: Dimensions, padding?: number, animated?: boolean): boolean;
+    private visibleOriginForInterval;
     private animateDisplacement;
     private cancelCenterAnimation;
     private applyDisplacement;
@@ -42,6 +61,27 @@ export declare class Canvas extends Element {
     displace(c: Coordinates): Coordinates;
     /** Replaces the viewport displacement while respecting configured canvas bounds. */
     setDisplacement(c: Coordinates): void;
+    /** Configures validated viewport limits and a constant scale increment per wheel pixel. */
+    configureZoom(options: {
+        minimumScale?: number;
+        maximumScale?: number;
+        wheelSensitivity?: number;
+        animated?: boolean;
+    }): void;
+    /** Applies the same configured limits to manual zoom, fitted content and restored cameras. */
+    clampScale(value: number): number;
+    /** Captures serializable camera coordinates without choosing an application storage backend. */
+    getCamera(): {
+        x: number;
+        y: number;
+        scale: number;
+    };
+    /** Restores a validated camera snapshot using the same limits as interactive viewport zoom. */
+    restoreCamera(camera: {
+        x: number;
+        y: number;
+        scale: number;
+    }): void;
     /** Changes viewport scale around a screen-space focus point and preserves alignment. */
     setScale(newScale: number, zoomCenter?: Coordinates): void;
     /**
@@ -72,8 +112,13 @@ export declare class Canvas extends Element {
     protected handleClick(originalEvent: MouseEvent): void;
     protected handleMouseUp(originalEvent: MouseEvent): void;
     protected handleMouseDown(originalEvent: MouseEvent): void;
+    protected handleFocusIn(originalEvent: FocusEvent): void;
     protected handleKeyDown(originalEvent: KeyboardEvent): void;
     protected handleKeyUp(originalEvent: KeyboardEvent): void;
     protected handleKeyPress(originalEvent: KeyboardEvent): void;
+    private cancelZoomAnimation;
+    private animateWheelZoom;
+    private advanceWheelZoom;
+    private applyWheelZoom;
     protected handleWheel(originalEvent: WheelEvent): void;
 }

package/dist/src/Diagrams/store/Diagram.d.ts

@@ -48,6 +48,12 @@ export type TDefaultExensions = {
 };
 export type TDiagramSettings = Partial<{
     extensions: TDefaultExensions;
+    zoom: {
+        minimumScale?: number;
+        maximumScale?: number;
+        wheelSensitivity?: number;
+        animated?: boolean;
+    };
 }>;
 /** Owns diagram elements, extensions, camera state, and application interactions. */
 export declare class Diagram extends Element {

package/dist/src/Diagrams/store/revealDiagramNode.d.ts

@@ -0,0 +1,10 @@
+import { Diagram } from './Diagram';
+import { Node } from './elements/Node';
+import { Coordinates } from './primitives/Coordinates';
+/** Selects, frames and persistently highlights a reference destination until a click outside it. */
+export declare function revealDiagramNode(diagram: Diagram, node: Node, options?: {
+    point?: Coordinates;
+    attributeId?: string;
+    padding?: number;
+    preferredScale?: number;
+}): boolean;

package/dist/src/index.d.ts

@@ -29,3 +29,9 @@ export { MRTableNode } from './Diagrams/custom/mr/nodes/MRTableNode';
 export type * from './Diagrams/custom/mr/types';
 export { DiagramEditor } from './Diagrams/DiagramEditor';
 export { Diagram } from './Diagrams/store/Diagram';
+export { customRendererProps } from './Diagrams/components/objects/customRendererProps';
+export { stopDiagramControlEvent } from './Diagrams/components/stopDiagramControlEvent';
+export { useDiagramPointerCapture } from './Diagrams/components/useDiagramPointerCapture';
+export { bindAttributeRelationshipHover } from './Diagrams/custom/mr/bindAttributeRelationshipHover';
+export { Coordinates } from './Diagrams/store/primitives/Coordinates';
+export { revealDiagramNode } from './Diagrams/store/revealDiagramNode';

package/package.json

@@ -1,48 +1,50 @@
-{
-  "name": "@focus.matters/diagrams",
-  "version": "0.2.1",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./diagrams.css": "./dist/diagrams.css"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "html2canvas": "^1.4.1",
-    "mobx": "^6.13.7",
-    "mobx-react-lite": "^4.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.0.0",
-    "svg-path-bbox": "^2.1.0"
-  },
-  "devDependencies": {
-    "html2canvas": "^1.4.1",
-    "mobx": "^6.13.7",
-    "mobx-react-lite": "^4.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.0.0",
-    "svg-path-bbox": "^2.1.0"
-  },
-  "gitHead": "f866b7ee0e0b98b4d9525fcb71185029df8a4996",
-  "dependencies": {
-    "@dagrejs/dagre": "^3.0.0"
-  },
-  "scripts": {
-    "build": "vite build",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
-  }
-}
+{
+  "name": "@focus.matters/diagrams",
+  "version": "0.2.20",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./diagrams.css": "./dist/diagrams.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "html2canvas": "^1.4.1",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.0.0",
+    "svg-path-bbox": "^2.1.0"
+  },
+  "devDependencies": {
+    "html2canvas": "^1.4.1",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.0.0",
+    "svg-path-bbox": "^2.1.0"
+  },
+  "gitHead": "f866b7ee0e0b98b4d9525fcb71185029df8a4996",
+  "dependencies": {
+    "@dagrejs/dagre": "^3.0.0"
+  },
+  "candidateSourceCommit": "f71a92ce06888e913044f4ef56d1680b0b19ce70"
+}

package/dist/DirectedPoint-BSGh_PUt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DirectedPoint-BSGh_PUt.js","sources":["../src/Diagrams/store/primitives/DirectedPoint.ts"],"sourcesContent":["import type { TOrientation } from \"../types\";\nimport { Coordinates } from \"./Coordinates\";\n\nexport class DirectedPoint extends Coordinates {\n  direction: TOrientation = \"left\";\n\n  get rawDirectedPoint() {\n    return {\n      x: this.x,\n      y: this.y,\n      direction: this.direction,\n    };\n  }\n\n  stepBack() {\n    switch (this.direction) {\n      case \"down\":\n        this.y--;\n        break;\n      case \"left\":\n        this.x++;\n        break;\n      case \"right\":\n        this.x--;\n        break;\n      case \"up\":\n        this.y++;\n        break;\n    }\n    return this;\n  }\n\n  stepForward() {\n    switch (this.direction) {\n      case \"down\":\n        this.y++;\n        break;\n      case \"left\":\n        this.x--;\n        break;\n      case \"right\":\n        this.x++;\n        break;\n      case \"up\":\n        this.y--;\n        break;\n    }\n    return this;\n  }\n}\n"],"names":["_DirectedPoint","Coordinates","__name","DirectedPoint"],"mappings":";;;AAGO,MAAMA,IAAN,MAAMA,UAAsBC,EAAY;AAAA,EAC7C,YAA0B;AAAA,EAE1B,IAAI,mBAAmB;AACrB,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,WAAW,KAAK;AAAA,IAAA;AAAA,EAEpB;AAAA,EAEA,WAAW;AACT,YAAQ,KAAK,WAAA;AAAA,MACX,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,IAAA;AAEJ,WAAO;AAAA,EACT;AAAA,EAEA,cAAc;AACZ,YAAQ,KAAK,WAAA;AAAA,MACX,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,MACF,KAAK;AACH,aAAK;AACL;AAAA,IAAA;AAEJ,WAAO;AAAA,EACT;AACF;AA9C+CC,EAAAF,GAAA;AAAxC,IAAMG,IAANH;"}