@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd-editor/viewportLayout.js

@@ -0,0 +1,93 @@
+import { CanvasType } from "../../constants/schema.js";
+import { observable } from "../../r-html/dist/observable/index.js";
+import { changeViewportAction } from "../../engine/modules/editor/atom.actions.js";
+import { isTakenOver } from "../../utils/takeover.js";
+import { explorerViewOf } from "../explorer/explorerView.js";
+//#region src/components/erd-editor/viewportLayout.ts
+var records = /* @__PURE__ */ new WeakMap();
+function recordOf(store) {
+	let record = records.get(store);
+	if (!record) {
+		record = {
+			layout: observable({
+				observed: {
+					width: 0,
+					height: 0
+				},
+				reach: 0
+			}, { shallow: true }),
+			inputs: null
+		};
+		records.set(store, record);
+	}
+	return record;
+}
+function layoutOf(store) {
+	return recordOf(store).layout;
+}
+var hasToolbar = ({ editor, settings }) => !editor.zenMode || settings.canvasType !== CanvasType.ERD;
+function editorWidthOf(store) {
+	return store.state.editor.viewport.width + layoutOf(store).reach;
+}
+function inputsOf(store, { observed }) {
+	const { state } = store;
+	const explorer = explorerViewOf(store);
+	return [
+		state.settings.canvasType,
+		state.editor.zenMode,
+		isTakenOver(state),
+		observed.width,
+		observed.height,
+		explorer.open,
+		explorer.width,
+		explorer.zenReveal
+	];
+}
+function explorerReach(store, observedWidth) {
+	const { editor, settings } = store.state;
+	const explorer = explorerViewOf(store);
+	if (!explorer.open || settings.canvasType !== CanvasType.ERD || isTakenOver(store.state) || editor.zenMode && !explorer.zenReveal) return 0;
+	const width = Math.min(explorer.width, observedWidth - 320);
+	return width < 200 ? 0 : width;
+}
+var sameInputs = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+function applyViewport(store) {
+	const record = recordOf(store);
+	const before = record.inputs;
+	let inputs = inputsOf(store, record.layout);
+	if (before && sameInputs(before, inputs)) return;
+	const explorer = explorerViewOf(store);
+	if (before && !before[1] && inputs[1] && explorer.zenReveal) {
+		explorer.zenReveal = false;
+		inputs = inputsOf(store, record.layout);
+	}
+	record.inputs = inputs;
+	const { layout } = record;
+	const { observed } = layout;
+	const reach = explorerReach(store, observed.width);
+	if (layout.reach !== reach) layout.reach = reach;
+	const toolbar = hasToolbar(store.state) ? 30 : 0;
+	const width = Math.max(0, observed.width - reach);
+	const height = Math.max(0, observed.height - toolbar);
+	const { viewport } = store.state.editor;
+	if (viewport.width === width && viewport.height === height) return;
+	store.dispatchSync(changeViewportAction({
+		width,
+		height
+	}));
+}
+function observeViewport(store) {
+	const record = recordOf(store);
+	record.inputs = inputsOf(store, record.layout);
+	return store.subscribe(() => applyViewport(store));
+}
+function measureRoot(store, observed) {
+	layoutOf(store).observed = observed;
+	applyViewport(store);
+}
+function insetPastExplorer(store, dir) {
+	const { reach } = layoutOf(store);
+	return dir === "ltr" && reach > 0 ? { "inset-inline-start": `${16 + reach}px` } : {};
+}
+//#endregion
+export { applyViewport, editorWidthOf, hasToolbar, insetPastExplorer, layoutOf, measureRoot, observeViewport };

package/dist/components/erd-view/ErdView.d.ts

@@ -0,0 +1,25 @@
+import { FC, Ref } from '@dineug/r-html';
+import { AppContext } from '../appContext';
+/** What a host's load of the document is doing, which a notice over the canvas tells the reader. */
+export type ViewStatus = 'idle' | 'loading' | 'error';
+export type ErdViewProps = {
+    /**
+     * Handed the view's own app as the view builds it, and null once it is gone,
+     * for the host that loads the document into it and reads it back.
+     */
+    appRef?: Ref<AppContext | null>;
+    /** Whether the map shows while the document has content; on unless false. */
+    minimap?: boolean;
+    /** Whether the controls bar shows, the compass and the name view menu with it; on unless false. */
+    controls?: boolean;
+    /** The notice over the canvas: a turning loader while loading, a warning once a load failed, none while idle. */
+    status?: ViewStatus;
+};
+/**
+ * The read-only scene root: a document drawn in a store of its own, which a
+ * press pans and lights and nothing edits, with its scrollbars, its map, the
+ * view controls and a palette that searches the document alone.
+ */
+declare const ErdView: FC<ErdViewProps>;
+export default ErdView;
+//# sourceMappingURL=ErdView.d.ts.map

