@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/canvas/relationship-group/relationship/Relationship.js

@@ -0,0 +1,153 @@
+import { Direction, StartRelationshipType } from "../../../../../constants/schema.js";
+import { onUnmounted } from "../../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../../r-html/dist/observable/index.js";
+import { getAnchors } from "../../../../../utils/draw-relationship/index.js";
+import { getSceneTransform } from "../../../../../konva/scene/viewport.js";
+import { hoverColumnMapAction } from "../../../../../engine/modules/editor/atom.actions.js";
+import { referentialActionTitle } from "../../../../../utils/referentialAction.js";
+import { useAppContext } from "../../../../appContext.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../../themeContext.js";
+import { useDiffMap } from "../../../../diffContext.js";
+import { useSceneSource } from "../../../../sceneSourceContext.js";
+import { diffOutline } from "../../../../../utils/diff/diff.js";
+import { progressOf, transitionKey, transitionTo } from "../../highlightTransition.js";
+import { mixColor } from "../../mixColor.js";
+import { isRelationshipHighlighted } from "../../../relationshipHighlight.js";
+import { getRelationshipPath, toPathD } from "../../../../../utils/draw-relationship/pathFinding.js";
+import { decorationLine, decorationRing, relationshipShape } from "./Relationship.template.js";
+//#region src/components/erd/canvas/relationship-group/relationship/Relationship.tsx
+var ROUTE_DASH = [10, 10];
+var ROUTE_SOLID = [];
+function anchorAxes({ direction }) {
+	const outward = direction === Direction.left || direction === Direction.top ? -1 : 1;
+	return direction === Direction.left || direction === Direction.right ? {
+		along: {
+			x: outward,
+			y: 0
+		},
+		across: {
+			x: 0,
+			y: 1
+		}
+	} : {
+		along: {
+			x: 0,
+			y: outward
+		},
+		across: {
+			x: 1,
+			y: 0
+		}
+	};
+}
+function anchorPoint({ x, y }, { along, across }, out, side) {
+	return {
+		x: x + along.x * out + across.x * side,
+		y: y + along.y * out + across.y * side
+	};
+}
+function circleD({ x, y }, radius) {
+	return `M${x - radius} ${y}A${radius} ${radius} 0 0 1 ${x + radius} ${y}A${radius} ${radius} 0 0 1 ${x - radius} ${y}`;
+}
+function anchorMarkersD(point) {
+	const axes = anchorAxes(point);
+	const at = (out, side) => anchorPoint(point, axes, out, side);
+	const tip = at(9, 0);
+	return [
+		toPathD([[at(9, -6), at(9, 6)]]),
+		toPathD([[at(15, -6), at(15, 6)]]),
+		toPathD([[tip, at(0, 6)]]),
+		toPathD([[tip, at(0, -6)]]),
+		circleD(at(15, 0), 5)
+	].join("");
+}
+function toHitPathD({ start, end }, { line }, segments) {
+	return `${toPathD([
+		[{
+			x: start.x,
+			y: start.y
+		}, {
+			x: line.start.x2,
+			y: line.start.y2
+		}],
+		...segments,
+		[{
+			x: line.end.x2,
+			y: line.end.y2
+		}, {
+			x: end.x,
+			y: end.y
+		}]
+	])}${anchorMarkersD(start)}${anchorMarkersD(end)}`;
+}
+function hitBandWidth(zoomLevel) {
+	return 8 / (zoomLevel > 0 ? zoomLevel : 1);
+}
+var Relationship = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const diffMapRef = useDiffMap(ctx);
+	const state = observable({ hover: false });
+	let titled = null;
+	const writeTitle = () => {
+		const title = referentialActionTitle(props.relationship);
+		title ? titled?.setAttribute("title", title) : titled?.removeAttribute("title");
+	};
+	const clearTitle = () => {
+		titled?.removeAttribute("title");
+		titled = null;
+	};
+	const showTitle = (event) => {
+		if (sourceRef.value !== "document") return;
+		titled = event.target.getStage()?.container() ?? null;
+		writeTitle();
+	};
+	onUnmounted(clearTitle);
+	const handleMouseenter = (event) => {
+		const { relationship } = props;
+		const { store } = app.value;
+		state.hover = true;
+		props.onHover?.(relationship.id, true);
+		showTitle(event);
+		store.dispatch(hoverColumnMapAction({ columnIds: [...relationship.start.columnIds, ...relationship.end.columnIds] }));
+	};
+	const handleMouseleave = () => {
+		const { store } = app.value;
+		state.hover = false;
+		props.onHover?.(props.relationship.id, false);
+		clearTitle();
+		store.dispatch(hoverColumnMapAction({ columnIds: [] }));
+	};
+	return () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		const { relationship, strokeWidth } = props;
+		const theme = themeRef.value;
+		const source = sourceRef.value;
+		const { zoomLevel } = getSceneTransform(store.state, source);
+		const anchors = getAnchors(relationship, source);
+		const relationshipPath = getRelationshipPath(relationship, source);
+		const { path, line } = relationshipPath;
+		const lines = path.path.d();
+		const view = source !== "document";
+		const mapHover = Boolean(editor.hoverRelationshipMap[relationship.id]);
+		const jumped = !view && isRelationshipHighlighted(editor.id, relationship.id);
+		const hover = state.hover || mapHover || jumped;
+		const base = view ? theme.visualizationRelationship : relationship.identification ? theme.keyPFK : theme.keyFK;
+		const unlit = hover ? theme.relationshipHover : diffOutline(theme, diffMapRef.value?.get(relationship.id)) ?? base;
+		const litKey = transitionKey(editor.id, "relationship", relationship.id);
+		let litProgress = 0;
+		if (view) {
+			transitionTo(litKey, props.lit ? 1 : 0);
+			litProgress = progressOf(litKey);
+		}
+		const stroke = mixColor(unlit, theme.accentColor9, litProgress);
+		const shape = relationshipShape(relationship.relationshipType, relationshipPath, stroke, strokeWidth);
+		if (titled) writeTitle();
+		return konva`<k-group name=${`relationship ${relationship.id}`} kind="relationship" @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave}><k-path name="relationship-hit-area" kind="relationship-hit-area" data=${toHitPathD(anchors, path, lines)} hitStrokeWidth=${hitBandWidth(zoomLevel)} lineCap="round" /><k-path name="relationship-route" kind="relationship-route" data=${toPathD(lines)} dash=${view || relationship.identification ? ROUTE_SOLID : ROUTE_DASH} stroke=${stroke} strokeWidth=${strokeWidth} listening=${false} />${decorationLine(path.line.start, stroke, strokeWidth)}${decorationLine(line.line.start.base, stroke, strokeWidth)}${relationship.startRelationshipType === StartRelationshipType.ring ? konva`${decorationRing(line.startCircle, stroke, strokeWidth)}${decorationLine(line.line.start.center, stroke, strokeWidth)}` : konva`${decorationLine(line.line.start.base2, stroke, strokeWidth)}${decorationLine(line.line.start.center2, stroke, strokeWidth)}`}${shape}</k-group>`;
+	};
+};
+//#endregion
+export { Relationship as default };

