From b0ca2f2f84f1d329c469f6ed6c17a0b4c6caa480 Mon Sep 17 00:00:00 2001 From: dineug Date: Tue, 9 Nov 2021 19:26:22 +0900 Subject: [PATCH] feat: relationshipOptimization options --- .../src/components/drawer/SettingDrawer.ts | 18 ++++++++++++++++++ .../vuerd/src/components/editor/CanvasSVG.ts | 8 ++++++-- .../src/engine/command/canvas.cmd.helper.ts | 3 +++ .../vuerd/src/engine/command/canvas.cmd.ts | 10 ++++++++++ .../vuerd/src/engine/command/editor.cmd.ts | 6 ++++++ .../vuerd/src/engine/command/helper/index.ts | 1 + .../vuerd/src/engine/store/canvas.state.ts | 1 + .../vuerd/types/engine/command/canvas.cmd.d.ts | 5 +++++ .../engine/command/canvas.cmd.helper.d.ts | 4 ++++ .../vuerd/types/engine/store/canvas.state.d.ts | 1 + 10 files changed, 55 insertions(+), 2 deletions(-) diff --git a/packages/vuerd/src/components/drawer/SettingDrawer.ts b/packages/vuerd/src/components/drawer/SettingDrawer.ts index 3f4fc36c..4c9f00f2 100644 --- 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< /> + + Relationship Optimization + + + + ColumnType Order diff --git a/packages/vuerd/src/components/editor/CanvasSVG.ts b/packages/vuerd/src/components/editor/CanvasSVG.ts index c74d673f..b7b1b53f 100644 --- a/packages/vuerd/src/components/editor/CanvasSVG.ts +++ b/packages/vuerd/src/components/editor/CanvasSVG.ts @@ -115,12 +115,16 @@ const CanvasSVG: FunctionalComponent = ( 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` 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 index 36bfc0cb..1d84e683 100644 --- 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 index 68efc351..7458e7ff 100644 --- 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 index b53531aa..b171f02e 100644 --- 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 index cb159d70..6f5620db 100644 --- 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 index 26b13b99..33c3faed 100644 --- 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 index 8b070610..62ab7faf 100644 --- 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 index 9801f2e3..345b9820 100644 --- 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 }