feat: relationshipOptimization options

dineug · Nov 9, 2021 · b0ca2f2 · b0ca2f2
1 parent cd3f3ee
commit b0ca2f2
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 2 deletions.
diff --git a/packages/vuerd/src/components/drawer/SettingDrawer.ts b/packages/vuerd/src/components/drawer/SettingDrawer.ts
@@ -15,6 +15,7 @@ import { useContext } from '@/core/hooks/context.hook';
 import { fromShadowDraggable } from '@/core/observable/fromShadowDraggable';
 import {
   changeRelationshipDataTypeSync,
+  changeRelationshipOptimization,
   moveColumnOrder,
 } from '@/engine/command/canvas.cmd.helper';
 import { relationshipSort } from '@/engine/store/helper/relationship.helper';
@@ -61,6 +62,12 @@ const SettingDrawer: FunctionalComponent<
     store.dispatch(changeRelationshipDataTypeSync(checkbox.checked));
   };
 
+  const onChangeRelationshipOptimization = (event: Event) => {
+    const checkbox = event.target as HTMLInputElement;
+    const { store } = contextRef.value;
+    store.dispatch(changeRelationshipOptimization(checkbox.checked));
+  };
+
   const onMoveColumnOrder = (
     currentColumnType: ColumnType,
     targetColumnType: ColumnType
@@ -131,6 +138,17 @@ const SettingDrawer: FunctionalComponent<
                 />
               </td>
             </tr>
+            <tr>
+              <td>Relationship Optimization</td>
+              <td>
+                <input
+                  type="checkbox"
+                  ?checked=${setting.relationshipOptimization}
+                  ?disabled=${readonly}
+                  @change=${onChangeRelationshipOptimization}
+                />
+              </td>
+            </tr>
             <tr>
               <td>ColumnType Order</td>
               <td @dragenter=${onPreventDefault} @dragover=${onPreventDefault}>

diff --git a/packages/vuerd/src/components/editor/CanvasSVG.ts b/packages/vuerd/src/components/editor/CanvasSVG.ts
@@ -115,12 +115,16 @@ const CanvasSVG: FunctionalComponent<CanvasSVGProps, CanvasSVGElement> = (
   return () => {
     const {
       store: {
-        canvasState: { width, height },
+        canvasState: {
+          width,
+          height,
+          setting: { relationshipOptimization },
+        },
         relationshipState: { relationships },
       },
     } = contextRef.value;
     const ratio = getRatio();
-    const grid = createGrid();
+    const grid = relationshipOptimization ? createGrid() : null;
 
     return svg`
       <svg

diff --git a/packages/vuerd/src/engine/command/canvas.cmd.helper.ts b/packages/vuerd/src/engine/command/canvas.cmd.helper.ts
@@ -57,6 +57,9 @@ export const changeColumnCase = (nameCase: NameCase) =>
 export const changeRelationshipDataTypeSync = (value: boolean) =>
   createCommand('canvas.changeRelationshipDataTypeSync', { value });
 
+export const changeRelationshipOptimization = (value: boolean) =>
+  createCommand('canvas.changeRelationshipOptimization', { value });
+
 export const moveColumnOrder = (
   columnType: ColumnType,
   targetColumnType: ColumnType

diff --git a/packages/vuerd/src/engine/command/canvas.cmd.ts b/packages/vuerd/src/engine/command/canvas.cmd.ts
@@ -15,6 +15,7 @@ import {
   ChangeNameCase,
   ChangePluginSerialization,
   ChangeRelationshipDataTypeSync,
+  ChangeRelationshipOptimization,
   MoveCanvas,
   MoveColumnOrder,
   MovementCanvas,
@@ -138,6 +139,13 @@ export function executeChangeRelationshipDataTypeSync(
   setting.relationshipDataTypeSync = data.value;
 }
 
+export function executeChangeRelationshipOptimization(
+  { canvasState: { setting } }: State,
+  data: ChangeRelationshipOptimization
+) {
+  setting.relationshipOptimization = data.value;
+}
+
 export function executeMoveColumnOrder(
   {
     canvasState: {
@@ -195,6 +203,8 @@ export const executeCanvasCommandMap: Record<
   'canvas.changeColumnCase': executeChangeColumnCase,
   'canvas.changeRelationshipDataTypeSync':
     executeChangeRelationshipDataTypeSync,
+  'canvas.changeRelationshipOptimization':
+    executeChangeRelationshipOptimization,
   'canvas.moveColumnOrder': executeMoveColumnOrder,
   'canvas.changeHighlightTheme': executeChangeHighlightTheme,
   'canvas.changeBracketType': executeChangeBracketType,

diff --git a/packages/vuerd/src/engine/command/editor.cmd.ts b/packages/vuerd/src/engine/command/editor.cmd.ts
@@ -318,6 +318,12 @@ export function executeLoadJson(state: State, data: LoadJson) {
               canvasState.setting.relationshipDataTypeSync =
                 canvasJson.setting.relationshipDataTypeSync;
             }
+            if (
+              typeof canvasJson.setting.relationshipOptimization === 'boolean'
+            ) {
+              canvasState.setting.relationshipOptimization =
+                canvasJson.setting.relationshipOptimization;
+            }
             if (
               Array.isArray(canvasJson.setting.columnOrder) &&
               canvasJson.setting.columnOrder.length === 7 &&

diff --git a/packages/vuerd/src/engine/command/helper/index.ts b/packages/vuerd/src/engine/command/helper/index.ts
@@ -71,6 +71,7 @@ export const changeCommandTypes: CommandKey[] = [
   'canvas.changeTableCase',
   'canvas.changeColumnCase',
   'canvas.changeRelationshipDataTypeSync',
+  'canvas.changeRelationshipOptimization',
   'canvas.moveColumnOrder',
   'canvas.changeHighlightTheme',
   'canvas.changeBracketType',

diff --git a/packages/vuerd/src/engine/store/canvas.state.ts b/packages/vuerd/src/engine/store/canvas.state.ts
@@ -103,6 +103,7 @@ export const createCanvasState = (): CanvasState => ({
   bracketType: 'none',
   setting: {
     relationshipDataTypeSync: true,
+    relationshipOptimization: false,
     columnOrder: [
       'columnName',
       'columnDataType',

diff --git a/packages/vuerd/types/engine/command/canvas.cmd.d.ts b/packages/vuerd/types/engine/command/canvas.cmd.d.ts
@@ -60,6 +60,10 @@ export interface ChangeRelationshipDataTypeSync {
   value: boolean;
 }
 
+export interface ChangeRelationshipOptimization {
+  value: boolean;
+}
+
 export interface MoveColumnOrder {
   columnType: ColumnType;
   targetColumnType: ColumnType;
@@ -92,6 +96,7 @@ export interface CanvasCommandMap {
   'canvas.changeTableCase': ChangeNameCase;
   'canvas.changeColumnCase': ChangeNameCase;
   'canvas.changeRelationshipDataTypeSync': ChangeRelationshipDataTypeSync;
+  'canvas.changeRelationshipOptimization': ChangeRelationshipOptimization;
   'canvas.moveColumnOrder': MoveColumnOrder;
   'canvas.changeHighlightTheme': ChangeHighlightTheme;
   'canvas.changeBracketType': ChangeBracketType;

diff --git a/packages/vuerd/types/engine/command/canvas.cmd.helper.d.ts b/packages/vuerd/types/engine/command/canvas.cmd.helper.d.ts
@@ -66,6 +66,10 @@ export declare function changeRelationshipDataTypeSync(
   value: boolean
 ): CommandType<'canvas.changeRelationshipDataTypeSync'>;
 
+export declare function changeRelationshipOptimization(
+  value: boolean
+): CommandType<'canvas.changeRelationshipOptimization'>;
+
 export declare function moveColumnOrder(
   columnType: ColumnType,
   targetColumnType: ColumnType

diff --git a/packages/vuerd/types/engine/store/canvas.state.d.ts b/packages/vuerd/types/engine/store/canvas.state.d.ts
@@ -33,6 +33,7 @@ export type ShowKey = keyof Show;
 
 export interface Setting {
   relationshipDataTypeSync: boolean; // ADD: version 1.1.0
+  relationshipOptimization: boolean; // ADD: version 2.2.10
   columnOrder: ColumnType[]; // ADD: version 1.1.1
 }