@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/canvas/draw-relationship/DrawRelationship.js

@@ -0,0 +1,60 @@
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { drawRelationshipAction } from "../../../../engine/modules/editor/atom.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { segment } from "../relationship-group/relationship/Relationship.template.js";
+import { getDraw } from "../../../../utils/draw-relationship/draw.js";
+import { fromEvent } from "rxjs";
+import { stages } from "konva/lib/Stage";
+//#region src/components/erd/canvas/draw-relationship/DrawRelationship.tsx
+var PREVIEW_DASH = [10, 10];
+var DECORATION = "draw-relationship-decoration";
+var DrawRelationship = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ placed: false });
+	const placeAtPress = (stage) => {
+		const [pointer] = stage.getPointersPositions();
+		if (!pointer) return;
+		const container = stage.container().getBoundingClientRect();
+		const root = props.root.value.getBoundingClientRect();
+		state.placed = true;
+		app.value.store.dispatchSync(drawRelationshipAction({
+			x: pointer.x + container.x - root.x,
+			y: pointer.y + container.y - root.y
+		}));
+	};
+	onMounted(() => {
+		const $root = props.root.value;
+		const { store } = app.value;
+		const stage = stages.find((candidate) => candidate.container() === ctx.host);
+		stage && placeAtPress(stage);
+		addUnsubscribe(fromEvent($root, "mousemove").subscribe((event) => {
+			event.preventDefault();
+			const { x, y } = $root.getBoundingClientRect();
+			state.placed = true;
+			store.dispatch(drawRelationshipAction({
+				x: event.clientX - x,
+				y: event.clientY - y
+			}));
+		}));
+	});
+	return () => {
+		const { store } = app.value;
+		const { path, line } = getDraw(store.state, props.draw);
+		const stroke = themeRef.value.keyFK;
+		const decorations = [
+			path.line.start,
+			line.start.base,
+			line.start.base2,
+			line.start.center2
+		];
+		return konva`<k-group id="draw-relationship" name="draw-relationship" kind="draw-relationship" visible=${state.placed} listening=${false}><k-path name="draw-relationship-preview" kind="draw-relationship-preview" data=${path.path.d()} dash=${PREVIEW_DASH} stroke=${stroke} strokeWidth=${2} />${decorations.map((decoration) => konva`<k-line name=${DECORATION} kind=${DECORATION} points=${segment(decoration)} stroke=${stroke} strokeWidth=${2} />`)}</k-group>`;
+	};
+};
+//#endregion
+export { DrawRelationship as default };

package/dist/components/erd/canvas/duplicate-ghost/DuplicateGhost.js

