@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/grid/dist/model/selection.js

@@ -0,0 +1,237 @@
+//#region ../grid/dist/model/selection.js
+var spanOf = (a, b) => ({
+	startRow: Math.min(a.row, b.row),
+	startCol: Math.min(a.col, b.col),
+	endRow: Math.max(a.row, b.row),
+	endCol: Math.max(a.col, b.col)
+});
+var selectCell = (cell) => ({
+	active: {
+		row: cell.row,
+		col: cell.col
+	},
+	ranges: [spanOf(cell, cell)]
+});
+var sameRange = (a, b) => a.startRow === b.startRow && a.startCol === b.startCol && a.endRow === b.endRow && a.endCol === b.endCol;
+function selectionEquals(a, b) {
+	if (a === b) return true;
+	if (a.active.row !== b.active.row || a.active.col !== b.active.col || a.ranges.length !== b.ranges.length) return false;
+	return a.ranges.every((range, index) => sameRange(range, b.ranges[index]));
+}
+var settle = (prev, next) => selectionEquals(prev, next) ? prev : next;
+var isEmpty = (bounds) => bounds.rowCount < 1 || bounds.colCount < 1;
+var clamp = (value, max) => Math.min(Math.max(value, 0), max);
+var clampCell = (cell, bounds) => ({
+	row: clamp(cell.row, bounds.rowCount - 1),
+	col: clamp(cell.col, bounds.colCount - 1)
+});
+var lastRange = (sel) => sel.ranges.length > 0 ? sel.ranges[sel.ranges.length - 1] : spanOf(sel.active, sel.active);
+var replaceLast = (ranges, range) => [...ranges.slice(0, -1), range];
+var farEnd = (anchor, start, end) => anchor - start > end - anchor ? start : end;
+function focusOf(sel) {
+	const range = lastRange(sel);
+	return {
+		row: farEnd(sel.active.row, range.startRow, range.endRow),
+		col: farEnd(sel.active.col, range.startCol, range.endCol)
+	};
+}
+function place(sel, mods, active, range, extended) {
+	if (mods.shift) return settle(sel, {
+		active: sel.active,
+		ranges: replaceLast(sel.ranges, extended)
+	});
+	if (mods.ctrl) return {
+		active,
+		ranges: [...sel.ranges, range]
+	};
+	return settle(sel, {
+		active,
+		ranges: [range]
+	});
+}
+var clickCell = (sel, cell, mods = {}) => place(sel, mods, {
+	row: cell.row,
+	col: cell.col
+}, spanOf(cell, cell), spanOf(sel.active, cell));
+var dragTo = (sel, cell) => clickCell(sel, cell, { shift: true });
+var columnSpan = (from, to, bounds) => ({
+	startRow: 0,
+	startCol: Math.min(from, to),
+	endRow: bounds.rowCount - 1,
+	endCol: Math.max(from, to)
+});
+var rowSpan = (from, to, bounds) => ({
+	startRow: Math.min(from, to),
+	startCol: 0,
+	endRow: Math.max(from, to),
+	endCol: bounds.colCount - 1
+});
+function clickColumnHeader(sel, col, mods, bounds) {
+	if (isEmpty(bounds)) return sel;
+	const target = clamp(col, bounds.colCount - 1);
+	return place(sel, mods, {
+		row: 0,
+		col: target
+	}, columnSpan(target, target, bounds), columnSpan(sel.active.col, target, bounds));
+}
+function clickRowHeader(sel, row, mods, bounds) {
+	if (isEmpty(bounds)) return sel;
+	const target = clamp(row, bounds.rowCount - 1);
+	return place(sel, mods, {
+		row: target,
+		col: 0
+	}, rowSpan(target, target, bounds), rowSpan(sel.active.row, target, bounds));
+}
+function clickCorner(sel, mods, bounds) {
+	if (isEmpty(bounds)) return sel;
+	const every = rowSpan(0, bounds.rowCount - 1, bounds);
+	return place(sel, mods, clampCell(sel.active, bounds), every, every);
+}
+var selectAll = (sel, bounds) => clickCorner(sel, {}, bounds);
+function step(cell, key, toEdge, bounds, pageRows) {
+	const lastRow = bounds.rowCount - 1;
+	const lastCol = bounds.colCount - 1;
+	const { row, col } = cell;
+	const page = Math.max(1, Math.floor(pageRows));
+	switch (key) {
+		case "ArrowUp": return clampCell({
+			row: toEdge ? 0 : row - 1,
+			col
+		}, bounds);
+		case "ArrowDown": return clampCell({
+			row: toEdge ? lastRow : row + 1,
+			col
+		}, bounds);
+		case "ArrowLeft": return clampCell({
+			row,
+			col: toEdge ? 0 : col - 1
+		}, bounds);
+		case "ArrowRight": return clampCell({
+			row,
+			col: toEdge ? lastCol : col + 1
+		}, bounds);
+		case "Home": return toEdge ? {
+			row: 0,
+			col: 0
+		} : clampCell({
+			row,
+			col: 0
+		}, bounds);
+		case "End": return toEdge ? {
+			row: lastRow,
+			col: lastCol
+		} : clampCell({
+			row,
+			col: lastCol
+		}, bounds);
+		case "PageUp": return clampCell({
+			row: row - page,
+			col
+		}, bounds);
+		case "PageDown": return clampCell({
+			row: row + page,
+			col
+		}, bounds);
+	}
+}
+function moveActive(sel, key, mods, bounds, pageRows) {
+	if (isEmpty(bounds)) return sel;
+	if (key === "SelectAll") return selectAll(sel, bounds);
+	const active = clampCell(sel.active, bounds);
+	if (key === "Tab" || key === "Enter") {
+		const { row, col } = active;
+		const delta = mods.shift ? -1 : 1;
+		return settle(sel, selectCell(clampCell(key === "Tab" ? {
+			row,
+			col: col + delta
+		} : {
+			row: row + delta,
+			col
+		}, bounds)));
+	}
+	const toEdge = Boolean(mods.ctrl);
+	if (mods.shift) {
+		const focus = step(clampCell(focusOf(sel), bounds), key, toEdge, bounds, pageRows);
+		return settle(sel, {
+			active,
+			ranges: replaceLast(sel.ranges, spanOf(active, focus))
+		});
+	}
+	return settle(sel, selectCell(step(active, key, toEdge, bounds, pageRows)));
+}
+var contains = (range, cell) => cell.row >= range.startRow && cell.row <= range.endRow && cell.col >= range.startCol && cell.col <= range.endCol;
+var isSelected = (sel, cell) => sel.ranges.some((range) => contains(range, cell));
+function mergeSpans(spans) {
+	const sorted = [...spans].sort((a, b) => a.start - b.start);
+	const merged = [];
+	for (const span of sorted) {
+		const last = merged[merged.length - 1];
+		if (last && span.start <= last.end + 1) last.end = Math.max(last.end, span.end);
+		else merged.push({
+			start: span.start,
+			end: span.end
+		});
+	}
+	return merged;
+}
+var holdsCell = (range, bounds) => range.startRow < bounds.rowCount && range.startCol < bounds.colCount;
+function rangesInGrid(ranges, bounds) {
+	const held = [];
+	for (const range of ranges) {
+		if (!holdsCell(range, bounds)) continue;
+		held.push({
+			...range,
+			endRow: Math.min(range.endRow, bounds.rowCount - 1),
+			endCol: Math.min(range.endCol, bounds.colCount - 1)
+		});
+	}
+	return held;
+}
+function selectedRows(sel, bounds) {
+	const intersected = [];
+	const covered = [];
+	for (const range of sel.ranges) {
+		if (!holdsCell(range, bounds)) continue;
+		const span = {
+			start: range.startRow,
+			end: range.endRow
+		};
+		intersected.push(span);
+		if (range.startCol <= 0 && range.endCol >= bounds.colCount - 1) covered.push(span);
+	}
+	return {
+		intersected: mergeSpans(intersected),
+		covered: mergeSpans(covered)
+	};
+}
+function selectedColumns(sel, bounds) {
+	const intersected = [];
+	const covered = [];
+	for (const range of sel.ranges) {
+		if (!holdsCell(range, bounds)) continue;
+		const span = {
+			start: range.startCol,
+			end: range.endCol
+		};
+		intersected.push(span);
+		if (range.startRow <= 0 && range.endRow >= bounds.rowCount - 1) covered.push(span);
+	}
+	return {
+		intersected: mergeSpans(intersected),
+		covered: mergeSpans(covered)
+	};
+}
+function inSpans(spans, index) {
+	for (const span of spans) {
+		if (index < span.start) return false;
+		if (index <= span.end) return true;
+	}
+	return false;
+}
+function headerState(header, index) {
+	if (inSpans(header.covered, index)) return "covered";
+	if (inSpans(header.intersected, index)) return "intersected";
+	return "none";
+}
+//#endregion
+export { clickCell, clickColumnHeader, clickCorner, clickRowHeader, dragTo, headerState, isSelected, moveActive, rangesInGrid, selectAll, selectCell, selectedColumns, selectedRows, selectionEquals, spanOf };

