@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/virtual-scroll/VirtualScroll.js

@@ -0,0 +1,63 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { getSceneTransform } from "../../../konva/scene/viewport.js";
+import { sceneScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { trackPointToScroll, useVirtualScroll } from "./useVirtualScroll.js";
+import { ghostThumb, horizontal, horizontalThumb, vertical, verticalThumb } from "./VirtualScroll.styles.js";
+//#region src/components/erd/virtual-scroll/VirtualScroll.tsx
+var VirtualScroll = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { state, getHorizontalTrack, getVerticalTrack, onScrollLeftStart, onScrollTopStart } = useVirtualScroll(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const horizontal$1 = createRef();
+	const vertical$1 = createRef();
+	const handleMoveLeft = (event) => {
+		const el = event.target;
+		if (!el) return;
+		if (!!el.closest(".virtual-scroll-ghost-thumb")) return;
+		const { store } = app.value;
+		const { viewport } = store.state.editor;
+		const source = sourceRef.value;
+		const { originY } = getSceneTransform(store.state, source);
+		const track = getHorizontalTrack();
+		const rect = horizontal$1.value.getBoundingClientRect();
+		store.dispatch(sceneScrollToAction(source, {
+			originX: trackPointToScroll(track, event.clientX - rect.x, viewport.width),
+			originY
+		}));
+		onScrollLeftStart(event);
+	};
+	const handleMoveTop = (event) => {
+		const el = event.target;
+		if (!el) return;
+		if (!!el.closest(".virtual-scroll-ghost-thumb")) return;
+		const { store } = app.value;
+		const { viewport } = store.state.editor;
+		const source = sourceRef.value;
+		const { originX } = getSceneTransform(store.state, source);
+		const track = getVerticalTrack();
+		const rect = vertical$1.value.getBoundingClientRect();
+		store.dispatch(sceneScrollToAction(source, {
+			originX,
+			originY: trackPointToScroll(track, event.clientY - rect.y, viewport.height)
+		}));
+		onScrollTopStart(event);
+	};
+	return () => {
+		const horizontalTrack = getHorizontalTrack();
+		const verticalTrack = getVerticalTrack();
+		return html`${horizontalTrack.scrollable ? html`<div class=${["virtual-scroll", horizontal]} .dir="ltr" ${ref(horizontal$1)} @mousedown=${handleMoveLeft}><div class=${["virtual-scroll-ghost-thumb", ghostThumb]} style=${{
+			width: `${horizontalTrack.thumb}px`,
+			height: "100%",
+			transform: `translate(${horizontalTrack.offset}px, 0px)`
+		}} ?data-selected=${state.selected === "horizontal"} @mousedown=${onScrollLeftStart}><div class=${horizontalThumb}></div></div></div>` : null}${verticalTrack.scrollable ? html`<div class=${["virtual-scroll", vertical]} .dir="ltr" ${ref(vertical$1)} @mousedown=${handleMoveTop}><div class=${["virtual-scroll-ghost-thumb", ghostThumb]} style=${{
+			width: "100%",
+			height: `${verticalTrack.thumb}px`,
+			transform: `translate(0px, ${verticalTrack.offset}px)`
+		}} ?data-selected=${state.selected === "vertical"} @mousedown=${onScrollTopStart}><div class=${verticalThumb}></div></div></div>` : null}`;
+	};
+};
+//#endregion
+export { VirtualScroll as default };

package/dist/components/erd/virtual-scroll/VirtualScroll.styles.js

@@ -0,0 +1,48 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/virtual-scroll/VirtualScroll.styles.ts
+var vertical = css`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: calc(100% - 8px);
+  overflow: hidden;
+  padding-top: 4px;
+`;
+var horizontal = css`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: calc(100% - 8px);
+  height: 8px;
+  overflow: hidden;
+  padding-left: 4px;
+`;
+var ghostThumb = css`
+  will-change: transform;
+  cursor: pointer;
+
+  &:hover > div {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+
+  &[data-selected] > div {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+`;
+var thumb = css`
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+`;
+var verticalThumb = css`
+  width: 4px;
+  height: 100%;
+  ${thumb};
+`;
+var horizontalThumb = css`
+  width: 100%;
+  height: 4px;
+  ${thumb};
+`;
+//#endregion
+export { ghostThumb, horizontal, horizontalThumb, vertical, verticalThumb };

package/dist/components/erd/virtual-scroll/useVirtualScroll.js

@@ -0,0 +1,126 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { getSceneTransform } from "../../../konva/scene/viewport.js";
+import { freezeView, thawView } from "../../../konva/scene/viewFreeze.js";
+import { clampScrollMovement, getScrollRanges, sceneStreamScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+function getScrollbarTrack(range, scroll, viewportLength) {
+	const travel = range.max - range.min;
+	const content = viewportLength + travel;
+	const share = content > 0 ? viewportLength / content : 1;
+	const thumb = Math.min(viewportLength, Math.max(24, viewportLength * share));
+	const room = viewportLength - thumb;
+	const scrollable = travel > 0 && room > 0;
+	const ratio = scrollable ? room / travel : 1;
+	return {
+		range,
+		ratio,
+		thumb,
+		offset: scrollable ? (range.max - scroll) * ratio : 0,
+		scrollable
+	};
+}
+function trackPointToScroll({ range, ratio, thumb }, point, viewportLength) {
+	const room = viewportLength - thumb;
+	const offset = Math.min(Math.max(point - thumb / 2, 0), room);
+	return room > 0 ? range.max - offset / ratio : range.max;
+}
+function useVirtualScroll(ctx) {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ selected: null });
+	let clientX = 0;
+	let clientY = 0;
+	let drag = null;
+	addUnsubscribe(() => drag?.unsubscribe());
+	const getHorizontalTrack = () => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const { viewport } = store.state.editor;
+		return getScrollbarTrack(getScrollRanges(store.state, source).left, getSceneTransform(store.state, source).originX, viewport.width);
+	};
+	const getVerticalTrack = () => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const { viewport } = store.state.editor;
+		return getScrollbarTrack(getScrollRanges(store.state, source).top, getSceneTransform(store.state, source).originY, viewport.height);
+	};
+	const getWidthRatio = () => getHorizontalTrack().ratio;
+	const getHeightRatio = () => getVerticalTrack().ratio;
+	const absoluteMovement = (movement, ratio) => {
+		return ratio > 0 ? -1 * (movement / ratio) : 0;
+	};
+	const getMovementX = ({ movementX, x }) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const { originX } = getSceneTransform(store.state, source);
+		const { min, max } = getScrollRanges(store.state, source).left;
+		const toLeft = movementX < 0;
+		if (!(toLeft ? originX < max : originX > min) || !(toLeft ? x < clientX : x > clientX)) return 0;
+		clientX += movementX;
+		return movementX;
+	};
+	const getMovementY = ({ movementY, y }) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const { originY } = getSceneTransform(store.state, source);
+		const { min, max } = getScrollRanges(store.state, source).top;
+		const toTop = movementY < 0;
+		if (!(toTop ? originY < max : originY > min) || !(toTop ? y < clientY : y > clientY)) return 0;
+		clientY += movementY;
+		return movementY;
+	};
+	const scrollBy = (movementX, movementY) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		store.dispatch(sceneStreamScrollToAction(source, clampScrollMovement(store.state, {
+			movementX,
+			movementY
+		}, source)));
+	};
+	const handleScroll = (dragMove) => {
+		const { event } = dragMove;
+		event.type === "mousemove" && event.preventDefault();
+		const isVertical = state.selected === "vertical";
+		const isHorizontal = state.selected === "horizontal";
+		const movementX = getMovementX(dragMove);
+		const movementY = getMovementY(dragMove);
+		if (isVertical && movementY !== 0) scrollBy(0, absoluteMovement(movementY, getHeightRatio()));
+		else if (isHorizontal && movementX !== 0) scrollBy(absoluteMovement(movementX, getWidthRatio()), 0);
+	};
+	const startDrag = (selected) => {
+		const { store } = app.value;
+		state.selected = selected;
+		const source = sourceRef.value;
+		freezeView(store.state, source);
+		const subscription = drag$.subscribe(handleScroll);
+		subscription.add(() => {
+			if (drag === subscription) drag = null;
+			state.selected = null;
+			thawView(store.state, source);
+		});
+		drag = subscription;
+	};
+	const onScrollLeftStart = (event) => {
+		clientX = event.clientX;
+		startDrag("horizontal");
+	};
+	const onScrollTopStart = (event) => {
+		clientY = event.clientY;
+		startDrag("vertical");
+	};
+	return {
+		state,
+		onScrollLeftStart,
+		onScrollTopStart,
+		getWidthRatio,
+		getHeightRatio,
+		getHorizontalTrack,
+		getVerticalTrack
+	};
+}
+//#endregion
+export { getScrollbarTrack, trackPointToScroll, useVirtualScroll };

