feat: pathFinding

packages/erd-editor-schema/package.json

@@ -29,14 +29,13 @@
     "@dineug/shared": "workspace:*",
     "@rollup/plugin-typescript": "^11.1.2",
     "@types/lodash-es": "^4.17.8",
-    "@types/uuid": "^9.0.2",
     "lodash-es": "^4.17.21",
     "rollup-plugin-visualizer": "^5.9.2",
     "ts-patch": "^3.0.2",
     "tslib": "^2.6.1",
     "typescript-transform-paths": "^3.4.6",
     "typescript": "5.1.6",
-    "uuid": "^9.0.0",
+    "nanoid": "^5.0.3",
     "vite-tsconfig-paths": "^4.2.0",
     "vite": "^4.4.9"
   }

packages/erd-editor-schema/src/convert/v2ToV3.ts

@@ -1,5 +1,5 @@
 import { difference } from 'lodash-es';
-import { v4 as uuid } from 'uuid';
+import { nanoid } from 'nanoid';
 
 import { propOr } from '@/helper';
 import { type ERDEditorSchemaV2 } from '@/v2';
@@ -167,7 +167,7 @@ function assignTable(
     newIndex.unique = index.unique;
 
     for (const indexColumn of index.columns) {
-      const id = uuid();
+      const id = nanoid();
       const newIndexColumn = createIndexColumn();
 
       newIndex.indexColumnIds.push(id);

packages/erd-editor-schema/src/v2/schema/tableEntity.ts

@@ -81,4 +81,4 @@ export const OrderType = {
   DESC: 'DESC',
 } as const;
 export type OrderType = ValuesType<typeof OrderType>;
-export const OrderTypeList: ReadonlyArray<string> = Object.assign(OrderType);
+export const OrderTypeList: ReadonlyArray<string> = Object.values(OrderType);

packages/erd-editor/package.json

@@ -65,7 +65,6 @@
     "@types/lodash-es": "^4.17.8",
     "@types/luxon": "^3.3.1",
     "@types/ua-parser-js": "^0.7.37",
-    "@types/uuid": "^9.0.2",
     "color": "^4.2.3",
     "deepmerge": "^4.3.1",
     "html-to-image": "^1.11.11",
@@ -80,7 +79,7 @@
     "typescript-transform-paths": "^3.4.6",
     "typescript": "5.1.6",
     "ua-parser-js": "^1.0.36",
-    "uuid": "^9.0.0",
+    "nanoid": "^5.0.3",
     "vite-tsconfig-paths": "^4.2.0",
     "vite": "^4.4.9"
   }

packages/erd-editor/src/components/erd/canvas/canvas-svg/relationship/Relationship.ts

@@ -22,11 +22,9 @@ const Relationship: FC<RelationshipProps> = (props, ctx) => {
       ? relationshipShapeTpl(relationshipPath)
       : null;
 
-    const d = path.path.d();
-
     return svg`
       <path
-        d=${d}
+        d=${path.path.d()}
         stroke-dasharray=${relationship.identification ? 0 : 10}
         stroke-width=${strokeWidth}
         fill="transparent"

packages/erd-editor/src/components/primitives/context-menu/context-menu-item/ContextMenuItem.ts

@@ -7,11 +7,11 @@ import {
   onMounted,
   ref,
 } from '@dineug/r-html';
+import { nanoid } from 'nanoid';
 
 import ContextMenuContent from '@/components/primitives/context-menu/context-menu-content/ContextMenuContent';
 import { useContextMenuRootContext } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext';
 import { useUnmounted } from '@/hooks/useUnmounted';
-import { uuid } from '@/utils';
 
 import * as styles from './ContextMenuItem.styles';
 
@@ -23,7 +23,7 @@ export type ContextMenuItemProps = {
 
 const ContextMenuItem: FC<ContextMenuItemProps> = (props, ctx) => {
   const root = useContextMenuRootContext(ctx);
-  const id = uuid();
+  const id = nanoid();
   const $div = createRef<HTMLDivElement>();
   const state = observable({
     selected: false,

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

@@ -1,4 +1,5 @@
 import { isEmpty } from 'lodash-es';
+import { nanoid } from 'nanoid';
 
 import { ColumnOption } from '@/constants/schema';
 import { GeneratorAction } from '@/engine/generator.actions';
@@ -12,7 +13,6 @@ import {
 } from '@/engine/modules/tableColumn/atom.actions';
 import { addColumnAction$ } from '@/engine/modules/tableColumn/generator.actions';
 import { Point } from '@/internal-types';
-import { uuid } from '@/utils';
 import { bHas } from '@/utils/bit';
 import { calcMemoHeight, calcMemoWidth } from '@/utils/calcMemo';
 import { calcTableHeight, calcTableWidths } from '@/utils/calcTable';
@@ -208,7 +208,7 @@ export const drawStartAddRelationshipAction$ = (
     if (
       !columns.some(column => bHas(column.options, ColumnOption.primaryKey))
     ) {
-      const columnId = uuid();
+      const columnId = nanoid();
       yield addColumnAction({
         tableId,
         id: columnId,

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

@@ -1,8 +1,10 @@
+import { nanoid } from 'nanoid';
+
 import { GeneratorAction } from '@/engine/generator.actions';
 import { selectAction } from '@/engine/modules/editor/atom.actions';
 import { unselectAllAction$ } from '@/engine/modules/editor/generator.actions';
 import { SelectType } from '@/engine/modules/editor/state';
-import { nextPoint, nextZIndex, uuid } from '@/utils';
+import { nextPoint, nextZIndex } from '@/utils';
 import { query } from '@/utils/collection/query';
 
 import {
@@ -20,7 +22,7 @@ export const addMemoAction$ = (): GeneratorAction =>
       .collection('memoEntities')
       .selectByIds(memoIds);
     const point = nextPoint(settings, tables, memos);
-    const id = uuid();
+    const id = nanoid();
 
     yield unselectAllAction$();
     yield selectAction({ [id]: SelectType.memo });

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

@@ -1,4 +1,4 @@
-import { takeEvery } from '@dineug/go';
+import { throttle } from '@dineug/go';
 import { arrayHas } from '@dineug/shared';
 
 import { ColumnOption, StartRelationshipType } from '@/constants/schema';
@@ -25,77 +25,92 @@ import { query } from '@/utils/collection/query';
 import { relationshipSort } from '@/utils/draw-relationship/sort';
 
 const identificationHook: CO = function* (channel, { doc, collections }) {
-  yield takeEvery(channel, function* () {
-    const collection = query(collections).collection('relationshipEntities');
-    const relationships = collection.selectByIds(doc.relationshipIds);
+  yield throttle(
+    channel,
+    function* () {
+      const collection = query(collections).collection('relationshipEntities');
+      const relationships = collection.selectByIds(doc.relationshipIds);
 
-    for (const { id, end, identification } of relationships) {
-      const table = query(collections)
-        .collection('tableEntities')
-        .selectById(end.tableId);
-      if (!table) continue;
+      for (const { id, end, identification } of relationships) {
+        const table = query(collections)
+          .collection('tableEntities')
+          .selectById(end.tableId);
+        if (!table) continue;
 
-      const has = arrayHas(table.columnIds);
-      const columns = query(collections)
-        .collection('tableColumnEntities')
-        .selectByIds(end.columnIds)
-        .filter(column => has(column.id));
-      if (!columns.length) continue;
+        const has = arrayHas(table.columnIds);
+        const columns = query(collections)
+          .collection('tableColumnEntities')
+          .selectByIds(end.columnIds)
+          .filter(column => has(column.id));
+        if (!columns.length) continue;
 
-      const value = columns.every(
-        column => column.options & ColumnOption.primaryKey
-      );
+        const value = columns.every(
+          column => column.options & ColumnOption.primaryKey
+        );
 
-      if (value === identification) {
-        continue;
-      }
+        if (value === identification) {
+          continue;
+        }
 
-      collection.updateOne(id, relationship => {
-        relationship.identification = value;
-      });
-    }
-  });
+        collection.updateOne(id, relationship => {
+          relationship.identification = value;
+        });
+      }
+    },
+    10,
+    { leading: false, trailing: true }
+  );
 };
 
 const startRelationshipHook: CO = function* (channel, { doc, collections }) {
-  yield takeEvery(channel, function* () {
-    const collection = query(collections).collection('relationshipEntities');
-    const relationships = collection.selectByIds(doc.relationshipIds);
+  yield throttle(
+    channel,
+    function* () {
+      const collection = query(collections).collection('relationshipEntities');
+      const relationships = collection.selectByIds(doc.relationshipIds);
 
-    for (const { id, end, startRelationshipType } of relationships) {
-      const table = query(collections)
-        .collection('tableEntities')
-        .selectById(end.tableId);
-      if (!table) continue;
+      for (const { id, end, startRelationshipType } of relationships) {
+        const table = query(collections)
+          .collection('tableEntities')
+          .selectById(end.tableId);
+        if (!table) continue;
 
-      const has = arrayHas(table.columnIds);
-      const columns = query(collections)
-        .collection('tableColumnEntities')
-        .selectByIds(end.columnIds)
-        .filter(column => has(column.id));
-      if (!columns.length) continue;
+        const has = arrayHas(table.columnIds);
+        const columns = query(collections)
+          .collection('tableColumnEntities')
+          .selectByIds(end.columnIds)
+          .filter(column => has(column.id));
+        if (!columns.length) continue;
 
-      const value = columns.every(
-        column => column.options & ColumnOption.notNull
-      )
-        ? StartRelationshipType.dash
-        : StartRelationshipType.ring;
+        const value = columns.every(
+          column => column.options & ColumnOption.notNull
+        )
+          ? StartRelationshipType.dash
+          : StartRelationshipType.ring;
 
-      if (value === startRelationshipType) {
-        continue;
-      }
+        if (value === startRelationshipType) {
+          continue;
+        }
 
-      collection.updateOne(id, relationship => {
-        relationship.startRelationshipType = value;
-      });
-    }
-  });
+        collection.updateOne(id, relationship => {
+          relationship.startRelationshipType = value;
+        });
+      }
+    },
+    10,
+    { leading: false, trailing: true }
+  );
 };
 
 const relationshipSortHook: CO = function* (channel, state) {
-  yield takeEvery(channel, function* () {
-    relationshipSort(state);
-  });
+  yield throttle(
+    channel,
+    function* () {
+      relationshipSort(state);
+    },
+    5,
+    { leading: false, trailing: true }
+  );
 };
 
 export const hooks: Hook[] = [

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

@@ -1,3 +1,5 @@
+import { nanoid } from 'nanoid';
+
 import { ColumnOption } from '@/constants/schema';
 import { GeneratorAction } from '@/engine/generator.actions';
 import {
@@ -18,7 +20,7 @@ import {
   changeColumnNameAction,
   changeColumnNotNullAction,
 } from '@/engine/modules/tableColumn/atom.actions';
-import { nextPoint, nextZIndex, uuid } from '@/utils';
+import { nextPoint, nextZIndex } from '@/utils';
 import { bHas } from '@/utils/bit';
 import { query } from '@/utils/collection/query';
 
@@ -37,7 +39,7 @@ export const addTableAction$ = (): GeneratorAction =>
       .collection('memoEntities')
       .selectByIds(memoIds);
     const point = nextPoint(settings, tables, memos);
-    const id = uuid();
+    const id = nanoid();
 
     yield unselectAllAction();
     yield selectAction({ [id]: SelectType.table });
@@ -107,7 +109,7 @@ export const selectTableAction$ = (
         .filter(({ options }) => bHas(options, ColumnOption.primaryKey));
       if (!startColumns.length) return;
 
-      const endColumnIds = startColumns.map(() => uuid());
+      const endColumnIds = startColumns.map(() => nanoid());
 
       for (let i = 0; i < startColumns.length; i++) {
         const startColumn = startColumns[i];
@@ -147,7 +149,7 @@ export const selectTableAction$ = (
       }
 
       yield addRelationshipAction({
-        id: uuid(),
+        id: nanoid(),
         relationshipType: drawRelationship.relationshipType,
         start: {
           tableId: startTable.id,

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

@@ -1,5 +1,6 @@
 import { arrayHas } from '@dineug/shared';
 import { last } from 'lodash-es';
+import { nanoid } from 'nanoid';
 
 import { ColumnOption } from '@/constants/schema';
 import { GeneratorAction } from '@/engine/generator.actions';
@@ -9,7 +10,6 @@ import {
 } from '@/engine/modules/editor/atom.actions';
 import { FocusType, SelectType } from '@/engine/modules/editor/state';
 import { getRemoveFirstColumnId } from '@/engine/modules/editor/utils/focus';
-import { uuid } from '@/utils';
 import { bHas } from '@/utils/bit';
 import { query } from '@/utils/collection/query';
 
@@ -42,7 +42,7 @@ export const isChangeColumnTypes = arrayHas<FocusType>([
 export const addColumnAction$ = (tableId?: string): GeneratorAction =>
   function* ({ editor: { selectedMap } }) {
     if (tableId) {
-      const id = uuid();
+      const id = nanoid();
       yield addColumnAction({
         id,
         tableId,
@@ -59,7 +59,7 @@ export const addColumnAction$ = (tableId?: string): GeneratorAction =>
 
     const addColumnActions = Object.entries(selectedMap)
       .filter(([, type]) => type === SelectType.table)
-      .map(([tableId]) => ({ tableId, id: uuid() }));
+      .map(([tableId]) => ({ tableId, id: nanoid() }));
 
     for (const payload of addColumnActions) {
       yield addColumnAction(payload);

packages/erd-editor/src/engine/operators/actionsFilter.ts → packages/erd-editor/src/engine/rx-operators/actionsFilter.ts

@@ -2,7 +2,7 @@ import { AnyAction } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 import { Observable } from 'rxjs';
 
-import { notEmptyActions } from '@/engine/operators/notEmptyActions';
+import { notEmptyActions } from '@/engine/rx-operators/notEmptyActions';
 
 export const actionsFilter = (
   actionTypes: Array<string> | ReadonlyArray<string>

packages/erd-editor/src/engine/operators/groupByStreamActions.ts → packages/erd-editor/src/engine/rx-operators/groupByStreamActions.ts

@@ -2,7 +2,7 @@ import { AnyAction } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 import { buffer, debounceTime, groupBy, map, mergeMap, Observable } from 'rxjs';
 
-import { notEmptyActions } from '@/engine/operators/notEmptyActions';
+import { notEmptyActions } from '@/engine/rx-operators/notEmptyActions';
 
 export const groupByStreamActions = (
   streamActionTypes: Array<string> | ReadonlyArray<string>

packages/erd-editor/src/engine/rx-store.ts

@@ -19,7 +19,7 @@ import {
   actionsFilter,
   groupByStreamActions,
   notEmptyActions,
-} from '@/engine/operators';
+} from '@/engine/rx-operators';
 import { createStore, Store } from '@/engine/store';
 import { createHooks } from '@/engine/store.hooks';
 

packages/erd-editor/src/utils/collection/query.ts

@@ -17,6 +17,7 @@ class CollectionQuery<K extends keyof Collections> {
     return this.collection[id] as GetEntity<K> | undefined;
   }
   selectByIds(ids: string[]): Array<GetEntity<K>> {
+    ids.length; // observable dependency
     return ids.map(id => this.selectById(id)).filter(Boolean) as Array<
       GetEntity<K>
     >;