@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/primitives/color-picker/ColorPicker.styles.js

@@ -0,0 +1,219 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { fontSize1 } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/color-picker/ColorPicker.styles.ts
+var container = css`
+  position: absolute;
+`;
+var panel = css`
+  position: relative;
+  z-index: 2;
+  width: 220px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 4px;
+  background-color: var(--context-menu-background);
+  ${floatingShadow};
+  outline: none;
+  user-select: none;
+`;
+var body = css`
+  padding: 10px 10px 8px;
+`;
+var area = css`
+  position: relative;
+  height: 150px;
+  border-radius: 2px;
+  background-image:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent);
+  cursor: crosshair;
+  touch-action: none;
+  forced-color-adjust: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var areaThumb = css`
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: translate(-5px, -5px);
+  box-shadow:
+    0 0 0 1.5px #fff,
+    0 0 1px 2px rgba(0, 0, 0, 0.4),
+    inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+`;
+var controls = css`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  margin-top: 4px;
+`;
+var iconButton = css`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var hue = css`
+  position: relative;
+  flex: 1;
+  height: 10px;
+  border-radius: 2px;
+  background-image: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 16.667%,
+    #0f0 33.333%,
+    #0ff 50%,
+    #00f 66.667%,
+    #f0f 83.333%,
+    #f00 100%
+  );
+  cursor: pointer;
+  touch-action: none;
+  forced-color-adjust: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -7px 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var hueThumb = css`
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 4px;
+  border-radius: 1px;
+  transform: translateX(-2px);
+  background-color: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+`;
+var preview = css`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px var(--context-menu-border);
+  forced-color-adjust: none;
+`;
+var fields = css`
+  display: flex;
+  gap: 6px;
+  padding: 0 10px 8px;
+`;
+var field = css`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+`;
+var hexField = css`
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  min-width: 58px;
+`;
+var input = css`
+  width: 100%;
+  height: 22px;
+  padding: 0 4px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 2px;
+  ${fontSize1};
+
+  &:focus {
+    border-color: var(--input-active);
+  }
+`;
+var fieldLabel = css`
+  margin-top: 2px;
+  text-align: center;
+  color: var(--foreground);
+  ${fontSize1};
+`;
+var swatchArea = css`
+  padding: 10px 10px 0;
+  border-top: 1px solid var(--context-menu-border);
+`;
+var swatches = css`
+  display: grid;
+  grid-template-columns: repeat(8, 16px);
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+var caption = css`
+  margin-bottom: 6px;
+  color: var(--foreground);
+  ${fontSize1};
+`;
+var swatch = css`
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 1px var(--context-menu-border);
+  forced-color-adjust: none;
+
+  &[aria-checked='true'] {
+    box-shadow:
+      inset 0 0 0 1px var(--context-menu-border),
+      0 0 0 2px var(--context-menu-background),
+      0 0 0 3px var(--gray-color-12);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 3px;
+  }
+`;
+var clear = css`
+  display: block;
+  width: 100%;
+  height: 28px;
+  padding: 0 12px;
+  border-top: 1px solid var(--context-menu-border);
+  border-radius: 0 0 3px 3px;
+  color: var(--foreground);
+  cursor: pointer;
+  ${fontSize1};
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: -2px;
+  }
+`;
+//#endregion
+export { area, areaThumb, body, caption, clear, container, controls, field, fieldLabel, fields, hexField, hue, hueThumb, iconButton, input, panel, preview, swatch, swatchArea, swatches };

package/dist/components/primitives/color-picker/colorModel.js

