@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/canvas/memo/memo-sash/MemoSash.js

@@ -0,0 +1,190 @@
+import "../../../../../constants/layout.js";
+import { onUnmounted } from "../../../../../r-html/dist/render/part/node/component/hooks.js";
+import { DirectionName } from "../../../../../utils/draw-relationship/index.js";
+import { isMemoShown } from "../../../../../utils/memo.js";
+import { resizeMemoAction } from "../../../../../engine/modules/memo/atom.actions.js";
+import { useAppContext } from "../../../../appContext.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+import { isMainButtonPress, isMouseEvent, isMultiTouch } from "../../../../../utils/domEvent.js";
+import { HIT_FILL, createSceneCursorScope, holdSceneCursor } from "../../sceneTokens.js";
+import { drag$ } from "../../../../../utils/globalEventObservable.js";
+//#region src/components/erd/canvas/memo/memo-sash/MemoSash.tsx
+var MemoSashPosition = {
+	left: "left",
+	right: "right",
+	bottom: "bottom",
+	lt: "lt",
+	rt: "rt",
+	lb: "lb",
+	rb: "rb"
+};
+var SashShape = {
+	vertical: "vertical",
+	horizontal: "horizontal",
+	edge: "edge"
+};
+var CURSORS = {
+	left: "ew-resize",
+	right: "ew-resize",
+	bottom: "ns-resize",
+	lt: "nwse-resize",
+	rt: "nesw-resize",
+	lb: "nesw-resize",
+	rb: "nwse-resize"
+};
+var createSash = (top, left) => [
+	{
+		shape: SashShape.vertical,
+		position: MemoSashPosition.left
+	},
+	{
+		shape: SashShape.vertical,
+		position: MemoSashPosition.right,
+		left
+	},
+	{
+		shape: SashShape.horizontal,
+		position: MemoSashPosition.bottom,
+		top
+	},
+	{
+		shape: SashShape.edge,
+		position: MemoSashPosition.lt
+	},
+	{
+		shape: SashShape.edge,
+		position: MemoSashPosition.rt,
+		left
+	},
+	{
+		shape: SashShape.edge,
+		position: MemoSashPosition.lb,
+		top
+	},
+	{
+		shape: SashShape.edge,
+		position: MemoSashPosition.rb,
+		top,
+		left
+	}
+];
+var centerTop = ({ shape, top = 0 }) => top === 0 && shape === SashShape.vertical ? top : top - 5 / 2;
+var centerLeft = ({ shape, left = 0 }) => left === 0 && shape === SashShape.horizontal ? left : left - 5 / 2;
+var pointerOf = (event) => isMouseEvent(event.evt) ? {
+	x: event.evt.clientX,
+	y: event.evt.clientY
+} : {
+	x: event.evt.touches[0]?.clientX ?? 0,
+	y: event.evt.touches[0]?.clientY ?? 0
+};
+var MemoSash = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const cursor = createSceneCursorScope();
+	let gesture = null;
+	onUnmounted(() => {
+		gesture?.unsubscribe();
+		cursor.release();
+	});
+	let clientX = 0;
+	let clientY = 0;
+	const resizeWidth = ({ movementX, x }, direction) => {
+		const { zoomLevel } = app.value.store.state.settings;
+		const ui = Object.assign({ change: false }, props.memo.ui);
+		const movement = movementX / zoomLevel;
+		const width = direction === DirectionName.left ? ui.width - movement : ui.width + movement;
+		if (116 < width && (movementX < 0 ? x < clientX : x > clientX)) {
+			if (direction === DirectionName.left) ui.x += movement;
+			clientX += movementX;
+			ui.width = width;
+			ui.change = true;
+		}
+		return ui;
+	};
+	const resizeHeight = ({ movementY, y }, direction) => {
+		const { zoomLevel } = app.value.store.state.settings;
+		const ui = Object.assign({ change: false }, props.memo.ui);
+		const movement = movementY / zoomLevel;
+		const height = direction === DirectionName.top ? ui.height - movement : ui.height + movement;
+		if (100 < height && (movementY < 0 ? y < clientY : y > clientY)) {
+			if (direction === DirectionName.top) ui.y += movement;
+			clientY += movementY;
+			ui.height = height;
+			ui.change = true;
+		}
+		return ui;
+	};
+	const handleMove = (dragMove, position) => {
+		dragMove.event.type === "mousemove" && dragMove.event.preventDefault();
+		const { store } = app.value;
+		let verticalUI = null;
+		let horizontalUI = null;
+		switch (position) {
+			case MemoSashPosition.left:
+			case MemoSashPosition.right:
+				verticalUI = resizeWidth(dragMove, position);
+				break;
+			case MemoSashPosition.bottom:
+				horizontalUI = resizeHeight(dragMove, DirectionName.bottom);
+				break;
+			case MemoSashPosition.lt:
+				verticalUI = resizeWidth(dragMove, DirectionName.left);
+				horizontalUI = resizeHeight(dragMove, DirectionName.top);
+				break;
+			case MemoSashPosition.rt:
+				verticalUI = resizeWidth(dragMove, DirectionName.right);
+				horizontalUI = resizeHeight(dragMove, DirectionName.top);
+				break;
+			case MemoSashPosition.lb:
+				verticalUI = resizeWidth(dragMove, DirectionName.left);
+				horizontalUI = resizeHeight(dragMove, DirectionName.bottom);
+				break;
+			case MemoSashPosition.rb:
+				verticalUI = resizeWidth(dragMove, DirectionName.right);
+				horizontalUI = resizeHeight(dragMove, DirectionName.bottom);
+		}
+		if (!verticalUI?.change && !horizontalUI?.change) return;
+		const { id, ui } = props.memo;
+		const vertical = verticalUI?.change ? verticalUI : ui;
+		const horizontal = horizontalUI?.change ? horizontalUI : ui;
+		store.dispatch(resizeMemoAction({
+			id,
+			x: vertical.x,
+			y: horizontal.y,
+			width: vertical.width,
+			height: horizontal.height
+		}));
+	};
+	const handleMoveStart = (event, position) => {
+		if (!isMainButtonPress(event.evt) || isMultiTouch(event.evt)) return;
+		const pointer = pointerOf(event);
+		clientX = pointer.x;
+		clientY = pointer.y;
+		gesture?.unsubscribe();
+		const release = holdSceneCursor(event, CURSORS[position]);
+		const subscription = drag$.subscribe((dragMove) => {
+			const { state } = app.value.store;
+			if (!isMemoShown(state) || !state.doc.memoIds.includes(props.memo.id)) {
+				subscription.unsubscribe();
+				return;
+			}
+			handleMove(dragMove, position);
+		});
+		subscription.add(release);
+		gesture = subscription;
+	};
+	return () => {
+		const spanWidth = props.left - 2;
+		const spanHeight = props.top - 2;
+		return konva`${createSash(props.top, props.left).map((sash) => konva`<k-rect name=${`memo-sash memo-sash-${sash.position}`} kind="sash" x=${centerLeft(sash)} y=${centerTop(sash)} width=${sash.shape === SashShape.horizontal ? spanWidth : 5} height=${sash.shape === SashShape.vertical ? spanHeight : 5} fill=${HIT_FILL} @mousedown=${(event) => {
+			handleMoveStart(event, sash.position);
+		}} @touchstart=${(event) => {
+			handleMoveStart(event, sash.position);
+		}} @mouseenter=${(event) => {
+			cursor.set(event, CURSORS[sash.position]);
+		}} @mouseleave=${(event) => {
+			cursor.set(event, "");
+		}} />`)}`;
+	};
+};
+//#endregion
+export { MemoSashPosition, MemoSash as default };