@@ -0,0 +1,108 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { isHighLevelTable } from "../../../../utils/validation.js";
+import { onMounted, onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { SelectType } from "../../../../engine/modules/editor/state.js";
+import { duplicateAction$ } from "../../../../engine/modules/editor/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { drag$ } from "../../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import Memo from "../memo/Memo.js";
+import Table from "../table/Table.js";
+import { stackTablesAndMemos, stackedKey } from "../../../../konva/scene/stacking.js";
+import HighLevelTable from "../high-level-table/HighLevelTable.js";
+import { round } from "es-toolkit/compat";
+//#region src/components/erd/canvas/duplicate-ghost/DuplicateGhost.tsx
+var GHOST_OPACITY = .6;
+var DuplicateGhost = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({
+		tables: [],
+		memos: [],
+		ghostDx: 0,
+		ghostDy: 0
+	});
+	let subscription = null;
+	let unmounted = false;
+	onUnmounted(() => {
+		unmounted = true;
+	});
+	const clear = () => {
+		state.tables = [];
+		state.memos = [];
+		state.ghostDx = 0;
+		state.ghostDy = 0;
+	};
+	const cancel = () => {
+		subscription?.unsubscribe();
+		subscription = null;
+		clear();
+	};
+	const commit = () => {
+		if (unmounted || state.tables.length === 0 && state.memos.length === 0) return;
+		const { store } = app.value;
+		const { zoomLevel } = store.state.settings;
+		const { ghostDx, ghostDy } = state;
+		const tableIds = state.tables.map((table) => table.id);
+		const memoIds = state.memos.map((memo) => memo.id);
+		const dropped = (Math.abs(ghostDx) + Math.abs(ghostDy)) * zoomLevel >= 4;
+		clear();
+		store.dispatch(duplicateAction$({
+			tableIds,
+			memoIds,
+			offset: dropped ? {
+				x: round(ghostDx, 4),
+				y: round(ghostDy, 4)
+			} : {
+				x: 50,
+				y: 50
+			},
+			escapeCollision: !dropped
+		}));
+	};
+	const handleDragStart = (payload) => {
+		const { store } = app.value;
+		const { editor: { selectedMap }, collections } = store.state;
+		const selectedTableIds = [];
+		const selectedMemoIds = [];
+		if (payload) {
+			selectedTableIds.push(...payload.tableIds);
+			selectedMemoIds.push(...payload.memoIds);
+		} else for (const [id, selectType] of Object.entries(selectedMap)) if (selectType === SelectType.table) selectedTableIds.push(id);
+		else if (selectType === SelectType.memo) selectedMemoIds.push(id);
+		const tables = query(collections).collection("tableEntities").selectByIds(selectedTableIds);
+		const memos = query(collections).collection("memoEntities").selectByIds(selectedMemoIds);
+		if (tables.length === 0 && memos.length === 0) return;
+		subscription?.unsubscribe();
+		state.tables = tables;
+		state.memos = memos;
+		state.ghostDx = 0;
+		state.ghostDy = 0;
+		subscription = drag$.subscribe({
+			next: ({ movementX, movementY }) => {
+				const { zoomLevel } = app.value.store.state.settings;
+				state.ghostDx += movementX / zoomLevel;
+				state.ghostDy += movementY / zoomLevel;
+			},
+			complete: commit
+		});
+	};
+	onMounted(() => {
+		const { emitter } = app.value;
+		addUnsubscribe(emitter.on({
+			duplicateDragStart: ({ payload }) => handleDragStart(payload),
+			duplicateDragCancel: cancel
+		}), () => subscription?.unsubscribe());
+	});
+	return () => {
+		const { tables, memos, ghostDx, ghostDy } = state;
+		if (tables.length === 0 && memos.length === 0) return null;
+		const highLevel = isHighLevelTable(app.value.store.state.settings.zoomLevel);
+		return konva`<k-group id="duplicate-ghost-layer" name="duplicate-ghost-layer" kind="duplicate-ghost-layer" x=${ghostDx} y=${ghostDy} opacity=${GHOST_OPACITY} listening=${false}>${repeat(stackTablesAndMemos(tables, memos), stackedKey, (item) => item.kind === "table" ? konva`<k-group id=${`duplicate-ghost-${item.entity.id}`} name="duplicate-ghost" kind=${`duplicate-ghost-${SelectType.table}`}>${highLevel ? konva`<${HighLevelTable} .table=${item.entity} .preview=${true} />` : konva`<${Table} .table=${item.entity} .preview=${true} />`}</k-group>` : konva`<k-group id=${`duplicate-ghost-${item.entity.id}`} name="duplicate-ghost" kind=${`duplicate-ghost-${SelectType.memo}`}><${Memo} .memo=${item.entity} .preview=${true} /></k-group>`)}</k-group>`;
+	};
+};
+//#endregion
+export { DuplicateGhost as default };

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

@@ -0,0 +1,8 @@
+import { CanvasLayers } from './CanvasScene';
+/**
+ * What the ERD tab's scene draws beside the document: a relationship being
+ * drawn, a drag's drop into groups, the marquee, collaborators and drag ghosts.
+ * Handed in through the canvas, so a scene that edits nothing reaches none.
+ */
+export declare const editingLayers: CanvasLayers;
+//# sourceMappingURL=editingLayers.d.ts.map

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