@@ -0,0 +1,116 @@
+import { toOpaqueHex } from "../../../utils/tableColor.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/color-picker/colorModel.ts
+var COARSE_STEP = 10;
+var PAGE_STEP = 10;
+var HEX_DIGITS = /^[0-9a-f]+$/i;
+var COMPLETE_HEX = /^#?(?:[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var CHANNEL_DIGITS = /^\d{1,3}$/;
+function hsvToRgb({ h, s, v }) {
+	const f = (n) => {
+		const k = (n + h / 60) % 6;
+		return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+	};
+	return [
+		f(5),
+		f(3),
+		f(1)
+	];
+}
+function rgbToHsv([r, g, b], previous) {
+	const max = Math.max(r, g, b);
+	const c = max - Math.min(r, g, b);
+	const s = max === 0 ? previous.s : c / max;
+	let h = previous.h;
+	if (c !== 0) {
+		if (max === r) h = 60 * ((g - b) / c % 6);
+		else if (max === g) h = 60 * ((b - r) / c + 2);
+		else h = 60 * ((r - g) / c + 4);
+		h = (h % 360 + 360) % 360;
+	}
+	return {
+		h,
+		s,
+		v: max / 255
+	};
+}
+function hsvToHex(hsv) {
+	return `#${hsvToRgb(hsv).map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+function hexToHsv(hex, previous) {
+	return rgbToHsv([
+		1,
+		3,
+		5
+	].map((offset) => parseInt(hex.slice(offset, offset + 2), 16)), previous);
+}
+function parseHexInput(text) {
+	const value = text.trim();
+	return toOpaqueHex(HEX_DIGITS.test(value) ? `#${value}` : value);
+}
+function isCompleteHexInput(text) {
+	return COMPLETE_HEX.test(text.trim());
+}
+function parseChannelInput(text) {
+	const value = text.trim();
+	return CHANNEL_DIGITS.test(value) ? Math.min(Number(value), 255) : null;
+}
+var toUnit = (percent) => clamp(percent, 0, 100) / 100;
+function stepArea(hsv, key, coarse) {
+	const step = coarse ? COARSE_STEP : 1;
+	const s = Math.round(hsv.s * 100);
+	const v = Math.round(hsv.v * 100);
+	switch (key) {
+		case "ArrowLeft": return {
+			...hsv,
+			s: toUnit(s - step)
+		};
+		case "ArrowRight": return {
+			...hsv,
+			s: toUnit(s + step)
+		};
+		case "ArrowDown": return {
+			...hsv,
+			v: toUnit(v - step)
+		};
+		case "ArrowUp": return {
+			...hsv,
+			v: toUnit(v + step)
+		};
+		case "PageDown": return {
+			...hsv,
+			v: toUnit(v - PAGE_STEP)
+		};
+		case "PageUp": return {
+			...hsv,
+			v: toUnit(v + PAGE_STEP)
+		};
+		case "Home": return {
+			...hsv,
+			s: 0
+		};
+		case "End": return {
+			...hsv,
+			s: 1
+		};
+		default: return null;
+	}
+}
+function stepHue(h, key, coarse) {
+	const step = coarse ? COARSE_STEP : 1;
+	const degrees = Math.round(h);
+	const hold = (value) => clamp(value, 0, 360);
+	switch (key) {
+		case "ArrowLeft":
+		case "ArrowDown": return hold(degrees - step);
+		case "ArrowRight":
+		case "ArrowUp": return hold(degrees + step);
+		case "PageDown": return hold(degrees - PAGE_STEP);
+		case "PageUp": return hold(degrees + PAGE_STEP);
+		case "Home": return 0;
+		case "End": return 360;
+		default: return null;
+	}
+}
+//#endregion
+export { hexToHsv, hsvToHex, hsvToRgb, isCompleteHexInput, parseChannelInput, parseHexInput, rgbToHsv, stepArea, stepHue };

package/dist/components/primitives/color-picker/presetColors.js

@@ -0,0 +1,25 @@
+import { Palette } from "../../../themes/radix-ui-theme.js";
+import { get } from "es-toolkit/compat";
+var PRESET_COLORS = [
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"teal",
+	"cyan",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"pink",
+	"crimson",
+	"brown",
+	"gray"
+].map((hue) => ({
+	color: get(Palette, [hue, `${hue}9`]),
+	labelKey: `colorPicker.preset.${hue}`
+}));
+//#endregion
+export { PRESET_COLORS };

package/dist/components/primitives/color-picker/resolveColor.js

