feat: Relations on column level #378

dineug · Oct 27, 2024 · 4c3a4f2 · 4c3a4f2
1 parent afdd8b0
commit 4c3a4f2
Show file tree

Hide file tree

Showing 13 changed files with 236 additions and 89 deletions.
diff --git a/packages/erd-editor/src/components/erd/Erd.ts b/packages/erd-editor/src/components/erd/Erd.ts
@@ -215,8 +215,8 @@ const Erd: FC<ErdProps> = (props, ctx) => {
 
     if (!canDrag) return;
 
-    event.preventDefault();
     if (isMouseEvent(event) && isMod(event)) {
+      event.preventDefault();
       const { x, y } = root.value.getBoundingClientRect();
       state.dragSelect = true;
       state.dragSelectX = event.clientX - x;

diff --git a/packages/erd-editor/src/components/erd/canvas/canvas-svg/CanvasSvg.styles.ts b/packages/erd-editor/src/components/erd/canvas/canvas-svg/CanvasSvg.styles.ts
@@ -14,7 +14,9 @@ export const root = css`
     stroke: var(--key-pfk);
   }
 
-  .relationship:hover {
+  .relationship:hover,
+  .relationship[data-hover],
+  .relationship.identification[data-hover] {
     stroke: var(--relationship-hover);
   }
 `;
diff --git a/packages/erd-editor/src/components/erd/canvas/canvas-svg/CanvasSvg.ts b/packages/erd-editor/src/components/erd/canvas/canvas-svg/CanvasSvg.ts
@@ -3,8 +3,6 @@ import { FC, repeat, svg } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
 import Relationship from '@/components/erd/canvas/canvas-svg/relationship/Relationship';
-import { hoverColumnMapAction } from '@/engine/modules/editor/atom.actions';
-import { Relationship as RelationshipType } from '@/internal-types';
 
 import * as styles from './CanvasSvg.styles';
 
@@ -16,23 +14,6 @@ export type CanvasSvgProps = {
 const CanvasSvg: FC<CanvasSvgProps> = (props, ctx) => {
   const app = useAppContext(ctx);
 
-  const handleMouseenter = (relationship: RelationshipType) => {
-    const { store } = app.value;
-    store.dispatch(
-      hoverColumnMapAction({
-        columnIds: [
-          ...relationship.start.columnIds,
-          ...relationship.end.columnIds,
-        ],
-      })
-    );
-  };
-
-  const handleMouseleave = () => {
-    const { store } = app.value;
-    store.dispatch(hoverColumnMapAction({ columnIds: [] }));
-  };
-
   return () => {
     const { store } = app.value;
     const {
@@ -58,21 +39,7 @@ const CanvasSvg: FC<CanvasSvgProps> = (props, ctx) => {
         ${repeat(
           relationships,
           relationship => relationship.id,
-          relationship => svg`
-            <g
-              class=${[
-                'relationship',
-                { identification: relationship.identification },
-              ]}
-              data-id=${relationship.id}
-              @mouseenter=${() => handleMouseenter(relationship)}
-              @mouseleave=${handleMouseleave}
-            >
-              <${Relationship}
-                relationship=${relationship}
-                strokeWidth=${props.strokeWidth ?? 3}
-              />
-            </g>
+          relationship => svg`<${Relationship} relationship=${relationship} strokeWidth=${props.strokeWidth ?? 3} />
           `
         )}
       </svg>

diff --git a/packages/erd-editor/src/components/erd/canvas/canvas-svg/relationship/Relationship.ts b/packages/erd-editor/src/components/erd/canvas/canvas-svg/relationship/Relationship.ts
@@ -1,6 +1,8 @@
 import { FC, svg } from '@dineug/r-html';
 
+import { useAppContext } from '@/components/appContext';
 import { StartRelationshipType } from '@/constants/schema';
+import { hoverColumnMapAction } from '@/engine/modules/editor/atom.actions';
 import { Relationship as RelationshipType } from '@/internal-types';
 import { getRelationshipPath } from '@/utils/draw-relationship/pathFinding';
 
@@ -12,7 +14,28 @@ export type RelationshipProps = {
 };
 
 const Relationship: FC<RelationshipProps> = (props, ctx) => {
+  const app = useAppContext(ctx);
+
+  const handleMouseenter = (relationship: RelationshipType) => {
+    const { store } = app.value;
+    store.dispatch(
+      hoverColumnMapAction({
+        columnIds: [
+          ...relationship.start.columnIds,
+          ...relationship.end.columnIds,
+        ],
+      })
+    );
+  };
+
+  const handleMouseleave = () => {
+    const { store } = app.value;
+    store.dispatch(hoverColumnMapAction({ columnIds: [] }));
+  };
+
   return () => {
+    const { store } = app.value;
+    const { editor } = store.state;
     const { relationship, strokeWidth } = props;
     const relationshipPath = getRelationshipPath(relationship);
     const { path, line } = relationshipPath;
@@ -21,58 +44,70 @@ const Relationship: FC<RelationshipProps> = (props, ctx) => {
       relationship.relationshipType,
       relationshipPath
     );
+    const hover = Boolean(editor.hoverRelationshipMap[relationship.id]);
 
     return svg`
-      ${lines.map(
-        ([a, b]) =>
-          svg`
-            <line
-              x1=${a.x} y1=${a.y}
-              x2=${b.x} y2=${b.y}
-              stroke-dasharray=${relationship.identification ? 0 : 10}
-              stroke-width=${strokeWidth}
-              fill="transparent"
-            ></line>
-          `
-      )}
-      <line
-        x1=${path.line.start.x1} y1=${path.line.start.y1}
-        x2=${path.line.start.x2} y2=${path.line.start.y2}
-        stroke-width="3"
-      ></line>
-      <line
-        x1=${line.line.start.base.x1} y1=${line.line.start.base.y1}
-        x2=${line.line.start.base.x2} y2=${line.line.start.base.y2}
-        stroke-width="3"
-      ></line>
-      ${
-        relationship.startRelationshipType === StartRelationshipType.ring
-          ? svg`
-            <circle
-              cx=${line.startCircle.cx} cy=${line.startCircle.cy} r="8"
-              fill-opacity="0.0"
-              stroke-width="3"
-            ></circle>
-            <line
-              x1=${line.line.start.center.x1} y1=${line.line.start.center.y1}
-              x2=${line.line.start.center.x2} y2=${line.line.start.center.y2}
-              stroke-width="3"
-            ></line>
-      `
-          : svg`
-            <line
-              x1=${line.line.start.base2.x1} y1=${line.line.start.base2.y1}
-              x2=${line.line.start.base2.x2} y2=${line.line.start.base2.y2}
-              stroke-width="3"
-            ></line>
-            <line
-              x1=${line.line.start.center2.x1} y1=${line.line.start.center2.y1}
-              x2=${line.line.start.center2.x2} y2=${line.line.start.center2.y2}
-              stroke-width="3"
-            ></line>
-      `
-      }
-      ${shape}
+      <g
+        class=${[
+          'relationship',
+          { identification: relationship.identification },
+        ]}
+        data-id=${relationship.id}
+        ?data-hover=${hover}
+        @mouseenter=${() => handleMouseenter(relationship)}
+        @mouseleave=${handleMouseleave}
+      >
+        ${lines.map(
+          ([a, b]) =>
+            svg`
+              <line
+                x1=${a.x} y1=${a.y}
+                x2=${b.x} y2=${b.y}
+                stroke-dasharray=${relationship.identification ? 0 : 10}
+                stroke-width=${strokeWidth}
+                fill="transparent"
+              ></line>
+            `
+        )}
+        <line
+          x1=${path.line.start.x1} y1=${path.line.start.y1}
+          x2=${path.line.start.x2} y2=${path.line.start.y2}
+          stroke-width="3"
+        ></line>
+        <line
+          x1=${line.line.start.base.x1} y1=${line.line.start.base.y1}
+          x2=${line.line.start.base.x2} y2=${line.line.start.base.y2}
+          stroke-width="3"
+        ></line>
+        ${
+          relationship.startRelationshipType === StartRelationshipType.ring
+            ? svg`
+              <circle
+                cx=${line.startCircle.cx} cy=${line.startCircle.cy} r="8"
+                fill-opacity="0.0"
+                stroke-width="3"
+              ></circle>
+              <line
+                x1=${line.line.start.center.x1} y1=${line.line.start.center.y1}
+                x2=${line.line.start.center.x2} y2=${line.line.start.center.y2}
+                stroke-width="3"
+              ></line>
+        `
+            : svg`
+              <line
+                x1=${line.line.start.base2.x1} y1=${line.line.start.base2.y1}
+                x2=${line.line.start.base2.x2} y2=${line.line.start.base2.y2}
+                stroke-width="3"
+              ></line>
+              <line
+                x1=${line.line.start.center2.x1} y1=${line.line.start.center2.y1}
+                x2=${line.line.start.center2.x2} y2=${line.line.start.center2.y2}
+                stroke-width="3"
+              ></line>
+        `
+        }
+        ${shape}
+      </g>
     `;
   };
 };

diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/Column.ts b/packages/erd-editor/src/components/erd/canvas/table/column/Column.ts
@@ -21,6 +21,10 @@ import {
   editTableEndAction,
   focusColumnAction,
 } from '@/engine/modules/editor/atom.actions';
+import {
+  columnKeyHoverEndAction$,
+  columnKeyHoverStartAction$,
+} from '@/engine/modules/editor/generator.actions';
 import { FocusType } from '@/engine/modules/editor/state';
 import {
   changeColumnValueAction$,
@@ -120,6 +124,19 @@ const Column: FC<ColumnProps> = (props, ctx) => {
     );
   };
 
+  const handleMouseenterKey = () => {
+    const { column } = props;
+    if (column.ui.keys === 0) return;
+
+    const { store } = app.value;
+    store.dispatch(columnKeyHoverStartAction$(column.id));
+  };
+
+  const handleMouseleaveKey = () => {
+    const { store } = app.value;
+    store.dispatch(columnKeyHoverEndAction$());
+  };
+
   const getColumnOrder = (): ColumnOrderTpl[] => {
     const { store } = app.value;
     const { settings } = store.state;
@@ -350,7 +367,11 @@ const Column: FC<ColumnProps> = (props, ctx) => {
         @dragstart=${props.onDragstart}
         @dragend=${props.onDragend}
       >
-        <${ColumnKey} keys=${column.ui.keys} />
+        <${ColumnKey}
+          keys=${column.ui.keys}
+          .onMouseenter=${handleMouseenterKey}
+          .onMouseleave=${handleMouseleaveKey}
+        />
         ${repeat(
           getColumnOrder(),
           ({ columnType }) => columnType,

diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/column-key/ColumnKey.ts b/packages/erd-editor/src/components/erd/canvas/table/column/column-key/ColumnKey.ts
@@ -8,6 +8,8 @@ import * as styles from './ColumnKey.styles';
 
 export type ColumnKeyProps = {
   keys: number;
+  onMouseenter?: (event: MouseEvent) => void;
+  onMouseleave?: (event: MouseEvent) => void;
 };
 
 const ColumnKey: FC<ColumnKeyProps> = (props, ctx) => {
@@ -27,6 +29,8 @@ const ColumnKey: FC<ColumnKeyProps> = (props, ctx) => {
       class=${['column-col', styles.key, className()]}
       size=${12}
       name="key"
+      .onMouseenter=${props.onMouseenter}
+      .onMouseleave=${props.onMouseleave}
     />
   `;
 };

diff --git a/packages/erd-editor/src/components/erd/minimap/useMinimapScroll.ts b/packages/erd-editor/src/components/erd/minimap/useMinimapScroll.ts
@@ -110,7 +110,6 @@ export function useMinimapScroll(ctx: Ctx) {
   };
 
   const onScrollStart = (event: MouseEvent | TouchEvent) => {
-    event.preventDefault();
     state.selected = true;
 
     clientX = isMouseEvent(event) ? event.clientX : event.touches[0].clientX;

diff --git a/packages/erd-editor/src/components/primitives/icon/Icon.ts b/packages/erd-editor/src/components/primitives/icon/Icon.ts
@@ -19,6 +19,8 @@ export type IconProps = {
   title?: string;
   rotate?: number;
   onClick?: (event: MouseEvent) => void;
+  onMouseenter?: (event: MouseEvent) => void;
+  onMouseleave?: (event: MouseEvent) => void;
 };
 
 const Icon: FC<IconProps> = (props, ctx) => () => {
@@ -39,6 +41,8 @@ const Icon: FC<IconProps> = (props, ctx) => () => {
       }}
       ...${restAttrs({ title: props.title })}
       @click=${props.onClick}
+      @mouseenter=${props.onMouseenter}
+      @mouseleave=${props.onMouseleave}
     >
       ${prefix === 'base64'
         ? html`

diff --git a/packages/erd-editor/src/engine/modules/editor/actions.ts b/packages/erd-editor/src/engine/modules/editor/actions.ts
@@ -28,6 +28,7 @@ export const ActionType = {
   drawEndRelationship: 'editor.drawEndRelationship',
   drawRelationship: 'editor.drawRelationship',
   hoverColumnMap: 'editor.hoverColumnMap',
+  hoverRelationshipMap: 'editor.hoverRelationshipMap',
   changeOpenMap: 'editor.changeOpenMap',
   dragstartColumn: 'editor.dragstartColumn',
   dragendColumn: 'editor.dragendColumn',
@@ -89,6 +90,9 @@ export type ActionMap = {
   [ActionType.hoverColumnMap]: {
     columnIds: string[];
   };
+  [ActionType.hoverRelationshipMap]: {
+    relationshipIds: string[];
+  };
   [ActionType.changeOpenMap]: Record<string, boolean>;
   [ActionType.dragstartColumn]: {
     tableId: string;

diff --git a/packages/erd-editor/src/engine/modules/editor/atom.actions.ts b/packages/erd-editor/src/engine/modules/editor/atom.actions.ts
@@ -428,6 +428,22 @@ const hoverColumnMap: ReducerType<typeof ActionType.hoverColumnMap> = (
   }
 };
 
+export const hoverRelationshipMapAction = createAction<
+  ActionMap[typeof ActionType.hoverRelationshipMap]
+>(ActionType.hoverRelationshipMap);
+
+const hoverRelationshipMap: ReducerType<
+  typeof ActionType.hoverRelationshipMap
+> = ({ editor }, { payload: { relationshipIds } }) => {
+  Object.keys(editor.hoverRelationshipMap).forEach(id => {
+    Reflect.deleteProperty(editor.hoverRelationshipMap, id);
+  });
+
+  for (const id of relationshipIds) {
+    editor.hoverRelationshipMap[id] = true;
+  }
+};
+
 export const changeOpenMapAction = createAction<
   ActionMap[typeof ActionType.changeOpenMap]
 >(ActionType.changeOpenMap);
@@ -606,6 +622,7 @@ export const editorReducers = {
   [ActionType.drawEndRelationship]: drawEndRelationship,
   [ActionType.drawRelationship]: drawRelationship,
   [ActionType.hoverColumnMap]: hoverColumnMap,
+  [ActionType.hoverRelationshipMap]: hoverRelationshipMap,
   [ActionType.changeOpenMap]: changeOpenMap,
   [ActionType.dragstartColumn]: dragstartColumn,
   [ActionType.dragendColumn]: dragendColumn,
@@ -635,6 +652,7 @@ export const actions = {
   drawEndRelationshipAction,
   drawRelationshipAction,
   hoverColumnMapAction,
+  hoverRelationshipMapAction,
   changeOpenMapAction,
   dragstartColumnAction,
   dragendColumnAction,