package/dist/components/erd-view/ErdView.js

@@ -0,0 +1,125 @@
+import { isMod } from "../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.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 { Open } from "../../constants/open.js";
+import { hasContent } from "../../konva/scene/contentBounds.js";
+import { streamScrollToAction } from "../../engine/modules/settings/atom.actions.js";
+import { changeViewportAction, initialLoadJsonAction } from "../../engine/modules/editor/atom.actions.js";
+import { streamZoomLevelAction$ } from "../../engine/modules/settings/generator.actions.js";
+import { appContext, appDestroy, createAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { listenSceneHover } from "../erd/hitTest.js";
+import { sceneActiveContext, sceneInteractionContext } from "../sceneInteractionContext.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../sceneSourceContext.js";
+import { stopTransitions } from "../erd/canvas/highlightTransition.js";
+import { dropRelationshipHighlight } from "../erd/relationshipHighlight.js";
+import Canvas from "../erd/canvas/Canvas.js";
+import Minimap from "../erd/minimap/Minimap.js";
+import { fitDocument } from "../../konva/scene/fitZoom.js";
+import { createViewPress } from "../erd/canvas/readPress.js";
+import { getContentCompass, scrollToNearestContent } from "../erd/content-compass/compassGeometry.js";
+import VirtualScroll from "../erd/virtual-scroll/VirtualScroll.js";
+import { usePinchZoom } from "../../hooks/usePinchZoom.js";
+import { bar, divider, menu } from "../erd/view-controls/viewControls.styles.js";
+import { useNameViewDropdown } from "../erd/view-controls/nameViewDropdown.js";
+import { toolbarCompass } from "../erd/view-controls/ToolbarCompass.template.js";
+import { WHEEL_ZOOM_STEP } from "../../constants/zoom.js";
+import { useZoomControls } from "../erd/view-controls/zoomControls.js";
+import { createTableActions } from "../quick-search/documentSearch.js";
+import QuickSearch from "../quick-search/QuickSearch.js";
+import { useKeyBindingMap } from "../../hooks/useKeyBindingMap.js";
+import { createText } from "../../utils/text.js";
+import { useViewShortcut } from "../../hooks/useViewShortcut.js";
+import { root, status } from "./ErdView.styles.js";
+import { measureViewport } from "./viewportMeasure.js";
+//#region src/components/erd-view/ErdView.tsx
+var ICON_SIZE = 16;
+var ErdView = (props, ctx) => {
+	const text = createText();
+	const app = createAppContext({ toWidth: text.toWidth }, { getReadonly: () => true });
+	app.store.dispatchSync(changeViewportAction({
+		width: 0,
+		height: 0
+	}));
+	const appProvider = useProvider(ctx, appContext, app);
+	const sourceProvider = useProvider(ctx, sceneSourceContext, "document");
+	const interactionProvider = useProvider(ctx, sceneInteractionContext, "read");
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const canvas = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	useKeyBindingMap(ctx, root$1);
+	useViewShortcut(ctx);
+	const zoom = useZoomControls(ctx);
+	const nameView = useNameViewDropdown(ctx);
+	const isActive = () => Boolean(root$1.value?.matches(":focus-within"));
+	const activeProvider = useProvider(ctx, sceneActiveContext, isActive);
+	const isSearching = () => Boolean(app.store.state.editor.openMap[Open.search]);
+	const pinch = usePinchZoom({
+		app: () => app,
+		root: root$1,
+		enabled: () => !isSearching(),
+		interactive: isActive
+	});
+	const press = createViewPress({
+		app,
+		root: root$1,
+		canvas,
+		pinches: pinch.handleTouchstart
+	});
+	if (props.appRef) props.appRef.value = app;
+	addUnsubscribe(app.store.subscribe((actions) => {
+		if (actions.some(({ type }) => type === initialLoadJsonAction.type)) press.reset();
+	}), () => {
+		const { id } = app.store.state.editor;
+		press.destroy();
+		stopTransitions(id);
+		dropRelationshipHighlight(id);
+		appDestroy(app);
+		activeProvider.destroy();
+		interactionProvider.destroy();
+		sourceProvider.destroy();
+		appProvider.destroy();
+		if (props.appRef?.value === app) props.appRef.value = null;
+	});
+	const handleWheel = (event) => {
+		if (pinch.handleWheel(event) || !isActive() || isSearching()) return;
+		event.preventDefault();
+		const isReverse = event.shiftKey && event.deltaX === 0 && event.deltaY !== 0;
+		app.store.dispatch(isMod(event) ? streamZoomLevelAction$(event.deltaY < 0 ? WHEEL_ZOOM_STEP : -WHEEL_ZOOM_STEP) : streamScrollToAction(isReverse ? {
+			movementX: event.deltaY * -1,
+			movementY: event.deltaX * -1
+		} : {
+			movementX: event.deltaX * -1,
+			movementY: event.deltaY * -1
+		}));
+	};
+	const handleFit = () => {
+		fitDocument(app.store);
+	};
+	const handleCompass = () => {
+		scrollToNearestContent(app.store, "document");
+	};
+	onMounted(() => {
+		addUnsubscribe(measureViewport(app.store, root$1.value), listenSceneHover(canvas.value, press.handleHover));
+	});
+	const notice = (status$1, t) => status$1 === "loading" ? html`<div class=${["view-status", status]} role="status" data-busy="true"><${Icon} .name="loader-circle" .size=${ICON_SIZE} /><span>${t("viewer.loading")}</span></div>` : status$1 === "error" ? html`<div class=${["view-status", status]} role="alert" data-tone="error"><${Icon} .name="triangle-alert" .size=${ICON_SIZE} /><span>${t("viewer.loadError")}</span></div>` : null;
+	return () => {
+		const { state } = app.store;
+		const { t, locale, dir } = i18n.value;
+		const showMinimap = props.minimap !== false && hasContent(state);
+		const showControls = props.controls !== false;
+		return html`<div ${ref(root$1)} class=${["erd-view", root]} style=${{ cursor: press.state.panning ? "grabbing" : "" }} tabindex="0" .lang=${locale} .dir=${dir} @mousedown=${press.handlePress} @touchstart=${press.handlePress} @wheel=${handleWheel}><${Canvas} .root=${root$1} .canvas=${canvas} .grabMove=${false} /><${VirtualScroll} />${showMinimap ? html`<${Minimap} />` : null}${showControls ? html`<div class=${["view-controls", bar]} .dir="ltr">${zoom()}<div class=${divider}></div><div class=${["view-fit", menu]} title=${t("visualization.fit")} @click=${handleFit}><${Icon} .name="fullscreen" .size=${ICON_SIZE} /></div><div class=${divider}></div>${nameView.trigger()}${toolbarCompass({
+			compass: getContentCompass(state, "document"),
+			title: t("floatingToolbar.goToContent"),
+			className: "content-compass",
+			onClick: handleCompass
+		})}</div>` : null}${showControls ? nameView.menu() : null}${notice(props.status, t)}<${QuickSearch} .topLevel=${createTableActions} />${text.span}</div>`;
+	};
+};
+//#endregion
+export { ErdView as default };

package/dist/components/erd-view/ErdView.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=ErdView.styles.d.ts.map

package/dist/components/erd-view/ErdView.styles.js

@@ -0,0 +1,51 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/erd-view/ErdView.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  &:focus-within {
+    touch-action: none;
+  }
+`;
+var status = css`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 32px);
+  padding: 8px 12px;
+  border: 1px solid var(--toast-border);
+  border-radius: 8px;
+  background-color: var(--toast-background);
+  box-shadow: 0 1px 6px -3px var(--minimap-shadow);
+  color: var(--foreground);
+  pointer-events: none;
+  z-index: 1;
+
+  & > .icon {
+    flex: none;
+  }
+
+  &[data-busy] svg {
+    animation: viewStatusSpin 0.9s linear infinite;
+  }
+
+  &[data-tone='error'] > .icon {
+    color: var(--toast-error);
+  }
+
+  @keyframes viewStatusSpin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+//#endregion
+export { root, status };

