feat: column order

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

@@ -3,9 +3,9 @@ import { DOMTemplateLiterals, FC, html } from '@dineug/r-html';
 import * as styles from './Menu.styles';
 
 export type MenuProps = {
-  icon: DOMTemplateLiterals;
-  name: DOMTemplateLiterals;
-  right?: DOMTemplateLiterals;
+  icon: DOMTemplateLiterals | string;
+  name: DOMTemplateLiterals | string;
+  right?: DOMTemplateLiterals | string;
 };
 
 const Menu: FC<MenuProps> = (props, ctx) => () =>

packages/erd-editor/src/components/primitives/icon/icons.ts

@@ -1,5 +1,6 @@
 import { faCopy } from '@fortawesome/free-regular-svg-icons';
 import {
+  faBars,
   faCheck,
   faChevronRight,
   faCode,
@@ -107,6 +108,7 @@ const icons = [
   faPalette,
   faColumns,
   faCopy,
+  faBars,
   createMDI('code-json', mdiCodeJson),
   createMDI('database', mdiDatabase),
   createMDI('database-import', mdiDatabaseImport),

packages/erd-editor/src/components/settings/Settings.styles.ts

@@ -10,6 +10,10 @@ export const root = css`
   height: 100%;
   overflow: hidden;
   padding: 32px;
+
+  .column-order-move {
+    transition: transform 0.3s;
+  }
 `;
 
 export const title = css`
@@ -41,3 +45,39 @@ export const vertical = (size: number) => css`
   width: ${size}px;
   height: 100%;
 `;
+
+export const columnOrderSection = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+
+export const columnOrderList = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const columnOrderItem = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  cursor: move;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+    fill: var(--active);
+  }
+
+  &.none-hover {
+    background-color: transparent;
+    color: var(--foreground);
+    fill: var(--foreground);
+  }
+
+  &.draggable {
+    opacity: 0.5;
+  }
+`;

packages/erd-editor/src/components/settings/Settings.ts

@@ -1,28 +1,37 @@
 import { delay } from '@dineug/go';
-import { FC, html } from '@dineug/r-html';
+import { createRef, FC, html, onUpdated, ref, repeat } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
 import Button from '@/components/primitives/button/Button';
+import Menu from '@/components/primitives/context-menu/menu/Menu';
 import Icon from '@/components/primitives/icon/Icon';
 import Separator from '@/components/primitives/separator/Separator';
 import Switch from '@/components/primitives/switch/Switch';
 import Toast from '@/components/primitives/toast/Toast';
+import { ColumnTypeToName } from '@/constants/schema';
 import {
   changeColumnOrderAction,
   changeRelationshipDataTypeSyncAction,
 } from '@/engine/modules/settings/atom.actions';
 import { recalculateTableWidth } from '@/utils/calcTable';
+import { onPrevent } from '@/utils/domEvent';
 import { relationshipSort } from '@/utils/draw-relationship/sort';
 import { openToastAction } from '@/utils/emitter';
 import { FlipAnimation } from '@/utils/flipAnimation';
-import { fromDraggable } from '@/utils/rx-operators/fromDraggable';
+import { fromShadowDraggable } from '@/utils/rx-operators/fromShadowDraggable';
 
 import * as styles from './Settings.styles';
 
 export type SettingsProps = {};
 
 const Settings: FC<SettingsProps> = (props, ctx) => {
   const app = useAppContext(ctx);
+  const root = createRef<HTMLDivElement>();
+  const flipAnimation = new FlipAnimation(
+    root,
+    `.${styles.columnOrderItem}`,
+    'column-order-move'
+  );
 
   const handleChangeRelationshipDataTypeSync = (value: boolean) => {
     const { store } = app.value;
@@ -41,12 +50,46 @@ const Settings: FC<SettingsProps> = (props, ctx) => {
     );
   };
 
+  const handleChangeColumnOrderAction = (value: number, target: number) => {
+    const { store } = app.value;
+
+    if (value !== target) {
+      flipAnimation.snapshot();
+      store.dispatch(changeColumnOrderAction({ value, target }));
+    }
+  };
+
+  const handleDragstartColumnOrder = (event: DragEvent) => {
+    const $root = root.value;
+    const $target = event.target as HTMLElement | null;
+    if (!$root || !$target) return;
+
+    const columnType = Number($target.dataset.id);
+    const elements = Array.from<HTMLElement>(
+      $root.querySelectorAll(`.${styles.columnOrderItem}`)
+    );
+    elements.forEach(el => el.classList.add('none-hover'));
+    $target.classList.add('draggable');
+
+    fromShadowDraggable(elements).subscribe({
+      next: id => {
+        handleChangeColumnOrderAction(columnType, Number(id));
+      },
+      complete: () => {
+        $target.classList.remove('draggable');
+        elements.forEach(el => el.classList.remove('none-hover'));
+      },
+    });
+  };
+
+  onUpdated(() => flipAnimation.play());
+
   return () => {
     const { store } = app.value;
     const { settings } = store.state;
 
     return html`
-      <div class=${styles.root}>
+      <div class=${styles.root} ${ref(root)}>
         <div class=${styles.title}>Settings</div>
         <${Separator} space=${24} />
         <div class=${['scrollbar', styles.content]}>
@@ -73,6 +116,33 @@ const Settings: FC<SettingsProps> = (props, ctx) => {
                 .onClick=${handleRecalculationTableWidth}
               />
             </div>
+            <div class=${styles.columnOrderSection}>
+              <div>Column Order</div>
+              <${Separator} space=${12} />
+              <div
+                class=${styles.columnOrderList}
+                @dragenter=${onPrevent}
+                @dragover=${onPrevent}
+              >
+                ${repeat(
+                  settings.columnOrder,
+                  columnType => columnType,
+                  columnType => html`
+                    <div
+                      class=${styles.columnOrderItem}
+                      draggable="true"
+                      data-id=${columnType}
+                      @dragstart=${handleDragstartColumnOrder}
+                    >
+                      <${Menu}
+                        icon=${html`<${Icon} name="bars" size=${14} />`}
+                        name=${ColumnTypeToName[columnType]}
+                      />
+                    </div>
+                  `
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>

packages/erd-editor/src/constants/schema.ts

@@ -35,3 +35,13 @@ export const BracketTypeMap: Record<number, string> = {
   [BracketType.doubleQuote]: '"',
   [BracketType.singleQuote]: "'",
 };
+
+export const ColumnTypeToName: Record<number, string> = {
+  [ColumnType.columnName]: 'Name',
+  [ColumnType.columnDataType]: 'DataType',
+  [ColumnType.columnDefault]: 'Default',
+  [ColumnType.columnComment]: 'Comment',
+  [ColumnType.columnAutoIncrement]: 'Auto Increment',
+  [ColumnType.columnUnique]: 'Unique',
+  [ColumnType.columnNotNull]: 'Not Null',
+};

packages/erd-editor/src/utils/rx-operators/fromShadowDraggable.ts

@@ -0,0 +1,21 @@
+import {
+  debounceTime,
+  fromEvent,
+  map,
+  merge,
+  takeUntil,
+  throttleTime,
+} from 'rxjs';
+
+export const fromShadowDraggable = (elements: HTMLElement[]) =>
+  merge(
+    ...elements.map(el =>
+      fromEvent<DragEvent>(el, 'dragover').pipe(
+        throttleTime(300),
+        map(() => el.dataset.id as string)
+      )
+    )
+  ).pipe(
+    debounceTime(50),
+    takeUntil(merge(...elements.map(el => fromEvent<DragEvent>(el, 'dragend'))))
+  );