@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/utils/emitter.d.ts

@@ -37,7 +37,9 @@ declare const InternalActionType: {
     readonly mouseTrackerEnd: "mouseTrackerEnd";
     readonly openDiffViewer: "openDiffViewer";
     readonly openAutomaticTablePlacement: "openAutomaticTablePlacement";
+    readonly cancelElkPlacement: "cancelElkPlacement";
     readonly duplicateDragStart: "duplicateDragStart";
+    readonly duplicateDragCancel: "duplicateDragCancel";
     readonly dragSelectStart: "dragSelectStart";
 };
 type InternalActionType = ValuesType<typeof InternalActionType>;
@@ -82,10 +84,12 @@ type InternalActionMap = {
     [InternalActionType.openAutomaticTablePlacement]: {
         placement: TablePlacement;
     };
+    [InternalActionType.cancelElkPlacement]: void;
     [InternalActionType.duplicateDragStart]: {
         tableIds: string[];
         memoIds: string[];
     } | void;
+    [InternalActionType.duplicateDragCancel]: void;
     [InternalActionType.dragSelectStart]: {
         x: number;
         y: number;
@@ -238,6 +242,12 @@ export declare const openAutomaticTablePlacementAction: {
     toString(): string;
     type: string;
 };
+/** Aborts every ELK placement the ERD tab still waits on, which it hears with another tab shown too. */
+export declare const cancelElkPlacementAction: {
+    (payload: void): AnyAction<void>;
+    toString(): string;
+    type: string;
+};
 export declare const duplicateDragStartAction: {
     (payload: void | {
         tableIds: string[];
@@ -249,6 +259,11 @@ export declare const duplicateDragStartAction: {
     toString(): string;
     type: string;
 };
+export declare const duplicateDragCancelAction: {
+    (payload: void): AnyAction<void>;
+    toString(): string;
+    type: string;
+};
 export declare const dragSelectStartAction: {
     (payload: {
         x: number;

package/dist/utils/emitter.js

@@ -0,0 +1,76 @@
+import { createAction } from "../r-html/dist/store/index.js";
+import { safeCallback } from "./safeCallback.js";
+import _classPrivateFieldInitSpec from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/classPrivateFieldInitSpec.js";
+import _classPrivateFieldGet2 from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/classPrivateFieldGet2.js";
+//#region src/utils/emitter.ts
+var InternalActionType = {
+	openColorPicker: "openColorPicker",
+	closeColorPicker: "closeColorPicker",
+	openToast: "openToast",
+	openTableProperties: "openTableProperties",
+	dragendColumnAll: "dragendColumnAll",
+	copy: "copy",
+	paste: "paste",
+	toggleSearch: "toggleSearch",
+	openFindReplace: "openFindReplace",
+	openExportImage: "openExportImage",
+	openMapColumns: "openMapColumns",
+	openThemeBuilder: "openThemeBuilder",
+	setThemeOptions: "setThemeOptions",
+	openLocalePicker: "openLocalePicker",
+	setLocaleOption: "setLocaleOption",
+	mouseTrackerStart: "mouseTrackerStart",
+	mouseTrackerEnd: "mouseTrackerEnd",
+	openDiffViewer: "openDiffViewer",
+	openAutomaticTablePlacement: "openAutomaticTablePlacement",
+	cancelElkPlacement: "cancelElkPlacement",
+	duplicateDragStart: "duplicateDragStart",
+	duplicateDragCancel: "duplicateDragCancel",
+	dragSelectStart: "dragSelectStart"
+};
+var _observers = /* @__PURE__ */ new WeakMap();
+var Emitter = class {
+	constructor() {
+		_classPrivateFieldInitSpec(this, _observers, /* @__PURE__ */ new Set());
+	}
+	on(listeners) {
+		_classPrivateFieldGet2(_observers, this).has(listeners) || _classPrivateFieldGet2(_observers, this).add(listeners);
+		return () => {
+			_classPrivateFieldGet2(_observers, this).delete(listeners);
+		};
+	}
+	emit(action) {
+		_classPrivateFieldGet2(_observers, this).forEach((listeners) => {
+			const listener = Reflect.get(listeners, action.type);
+			safeCallback(listener, action);
+		});
+	}
+	clear() {
+		_classPrivateFieldGet2(_observers, this).clear();
+	}
+};
+var openColorPickerAction = createAction(InternalActionType.openColorPicker);
+var closeColorPickerAction = createAction(InternalActionType.closeColorPicker);
+var openToastAction = createAction(InternalActionType.openToast);
+var openTablePropertiesAction = createAction(InternalActionType.openTableProperties);
+var dragendColumnAllAction = createAction(InternalActionType.dragendColumnAll);
+var copyAction = createAction(InternalActionType.copy);
+var pasteAction = createAction(InternalActionType.paste);
+var toggleSearchAction = createAction(InternalActionType.toggleSearch);
+var openFindReplaceAction = createAction(InternalActionType.openFindReplace);
+var openExportImageAction = createAction(InternalActionType.openExportImage);
+var openMapColumnsAction = createAction(InternalActionType.openMapColumns);
+var openThemeBuilderAction = createAction(InternalActionType.openThemeBuilder);
+var setThemeOptionsAction = createAction(InternalActionType.setThemeOptions);
+var openLocalePickerAction = createAction(InternalActionType.openLocalePicker);
+var setLocaleOptionAction = createAction(InternalActionType.setLocaleOption);
+var mouseTrackerStartAction = createAction(InternalActionType.mouseTrackerStart);
+var mouseTrackerEndAction = createAction(InternalActionType.mouseTrackerEnd);
+var openDiffViewerAction = createAction(InternalActionType.openDiffViewer);
+var openAutomaticTablePlacementAction = createAction(InternalActionType.openAutomaticTablePlacement);
+var cancelElkPlacementAction = createAction(InternalActionType.cancelElkPlacement);
+var duplicateDragStartAction = createAction(InternalActionType.duplicateDragStart);
+var duplicateDragCancelAction = createAction(InternalActionType.duplicateDragCancel);
+var dragSelectStartAction = createAction(InternalActionType.dragSelectStart);
+//#endregion
+export { Emitter, cancelElkPlacementAction, closeColorPickerAction, copyAction, dragSelectStartAction, dragendColumnAllAction, duplicateDragCancelAction, duplicateDragStartAction, mouseTrackerEndAction, mouseTrackerStartAction, openAutomaticTablePlacementAction, openColorPickerAction, openDiffViewerAction, openExportImageAction, openFindReplaceAction, openLocalePickerAction, openMapColumnsAction, openTablePropertiesAction, openThemeBuilderAction, openToastAction, pasteAction, setLocaleOptionAction, setThemeOptionsAction, toggleSearchAction };

package/dist/utils/file/exportFile.js

@@ -0,0 +1,52 @@
+import { createDocumentPng, createDocumentSvg } from "../../services/export-png/index.js";
+//#region src/utils/file/exportFile.ts
+var performExportFileExtra = null;
+function setExportFileCallback(callback) {
+	performExportFileExtra = callback;
+}
+function performExport(blob, options) {
+	(performExportFileExtra ? performExportFileExtra : performExportBuiltin)(blob, options);
+}
+function performExportBuiltin(blob, options) {
+	const a = document.createElement("a");
+	a.href = URL.createObjectURL(blob);
+	a.download = options.fileName;
+	a.click();
+}
+var pad = (value, length = 2) => String(value).padStart(length, "0");
+function formatTimestamp(date) {
+	return `${`${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`}T${`${pad(date.getHours())}_${pad(date.getMinutes())}_${pad(date.getSeconds())}`}`;
+}
+function createName(suffix, name) {
+	const prefix = formatTimestamp(/* @__PURE__ */ new Date());
+	return name?.trim() ? `${name}-${prefix}${suffix}` : `unnamed-${prefix}${suffix}`;
+}
+function exportJSON(json, name) {
+	performExport(new Blob([json], { type: "application/json" }), { fileName: createName(".erd.json", name) });
+}
+function exportSchemaSQL(sql, name) {
+	performExport(new Blob([sql]), { fileName: createName(".sql", name) });
+}
+var DICTIONARY_CSV_SUFFIX = {
+	word: "-words.csv",
+	term: "-terms.csv",
+	domain: "-domains.csv"
+};
+function exportCSV(csv, sheet, name) {
+	performExport(new Blob([csv], { type: "text/csv" }), { fileName: createName(DICTIONARY_CSV_SUFFIX[sheet], name) });
+}
+function exportCode(code, extension, name) {
+	performExport(new Blob([code]), { fileName: createName(extension, name) });
+}
+function exportPNG(options, name) {
+	return createDocumentPng(options).then((blob) => {
+		performExport(blob, { fileName: createName(".png", name) });
+	});
+}
+function exportSVG(options, name) {
+	return createDocumentSvg(options).then((svg) => {
+		performExport(new Blob([svg], { type: "image/svg+xml" }), { fileName: createName(".svg", name) });
+	});
+}
+//#endregion
+export { exportCSV, exportCode, exportJSON, exportPNG, exportSVG, exportSchemaSQL, setExportFileCallback };

package/dist/utils/file/importFile.js

@@ -0,0 +1,201 @@
+import { loadJsonAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { openDiffViewerAction } from "../emitter.js";
+import { localized } from "../../components/localized/Localized.js";
+import { openStatusToast } from "../../components/toast-container/openStatusToast.js";
+import { appendSchemaJSON, appendSchemaPlaced, importSchemaPlaced } from "./importSchema.js";
+import { isString } from "es-toolkit";
+//#region src/utils/file/importFile.tsx
+var JSON_EXTENSION = /\.json$/i;
+var SQL_EXTENSION = /\.sql$/i;
+var GRAPHQL_EXTENSION = /\.(graphql|gql|graphqls)$/i;
+var GRAPHQL_ACCEPT = ".graphql,.gql,.graphqls";
+var DBML_EXTENSION = /\.dbml$/i;
+var AML_EXTENSION = /\.aml$/i;
+var performImportFileExtra = null;
+function setImportFileCallback(callback) {
+	performImportFileExtra = callback;
+}
+function openImportOnlyToast(emitter, format) {
+	openStatusToast(emitter, {
+		key: `feedback.importOnly:${format}`,
+		tone: "error",
+		title: localized("feedback.importOnly", { format })
+	});
+}
+function toImportOptions(type, accept, mode) {
+	return mode === "append" ? {
+		type,
+		op: "set",
+		accept,
+		mode
+	} : {
+		type,
+		op: "set",
+		accept
+	};
+}
+function landSchema(app, type, value, mode) {
+	return mode === "append" ? appendSchemaPlaced(app, type, value) : importSchemaPlaced(app, type, value);
+}
+function importJSON(app, mode = "replace") {
+	const { store, emitter } = app;
+	if (performImportFileExtra) {
+		performImportFileExtra(toImportOptions("json", ".json", mode));
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", ".json");
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!JSON_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "json");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			if (mode === "append") appendSchemaJSON(app, value);
+			else store.dispatch(loadJsonAction$(value));
+		};
+	});
+	input.click();
+}
+function importSchemaSQL(app, mode = "replace") {
+	const { emitter } = app;
+	if (performImportFileExtra) {
+		performImportFileExtra(toImportOptions("sql", ".sql", mode));
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", `.sql`);
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!SQL_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "sql");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			landSchema(app, "sql", value, mode);
+		};
+	});
+	input.click();
+}
+function importGraphQL(app, mode = "replace") {
+	const { emitter } = app;
+	if (performImportFileExtra) {
+		performImportFileExtra(toImportOptions("graphql", GRAPHQL_ACCEPT, mode));
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", GRAPHQL_ACCEPT);
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!GRAPHQL_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "graphql");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			landSchema(app, "graphql", value, mode);
+		};
+	});
+	input.click();
+}
+function importDBML(app, mode = "replace") {
+	const { emitter } = app;
+	if (performImportFileExtra) {
+		performImportFileExtra(toImportOptions("dbml", ".dbml", mode));
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", ".dbml");
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!DBML_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "dbml");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			landSchema(app, "dbml", value, mode);
+		};
+	});
+	input.click();
+}
+function importAML(app, mode = "replace") {
+	const { emitter } = app;
+	if (performImportFileExtra) {
+		performImportFileExtra(toImportOptions("aml", ".aml", mode));
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", ".aml");
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!AML_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "aml");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			landSchema(app, "aml", value, mode);
+		};
+	});
+	input.click();
+}
+function importDiffJSON({ emitter }) {
+	if (performImportFileExtra) {
+		performImportFileExtra({
+			type: "json",
+			op: "diff",
+			accept: ".json"
+		});
+		return;
+	}
+	const input = document.createElement("input");
+	input.setAttribute("type", "file");
+	input.setAttribute("accept", ".json");
+	input.addEventListener("change", () => {
+		const file = input.files?.[0];
+		if (!file) return;
+		if (!JSON_EXTENSION.test(file.name)) {
+			openImportOnlyToast(emitter, "json");
+			return;
+		}
+		const reader = new FileReader();
+		reader.readAsText(file);
+		reader.onload = () => {
+			const value = reader.result;
+			if (!isString(value)) return;
+			emitter.emit(openDiffViewerAction({ value }));
+		};
+	});
+	input.click();
+}
+//#endregion
+export { importAML, importDBML, importDiffJSON, importGraphQL, importJSON, importSchemaSQL, setImportFileCallback };

