feat: schema-sql-parser

.github/workflows/ci.yml

@@ -17,4 +17,4 @@ jobs:
           node-version: 18
           cache: 'pnpm'
       - run: pnpm install
-      - run: pnpm build
+      - run: pnpm test

README.md

@@ -9,5 +9,5 @@
 ## Document
 
 - [Playground](https://vuerd.github.io)
-- [Import SQL DDL support syntax](https://github.com/dineug/erd-editor/blob/master/packages/sql-ddl-parser/src/SQL_DDL_Test_Case.md)
+- [Import Schema SQL Support Syntax](https://github.com/dineug/erd-editor/tree/main/packages/schema-sql-parser/src/schema_sql_test_case.md)
 - [vscode extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "scripts": {
     "build": "turbo build",
+    "test": "turbo test",
     "prepare": "husky install",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint \"**/*.{js,ts}\" --fix",

packages/erd-editor/src/components/erd-editor/useErdEditorAttachElement.ts

@@ -183,10 +183,7 @@ export function useErdEditorAttachElement({
     const safeValue = toSafeString(value);
     if (isEmpty(safeValue)) return;
 
-    // TODO: DDLParser
-    // const statements = schemaSQLParser(value);
-    // const json = createJson(statements, helper, store.canvasState.database);
-    // store.dispatch(loadJson$(json), sortTable());
+    store.dispatchSync(loadJsonAction$(safeValue));
   };
 
   ctx.getSchemaSQL = databaseVendor => {

packages/erd-editor/src/components/primitives/edit-input/EditInput.styles.ts

@@ -38,4 +38,5 @@ export const userSelect = css`
 export const ellipsis = css`
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;

packages/erd-editor/src/engine/modules/editor/generator.actions.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash-es';
+import { cloneDeep, isEmpty, omit } from 'lodash-es';
 import { nanoid } from 'nanoid';
 
 import { ColumnOption } from '@/constants/schema';
@@ -11,6 +11,7 @@ import { removeMemoAction$ } from '@/engine/modules/memo/generator.actions';
 import {
   changeTableColorAction,
   moveTableAction,
+  sortTableAction,
 } from '@/engine/modules/table/atom.actions';
 import { removeTableAction$ } from '@/engine/modules/table/generator.actions';
 import {
@@ -23,6 +24,7 @@ import { bHas } from '@/utils/bit';
 import { calcMemoHeight, calcMemoWidth } from '@/utils/calcMemo';
 import { calcTableHeight, calcTableWidths } from '@/utils/calcTable';
 import { query } from '@/utils/collection/query';
+import { schemaSQLParserToSchemaJson } from '@/utils/schema-sql-parser';
 
 import {
   clearAction,
@@ -262,6 +264,26 @@ export const changeColorAllAction$ = (color: string): GeneratorAction =>
     );
   };
 
+export const loadSchemaSQLAction$ = (value: string): GeneratorAction =>
+  function* ({ settings }, ctx) {
+    yield loadJsonAction$(
+      schemaSQLParserToSchemaJson(value, ctx, schema => {
+        schema.settings = {
+          ...schema.settings,
+          ...omit(cloneDeep(settings), [
+            'width',
+            'height',
+            'scrollTop',
+            'scrollLeft',
+            'zoomLevel',
+          ]),
+        };
+        return schema;
+      })
+    );
+    yield sortTableAction();
+  };
+
 export const actions$ = {
   loadJsonAction$,
   initialLoadJsonAction$,
@@ -273,4 +295,5 @@ export const actions$ = {
   drawStartRelationshipAction$,
   drawStartAddRelationshipAction$,
   changeColorAllAction$,
+  loadSchemaSQLAction$,
 };

packages/erd-editor/src/engine/modules/relationship/hooks.ts

@@ -14,6 +14,7 @@ import {
   changeTableNameAction,
   moveTableAction,
   moveToTableAction,
+  sortTableAction,
 } from '@/engine/modules/table/atom.actions';
 import {
   addColumnAction,
@@ -137,6 +138,7 @@ export const hooks: Hook[] = [
       changeColumnCommentAction,
       changeColumnDataTypeAction,
       changeColumnDefaultAction,
+      sortTableAction,
     ],
     relationshipSortHook,
   ],

packages/erd-editor/src/engine/modules/table/actions.ts

@@ -13,6 +13,7 @@ export const ActionType = {
   changeTableComment: 'table.changeComment',
   changeTableColor: 'table.changeColor',
   changeZIndex: 'table.changeZIndex',
+  sortTable: 'table.sort',
 } as const;
 export type ActionType = ValuesType<typeof ActionType>;
 
@@ -49,6 +50,7 @@ export type ActionMap = {
     id: string;
     zIndex: number;
   };
+  [ActionType.sortTable]: void;
 };
 
 export type ReducerType<T extends keyof ActionMap> = Reducer<

packages/erd-editor/src/engine/modules/table/atom.actions.ts

@@ -2,6 +2,7 @@ import { createAction } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 import { round } from 'lodash-es';
 
+import { calcTableHeight, calcTableWidths } from '@/utils/calcTable';
 import { query } from '@/utils/collection/query';
 import { createTable } from '@/utils/collection/table.entity';
 import { textInRange } from '@/utils/validation';
@@ -154,6 +155,44 @@ const changeZIndex: ReducerType<typeof ActionType.changeZIndex> = (
   });
 };
 
+export const sortTableAction = createAction<
+  ActionMap[typeof ActionType.sortTable]
+>(ActionType.sortTable);
+
+const sortTable: ReducerType<typeof ActionType.sortTable> = state => {
+  const { doc, settings, collections } = state;
+  const canvasWidth = settings.width;
+  const tables = query(collections)
+    .collection('tableEntities')
+    .selectByIds(doc.tableIds);
+  const TABLE_MARGIN = 80;
+
+  tables.sort((a, b) => a.columnIds.length - b.columnIds.length);
+
+  let widthSum = 50;
+  let currentHeight = 50;
+  let maxHeight = 50;
+
+  tables.forEach(table => {
+    const width = calcTableWidths(table, state).width + TABLE_MARGIN;
+    const height = calcTableHeight(table) + TABLE_MARGIN;
+
+    if (widthSum + width > canvasWidth) {
+      currentHeight += maxHeight;
+      maxHeight = 0;
+      widthSum = 50;
+    }
+
+    if (maxHeight < height) {
+      maxHeight = height;
+    }
+
+    table.ui.y = currentHeight;
+    table.ui.x = widthSum;
+    widthSum += width;
+  });
+};
+
 export const tableReducers = {
   [ActionType.addTable]: addTable,
   [ActionType.moveTable]: moveTable,
@@ -163,6 +202,7 @@ export const tableReducers = {
   [ActionType.changeTableComment]: changeTableComment,
   [ActionType.changeTableColor]: changeTableColor,
   [ActionType.changeZIndex]: changeZIndex,
+  [ActionType.sortTable]: sortTable,
 };
 
 export const actions = {
@@ -174,4 +214,5 @@ export const actions = {
   changeTableCommentAction,
   changeTableColorAction,
   changeZIndexAction,
+  sortTableAction,
 };

packages/erd-editor/src/engine/modules/table/history.ts

@@ -75,12 +75,15 @@ const moveToTable: PushUndoHistory = (
   );
 };
 
+const sortTable: PushUndoHistory = () => {};
+
 export const tablePushUndoHistoryMap = {
   [ActionType.addTable]: addTable,
   [ActionType.removeTable]: removeTable,
   [ActionType.changeTableName]: changeTableName,
   [ActionType.changeTableComment]: changeTableComment,
   [ActionType.moveToTable]: moveToTable,
+  [ActionType.sortTable]: sortTable,
 };
 
 const moveTable: PushStreamHistory = (undoActions, redoActions, actions) => {

packages/erd-editor/src/utils/collection/index.entity.ts

@@ -1,12 +1,13 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import { DeepPartial, Index } from '@/internal-types';
 import { getDefaultEntityMeta } from '@/utils';
 
 export const createIndex = (value?: DeepPartial<Index>): Index =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       name: '',
       tableId: '',
       indexColumnIds: [],

packages/erd-editor/src/utils/collection/indexColumn.entity.ts

@@ -1,4 +1,5 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import { OrderType } from '@/constants/schema';
 import { DeepPartial, IndexColumn } from '@/internal-types';
@@ -9,7 +10,7 @@ export const createIndexColumn = (
 ): IndexColumn =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       indexId: '',
       columnId: '',
       orderType: OrderType.ASC,

packages/erd-editor/src/utils/collection/memo.entity.ts

@@ -1,4 +1,5 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import { MEMO_MIN_HEIGHT, MEMO_MIN_WIDTH } from '@/constants/layout';
 import { DeepPartial, Memo } from '@/internal-types';
@@ -7,7 +8,7 @@ import { getDefaultEntityMeta } from '@/utils';
 export const createMemo = (value?: DeepPartial<Memo>): Memo =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       value: '',
       ui: {
         x: 200,

packages/erd-editor/src/utils/collection/relationship.entity.ts

@@ -1,4 +1,5 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import {
   Direction,
@@ -13,7 +14,7 @@ export const createRelationship = (
 ): Relationship =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       identification: false,
       relationshipType: RelationshipType.ZeroN,
       startRelationshipType: StartRelationshipType.dash,

packages/erd-editor/src/utils/collection/table.entity.ts

@@ -1,4 +1,5 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import { COLUMN_MIN_WIDTH } from '@/constants/layout';
 import { DeepPartial, Table } from '@/internal-types';
@@ -7,7 +8,7 @@ import { getDefaultEntityMeta } from '@/utils';
 export const createTable = (value?: DeepPartial<Table>): Table =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       name: '',
       comment: '',
       columnIds: [],

packages/erd-editor/src/utils/collection/tableColumn.entity.ts

@@ -1,4 +1,5 @@
 import merge from 'deepmerge';
+import { nanoid } from 'nanoid';
 
 import { COLUMN_MIN_WIDTH } from '@/constants/layout';
 import { Column, DeepPartial } from '@/internal-types';
@@ -7,7 +8,7 @@ import { getDefaultEntityMeta } from '@/utils';
 export const createColumn = (value?: DeepPartial<Column>): Column =>
   merge(
     {
-      id: '',
+      id: nanoid(),
       tableId: '',
       name: '',
       comment: '',

packages/erd-editor/src/utils/file/importFile.ts

@@ -3,9 +3,11 @@ import { isString } from '@dineug/shared';
 
 import { AppContext } from '@/components/appContext';
 import Toast from '@/components/primitives/toast/Toast';
-import { loadJsonAction$ } from '@/engine/modules/editor/generator.actions';
-
-import { openToastAction } from '../emitter';
+import {
+  loadJsonAction$,
+  loadSchemaSQLAction$,
+} from '@/engine/modules/editor/generator.actions';
+import { openToastAction } from '@/utils/emitter';
 
 type ImportOptions = {
   type: 'json' | 'sql';
@@ -89,10 +91,7 @@ export function importSchemaSQL({ store, emitter }: AppContext) {
         return;
       }
 
-      // TODO: DDLParser
-      // const statements = schemaSQLParser(value);
-      // const json = createJson(statements, helper, store.canvasState.database);
-      // store.dispatch(loadJson$(json), sortTable());
+      store.dispatch(loadSchemaSQLAction$(value));
     };
   });
   input.click();