feat: DragSelect

dineug · Oct 29, 2023 · 500eecd · 500eecd
1 parent 0255d99
commit 500eecd
Show file tree

Hide file tree

Showing 14 changed files with 377 additions and 81 deletions.
diff --git a/packages/erd-editor/src/components/erd/Erd.ts b/packages/erd-editor/src/components/erd/Erd.ts
@@ -1,7 +1,8 @@
-import { createRef, FC, html, ref } from '@dineug/r-html';
+import { createRef, FC, html, observable, ref } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/context';
 import Canvas from '@/components/erd/canvas/Canvas';
+import DragSelect from '@/components/erd/drag-select/DragSelect';
 import ErdContextMenu, {
   ErdContextMenuType,
 } from '@/components/erd/erd-context-menu/ErdContextMenu';
@@ -12,6 +13,7 @@ import {
   streamZoomLevelAction,
 } from '@/engine/modules/settings/atom.actions';
 import { drag$, DragMove } from '@/utils/globalEventObservable';
+import { isMod } from '@/utils/keyboard-shortcut';
 
 import * as styles from './Erd.styles';
 import { useErdShortcut } from './useErdShortcut';
@@ -22,6 +24,11 @@ const Erd: FC<ErdProps> = (props, ctx) => {
   const contextMenu = useContextMenuRootProvider(ctx);
   const root = createRef<HTMLDivElement>();
   const app = useAppContext(ctx);
+  const state = observable({
+    dragSelect: false,
+    dragSelectX: 0,
+    dragSelectY: 0,
+  });
   useErdShortcut(ctx);
 
   const resetScroll = () => {
@@ -64,8 +71,18 @@ const Erd: FC<ErdProps> = (props, ctx) => {
     const { store } = app.value;
     store.dispatch(unselectAllAction());
 
-    // TODO: dragSelect
-    drag$.subscribe(handleMove);
+    if (event.type === 'mousedown' && isMod(event)) {
+      const { x, y } = root.value.getBoundingClientRect();
+      state.dragSelect = true;
+      state.dragSelectX = event.clientX - x;
+      state.dragSelectY = event.clientY - y;
+    } else {
+      drag$.subscribe(handleMove);
+    }
+  };
+
+  const handleDragSelectEnd = () => {
+    state.dragSelect = false;
   };
 
   return () =>
@@ -80,6 +97,16 @@ const Erd: FC<ErdProps> = (props, ctx) => {
         @wheel=${handleWheel}
       >
         <${Canvas} />
+        ${state.dragSelect
+          ? html`
+              <${DragSelect}
+                root=${root}
+                x=${state.dragSelectX}
+                y=${state.dragSelectY}
+                .onDragSelectEnd=${handleDragSelectEnd}
+              />
+            `
+          : null}
         <${ErdContextMenu}
           type=${ErdContextMenuType.ERD}
           root=${root}

diff --git a/packages/erd-editor/src/components/erd/canvas/memo/Memo.styles.ts b/packages/erd-editor/src/components/erd/canvas/memo/Memo.styles.ts
@@ -56,12 +56,12 @@ export const headerButtonWrap = css`
   justify-content: flex-end;
   margin-bottom: ${HEADER_ICON_MARGIN_BOTTOM}px;
 
-  & > div {
+  & > .icon {
     margin-left: 4px;
     cursor: pointer;
   }
 
-  & > div:hover {
+  & > .icon:hover {
     fill: var(--active);
     color: var(--active);
   }

diff --git a/packages/erd-editor/src/components/erd/canvas/memo/Memo.ts b/packages/erd-editor/src/components/erd/canvas/memo/Memo.ts
@@ -38,6 +38,7 @@ const Memo: FC<MemoProps> = (props, ctx) => {
     store.dispatch(selectMemoAction$(props.memo.id, isMod(event)));
 
     if (
+      !el.closest('.memo-header-color') &&
       !el.closest('.memo-textarea') &&
       !el.closest('.icon') &&
       !el.closest('.sash')
@@ -88,7 +89,7 @@ const Memo: FC<MemoProps> = (props, ctx) => {
         <div class=${styles.container}>
           <div class=${styles.header}>
             <div
-              class=${styles.headerColor}
+              class=${['memo-header-color', styles.headerColor]}
               style=${{
                 'background-color': memo.ui.color,
               }}

diff --git a/packages/erd-editor/src/components/erd/canvas/table/Table.styles.ts b/packages/erd-editor/src/components/erd/canvas/table/Table.styles.ts
@@ -1,9 +1,11 @@
 import { css } from '@dineug/r-html';
 
 import {
+  HEADER_ICON_HEIGHT,
   INPUT_MARGIN_RIGHT,
   TABLE_HEADER_BUTTON_MARGIN_LEFT,
-  TABLE_HEADER_HEIGHT,
+  TABLE_HEADER_ICON_MARGIN_BOTTOM,
+  TABLE_HEADER_INPUT_HEIGHT,
   TABLE_HEADER_PADDING,
   TABLE_PADDING,
 } from '@/constants/layout';
@@ -46,22 +48,11 @@ export const headerColor = css`
   cursor: pointer;
 `;
 
-export const headerInputWrap = css`
-  display: flex;
-  height: ${TABLE_HEADER_HEIGHT}px;
-  align-items: center;
-  padding: ${TABLE_HEADER_PADDING}px 0;
-
-  & > .edit-input {
-    margin-right: ${INPUT_MARGIN_RIGHT}px;
-  }
-`;
-
 export const headerButtonWrap = css`
   display: flex;
-  height: 100%;
-  align-items: center;
-  margin-left: auto;
+  height: ${HEADER_ICON_HEIGHT}px;
+  justify-content: flex-end;
+  margin-bottom: ${TABLE_HEADER_ICON_MARGIN_BOTTOM}px;
 
   & > .icon {
     cursor: pointer;
@@ -76,3 +67,14 @@ export const headerButtonWrap = css`
     color: var(--active);
   }
 `;
+
+export const headerInputWrap = css`
+  display: flex;
+  height: ${TABLE_HEADER_INPUT_HEIGHT}px;
+  align-items: center;
+  padding: ${TABLE_HEADER_PADDING}px 0;
+
+  & > .edit-input {
+    margin-right: ${INPUT_MARGIN_RIGHT}px;
+  }
+`;
diff --git a/packages/erd-editor/src/components/erd/canvas/table/Table.ts b/packages/erd-editor/src/components/erd/canvas/table/Table.ts
@@ -41,7 +41,12 @@ const Table: FC<TableProps> = (props, ctx) => {
     const { store } = app.value;
     store.dispatch(selectTableAction$(props.table.id, isMod(event)));
 
-    if (!el.closest('.edit-input') && !el.closest('.icon')) {
+    if (
+      !el.closest('.table-header-color') &&
+      !el.closest('.column-row') &&
+      !el.closest('.icon') &&
+      !el.closest('.edit-input')
+    ) {
       drag$.subscribe(handleMove);
     }
   };
@@ -84,11 +89,31 @@ const Table: FC<TableProps> = (props, ctx) => {
       >
         <div class=${styles.header}>
           <div
-            class=${styles.headerColor}
+            class=${['table-header-color', styles.headerColor]}
             style=${{
               'background-color': table.ui.color,
             }}
           ></div>
+          <div class=${styles.headerButtonWrap}>
+            <${Icon}
+              size=${12}
+              name="plus"
+              title=${simpleShortcutToString(
+                keyBindingMap.addColumn[0]?.shortcut
+              )}
+              useTransition=${true}
+              .onClick=${handleAddColumn}
+            />
+            <${Icon}
+              size=${12}
+              name="xmark"
+              title=${simpleShortcutToString(
+                keyBindingMap.removeTable[0]?.shortcut
+              )}
+              useTransition=${true}
+              .onClick=${handleRemoveTable}
+            />
+          </div>
           <div class=${styles.headerInputWrap}>
             <${EditInput}
               placeholder="table"
@@ -104,26 +129,6 @@ const Table: FC<TableProps> = (props, ctx) => {
                   />
                 `
               : null}
-            <div class=${styles.headerButtonWrap}>
-              <${Icon}
-                size=${12}
-                name="plus"
-                title=${simpleShortcutToString(
-                  keyBindingMap.addColumn[0]?.shortcut
-                )}
-                useTransition=${true}
-                .onClick=${handleAddColumn}
-              />
-              <${Icon}
-                size=${12}
-                name="xmark"
-                title=${simpleShortcutToString(
-                  keyBindingMap.removeTable[0]?.shortcut
-                )}
-                useTransition=${true}
-                .onClick=${handleRemoveTable}
-              />
-            </div>
           </div>
         </div>
         <div @dragenter=${onPrevent} @dragover=${onPrevent}>

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
@@ -65,18 +65,6 @@ const Column: FC<ColumnProps> = (props, ctx) => {
               />
             `;
             break;
-          case ColumnType.columnDataType:
-            template = bHas(settings.show, Show.columnDataType)
-              ? html`
-                  <${EditInput}
-                    class=${'column-col'}
-                    placeholder="dataType"
-                    width=${widthDataType}
-                    value=${column.dataType}
-                  />
-                `
-              : null;
-            break;
           case ColumnType.columnDefault:
             template = bHas(settings.show, Show.columnDefault)
               ? html`
@@ -101,6 +89,18 @@ const Column: FC<ColumnProps> = (props, ctx) => {
                 `
               : null;
             break;
+          case ColumnType.columnDataType:
+            template = bHas(settings.show, Show.columnDataType)
+              ? html`
+                  <${EditInput}
+                    class=${'column-col'}
+                    placeholder="dataType"
+                    width=${widthDataType}
+                    value=${column.dataType}
+                  />
+                `
+              : null;
+            break;
           case ColumnType.columnNotNull:
             template = bHas(settings.show, Show.columnNotNull)
               ? html`<${ColumnNotNull} options=${column.options} />`
@@ -151,7 +151,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
     const { column } = props;
 
     return html`
-      <div class=${styles.root}>
+      <div class=${['column-row', styles.root]}>
         <${ColumnKey} keys=${column.ui.keys} />
         ${repeat(
           getColumnOrder(),

diff --git a/packages/erd-editor/src/components/erd/drag-select/DragSelect.styles.ts b/packages/erd-editor/src/components/erd/drag-select/DragSelect.styles.ts
@@ -0,0 +1,8 @@
+import { css } from '@dineug/r-html';
+
+export const dragSelect = css`
+  position: absolute;
+  stroke: var(--darg-select-border);
+  fill: var(--darg-select-background);
+  pointer-events: none;
+`;