@dineug/erd-editor 3.1.8 → 3.2.1

package/README.md

@@ -4,7 +4,7 @@
 
 ![erd-editor](https://github.com/dineug/erd-editor/blob/main/img/erd-editor-vscode.png?raw=true)
 
-# Install
+## Install
 
 ```sh
 npm install @dineug/erd-editor
@@ -43,434 +43,7 @@ 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
+## [Document](https://docs.erd-editor.io)
 
 - [Web App](https://erd-editor.io)
 - [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)

package/dist/components/appContext.d.ts

@@ -1,10 +1,10 @@
 import { Subject } from 'rxjs';
-import { Actions } from "../engine/actions";
-import { EngineContext, InjectEngineContext } from "../engine/context";
-import { RxStore } from "../engine/rx-store";
-import { Ctx } from "../internal-types";
-import { Emitter } from "../utils/emitter";
-import { KeyBindingMap, KeyBindingName } from "../utils/keyboard-shortcut";
+import { Actions } from '../engine/actions';
+import { EngineContext, InjectEngineContext } from '../engine/context';
+import { RxStore, RxStoreOptions } from '../engine/rx-store';
+import { Ctx } from '../internal-types';
+import { Emitter } from '../utils/emitter';
+import { KeyBindingMap, KeyBindingName } from '../utils/keyboard-shortcut';
 export type AppContext = EngineContext & {
     actions: Actions;
     store: RxStore;
@@ -17,6 +17,7 @@ export type AppContext = EngineContext & {
     emitter: Emitter;
 };
 export type InjectAppContext = InjectEngineContext;
-export declare function createAppContext(ctx: InjectAppContext, getReadonly?: () => boolean): AppContext;
+export declare function createAppContext(ctx: InjectAppContext, options?: RxStoreOptions): 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/customElementRegistry.d.ts

@@ -1 +0,0 @@
-import "./erd-editor/ErdEditor";

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

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

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

@@ -1,5 +1,5 @@
-import { RootState } from "../../../engine/state";
-import { Table } from "../../../internal-types";
+import { RootState } from '../../../engine/state';
+import { Table } from '../../../internal-types';
 type Node = {
     id: string;
     r: number;

package/dist/components/erd/canvas/canvas-svg/relationship/Relationship.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { Relationship as RelationshipType } from "../../../../../internal-types";
+import { Relationship as RelationshipType } from '../../../../../internal-types';
 export type RelationshipProps = {
     relationship: RelationshipType;
     strokeWidth: number;

package/dist/components/erd/canvas/canvas-svg/relationship/Relationship.template.d.ts

@@ -1,3 +1,3 @@
 import { DOMTemplateLiterals } from '@dineug/r-html';
-import { RelationshipPath } from "../../../../../utils/draw-relationship";
+import { RelationshipPath } from '../../../../../utils/draw-relationship';
 export declare function relationshipShape(relationshipType: number, relationshipPath: RelationshipPath): DOMTemplateLiterals | null;

package/dist/components/erd/canvas/draw-relationship/DrawRelationship.d.ts

@@ -1,5 +1,5 @@
 import { FC, Ref } from '@dineug/r-html';
-import { DrawRelationship as DrawRelationshipType } from "../../../../engine/modules/editor/state";
+import { DrawRelationship as DrawRelationshipType } from '../../../../engine/modules/editor/state';
 export type DrawRelationshipProps = {
     root: Ref<HTMLDivElement>;
     draw: DrawRelationshipType;

package/dist/components/erd/canvas/high-level-table/HighLevelTable.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { Table } from "../../../../internal-types";
+import { Table } from '../../../../internal-types';
 export type HighLevelTableProps = {
     table: Table;
 };

package/dist/components/erd/canvas/memo/Memo.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { Memo } from "../../../../internal-types";
+import { Memo } from '../../../../internal-types';
 export type MemoProps = {
     memo: Memo;
 };

package/dist/components/erd/canvas/memo/memo-sash/MemoSash.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { Memo } from "../../../../../internal-types";
+import { Memo } from '../../../../../internal-types';
 export type MemoSashProps = {
     memo: Memo;
     top: number;

package/dist/components/erd/canvas/shared-mouse-tracker/shared-mouse-cursor/SharedMouseCursor.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { SharedMouseTracker } from "../../../../../engine/modules/editor/state";
+import { SharedMouseTracker } from '../../../../../engine/modules/editor/state';
 export type SharedMouseCursorProps = {
     tracker: SharedMouseTracker;
 };

package/dist/components/erd/canvas/table/Table.d.ts

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { Table } from "../../../../internal-types";
+import { Table } from '../../../../internal-types';
 export type TableProps = {
     table: Table;
 };

package/dist/components/erd/canvas/table/column/Column.d.ts

@@ -1,6 +1,6 @@
 import { FC, Ref } from '@dineug/r-html';
-import { AppContext } from "../../../../appContext";
-import { Column } from "../../../../../internal-types";
+import { AppContext } from '../../../../appContext';
+import { Column } from '../../../../../internal-types';
 export type ColumnProps = {
     app: Ref<AppContext>;
     column: Column;

package/dist/components/erd/canvas/table/column/column-data-type/ColumnDataType.d.ts

@@ -1,5 +1,5 @@
 import { FC, Ref } from '@dineug/r-html';
-import { AppContext } from "../../../../../appContext";
+import { AppContext } from '../../../../../appContext';
 export type ColumnDataTypeProps = {
     app: Ref<AppContext>;
     tableId: string;

package/dist/components/erd/canvas/table/useFocusTable.d.ts

@@ -1,5 +1,5 @@
-import { FocusType } from "../../../../engine/modules/editor/state";
-import { Ctx } from "../../../../internal-types";
+import { FocusType } from '../../../../engine/modules/editor/state';
+import { Ctx } from '../../../../internal-types';
 export declare function useFocusTable(ctx: Ctx, tableId: string): {
     hasFocus: (focusType: FocusType, columnId?: string) => boolean;
     hasEdit: (focusType: FocusType, columnId?: string) => boolean;

package/dist/components/erd/canvas/table/useMoveTable.d.ts

@@ -1,4 +1,4 @@
-import { Ctx, Table } from "../../../../internal-types";
+import { Ctx, Table } from '../../../../internal-types';
 export declare function useMoveTable(ctx: Ctx, props: {
     table: Table;
 }): {

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/erd-context-menu/ErdContextMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC, Ref } from '@dineug/r-html';
-import { ValuesType } from "../../../internal-types";
+import { ValuesType } from '../../../internal-types';
 export declare const ErdContextMenuType: {
     readonly ERD: "ERD";
     readonly table: "table";

package/dist/components/erd/erd-context-menu/menus/databaseMenus.d.ts

@@ -1,4 +1,4 @@
-import { AppContext } from "../../../appContext";
+import { AppContext } from '../../../appContext';
 type Menu = {
     name: string;
     value: number;