@@ -0,0 +1,21 @@
+import ColumnDragGhost from "./column-drag-ghost/ColumnDragGhost.js";
+import DragSelect from "./drag-select/DragSelect.js";
+import DrawRelationship from "./draw-relationship/DrawRelationship.js";
+import DuplicateGhost from "./duplicate-ghost/DuplicateGhost.js";
+import SharedDragSelect from "./shared-drag-select/SharedDragSelect.js";
+import SharedMouseTracker from "./shared-mouse-tracker/SharedMouseTracker.js";
+import TableGroupDropTarget from "./table-group/TableGroupDropTarget.js";
+//#region src/components/erd/canvas/editingLayers.ts
+var editingLayers = {
+	relationshipDraw: DrawRelationship,
+	dropTarget: TableGroupDropTarget,
+	marquee: DragSelect,
+	presence: [
+		SharedMouseTracker,
+		SharedDragSelect,
+		DuplicateGhost,
+		ColumnDragGhost
+	]
+};
+//#endregion
+export { editingLayers };

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

@@ -3,7 +3,8 @@ import { RootState } from '../../../engine/state';
 import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 /**
  * Raises the flag, holds the scene's view as it stands until endEntityDrag,
- * and, in the document while groups show, the box each group shows.
+ * and, in the document, the redraws of the static connectors' routes and,
+ * while groups show, the box each group shows.
  */
 export declare function beginEntityDrag(root: RootState, source?: GeometrySource): void;
 export declare function endEntityDrag(root: RootState, source?: GeometrySource): void;

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

@@ -0,0 +1,42 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { holdRouteRedraws, releaseRouteRedraws } from "../../../utils/draw-relationship/index.js";
+import { getTableGroupRects, isTableGroupShown } from "../../../utils/tableGroup.js";
+import { freezeView, sceneKeyOf, thawView } from "../../../konva/scene/viewFreeze.js";
+//#region src/components/erd/canvas/entityDrag.ts
+var state = observable({
+	active: {},
+	travelled: {}
+});
+var heldBoxes = /* @__PURE__ */ new Map();
+function beginEntityDrag(root, source = "document") {
+	const key = sceneKeyOf(root, source);
+	heldBoxes.set(key, source === "document" && isTableGroupShown(root) ? getTableGroupRects(root) : /* @__PURE__ */ new Map());
+	if (source === "document") holdRouteRedraws(root);
+	state.active[key] = true;
+	freezeView(root, source);
+}
+function endEntityDrag(root, source = "document") {
+	const key = sceneKeyOf(root, source);
+	Reflect.deleteProperty(state.active, key);
+	Reflect.deleteProperty(state.travelled, key);
+	heldBoxes.delete(key);
+	if (source === "document") releaseRouteRedraws(root);
+	thawView(root, source);
+}
+function isEntityDragActive(root, source = "document") {
+	return state.active[sceneKeyOf(root, source)] === true;
+}
+function markEntityDragTravelled(root, source = "document") {
+	const key = sceneKeyOf(root, source);
+	if (state.active[key]) state.travelled[key] = true;
+}
+function hasEntityDragTravelled(root, source = "document") {
+	return state.travelled[sceneKeyOf(root, source)] === true;
+}
+function getHeldTableGroupBoxes(root, source = "document") {
+	const active = isEntityDragActive(root, source);
+	const held = heldBoxes.get(sceneKeyOf(root, source));
+	return active && held ? held : null;
+}
+//#endregion
+export { beginEntityDrag, endEntityDrag, getHeldTableGroupBoxes, hasEntityDragTravelled, isEntityDragActive, markEntityDragTravelled };

package/dist/components/erd/canvas/high-level-table/HighLevelTable.js