package/dist/grid/dist/model/text.js

@@ -0,0 +1,122 @@
+import { recalibrateFonts } from "../font.js";
+import _defineProperty from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/defineProperty.js";
+import { clearCache, layoutNextLine, measureNaturalWidth, prepareWithSegments } from "@chenglou/pretext";
+//#region ../grid/dist/model/text.js
+var DEFAULT_CAPACITY = 2048;
+var segmentsMeasured = 0;
+function emptyPretextCaches() {
+	clearCache();
+	segmentsMeasured = 0;
+	recalibrateFonts();
+}
+var PREPARE_OPTIONS = { whiteSpace: "pre-wrap" };
+var WHITESPACE = /[\t\n\f\r]/;
+var WHITESPACE_ALL = /[\t\n\f\r]/g;
+var SPACE = 32;
+function normalizeCellText(text) {
+	return WHITESPACE.test(text) ? text.replace(WHITESPACE_ALL, " ") : text;
+}
+function prepareCellText(text, font) {
+	const prepared = prepareWithSegments(text, font, PREPARE_OPTIONS);
+	segmentsMeasured += prepared.segments.length;
+	return prepared;
+}
+function trimTrailingSpaces(text) {
+	let end = text.length;
+	while (end > 0 && text.charCodeAt(end - 1) === SPACE) end--;
+	return end === text.length ? text : text.slice(0, end);
+}
+var LruCache = class {
+	constructor(capacity) {
+		_defineProperty(this, "capacity", void 0);
+		_defineProperty(this, "entries", /* @__PURE__ */ new Map());
+		this.capacity = capacity;
+	}
+	get(key) {
+		const value = this.entries.get(key);
+		if (value !== void 0) {
+			this.entries.delete(key);
+			this.entries.set(key, value);
+		}
+		return value;
+	}
+	set(key, value) {
+		this.entries.delete(key);
+		if (this.entries.size >= this.capacity) this.entries.delete(this.entries.keys().next().value);
+		this.entries.set(key, value);
+	}
+};
+function createTextFitter(capacity = DEFAULT_CAPACITY) {
+	let cache = new LruCache(capacity);
+	let cacheFont;
+	let font = "";
+	let advance = 0;
+	let ellipsisWidth = -1;
+	let misses = 0;
+	let deferred = false;
+	const measureEllipsis = () => {
+		if (ellipsisWidth < 0) ellipsisWidth = measureNaturalWidth(prepareCellText("…", font));
+		return ellipsisWidth;
+	};
+	const cut = (overflow, contentWidth) => {
+		const available = contentWidth - measureEllipsis();
+		if (available <= 0) return "…";
+		return trimTrailingSpaces(layoutNextLine(overflow.prepared, available).text) + "…";
+	};
+	return {
+		beginFrame(nextFont, maxAdvance) {
+			misses = 0;
+			deferred = false;
+			advance = maxAdvance;
+			if (nextFont === cacheFont) return;
+			cache = new LruCache(capacity);
+			cacheFont = nextFont;
+			font = nextFont;
+			ellipsisWidth = -1;
+		},
+		fit(text, contentWidth) {
+			if (contentWidth <= 0) return "";
+			const drawn = normalizeCellText(text);
+			if (drawn.length * advance <= contentWidth) return drawn;
+			let entry = cache.get(drawn);
+			if (entry === void 0 || typeof entry === "number" && entry > contentWidth) {
+				if (misses >= 200) {
+					deferred = true;
+					return drawn;
+				}
+				misses++;
+				const prepared = prepareCellText(drawn, font);
+				const width = measureNaturalWidth(prepared);
+				entry = width > contentWidth ? {
+					prepared,
+					width,
+					fitWidth: NaN,
+					fitted: drawn
+				} : width;
+				cache.set(drawn, entry);
+			}
+			if (typeof entry === "number" || entry.width <= contentWidth) return drawn;
+			if (entry.fitWidth !== contentWidth) {
+				entry.fitted = cut(entry, contentWidth);
+				entry.fitWidth = contentWidth;
+			}
+			return entry.fitted;
+		},
+		hasDeferred() {
+			return deferred;
+		},
+		reserve(visibleCells) {
+			capacity = Math.max(capacity, Math.ceil(visibleCells) * 4);
+			cache.capacity = capacity;
+		},
+		trim() {
+			if (segmentsMeasured > capacity * 16) emptyPretextCaches();
+		},
+		reset() {
+			cacheFont = void 0;
+			ellipsisWidth = -1;
+		}
+	};
+}
+//#endregion
+export { DEFAULT_CAPACITY, createTextFitter, emptyPretextCaches, normalizeCellText, prepareCellText };