package/dist/components/erd/canvas/relationship-group/relationship/Relationship.template.js

@@ -0,0 +1,75 @@
+import { RelationshipType } from "../../../../../constants/schema.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+//#region src/components/erd/canvas/relationship-group/relationship/Relationship.template.tsx
+var DECORATION = "relationship-decoration";
+var segment = ({ x1, y1, x2, y2 }) => [
+	x1,
+	y1,
+	x2,
+	y2
+];
+function decorationLine(points, stroke, strokeWidth) {
+	return konva`<k-line name=${DECORATION} kind=${DECORATION} points=${segment(points)} stroke=${stroke} strokeWidth=${strokeWidth} listening=${false} />`;
+}
+function decorationRing({ cx, cy }, stroke, strokeWidth) {
+	return konva`<k-circle name=${DECORATION} kind=${DECORATION} x=${cx} y=${cy} radius=${5} stroke=${stroke} strokeWidth=${strokeWidth} listening=${false} />`;
+}
+var endShapeMap = {
+	[1]: {
+		ring: true,
+		ticks: [
+			"base",
+			"left",
+			"center",
+			"right"
+		]
+	},
+	[RelationshipType.ZeroOne]: {
+		ring: true,
+		ticks: ["base", "center"]
+	},
+	[RelationshipType.ZeroN]: {
+		ring: true,
+		ticks: [
+			"left",
+			"center",
+			"right"
+		]
+	},
+	[RelationshipType.OneOnly]: {
+		ring: false,
+		ticks: [
+			"base",
+			"base2",
+			"center2"
+		]
+	},
+	[RelationshipType.OneN]: {
+		ring: false,
+		ticks: [
+			"base",
+			"left",
+			"center2",
+			"right"
+		]
+	},
+	[32]: {
+		ring: false,
+		ticks: ["base", "center2"]
+	},
+	[64]: {
+		ring: false,
+		ticks: [
+			"left",
+			"center2",
+			"right"
+		]
+	}
+};
+function relationshipShape(relationshipType, { path, line }, stroke, strokeWidth) {
+	const endShape = endShapeMap[relationshipType];
+	if (!endShape) return null;
+	return konva`${decorationLine(path.line.end, stroke, strokeWidth)}${endShape.ring ? decorationRing(line.circle, stroke, strokeWidth) : null}${endShape.ticks.map((tick) => decorationLine(line.line.end[tick], stroke, strokeWidth))}`;
+}
+//#endregion
+export { DECORATION, decorationLine, decorationRing, relationshipShape, segment };