@@ -0,0 +1,82 @@
+import { FocusType } from "../../../../engine/modules/editor/state.js";
+import { toNameLabel } from "../../../../engine/modules/editor/utils/nameView.js";
+import { getTableRect } from "../../../../konva/scene/metrics.js";
+import { getSceneTransform } from "../../../../konva/scene/viewport.js";
+import { openColorPickerAction } from "../../../../utils/emitter.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useI18n } from "../../../localeContext.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { useDiffMap } from "../../../diffContext.js";
+import { CURSOR_POINTER, HIGH_LEVEL_FONT_SIZES, SCENE_FONT_FAMILY, TABLE_INSET, mainButtonClick, setSceneCursor } from "../sceneTokens.js";
+import { diffOutlineRect } from "../DiffOutline.template.js";
+import { useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { useSharedSelectEntity } from "../useSharedSelectEntity.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { diffOutline, diffTextColor } from "../../../../utils/diff/diff.js";
+import { getColorEdgePath } from "../table/colorEdge.js";
+import { useMoveTable } from "../table/useMoveTable.js";
+import { useSharedFocusTable } from "../table/useSharedFocusTable.js";
+//#region src/components/erd/canvas/high-level-table/HighLevelTable.tsx
+var nameFontSize = (zoomLevel) => {
+	if (zoomLevel > .6) return HIGH_LEVEL_FONT_SIZES[0];
+	if (zoomLevel > .5) return HIGH_LEVEL_FONT_SIZES[1];
+	if (zoomLevel > .4) return HIGH_LEVEL_FONT_SIZES[2];
+	if (zoomLevel > .3) return HIGH_LEVEL_FONT_SIZES[3];
+	return HIGH_LEVEL_FONT_SIZES[4];
+};
+var nameText = ({ text, after }) => after ? `${text}\n${after}` : text;
+var HighLevelTable = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const diffMapRef = useDiffMap(ctx);
+	const { sharedFocusTableColor } = useSharedFocusTable(ctx, props.table.id);
+	const { sharedSelectColor } = useSharedSelectEntity(ctx, props.table.id);
+	const { onMoveStart } = useMoveTable(ctx, props, sourceRef);
+	let pressDraws = false;
+	const handlePress = (event) => {
+		pressDraws = Boolean(app.value.store.state.editor.drawRelationship);
+		onMoveStart(event);
+	};
+	const handleOpenColorPicker = (event) => {
+		if (pressDraws) return;
+		const { emitter } = app.value;
+		emitter.emit(openColorPickerAction({
+			x: event.evt.clientX,
+			y: event.evt.clientY,
+			color: props.table.ui.color
+		}));
+	};
+	return () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		const { table } = props;
+		const theme = themeRef.value;
+		const source = sourceRef.value;
+		const selected = Boolean(editor.selectedMap[table.id]);
+		const rect = getTableRect(store.state, table, source);
+		const { zoomLevel } = getSceneTransform(store.state, source);
+		const label = toNameLabel(store.state.settings, table);
+		const isEmptyName = !label.text.trim();
+		const sharedFocus = sharedFocusTableColor();
+		const sharedSelected = sharedSelectColor();
+		const ringColor = sharedFocus ?? sharedSelected;
+		const diffPaths = diffMapRef.value?.get(table.id);
+		return konva`<k-group id=${props.preview ? "" : `table-${table.id}`} name="table high-level-table" kind="table" visible=${props.visible ?? true} selected=${selected} sharedFocus=${sharedFocus} sharedSelect=${sharedSelected} x=${rect.x} y=${rect.y} @mousedown=${handlePress} @touchstart=${handlePress}><k-rect name="table-body" x=${1 / 2} y=${1 / 2} width=${rect.width - 1} height=${rect.height - 1} cornerRadius=${6} fill=${theme.tableBackground} stroke=${selected ? theme.tableSelect : theme.tableBorder} strokeWidth=${1} />${ringColor ? konva`<k-rect name="table-ring" x=${-1 / 2} y=${-1 / 2} width=${rect.width + 1} height=${rect.height + 1} cornerRadius=${6} stroke=${ringColor} strokeWidth=${1} />` : null}${diffOutlineRect({
+			name: "table-diff-outline",
+			stroke: diffOutline(theme, diffPaths),
+			width: rect.width,
+			height: rect.height,
+			cornerRadius: 6
+		})}<k-text name="high-level-table-name" x=${1} y=${TABLE_INSET} width=${rect.width - 2} height=${rect.height - TABLE_INSET * 2} text=${isEmptyName ? i18n.value.t("common.unnamed") : nameText(label)} fill=${diffTextColor(theme, diffPaths, FocusType.tableName) ?? diffTextColor(theme, diffPaths, FocusType.tableComment) ?? (isEmptyName || label.standIn ? theme.placeholder : theme.active)} fontFamily=${SCENE_FONT_FAMILY} fontSize=${nameFontSize(zoomLevel)} fontStyle="bold" align="center" verticalAlign="middle" wrap="char" /><k-path name="table-header-color" kind="table-header-color" data=${getColorEdgePath(rect.height)} fill=${table.ui.color} listening=${interaction() !== "read"} @click=${mainButtonClick(handleOpenColorPicker)} @mouseenter=${(event) => {
+			setSceneCursor(event, CURSOR_POINTER);
+		}} @mouseleave=${(event) => {
+			setSceneCursor(event, "");
+		}} /></k-group>`;
+	};
+};
+//#endregion
+export { HighLevelTable as default };

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