@@ -0,0 +1,25 @@
+import { toOpaqueHex } from "../../../utils/tableColor.js";
+//#region src/components/primitives/color-picker/resolveColor.ts
+var GROUNDS = ["#000000", "#ffffff"];
+function resolveColor(color) {
+	const value = color.trim();
+	if (!value) return null;
+	const hex = toOpaqueHex(value);
+	if (hex) return hex;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return null;
+	const readings = GROUNDS.map((ground) => {
+		context.fillStyle = ground;
+		context.fillStyle = value;
+		return String(context.fillStyle);
+	});
+	if (readings[0] !== readings[1]) return null;
+	return toOpaqueHex(readings[0]) ?? paintedHex(context);
+}
+function paintedHex(context) {
+	context.fillRect(0, 0, 1, 1);
+	const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+	return a ? toOpaqueHex(`rgb(${r}, ${g}, ${b})`) : null;
+}
+//#endregion
+export { resolveColor };

package/dist/components/primitives/context-menu/ContextMenu.js

@@ -0,0 +1,13 @@
+import ContextMenuItem from "./context-menu-item/ContextMenuItem.js";
+import ContextMenuRoot from "./context-menu-root/ContextMenuRoot.js";
+import ContextMenuSeparator from "./context-menu-separator/ContextMenuSeparator.js";
+import Menu from "./menu/Menu.js";
+//#region src/components/primitives/context-menu/ContextMenu.ts
+var ContextMenu = {
+	Root: ContextMenuRoot,
+	Item: ContextMenuItem,
+	Separator: ContextMenuSeparator,
+	Menu
+};
+//#endregion
+export { ContextMenu as default };

package/dist/components/primitives/context-menu/context-menu-content/ContextMenuContent.js

@@ -0,0 +1,72 @@
+import { onMounted, onUpdated } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { fitMenu } from "./fitMenu.js";
+import { content } from "./ContextMenuContent.styles.js";
+import { isNil } from "es-toolkit";
+//#region src/components/primitives/context-menu/context-menu-content/ContextMenuContent.tsx
+var ContextMenuContent = (props, ctx) => {
+	const $content = createRef();
+	const state = observable({
+		dx: 0,
+		dy: 0
+	});
+	let fitted = "";
+	let pointerStill = true;
+	const fit = () => {
+		if (!props.fit) return;
+		const rect = $content.value.getBoundingClientRect();
+		const measured = [
+			props.x,
+			props.y,
+			props.flipX,
+			props.openLeft,
+			rect.width,
+			rect.height
+		];
+		if (measured.join() === fitted) return;
+		fitted = measured.join();
+		const offsetX = Math.round(rect.left - props.x - state.dx);
+		const offsetY = Math.round(rect.top - props.y - state.dy);
+		const { dx, dy } = fitMenu({
+			left: props.x + offsetX,
+			top: props.y + offsetY,
+			width: rect.width,
+			height: rect.height
+		}, {
+			width: window.innerWidth,
+			height: window.innerHeight
+		}, isNil(props.flipX) ? void 0 : props.flipX + offsetX, props.openLeft);
+		if (state.dx !== dx) state.dx = dx;
+		if (state.dy !== dy) state.dy = dy;
+	};
+	const handleWheel = (event) => {
+		const $el = $content.value;
+		if ($el.scrollHeight > $el.clientHeight) event.stopPropagation();
+	};
+	const holdStillPointer = (event) => {
+		if (!pointerStill) return;
+		if (event.clientX !== props.x || event.clientY !== props.y) pointerStill = false;
+		else if (state.dx < 0 && state.dy < 0) event.stopPropagation();
+	};
+	onMounted(() => {
+		for (const type of [
+			"mouseenter",
+			"mousemove",
+			"click"
+		]) $content.value.addEventListener(type, holdStillPointer, true);
+		fit();
+	});
+	onUpdated(fit);
+	return () => html`<div ${ref($content)} class=${[
+		"context-menu-content",
+		"scrollbar",
+		content
+	]} style=${{
+		left: `${props.x + state.dx}px`,
+		top: `${props.y + state.dy}px`
+	}} data-id=${props.id} @wheel=${handleWheel}>${props.children}</div>`;
+};
+//#endregion
+export { ContextMenuContent as default };