package/dist/components/erd/canvas/relationship-group/relationship/RelationshipActionLabel.js

@@ -0,0 +1,68 @@
+import { Direction, Show } from "../../../../../constants/schema.js";
+import { isHighLevelTable } from "../../../../../utils/validation.js";
+import { bHas } from "../../../../../utils/bit.js";
+import { getAnchors } from "../../../../../utils/draw-relationship/index.js";
+import { getSceneTransform } from "../../../../../konva/scene/viewport.js";
+import { referentialActionLabel } from "../../../../../utils/referentialAction.js";
+import { useAppContext } from "../../../../appContext.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../../themeContext.js";
+import { SCENE_CODE_FONT_FAMILY } from "../../sceneTokens.js";
+import { useSceneSource } from "../../../../sceneSourceContext.js";
+import { isRelationshipHighlighted } from "../../../relationshipHighlight.js";
+var ACTION_LABEL_CHAR_WIDTH = 6.1;
+var ACTION_LABEL_PADDING = 2;
+var ACTION_LABEL_GAP = 3;
+function actionLabelBox(end, text) {
+	const { x, y, direction } = end;
+	const width = Math.ceil(text.length * ACTION_LABEL_CHAR_WIDTH) + 4;
+	const height = 14;
+	const clear = 6 + ACTION_LABEL_GAP;
+	const size = {
+		width,
+		height
+	};
+	switch (direction) {
+		case Direction.left: return {
+			x: x - ACTION_LABEL_GAP - width,
+			y: y - clear - height,
+			...size
+		};
+		case Direction.right: return {
+			x: x + ACTION_LABEL_GAP,
+			y: y - clear - height,
+			...size
+		};
+		case Direction.top: return {
+			x: x + clear,
+			y: y - ACTION_LABEL_GAP - height,
+			...size
+		};
+		default: return {
+			x: x + clear,
+			y: y + ACTION_LABEL_GAP,
+			...size
+		};
+	}
+}
+var RelationshipActionLabel = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	return () => {
+		const { store } = app.value;
+		const { editor, settings } = store.state;
+		const { relationship } = props;
+		const theme = themeRef.value;
+		const source = sourceRef.value;
+		const { zoomLevel } = getSceneTransform(store.state, source);
+		const text = source !== "document" || isHighLevelTable(zoomLevel) || bHas(settings.show, Show.hideReferentialAction) ? "" : referentialActionLabel(relationship);
+		if (!text) return null;
+		const hover = isRelationshipHighlighted(editor.id, relationship.id) || props.hovered?.id === relationship.id || Boolean(editor.hoverRelationshipMap[relationship.id]);
+		const base = relationship.identification ? theme.keyPFK : theme.keyFK;
+		const box = actionLabelBox(getAnchors(relationship, source).end, text);
+		return konva`<k-group name=${`relationship-action-label ${relationship.id}`} x=${box.x} y=${box.y} listening=${false}><k-rect name="relationship-action-box" width=${box.width} height=${box.height} fill=${theme.canvasBackground} /><k-text name="relationship-action-text" x=${ACTION_LABEL_PADDING} y=${ACTION_LABEL_PADDING} text=${text} fill=${hover ? theme.relationshipHover : base} fontFamily=${SCENE_CODE_FONT_FAMILY} fontSize=${10} wrap="none" /></k-group>`;
+	};
+};
+//#endregion
+export { actionLabelBox, RelationshipActionLabel as default };