package/dist/components/erd-view/viewportMeasure.d.ts

@@ -0,0 +1,9 @@
+import { RxStore } from '../../engine/rx-store';
+import { Unsubscribe } from '../../internal-types';
+/**
+ * Hands the store the size of the element the read-only view fills as its
+ * viewport, on every resize, and dispatches nothing for a size it already holds.
+ * The editor's viewportLayout.ts makes room for the Explorer, which this never reaches.
+ */
+export declare function measureViewport(store: RxStore, target: Element): Unsubscribe;
+//# sourceMappingURL=viewportMeasure.d.ts.map

package/dist/components/erd-view/viewportMeasure.js

@@ -0,0 +1,19 @@
+import { changeViewportAction } from "../../engine/modules/editor/atom.actions.js";
+//#region src/components/erd-view/viewportMeasure.ts
+function measureViewport(store, target) {
+	const observer = new ResizeObserver((entries) => {
+		for (const { contentRect } of entries) {
+			const { width, height } = contentRect;
+			const { viewport } = store.state.editor;
+			if (viewport.width === width && viewport.height === height) continue;
+			store.dispatchSync(changeViewportAction({
+				width,
+				height
+			}));
+		}
+	});
+	observer.observe(target);
+	return () => observer.disconnect();
+}
+//#endregion
+export { measureViewport };