package/dist/components/erd/welcome-screen/WelcomeScreen.js

@@ -0,0 +1,194 @@
+import { KeyBindingName, matchesShortcut } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { Open } from "../../../constants/open.js";
+import { isMemoShown } from "../../../utils/memo.js";
+import { addMemoAction$ } from "../../../engine/modules/memo/generator.actions.js";
+import { addTableAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { toggleSearchAction } from "../../../utils/emitter.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import Kbd from "../../primitives/kbd/Kbd.js";
+import { menuLabel } from "../../../i18n/menuLabel.js";
+import { createImportMenus } from "../erd-context-menu/menus/importMenus.js";
+import { measureAnchors, welcomeTiers } from "./welcomeLayout.js";
+import WelcomeHints from "./welcome-hints/WelcomeHints.js";
+import { Lnb } from "../../settings/settings-lnb/SettingsLnb.js";
+import { requestSettingsPage } from "../../settings/settingsPage.js";
+import { center, heading, item, label, menu, root } from "./WelcomeScreen.styles.js";
+//#region src/components/erd/welcome-screen/WelcomeScreen.tsx
+var rowIcon = (icon, dir) => icon === "arrow-left" && dir === "rtl" ? "arrow-right" : icon;
+var WelcomeScreen = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const menu$1 = createRef();
+	const state = observable({
+		level: "top",
+		search: null,
+		preferences: null
+	});
+	const { addUnsubscribe } = useUnmounted();
+	const measureNow = () => {
+		const $root = root$1.value;
+		if (!$root) return;
+		const anchors = measureAnchors($root);
+		state.search = anchors.search;
+		state.preferences = anchors.preferences;
+	};
+	const measure = () => {
+		nextTick(measureNow);
+	};
+	let holdsFocus = false;
+	const restoreFocus = () => {
+		const host = ctx.host;
+		holdsFocus = false;
+		nextTick(() => host.dispatchEvent(focusEvent()));
+	};
+	const handleFocusin = () => {
+		holdsFocus = true;
+	};
+	const handleFocusout = () => {
+		queueMicrotask(() => {
+			const $root = root$1.value;
+			if (!$root?.isConnected) return;
+			const { activeElement } = $root.getRootNode();
+			holdsFocus = activeElement !== null && $root.contains(activeElement);
+		});
+	};
+	const menuRows = () => Array.from(menu$1.value?.querySelectorAll(".welcome-screen-item") ?? []);
+	const focusRow = (index) => {
+		nextTick(() => {
+			menuRows()[index]?.focus({ preventScroll: true });
+		});
+	};
+	const handleNewTable = () => {
+		app.value.store.dispatch(addTableAction$());
+		restoreFocus();
+	};
+	const handleNewMemo = () => {
+		app.value.store.dispatch(addMemoAction$());
+		restoreFocus();
+	};
+	const handleImport = () => {
+		state.level = "import";
+		focusRow(0);
+	};
+	const handleBack = () => {
+		state.level = "top";
+		focusRow(topRows().findIndex((row) => row.onClick === handleImport));
+	};
+	const handlePalette = () => {
+		app.value.emitter.emit(toggleSearchAction());
+	};
+	const handleShortcuts = () => {
+		requestSettingsPage(app.value.store, Lnb.shortcuts);
+		restoreFocus();
+	};
+	const handleKeydown = (event) => {
+		const rows = menuRows();
+		const index = rows.indexOf(event.target);
+		const last = rows.length - 1;
+		const move = (next) => {
+			event.preventDefault();
+			event.stopPropagation();
+			rows[next]?.focus({ preventScroll: true });
+		};
+		switch (event.key) {
+			case "ArrowDown":
+				move(index < last ? index + 1 : 0);
+				return;
+			case "ArrowUp":
+				move(index > 0 ? index - 1 : last);
+				return;
+			case "Home":
+				move(0);
+				return;
+			case "End":
+				move(last);
+				return;
+			case "Enter":
+			case " ":
+				event.stopPropagation();
+				return;
+		}
+		const { keyBindingMap } = app.value;
+		if (state.level === "import" && matchesShortcut(event, keyBindingMap[KeyBindingName.stop])) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleBack();
+		}
+	};
+	const topRows = () => {
+		const { keyBindingMap, store } = app.value;
+		const { t } = i18n.value;
+		return [
+			{
+				icon: "table-2",
+				label: t("common.newTable"),
+				shortcut: keyBindingMap[KeyBindingName.addTable][0]?.shortcut,
+				onClick: handleNewTable
+			},
+			...isMemoShown(store.state) ? [{
+				icon: "sticky-note",
+				label: t("common.newMemo"),
+				shortcut: keyBindingMap[KeyBindingName.addMemo][0]?.shortcut,
+				onClick: handleNewMemo
+			}] : [],
+			{
+				icon: "file-input",
+				label: t("common.import"),
+				onClick: handleImport
+			},
+			{
+				icon: "search",
+				label: t("welcome.commandPalette"),
+				shortcut: keyBindingMap[KeyBindingName.search][0]?.shortcut,
+				onClick: handlePalette
+			},
+			{
+				icon: "keyboard",
+				label: t("common.shortcuts"),
+				onClick: handleShortcuts
+			}
+		];
+	};
+	const importRows = () => [{
+		icon: "arrow-left",
+		label: i18n.value.t("welcome.back"),
+		onClick: handleBack
+	}, ...createImportMenus(app.value, handleBack, "replace").map((row) => ({
+		icon: row.icon,
+		label: menuLabel(i18n.value, row),
+		onClick: row.onClick
+	}))];
+	onMounted(() => {
+		const { store } = app.value;
+		measure();
+		addUnsubscribe(watch(store.state.editor.viewport).subscribe(measure), watch(store.state.settings).subscribe((name) => {
+			name === "canvasType" && measure();
+		}), watch(props).subscribe(measure), watch(i18n.value).subscribe((name) => {
+			name === "dir" && measure();
+		}));
+	});
+	onUnmounted(() => {
+		holdsFocus && restoreFocus();
+	});
+	return () => {
+		const { store } = app.value;
+		const { viewport, openMap } = store.state.editor;
+		const { dir, t } = i18n.value;
+		const tiers = welcomeTiers(viewport);
+		const panelUp = Boolean(openMap[Open.themeBuilder]) || Boolean(openMap[Open.localePicker]);
+		const rows = state.level === "import" ? importRows() : topRows();
+		return html`<div class=${["welcome-screen", root]} ${ref(root$1)}>${tiers.hints && !panelUp ? html`<${WelcomeHints} .search=${state.search} .preferences=${state.preferences} .width=${viewport.width} .enableThemeBuilder=${props.enableThemeBuilder} .enableLocalePicker=${props.enableLocalePicker} />` : null}${tiers.center === "none" ? null : html`<div class=${center}>${tiers.center === "full" ? html`<div class=${["welcome-screen-heading", heading]}>${t("welcome.heading")}</div>` : null}<div class=${["welcome-screen-menu", menu]} role="group" aria-label=${t("welcome.menu")} ${ref(menu$1)} @keydown=${handleKeydown} @focusin=${handleFocusin} @focusout=${handleFocusout}>${rows.map((row) => html`<button type="button" class=${["welcome-screen-item", item]} @click=${row.onClick}><${Icon} .name=${rowIcon(row.icon, dir)} .size=${16} /><span class=${label}>${row.label}</span>${tiers.kbd && row.shortcut ? html`<${Kbd} .shortcut=${row.shortcut} />` : null}</button>`)}</div></div>`}</div>`;
+	};
+};
+//#endregion
+export { WelcomeScreen as default, rowIcon };

