@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/erd/time-travel/TimeTravel.js

@@ -0,0 +1,83 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { toJson } from "../../../erd-editor-schema/dist/parser.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { useProvider } from "../../../r-html/dist/context/useProvider.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { changeViewportAction } from "../../../engine/modules/editor/atom.actions.js";
+import { initialLoadJsonAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import "../../../engine/rx-store.js";
+import { appContext, appDestroy, createAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import { sceneInteractionContext } from "../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../../sceneSourceContext.js";
+import Canvas from "../canvas/Canvas.js";
+import Minimap from "../minimap/Minimap.js";
+import { readerNameViewAction } from "../readerNameView.js";
+import Button from "../../primitives/button/Button.js";
+import Slider from "../../primitives/slider/Slider.js";
+import { container, root, slider, vertical } from "./TimeTravel.styles.js";
+//#region src/components/erd/time-travel/TimeTravel.tsx
+function toPreviewJson(state) {
+	const { originX, originY, zoomLevel } = state.settings;
+	const json = JSON.parse(toJson(state));
+	Object.assign(json.settings, {
+		originX,
+		originY,
+		zoomLevel
+	});
+	return JSON.stringify(json);
+}
+var TimeTravel = (props, ctx) => {
+	const root$1 = createRef();
+	const canvas = createRef();
+	const originApp = props.app.value;
+	const app = createAppContext({ toWidth: originApp.toWidth }, { getHistory: originApp.store.history.clone });
+	const { store } = app;
+	const { history } = store;
+	const { addUnsubscribe } = useUnmounted();
+	const i18n = useI18n(ctx);
+	const provider = useProvider(ctx, appContext, app);
+	const sceneSource = useProvider(ctx, sceneSourceContext, "document");
+	const sceneInteraction = useProvider(ctx, sceneInteractionContext, "edit");
+	addUnsubscribe(() => {
+		sceneInteraction.destroy();
+		sceneSource.destroy();
+		provider.destroy();
+	});
+	const getViewport = () => ({ ...originApp.store.state.editor.viewport });
+	const state = observable({ cursor: history.cursor });
+	store.dispatchSync(changeViewportAction(getViewport()), initialLoadJsonAction$(toPreviewJson(originApp.store.state)), readerNameViewAction(store.state, originApp.store.state));
+	const runTimeTravel = (cursor) => {
+		let count = 0;
+		while (history.cursor !== cursor && count <= 2048) {
+			history.cursor < cursor ? history.redo() : history.undo();
+			count++;
+		}
+	};
+	const handleClose = () => {
+		props.onClose();
+	};
+	const handleApply = () => {
+		props.onChange(state.cursor);
+		handleClose();
+	};
+	const handleChange = (cursor) => {
+		state.cursor = cursor;
+		runTimeTravel(cursor);
+	};
+	onMounted(() => {
+		addUnsubscribe(originApp.shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && handleClose();
+		}), watch(originApp.store.state.editor.viewport).subscribe(() => {
+			app.store.dispatch(changeViewportAction(getViewport()));
+		}), () => {
+			appDestroy(app);
+		});
+	});
+	return () => html`<div class=${root} .dir="ltr"><div class=${container} ${ref(root$1)}><${Canvas} .root=${root$1} .canvas=${canvas} .grabMove=${true} /><${Minimap} /></div></div><div class=${["time-travel-slider", slider]} .dir="ltr"><${Slider} .min=${-1} .max=${history.size - 1} .value=${state.cursor} .onChange=${handleChange} /><div class=${vertical}></div><${Button} .size="1" .text=${i18n.value.t("common.apply")} .onClick=${handleApply} /><${Button} .variant="soft" .size="1" .text=${i18n.value.t("common.cancel")} .onClick=${handleClose} /></div>`;
+};
+//#endregion
+export { TimeTravel as default };

package/dist/components/erd/time-travel/TimeTravel.styles.js

