@statelyai/flow-dom 3.2.0 → 3.3.0

package/dist/esm/index.d.ts

@@ -145,6 +145,10 @@ type EntityRectTarget = {
   getRect: () => Rect | null;
   autoSize?: boolean;
 };
+type EntityBoundsTarget = {
+  ids: readonly string[];
+  getRect: () => Rect | null;
+};
 type EntityEdgeTarget = {
   id: string;
   getPathData: () => EdgePathData | null;
@@ -155,6 +159,7 @@ type EntityGeometryObserverOptions = FlowEntityChangeNotifierOptions & {
 };
 type EntityGeometryObserver = {
   observeRect(element: HTMLElement, target: EntityRectTarget): () => void;
+  observeBounds(element: HTMLElement, target: EntityBoundsTarget): () => void;
   observeEdge(element: SVGElement, target: EntityEdgeTarget): () => void;
   /** Flush pending writes synchronously. Primarily useful for deterministic hosts/tests. */
   flush(): void;
@@ -168,9 +173,9 @@ type EntityGeometryObserver = {
 declare function createEntityGeometryObserver(store: FlowStore, options?: EntityGeometryObserverOptions): EntityGeometryObserver;
 //#endregion
 //#region src/index.d.ts
-type ResolvedFlowColorMode = "light" | "dark";
-declare function resolveFlowColorMode(colorMode: FlowColorMode, targetWindow?: Pick<Window, "matchMedia"> | undefined): ResolvedFlowColorMode;
-declare function applyFlowColorMode(element: HTMLElement, colorMode: FlowColorMode, targetWindow?: Pick<Window, "matchMedia"> | undefined): ResolvedFlowColorMode;
+type ResolvedFlowColorMode = 'light' | 'dark';
+declare function resolveFlowColorMode(colorMode: FlowColorMode, targetWindow?: Pick<Window, 'matchMedia'> | undefined): ResolvedFlowColorMode;
+declare function applyFlowColorMode(element: HTMLElement, colorMode: FlowColorMode, targetWindow?: Pick<Window, 'matchMedia'> | undefined): ResolvedFlowColorMode;
 type MeasurementTarget = {
   nodeId: string;
 } | {
@@ -196,7 +201,9 @@ declare function createMeasurementObserver(store: FlowStore, options?: Measureme
 declare function getAttachedContainer(store: FlowStore): Element | undefined;
 declare function clientToCanvas(store: FlowStore, point: Point, container?: Element | null | undefined): Point;
 declare function canvasToClient(store: FlowStore, point: Point, container?: Element | null | undefined): Point;
-declare function attachContainer(store: FlowStore, element: Element): () => void;
+declare function attachContainer(store: FlowStore, element: Element, options?: {
+  preserveViewportCenter?: boolean;
+}): () => void;
 type ViewportTransformOptions = {
   /** Idle delay (ms) before dropping the GPU-layer hint after interaction stops. */
   promoteIdleMs?: number;
@@ -213,7 +220,7 @@ type AttachInputOptions = {
    * Where keyboard events are listened for. Defaults to the flow container so
    * multiple flow instances do not all react to global Delete/undo/arrow keys.
    */
-  keyboardTarget?: "window" | "container" | HTMLElement;
+  keyboardTarget?: 'window' | 'container' | HTMLElement;
   /**
    * Auto-pan policy, evaluated once per animation frame while a gesture
    * session holds the pointer near the container edge. Pass
@@ -222,7 +229,7 @@ type AttachInputOptions = {
    * returns a delta, the binder pans the viewport and re-sends the
    * stationary pointer so the dragged entity follows the canvas.
    */
-  autoPan?: (context: ReturnType<FlowStore["getSnapshot"]>["context"], screenPoint: {
+  autoPan?: (context: ReturnType<FlowStore['getSnapshot']>['context'], screenPoint: {
     x: number;
     y: number;
   }) => {
@@ -232,4 +239,4 @@ type AttachInputOptions = {
 };
 declare function attachInput(options: AttachInputOptions): () => void;
 //#endregion
-export { AttachInputOptions, type ClipboardTransport, type ComputeRenderableIdsOptions, type EntityEdgeTarget, type EntityGeometryObserver, type EntityGeometryObserverOptions, type EntityRectTarget, FLOW_CONTENT_MIME, type FlowClipboard, type FlowImageExportOptions, type FlowImageExportResult, type FlowView, MeasurementObserver, MeasurementObserverOptions, MeasurementTarget, type NodePositionStyle, type RenderableIds, ResolvedFlowColorMode, type ViewportStyle, ViewportTransformOptions, applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, canvasToClient, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowClipboard, createFlowView, createMeasurementObserver, exportFlowImage, getAttachedContainer, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle };
+export { AttachInputOptions, type ClipboardTransport, type ComputeRenderableIdsOptions, type EntityBoundsTarget, type EntityEdgeTarget, type EntityGeometryObserver, type EntityGeometryObserverOptions, type EntityRectTarget, FLOW_CONTENT_MIME, type FlowClipboard, type FlowImageExportOptions, type FlowImageExportResult, type FlowView, MeasurementObserver, MeasurementObserverOptions, MeasurementTarget, type NodePositionStyle, type RenderableIds, ResolvedFlowColorMode, type ViewportStyle, ViewportTransformOptions, applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, canvasToClient, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowClipboard, createFlowView, createMeasurementObserver, exportFlowImage, getAttachedContainer, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle };

package/dist/esm/index.js

@@ -365,12 +365,15 @@ function createEntityGeometryObserver(store, options = {}) {
 			for (const pendingObservation of current) pendingObservation.write();
 		});
 	};
-	const observe = (id, write) => {
+	const observeIds = (ids, write) => {
 		const observation = {
 			write,
 			unsubscribe: () => {}
 		};
-		observation.unsubscribe = getNotifier().subscribe(id, () => schedule(observation));
+		const unsubscribers = [...new Set(ids)].map((id) => getNotifier().subscribe(id, () => schedule(observation)));
+		observation.unsubscribe = () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+		};
 		observations.add(observation);
 		write();
 		return () => {
@@ -379,6 +382,7 @@ function createEntityGeometryObserver(store, options = {}) {
 			pending.delete(observation);
 		};
 	};
+	const observe = (id, write) => observeIds([id], write);
 	return {
 		observeRect(element, target) {
 			return observe(target.id, () => {
@@ -397,6 +401,18 @@ function createEntityGeometryObserver(store, options = {}) {
 				else element.style.removeProperty("will-change");
 			});
 		},
+		observeBounds(element, target) {
+			return observeIds(target.ids, () => {
+				const rect = target.getRect();
+				if (!rect) return;
+				const context = store.getSnapshot().context;
+				element.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
+				element.style.width = `${rect.width}px`;
+				element.style.height = `${rect.height}px`;
+				if (context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running") element.style.willChange = "transform, width, height";
+				else element.style.removeProperty("will-change");
+			});
+		},
 		observeEdge(element, target) {
 			return observe(target.id, () => {
 				const pathData = target.getPathData();
@@ -564,13 +580,14 @@ function canvasToClient(store, point, container = containers.get(store)) {
 		y: point.y * viewport.zoom + viewport.y + (rect?.top ?? 0)
 	};
 }
-function attachContainer(store, element) {
+function attachContainer(store, element, options = {}) {
 	containers.set(store, element);
 	const update = () => {
 		const rect = element.getBoundingClientRect();
 		if (rect.width > 0 && rect.height > 0) store.trigger.updateViewportSize({
 			width: rect.width,
-			height: rect.height
+			height: rect.height,
+			preserveCenter: options.preserveViewportCenter
 		});
 	};
 	update();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-dom",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "DOM-specific helpers for @statelyai/flow with core re-exports.",
   "type": "module",
   "sideEffects": false,
@@ -27,7 +27,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@statelyai/flow": "0.5.0"
+    "@statelyai/flow": "0.7.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.0",