package/dist/components/primitives/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -0,0 +1,19 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../../styles/elevation.styles.js";
+//#region src/components/primitives/context-menu/context-menu-content/ContextMenuContent.styles.ts
+var content = css`
+  position: fixed;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  min-width: max-content;
+  max-height: 100vh;
+  overflow-y: auto;
+  padding: 8px;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  ${floatingShadow};
+`;
+//#endregion
+export { content };

package/dist/components/primitives/context-menu/context-menu-content/fitMenu.js

@@ -0,0 +1,21 @@
+import { isNil } from "es-toolkit";
+//#region src/components/primitives/context-menu/context-menu-content/fitMenu.ts
+var whole = (value) => value < 0 ? Math.floor(value) : Math.ceil(value);
+var clampStart = (start, size, end) => Math.max(0, Math.min(start, end - size));
+var flipStart = (box, viewWidth, flipRight, openLeft) => {
+	const flipped = flipRight - box.width;
+	const leftOverflow = -flipped;
+	const rightOverflow = box.left + box.width - viewWidth;
+	if (openLeft) return leftOverflow > 0 && rightOverflow < leftOverflow ? box.left : flipped;
+	return rightOverflow > 0 && leftOverflow < rightOverflow ? flipped : box.left;
+};
+function fitMenu(box, view, flipRight, openLeft = false) {
+	const left = isNil(flipRight) ? clampStart(box.left, box.width, view.width) : flipStart(box, view.width, flipRight, openLeft);
+	const top = clampStart(box.top, box.height, view.height);
+	return {
+		dx: whole(left - box.left),
+		dy: whole(top - box.top)
+	};
+}
+//#endregion
+export { fitMenu };

package/dist/components/primitives/context-menu/context-menu-item/ContextMenuItem.js

@@ -0,0 +1,47 @@
+import { uuid25 } from "../../../../uuid/dist/uuid25.js";
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { useI18n } from "../../../localeContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import ContextMenuContent from "../context-menu-content/ContextMenuContent.js";
+import { useContextMenuRootContext } from "../context-menu-root/contextMenuRootContext.js";
+import { item } from "./ContextMenuItem.styles.js";
+//#region src/components/primitives/context-menu/context-menu-item/ContextMenuItem.tsx
+var ContextMenuItem = (props, ctx) => {
+	const root = useContextMenuRootContext(ctx);
+	const i18n = useI18n(ctx);
+	const id = uuid25();
+	const $div = createRef();
+	const state = observable({
+		selected: false,
+		show: false,
+		x: 0,
+		y: 0,
+		flipX: 0
+	});
+	const { addUnsubscribe } = useUnmounted();
+	const handleMouseenter = () => {
+		const { width, x, y } = $div.value.getBoundingClientRect();
+		state.x = width + x;
+		state.y = y - 8;
+		state.flipX = x;
+		state.show = true;
+		const parentId = $div.value.parentElement?.dataset.id;
+		if (parentId) root.value.change$.next({
+			parentId,
+			id
+		});
+	};
+	onMounted(() => {
+		if (!props.subChildren) return;
+		addUnsubscribe(root.value.change$.subscribe((value) => {
+			if ($div.value.parentElement?.dataset.id === value.parentId && id !== value.id) state.show = false;
+			state.selected = id === value.parentId;
+		}));
+	});
+	return () => html`<div ${ref($div)} class=${[item, { selected: state.selected }]} data-id=${id} @mouseenter=${handleMouseenter} @click=${props.onClick}>${props.children}</div>${props.subChildren && state.show ? html`<${ContextMenuContent} .id=${id} .x=${state.x} .y=${state.y} .fit=${true} .flipX=${state.flipX} .openLeft=${i18n.value.dir === "rtl"} .children=${props.subChildren} />` : null}`;
+};
+//#endregion
+export { ContextMenuItem as default };

package/dist/components/primitives/context-menu/context-menu-item/ContextMenuItem.styles.js