package/dist/grid/dist/model/tsv.js

@@ -0,0 +1,108 @@
+//#region ../grid/dist/model/tsv.js
+var CELL_BREAK = /[\t\n\r]/g;
+var LINE_BREAK = /\r?\n/;
+var FINAL_BREAK = /\r?\n$/;
+function serialize(rows) {
+	return rows.map((row) => `${row.map((value) => value.replace(CELL_BREAK, " ")).join("	")}\n`).join("");
+}
+function parse(text) {
+	if (text === "") return [];
+	return text.replace(FINAL_BREAK, "").split(LINE_BREAK).map((line) => line.split("	"));
+}
+function mergeSpans(spans) {
+	const sorted = [...spans].sort((a, b) => a.start - b.start);
+	const merged = [];
+	for (const span of sorted) {
+		const last = merged[merged.length - 1];
+		if (last && span.start <= last.end + 1) last.end = Math.max(last.end, span.end);
+		else merged.push({ ...span });
+	}
+	return merged;
+}
+var rowSpan = (range) => ({
+	start: range.startRow,
+	end: range.endRow
+});
+var colSpan = (range) => ({
+	start: range.startCol,
+	end: range.endCol
+});
+var sameSpan = (a, b) => a.start === b.start && a.end === b.end;
+function spanTotal(spans) {
+	let total = 0;
+	for (const span of spans) total += span.end - span.start + 1;
+	return total;
+}
+function cellCount(ranges) {
+	const edges = [...new Set(ranges.flatMap((range) => [range.startRow, range.endRow + 1]))].sort((a, b) => a - b);
+	let count = 0;
+	for (let index = 0; index + 1 < edges.length; index++) {
+		const top = edges[index];
+		const cols = ranges.filter((range) => range.startRow <= top && top <= range.endRow).map(colSpan);
+		count += (edges[index + 1] - top) * spanTotal(mergeSpans(cols));
+	}
+	return count;
+}
+var areaCellCount = (area) => spanTotal(area.rows) * spanTotal(area.cols);
+function copyableRanges(ranges) {
+	if (ranges.length === 0) return {
+		rows: [],
+		cols: []
+	};
+	const rows = ranges.map(rowSpan);
+	const cols = ranges.map(colSpan);
+	if (rows.every((span) => sameSpan(span, rows[0]))) return {
+		rows: [rows[0]],
+		cols: mergeSpans(cols)
+	};
+	if (cols.every((span) => sameSpan(span, cols[0]))) return {
+		rows: mergeSpans(rows),
+		cols: [cols[0]]
+	};
+	return null;
+}
+function copyRows(area, getCell) {
+	const rows = [];
+	for (const rowRun of area.rows) for (let row = rowRun.start; row <= rowRun.end; row++) {
+		const values = [];
+		for (const colRun of area.cols) for (let col = colRun.start; col <= colRun.end; col++) values.push(getCell(row, col));
+		rows.push(values);
+	}
+	return rows;
+}
+var covers = (range, row, col) => row >= range.startRow && row <= range.endRow && col >= range.startCol && col <= range.endCol;
+function fillTargets(ranges, value) {
+	const writes = [];
+	ranges.forEach((range, index) => {
+		const earlier = ranges.slice(0, index);
+		for (let row = range.startRow; row <= range.endRow; row++) for (let col = range.startCol; col <= range.endCol; col++) if (!earlier.some((other) => covers(other, row, col))) writes.push({
+			row,
+			col,
+			value
+		});
+	});
+	return writes;
+}
+function pasteCellCount(selection, matrix) {
+	if (matrix.length === 1 && matrix[0].length === 1) return cellCount(selection.ranges);
+	let count = 0;
+	for (const values of matrix) count += values.length;
+	return count;
+}
+function pasteTargets(selection, matrix) {
+	if (matrix.length === 1 && matrix[0].length === 1) return fillTargets(selection.ranges, matrix[0][0]);
+	const { row: top, col: left } = selection.active;
+	const writes = [];
+	matrix.forEach((values, rowOffset) => {
+		values.forEach((value, colOffset) => {
+			writes.push({
+				row: top + rowOffset,
+				col: left + colOffset,
+				value
+			});
+		});
+	});
+	return writes;
+}
+//#endregion
+export { areaCellCount, cellCount, copyRows, copyableRanges, fillTargets, parse, pasteCellCount, pasteTargets, serialize };

