feat: color picker dark mode

.nvmrc

@@ -0,0 +1 @@
+18

packages/erd-editor/package.json

@@ -56,19 +56,21 @@
     "@mdi/js": "7.2.96",
     "@radix-ui/colors": "2.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/html-vite": "^7.4.0",
-    "@storybook/html": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/html-vite": "^7.5.3",
+    "@storybook/html": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@types/color": "^3.0.3",
+    "@types/d3": "7.4.3",
     "@types/highlight-words-core": "^1.2.3",
     "@types/lodash-es": "^4.17.8",
     "@types/luxon": "^3.3.1",
     "@types/ua-parser-js": "^0.7.37",
     "color": "^4.2.3",
+    "d3": "7.8.5",
     "deepmerge": "^4.3.1",
     "highlight-words-core": "^1.2.2",
     "html-to-image": "^1.11.11",
@@ -78,7 +80,7 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "rxjs": "^7.8.1",
     "stats.js": "^0.17.0",
-    "storybook": "^7.4.0",
+    "storybook": "^7.5.3",
     "ts-patch": "^3.0.2",
     "tslib": "^2.6.1",
     "typescript-transform-paths": "^3.4.6",

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

@@ -1,4 +1,5 @@
 import {
+  cache,
   createRef,
   defineCustomElement,
   FC,
@@ -14,7 +15,9 @@ import Erd from '@/components/erd/Erd';
 import GlobalStyles from '@/components/global-styles/GlobalStyles';
 import Theme from '@/components/theme/Theme';
 import Toolbar from '@/components/toolbar/Toolbar';
+import Visualization from '@/components/visualization/Visualization';
 import { TOOLBAR_HEIGHT } from '@/constants/layout';
+import { CanvasType } from '@/constants/schema';
 import { DatabaseVendor } from '@/constants/sql/database';
 import { changeViewportAction } from '@/engine/modules/editor/atom.actions';
 import { useKeyBindingMap } from '@/hooks/useKeyBindingMap';
@@ -121,22 +124,32 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
     });
   });
 
-  return () => html`
-    <${GlobalStyles} />
-    <${Theme} .theme=${theme} />
-    <div
-      ${ref(root)}
-      class=${['root', styles.root, { dark: isDarkMode() }]}
-      tabindex="-1"
-      @keydown=${handleKeydown}
-    >
-      <${Toolbar} />
-      <div class=${styles.main}>
-        <${Erd} />
+  return () => {
+    const { store } = appContextValue;
+    const { settings } = store.state;
+
+    return html`
+      <${GlobalStyles} />
+      <${Theme} .theme=${theme} />
+      <div
+        ${ref(root)}
+        class=${['root', styles.root, { dark: isDarkMode() }]}
+        tabindex="-1"
+        @keydown=${handleKeydown}
+      >
+        <${Toolbar} />
+        <div class=${styles.main}>
+          ${cache(
+            settings.canvasType === CanvasType.ERD ? html`<${Erd} />` : null
+          )}
+          ${settings.canvasType === CanvasType.visualization
+            ? html`<${Visualization} />`
+            : null}
+        </div>
+        ${text.span}
       </div>