package/dist/components/erd/canvas/sceneHit.js

@@ -0,0 +1,38 @@
+import { tableRowHeight } from "../../../utils/calcTable.js";
+import { ICON_VIEW_SIZE } from "./sceneTokens.js";
+import { getColumnTextY, getHeaderTextY } from "./table/cellLayout.js";
+//#region src/components/erd/canvas/sceneHit.ts
+function hitBox(context, shape, x, y, width, height) {
+	context.beginPath();
+	context.rect(x, y, width, height);
+	context.closePath();
+	context.fillShape(shape);
+}
+function columnCellHitOf(source) {
+	return (context, shape) => {
+		hitBox(context, shape, 0, -getColumnTextY(source), shape.width() + 8, tableRowHeight(source));
+	};
+}
+var columnCellHit = {
+	document: columnCellHitOf("document"),
+	flow: columnCellHitOf("flow")
+};
+function headerCellHitOf(source) {
+	const top = 0 - getHeaderTextY(source);
+	const height = source === "document" ? 24 : 24;
+	return (context, shape) => {
+		hitBox(context, shape, 0, top, shape.width() + 8, height);
+	};
+}
+var headerCellHit = {
+	document: headerCellHitOf("document"),
+	flow: headerCellHitOf("flow")
+};
+var columnDragHandleHit = (context, shape) => {
+	hitBox(context, shape, -4, -2, 24, 24);
+};
+var iconHit = (context, shape) => {
+	hitBox(context, shape, -shape.x(), -shape.y(), ICON_VIEW_SIZE, ICON_VIEW_SIZE);
+};
+//#endregion
+export { columnCellHit, columnDragHandleHit, headerCellHit, iconHit };

package/dist/components/erd/canvas/sceneKind.js

@@ -0,0 +1,12 @@
+//#region src/components/erd/canvas/sceneKind.ts
+function hasKindAncestor(node, kinds) {
+	let current = node ?? null;
+	while (current) {
+		const kind = current.getAttr("kind");
+		if (typeof kind === "string" && kinds.includes(kind)) return true;
+		current = current.getParent();
+	}
+	return false;
+}
+//#endregion
+export { hasKindAncestor };

package/dist/components/erd/canvas/sceneRetention.js

@@ -0,0 +1,20 @@
+function createRetentionPool({ perDrawn = 3, atLeast = 16 } = {}) {
+	const retained = /* @__PURE__ */ new Set();
+	let lastDrawn = /* @__PURE__ */ new Set();
+	return { retain(drawnIds, presentIds) {
+		for (const id of lastDrawn) if (!drawnIds.has(id) && presentIds.has(id)) {
+			retained.delete(id);
+			retained.add(id);
+		}
+		for (const id of retained) if (drawnIds.has(id) || !presentIds.has(id)) retained.delete(id);
+		const bound = Math.max(atLeast, perDrawn * drawnIds.size);
+		for (const id of retained) {
+			if (retained.size <= bound) break;
+			retained.delete(id);
+		}
+		lastDrawn = drawnIds;
+		return new Set(retained);
+	} };
+}
+//#endregion
+export { createRetentionPool };

package/dist/components/erd/canvas/sceneTokens.js