package/dist/grid/dist/model/viewport.js

@@ -0,0 +1,75 @@
+import { columnAt } from "./columns.js";
+//#region ../grid/dist/model/viewport.js
+var SCROLL_HEIGHT_CAP = 8e6;
+var DEFAULT_OVERSCAN = Object.freeze({
+	rows: 2,
+	cols: 1
+});
+function rowAt(y, rowHeight, rowCount) {
+	if (!(y >= 0) || !(rowHeight > 0)) return -1;
+	const row = Math.floor(y / rowHeight);
+	return row < rowCount ? row : -1;
+}
+function frozenCount(offsets, frozenColumns = 0) {
+	const count = Math.max(0, offsets.length - 1);
+	return Math.min(count, Math.max(0, Math.floor(frozenColumns) || 0));
+}
+function lastColumnBefore(offsets, x) {
+	const count = offsets.length - 1;
+	if (count < 1 || !(x > offsets[0])) return -1;
+	if (x > offsets[count - 1]) return count - 1;
+	const column = columnAt(offsets, x);
+	return offsets[column] === x ? column - 1 : column;
+}
+function visibleRange(scrollTop, scrollLeft, size, rowHeight, offsets, overscan = DEFAULT_OVERSCAN) {
+	const { width, height, rowCount } = size;
+	const count = Math.max(0, offsets.length - 1);
+	const frozen = frozenCount(offsets, size.frozenColumns);
+	const top = Math.max(0, scrollTop);
+	const left = Math.max(0, scrollLeft);
+	let rowStart = 0;
+	let rowEnd = -1;
+	if (rowCount > 0 && height > 0 && rowHeight > 0) {
+		const firstRow = Math.floor(top / rowHeight);
+		const lastRow = Math.ceil((top + height) / rowHeight) - 1;
+		rowEnd = Math.min(rowCount - 1, lastRow + overscan.rows);
+		rowStart = Math.min(rowEnd + 1, Math.max(0, firstRow - overscan.rows));
+	}
+	const frozenEnd = Math.min(frozen - 1, lastColumnBefore(offsets, width));
+	const viewLeft = offsets[frozen] + left;
+	const firstColumn = frozen < count ? columnAt(offsets, viewLeft) : -1;
+	let colStart = frozen;
+	let colEnd = frozen - 1;
+	if (firstColumn >= 0 && width > offsets[frozen]) {
+		colStart = Math.max(frozen, firstColumn - overscan.cols);
+		colEnd = Math.min(count - 1, lastColumnBefore(offsets, left + width) + overscan.cols);
+	}
+	return {
+		rowStart,
+		rowEnd,
+		colStart,
+		colEnd,
+		frozenEnd
+	};
+}
+function scrollMapping(contentHeight, cap = SCROLL_HEIGHT_CAP) {
+	const height = Math.max(0, contentHeight);
+	const ratio = height > cap ? height / cap : 1;
+	const contentMax = (viewportHeight) => Math.max(0, height - viewportHeight);
+	return {
+		ratio,
+		domHeight: (viewportHeight) => contentMax(viewportHeight) / ratio + Math.min(height, Math.max(0, viewportHeight)),
+		toContent: (domTop, viewportHeight) => {
+			const max = contentMax(viewportHeight);
+			if (ratio > 1 && domTop >= max / ratio - 1) return max;
+			return Math.min(max, Math.max(0, domTop * ratio));
+		},
+		toDom: (contentTop, viewportHeight) => Math.min(contentMax(viewportHeight), Math.max(0, contentTop)) / ratio
+	};
+}
+function rowHeaderWidth(rowCount, digitWidth, padding = 16) {
+	const digits = String(Math.max(1, Math.floor(rowCount))).length;
+	return Math.max(40, Math.ceil(digits * digitWidth + padding));
+}
+//#endregion
+export { DEFAULT_OVERSCAN, SCROLL_HEIGHT_CAP, frozenCount, rowAt, rowHeaderWidth, scrollMapping, visibleRange };

