@dineug/erd-editor 4.2.0 → 5.0.0

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

@@ -0,0 +1,48 @@
+import { headerState } from "../../model/selection.js";
+import { baselineOffset, clipTo, setTextState } from "./context.js";
+//#region ../grid/dist/scene/draw/headers.js
+function drawHeaders(context, block, paint, selection) {
+	const { axis, width, height, origin, rowHeight, offsets, columns } = block;
+	const { theme, fitter } = paint;
+	const baseline = baselineOffset(rowHeight, paint.metrics);
+	const column = axis === "column";
+	const edges = (x, y, w, h) => {
+		context.fillStyle = theme.frozenBorder;
+		if (block.bottomEdge && y + h > height - 1) context.fillRect(x, height - 1, w, 1);
+		if (block.rightEdge && x + w > width - 1) context.fillRect(width - 1, y, 1, h);
+	};
+	clipTo(context, 0, 0, width, height);
+	setTextState(context, paint.font);
+	context.textAlign = "center";
+	if (!selection) {
+		context.fillStyle = theme.headerBackground;
+		context.fillRect(0, 0, width, height);
+	}
+	for (let index = block.start; index <= block.end; index++) {
+		const state = selection ? headerState(selection, index) : "none";
+		if (selection && state === "none") continue;
+		const x = column ? offsets[index] - origin : 0;
+		const y = column ? 0 : index * rowHeight - origin;
+		const w = column ? offsets[index + 1] - offsets[index] : width;
+		const h = column ? height : rowHeight;
+		if (state !== "none") {
+			context.fillStyle = state === "covered" ? theme.fullSelectionBackground : theme.selectedHeaderBackground;
+			context.fillRect(x, y, w, h);
+		}
+		const label = column ? fitter.fit(columns[index].label, w - 16) : String(index + 1);
+		if (label) {
+			clipTo(context, x, y, w, h);
+			context.fillStyle = state === "covered" ? theme.selectedHeaderText : theme.headerText;
+			context.fillText(label, x + w / 2, y + baseline);
+			context.restore();
+		}
+		context.fillStyle = theme.gridLine;
+		if (column) context.fillRect(x + w - 1, 0, 1, h);
+		else context.fillRect(0, y + h - 1, w, 1);
+		if (selection) edges(x, y, w, h);
+	}
+	if (!selection) edges(0, 0, width, height);
+	context.restore();
+}
+//#endregion
+export { drawHeaders };

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

@@ -0,0 +1,70 @@
+//#region ../grid/dist/scene/draw/scrollbar.js
+var THUMB_THICKNESS = 8;
+THUMB_THICKNESS / 2;
+var NONE = Object.freeze({
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+});
+var HIDDEN = Object.freeze({
+	visible: false,
+	track: NONE,
+	thumb: NONE
+});
+function thumbSpan(span, max, offset) {
+	const length = Math.min(span, Math.max(24, span * span / (span + max)));
+	return {
+		start: max > 0 ? (span - length) * offset / max : 0,
+		length
+	};
+}
+function scrollbars(layout, scrollTop, scrollLeft) {
+	const { width, height, body } = layout;
+	let vertical = HIDDEN;
+	let horizontal = HIDDEN;
+	if (layout.verticalBar) {
+		const x = width - 12;
+		const thumb = thumbSpan(body.height, layout.maxScrollTop, scrollTop);
+		vertical = {
+			visible: true,
+			track: {
+				x,
+				y: 0,
+				width: 12,
+				height
+			},
+			thumb: {
+				x: x + 2,
+				y: body.y + thumb.start,
+				width: THUMB_THICKNESS,
+				height: thumb.length
+			}
+		};
+	}
+	if (layout.horizontalBar) {
+		const y = height - 12;
+		const thumb = thumbSpan(body.width, layout.maxScrollLeft, scrollLeft);
+		horizontal = {
+			visible: true,
+			track: {
+				x: 0,
+				y,
+				width: width - (layout.verticalBar ? 12 : 0),
+				height: 12
+			},
+			thumb: {
+				x: body.x + thumb.start,
+				y: y + 2,
+				width: thumb.length,
+				height: THUMB_THICKNESS
+			}
+		};
+	}
+	return {
+		vertical,
+		horizontal
+	};
+}
+//#endregion
+export { scrollbars };

