From b680818b8a3fbb32a0047a94562712c1e75c7d8a Mon Sep 17 00:00:00 2001 From: "Tuan Chau (Tuna)" Date: Sat, 14 Dec 2024 09:29:14 +0900 Subject: [PATCH 01/13] Connect action manager and mouse action buttons --- monosketch-svelte/src/app/app-context.ts | 13 +++++---- .../lib/mono/action-manager/action-manager.ts | 20 ++++++++----- .../src/lib/mono/keycommand/keycommands.ts | 2 +- .../nav/mouseaction/MouseActionButton.svelte | 6 ++-- .../nav/mouseaction/MouseActionGroup.svelte | 29 +++++++++++++++++-- .../src/lib/ui/nav/mouseaction/model.ts | 21 +++++++++++++- 6 files changed, 71 insertions(+), 20 deletions(-) diff --git a/monosketch-svelte/src/app/app-context.ts b/monosketch-svelte/src/app/app-context.ts index ac11a75f9..4c04d5719 100644 --- a/monosketch-svelte/src/app/app-context.ts +++ b/monosketch-svelte/src/app/app-context.ts @@ -16,23 +16,24 @@ export class AppContext { shapeManager = new ShapeManager(); + actionManager = new ActionManager(this.appLifecycleOwner); + onStart = (): void => { this.appLifecycleOwner.onStart(); this.init(); this.appUiStateManager.observeTheme(); + this.actionManager.observeKeyCommand( + this.appUiStateManager.keyCommandFlow.map((keyCommand) => keyCommand.command), + ) }; private init() { - const actionManager = new ActionManager( - this.appLifecycleOwner, - this.appUiStateManager.keyCommandFlow.map((keyCommand) => keyCommand.command), - ); - actionManager.installDebugCommand(); + this.actionManager.installDebugCommand(); const browserManager = new BrowserManager((projectId: string) => { - actionManager.setOneTimeAction(OneTimeAction.ProjectAction.SwitchProject(projectId)); + this.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.SwitchProject(projectId)); }); browserManager.startObserveStateChange( this.shapeManager.rootIdFlow, diff --git a/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts b/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts index ba169d7ac..b9178d130 100644 --- a/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts +++ b/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts @@ -12,11 +12,17 @@ import { type OneTimeActionType, OneTimeAction } from './one-time-actions'; * A class which gathers UI events and converts them into equivalent command. */ export class ActionManager { - private retainableActionFlow: Flow = new Flow(RetainableActionType.IDLE); - private oneTimeActionFlow: Flow = new Flow(OneTimeAction.Idle); + private retainableActionMutableFlow: Flow = new Flow(RetainableActionType.IDLE); + retainableActionFlow = this.retainableActionMutableFlow.distinctUntilChanged(); - constructor(lifecycleOwner: LifecycleOwner, keyCommandFlow: Flow) { - keyCommandFlow.distinctUntilChanged().observe(lifecycleOwner, this.onKeyEvent.bind(this)); + private oneTimeActionMutableFlow: Flow = new Flow(OneTimeAction.Idle); + oneTimeActionFlow = this.oneTimeActionMutableFlow.immutable(); + + constructor(private lifecycleOwner: LifecycleOwner) { + } + + observeKeyCommand(keyCommandFlow: Flow) { + keyCommandFlow.distinctUntilChanged().observe(this.lifecycleOwner, this.onKeyEvent.bind(this)); } private onKeyEvent(keyCommand: KeyCommandType) { @@ -97,12 +103,12 @@ export class ActionManager { } setRetainableAction(actionType: RetainableActionType) { - this.retainableActionFlow.value = actionType; + this.retainableActionMutableFlow.value = actionType; } setOneTimeAction(actionType: OneTimeActionType) { - this.oneTimeActionFlow.value = actionType; - this.oneTimeActionFlow.value = OneTimeAction.Idle; + this.oneTimeActionMutableFlow.value = actionType; + this.oneTimeActionMutableFlow.value = OneTimeAction.Idle; } installDebugCommand() { diff --git a/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts b/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts index 27a978f05..81c16ef87 100644 --- a/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts +++ b/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts @@ -9,7 +9,7 @@ const KeyCommandOptionsDefaults: KeyCommand = { isRepeatable: false, }; -export const KeyCommands: KeyCommand[] = [ +const KeyCommands: KeyCommand[] = [ { ...KeyCommandOptionsDefaults, command: KeyCommandType.IDLE, diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte index e40e09eaa..427c08019 100644 --- a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte +++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte @@ -1,5 +1,5 @@ - + diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte index a3c02f55e..354026cc9 100644 --- a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte +++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte @@ -1,12 +1,37 @@
diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts index fcb61eff5..523d0de66 100644 --- a/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts +++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts @@ -1,3 +1,5 @@ +import { RetainableActionType } from "$mono/action-manager/retainable-actions"; + export enum MouseActionType { SELECTION, ADD_RECTANGLE, @@ -12,22 +14,39 @@ export const mouseActionTypes = [ MouseActionType.ADD_LINE, ]; -export const mouseActionToContentMap = { +interface MouseAction { + retainableActionType: RetainableActionType; + iconPath: string; + title: string; +} + +export const MouseActionToContentMap: Record = { [MouseActionType.SELECTION]: { + retainableActionType: RetainableActionType.IDLE, iconPath: 'M7.436 20.61L7.275 3.914l12.296 11.29-7.165.235-4.97 5.168z', title: 'Select (V)', }, [MouseActionType.ADD_RECTANGLE]: { + retainableActionType: RetainableActionType.ADD_RECTANGLE, iconPath: 'M22 19H2V5h20v14zM4 7v10h16V7z', title: 'Rectangle (R)', }, [MouseActionType.ADD_TEXT]: { + retainableActionType: RetainableActionType.ADD_TEXT, iconPath: 'M5.635 21v-2h12.731v2zm3.27-4v-1.12h2.005V4.12H7.425l-.39.44v2.58h-1.4V3h12.731v4.14h-1.4V4.56l-.39-.44h-3.485v11.76h2.005V17z', title: 'Text (T)', }, [MouseActionType.ADD_LINE]: { + retainableActionType: RetainableActionType.ADD_LINE, iconPath: 'M18 15v-2H6v2H0V9h6v2h12V9h6v6z', title: 'Line (L)', }, }; + +export const RetainableActionTypeToMouseActionTypeMap: Record = { + [RetainableActionType.IDLE]: MouseActionType.SELECTION, + [RetainableActionType.ADD_RECTANGLE]: MouseActionType.ADD_RECTANGLE, + [RetainableActionType.ADD_TEXT]: MouseActionType.ADD_TEXT, + [RetainableActionType.ADD_LINE]: MouseActionType.ADD_LINE, +} From b5542579b9d0be54c6a05d19740b873bb71496be Mon Sep 17 00:00:00 2001 From: "Tuan Chau (Tuna)" Date: Sat, 14 Dec 2024 10:35:04 +0900 Subject: [PATCH 02/13] Fix lint --- monosketch-svelte/src/app/app-context.ts | 2 +- .../src/lib/ui/nav/mouseaction/MouseActionGroup.svelte | 8 ++++---- monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/monosketch-svelte/src/app/app-context.ts b/monosketch-svelte/src/app/app-context.ts index 4c04d5719..99d2ea967 100644 --- a/monosketch-svelte/src/app/app-context.ts +++ b/monosketch-svelte/src/app/app-context.ts @@ -26,7 +26,7 @@ export class AppContext { this.appUiStateManager.observeTheme(); this.actionManager.observeKeyCommand( this.appUiStateManager.keyCommandFlow.map((keyCommand) => keyCommand.command), - ) + ); }; private init() { diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte index 354026cc9..c11bf2c7a 100644 --- a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte +++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte @@ -6,10 +6,10 @@ import { mouseActionTypes, RetainableActionTypeToMouseActionTypeMap } from './model'; -import {getContext, onDestroy, onMount} from "svelte"; -import type {AppContext} from "$app/app-context"; -import {APP_CONTEXT} from "$mono/common/constant"; -import {LifecycleOwner} from "$libs/flow"; +import { getContext, onDestroy, onMount } from "svelte"; +import type { AppContext } from "$app/app-context"; +import { APP_CONTEXT } from "$mono/common/constant"; +import { LifecycleOwner } from "$libs/flow"; let selectedActionType: MouseActionType = MouseActionType.SELECTION; diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts index 523d0de66..eb67774b5 100644 --- a/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts +++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts @@ -49,4 +49,4 @@ export const RetainableActionTypeToMouseActionTypeMap: Record Date: Mon, 16 Dec 2024 11:23:32 +0900 Subject: [PATCH 03/13] Footer --- .../src/lib/ui/pannel/shapetool/Footer.svelte | 44 +++++++++++++++++++ .../lib/ui/pannel/shapetool/ShapeTool.svelte | 10 +---- 2 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte new file mode 100644 index 000000000..fba8e85fd --- /dev/null +++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte @@ -0,0 +1,44 @@ + + + + + + \ No newline at end of file diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte index 6337b8de8..896afecb0 100644 --- a/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte +++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte @@ -7,6 +7,7 @@ import { getContext, onMount } from 'svelte'; import { AppContext } from '$app/app-context'; import { APP_CONTEXT } from '$mono/common/constant'; import { LifecycleOwner } from 'lib/libs/flow'; +import Footer from "./Footer.svelte"; const appContext = getContext(APP_CONTEXT); const lifecycleOwner = new LifecycleOwner(); @@ -30,7 +31,7 @@ onMount(() => {
-
Hello
+