@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/grid/dist/input/editing.js

@@ -0,0 +1,460 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { rangesInGrid, selectionEquals } from "../model/selection.js";
+import { normalizeCellText } from "../model/text.js";
+import { cellArea, cellRect, regionOf } from "./pointer.js";
+import { EDIT_IDLE, cancelEdit, closeEdit, commitEdit, inputDraft, startEdit, writableChanges } from "../model/editing.js";
+import { areaCellCount, cellCount, copyRows, copyableRanges, fillTargets, parse, pasteCellCount, pasteTargets, serialize } from "../model/tsv.js";
+//#region ../grid/dist/input/editing.js
+var NO_INSETS = Object.freeze({
+	left: 0,
+	top: 0,
+	right: 0,
+	bottom: 0
+});
+var LINE_BREAK = /[\r\n]/;
+var TRAILING_BREAKS = /[\r\n]+$/;
+var CELL_BREAK = /[\t\n\f\r]/;
+var HISTORY = /^history/;
+var LINE_INPUTS = /* @__PURE__ */ new Set(["insertLineBreak", "insertParagraph"]);
+var isShadowRoot = (node) => node.nodeType === 11 && Boolean(node.host);
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function holdInside(rect, area) {
+	const width = Math.max(0, Math.min(rect.width, area.width));
+	const height = Math.max(0, Math.min(rect.height, area.height));
+	return {
+		x: clamp(rect.x, area.x, area.x + area.width - width),
+		y: clamp(rect.y, area.y, area.y + area.height - height),
+		width,
+		height
+	};
+}
+function placeEditor(state, cell, insets = NO_INSETS) {
+	const rect = cellRect(state, cell);
+	const box = {
+		x: rect.x + insets.left,
+		y: rect.y + insets.top,
+		width: Math.max(0, rect.width - insets.left - insets.right),
+		height: Math.max(0, rect.height - insets.top - insets.bottom)
+	};
+	const region = regionOf(state, cell.col);
+	const left = Math.max(box.x, region.x);
+	const top = Math.max(box.y, region.y);
+	const right = Math.min(box.x + box.width, region.x + region.width);
+	const bottom = Math.min(box.y + box.height, region.y + region.height);
+	if (!(cell.row >= 0 && cell.row < state.rowCount && cell.col >= 0 && cell.col < state.columns.length) || right <= left || bottom <= top) return {
+		box: holdInside(box, cellArea(state)),
+		clip: null,
+		shown: false
+	};
+	const clip = {
+		left: left - box.x,
+		top: top - box.y,
+		right: box.x + box.width - right,
+		bottom: box.y + box.height - bottom
+	};
+	return {
+		box,
+		clip: clip.left === 0 && clip.top === 0 && clip.right === 0 && clip.bottom === 0 ? null : clip,
+		shown: true
+	};
+}
+function createEditingInput(host) {
+	const { scene } = host;
+	const view = observable({ open: null }, { shallow: true });
+	let edit = EDIT_IDLE;
+	let composing = false;
+	let deferred = null;
+	let listeners = [];
+	let generation = 0;
+	let undoFloor = "";
+	let redos = 0;
+	const pressRoots = [];
+	let slotBlur = null;
+	const clearText = () => {
+		const { textarea } = host;
+		if (!composing && textarea.value !== "") textarea.value = "";
+	};
+	const source = () => ({
+		rowCount: scene.state.rowCount,
+		columns: host.columns(),
+		getCellStyle: scene.state.getCellStyle
+	});
+	const ownEditorOpen = () => edit.status === "editing" && !edit.custom;
+	const customEditorOpen = () => edit.status === "editing" && edit.custom;
+	const syncDraft = () => {
+		if (ownEditorOpen()) edit = inputDraft(edit, host.textarea.value);
+	};
+	const focusInSlot = () => {
+		const active = host.textarea.getRootNode().activeElement;
+		return Boolean(active && host.slot.contains(active));
+	};
+	const reclaimFocus = () => {
+		const { textarea } = host;
+		const { activeElement, body } = textarea.ownerDocument;
+		const leaving = slotBlur !== null && slotBlur.eventPhase !== Event.NONE && slotBlur.relatedTarget !== null;
+		if (focusInSlot() || !leaving && (!activeElement || activeElement === body)) textarea.focus({ preventScroll: true });
+	};
+	const dropEdit = () => {
+		edit = EDIT_IDLE;
+		generation++;
+		listeners = [];
+		unwatchPresses();
+	};
+	const finish = ({ change }) => {
+		const custom = customEditorOpen();
+		dropEdit();
+		view.open = null;
+		clearText();
+		if (custom) reclaimFocus();
+		if (change) host.commit({
+			changes: [change],
+			source: "edit"
+		});
+	};
+	const close = (reason) => {
+		if (edit.status !== "editing") return;
+		syncDraft();
+		const outcome = closeEdit(edit, reason);
+		if (!outcome.signal) {
+			finish(outcome);
+			return;
+		}
+		for (const listener of listeners.slice()) listener(outcome.signal);
+	};
+	const onPress = (event) => {
+		if (edit.status !== "editing") return;
+		const editor = edit.custom ? host.slot : host.textarea;
+		if (event.composedPath().includes(editor) || host.onScrollbar(event)) return;
+		close("outside");
+	};
+	function watchPresses() {
+		if (pressRoots.length > 0) return;
+		let root = host.textarea.getRootNode();
+		let inner = null;
+		for (;;) {
+			const within = inner;
+			const listener = (event) => {
+				if (!within) onPress(event);
+				else if (!event.composedPath().includes(within)) close("outside");
+			};
+			root.addEventListener("pointerdown", listener, true);
+			pressRoots.push({
+				root,
+				listener
+			});
+			if (!isShadowRoot(root)) break;
+			inner = root.host;
+			root = inner.getRootNode();
+		}
+	}
+	function unwatchPresses() {
+		for (const { root, listener } of pressRoots.splice(0)) root.removeEventListener("pointerdown", listener, true);
+	}
+	const openOwn = (state, style, trigger) => {
+		const { textarea } = host;
+		view.open = {
+			cell: state.cell,
+			custom: false,
+			style
+		};
+		if (trigger.kind === "type") return;
+		textarea.focus({ preventScroll: true });
+		textarea.value = state.initialValue;
+		const end = textarea.value.length;
+		textarea.setSelectionRange(end, end);
+		const own = generation;
+		nextTick(() => {
+			if (own === generation) textarea.scrollLeft = textarea.scrollWidth;
+		});
+	};
+	const openCustom = (state, editor) => {
+		const own = generation;
+		const live = () => own === generation;
+		const rect = cellRect(scene.state, state.cell);
+		view.open = {
+			cell: state.cell,
+			custom: true,
+			style: void 0
+		};
+		clearText();
+		editor?.({
+			container: host.slot,
+			rect: new DOMRect(rect.x, rect.y, rect.width, rect.height),
+			mode: state.mode,
+			initialValue: state.initialValue,
+			commit: (value) => {
+				if (live()) finish(commitEdit(edit, value));
+			},
+			cancel: () => {
+				if (live()) finish({
+					state: cancelEdit(),
+					change: null
+				});
+			},
+			onClose: (listener) => {
+				if (live()) listeners.push(listener);
+			}
+		});
+	};
+	const open = (cell, trigger) => {
+		const { rowCount, getCell, getCellStyle } = scene.state;
+		const column = host.columns()[cell.col];
+		if (edit.status === "editing" || !column) return false;
+		if (cell.row < 0 || cell.row >= rowCount) return false;
+		const style = getCellStyle?.(cell.row, cell.col);
+		const custom = typeof column.editor === "function";
+		const value = getCell(cell.row, cell.col);
+		const next = startEdit(edit, {
+			cell,
+			column,
+			value: custom ? value : normalizeCellText(value),
+			style,
+			custom,
+			trigger
+		});
+		if (next.status !== "editing") return false;
+		edit = next;
+		undoFloor = trigger.kind === "type" ? "" : next.initialValue;
+		redos = 0;
+		watchPresses();
+		host.reveal(cell);
+		if (custom) openCustom(next, column.editor);
+		else openOwn(next, style, trigger);
+		return true;
+	};
+	const isTypedLine = (text) => text !== "" && !LINE_BREAK.test(text);
+	const oneLine = (text) => normalizeCellText(text.replace(TRAILING_BREAKS, ""));
+	const insertLine = (line) => {
+		const { textarea } = host;
+		if (!textarea.ownerDocument.execCommand("insertText", false, line)) {
+			const { selectionStart, selectionEnd } = textarea;
+			textarea.setRangeText(line, selectionStart, selectionEnd, "end");
+		}
+	};
+	const pasteLine = (event, text) => {
+		const line = oneLine(text);
+		if (line === text) return;
+		event.preventDefault();
+		insertLine(line);
+		syncDraft();
+	};
+	const dropLine = () => {
+		const { textarea } = host;
+		const { value, selectionStart, selectionEnd } = textarea;
+		const dropped = value.slice(selectionStart, selectionEnd);
+		if (CELL_BREAK.test(dropped)) insertLine(oneLine(dropped));
+		else if (CELL_BREAK.test(value)) {
+			textarea.value = normalizeCellText(value);
+			textarea.setSelectionRange(selectionEnd, selectionEnd);
+		}
+	};
+	const heldRanges = () => rangesInGrid(host.selection().ranges, {
+		rowCount: scene.state.rowCount,
+		colCount: host.columns().length
+	});
+	const clear = () => {
+		const ranges = heldRanges();
+		if (cellCount(ranges) > 1e6) {
+			host.reject({ reason: "too-many-cells" });
+			return;
+		}
+		const writes = fillTargets(ranges, "");
+		const { changes } = writableChanges(writes, source());
+		if (changes.length > 0) host.commit({
+			changes,
+			source: "clear"
+		});
+	};
+	const selectPasted = (selection, matrix) => {
+		let width = 0;
+		for (const row of matrix) width = Math.max(width, row.length);
+		if (matrix.length === 1 && width === 1) return;
+		const { row, col } = selection.active;
+		const endCol = Math.min(col + width, host.columns().length) - 1;
+		if (endCol < col) return;
+		const next = {
+			active: {
+				row,
+				col
+			},
+			ranges: [{
+				startRow: row,
+				startCol: col,
+				endRow: row + matrix.length - 1,
+				endCol
+			}]
+		};
+		if (!selectionEquals(selection, next)) host.select(next);
+	};
+	const activeIsCustom = () => typeof host.columns()[host.selection().active.col]?.editor === "function";
+	return {
+		view,
+		editing: () => edit.status === "editing",
+		holdsFocus: () => customEditorOpen() && focusInSlot(),
+		act(action, key) {
+			switch (action.type) {
+				case "edit":
+					open(host.selection().active, { kind: key === "F2" ? "f2" : "enter" });
+					return;
+				case "clear":
+					clear();
+					return;
+				case "commit":
+					if (!ownEditorOpen()) return;
+					syncDraft();
+					finish(commitEdit(edit));
+					host.move(action.key, action.mods);
+					return;
+				case "cancel": close("escape");
+			}
+		},
+		doubleClick(cell) {
+			if (!composing) open(cell, { kind: "doubleClick" });
+		},
+		beforeinput(event) {
+			const { inputType } = event;
+			const own = ownEditorOpen();
+			if (LINE_INPUTS.has(inputType)) event.preventDefault();
+			else if (inputType === "historyUndo") {
+				if (!own || host.textarea.value === undoFloor) event.preventDefault();
+				else redos++;
+			} else if (inputType === "historyRedo") {
+				if (!own || redos === 0) event.preventDefault();
+				else redos--;
+			}
+		},
+		input(event) {
+			const { inputType, isComposing } = event;
+			if (edit.status === "editing") {
+				if (edit.custom) {
+					clearText();
+					return;
+				}
+				if (inputType === "insertFromDrop") dropLine();
+				if (!HISTORY.test(inputType)) redos = 0;
+				syncDraft();
+				return;
+			}
+			if (composing || isComposing) return;
+			if (HISTORY.test(inputType)) {
+				clearText();
+				return;
+			}
+			const text = host.textarea.value;
+			if (isTypedLine(text) && open(host.selection().active, {
+				kind: "type",
+				text
+			})) return;
+			clearText();
+		},
+		compositionstart() {
+			composing = true;
+			if (edit.status === "editing") return;
+			if (activeIsCustom()) {
+				const { row, col } = host.selection().active;
+				deferred = {
+					row,
+					col
+				};
+				return;
+			}
+			open(host.selection().active, {
+				kind: "type",
+				text: ""
+			});
+		},
+		compositionend() {
+			composing = false;
+			if (edit.status === "editing") {
+				if (edit.custom) clearText();
+				else syncDraft();
+				return;
+			}
+			const text = host.textarea.value;
+			const cell = deferred;
+			const { active } = host.selection();
+			const opens = cell !== null && cell.row === active.row && cell.col === active.col && activeIsCustom() && isTypedLine(text);
+			deferred = null;
+			clearText();
+			if (opens) open(active, {
+				kind: "type",
+				text
+			});
+		},
+		copy(event) {
+			const data = event.clipboardData;
+			if (!data || ownEditorOpen()) return;
+			event.preventDefault();
+			const ranges = heldRanges();
+			if (ranges.length === 0) return;
+			const area = copyableRanges(ranges);
+			if (!area) {
+				host.reject({ reason: "multi-range-copy" });
+				return;
+			}
+			if (areaCellCount(area) > 1e6) {
+				host.reject({ reason: "too-many-cells" });
+				return;
+			}
+			const rows = copyRows(area, scene.state.getCell);
+			let text;
+			try {
+				text = serialize(rows);
+			} catch (error) {
+				if (error instanceof RangeError) return;
+				throw error;
+			}
+			data.setData("text/plain", text);
+		},
+		paste(event) {
+			const data = event.clipboardData;
+			if (!data) return;
+			if (ownEditorOpen()) {
+				pasteLine(event, data.getData("text/plain"));
+				return;
+			}
+			event.preventDefault();
+			if (customEditorOpen()) return;
+			const matrix = parse(data.getData("text/plain"));
+			if (matrix.length === 0) return;
+			const selection = host.selection();
+			if (pasteCellCount(selection, matrix) > 1e6) {
+				host.reject({ reason: "too-many-cells" });
+				return;
+			}
+			const { changes, beyondColumns } = writableChanges(pasteTargets(selection, matrix), source());
+			if (changes.length > 0) host.commit({
+				changes,
+				source: "paste"
+			});
+			if (beyondColumns) host.reject({ reason: "paste-beyond-columns" });
+			selectPasted(selection, matrix);
+		},
+		blur() {
+			const { textarea } = host;
+			if (!ownEditorOpen()) return;
+			const own = generation;
+			queueMicrotask(() => {
+				const root = textarea.getRootNode();
+				if (own !== generation || !textarea.isConnected) return;
+				if (root.activeElement !== textarea) close("outside");
+			});
+		},
+		slotKeydown(event) {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			if (event.isComposing || event.keyCode === 229) return;
+			if (!customEditorOpen()) return;
+			event.preventDefault();
+			close("escape");
+		},
+		slotBlur(event) {
+			slotBlur = event;
+		},
+		dispose() {
+			dropEdit();
+		}
+	};
+}
+//#endregion
+export { NO_INSETS, createEditingInput, holdInside, placeEditor };