-      ${text.span}
-    </div>
-  `;
+    `;
+  };
 };
 
 defineCustomElement('erd-editor', {

packages/erd-editor/src/components/erd/canvas/canvas-svg/CanvasSvg.ts

@@ -2,6 +2,8 @@ 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 { query } from '@/utils/collection/query';
 
 import * as styles from './CanvasSvg.styles';
@@ -14,6 +16,23 @@ 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 {
@@ -46,6 +65,8 @@ const CanvasSvg: FC<CanvasSvgProps> = (props, ctx) => {
                 { identification: relationship.identification },
               ]}
               data-id=${relationship.id}
+              @mouseenter=${() => handleMouseenter(relationship)}
+              @mouseleave=${handleMouseleave}
             >
               <${Relationship}
                 relationship=${relationship}

packages/erd-editor/src/components/erd/canvas/high-level-table/HighLevelTable.ts

@@ -60,8 +60,9 @@ const HighLevelTable: FC<HighLevelTableProps> = (props, ctx) => {
 
   return () => {
     const { store } = app.value;
+    const { editor } = store.state;
     const { table } = props;
-    const selected = Boolean(store.state.editor.selectedMap[table.id]);
+    const selected = Boolean(editor.selectedMap[table.id]);
     const tableWidths = calcTableWidths(table, store.state);
     const height = calcTableHeight(table);
 

packages/erd-editor/src/components/erd/canvas/memo/Memo.ts

@@ -84,8 +84,9 @@ const Memo: FC<MemoProps> = (props, ctx) => {
 
   return () => {
     const { store, keyBindingMap } = app.value;
+    const { editor } = store.state;
     const { memo } = props;
-    const selected = Boolean(store.state.editor.selectedMap[memo.id]);
+    const selected = Boolean(editor.selectedMap[memo.id]);
     const width = calcMemoWidth(memo);
     const height = calcMemoHeight(memo);
 

packages/erd-editor/src/components/erd/canvas/table/Table.ts

@@ -98,9 +98,9 @@ const Table: FC<TableProps> = (props, ctx) => {
 
   return () => {
     const { store, keyBindingMap } = app.value;
-    const { settings, collections } = store.state;
+    const { editor, settings, collections } = store.state;
     const { table } = props;
-    const selected = Boolean(store.state.editor.selectedMap[table.id]);
+    const selected = Boolean(editor.selectedMap[table.id]);
     const tableWidths = calcTableWidths(table, store.state);
     const height = calcTableHeight(table);
 

packages/erd-editor/src/components/erd/canvas/table/column/Column.styles.ts

@@ -22,6 +22,10 @@ export const root = css`
     background-color: var(--column-hover);
   }
 
+  &.hover {
+    background-color: var(--column-hover);
+  }
+
   &.selected {
     background-color: var(--column-select);
   }

packages/erd-editor/src/components/erd/canvas/table/column/Column.ts

@@ -318,12 +318,14 @@ const Column: FC<ColumnProps> = (props, ctx) => {
   };
 
   return () => {
-    const { keyBindingMap } = app.value;
+    const { store, keyBindingMap } = app.value;
+    const { editor } = store.state;
     const { column, selected } = props;
+    const hover = Boolean(editor.hoverColumnMap[column.id]);
 
     return html`
       <div
-        class=${['column-row', styles.root, { selected }]}
+        class=${['column-row', styles.root, { selected, hover }]}
         data-id=${column.id}
       >
         <${ColumnKey} keys=${column.ui.keys} />

packages/erd-editor/src/components/primitives/color-picker/ColorPicker.stories.ts

@@ -23,6 +23,9 @@ const meta = {
     onChange: {
       action: 'onChange',
     },
+    onLastUpdate: {
+      action: 'onLastUpdate',
+    },
   },
 } satisfies Meta<ColorPickerProps>;
 

packages/erd-editor/src/components/primitives/color-picker/ColorPicker.ts

@@ -10,7 +10,8 @@ export type ColorPickerProps = {
   x: number;
   y: number;
   color: string;
-  onChange: (color: string) => void;
+  onChange?: (color: string) => void;
+  onLastUpdate?: (color: string) => void;
 };
 
 const ColorPicker: FC<ColorPickerProps> = (props, ctx) => {
@@ -25,7 +26,10 @@ const ColorPicker: FC<ColorPickerProps> = (props, ctx) => {
       position: 'inline',
       color: props.color || '',
       onChange: (color: string) => {
-        props.onChange(color);
+        props.onChange?.(color);
+      },
+      onLastUpdate: (color: string) => {
+        props.onLastUpdate?.(color);
       },
     });
 

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

@@ -9,6 +9,7 @@ import {
 } from '@dineug/r-html';
 
 import { useUnmounted } from '@/hooks/useUnmounted';
+import { restAttrs } from '@/utils/attribute';
 import { lastCursorFocus } from '@/utils/focus';
 import { focusEvent } from '@/utils/internalEvents';
 
@@ -85,10 +86,12 @@ const EditInput: FC<EditInputProps> = (props, ctx) => {
               width: `${props.width}px`,
               'min-width': `${props.width}px`,
             }}
-            placeholder=${props.placeholder ?? ''}
+            ...${restAttrs({
+              title: props.title,
+              placeholder: props.placeholder,
+            })}
             type="text"
             spellcheck="false"
-            title=${props.title}
             .value=${props.value ?? ''}
             @input=${props.onInput}
             @blur=${handleBlur}
@@ -109,7 +112,7 @@ const EditInput: FC<EditInputProps> = (props, ctx) => {
               width: `${props.width}px`,
               'min-width': `${props.width}px`,
             }}
-            title=${props.title}
+            ...${restAttrs({ title: props.title })}
           >
             ${props.value.trim() ? props.value : props.placeholder}
           </div>

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

@@ -1,5 +1,7 @@
 import { FC, html, svg } from '@dineug/r-html';
 
+import { restAttrs } from '@/utils/attribute';
+
 import * as styles from './Icon.styles';
 import { getIcon } from './icons';
 
@@ -31,7 +33,7 @@ const Icon: FC<IconProps> = (props, ctx) => () => {
   return html`
     <div
       class=${['icon', styles.wrap, props.class]}
-      title=${props.title}
+      ...${restAttrs({ title: props.title })}
       @click=${props.onClick}
     >
       ${prefix === 'base64'

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

@@ -25,6 +25,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {
   mdiAtom,
+  mdiChartScatterPlot,
   mdiCodeBrackets,
   mdiCodeJson,
   mdiDatabase,
@@ -111,9 +112,9 @@ const icons = [
   createMDI('format-letter-case', mdiFormatLetterCase),
   createMDI('table-cog', mdiTableCog),
   createMDI('code-brackets', mdiCodeBrackets),
-  createMDI('xml', mdiXml),
   createMDI('vector-line', mdiVectorLine),
   createMDI('atom', mdiAtom),
+  createMDI('chart-scatter-plot', mdiChartScatterPlot),
   ...Object.entries(BASE_64_ICON).map(([name, base64]) =>
     createBase64(name, base64)
   ),

packages/erd-editor/src/components/primitives/text-input/TextInput.ts

@@ -1,5 +1,6 @@
 import { FC, html } from '@dineug/r-html';
 
+import { restAttrs } from '@/utils/attribute';
 import { onNumberOnly } from '@/utils/domEvent';
 
 export type TextInputProps = {
@@ -19,8 +20,10 @@ const TextInput: FC<TextInputProps> = (props, ctx) => {
   return () => html`
     <input
       style=${{ width: props.width ? `${props.width}px` : '' }}
-      placeholder=${props.placeholder ?? ''}
-      title=${props.title ?? ''}
+      ...${restAttrs({
+        title: props.title,
+        placeholder: props.placeholder,
+      })}
       type="text"
       spellcheck="false"
       ?readonly=${props.readonly}

packages/erd-editor/src/components/toolbar/Toolbar.ts

@@ -5,6 +5,7 @@ import Icon from '@/components/primitives/icon/Icon';
 import TextInput from '@/components/primitives/text-input/TextInput';
 import { CanvasType } from '@/constants/schema';
 import {
+  changeCanvasTypeAction,
   changeDatabaseNameAction,
   changeZoomLevelAction,
   resizeAction,
@@ -51,6 +52,11 @@ const Toolbar: FC<ToolbarProps> = (props, ctx) => {
     store.dispatch(changeZoomLevelAction({ value: zoomLevel }));
   };
 
+  const handleChangeCanvasType = (value: string) => {
+    const { store } = app.value;
+    store.dispatch(changeCanvasTypeAction({ value }));
+  };
+
   const handleUndo = () => {
     const { store } = app.value;
     store.undo();
@@ -91,6 +97,27 @@ const Toolbar: FC<ToolbarProps> = (props, ctx) => {
           .onChange=${handleZoomLevel}
         />
         <div class=${styles.vertical}></div>
+        <div
+          class=${[
+            styles.menu,
+            { active: settings.canvasType === CanvasType.ERD },
+          ]}
+          title="Entity Relationship Diagram"
+          @click=${() => handleChangeCanvasType(CanvasType.ERD)}
+        >
+          <${Icon} name="diagram-project" size=${16} />
+        </div>
+        <div
+          class=${[
+            styles.menu,
+            { active: settings.canvasType === CanvasType.visualization },
+          ]}
+          title="Visualization"
+          @click=${() => handleChangeCanvasType(CanvasType.visualization)}
+        >
+          <${Icon} prefix="mdi" name="chart-scatter-plot" size=${16} />
+        </div>
+        <div class=${styles.vertical}></div>
         ${settings.canvasType === CanvasType.ERD
           ? html`
               <div

packages/erd-editor/src/components/visualization/Visualization.styles.ts

@@ -0,0 +1 @@
+import { css } from '@dineug/r-html';