package/dist/grid/dist/scene/layout.js

@@ -0,0 +1,62 @@
+import { frozenCount, rowHeaderWidth } from "../model/viewport.js";
+//#region ../grid/dist/scene/layout.js
+var rect = (x, y, width, height) => ({
+	x,
+	y,
+	width: Math.max(0, width),
+	height: Math.max(0, height)
+});
+function computeLayout(input) {
+	const { width, height, rowHeight, offsets } = input;
+	const rowCount = Math.max(0, Math.floor(input.rowCount) || 0);
+	const headerHeight = rowHeight;
+	const headerWidth = rowHeaderWidth(rowCount, input.digitWidth);
+	const contentWidth = offsets[offsets.length - 1] ?? 0;
+	const contentHeight = rowCount * rowHeight;
+	const frozen = frozenCount(offsets, input.frozenColumns);
+	const scrollOrigin = offsets[frozen] ?? 0;
+	let verticalBar = false;
+	let horizontalBar = false;
+	let cellWidth = 0;
+	let cellHeight = 0;
+	for (;;) {
+		cellWidth = Math.max(0, width - headerWidth - (verticalBar ? 12 : 0));
+		cellHeight = Math.max(0, height - headerHeight - (horizontalBar ? 12 : 0));
+		const vertical = contentHeight > cellHeight;
+		const horizontal = contentWidth > cellWidth;
+		if (vertical === verticalBar && horizontal === horizontalBar) break;
+		verticalBar = vertical;
+		horizontalBar = horizontal;
+	}
+	if (horizontalBar && scrollOrigin >= cellWidth) {
+		horizontalBar = false;
+		cellHeight = Math.max(0, height - headerHeight);
+	}
+	const frozenWidth = Math.min(scrollOrigin, cellWidth);
+	const scrollingWidth = cellWidth - frozenWidth;
+	return {
+		width,
+		height,
+		headerHeight,
+		rowHeaderWidth: headerWidth,
+		cellWidth,
+		cellHeight,
+		frozenCount: frozen,
+		frozenWidth,
+		scrollOrigin,
+		contentWidth,
+		contentHeight,
+		maxScrollTop: Math.max(0, contentHeight - cellHeight),
+		maxScrollLeft: horizontalBar ? contentWidth - cellWidth : 0,
+		verticalBar,
+		horizontalBar,
+		corner: rect(0, 0, headerWidth, headerHeight),
+		columnHeader: rect(headerWidth + frozenWidth, 0, scrollingWidth, headerHeight),
+		frozenHeader: rect(headerWidth, 0, frozenWidth, headerHeight),
+		rowHeader: rect(0, headerHeight, headerWidth, cellHeight),
+		frozenBody: rect(headerWidth, headerHeight, frozenWidth, cellHeight),
+		body: rect(headerWidth + frozenWidth, headerHeight, scrollingWidth, cellHeight)
+	};
+}
+//#endregion
+export { computeLayout };

package/dist/grid/dist/scene/overlay.js