package/dist/grid/dist/scene/GridScene.js

@@ -0,0 +1,64 @@
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { scrollbars } from "./draw/scrollbar.js";
+import { activeBox, fillBoxes, rangeBox, regionView } from "./overlay.js";
+import { bindScene, paintBody, paintColumnHeader, paintColumnHighlight, paintCorner, paintFrozenBody, paintFrozenHeader, paintFrozenHighlight, paintRowHeader, paintRowHighlight } from "./paint.js";
+import { onBeforeFlush, requestFlush } from "../../../r-html-konva/dist/batchDraw.js";
+import { konva, renderKonva } from "../../../r-html-konva/dist/host.js";
+//#region ../grid/dist/scene/GridScene.js
+var hasArea = (rect) => rect.width > 0 && rect.height > 0;
+var regionShape = (name, rect, sceneFunc) => konva`<k-shape name=${name} x=${rect.x} y=${rect.y} width=${rect.width} height=${rect.height} listening=${false} sceneFunc=${sceneFunc} />`;
+var clipGroup = (name, rect, children) => konva`<k-group name=${name} x=${rect.x} y=${rect.y} clipX=${0} clipY=${0} clipWidth=${rect.width} clipHeight=${rect.height} visible=${hasArea(rect)} listening=${false}>${children}</k-group>`;
+var headerHighlight = (name, rect, sceneFunc) => clipGroup(`${name}-clip`, rect, konva`<k-shape name=${name} x=${0} y=${0} width=${rect.width} height=${rect.height} listening=${false} sceneFunc=${sceneFunc} />`);
+var barRect = (name, visible, rect, fill, cornerRadius = 0) => konva`<k-rect name=${name} visible=${visible} x=${rect.x} y=${rect.y} width=${rect.width} height=${rect.height} cornerRadius=${cornerRadius} fill=${fill} listening=${false} />`;
+function sizeStage(stage, size) {
+	if (size.height === stage.height()) {
+		stage.width(size.width);
+		return;
+	}
+	stage.attrs.width = size.width;
+	stage.height(size.height);
+}
+var GridScene = (props) => {
+	const { stage, scene } = props;
+	const bodyRef = createRef();
+	const overlayRef = createRef();
+	const unbinds = [bindScene(stage, scene)];
+	onMounted(() => {
+		const body = bodyRef.value;
+		const overlay = overlayRef.value;
+		if (body && overlay) unbinds.push(scene.bindLayers(body, overlay));
+		unbinds.push(onBeforeFlush(() => {
+			scene.fitter.trim();
+			const size = scene.takePendingSize();
+			if (size) sizeStage(stage, size);
+		}));
+		requestFlush();
+	});
+	onUnmounted(() => {
+		unbinds.splice(0).forEach((unbind) => unbind());
+	});
+	return () => {
+		const { layout, scrollTop, scrollLeft, selection, theme } = scene.observed;
+		const geometry = {
+			offsets: scene.observed.offsets,
+			rowHeight: scene.observed.rowHeight,
+			rowCount: scene.observed.rowCount
+		};
+		const bars = scrollbars(layout, scrollTop, scrollLeft);
+		const cellOverlay = (frozen) => {
+			const view = regionView(layout, frozen, scrollTop, scrollLeft);
+			const active = activeBox(selection.active, frozen, layout.frozenCount, view, geometry);
+			return konva`<k-group name=${frozen ? "grid-frozen-scroll" : "grid-body-scroll"} x=${frozen ? 0 : -view.left} y=${-scrollTop} listening=${false}>${selection.ranges.flatMap((range) => {
+				const edge = rangeBox(range, view, geometry, frozen);
+				return [...fillBoxes(range, selection.active, view, geometry).map((box) => konva`<k-rect name="grid-range-fill" visible=${box.visible} x=${box.x} y=${box.y} width=${box.width} height=${box.height} fill=${theme.selectionFill} listening=${false} />`), konva`<k-rect name="grid-range" visible=${edge.visible} x=${edge.x} y=${edge.y} width=${edge.width} height=${edge.height} stroke=${theme.selectionBorder} strokeWidth=${1} perfectDrawEnabled=${false} listening=${false} />`];
+			})}<k-rect name="grid-active-cell" visible=${active.visible} x=${active.x} y=${active.y} width=${active.width} height=${active.height} stroke=${theme.activeCellBorder} strokeWidth=${2} perfectDrawEnabled=${false} listening=${false} /></k-group>`;
+		};
+		return konva`<k-layer name="grid-body" listening=${false} ${ref(bodyRef)}>${regionShape("grid-body-cells", layout.body, paintBody)}${regionShape("grid-frozen-cells", layout.frozenBody, paintFrozenBody)}${regionShape("grid-column-header", layout.columnHeader, paintColumnHeader)}${regionShape("grid-frozen-header", layout.frozenHeader, paintFrozenHeader)}${regionShape("grid-row-header", layout.rowHeader, paintRowHeader)}${regionShape("grid-corner", layout.corner, paintCorner)}</k-layer><k-layer name="grid-overlay" listening=${false} ${ref(overlayRef)}>${clipGroup("grid-body-clip", layout.body, cellOverlay(false))}${clipGroup("grid-frozen-clip", layout.frozenBody, cellOverlay(true))}${headerHighlight("grid-column-highlight", layout.columnHeader, paintColumnHighlight)}${headerHighlight("grid-frozen-highlight", layout.frozenHeader, paintFrozenHighlight)}${headerHighlight("grid-row-highlight", layout.rowHeader, paintRowHighlight)}${barRect("grid-vertical-track", bars.vertical.visible, bars.vertical.track, theme.scrollbarTrack)}${barRect("grid-vertical-thumb", bars.vertical.visible, bars.vertical.thumb, theme.scrollbarThumb, 4)}${barRect("grid-horizontal-track", bars.horizontal.visible, bars.horizontal.track, theme.scrollbarTrack)}${barRect("grid-horizontal-thumb", bars.horizontal.visible, bars.horizontal.thumb, theme.scrollbarThumb, 4)}</k-layer>`;
+	};
+};
+function renderGridScene(stage, scene) {
+	renderKonva(stage, konva`<${GridScene} .stage=${stage} .scene=${scene} />`);
+}
+//#endregion
+export { renderGridScene };