@@ -26,6 +26,12 @@ export declare function progressOf(key: string): number;
 export declare function transitionTo(key: string, target: number): void;
 /** Drops every key one editor holds and cancels the frame if nothing else is moving. */
 export declare function stopTransitions(editorId: string): void;
+/**
+ * Test-only probe: how many keys one editor still holds, at rest, moving or
+ * drawn this frame, which a scene that closed must have brought to zero.
+ * Nothing shipping calls it.
+ */
+export declare function countTransitions(editorId: string): number;
 /**
  * Runs the transitions on the clock given, or on the browser's own again when
  * called with nothing. Whatever was moving lands on its target, since a start

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

@@ -0,0 +1,79 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+//#region src/components/erd/canvas/highlightTransition.ts
+var transitionClock = {
+	now: () => performance.now(),
+	requestFrame: (callback) => requestAnimationFrame(callback),
+	cancelFrame: (handle) => cancelAnimationFrame(handle)
+};
+var targets = /* @__PURE__ */ new Map();
+var running = /* @__PURE__ */ new Map();
+var progress = observable({});
+var clock = transitionClock;
+var handle = null;
+function easeOut(t) {
+	const rest = 1 - t;
+	return 1 - rest * rest * rest;
+}
+function arm() {
+	if (handle !== null || running.size === 0) return;
+	handle = clock.requestFrame(frame);
+}
+function drop(key) {
+	running.delete(key);
+	if (progress[key] !== void 0) Reflect.deleteProperty(progress, key);
+}
+function frame() {
+	handle = null;
+	const now = clock.now();
+	for (const [key, transition] of [...running]) {
+		const elapsed = now - transition.startedAt;
+		const { from, to } = transition;
+		if (elapsed >= 300) {
+			running.delete(key);
+			progress[key] = to;
+			continue;
+		}
+		const t = elapsed > 0 ? elapsed / 300 : 0;
+		progress[key] = from + (to - from) * easeOut(t);
+	}
+	arm();
+}
+function transitionKey(editorId, kind, id) {
+	return `${editorId} ${kind}:${id}`;
+}
+function progressOf(key) {
+	const live = progress[key];
+	if (live !== void 0) return live;
+	const moving = running.get(key);
+	return moving ? moving.from : targets.get(key) ?? 0;
+}
+function transitionTo(key, target) {
+	const held = targets.get(key);
+	if (held === target) return;
+	if (held === void 0) {
+		targets.set(key, target);
+		return;
+	}
+	const from = progressOf(key);
+	targets.set(key, target);
+	running.set(key, {
+		from,
+		to: target,
+		startedAt: clock.now()
+	});
+	arm();
+}
+function stopTransitions(editorId) {
+	const prefix = `${editorId} `;
+	for (const key of [...targets.keys()]) {
+		if (!key.startsWith(prefix)) continue;
+		targets.delete(key);
+		drop(key);
+	}
+	if (running.size === 0 && handle !== null) {
+		clock.cancelFrame(handle);
+		handle = null;
+	}
+}
+//#endregion
+export { progressOf, stopTransitions, transitionKey, transitionTo };

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