package/dist/components/erd/canvas/memo/memoCaret.js

@@ -0,0 +1,66 @@
+import { MEMO_FONT, getMemoLineHeightPx, layoutMemoLines } from "./memoText.js";
+//#region src/components/erd/canvas/memo/memoCaret.ts
+function createMeasure() {
+	const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	if (!context) return () => 0;
+	context.font = MEMO_FONT;
+	return (text) => context.measureText(text).width;
+}
+var measure = null;
+function widthOf(text) {
+	measure ??= createMeasure();
+	return measure(text);
+}
+function editorValueOf(value) {
+	return value.replace(/\r\n?/g, "\n");
+}
+function foldOf(value, width) {
+	const lines = [];
+	let at = 0;
+	for (const text of layoutMemoLines(value, width)) {
+		const start = at;
+		at += text.length;
+		if (value[at] === "\n") at += 1;
+		lines.push({
+			text,
+			start
+		});
+	}
+	return lines;
+}
+function columnOf(line, x) {
+	let best = 0;
+	let gap = Math.abs(x);
+	let prefix = "";
+	for (const char of Array.from(line.text)) {
+		prefix += char;
+		const distance = Math.abs(x - widthOf(prefix));
+		if (distance > gap) break;
+		best = prefix.length;
+		gap = distance;
+	}
+	return best;
+}
+function memoCaretOffsetAt(value, width, x, y) {
+	const text = editorValueOf(value);
+	const lines = foldOf(text, width);
+	if (!lines.length) return 0;
+	const index = Math.max(0, Math.floor(y / getMemoLineHeightPx()));
+	if (index >= lines.length) return text.length;
+	const line = lines[index];
+	return line.start + columnOf(line, x);
+}
+var requested = null;
+function requestMemoCaret(memoId, offset) {
+	requested = {
+		memoId,
+		offset
+	};
+}
+function takeMemoCaret(memoId) {
+	const caret = requested;
+	requested = null;
+	return caret?.memoId === memoId ? caret.offset : 0;
+}
+//#endregion
+export { memoCaretOffsetAt, requestMemoCaret, takeMemoCaret };

