@statelyai/flow-dom 0.1.0

package/dist/esm/index.d.ts

@@ -0,0 +1,20 @@
+import { FlowStore } from "@statelyai/flow";
+
+//#region src/index.d.ts
+type MeasurementTarget = {
+  nodeId: string;
+} | {
+  nodeId: string;
+  portName: string;
+} | {
+  edgeId: string;
+};
+type MeasurementObserver = {
+  observe(element: Element, target: MeasurementTarget): void;
+  unobserve(element: Element): void;
+  disconnect(): void;
+};
+declare function createMeasurementObserver(store: FlowStore): MeasurementObserver;
+declare function attachContainer(store: FlowStore, element: Element): () => void;
+//#endregion
+export { MeasurementObserver, MeasurementTarget, attachContainer, createMeasurementObserver };

package/dist/esm/index.js

@@ -0,0 +1,82 @@
+//#region src/index.ts
+function createMeasurementObserver(store) {
+	const elementMap = /* @__PURE__ */ new Map();
+	let pendingMeasurements = /* @__PURE__ */ new Map();
+	let pendingPorts = [];
+	let rafId = null;
+	function flush() {
+		rafId = null;
+		if (pendingMeasurements.size > 0) {
+			store.trigger.reportMeasurements({ measurements: pendingMeasurements });
+			pendingMeasurements = /* @__PURE__ */ new Map();
+		}
+		if (pendingPorts.length > 0) {
+			store.trigger.reportPortMeasurements({ measurements: pendingPorts });
+			pendingPorts = [];
+		}
+	}
+	function scheduleFlush() {
+		if (rafId === null) rafId = requestAnimationFrame(flush);
+	}
+	const observer = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const target = elementMap.get(entry.target);
+			if (!target) continue;
+			const rect = entry.target.getBoundingClientRect();
+			if ("portName" in target) {
+				const nodeRect = entry.target.closest(`[data-entity-id="${target.nodeId}"]`)?.getBoundingClientRect();
+				if (nodeRect) pendingPorts.push({
+					nodeId: target.nodeId,
+					portName: target.portName,
+					x: rect.left - nodeRect.left,
+					y: rect.top - nodeRect.top,
+					width: rect.width,
+					height: rect.height
+				});
+			} else if ("nodeId" in target) pendingMeasurements.set(target.nodeId, {
+				width: rect.width,
+				height: rect.height
+			});
+			else pendingMeasurements.set(target.edgeId, {
+				width: rect.width,
+				height: rect.height
+			});
+		}
+		scheduleFlush();
+	});
+	return {
+		observe(element, target) {
+			elementMap.set(element, target);
+			observer.observe(element);
+		},
+		unobserve(element) {
+			elementMap.delete(element);
+			observer.unobserve(element);
+		},
+		disconnect() {
+			elementMap.clear();
+			observer.disconnect();
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+				rafId = null;
+			}
+			pendingMeasurements = /* @__PURE__ */ new Map();
+			pendingPorts = [];
+		}
+	};
+}
+function attachContainer(store, element) {
+	const update = () => {
+		const rect = element.getBoundingClientRect();
+		if (rect.width > 0 && rect.height > 0) store.trigger.updateViewportSize({
+			width: rect.width,
+			height: rect.height
+		});
+	};
+	update();
+	const observer = new ResizeObserver(update);
+	observer.observe(element);
+	return () => observer.disconnect();
+}
+//#endregion
+export { attachContainer, createMeasurementObserver };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@statelyai/flow-dom",
+  "version": "0.1.0",
+  "description": "DOM-specific helpers for @statelyai/flow.",
+  "keywords": [
+    "flow",
+    "diagram",
+    "dom",
+    "resizeobserver"
+  ],
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.ts",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./src/index.ts": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@statelyai/flow": ">=0.1.0"
+  },
+  "devDependencies": {
+    "tsdown": "^0.12.0",
+    "typescript": "^5.8.0"
+  }
+}