package/dist/components/erd/welcome-screen/WelcomeScreen.styles.js

@@ -0,0 +1,67 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/erd/welcome-screen/WelcomeScreen.styles.ts
+var root = css`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  user-select: none;
+`;
+var center = css`
+  position: absolute;
+  inset-block: 0 60px;
+  inset-inline: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+`;
+var heading = css`
+  ${typography.normal};
+  max-width: 100%;
+  color: var(--foreground);
+  text-align: center;
+`;
+var menu = css`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 300px;
+  max-width: 100%;
+  margin-block-start: 16px;
+  pointer-events: auto;
+`;
+var item = css`
+  ${typography.normal};
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 32px;
+  padding-inline: 12px;
+  border-radius: 6px;
+  color: var(--foreground);
+  text-align: start;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    color: var(--active);
+    box-shadow: inset 0 0 0 1px var(--input-active);
+  }
+`;
+var label = css`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+//#endregion
+export { center, heading, item, label, menu, root };

package/dist/components/erd/welcome-screen/welcome-hints/WelcomeHints.js

@@ -0,0 +1,47 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { useI18n } from "../../../localeContext.js";
+import { hintPlacement } from "../welcomeLayout.js";
+import { arrowDown, arrowUp } from "./hintArrows.js";
+import { down, label, stacked, up } from "./WelcomeHints.styles.js";
+//#region src/components/erd/welcome-screen/welcome-hints/WelcomeHints.tsx
+var px = (value) => value === void 0 ? null : `${value}px`;
+function preferencesHintKey(theme, locale) {
+	if (theme && locale) return "welcome.hintThemeAndLanguage";
+	if (theme) return "welcome.hintTheme";
+	if (locale) return "welcome.hintLanguage";
+	return null;
+}
+var WelcomeHints = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	const upHint = (name, anchorX, side, text) => {
+		const { dir } = i18n.value;
+		const placement = hintPlacement(anchorX, props.width, side, dir);
+		const { labelFirst, stacked: stacked$1 } = placement;
+		const label$1 = html`<span class=${label} .dir=${dir} style=${{
+			"text-align": (stacked$1 ? !labelFirst : labelFirst) ? "right" : "left",
+			"margin-block-end": stacked$1 ? "0" : null
+		}}>${text}</span>`;
+		const art = arrowUp(!labelFirst);
+		return html`<div class=${[
+			"welcome-screen-hint",
+			`welcome-screen-hint-${name}`,
+			up,
+			stacked$1 ? stacked : null,
+			{ end: stacked$1 && !labelFirst }
+		]} .dir="ltr" style=${{
+			left: px(placement.left),
+			right: px(placement.right)
+		}}>${labelFirst && !stacked$1 ? [label$1, art] : [art, label$1]}</div>`;
+	};
+	return () => {
+		const { t } = i18n.value;
+		const preferencesKey = preferencesHintKey(Boolean(props.enableThemeBuilder), Boolean(props.enableLocalePicker));
+		return html`${props.search === null ? null : upHint("palette", props.search, "before", t("welcome.hintPalette"))}${props.preferences === null || preferencesKey === null ? null : upHint("preferences", props.preferences, "after", t(preferencesKey))}<div class=${[
+			"welcome-screen-hint",
+			"welcome-screen-hint-tools",
+			down
+		]}><span class=${label}>${t("welcome.hintFloatingToolbar")}</span>${arrowDown()}</div>`;
+	};
+};
+//#endregion
+export { WelcomeHints as default, preferencesHintKey };

package/dist/components/erd/welcome-screen/welcome-hints/WelcomeHints.styles.js

@@ -0,0 +1,52 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/erd/welcome-screen/welcome-hints/WelcomeHints.styles.ts
+var up = css`
+  position: absolute;
+  top: 4px;
+  width: max-content;
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  color: var(--foreground);
+  pointer-events: none;
+
+  & > svg {
+    flex: none;
+  }
+
+  & > span {
+    margin-block-end: -8px;
+  }
+`;
+var stacked = css`
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+
+  &.end {
+    align-items: flex-end;
+  }
+`;
+var down = css`
+  position: absolute;
+  bottom: 68px;
+  inset-inline: 0;
+  width: max-content;
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  color: var(--foreground);
+  pointer-events: none;
+`;
+var label = css`
+  max-width: 220px;
+  white-space: normal;
+  word-break: auto-phrase;
+  text-align: center;
+  ${typography.normal};
+`;
+//#endregion
+export { down, label, stacked, up };

package/dist/components/erd/welcome-screen/welcome-hints/hintArrows.js

@@ -0,0 +1,10 @@
+import { svg } from "../../../../r-html/dist/render/index.js";
+import { ARROW_DOWN_BOX, ARROW_UP_BOX } from "../welcomeLayout.js";
+//#region src/components/erd/welcome-screen/welcome-hints/hintArrows.tsx
+var ARROW_UP = ["M6 69C3.5 50 13.5 31 27 17.5C30.5 13.5 33.6 8.7 36 3", "M27.6 8.6Q31.8 5.6 36 3Q36.9 7.9 38.4 12.6"];
+var ARROW_DOWN = ["M15 3C8.5 15.5 27.5 25 21.5 39C20.5 43.5 20.2 48 20 53", "M13.8 45.2Q17.2 48.8 20 53Q22.6 48.6 26.2 45"];
+var arrow = (box, paths, mirrored) => svg`<svg class="welcome-screen-arrow" width=${box.width} height=${box.height} viewBox=${`0 0 ${box.width} ${box.height}`} aria-hidden="true"><g transform=${mirrored ? `matrix(-1 0 0 1 ${box.width} 0)` : ""}>${paths.map((d) => svg`<path d=${d} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>`)}</g></svg>`;
+var arrowUp = (mirrored) => arrow(ARROW_UP_BOX, ARROW_UP, mirrored);
+var arrowDown = () => arrow(ARROW_DOWN_BOX, ARROW_DOWN, false);
+//#endregion
+export { ARROW_DOWN, ARROW_UP, arrowDown, arrowUp };

package/dist/components/erd/welcome-screen/welcomeLayout.js

@@ -0,0 +1,65 @@
+import { hasContent } from "../../../konva/scene/contentBounds.js";
+import { editorRootOf } from "../../../utils/domEvent.js";
+var HINT_GAP = 4;
+var ARROW_UP_BOX = {
+	width: 44,
+	height: 72,
+	tipX: 36,
+	tipY: 3
+};
+var ARROW_DOWN_BOX = {
+	width: 40,
+	height: 56,
+	tipX: 20,
+	tipY: 53
+};
+function welcomeTiers({ width, height }) {
+	const center = width < 320 || height < 294 ? "none" : height < 342 ? "menu" : "full";
+	return {
+		center,
+		hints: width >= 720 && height >= 562,
+		kbd: center !== "none" && width >= 480
+	};
+}
+var isEmptyDocument = (state) => !hasContent(state);
+function measureAnchors(container) {
+	const root = editorRootOf(container);
+	const box = container.getBoundingClientRect();
+	const centerOf = (selector) => {
+		const rect = root.querySelector(selector)?.getBoundingClientRect();
+		if (!rect || rect.width === 0) return null;
+		const x = rect.left + rect.width / 2 - box.left;
+		return x >= 0 && x <= box.width ? x : null;
+	};
+	const theme = centerOf(".toolbar-theme");
+	const locale = centerOf(".toolbar-locale");
+	return {
+		search: centerOf(".toolbar-search"),
+		preferences: theme !== null && locale !== null ? (theme + locale) / 2 : theme ?? locale
+	};
+}
+function hintPlacement(anchorX, rootWidth, side, dir) {
+	const labelFirst = side === "before" === (dir === "ltr");
+	const { width, tipX } = ARROW_UP_BOX;
+	const reach = width - tipX;
+	if ((labelFirst ? anchorX - tipX - HINT_GAP : rootWidth - anchorX - tipX - HINT_GAP) < 220) return labelFirst ? {
+		labelFirst,
+		stacked: true,
+		left: anchorX - tipX
+	} : {
+		labelFirst,
+		stacked: true,
+		right: rootWidth - anchorX - tipX
+	};
+	return labelFirst ? {
+		labelFirst,
+		stacked: false,
+		right: rootWidth - anchorX - reach
+	} : {
+		labelFirst,
+		stacked: false,
+		left: anchorX - reach
+	};
+}
+//#endregion
+export { ARROW_DOWN_BOX, ARROW_UP_BOX, hintPlacement, isEmptyDocument, measureAnchors, welcomeTiers };