@@ -0,0 +1,22 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/primitives/context-menu/context-menu-item/ContextMenuItem.styles.ts
+var item = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  flex-shrink: 0;
+  cursor: default;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+  }
+
+  &.selected {
+    background-color: var(--context-menu-select);
+  }
+`;
+//#endregion
+export { item };

package/dist/components/primitives/context-menu/context-menu-root/ContextMenuRoot.js

@@ -0,0 +1,10 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import ContextMenuContent from "../context-menu-content/ContextMenuContent.js";
+import { useContextMenuRootContext } from "./contextMenuRootContext.js";
+//#region src/components/primitives/context-menu/context-menu-root/ContextMenuRoot.tsx
+var ContextMenuRoot = (props, ctx) => {
+	const root = useContextMenuRootContext(ctx);
+	return () => root.value.show ? html`<${ContextMenuContent} .id="root" .x=${root.value.x} .y=${root.value.y} .fit=${true} .children=${props.children} />` : null;
+};
+//#endregion
+export { ContextMenuRoot as default };

package/dist/components/primitives/context-menu/context-menu-root/contextMenuRootContext.js

@@ -0,0 +1,45 @@
+import { createContext } from "../../../../r-html/dist/context/createContext.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../../r-html/dist/observable/scheduler.js";
+import { useContext } from "../../../../r-html/dist/context/useContext.js";
+import { useProvider } from "../../../../r-html/dist/context/useProvider.js";
+import { Subject } from "rxjs";
+//#region src/components/primitives/context-menu/context-menu-root/contextMenuRootContext.ts
+var contextMenuRootContext = createContext({
+	show: false,
+	x: 0,
+	y: 0,
+	change$: new Subject()
+});
+var useContextMenuRootContext = (ctx) => useContext(ctx, contextMenuRootContext);
+function useContextMenuRootProvider(ctx) {
+	const state = observable({
+		show: false,
+		x: 0,
+		y: 0,
+		change$: new Subject()
+	});
+	const provider = useProvider(ctx, contextMenuRootContext, state);
+	const onContextmenu = (event) => {
+		event.preventDefault();
+		state.x = event.clientX;
+		state.y = event.clientY;
+		state.show = false;
+		nextTick(() => {
+			state.show = true;
+		});
+	};
+	const onMousedown = (event) => {
+		const el = event.target;
+		if (!el) return;
+		if (!el.closest(".context-menu-content")) state.show = false;
+	};
+	return {
+		provider,
+		state,
+		onContextmenu,
+		onMousedown
+	};
+}
+//#endregion
+export { contextMenuRootContext, useContextMenuRootContext, useContextMenuRootProvider };

package/dist/components/primitives/context-menu/context-menu-separator/ContextMenuSeparator.js

@@ -0,0 +1,6 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { separator } from "./ContextMenuSeparator.styles.js";
+//#region src/components/primitives/context-menu/context-menu-separator/ContextMenuSeparator.tsx
+var ContextMenuSeparator = () => () => html`<div class=${["context-menu-separator", separator]} role="separator"></div>`;
+//#endregion
+export { ContextMenuSeparator as default };

package/dist/components/primitives/context-menu/context-menu-separator/ContextMenuSeparator.styles.js

@@ -0,0 +1,9 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/primitives/context-menu/context-menu-separator/ContextMenuSeparator.styles.ts
+var separator = css`
+  height: 0;
+  margin: 4px 0;
+  border-top: 1px solid var(--context-menu-border);
+`;
+//#endregion
+export { separator };

package/dist/components/primitives/context-menu/menu/Menu.js

@@ -0,0 +1,6 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { icon, menu, right } from "./Menu.styles.js";
+//#region src/components/primitives/context-menu/menu/Menu.tsx
+var Menu = (props, ctx) => () => html`<div class=${menu}><div class=${icon}>${props.icon}</div>${props.literal ? html`<div .dir="ltr">${props.name}</div>` : html`<div>${props.name}</div>`}${props.right ? html`<div class=${right}>${props.right}</div>` : null}</div>`;
+//#endregion
+export { Menu as default };