@@ -0,0 +1,152 @@
+import { isMod } from "../../../../utils/keyboard-shortcut/index.js";
+import { onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { getMemoRect } from "../../../../konva/scene/metrics.js";
+import { editMemoAction, scrollMemoAction } from "../../../../engine/modules/editor/atom.actions.js";
+import { removeMemoAction$ } from "../../../../engine/modules/memo/generator.actions.js";
+import { openColorPickerAction } from "../../../../utils/emitter.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 { CURSOR_POINTER, CURSOR_TEXT, HIT_FILL, SCENE_FONT_FAMILY, SCENE_FONT_SIZE, TRANSPARENT, createSceneCursorScope, documentCardShadow, mainButtonClick } from "../sceneTokens.js";
+import { diffOutlineRect } from "../DiffOutline.template.js";
+import MemoSash from "./memo-sash/MemoSash.js";
+import { getMemoLineHeight, layoutMemoLines } from "./memoText.js";
+import { memoCaretOffsetAt, requestMemoCaret } from "./memoCaret.js";
+import { clampMemoScrollTop, getMemoScrollTop } from "./memoScroll.js";
+import { useSceneActive, useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { useMoveMemo } from "./useMoveMemo.js";
+import { sceneIcon } from "../SceneIcon.template.js";
+import { useSharedSelectEntity } from "../useSharedSelectEntity.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { diffOutline, diffTextColor } from "../../../../utils/diff/diff.js";
+import { isPinchWheel } from "../../../../utils/pinch.js";
+//#region src/components/erd/canvas/memo/Memo.tsx
+var MEMO_CORNER_RADIUS = 6;
+var MEMO_HEADER_COLOR_HEIGHT = 4;
+var Memo = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const active = useSceneActive(ctx);
+	const diffMapRef = useDiffMap(ctx);
+	const { sharedSelectColor } = useSharedSelectEntity(ctx, props.memo.id);
+	const { onMoveStart } = useMoveMemo(ctx, props, sourceRef);
+	const state = observable({
+		hover: false,
+		removeHover: false
+	});
+	const cursor = createSceneCursorScope();
+	onUnmounted(cursor.release);
+	const handleMouseenter = () => {
+		state.hover = true;
+	};
+	const handleMouseleave = () => {
+		state.hover = false;
+	};
+	const handleRemoveMouseenter = (event) => {
+		state.removeHover = true;
+		cursor.set(event, CURSOR_POINTER);
+	};
+	const handleRemoveMouseleave = (event) => {
+		state.removeHover = false;
+		cursor.set(event, "");
+	};
+	const handleRemoveMemo = () => {
+		const { store } = app.value;
+		store.dispatch(removeMemoAction$(props.memo.id));
+	};
+	const handleOpenColorPicker = (event) => {
+		const { emitter } = app.value;
+		emitter.emit(openColorPickerAction({
+			x: event.evt.clientX,
+			y: event.evt.clientY,
+			color: props.memo.ui.color
+		}));
+	};
+	let pressedRead = false;
+	const handleValuePress = () => {
+		pressedRead = interaction() === "read";
+	};
+	const handleEditValue = (event) => {
+		if (props.preview || pressedRead || interaction() === "read") return;
+		const { store } = app.value;
+		const { memo } = props;
+		const point = event.currentTarget.getRelativePointerPosition();
+		if (point) {
+			const scrollTop = getMemoScrollTop(store.state.editor, memo);
+			requestMemoCaret(memo.id, memoCaretOffsetAt(memo.value, memo.ui.width, point.x, point.y + scrollTop));
+		}
+		store.dispatch(editMemoAction({ id: memo.id }));
+	};
+	const handleValueMouseenter = (event) => {
+		const edits = !props.preview && interaction() !== "read";
+		cursor.set(event, edits ? CURSOR_TEXT : "");
+	};
+	const handleValueMouseleave = (event) => {
+		cursor.set(event, "");
+	};
+	const handleValueWheel = (event) => {
+		if (isPinchWheel(event.evt)) return;
+		if (interaction() === "read" && !active.value()) return;
+		event.evt.stopPropagation();
+		event.evt.preventDefault();
+		if (props.preview || isMod(event.evt)) return;
+		const { store } = app.value;
+		const { memo } = props;
+		const scrollTop = getMemoScrollTop(store.state.editor, memo);
+		const next = clampMemoScrollTop(memo, scrollTop + event.evt.deltaY);
+		if (next === scrollTop) return;
+		store.dispatch(scrollMemoAction({
+			id: memo.id,
+			scrollTop: next
+		}));
+	};
+	return () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		const { memo } = props;
+		const theme = themeRef.value;
+		const selected = Boolean(editor.selectedMap[memo.id]);
+		const shadow = documentCardShadow(theme.memoShadow);
+		const sharedSelected = sharedSelectColor();
+		const editing = !props.preview && editor.editMemoId === memo.id;
+		const value = layoutMemoLines(memo.value, memo.ui.width).join("\n");
+		const scrollTop = props.preview ? 0 : getMemoScrollTop(editor, memo);
+		const { width, height } = getMemoRect(memo);
+		const bodyInset = 1 / 2;
+		const diffPaths = diffMapRef.value?.get(memo.id);
+		const read = interaction() === "read";
+		return konva`<k-group id=${props.preview ? "" : `memo-${memo.id}`} name="memo" kind="memo" selected=${selected} sharedSelect=${sharedSelected} x=${memo.ui.x} y=${memo.ui.y} @mousedown=${onMoveStart} @touchstart=${onMoveStart} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave}><k-rect name="memo-shared-select" kind="memo-shared-select" x=${-.5} y=${-.5} width=${width + 1} height=${height + 1} cornerRadius=${MEMO_CORNER_RADIUS + 1} stroke=${sharedSelected ?? ""} strokeWidth=${1} listening=${false} /><k-rect name="memo-body" kind="memo-body" x=${bodyInset} y=${bodyInset} width=${width - 1} height=${height - 1} cornerRadius=${MEMO_CORNER_RADIUS} fill=${theme.memoBackground} stroke=${selected ? theme.memoSelect : theme.memoBorder} strokeWidth=${1} shadowColor=${shadow?.color} shadowBlur=${shadow?.blur} shadowOffsetX=${shadow?.offsetX} shadowOffsetY=${shadow?.offsetY} shadowOpacity=${shadow?.opacity} shadowForStrokeEnabled=${shadow ? false : void 0} />${diffOutlineRect({
+			name: "memo-diff-outline",
+			stroke: diffOutline(theme, diffPaths),
+			width,
+			height,
+			cornerRadius: MEMO_CORNER_RADIUS + 1
+		})}<k-group name="memo-container" kind="memo-container" x=${1} y=${1}><k-rect name="memo-header-color" kind="memo-header-color" x=${0} y=${-1} width=${width - 2} height=${MEMO_HEADER_COLOR_HEIGHT} cornerRadius=${[
+			MEMO_CORNER_RADIUS,
+			MEMO_CORNER_RADIUS,
+			0,
+			0
+		]} fill=${memo.ui.color} listening=${!read} @click=${mainButtonClick(handleOpenColorPicker)} @mouseenter=${(event) => {
+			cursor.set(event, CURSOR_POINTER);
+		}} @mouseleave=${(event) => {
+			cursor.set(event, "");
+		}} />${read ? null : sceneIcon({
+			icon: "x",
+			name: "memo-remove",
+			kind: "icon",
+			size: 12,
+			color: state.hover ? state.removeHover ? theme.active : theme.foreground : TRANSPARENT,
+			x: 8 + memo.ui.width - 12,
+			y: 8,
+			click: handleRemoveMemo,
+			mouseenter: handleRemoveMouseenter,
+			mouseleave: handleRemoveMouseleave
+		})}<k-group name="memo-text-clip" kind="memo-textarea" x=${8} y=${24} clipX=${0} clipY=${0} clipWidth=${memo.ui.width} clipHeight=${memo.ui.height} @mousedown=${handleValuePress} @click=${mainButtonClick(handleEditValue)} @mouseenter=${handleValueMouseenter} @mouseleave=${handleValueMouseleave} @wheel=${handleValueWheel}><k-rect name="memo-textarea-hit" kind="memo-textarea" x=${0} y=${0} width=${memo.ui.width} height=${memo.ui.height} fill=${HIT_FILL} /><k-text name="memo-textarea" kind="memo-textarea" offsetY=${scrollTop} text=${value} visible=${!editing} fill=${diffTextColor(theme, diffPaths, "memoValue") ?? theme.active} fontFamily=${SCENE_FONT_FAMILY} fontSize=${SCENE_FONT_SIZE} fontStyle=${"400"} lineHeight=${getMemoLineHeight()} wrap="none" /></k-group>${read ? null : konva`<${MemoSash} .memo=${memo} .top=${height} .left=${width} />`}</k-group></k-group>`;
+	};
+};
+//#endregion
+export { Memo as default };