package/dist/grid/dist/scene/draw/cells.js

@@ -0,0 +1,61 @@
+import { baselineOffset, clipTo, setTextState } from "./context.js";
+//#region ../grid/dist/scene/draw/cells.js
+function drawCells(context, block, paint) {
+	const { width, height, left, top, rowStart, rowEnd, rowHeight } = block;
+	const { offsets, columns } = block;
+	const { theme, fitter, getCell, getCellStyle } = paint;
+	clipTo(context, 0, 0, width, height);
+	context.fillStyle = theme.background;
+	context.fillRect(0, 0, width, height);
+	const firstY = rowStart * rowHeight - top;
+	const lastX = offsets[block.colEnd + 1] - left;
+	const lineWidth = Math.max(0, Math.min(width, lastX));
+	const lineHeight = Math.max(0, Math.min(height, (rowEnd + 1) * rowHeight - top));
+	const baseline = baselineOffset(rowHeight, paint.metrics);
+	let fill = "";
+	setTextState(context, paint.font);
+	context.textAlign = "left";
+	for (let col = block.colStart; col <= block.colEnd; col++) {
+		const x = offsets[col] - left;
+		const cellWidth = offsets[col + 1] - offsets[col];
+		const contentWidth = cellWidth - 16;
+		const readonlyColumn = columns[col].readonly === true;
+		clipTo(context, x, 0, cellWidth, height);
+		for (let row = rowStart, y = firstY; row <= rowEnd; row++) {
+			const style = getCellStyle?.(row, col);
+			const background = style?.background ?? (readonlyColumn || style?.readonly ? theme.readonlyBackground : void 0);
+			if (background !== void 0) {
+				fill = background;
+				context.fillStyle = background;
+				context.fillRect(x, y, cellWidth, rowHeight);
+			}
+			const text = getCell(row, col);
+			const drawn = text ? fitter.fit(text, contentWidth) : "";
+			if (drawn) {
+				const colour = style?.color ?? theme.text;
+				if (colour !== fill) {
+					fill = colour;
+					context.fillStyle = colour;
+				}
+				context.fillText(drawn, x + 8, y + baseline);
+			}
+			y += rowHeight;
+		}
+		context.restore();
+		fill = theme.gridLine;
+		context.fillStyle = fill;
+		context.fillRect(x + cellWidth - 1, 0, 1, lineHeight);
+	}
+	context.fillStyle = theme.gridLine;
+	for (let row = rowStart, y = firstY; row <= rowEnd; row++) {
+		y += rowHeight;
+		context.fillRect(0, y - 1, lineWidth, 1);
+	}
+	if (block.frozenEdge) {
+		context.fillStyle = theme.frozenBorder;
+		context.fillRect(width - 1, 0, 1, height);
+	}
+	context.restore();
+}
+//#endregion
+export { drawCells };

package/dist/grid/dist/scene/draw/context.js

@@ -0,0 +1,17 @@
+//#region ../grid/dist/scene/draw/context.js
+function baselineOffset(rowHeight, metrics) {
+	return Math.round((rowHeight + metrics.ascent - metrics.descent) / 2);
+}
+function clipTo(context, x, y, width, height) {
+	context.save();
+	context.beginPath();
+	context.rect(x, y, width, height);
+	context.clip();
+}
+function setTextState(context, font) {
+	context.font = font;
+	context.textBaseline = "alphabetic";
+	context.direction = "ltr";
+}
+//#endregion
+export { baselineOffset, clipTo, setTextState };