@@ -0,0 +1,110 @@
+import { ICON_VIEW_BOX } from "../../primitives/icon/icons.js";
+import { isMainButtonPress, isMouseEvent } from "../../../utils/domEvent.js";
+import { CodeFontFamily, TextFontFamily } from "../../../styles/fonts.styles.js";
+import { holdStageCursor, setStageCursor } from "../../../utils/stageCursor.js";
+import { noop } from "es-toolkit";
+//#region src/components/erd/canvas/sceneTokens.ts
+var mainButtonClick = (click) => (event) => {
+	if (isMainButtonPress(event.evt)) click(event);
+};
+var SCENE_FONT_FAMILY = TextFontFamily;
+var SCENE_CODE_FONT_FAMILY = CodeFontFamily;
+var SCENE_FONT_SIZE = 12;
+var sceneFontOf = (fontFamily) => `normal normal ${SCENE_FONT_SIZE}px ${fontFamily}`;
+sceneFontOf(SCENE_FONT_FAMILY);
+var SCENE_FONT_WEIGHT = "normal";
+var NO_SCENE_FONT_METRICS = {
+	ascent: 0,
+	descent: 0
+};
+var sceneFontMetrics = /* @__PURE__ */ new Map();
+function getSceneFontMetrics(fontFamily = SCENE_FONT_FAMILY) {
+	const held = sceneFontMetrics.get(fontFamily);
+	if (held) return held;
+	if (typeof document === "undefined") return NO_SCENE_FONT_METRICS;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return NO_SCENE_FONT_METRICS;
+	context.font = sceneFontOf(fontFamily);
+	const metrics = context.measureText("M");
+	const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+	const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+	if (!Number.isFinite(ascent) || !Number.isFinite(descent)) return NO_SCENE_FONT_METRICS;
+	const measured = {
+		ascent,
+		descent
+	};
+	sceneFontMetrics.set(fontFamily, measured);
+	return measured;
+}
+var HIGH_LEVEL_FONT_SIZES = [
+	20,
+	24,
+	28,
+	35,
+	60
+];
+var TABLE_INSET = 9;
+var COLUMN_DRAG_HANDLE_REST_OPACITY = .5;
+var FOCUS_BORDER_HEIGHT = 1.5;
+var VIEW_CARD_SHADOW_OPACITY = .4;
+function viewCardShadow(color) {
+	return {
+		color,
+		blur: 20,
+		offsetX: 0,
+		offsetY: 2,
+		opacity: VIEW_CARD_SHADOW_OPACITY
+	};
+}
+var VIEW_CARD_GLOW_OPACITY = .55;
+var TABLE_GROUP_FILL_OPACITY = .12;
+var TABLE_GROUP_TITLE_FONT_WEIGHT = "bold";
+var ICON_VIEW_SIZE = Number(ICON_VIEW_BOX.split(" ")[2]);
+var TRANSPARENT = "transparent";
+var HIT_FILL = TRANSPARENT;
+var NO_SHADOW = /* @__PURE__ */ new Set([
+	TRANSPARENT,
+	"none",
+	""
+]);
+function documentCardShadow(color) {
+	const value = (color ?? "").trim();
+	if (NO_SHADOW.has(value)) return null;
+	return {
+		color: value,
+		blur: 10,
+		offsetX: 0,
+		offsetY: 2,
+		opacity: 1
+	};
+}
+var CURSOR_POINTER = "pointer";
+var CURSOR_GRAB = "grab";
+var CURSOR_TEXT = "text";
+var sceneContainerOf = (event) => event.target?.getStage()?.container();
+function setSceneCursor(event, cursor) {
+	const container = sceneContainerOf(event);
+	if (container) setStageCursor(container, cursor);
+}
+function createSceneCursorScope() {
+	let container = null;
+	let current = "";
+	return {
+		set(event, cursor) {
+			container = sceneContainerOf(event) ?? container;
+			current = cursor;
+			if (container) setStageCursor(container, cursor);
+		},
+		release() {
+			if (container && current !== "") setStageCursor(container, "");
+			current = "";
+		}
+	};
+}
+function holdSceneCursor(event, cursor) {
+	const container = sceneContainerOf(event);
+	if (!container || !isMouseEvent(event.evt)) return noop;
+	return holdStageCursor(container, cursor);
+}
+//#endregion
+export { COLUMN_DRAG_HANDLE_REST_OPACITY, CURSOR_GRAB, CURSOR_POINTER, CURSOR_TEXT, FOCUS_BORDER_HEIGHT, HIGH_LEVEL_FONT_SIZES, HIT_FILL, ICON_VIEW_SIZE, SCENE_CODE_FONT_FAMILY, SCENE_FONT_FAMILY, SCENE_FONT_SIZE, SCENE_FONT_WEIGHT, TABLE_GROUP_FILL_OPACITY, TABLE_GROUP_TITLE_FONT_WEIGHT, TABLE_INSET, TRANSPARENT, VIEW_CARD_GLOW_OPACITY, VIEW_CARD_SHADOW_OPACITY, createSceneCursorScope, documentCardShadow, getSceneFontMetrics, holdSceneCursor, mainButtonClick, setSceneCursor, viewCardShadow };