package/dist/utils/file/importSchema.js

@@ -0,0 +1,128 @@
+import { toJson } from "../../erd-editor-schema/dist/parser.js";
+import { arrayHas } from "../arrayHas.js";
+import { ActionType } from "../../engine/modules/editor/actions.js";
+import { SelectType } from "../../engine/modules/editor/state.js";
+import { isMemoShown } from "../memo.js";
+import { getTableGroupWraps, isTableGroupShown } from "../tableGroup.js";
+import { selectAction } from "../../engine/modules/editor/atom.actions.js";
+import { loadJsonAction$, loadSchemaAction$, toSchemaAppend, toSchemaImportJson, unselectAllAction$, withGridPoints, withImportSettings } from "../../engine/modules/editor/generator.actions.js";
+import { closePromise } from "../promise.js";
+import { scrollIntoView, showErdTab } from "../../components/erd/goToErdTarget.js";
+import { placeByFlow } from "../../components/erd/automatic-table-placement/flowPlacement.js";
+//#region src/utils/file/importSchema.ts
+var isLoad = arrayHas([
+	ActionType.clear,
+	ActionType.loadJson,
+	ActionType.initialClear,
+	ActionType.initialLoadJson
+]);
+var placements = /* @__PURE__ */ new WeakMap();
+var landingStores = /* @__PURE__ */ new WeakSet();
+function startPlacement(store, replace) {
+	const pending = placements.get(store) ?? /* @__PURE__ */ new Set();
+	placements.set(store, pending);
+	if (replace) pending.forEach(({ controller }) => controller.abort());
+	const before = Promise.all(Array.from(pending, ({ done }) => done));
+	const controller = new AbortController();
+	const [done, finish] = closePromise();
+	const placement = {
+		controller,
+		done
+	};
+	const unsubscribe = store.subscribe((actions) => {
+		if (landingStores.has(store)) return;
+		actions.some(({ type }) => isLoad(type)) && controller.abort();
+	});
+	pending.add(placement);
+	const stop = () => {
+		unsubscribe();
+		pending.delete(placement);
+		finish();
+	};
+	return {
+		signal: controller.signal,
+		before,
+		stop
+	};
+}
+async function placeAndLand(app, json, replace, land) {
+	const { store } = app;
+	const { signal, before, stop } = startPlacement(store, replace);
+	try {
+		const points = await placeByFlow(app, json, signal);
+		await before;
+		if (signal.aborted) return;
+		landingStores.add(store);
+		try {
+			land(points);
+		} finally {
+			landingStores.delete(store);
+		}
+	} finally {
+		stop();
+	}
+}
+function importSchema({ store }, type, value) {
+	store.dispatchSync(loadSchemaAction$(type, value));
+}
+function toLandingJson(json, state, points) {
+	const schema = JSON.parse(json);
+	const { doc, collections } = schema;
+	const tables = collections.tableEntities;
+	withImportSettings(schema, state.settings);
+	points?.forEach(({ id, x, y }) => {
+		tables[id].ui.x = 50 + x;
+		tables[id].ui.y = 50 + y;
+	});
+	if (points && doc.tableGroupIds?.length) getTableGroupWraps({
+		...state,
+		...schema
+	}).forEach(({ id, x, y, width, height }) => Object.assign(collections.tableGroupEntities[id].ui, {
+		x,
+		y,
+		width,
+		height
+	}));
+	return toJson(schema);
+}
+async function importSchemaPlaced(app, type, value) {
+	const { store } = app;
+	if (store.getReadonly()) return;
+	const json = toSchemaImportJson(type, value, store.state, app);
+	await placeAndLand(app, json, true, (points) => {
+		const landing = toLandingJson(json, store.state, points);
+		store.dispatchSync(loadJsonAction$(points ? landing : withGridPoints(landing, store.state, app), { keepDictionaries: true }));
+	});
+}
+var appendLandingAction$ = ({ actions, tableIds, memoIds, tableGroupIds, rect }) => function* (state) {
+	yield unselectAllAction$();
+	yield actions;
+	yield selectAction(Object.fromEntries([
+		...tableIds.map((id) => [id, SelectType.table]),
+		...(isMemoShown(state) ? memoIds : []).map((id) => [id, SelectType.memo]),
+		...(isTableGroupShown(state) ? tableGroupIds : []).map((id) => [id, SelectType.tableGroup])
+	]));
+	yield* scrollIntoView(state, rect);
+};
+function landAppend(app, json, layout) {
+	const { store } = app;
+	if (store.getReadonly()) return;
+	const append = toSchemaAppend(store.state, json, layout, app);
+	if (!append) return;
+	showErdTab(store);
+	store.dispatchSync(appendLandingAction$(append));
+}
+function appendSchema(app, type, value) {
+	landAppend(app, toSchemaImportJson(type, value, app.store.state, app), "grid");
+}
+function appendSchemaJSON(app, value) {
+	landAppend(app, value, "file");
+}
+async function appendSchemaPlaced(app, type, value) {
+	const { store } = app;
+	if (store.getReadonly()) return;
+	const json = toSchemaImportJson(type, value, store.state, app);
+	await placeAndLand(app, json, false, (points) => landAppend(app, json, points ?? "grid"));
+}
+//#endregion
+export { appendSchema, appendSchemaJSON, appendSchemaPlaced, importSchema, importSchemaPlaced };