@dineug/erd-editor 3.1.8 → 3.2.0

package/README.md

@@ -43,433 +43,6 @@ document.body.appendChild(editor);
 </script>
 ```
 
-# ErdEditorElement
-
-```ts
-interface ErdEditorElement extends HTMLElement {
-  readonly: boolean;
-  systemDarkMode: boolean; // system dark/light auto
-  enableThemeBuilder: boolean;
-  value: string;
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  destroy: () => void;
-  setInitialValue: (value: string) => void;
-  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
-  setTheme: (theme: Partial<Theme>) => void;
-  setKeyBindingMap: (keyBindingMap: Partial<KeyBindingMap>) => void;
-  setSchemaSQL: (value: string) => void;
-  getSchemaSQL: (databaseVendor?: DatabaseVendor) => string;
-  getSharedStore: (config?: SharedStoreConfig) => SharedStore;
-}
-```
-
-## readonly
-
-Sets the editing capability of the editor.
-
-```js
-editor.readonly = true;
-// or
-editor.setAttribute('readonly', 'true');
-```
-
-```html
-<erd-editor readonly></erd-editor>
-```
-
-## systemDarkMode
-
-Determines whether to automatically synchronize with the system's dark/light mode.
-
-```js
-editor.systemDarkMode = true;
-// or
-editor.setAttribute('systemDarkMode', 'true');
-```
-
-```html
-<erd-editor system-dark-mode></erd-editor>
-```
-
-## enableThemeBuilder
-
-Determines if a UI for easily setting preset themes is provided.
-
-<img src="https://github.com/dineug/erd-editor/blob/main/img/theme-builder.png?raw=true" width="400" />
-
-```js
-editor.enableThemeBuilder = true;
-// or
-editor.setAttribute('enableThemeBuilder', 'true');
-```
-
-```html
-<erd-editor enable-theme-builder></erd-editor>
-```
-
-Triggers the `changePresetTheme` event upon changing the preset theme.
-
-```js
-editor.addEventListener('changePresetTheme', event => {
-  const themeOptions = event.detail;
-});
-```
-
-## value
-
-### getter
-
-Retrieves the current editor state as JSON data.
-
-```js
-const data = editor.value;
-```
-
-### setter
-
-Loads a previously saved editor state. It is recorded in the history list, enabling `Undo, Redo`.
-
-```js
-editor.value = 'json...';
-```
-
-## setInitialValue
-
-Loads a previously saved editor state. It is not recorded in the history list, so `Undo, Redo` is not possible.
-
-```js
-editor.setInitialValue('json...');
-```
-
-## Event
-
-### change
-
-When there are changes in the editor, it emits an event.
-
-```js
-editor.addEventListener('change', event => {
-  const data = event.target.value;
-});
-```
-
-## focus
-
-Focuses on the editor.
-
-```js
-editor.focus();
-```
-
-## blur
-
-Removes focus from the editor.
-
-```js
-editor.blur();
-```
-
-## clear
-
-Resets the editor state.
-
-```js
-editor.clear();
-```
-
-## destroy
-
-Completely disables reusing the editor instance.
-
-```js
-editor.destroy();
-```
-
-## setKeyBindingMap
-
-Redefines keyboard shortcuts.
-
-```ts
-type ShortcutOption = {
-  shortcut: string;
-  preventDefault?: boolean;
-  stopPropagation?: boolean;
-};
-
-const defaultKeyBindingMap: KeyBindingMap = {
-  addTable: [{ shortcut: 'Alt+KeyN' }],
-  addColumn: [{ shortcut: 'Alt+Enter' }],
-  addMemo: [{ shortcut: 'Alt+KeyM' }],
-  removeTable: [{ shortcut: '$mod+Backspace' }, { shortcut: '$mod+Delete' }],
-  removeColumn: [{ shortcut: 'Alt+Backspace' }, { shortcut: 'Alt+Delete' }],
-  primaryKey: [{ shortcut: 'Alt+KeyK' }],
-  selectAllTable: [{ shortcut: '$mod+Alt+KeyA' }],
-  selectAllColumn: [{ shortcut: 'Alt+KeyA' }],
-  relationshipZeroOne: [{ shortcut: '$mod+Alt+Digit1' }],
-  relationshipZeroN: [{ shortcut: '$mod+Alt+Digit2' }],
-  relationshipOneOnly: [{ shortcut: '$mod+Alt+Digit3' }],
-  relationshipOneN: [{ shortcut: '$mod+Alt+Digit4' }],
-  tableProperties: [{ shortcut: 'Alt+Space' }],
-};
-
-// example
-editor.setKeyBindingMap({
-  addTable: [{ shortcut: '$mod+KeyN', preventDefault: true }];
-});
-```
-
-### $mod
-
-Switches `Control` key depending on the environment.
-
-- Mac: $mod = Meta (⌘)
-- Windows/Linux: $mod = Control
-
-### Shortcut Table
-
-Uses keyboard event `key, code` properties.
-Use `code` for absolute positions and `key` for input values.
-
-| Windows       | macOS           | `key`         | `code`                         |
-| ------------- | --------------- | ------------- | ------------------------------ |
-| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |
-| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |
-| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |
-| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |
-| `Space`       | `Space`         | N/A           | `Space`                        |
-| `Enter`       | `Return`        | `Enter`       | `Enter`                        |
-| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |
-| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |
-| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |
-| `-`           | `-`             | `-`           | `Minus`                        |
-| `=`           | `=`             | `=`           | `Equal`                        |
-| `+`           | `+`             | `+`           | `Equal`\*                      |
-
-## Theme
-
-### setPresetTheme
-
-Sets a preset theme.
-
-```ts
-type ThemeOptions = {
-  appearance: 'dark' | 'light';
-  grayColor: 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand';
-  accentColor:
-    | 'gray'
-    | 'gold'
-    | 'bronze'
-    | 'brown'
-    | 'yellow'
-    | 'amber'
-    | 'orange'
-    | 'tomato'
-    | 'red'
-    | 'ruby'
-    | 'crimson'
-    | 'pink'
-    | 'plum'
-    | 'purple'
-    | 'violet'
-    | 'iris'
-    | 'indigo'
-    | 'blue'
-    | 'cyan'
-    | 'teal'
-    | 'jade'
-    | 'green'
-    | 'grass'
-    | 'lime'
-    | 'mint'
-    | 'sky';
-};
-
-// example
-editor.setPresetTheme({ appearance: 'light' });
-```
-
-### setTheme
-
-Allows customizing the theme.
-
-#### JavaScript
-
-```ts
-type Theme = {
-  grayColor1: string;
-  grayColor2: string;
-  grayColor3: string;
-  grayColor4: string;
-  grayColor5: string;
-  grayColor6: string;
-  grayColor7: string;
-  grayColor8: string;
-  grayColor9: string;
-  grayColor10: string;
-  grayColor11: string;
-  grayColor12: string;
-
-  accentColor1: string;
-  accentColor2: string;
-  accentColor3: string;
-  accentColor4: string;
-  accentColor5: string;
-  accentColor6: string;
-  accentColor7: string;
-  accentColor8: string;
-  accentColor9: string;
-  accentColor10: string;
-  accentColor11: string;
-  accentColor12: string;
-
-  canvasBackground: string;
-  canvasBoundaryBackground: string;
-
-  tableBackground: string;
-  tableSelect: string;
-  tableBorder: string;
-
-  memoBackground: string;
-  memoSelect: string;
-  memoBorder: string;
-
-  columnSelect: string;
-  columnHover: string;
-
-  relationshipHover: string;
-
-  toolbarBackground: string;
-
-  contextMenuBackground: string;
-  contextMenuSelect: string;
-  contextMenuHover: string;
-  contextMenuBorder: string;
-
-  minimapBorder: string;
-  minimapShadow: string;
-  minimapViewportBorder: string;
-  minimapViewportBorderHover: string;
-
-  toastBackground: string;
-  toastBorder: string;
-
-  dargSelectBackground: string;
-  dargSelectBorder: string;
-
-  scrollbarTrack: string;
-  scrollbarThumb: string;
-  scrollbarThumbHover: string;
-
-  foreground: string;
-  active: string;
-  placeholder: string;
-
-  focus: string;
-  inputActive: string;
-
-  keyPK: string;
-  keyFK: string;
-  keyPFK: string;
-};
-
-
-// example
-editor.setTheme({...});
-```
-
-#### CSS Variables
-
-```css
-:root {
-  --erd-editor-gray-color-1: #111113;
-  --erd-editor-gray-color-2: #18191b;
-  --erd-editor-gray-color-3: #212225;
-  --erd-editor-gray-color-4: #272a2d;
-  --erd-editor-gray-color-5: #2e3135;
-  --erd-editor-gray-color-6: #363a3f;
-  --erd-editor-gray-color-7: #43484e;
-  --erd-editor-gray-color-8: #5a6169;
-  --erd-editor-gray-color-9: #696e77;
-  --erd-editor-gray-color-10: #777b84;
-  --erd-editor-gray-color-11: #b0b4ba;
-  --erd-editor-gray-color-12: #edeef0;
-  --erd-editor-accent-color-1: #11131f;
-  --erd-editor-accent-color-2: #141726;
-  --erd-editor-accent-color-3: #182449;
-  --erd-editor-accent-color-4: #1d2e62;
-  --erd-editor-accent-color-5: #253974;
-  --erd-editor-accent-color-6: #304384;
-  --erd-editor-accent-color-7: #3a4f97;
-  --erd-editor-accent-color-8: #435db1;
-  --erd-editor-accent-color-9: #3e63dd;
-  --erd-editor-accent-color-10: #5472e4;
-  --erd-editor-accent-color-11: #9eb1ff;
-  --erd-editor-accent-color-12: #d6e1ff;
-  --erd-editor-canvas-background: #212225;
-  --erd-editor-canvas-boundary-background: #111113;
-  --erd-editor-table-background: #18191b;
-  --erd-editor-table-select: #435db1;
-  --erd-editor-table-border: #363a3f;
-  --erd-editor-memo-background: #18191b;
-  --erd-editor-memo-select: #435db1;
-  --erd-editor-memo-border: #363a3f;
-  --erd-editor-column-select: #2e3135;
-  --erd-editor-column-hover: #272a2d;
-  --erd-editor-relationship-hover: #435db1;
-  --erd-editor-toolbar-background: #111113;
-  --erd-editor-context-menu-background: #18191b;
-  --erd-editor-context-menu-select: #272a2d;
-  --erd-editor-context-menu-hover: #3a4f97;
-  --erd-editor-context-menu-border: #363a3f;
-  --erd-editor-minimap-border: black;
-  --erd-editor-minimap-shadow: black;
-  --erd-editor-minimap-viewport-border: #3a4f97;
-  --erd-editor-minimap-viewport-border-hover: #435db1;
-  --erd-editor-toast-background: #18191b;
-  --erd-editor-toast-border: #363a3f;
-  --erd-editor-darg-select-background: #253974;
-  --erd-editor-darg-select-border: #435db1;
-  --erd-editor-scrollbar-track: #ddeaf814;
-  --erd-editor-scrollbar-thumb: #696e77;
-  --erd-editor-scrollbar-thumb-hover: #777b84;
-  --erd-editor-foreground: #b0b4ba;
-  --erd-editor-active: #edeef0;
-  --erd-editor-placeholder: #e5edfd7b;
-  --erd-editor-focus: #435db1;
-  --erd-editor-input-active: #5472e4;
-  --erd-editor-key-pk: #ffc53d;
-  --erd-editor-key-fk: #e54666;
-  --erd-editor-key-pfk: #00a2c7;
-}
-```
-
-## setSchemaSQL
-
-Loads a schema SQL file.
-
-```js
-editor.setSchemaSQL('Schema SQL...');
-```
-
-## getSchemaSQL
-
-Extracts the current editor state into a schema SQL.
-If `databaseVendor` is not specified, it operates based on the currently set vendor.
-
-```ts
-type DatabaseVendor =
-  | 'MariaDB'
-  | 'MSSQL'
-  | 'MySQL'
-  | 'Oracle'
-  | 'PostgreSQL'
-  | 'SQLite';
-
-const schemaSQL = editor.getSchemaSQL();
-```
-
 # Document
 
 - [Web App](https://erd-editor.io)

package/dist/components/appContext.d.ts

@@ -20,3 +20,4 @@ export type InjectAppContext = InjectEngineContext;
 export declare function createAppContext(ctx: InjectAppContext, getReadonly?: () => boolean): AppContext;
 export declare const appContext: import("@dineug/r-html").Context<AppContext>;
 export declare const useAppContext: (ctx: Ctx, fallback?: AppContext) => import("@dineug/r-html").Ref<AppContext>;
+export declare function appDestroy(app: AppContext): void;

package/dist/components/erd/automatic-table-placement/AutomaticTablePlacement.d.ts

@@ -2,7 +2,6 @@ import { FC, Ref } from '@dineug/r-html';
 import { AppContext } from "../../appContext";
 export type AutomaticTablePlacementProps = {
     app: Ref<AppContext>;
-    root: Ref<HTMLDivElement>;
     onChange: (tables: TablePoint[]) => void;
 };
 export type TablePoint = {

package/dist/components/erd/diff-viewer/DiffViewer.d.ts

@@ -0,0 +1,9 @@
+import { FC, Ref } from '@dineug/r-html';
+import { AppContext } from "../../appContext";
+export type DiffViewerProps = {
+    app: Ref<AppContext>;
+    initialValue: string;
+    onClose: () => void;
+};
+declare const DiffViewer: FC<DiffViewerProps>;
+export default DiffViewer;

package/dist/components/erd/diff-viewer/DiffViewer.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const root: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const container: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const viewport: import("@dineug/r-html").CSSTemplateLiterals;

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

@@ -0,0 +1,19 @@
+import { RootState } from "../../../engine/state";
+import { Column, Table } from "../../../internal-types";
+/**
+ * Map<uuid, [tag, Map<path, diff>]>
+ */
+export type DiffMap = Map<string, DiffTuple>;
+type DiffTuple = [string, Map<string, number>];
+type NameToTableMap = Map<string, {
+    table: Table;
+    nameToColumnMap: Map<string, Column>;
+}>;
+export declare const Diff: {
+    readonly insert: 1;
+    readonly delete: 2;
+};
+export declare function diffState(prevState: RootState, state: RootState): [DiffMap, DiffMap];
+export declare function getNameToTableMap({ doc: { tableIds }, collections, }: RootState): NameToTableMap;
+export declare function getDiffStyle(diff: number, diffMap: DiffMap): HTMLStyleElement;
+export {};

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

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from "../../../appContext";
+import { DiffMap } from "../diff";
+export type ErdViewerProps = {
+    app: AppContext;
+    diff: number;
+    diffMap: DiffMap;
+};
+declare const ErdViewer: FC<ErdViewerProps>;
+export default ErdViewer;

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

@@ -0,0 +1 @@
+export declare const root: import("@dineug/r-html").CSSTemplateLiterals;

package/dist/components/erd/diff-viewer/tree-viewer/TreeViewer.d.ts

@@ -0,0 +1,11 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from "../../../appContext";
+import { DiffMap } from "../diff";
+export type TreeViewerProps = {
+    prevApp: AppContext;
+    prevDiffMap: DiffMap;
+    app: AppContext;
+    diffMap: DiffMap;
+};
+declare const TreeViewer: FC<TreeViewerProps>;
+export default TreeViewer;

package/dist/components/erd/diff-viewer/tree-viewer/TreeViewer.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const root: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const icon: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const table: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const column: import("@dineug/r-html").CSSTemplateLiterals;
+export declare const ellipsis: import("@dineug/r-html").CSSTemplateLiterals;

package/dist/components/erd-editor/ErdEditor.d.ts

@@ -28,4 +28,5 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     getSharedStore: (config?: SharedStoreConfig & {
         mouseTracker?: boolean;
     }) => SharedStore;
+    setDiffValue: (value: string) => void;
 }

package/dist/components/erd-editor/useErdEditorAttachElement.d.ts

@@ -10,7 +10,7 @@ type Props = {
     app: AppContext;
     root: Ref<HTMLDivElement>;
 };
-export declare function useErdEditorAttachElement({ props, ctx, app: { store, keyBindingMap, emitter, shortcut$, keydown$ }, root, }: Props): {
+export declare function useErdEditorAttachElement({ props, ctx, app, root }: Props): {
     theme: Theme;
     themeState: {
         options: ThemeOptions;

package/dist/constants/layout.d.ts

@@ -30,3 +30,4 @@ export declare const MEMO_MIN_HEIGHT = 100;
 export declare const MINIMAP_SIZE = 150;
 export declare const MINIMAP_MARGIN = 20;
 export declare const TOOLBAR_HEIGHT = 30;
+export declare const DIFF_TREE_WIDTH = 200;

package/dist/constants/open.d.ts

@@ -4,5 +4,6 @@ export declare const Open: {
     readonly tableProperties: "tableProperties";
     readonly search: "search";
     readonly themeBuilder: "themeBuilder";
+    readonly diffViewer: "diffViewer";
 };
 export type Open = ValuesType<typeof Open>;

package/dist/engine.js

@@ -1,15 +1,15 @@
-import { D as A, E as w, u as x, O as E, F as l, J as I, p as G, bs as d, I as p, Y as O, c_ as T, br as $, aA as j, d4 as k, d5 as F, U as J, d6 as R, cS as V } from "./schemaGCService-Cyip5lJB.js";
+import { D as A, E as w, u as x, O as E, F as d, J as I, p as G, bs as l, I as p, Y as O, d0 as T, br as $, aB as j, d5 as k, d6 as F, U as J, d7 as R, cU as U } from "./schemaGCService-8ppNbFYF.js";
 /*!
  * @dineug/erd-editor
- * @version 3.1.8 | Sun Jan 28 2024
+ * @version 3.2.0 | Fri Feb 09 2024
  * @author SeungHwan-Lee <dineug2@gmail.com>
  * @license MIT
  */
 const b = {
   change: "change"
 };
-function D(u) {
-  const o = /* @__PURE__ */ new Set(), t = A(u, !1), S = w(t), c = new x(), m = new E((e) => t.subscribe((a) => e.next(a))).pipe(l(p), I(200)), n = /* @__PURE__ */ new Set(), f = new V(), g = (e) => (n.has(e) || n.add(e), () => {
+function z(u) {
+  const o = /* @__PURE__ */ new Set(), t = A(u, !1), m = w(t), c = new x(), S = new E((e) => t.subscribe((a) => e.next(a))).pipe(d(p), I(200)), n = /* @__PURE__ */ new Set(), f = new U(), g = (e) => (n.has(e) || n.add(e), () => {
     n.delete(e);
   }), i = (e, a) => {
     n.forEach((s) => {
@@ -18,7 +18,7 @@ function D(u) {
     });
   }, y = (e) => {
     const a = T(e);
-    t.dispatchSync($(j(a) ? "{}" : a)), f.run(d(t.state)).then((s) => {
+    t.dispatchSync($(j(a) ? "{}" : a)), f.run(l(t.state)).then((s) => {
       (s.tableIds.length || s.tableColumnIds.length || s.relationshipIds.length || s.indexIds.length || s.indexColumnIds.length || s.memoIds.length) && (k(t.state, s), t.dispatchSync(F()), i(b.change, void 0));
     });
   }, r = (e) => {
@@ -26,11 +26,11 @@ function D(u) {
   }, v = (e) => {
     J(() => r(e));
   }, C = () => {
-    Array.from(o).forEach((e) => e.unsubscribe()), o.clear(), n.clear(), t.destroy(), S.destroy();
+    Array.from(o).forEach((e) => e.unsubscribe()), o.clear(), n.clear(), t.destroy(), m.destroy();
   };
-  return o.add(m.subscribe(() => i(b.change, void 0))).add(c.pipe(l(p), G((e) => e.map((a) => R(a, "tags")))).subscribe(t.dispatchSync)), Object.freeze({
+  return o.add(S.subscribe(() => i(b.change, void 0))).add(c.pipe(d(p), G((e) => e.map((a) => R(a, "tags")))).subscribe(t.dispatchSync)), Object.freeze({
     get value() {
-      return d(t.state);
+      return l(t.state);
     },
     on: g,
     setInitialValue: y,
@@ -40,5 +40,5 @@ function D(u) {
   });
 }
 export {
-  D as createReplicationStore
+  z as createReplicationStore
 };