package/dist/components/erd/canvas/memo/memoScroll.js

@@ -0,0 +1,14 @@
+import { getMemoLineHeightPx, layoutMemoLines } from "./memoText.js";
+//#region src/components/erd/canvas/memo/memoScroll.ts
+function getMemoScrollMax(memo) {
+	const lines = layoutMemoLines(memo.value, memo.ui.width).length;
+	return Math.max(0, lines * getMemoLineHeightPx() - memo.ui.height);
+}
+function clampMemoScrollTop(memo, scrollTop) {
+	return Math.min(Math.max(0, scrollTop), getMemoScrollMax(memo));
+}
+function getMemoScrollTop(editor, memo) {
+	return clampMemoScrollTop(memo, editor.memoScrollTopMap[memo.id] ?? 0);
+}
+//#endregion
+export { clampMemoScrollTop, getMemoScrollMax, getMemoScrollTop };

package/dist/components/erd/canvas/memo/memoText.js

@@ -0,0 +1,41 @@
+import { SCENE_FONT_FAMILY, SCENE_FONT_SIZE } from "../sceneTokens.js";
+import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
+var MEMO_FONT = `400 ${SCENE_FONT_SIZE}px ${SCENE_FONT_FAMILY}`;
+var FALLBACK_LINE_HEIGHT_PX = SCENE_FONT_SIZE * 1.2;
+var LEADING_PROBE_LINES = 10;
+var memoLineHeightPx = null;
+function getMemoLineHeightPx() {
+	if (memoLineHeightPx !== null) return memoLineHeightPx;
+	if (typeof document === "undefined" || !document.body) return FALLBACK_LINE_HEIGHT_PX;
+	const probe = document.createElement("div");
+	probe.setAttribute("aria-hidden", "true");
+	probe.style.cssText = `position:absolute;visibility:hidden;top:-10000px;left:0;margin:0;padding:0;border:0;font:${MEMO_FONT};line-height:normal;white-space:pre`;
+	probe.textContent = Array.from({ length: LEADING_PROBE_LINES }, () => "M").join("\n");
+	document.body.append(probe);
+	const height = probe.getBoundingClientRect().height;
+	probe.remove();
+	memoLineHeightPx = height / LEADING_PROBE_LINES || FALLBACK_LINE_HEIGHT_PX;
+	return memoLineHeightPx;
+}
+function getMemoLineHeight() {
+	return getMemoLineHeightPx() / SCENE_FONT_SIZE;
+}
+var LAYOUT_OPTIONS = {
+	whiteSpace: "pre-wrap",
+	wordBreak: "normal"
+};
+var CACHE_LIMIT = 256;
+var lineCache = /* @__PURE__ */ new Map();
+function layoutMemoLines(value, width) {
+	const key = `${width} ${value}`;
+	const cached = lineCache.get(key);
+	if (cached) return cached;
+	const prepared = prepareWithSegments(value, MEMO_FONT, LAYOUT_OPTIONS);
+	const { lines } = layoutWithLines(prepared, width, getMemoLineHeightPx());
+	const folded = lines.map((line) => line.text);
+	if (lineCache.size >= CACHE_LIMIT) lineCache.clear();
+	lineCache.set(key, folded);
+	return folded;
+}
+//#endregion
+export { MEMO_FONT, getMemoLineHeight, getMemoLineHeightPx, layoutMemoLines };