@@ -0,0 +1,42 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/time-travel/TimeTravel.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--canvas-boundary-background);
+`;
+var container = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  pointer-events: none;
+`;
+var slider = css`
+  padding: 0 15px;
+  display: flex;
+  width: 100%;
+  height: 30px;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: var(--canvas-boundary-background);
+  align-items: center;
+
+  & > button:last-child {
+    margin-left: 8px;
+  }
+`;
+var vertical = css`
+  width: 24px;
+  height: 100%;
+`;
+//#endregion
+export { container, root, slider, vertical };

package/dist/components/erd/useErdShortcut.js

@@ -0,0 +1,214 @@
+import { KeyBindingName, isComposing } from "../../utils/keyboard-shortcut/index.js";
+import { RelationshipType } from "../../constants/schema.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { isEditableTarget, isHighLevelTable } from "../../utils/validation.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { Open } from "../../constants/open.js";
+import { MoveKey, SelectType, hasMoveKeys, isEditingMemo, isEditingText } from "../../engine/modules/editor/state.js";
+import { isMemoShown } from "../../utils/memo.js";
+import { isTableGroupShown } from "../../utils/tableGroup.js";
+import { getFocusedColumnIds, getRemovableColumns } from "../../engine/modules/editor/utils/focus.js";
+import { changeDrawTableGroupAction, changeHandToolAction, changeOpenMapAction, changeZenModeAction, drawEndRelationshipAction, editMemoEndAction, editTableAction, editTableEndAction, editTableGroupEndAction, focusMoveTableAction, selectAllAction, selectAllColumnAction } from "../../engine/modules/editor/atom.actions.js";
+import { addMemoAction$ } from "../../engine/modules/memo/generator.actions.js";
+import { CLIPBOARD_MIME, PayloadKind } from "../../utils/table-clipboard/payload.js";
+import { addTableAction$, pasteTableAction$ } from "../../engine/modules/table/generator.actions.js";
+import { addColumnAction$, changeColumnsPrimaryKeyAction$, isToggleColumnTypes, removeColumnAction$, toggleColumnValueAction$ } from "../../engine/modules/table-column/generator.actions.js";
+import { addTableGroupFromTablesAction$ } from "../../engine/modules/table-group/generator.actions.js";
+import { columnsCopyToPayload, entitiesCopyToPayload, entitiesToHtmlTable, entitiesToTsv, payloadToHtml, tableCopyToHtml, tableCopyToText } from "../../utils/table-clipboard/copy.js";
+import { focusCentersOf, focusFlowTableAction$ } from "../../engine/modules/editor/view.generator.actions.js";
+import { drawStartRelationshipAction$, focusMoveTableAction$, pasteEntitiesAction$, removeSelectedAction$, unselectAllAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { changeZoomLevelAction$, streamZoomLevelAction$ } from "../../engine/modules/settings/generator.actions.js";
+import { openTablePropertiesAction } from "../../utils/emitter.js";
+import { useAppContext } from "../appContext.js";
+import { focusEvent, forceFocusEvent } from "../../utils/internalEvents.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { addTableGroupAndRename } from "./table-group/tableGroupName.js";
+import "../../constants/zoom.js";
+import { fromCopy } from "../../utils/rx-operators/fromCopy.js";
+import { fromPaste } from "../../utils/rx-operators/fromPaste.js";
+import { payloadToColumns, readClipboardPayload, tablePasteFromHtmlToColumns, tablePasteFromTextToColumns } from "../../utils/table-clipboard/paste.js";
+import { erdShortcutPerformCheck } from "./erdShortcutPerformCheck.js";
+//#region src/components/erd/useErdShortcut.ts
+var isRelationshipKeyBindingName = arrayHas([
+	KeyBindingName.relationshipZeroOne,
+	KeyBindingName.relationshipZeroN,
+	KeyBindingName.relationshipOneOnly,
+	KeyBindingName.relationshipOneN
+]);
+var keyBindingNameToRelationshipType = {
+	[KeyBindingName.relationshipZeroOne]: RelationshipType.ZeroOne,
+	[KeyBindingName.relationshipZeroN]: RelationshipType.ZeroN,
+	[KeyBindingName.relationshipOneOnly]: RelationshipType.OneOnly,
+	[KeyBindingName.relationshipOneN]: RelationshipType.OneN
+};
+var isEditKeyBindingName = arrayHas([
+	KeyBindingName.edit,
+	KeyBindingName.addTable,
+	KeyBindingName.addColumn,
+	KeyBindingName.addMemo,
+	KeyBindingName.addTableGroup,
+	KeyBindingName.groupSelectedTables,
+	KeyBindingName.removeTable,
+	KeyBindingName.removeColumn,
+	KeyBindingName.removeSelection,
+	KeyBindingName.primaryKey,
+	KeyBindingName.selectAllTable,
+	KeyBindingName.selectAllColumn,
+	KeyBindingName.relationshipZeroOne,
+	KeyBindingName.relationshipZeroN,
+	KeyBindingName.relationshipOneOnly,
+	KeyBindingName.relationshipOneN,
+	KeyBindingName.handTool
+]);
+function useErdShortcut(ctx) {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	let lastCopyId = null;
+	let pasteRound = 0;
+	const nextRound = (copyId) => {
+		if (copyId !== lastCopyId) {
+			lastCopyId = copyId;
+			pasteRound = 0;
+		}
+		return ++pasteRound;
+	};
+	const handleKeydown = (event) => {
+		const { store } = app.value;
+		const { editor, settings } = store.state;
+		if (isHighLevelTable(settings.zoomLevel) || isEditingMemo(editor) || isComposing(event)) return;
+		if (editor.focusTable && !editor.focusTable.edit && event.key !== MoveKey.Tab && hasMoveKeys(event.key)) store.dispatch(focusMoveTableAction({
+			moveKey: event.key,
+			shiftKey: event.shiftKey && !store.getReadonly()
+		}));
+		if (editor.focusTable && event.key === MoveKey.Tab && !store.getReadonly()) {
+			event.preventDefault();
+			store.dispatch(focusMoveTableAction$(event.key, event.shiftKey));
+			setTimeout(() => {
+				if (!editor.focusTable || isToggleColumnTypes(editor.focusTable.focusType)) return;
+				store.dispatch(editTableAction());
+			}, 1);
+		}
+	};
+	const handleShortcut = ({ type, event }) => {
+		const { store, emitter } = app.value;
+		const { editor, settings } = store.state;
+		const showHighLevelTable = isHighLevelTable(settings.zoomLevel);
+		if (store.getReadonly() && isEditKeyBindingName(type)) return;
+		if (!isEditingText(editor)) {
+			type === KeyBindingName.addTable && store.dispatch(addTableAction$());
+			type === KeyBindingName.addColumn && store.dispatch(addColumnAction$());
+			type === KeyBindingName.addMemo && isMemoShown(store.state) && store.dispatch(addMemoAction$());
+			if (isTableGroupShown(store.state)) {
+				type === KeyBindingName.addTableGroup && store.dispatch(changeDrawTableGroupAction({ value: !editor.drawTableGroup }));
+				type === KeyBindingName.groupSelectedTables && addTableGroupAndRename(store, addTableGroupFromTablesAction$());
+			}
+			type === KeyBindingName.selectAllTable && store.dispatch(selectAllAction());
+			if (isRelationshipKeyBindingName(type)) {
+				const relationshipType = keyBindingNameToRelationshipType[type];
+				store.dispatch(drawStartRelationshipAction$(relationshipType));
+			}
+			if (type === KeyBindingName.removeTable) {
+				ctx.host.dispatchEvent(focusEvent());
+				store.dispatch(removeSelectedAction$());
+			}
+			if (type === KeyBindingName.removeSelection && !event.repeat) {
+				const columns = getRemovableColumns(store.state);
+				ctx.host.dispatchEvent(focusEvent());
+				store.dispatch(columns ? removeColumnAction$(columns.tableId, columns.columnIds) : removeSelectedAction$());
+			}
+			if (type === KeyBindingName.tableProperties) {
+				const selectedTable = Object.entries(editor.selectedMap).find(([, type]) => type === SelectType.table);
+				if (selectedTable) {
+					emitter.emit(openTablePropertiesAction({ tableId: selectedTable[0] }));
+					store.dispatch(changeOpenMapAction({ [Open.tableProperties]: true }));
+				}
+			}
+			if (type === KeyBindingName.focusView) store.dispatch(focusFlowTableAction$(focusCentersOf(editor.selectedMap)));
+			type === KeyBindingName.handTool && store.dispatch(changeHandToolAction({ value: !editor.handTool }));
+			type === KeyBindingName.zenMode && store.dispatch(changeZenModeAction({ value: !editor.zenMode }));
+			type === KeyBindingName.zoomIn && store.dispatch(streamZoomLevelAction$(.04));
+			type === KeyBindingName.zoomOut && store.dispatch(streamZoomLevelAction$(-.04));
+			type === KeyBindingName.zoomReset && store.dispatch(changeZoomLevelAction$(1));
+		}
+		if (!showHighLevelTable && !isEditingMemo(editor)) {
+			if (editor.focusTable && !editor.focusTable.edit) {
+				type === KeyBindingName.selectAllColumn && store.dispatch(selectAllColumnAction());
+				if (type === KeyBindingName.removeColumn && editor.focusTable.selectColumnIds.length) store.dispatch(removeColumnAction$(editor.focusTable.tableId, editor.focusTable.selectColumnIds));
+				if (type === KeyBindingName.primaryKey && editor.focusTable.columnId) store.dispatch(changeColumnsPrimaryKeyAction$(editor.focusTable.tableId, getFocusedColumnIds(store.state)));
+			}
+			if (editor.focusTable && type === KeyBindingName.edit) {
+				const focusTable = editor.focusTable;
+				if (focusTable.edit) store.dispatch(editTableEndAction());
+				else if (focusTable.columnId && isToggleColumnTypes(focusTable.focusType)) store.dispatch(toggleColumnValueAction$(focusTable.focusType, focusTable.tableId, focusTable.columnId));
+				else store.dispatch(editTableAction());
+			}
+		}
+		if (type === KeyBindingName.stop) {
+			const endsEdit = isEditingText(editor) || Boolean(editor.drawRelationship) || editor.drawTableGroup;
+			ctx.host.dispatchEvent(forceFocusEvent());
+			if (endsEdit) {
+				event.preventDefault();
+				store.dispatch(drawEndRelationshipAction(), changeDrawTableGroupAction({ value: false }), editTableEndAction(), editMemoEndAction(), editTableGroupEndAction());
+			} else store.dispatch(drawEndRelationshipAction(), unselectAllAction$());
+		}
+		type === KeyBindingName.undo && store.undo();
+		type === KeyBindingName.redo && store.redo();
+	};
+	const handleCopy = (event) => {
+		const { store } = app.value;
+		const { state } = store;
+		const { editor, settings } = state;
+		if (isHighLevelTable(settings.zoomLevel) || !event.clipboardData) return;
+		if (editor.focusTable?.edit) return;
+		if (isEditableTarget(event.target)) return;
+		const focusTable = editor.focusTable;
+		const payload = focusTable && focusTable.selectColumnIds.length !== 0 ? columnsCopyToPayload(state) : entitiesCopyToPayload(state);
+		if (!payload) return;
+		event.preventDefault();
+		event.clipboardData.clearData();
+		if (payload.kind === PayloadKind.columns) {
+			event.clipboardData.setData("text/plain", tableCopyToText(state));
+			event.clipboardData.setData("text/html", tableCopyToHtml(state));
+		} else {
+			event.clipboardData.setData("text/plain", entitiesToTsv(payload, state));
+			event.clipboardData.setData("text/html", payloadToHtml(payload, entitiesToHtmlTable(payload, state)));
+		}
+		event.clipboardData.setData(CLIPBOARD_MIME, JSON.stringify(payload));
+	};
+	const handlePaste = (event) => {
+		const { store } = app.value;
+		if (store.getReadonly()) return;
+		const { state } = store;
+		const { editor, settings } = state;
+		if (isHighLevelTable(settings.zoomLevel) || editor.focusTable?.edit || !event.clipboardData) return;
+		if (isEditableTarget(event.target)) return;
+		const result = readClipboardPayload(event.clipboardData);
+		if (result.status === "unsupported") {
+			event.preventDefault();
+			return;
+		}
+		if (result.status === "ok" && result.payload.kind === PayloadKind.tables) {
+			event.preventDefault();
+			store.dispatch(pasteEntitiesAction$(result.payload, nextRound(result.payload.copyId)));
+			return;
+		}
+		if (Object.entries(editor.selectedMap).filter(([, type]) => type === SelectType.table).length === 0) return;
+		let columns = [];
+		if (result.status === "ok") columns = payloadToColumns(result.payload);
+		else {
+			const html = event.clipboardData.getData("text/html");
+			const text = event.clipboardData.getData("text/plain");
+			if (html.trim()) columns = tablePasteFromHtmlToColumns(state, html);
+			else if (text.trim()) columns = tablePasteFromTextToColumns(state, text);
+		}
+		if (columns.length === 0) return;
+		event.preventDefault();
+		store.dispatch(pasteTableAction$(columns));
+	};
+	onMounted(() => {
+		const { store, keydown$, shortcut$, emitter } = app.value;
+		addUnsubscribe(keydown$.pipe(erdShortcutPerformCheck(store.state)).subscribe(handleKeydown), shortcut$.pipe(erdShortcutPerformCheck(store.state)).subscribe(handleShortcut), fromCopy(emitter).pipe(erdShortcutPerformCheck(store.state)).subscribe(handleCopy), fromPaste(emitter).pipe(erdShortcutPerformCheck(store.state)).subscribe(handlePaste));
+	});
+}
+//#endregion
+export { useErdShortcut };

package/dist/components/erd/view-controls/ToolbarCompass.template.js

@@ -0,0 +1,10 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { formatDistance } from "../content-compass/compassGeometry.js";
+import { compass, compassDistance, divider } from "./viewControls.styles.js";
+//#region src/components/erd/view-controls/ToolbarCompass.template.tsx
+function toolbarCompass({ compass: compass$1, title, className, onClick }) {
+	return compass$1 ? html`<div class=${divider}></div><div class=${[className, compass]} title=${title} @click=${onClick}><${Icon} .name="arrow-right" .size=${14} .rotate=${compass$1.angle} /><span class=${compassDistance}>${formatDistance(compass$1.distance)}</span></div>` : null;
+}
+//#endregion
+export { toolbarCompass };

package/dist/components/erd/view-controls/nameViewDropdown.js

@@ -0,0 +1,107 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+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 { Open } from "../../../constants/open.js";
+import { toNameViewModeAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { middlePanPress$ } from "../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import ContextMenuContent from "../../primitives/context-menu/context-menu-content/ContextMenuContent.js";
+import ContextMenu from "../../primitives/context-menu/ContextMenu.js";
+import { nameViewOptions } from "../nameViewOptions.js";
+import { hidden, label, menu, trigger } from "./nameViewDropdown.styles.js";
+import { fromEvent } from "rxjs";
+//#region src/components/erd/view-controls/nameViewDropdown.tsx
+var CHEVRON_SIZE = 12;
+var MENU_ICON_SIZE = 14;
+var MENU_GAP = 8;
+function useNameViewDropdown(ctx) {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const $trigger = createRef();
+	const $menu = createRef();
+	const state = observable({
+		open: false,
+		x: 0,
+		y: 0
+	});
+	let stopListening = null;
+	const close = () => {
+		state.open = false;
+		stopListening?.();
+		stopListening = null;
+	};
+	const anchor = () => {
+		const trigger = $trigger.value;
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		const x = rect.left + rect.width / 2;
+		const y = rect.top - MENU_GAP;
+		if (state.x !== x) state.x = x;
+		if (state.y !== y) state.y = y;
+	};
+	const toggle = () => {
+		const trigger = $trigger.value;
+		if (state.open || !trigger) {
+			close();
+			return;
+		}
+		anchor();
+		state.open = true;
+		listen(trigger.getRootNode());
+	};
+	const pick = (value) => () => {
+		close();
+		const { store } = app.value;
+		store.dispatch(toNameViewModeAction(store.state, value, store.getReadonly()));
+	};
+	const handlePress = (event) => {
+		if (!state.open) return;
+		const target = event.target;
+		if (!target) return;
+		if ($menu.value?.contains(target) || $trigger.value?.contains(target)) return;
+		close();
+	};
+	const handleShortcut = ({ type }) => {
+		if (type !== KeyBindingName.stop) return;
+		if (app.value.store.state.editor.openMap[Open.search]) return;
+		close();
+	};
+	function listen(root) {
+		const presses = [fromEvent(root, "mousedown").subscribe(handlePress), middlePanPress$(root).subscribe(handlePress)];
+		stopListening = () => presses.forEach((press) => press.unsubscribe());
+	}
+	onMounted(() => {
+		addUnsubscribe(app.value.shortcut$.subscribe(handleShortcut), () => stopListening?.());
+	});
+	onUpdated(() => {
+		if (state.open) anchor();
+	});
+	const trigger$1 = () => {
+		const { t } = i18n.value;
+		const current = app.value.store.state.settings.nameViewMode;
+		return html`<div ${ref($trigger)} class=${[
+			"name-view-trigger",
+			trigger,
+			{ active: state.open }
+		]} title=${t("common.nameView")} @click=${toggle}><div class=${label}>${nameViewOptions.map((view) => html`<span class=${view.value === current ? null : hidden} aria-hidden=${view.value === current ? "false" : "true"}>${t(view.labelKey)}</span>`)}</div><${Icon} .name="chevron-down" .size=${CHEVRON_SIZE} /></div>`;
+	};
+	const menu$1 = () => {
+		if (!state.open) return null;
+		const { t } = i18n.value;
+		const current = app.value.store.state.settings.nameViewMode;
+		return html`<div ${ref($menu)} class=${["name-view-menu", menu]}><${ContextMenuContent} .id="name-view" .x=${state.x} .y=${state.y} .children=${html`${nameViewOptions.map((view) => html`<${ContextMenu.Item} .onClick=${pick(view.value)} .children=${html`<${ContextMenu.Menu} .icon=${view.value === current ? html`<${Icon} .name="check" .size=${MENU_ICON_SIZE} />` : null} .name=${t(view.labelKey)} />`} />`)}`} /></div>`;
+	};
+	return {
+		trigger: trigger$1,
+		menu: menu$1,
+		close
+	};
+}
+//#endregion
+export { useNameViewDropdown };

package/dist/components/erd/view-controls/nameViewDropdown.styles.js

@@ -0,0 +1,31 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+import { menu as menu$1 } from "./viewControls.styles.js";
+//#region src/components/erd/view-controls/nameViewDropdown.styles.ts
+var trigger = css`
+  ${menu$1}
+  width: auto;
+  padding: 0 6px;
+  gap: 4px;
+`;
+var label = css`
+  ${typography.paragraph};
+  display: grid;
+  white-space: nowrap;
+  user-select: none;
+
+  & > * {
+    grid-area: 1 / 1;
+  }
+`;
+var hidden = css`
+  visibility: hidden;
+`;
+var menu = css`
+  & > .context-menu-content {
+    transform: translate(-50%, -100%);
+    z-index: 2;
+  }
+`;
+//#endregion
+export { hidden, label, menu, trigger };

package/dist/components/erd/view-controls/viewControls.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const bar: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const readout: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const divider: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const compass: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const compassDistance: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=viewControls.styles.d.ts.map

package/dist/components/erd/view-controls/viewControls.styles.js

@@ -0,0 +1,75 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/erd/view-controls/viewControls.styles.ts
+var bar = css`
+  position: absolute;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  gap: 2px;
+  border: 1px solid var(--toast-border);
+  border-radius: 8px;
+  background-color: var(--toast-background);
+  box-shadow: 0 1px 6px -3px var(--minimap-shadow);
+  z-index: 1;
+`;
+var menu = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--gray-color-3);
+  }
+
+  &.active {
+    color: var(--active);
+    background-color: var(--context-menu-select);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--foreground);
+    background-color: transparent;
+    opacity: 0.4;
+  }
+`;
+var readout = css`
+  ${menu}
+  ${typography.paragraph};
+  width: auto;
+  min-width: 44px;
+  padding: 0 2px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+`;
+var divider = css`
+  width: 1px;
+  height: 18px;
+  margin: 1px 2px;
+  background-color: var(--toast-border);
+`;
+var compass = css`
+  ${menu}
+  width: auto;
+  padding: 0 6px;
+  gap: 6px;
+`;
+var compassDistance = css`
+  ${typography.paragraph};
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+`;
+//#endregion
+export { bar, compass, compassDistance, divider, menu, readout };

package/dist/components/erd/view-controls/zoomControls.d.ts

@@ -0,0 +1,9 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { Ctx } from '../../../internal-types';
+/**
+ * Zoom out, the zoom as a percentage, which puts it back to 100%, and zoom in,
+ * over the document of the store the bar stands on. A template rather than a
+ * component, so the three stand in the bar's own row and change in its pass.
+ */
+export declare function useZoomControls(ctx: Ctx): () => DOMTemplateLiterals;
+//# sourceMappingURL=zoomControls.d.ts.map

package/dist/components/erd/view-controls/zoomControls.js

@@ -0,0 +1,31 @@
+import { KeyBindingName, toShortcutTitle } from "../../../utils/keyboard-shortcut/index.js";
+import { toZoomFormat } from "../../../utils/validation.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { changeZoomLevelAction$, streamZoomLevelAction$ } from "../../../engine/modules/settings/generator.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { menu, readout } from "./viewControls.styles.js";
+import { ZOOM_STEP } from "../../../constants/zoom.js";
+//#region src/components/erd/view-controls/zoomControls.tsx
+var ICON_SIZE = 16;
+function useZoomControls(ctx) {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const handleZoomStep = (step) => () => {
+		const { store } = app.value;
+		store.dispatch(streamZoomLevelAction$(step));
+	};
+	const handleZoomReset = () => {
+		const { store } = app.value;
+		store.dispatch(changeZoomLevelAction$(1));
+	};
+	return () => {
+		const { store, keyBindingMap } = app.value;
+		const { t } = i18n.value;
+		const title = (labelKey, keyBindingName) => toShortcutTitle(keyBindingMap, t(labelKey), keyBindingName);
+		return html`<div class=${menu} title=${title("floatingToolbar.zoomOut", KeyBindingName.zoomOut)} @click=${handleZoomStep(-ZOOM_STEP)}><${Icon} .name="minus" .size=${ICON_SIZE} /></div><div class=${["zoom-level", readout]} title=${title("floatingToolbar.resetZoom", KeyBindingName.zoomReset)} @click=${handleZoomReset}>${toZoomFormat(store.state.settings.zoomLevel)}</div><div class=${menu} title=${title("floatingToolbar.zoomIn", KeyBindingName.zoomIn)} @click=${handleZoomStep(ZOOM_STEP)}><${Icon} .name="plus" .size=${ICON_SIZE} /></div>`;
+	};
+}
+//#endregion
+export { useZoomControls };