package/dist/components/erd/canvas/shared-drag-select/SharedDragSelect.js

@@ -0,0 +1,35 @@
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { toSharedColor } from "../../../../utils/sharedColor.js";
+//#region src/components/erd/canvas/shared-drag-select/SharedDragSelect.tsx
+var STROKE_WIDTH = 1;
+var BACKGROUND_OPACITY = .08;
+var DASH = [3, 3];
+var SharedDragSelect = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ force: false });
+	const forceUpdate = () => {
+		state.force = !state.force;
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { editor: { sharedDragSelectTrackerMap } } = store.state;
+		addUnsubscribe(watch(sharedDragSelectTrackerMap).subscribe(forceUpdate));
+	});
+	return () => {
+		const { store } = app.value;
+		const { editor: { sharedDragSelectTrackerMap } } = store.state;
+		state.force;
+		return konva`${repeat(Object.values(sharedDragSelectTrackerMap), (tracker) => tracker.id, (tracker) => {
+			const color = toSharedColor(tracker.id);
+			return konva`<k-group id=${`shared-drag-select-${tracker.id}`} name="shared-drag-select" kind="shared-drag-select" x=${tracker.x} y=${tracker.y} listening=${false}><k-rect name="shared-drag-select-background" kind="shared-drag-select-background" width=${tracker.w} height=${tracker.h} fill=${color} opacity=${BACKGROUND_OPACITY} /><k-rect name="shared-drag-select-border" kind="shared-drag-select-border" width=${tracker.w} height=${tracker.h} stroke=${color} strokeWidth=${STROKE_WIDTH} dash=${DASH} /></k-group>`;
+		})}`;
+	};
+};
+//#endregion
+export { SharedDragSelect as default };

package/dist/components/erd/canvas/shared-mouse-tracker/SharedMouseTracker.js

@@ -0,0 +1,29 @@
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import SharedMouseCursor from "./shared-mouse-cursor/SharedMouseCursor.js";
+//#region src/components/erd/canvas/shared-mouse-tracker/SharedMouseTracker.tsx
+var SharedMouseTracker = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ force: false });
+	const forceUpdate = () => {
+		state.force = !state.force;
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { editor: { sharedMouseTrackerMap } } = store.state;
+		addUnsubscribe(watch(sharedMouseTrackerMap).subscribe(forceUpdate));
+	});
+	return () => {
+		const { store } = app.value;
+		const { editor: { sharedMouseTrackerMap } } = store.state;
+		state.force;
+		return konva`${repeat(Object.values(sharedMouseTrackerMap), (tracker) => tracker.id, (tracker) => konva`<${SharedMouseCursor} .tracker=${tracker} />`)}`;
+	};
+};
+//#endregion
+export { SharedMouseTracker as default };

package/dist/components/erd/canvas/shared-mouse-tracker/shared-mouse-cursor/SharedMouseCursor.js