package/dist/components/erd-viewer/ErdViewer.d.ts

@@ -0,0 +1,67 @@
+import { CustomElementClass } from '../customElementClass';
+import { NameViewMode } from '../../constants/schema';
+import { LocaleOption } from '../../i18n/locales';
+import { ValuesType } from '../../internal-types';
+import { Appearance, ThemeOptions } from '../../themes/radix-ui-theme';
+import { Theme as ThemeType } from '../../themes/tokens';
+declare global {
+    interface HTMLElementTagNameMap {
+        'erd-viewer': ErdViewerElement;
+    }
+}
+type NameView = ValuesType<typeof NameViewMode>;
+export type ErdViewerProps = {
+    /**
+     * The url of a document in the form a file saves, fetched with GET under the
+     * browser's CORS rules; empty for none. Whichever of it and value is set last
+     * wins, and a fetch still running when the element leaves the page is aborted.
+     */
+    src: string;
+    /** The name view the attribute shows over the document's own; null shows the document's. */
+    nameView: NameView | null;
+    /** Whether the minimap shows; the attribute turns it off only as "false". */
+    minimap: boolean;
+    /** Whether the view controls show; the attribute turns them off only as "false". */
+    controls: boolean;
+};
+export interface ErdViewerElement extends ErdViewerProps, HTMLElement {
+    /**
+     * The document as a file saves it, which keeps the file's zoom and scroll
+     * while it locks its viewport, as a new one does, and the reader's otherwise.
+     * Setting one replaces the document and cancels a src fetch; text with none throws.
+     */
+    value: string;
+    setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
+    /** What the system appearance shows, for a page with its own light and dark; null follows the OS. */
+    setSystemAppearance: (appearance: Appearance | null) => void;
+    setTheme: (theme: Partial<ThemeType>) => void;
+    /**
+     * 'system', the default, reads the page's html lang, then navigator.languages,
+     * as the element first connected; a code fixes one. Resolves once its dictionary
+     * has landed or failed, leaving it or English in force unless a later call won.
+     */
+    setLocale: (locale: LocaleOption) => Promise<void>;
+    /**
+     * What system means: a BCP 47 tag, or null for the page's languages read as
+     * the element first connected. Resolves as setLocale does.
+     */
+    setSystemLocale: (locale: string | null) => Promise<void>;
+    /**
+     * Ends the viewer: takes the view down at once, in the page or out of it,
+     * aborts a fetch still running, lets the OS color scheme and the page's
+     * styles go and draws nothing more, connected again or not.
+     */
+    destroy: () => void;
+}
+/**
+ * The element class, which nothing registers until defineErdViewer() runs or
+ * a caller defines it under a tag of its own.
+ */
+export declare const ErdViewerElement: CustomElementClass<ErdViewerElement>;
+/**
+ * Defines erd-viewer as ErdViewerElement. A second call leaves the definition
+ * as it is, and a tag another class already holds throws, naming the tag.
+ */
+export declare function defineErdViewer(): void;
+export {};
+//# sourceMappingURL=ErdViewer.d.ts.map