@@ -0,0 +1,144 @@
+//#region ../grid/dist/scene/overlay.js
+var GRID_LINE = 1;
+var HIDDEN_BOX = Object.freeze({
+	visible: false,
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+});
+var NO_FILL = Object.freeze([
+	HIDDEN_BOX,
+	HIDDEN_BOX,
+	HIDDEN_BOX,
+	HIDDEN_BOX
+]);
+function regionView(layout, frozen, scrollTop, scrollLeft) {
+	const region = frozen ? layout.frozenBody : layout.body;
+	const left = frozen ? 0 : layout.scrollOrigin + scrollLeft;
+	return {
+		left,
+		top: scrollTop,
+		right: left + region.width,
+		bottom: scrollTop + region.height
+	};
+}
+function heldRange(range, geometry) {
+	const endCol = Math.min(range.endCol, geometry.offsets.length - 2);
+	const endRow = Math.min(range.endRow, geometry.rowCount - 1);
+	if (range.startCol > endCol || range.startRow > endRow) return null;
+	return {
+		...range,
+		endRow,
+		endCol
+	};
+}
+function cellsRect(range, geometry) {
+	const { offsets, rowHeight } = geometry;
+	return {
+		left: offsets[range.startCol],
+		top: range.startRow * rowHeight,
+		right: offsets[range.endCol + 1],
+		bottom: (range.endRow + 1) * rowHeight
+	};
+}
+function cellRect(cell, geometry) {
+	const { row, col } = cell;
+	return cellsRect({
+		startRow: row,
+		startCol: col,
+		endRow: row,
+		endCol: col
+	}, geometry);
+}
+var outOfView = (rect, view) => rect.right <= view.left || rect.left >= view.right || rect.bottom <= view.top || rect.top >= view.bottom;
+var edgeOutOfView = (rect, view, across = true) => rect.right <= view.left || rect.left - (across ? GRID_LINE : 0) >= view.right || rect.bottom <= view.top || rect.top - GRID_LINE >= view.bottom;
+function leadingEdge(start, viewStart) {
+	if (start > viewStart) return start - GRID_LINE;
+	return start === viewStart ? start : viewStart - 1;
+}
+function rangeBox(range, view, geometry, frozen = false) {
+	const held = heldRange(range, geometry);
+	if (!held) return HIDDEN_BOX;
+	const rect = cellsRect(held, geometry);
+	if (edgeOutOfView(rect, view, !frozen)) return HIDDEN_BOX;
+	const left = leadingEdge(rect.left, view.left);
+	const top = leadingEdge(rect.top, view.top);
+	const right = Math.min(rect.right, view.right + 1);
+	const bottom = Math.min(rect.bottom, view.bottom + 1);
+	const half = 1 / 2;
+	return {
+		visible: true,
+		x: left + half,
+		y: top + half,
+		width: right - left - 1,
+		height: bottom - top - 1
+	};
+}
+function fillBox(rect, view) {
+	const left = Math.max(rect.left, view.left);
+	const top = Math.max(rect.top, view.top);
+	const right = Math.min(rect.right, view.right);
+	const bottom = Math.min(rect.bottom, view.bottom);
+	if (right <= left || bottom <= top) return HIDDEN_BOX;
+	return {
+		visible: true,
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function fillBoxes(range, active, view, geometry) {
+	const held = heldRange(range, geometry);
+	if (!held) return NO_FILL;
+	const rect = cellsRect(held, geometry);
+	if (outOfView(rect, view)) return NO_FILL;
+	const { row, col } = active;
+	if (row < held.startRow || row > held.endRow || col < held.startCol || col > held.endCol) return [
+		fillBox(rect, view),
+		HIDDEN_BOX,
+		HIDDEN_BOX,
+		HIDDEN_BOX
+	];
+	const cell = cellRect(active, geometry);
+	return [
+		fillBox({
+			...rect,
+			bottom: cell.top
+		}, view),
+		fillBox({
+			...rect,
+			top: cell.bottom
+		}, view),
+		fillBox({
+			...cell,
+			left: rect.left,
+			right: cell.left
+		}, view),
+		fillBox({
+			...cell,
+			left: cell.right,
+			right: rect.right
+		}, view)
+	];
+}
+function activeBox(active, frozen, frozenCount, view, geometry) {
+	const { offsets, rowCount } = geometry;
+	const { row, col } = active;
+	if (row < 0 || row >= rowCount || col < 0 || col >= offsets.length - 1 || col < frozenCount !== frozen) return HIDDEN_BOX;
+	const cell = cellRect(active, geometry);
+	if (edgeOutOfView(cell, view)) return HIDDEN_BOX;
+	const left = cell.left === view.left ? cell.left : cell.left - GRID_LINE;
+	const top = cell.top === view.top ? cell.top : cell.top - GRID_LINE;
+	const half = 1;
+	return {
+		visible: true,
+		x: left + half,
+		y: top + half,
+		width: cell.right - left - 2,
+		height: cell.bottom - top - 2
+	};
+}
+//#endregion
+export { HIDDEN_BOX, activeBox, fillBoxes, rangeBox, regionView };

package/dist/grid/dist/scene/paint.js

@@ -0,0 +1,123 @@
+import { drawCells } from "./draw/cells.js";
+import { drawHeaders } from "./draw/headers.js";
+//#region ../grid/dist/scene/paint.js
+var scenes = /* @__PURE__ */ new WeakMap();
+function bindScene(stage, scene) {
+	scenes.set(stage, scene);
+	return () => {
+		if (scenes.get(stage) === scene) scenes.delete(stage);
+	};
+}
+function sceneOf(shape) {
+	const stage = shape.getStage();
+	return stage ? scenes.get(stage) : void 0;
+}
+function paintCells(context, shape, frozen) {
+	const scene = sceneOf(shape);
+	if (!scene) return;
+	const { state } = scene;
+	const { layout } = state;
+	const { range } = scene.frame;
+	const region = frozen ? layout.frozenBody : layout.body;
+	drawCells(context._context, {
+		width: region.width,
+		height: region.height,
+		left: frozen ? 0 : layout.scrollOrigin + state.scrollLeft,
+		top: state.scrollTop,
+		rowStart: range.rowStart,
+		rowEnd: range.rowEnd,
+		colStart: frozen ? 0 : range.colStart,
+		colEnd: frozen ? range.frozenEnd : range.colEnd,
+		rowHeight: state.rowHeight,
+		offsets: state.offsets,
+		columns: state.columns,
+		frozenEdge: frozen
+	}, {
+		theme: state.theme,
+		font: state.font,
+		metrics: state.metrics,
+		fitter: scene.fitter,
+		getCell: state.getCell,
+		getCellStyle: state.getCellStyle
+	});
+}
+function headerBlock(scene, region) {
+	const { state, frame } = scene;
+	const { layout } = state;
+	const { range } = frame;
+	const shared = {
+		rowHeight: state.rowHeight,
+		offsets: state.offsets,
+		columns: state.columns
+	};
+	switch (region) {
+		case "corner": return {
+			...shared,
+			width: layout.corner.width,
+			height: layout.corner.height,
+			axis: "column",
+			origin: 0,
+			start: 0,
+			end: -1,
+			bottomEdge: true,
+			rightEdge: true
+		};
+		case "column": return {
+			...shared,
+			width: layout.columnHeader.width,
+			height: layout.columnHeader.height,
+			axis: "column",
+			origin: layout.scrollOrigin + state.scrollLeft,
+			start: range.colStart,
+			end: range.colEnd,
+			bottomEdge: true,
+			rightEdge: false
+		};
+		case "frozen": return {
+			...shared,
+			width: layout.frozenHeader.width,
+			height: layout.frozenHeader.height,
+			axis: "column",
+			origin: 0,
+			start: 0,
+			end: range.frozenEnd,
+			bottomEdge: true,
+			rightEdge: true
+		};
+		case "row": return {
+			...shared,
+			width: layout.rowHeader.width,
+			height: layout.rowHeader.height,
+			axis: "row",
+			origin: state.scrollTop,
+			start: range.rowStart,
+			end: range.rowEnd,
+			bottomEdge: false,
+			rightEdge: true
+		};
+	}
+}
+function paintHeaders(context, shape, region, highlight) {
+	const scene = sceneOf(shape);
+	if (!scene) return;
+	const { state, frame } = scene;
+	let selection;
+	if (highlight) selection = region === "row" ? frame.rows : frame.columns;
+	drawHeaders(context._context, headerBlock(scene, region), {
+		theme: state.theme,
+		font: state.font,
+		metrics: state.metrics,
+		fitter: scene.fitter
+	}, selection);
+}
+var paintBody = (context, shape) => paintCells(context, shape, false);
+var paintFrozenBody = (context, shape) => paintCells(context, shape, true);
+var paintColumnHeader = (context, shape) => paintHeaders(context, shape, "column", false);
+var paintFrozenHeader = (context, shape) => paintHeaders(context, shape, "frozen", false);
+var paintRowHeader = (context, shape) => paintHeaders(context, shape, "row", false);
+var paintCorner = (context, shape) => paintHeaders(context, shape, "corner", false);
+var paintColumnHighlight = (context, shape) => paintHeaders(context, shape, "column", true);
+var paintFrozenHighlight = (context, shape) => paintHeaders(context, shape, "frozen", true);
+var paintRowHighlight = (context, shape) => paintHeaders(context, shape, "row", true);
+//#endregion
+export { bindScene, paintBody, paintColumnHeader, paintColumnHighlight, paintCorner, paintFrozenBody, paintFrozenHeader, paintFrozenHighlight, paintRowHeader, paintRowHighlight };