@@ -0,0 +1,40 @@
+import { onMounted } from "../../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../../r-html/dist/observable/index.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+import { getIcon } from "../../../../primitives/icon/icons.js";
+import { ICON_VIEW_SIZE, SCENE_FONT_FAMILY } from "../../sceneTokens.js";
+import { animationFrames$ } from "../../../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../../../hooks/useUnmounted.js";
+import { toSharedColor } from "../../../../../utils/sharedColor.js";
+//#region src/components/erd/canvas/shared-mouse-tracker/shared-mouse-cursor/SharedMouseCursor.tsx
+var ICON_SIZE = 16;
+var NICKNAME_WIDTH = 84;
+var FONT_SIZE = 12;
+var ICON_SCALE = ICON_SIZE / ICON_VIEW_SIZE;
+function pointerPathData() {
+	const icon = getIcon("mouse-pointer-2");
+	if (!icon) return [];
+	return icon.node.filter(([tag]) => tag === "path").map(([, attrs]) => String(attrs.d ?? ""));
+}
+var POINTER_PATH_DATA = pointerPathData();
+var SharedMouseCursor = (props, ctx) => {
+	const state = observable({
+		x: props.tracker.x,
+		y: props.tracker.y
+	});
+	const { addUnsubscribe } = useUnmounted();
+	onMounted(() => {
+		addUnsubscribe(animationFrames$.subscribe(() => {
+			const { tracker } = props;
+			state.x += (tracker.x - state.x) * .05;
+			state.y += (tracker.y - state.y) * .05;
+		}));
+	});
+	return () => {
+		const { tracker: { id, nickname } } = props;
+		const color = toSharedColor(id);
+		return konva`<k-group id=${`shared-mouse-cursor-${id}`} name="shared-mouse-cursor" kind="shared-mouse-cursor" x=${state.x} y=${state.y} listening=${false}><k-group name="shared-mouse-cursor-icon" kind="shared-mouse-cursor-icon" scaleX=${ICON_SCALE} scaleY=${ICON_SCALE}>${POINTER_PATH_DATA.map((data) => konva`<k-path name="shared-mouse-cursor-pointer" kind="shared-mouse-cursor-pointer" data=${data} stroke=${color} strokeWidth=${2} lineCap="round" lineJoin="round" />`)}</k-group><k-text name="shared-mouse-cursor-nickname" kind="shared-mouse-cursor-nickname" text=${nickname} x=${ICON_SIZE} width=${NICKNAME_WIDTH} height=${ICON_SIZE} verticalAlign="middle" wrap="none" ellipsis=${true} fill=${color} fontFamily=${SCENE_FONT_FAMILY} fontSize=${FONT_SIZE} /></k-group>`;
+	};
+};
+//#endregion
+export { SharedMouseCursor as default };

package/dist/components/erd/canvas/stagePressScope.d.ts

@@ -0,0 +1,11 @@
+import { Stage } from 'konva/lib/Stage';
+/**
+ * Forgets the shapes a stage was last pressed and lifted on as a press starts
+ * anywhere else, so a click and a double click need their presses on this one:
+ * konva arms both on every stage of its copy, wherever the press landed.
+ *
+ * @example
+ * addUnsubscribe(scopeClicksToStage($stage));
+ */
+export declare function scopeClicksToStage(stage: Stage): () => void;
+//# sourceMappingURL=stagePressScope.d.ts.map

package/dist/components/erd/canvas/stagePressScope.js

@@ -0,0 +1,24 @@
+//#region src/components/erd/canvas/stagePressScope.ts
+var KIND_OF = {
+	mousedown: "mouse",
+	pointerdown: "pointer",
+	touchstart: "touch"
+};
+function scopeClicksToStage(stage) {
+	const view = stage.content.ownerDocument.defaultView ?? window;
+	const removes = Object.entries(KIND_OF).map(([type, kind]) => {
+		const forget = (event) => {
+			if (event.composedPath().includes(stage.content)) return;
+			Reflect.set(stage, `${kind}ClickStartShape`, void 0);
+			Reflect.set(stage, `${kind}ClickEndShape`, void 0);
+		};
+		view.addEventListener(type, forget, {
+			capture: true,
+			passive: true
+		});
+		return () => view.removeEventListener(type, forget, { capture: true });
+	});
+	return () => removes.forEach((remove) => remove());
+}
+//#endregion
+export { scopeClicksToStage };