package/dist/components/erd/canvas/memo/useMoveMemo.js

@@ -0,0 +1,19 @@
+import { SelectType } from "../../../../engine/modules/editor/state.js";
+import { useMoveEntity } from "../useMoveEntity.js";
+//#region src/components/erd/canvas/memo/useMoveMemo.ts
+var BLOCKED_KINDS = [
+	"memo-header-color",
+	"memo-textarea",
+	"icon",
+	"sash"
+];
+function useMoveMemo(ctx, props, source) {
+	return useMoveEntity(ctx, {
+		entityId: () => props.memo.id,
+		selectType: SelectType.memo,
+		blockedKinds: () => BLOCKED_KINDS,
+		source
+	});
+}
+//#endregion
+export { useMoveMemo };

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

@@ -0,0 +1,33 @@
+import { isMiddleButtonPress, preventMiddleLift } from "../../../utils/domEvent.js";
+import { CURSOR_GRABBING, holdStageCursor } from "../../../utils/stageCursor.js";
+import { forwardMoveStartEvent } from "../../../utils/internalEvents.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { noop } from "es-toolkit";
+//#region src/components/erd/canvas/middleButtonPan.ts
+function listenMiddleButtonPan(container, onMove, onPress = noop) {
+	const handleMousedown = (event) => {
+		if (!isMiddleButtonPress(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onPress();
+		container.dispatchEvent(forwardMoveStartEvent({ originEvent: event }));
+		const pan = drag$.subscribe(onMove);
+		pan.add(preventMiddleLift());
+		pan.add(holdStageCursor(container, CURSOR_GRABBING));
+		const handleMouseup = (lift) => {
+			if (!isMiddleButtonPress(lift)) return;
+			lift.stopPropagation();
+			pan.unsubscribe();
+		};
+		container.addEventListener("mouseup", handleMouseup, true);
+		pan.add(() => {
+			container.removeEventListener("mouseup", handleMouseup, true);
+		});
+	};
+	container.addEventListener("mousedown", handleMousedown, true);
+	return () => {
+		container.removeEventListener("mousedown", handleMousedown, true);
+	};
+}
+//#endregion
+export { listenMiddleButtonPan };

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

@@ -0,0 +1,23 @@
+//#region src/components/erd/canvas/mixColor.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function channelsOf(color) {
+	const match = HEX.exec(color.trim());
+	if (!match) return null;
+	const digits = match[1];
+	const hex = digits.length === 6 ? digits : [...digits].map((digit) => `${digit}${digit}`).join("");
+	return [
+		0,
+		2,
+		4
+	].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+}
+function mixColor(from, to, t) {
+	if (!(t > 0)) return from;
+	if (t >= 1) return to;
+	const start = channelsOf(from);
+	const end = channelsOf(to);
+	if (!start || !end) return t < .5 ? from : to;
+	return `#${start.map((value, index) => Math.round(value + (end[index] - value) * t)).map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+//#endregion
+export { mixColor };

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

@@ -0,0 +1,43 @@
+import { Ref } from '@dineug/r-html';
+import { AppContext } from '../../appContext';
+import { SceneHit } from '../hitTest';
+import { RootState } from '../../../engine/state';
+export type ViewPressOptions = {
+    /** The view's own app, whose store a press pans and whose editor id it lights in. */
+    app: AppContext;
+    /** The view's root, whose text a pan keeps from being selected. */
+    root: Ref<HTMLDivElement>;
+    /** The stage container, the one part of the view a press pans and lights from. */
+    canvas: Ref<HTMLDivElement>;
+    /** Whether a pinch takes the press, a second finger's, which then never pans. */
+    pinches: (event: MouseEvent | TouchEvent) => boolean;
+    /**
+     * Whether a finger pans before the root holds the focus, as on a root that
+     * holds every touch from the start; false if unset, leaving it to the page.
+     */
+    pansBeforeFocus?: boolean;
+};
+export type ViewPress = {
+    /** Whether a pan has travelled past a click, which the root shows a grabbing cursor for. */
+    state: {
+        panning: boolean;
+    };
+    /** A press on the view's root: a pan, and a light set or put out where it stood still. */
+    handlePress: (event: MouseEvent | TouchEvent) => void;
+    /** The entity the pointer came onto: a table lights its relationships while it is there. */
+    handleHover: (hit: SceneHit | null) => void;
+    /** Puts out what a press and the pointer lit, for a document that replaces the one they stood on. */
+    reset: () => void;
+    /** Ends a press still held and its pan, landing no still press, for a host that stops reading mid press. */
+    cancel: () => void;
+    destroy: () => void;
+};
+/** The relationships either end of which stands on the table, in the document's order. */
+export declare function tableRelationshipIds({ doc, collections }: RootState, tableId: string): string[];
+/**
+ * The press rule of the read-only view and a readonly ERD tab: a main press, and
+ * a finger once the root holds the focus or at once with pansBeforeFocus, pans;
+ * one held still drops a jump's selection and lights a relationship or a table's.
+ */
+export declare function createViewPress({ app, root, canvas, pinches, pansBeforeFocus, }: ViewPressOptions): ViewPress;
+//# sourceMappingURL=readPress.d.ts.map

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

@@ -0,0 +1,102 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { streamScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { unselectAllAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { isMainButtonPress, isMouseEvent, suppressSelection } from "../../../utils/domEvent.js";
+import { sceneHit } from "../hitTest.js";
+import { move$, moveEnd$ } from "../../../utils/globalEventObservable.js";
+import { setRelationshipHighlights } from "../relationshipHighlight.js";
+import { takeUntil, tap } from "rxjs";
+//#region src/components/erd/canvas/readPress.ts
+function tableRelationshipIds({ doc, collections }, tableId) {
+	return query(collections).collection("relationshipEntities").selectByIds(doc.relationshipIds).filter(({ start, end }) => start.tableId === tableId || end.tableId === tableId).map(({ id }) => id);
+}
+function createViewPress({ app, root, canvas, pinches, pansBeforeFocus = false }) {
+	const state = observable({ panning: false });
+	let pinned = [];
+	let hovered = [];
+	let hoveredTableId = null;
+	let pan = null;
+	const light = () => {
+		setRelationshipHighlights(app.store.state.editor.id, [...pinned, ...hovered]);
+	};
+	const lightsOf = (hit) => {
+		if (hit?.kind === "table") return tableRelationshipIds(app.store.state, hit.id);
+		return hit?.kind === "relationship" ? [hit.id] : [];
+	};
+	const handleHover = (hit) => {
+		const tableId = hit?.kind === "table" ? hit.id : null;
+		if (tableId === hoveredTableId) return;
+		hoveredTableId = tableId;
+		hovered = tableId ? tableRelationshipIds(app.store.state, tableId) : [];
+		light();
+	};
+	const holdsFocus = () => Boolean(root.value?.matches(":focus-within"));
+	const takeFocus = () => {
+		if (!holdsFocus()) root.value?.focus({ preventScroll: true });
+	};
+	const handleStill = (hit) => {
+		takeFocus();
+		app.store.dispatch(unselectAllAction$());
+		pinned = lightsOf(hit);
+		light();
+	};
+	const reset = () => {
+		pinned = [];
+		hovered = [];
+		hoveredTableId = null;
+		light();
+	};
+	const endPan = () => {
+		pan?.unsubscribe();
+		pan = null;
+		state.panning = false;
+	};
+	const handlePress = (event) => {
+		const target = event.target;
+		const $canvas = canvas.value;
+		if (!(target instanceof Node) || !$canvas?.contains(target)) return;
+		if (pinches(event)) {
+			endPan();
+			return;
+		}
+		if (!isMainButtonPress(event)) return;
+		const hit = sceneHit($canvas, event);
+		const pans = isMouseEvent(event) || pansBeforeFocus || holdsFocus();
+		let travel = 0;
+		let lifted = false;
+		endPan();
+		const until$ = moveEnd$.pipe(tap(({ type }) => {
+			lifted = type === "touchend";
+		}));
+		const subscription = move$.pipe(takeUntil(until$)).subscribe({
+			next: ({ event: move, movementX, movementY }) => {
+				move.type === "mousemove" && move.preventDefault();
+				if (movementX === 0 && movementY === 0) return;
+				travel += Math.abs(movementX) + Math.abs(movementY);
+				if (!pans) return;
+				if (travel >= 4) state.panning = true;
+				app.store.dispatch(streamScrollToAction({
+					movementX,
+					movementY
+				}));
+			},
+			complete: () => {
+				state.panning = false;
+				if (travel < 4 && (pans || lifted)) handleStill(hit);
+			}
+		});
+		subscription.add(suppressSelection(root.value));
+		pan = subscription;
+	};
+	return {
+		state,
+		handlePress,
+		handleHover,
+		reset,
+		cancel: endPan,
+		destroy: endPan
+	};
+}
+//#endregion
+export { createViewPress, tableRelationshipIds };

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

@@ -0,0 +1,26 @@
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { relationshipStrokeWidth } from "../../../../utils/draw-relationship/index.js";
+import { isRelationshipVisible } from "../../../../konva/scene/viewport.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import Relationship from "./relationship/Relationship.js";
+import RelationshipActionLabel from "./relationship/RelationshipActionLabel.js";
+//#region src/components/erd/canvas/relationship-group/RelationshipGroup.tsx
+var RelationshipGroup = (props, ctx) => {
+	const sourceRef = useSceneSource(ctx);
+	const hovered = observable({ id: "" });
+	const handleHover = (id, hover) => {
+		if (hover) hovered.id = id;
+		else if (hovered.id === id) hovered.id = "";
+	};
+	return () => {
+		const { relationships, viewport, litIds } = props;
+		const source = sourceRef.value;
+		const strokeWidth = props.strokeWidth ?? relationshipStrokeWidth(source);
+		const visible = viewport ? relationships.filter((relationship) => isRelationshipVisible(viewport, relationship, strokeWidth, source)) : relationships;
+		return konva`<k-group name="relationship-group" kind="relationship-group">${repeat(visible, (relationship) => relationship.id, (relationship) => konva`<${Relationship} .relationship=${relationship} .strokeWidth=${strokeWidth} .lit=${litIds?.has(relationship.id) ?? false} .onHover=${handleHover} />`)}${repeat(visible, (relationship) => relationship.id, (relationship) => konva`<${RelationshipActionLabel} .relationship=${relationship} .hovered=${hovered} />`)}</k-group>`;
+	};
+};
+//#endregion
+export { RelationshipGroup as default };