@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/workers/elkLayout.shared-worker.js

@@ -1 +1,327 @@
-import*as e from"comlink";typeof document>`u`&&Reflect.set(globalThis,`document`,{});const t={force:`force`,layeredHorizontal:`layeredHorizontal`,layeredVertical:`layeredVertical`,flow:`flow`,viewLayered:`viewLayered`};t.force;function n(e){return e!==t.force}function r(e){return e===t.flow}const i={"elk.padding":`[top=52,left=24,bottom=24,right=24]`},a={"elk.padding":`[top=0,left=0,bottom=0,right=0]`,"elk.hierarchyHandling":`INCLUDE_CHILDREN`},o={"elk.algorithm":`layered`,"elk.layered.spacing.baseValue":`40`,"elk.spacing.componentComponent":`80`,"elk.layered.spacing.edgeNodeBetweenLayers":`120`,"elk.layered.considerModelOrder.strategy":`PREFER_EDGES`,"elk.layered.crossingMinimization.forceNodeModelOrder":`true`,"elk.layered.mergeEdges":`true`,"elk.layered.nodePlacement.strategy":`INTERACTIVE`,"elk.layered.layering.strategy":`INTERACTIVE`},s={"elk.alignment":`LEFT`},c={"elk.aspectRatio":`0.5625`},l={"elk.spacing.nodeNode":`80`,"elk.separateConnectedComponents":`true`,"elk.spacing.componentComponent":`160`},u=e=>({...l,"elk.algorithm":`layered`,"elk.direction":e,"elk.layered.spacing.nodeNodeBetweenLayers":`160`,"elk.layered.cycleBreaking.strategy":`DEPTH_FIRST`});function d(e){switch(e){case t.layeredHorizontal:return u(`RIGHT`);case t.layeredVertical:return u(`DOWN`);case t.flow:return{...u(`RIGHT`),"elk.layered.nodePlacement.strategy":`SIMPLE`,"elk.layered.spacing.edgeNodeBetweenLayers":`80`};case t.viewLayered:return{...o}}}function f(e){return e===t.viewLayered?{...s}:null}function p(e,t){switch(t){case`tableGroup`:return{...d(e),...i};case`component`:return{...d(e),...a};default:return{...c}}}const m=[...new Set(Object.values(t).filter(n).map(e=>d(e)[`elk.algorithm`]))],h=`EAST`,g=e=>`edge-${e}-source`,_=e=>`edge-${e}-target`;function v(e,t){return e.side===t.side?e.side===h?e.row-t.row:t.row-e.row:e.side===h?-1:1}function y(e){let t=/* @__PURE__ */ new Map,n=(e,n)=>{let r=t.get(e);r?r.push(n):t.set(e,[n])};return e.forEach((e,t)=>{n(e.source,{id:g(t),row:e.sourceRow,side:h}),n(e.target,{id:_(t),row:e.targetRow,side:`WEST`})}),new Map([...t].map(([e,t])=>[e,t.sort(v).map(({id:e,side:t})=>({id:e,width:8,height:8,layoutOptions:{"elk.port.side":t}}))]))}function b(e,t=/* @__PURE__ */ new Map){return e.forEach(({id:e,children:n=[]})=>{n.forEach(n=>t.set(n.id,e)),b(n,t)}),t}function x(e,t){let n=[];for(let r=e.get(t);r;r=e.get(r))n.push(r);return n}function S(e,t,n){let r=new Set(x(e,t));return x(e,n).find(e=>r.has(e))??null}function C({placement:e,nodes:t,edges:n}){let i=r(e)?y(n):null,a=b(t),o=/* @__PURE__ */ new Map;return n.forEach(({source:e,target:t},n)=>{let r=S(a,e,t),s={id:`edge-${n}`,sources:[i?g(n):e],targets:[i?_(n):t]},c=o.get(r);c?c.push(s):o.set(r,[s])}),{id:`root`,layoutOptions:d(e),children:t.map(t=>w(t,e,i,o)),edges:o.get(null)??[]}}function w({id:e,width:t,height:n,x:r,y:i,children:a,kind:o},s,c,l){if(a?.length){let r=l.get(e);return{id:e,width:t,height:n,layoutOptions:p(s,o),children:a.map(e=>w(e,s,c,l)),...r?{edges:r}:{}}}let u={...f(s),...c?{"elk.portConstraints":`FIXED_ORDER`}:{}};return{id:e,width:t,height:n,...r===void 0?{}:{x:r},...i===void 0?{}:{y:i},...Object.keys(u).length?{layoutOptions:u}:{},...c?{ports:c.get(e)??[]}:{}}}function T(e,t,n){return e.flatMap(({id:e,x:r,y:i,children:a})=>{let o=t+(r??0),s=n+(i??0);return a?.length?T(a,o,s):[{id:e,x:o,y:s}]})}let E=null;function D(){return E??=import(`elkjs/lib/elk.bundled.js`).then(({default:e})=>new e({algorithms:m})),E}const O=new class{async ready(){return await D(),!0}async layout(e){return T((await(await D()).layout(C(e))).children??[],0,0)}};self.onconnect=t=>{let n=t.ports[0];e.expose(O,n)};
+import * as Comlink from "comlink";
+//#region src/services/elk-layout/elkWorkerRealm.ts
+/**
+* What ELK's bundle looks for before deciding it is the worker script itself.
+* With no document and a self it installs an onmessage handler and exports
+* nothing, and the wrapper reading its Worker export then builds undefined.
+*/
+const DOCUMENT_STUB = {};
+if (typeof document === "undefined") Reflect.set(globalThis, "document", DOCUMENT_STUB);
+//#endregion
+//#region src/constants/tablePlacement.ts
+/**
+* How a set of tables is laid out. Force is the simulation the editor has
+* always run, the rest are ELK algorithms answered off the main thread, and
+* viewLayered is the preset the views place with rather than one the author picks.
+*/
+const TablePlacement = {
+	force: "force",
+	layeredHorizontal: "layeredHorizontal",
+	layeredVertical: "layeredVertical",
+	flow: "flow",
+	viewLayered: "viewLayered"
+};
+TablePlacement.force;
+//#endregion
+//#region src/services/elk-layout/elkLayoutOptions.ts
+function isElkPlacement(placement) {
+	return placement !== TablePlacement.force;
+}
+/**
+* Whether ELK is handed a port per relationship endpoint rather than a bare
+* box. The layered placements ask only where a table goes; flow also says
+* where each connector meets it, which is what pulls the crossings out.
+*/
+function usesPorts(placement) {
+	return placement === TablePlacement.flow;
+}
+/**
+* Room a table group's node keeps round its members, which is the box the
+* editor draws round them: the padding, and the title bar on top as well.
+*/
+const TABLE_GROUP_NODE_OPTIONS = { "elk.padding": `[top=52,left=24,bottom=24,right=24]` };
+/**
+* A component is laid out as one, across the borders of the groups inside it,
+* which is what lets a relationship between two groups place them; it draws
+* nothing, so it keeps no room round what it holds.
+*/
+const COMPONENT_NODE_OPTIONS = {
+	"elk.padding": "[top=0,left=0,bottom=0,right=0]",
+	"elk.hierarchyHandling": "INCLUDE_CHILDREN"
+};
+/**
+* Room left between two tables, between two layers of them, and between two
+* groups that share no relationship. A table is far wider than the boxes ELK's
+* own defaults were written for, so all three sit well above them.
+*/
+const NODE_SPACING = 80;
+const LAYER_SPACING = 160;
+const COMPONENT_SPACING = 160;
+/**
+* What the reference's own layout is told, copied option for option. The two
+* INTERACTIVE strategies are why a node carries a coordinate hint at all, and
+* the request normalizes that hint rather than reproducing what it measured.
+*/
+const VIEW_LAYERED = {
+	"elk.algorithm": "layered",
+	"elk.layered.spacing.baseValue": "40",
+	"elk.spacing.componentComponent": "80",
+	"elk.layered.spacing.edgeNodeBetweenLayers": "120",
+	"elk.layered.considerModelOrder.strategy": "PREFER_EDGES",
+	"elk.layered.crossingMinimization.forceNodeModelOrder": "true",
+	"elk.layered.mergeEdges": "true",
+	"elk.layered.nodePlacement.strategy": "INTERACTIVE",
+	"elk.layered.layering.strategy": "INTERACTIVE"
+};
+/** The reference aligns a node to the left of its layer, its one node level option. */
+const VIEW_NODE = { "elk.alignment": "LEFT" };
+/**
+* The box the tables joined to nothing are gathered in, told what the
+* reference tells its own and nothing besides: the ratio, under the layered
+* algorithm around it, which stands them in one column. ELK places the box like any node.
+*/
+const GROUP_NODE_OPTIONS = { "elk.aspectRatio": "0.5625" };
+const COMMON = {
+	"elk.spacing.nodeNode": `${NODE_SPACING}`,
+	"elk.separateConnectedComponents": "true",
+	"elk.spacing.componentComponent": `${COMPONENT_SPACING}`
+};
+const layered = (direction) => ({
+	...COMMON,
+	"elk.algorithm": "layered",
+	"elk.direction": direction,
+	"elk.layered.spacing.nodeNodeBetweenLayers": `${LAYER_SPACING}`,
+	"elk.layered.cycleBreaking.strategy": "DEPTH_FIRST"
+});
+/**
+* What ELK is told, for the placement it was asked for.
+*
+* @example
+* const graph = { id: 'root', layoutOptions: elkLayoutOptions(placement) };
+*/
+function elkLayoutOptions(placement) {
+	switch (placement) {
+		case TablePlacement.layeredHorizontal: return layered("RIGHT");
+		case TablePlacement.layeredVertical: return layered("DOWN");
+		case TablePlacement.flow: return {
+			...layered("RIGHT"),
+			"elk.layered.nodePlacement.strategy": "SIMPLE",
+			"elk.layered.spacing.edgeNodeBetweenLayers": `${NODE_SPACING}`
+		};
+		case TablePlacement.viewLayered: return { ...VIEW_LAYERED };
+	}
+}
+/**
+* What every node in a layout is told, before the ports a placement may add.
+* Only the views' preset says anything at this level, so the rest hand ELK a
+* bare box and let the algorithm's own defaults decide.
+*
+* @example
+* const layoutOptions = elkNodeLayoutOptions(placement);
+*/
+function elkNodeLayoutOptions(placement) {
+	return placement === TablePlacement.viewLayered ? { ...VIEW_NODE } : null;
+}
+/**
+* What a node holding children is told. A table group and a component lay their
+* children out as the root is laid out, its spacing included, which ELK would
+* otherwise take from its own defaults; the box of unrelated tables, the ratio.
+*
+* @example
+* const layoutOptions = elkCompoundLayoutOptions(placement, node.kind);
+*/
+function elkCompoundLayoutOptions(placement, kind) {
+	switch (kind) {
+		case "tableGroup": return {
+			...elkLayoutOptions(placement),
+			...TABLE_GROUP_NODE_OPTIONS
+		};
+		case "component": return {
+			...elkLayoutOptions(placement),
+			...COMPONENT_NODE_OPTIONS
+		};
+		default: return { ...GROUP_NODE_OPTIONS };
+	}
+}
+/**
+* Every algorithm the placements name. ELK registers the metadata of these and
+* no others, so it is read off the options rather than listed: a placement
+* naming an algorithm left out here would be answered with an error.
+*/
+const ELK_ALGORITHMS = [...new Set(Object.values(TablePlacement).filter(isElkPlacement).map((placement) => elkLayoutOptions(placement)["elk.algorithm"]))];
+//#endregion
+//#region src/services/elk-layout/elkLayoutService.ts
+/** The box a port is given. ELK reserves it; the editor draws none of it. */
+const PORT_SIZE = 8;
+/** Which side of a table a relationship leaves by, in the one layered direction flow takes. */
+const SOURCE_SIDE = "EAST";
+const TARGET_SIDE = "WEST";
+const sourcePortId = (index) => `edge-${index}-source`;
+const targetPortId = (index) => `edge-${index}-target`;
+/**
+* A fixed order is read clockwise from the top left corner, so an east side
+* runs down the rows and a west side back up them. Measured against ELK rather
+* than assumed: a west side listed downwards comes out upside down.
+*/
+function byClockwiseRow(a, b) {
+	if (a.side !== b.side) return a.side === SOURCE_SIDE ? -1 : 1;
+	return a.side === SOURCE_SIDE ? a.row - b.row : b.row - a.row;
+}
+/** One port per relationship endpoint, grouped by the table it sits on. */
+function portsByNode(edges) {
+	const byNode = /* @__PURE__ */ new Map();
+	const add = (nodeId, port) => {
+		const ports = byNode.get(nodeId);
+		ports ? ports.push(port) : byNode.set(nodeId, [port]);
+	};
+	edges.forEach((edge, index) => {
+		add(edge.source, {
+			id: sourcePortId(index),
+			row: edge.sourceRow,
+			side: SOURCE_SIDE
+		});
+		add(edge.target, {
+			id: targetPortId(index),
+			row: edge.targetRow,
+			side: TARGET_SIDE
+		});
+	});
+	return new Map([...byNode].map(([nodeId, ports]) => [nodeId, ports.sort(byClockwiseRow).map(({ id, side }) => ({
+		id,
+		width: PORT_SIZE,
+		height: PORT_SIZE,
+		layoutOptions: { "elk.port.side": side }
+	}))]));
+}
+/**
+* The node holding each node another holds. One at the top level has no entry
+* rather than the root's id, which a table may carry as well.
+*/
+function parentsOf(nodes, parents = /* @__PURE__ */ new Map()) {
+	nodes.forEach(({ id, children = [] }) => {
+		children.forEach((child) => parents.set(child.id, id));
+		parentsOf(children, parents);
+	});
+	return parents;
+}
+/** The nodes holding a node, nearest first. */
+function ancestorsOf(parents, id) {
+	const ancestors = [];
+	for (let parent = parents.get(id); parent; parent = parents.get(parent)) ancestors.push(parent);
+	return ancestors;
+}
+/**
+* The deepest node holding both ends of an edge, where ELK is told about it, or
+* null for the root: a node laid out on its own reads only the edges it holds,
+* and a component holds those that cross the groups inside it.
+*/
+function containerOf(parents, source, target) {
+	const sources = new Set(ancestorsOf(parents, source));
+	return ancestorsOf(parents, target).find((id) => sources.has(id)) ?? null;
+}
+/**
+* The graph ELK is handed: a table group holds its members, a component what is
+* joined across group borders, the box the unrelated tables, and each edge sits
+* in the deepest node holding both its ends, the root in a document with no group.
+*/
+function toElkGraph({ placement, nodes, edges }) {
+	const ports = usesPorts(placement) ? portsByNode(edges) : null;
+	const parents = parentsOf(nodes);
+	const edgesByContainer = /* @__PURE__ */ new Map();
+	edges.forEach(({ source, target }, index) => {
+		const container = containerOf(parents, source, target);
+		const edge = {
+			id: `edge-${index}`,
+			sources: [ports ? sourcePortId(index) : source],
+			targets: [ports ? targetPortId(index) : target]
+		};
+		const held = edgesByContainer.get(container);
+		held ? held.push(edge) : edgesByContainer.set(container, [edge]);
+	});
+	return {
+		id: "root",
+		layoutOptions: elkLayoutOptions(placement),
+		children: nodes.map((node) => toElkChild(node, placement, ports, edgesByContainer)),
+		edges: edgesByContainer.get(null) ?? []
+	};
+}
+/** One node of the graph: a table with its hint and ports, or a node holding others. */
+function toElkChild({ id, width, height, x, y, children, kind }, placement, ports, edgesByContainer) {
+	if (children?.length) {
+		const edges = edgesByContainer.get(id);
+		return {
+			id,
+			width,
+			height,
+			layoutOptions: elkCompoundLayoutOptions(placement, kind),
+			children: children.map((child) => toElkChild(child, placement, ports, edgesByContainer)),
+			...edges ? { edges } : {}
+		};
+	}
+	const layoutOptions = {
+		...elkNodeLayoutOptions(placement),
+		...ports ? { "elk.portConstraints": "FIXED_ORDER" } : {}
+	};
+	return {
+		id,
+		width,
+		height,
+		...x === void 0 ? {} : { x },
+		...y === void 0 ? {} : { y },
+		...Object.keys(layoutOptions).length ? { layoutOptions } : {},
+		...ports ? { ports: ports.get(id) ?? [] } : {}
+	};
+}
+/**
+* Every table of a laid out graph, at the coordinates the root works in. ELK
+* answers a child of a group relative to that group, and a caller placing
+* tables has no group to place them in.
+*/
+function toAbsolutePoints(children, offsetX, offsetY) {
+	return children.flatMap(({ id, x, y, children: nested }) => {
+		const absoluteX = offsetX + (x ?? 0);
+		const absoluteY = offsetY + (y ?? 0);
+		return nested?.length ? toAbsolutePoints(nested, absoluteX, absoluteY) : [{
+			id,
+			x: absoluteX,
+			y: absoluteY
+		}];
+	});
+}
+let elk = null;
+/**
+* ELK, loaded on first use. The import has to be this one rather than a static
+* one, because a static import is evaluated before any statement in its own
+* module and the realm above would then be stubbed too late to be read.
+*/
+function loadElk() {
+	elk ??= import("elkjs/lib/elk.bundled.js").then(({ default: ELKConstructor }) => new ELKConstructor({ algorithms: ELK_ALGORITHMS }));
+	return elk;
+}
+/**
+* Places tables by an ELK algorithm, off the thread that asked for it. What
+* comes back is a corner per table and nothing else, because the editor routes
+* its own relationship lines and drops the sections ELK computed for them.
+*/
+var ElkLayoutService = class {
+	/**
+	* Loading ELK at all is what proves this realm can run it. A shared worker
+	* that throws while evaluating reports it to the console and to nobody else:
+	* its port stays open and every call after it hangs.
+	*/
+	async ready() {
+		await loadElk();
+		return true;
+	}
+	async layout(request) {
+		return toAbsolutePoints((await (await loadElk()).layout(toElkGraph(request))).children ?? [], 0, 0);
+	}
+};
+//#endregion
+//#region src/services/elk-layout/elkLayout.shared-worker.ts
+const service = new ElkLayoutService();
+self.onconnect = (event) => {
+	const port = event.ports[0];
+	Comlink.expose(service, port);
+};
+//#endregion

package/dist/workers/elkLayout.spawn.d.ts

@@ -0,0 +1,3 @@
+/** Where the ELK worker is constructed, as exportPng.spawn.ts constructs its own. */
+export declare function spawnElkLayoutWorker(name: string): SharedWorker;
+//# sourceMappingURL=elkLayout.spawn.d.ts.map

package/dist/workers/elkLayout.spawn.inline.d.ts

@@ -0,0 +1,3 @@
+/** The umd builds' twin of elkLayout.spawn.ts, as exportPng.spawn.inline.ts is its own's. */
+export declare function spawnElkLayoutWorker(name: string): SharedWorker;
+//# sourceMappingURL=elkLayout.spawn.inline.d.ts.map

package/dist/workers/elkLayout.spawn.js

@@ -0,0 +1,9 @@
+//#region src/workers/elkLayout.spawn.ts
+function spawnElkLayoutWorker(name) {
+	return new SharedWorker(new URL("./elkLayout.shared-worker.js", import.meta.url), {
+		type: "module",
+		name
+	});
+}
+//#endregion
+export { spawnElkLayoutWorker };