From 87399eec546546120bfacf32fd77d1cd10f1ae1c Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 12 Sep 2024 10:24:57 -0400 Subject: [PATCH] housekeeping: standardize uiAccess nomenclature, standardize signal component setup --- src/KonvaApp/Engine.ts | 4 ++-- src/KonvaApp/Nodes/VideoNode.ts | 6 ++--- .../ContextualToolbarImage.tsx | 8 +++---- src/KonvaRootComponent/KonvaRootComponent.tsx | 6 ++--- src/KonvaRootComponent/SignaledComponents.tsx | 21 ++++++++++++++++ .../pages/sandbox/ContextualToolbarForm.tsx | 22 ++++++++--------- ...rrorDialogForm.tsx => DialogErrorForm.tsx} | 6 ++--- src/app/pages/sandbox/index.tsx | 8 +++---- src/components/features/DialogError/index.tsx | 24 +++++++++++-------- .../{errorDialogue.ts => dialogueError.ts} | 12 +++++----- src/signals/uiAccess/index.ts | 8 +++---- src/signals/uiAccess/toolbarImage.ts | 12 +++++----- src/signals/uiEvents/index.ts | 8 +++---- 13 files changed, 85 insertions(+), 60 deletions(-) create mode 100644 src/KonvaRootComponent/SignaledComponents.tsx rename src/app/pages/sandbox/{ErrorDialogForm.tsx => DialogErrorForm.tsx} (91%) rename src/signals/uiAccess/{errorDialogue.ts => dialogueError.ts} (59%) diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts index 4774b289f0..83fbb2b992 100644 --- a/src/KonvaApp/Engine.ts +++ b/src/KonvaApp/Engine.ts @@ -59,7 +59,7 @@ export class Engine { }); // TODO: You may listen to all the image toolbar events here - uiEvents.imageToolbar.MOVE.onClick(() => { + uiEvents.toolbarImage.MOVE.onClick(() => { console.log("move"); }); @@ -159,7 +159,7 @@ export class Engine { public initializeStage(sceneToken: string) { // load canvas that was originaly saved TODO Save manager for resharing. - uiAccess.imageToolbar.hide(); + uiAccess.toolbarImage.hide(); uiAccess.loadingBar.hide(); this.setupStage(); } diff --git a/src/KonvaApp/Nodes/VideoNode.ts b/src/KonvaApp/Nodes/VideoNode.ts index 75572995da..3ced42486c 100644 --- a/src/KonvaApp/Nodes/VideoNode.ts +++ b/src/KonvaApp/Nodes/VideoNode.ts @@ -4,7 +4,7 @@ import { NetworkedNodeContext } from "./NetworkedNodeContext"; import { v4 as uuidv4 } from "uuid"; import { uiAccess } from "~/signals"; -const imageToolbar = uiAccess.imageToolbar; +const toolbarImage = uiAccess.toolbarImage; const loadingBar = uiAccess.loadingBar; export class VideoNode extends NetworkedNodeContext { @@ -159,7 +159,7 @@ export class VideoNode extends NetworkedNodeContext { }); this.node.on("mousedown", () => { - imageToolbar.show(); + toolbarImage.show(); this.updateContextMenuPosition(); if (this.didFinishLoading == false) { @@ -194,7 +194,7 @@ export class VideoNode extends NetworkedNodeContext { } updateContextMenuPosition() { - imageToolbar.setPosition({ + toolbarImage.setPosition({ x: this.node.getPosition().x + this.node.getSize().width / 4, y: this.node.getPosition().y - 150, }); diff --git a/src/KonvaRootComponent/ContextualToolbarImage.tsx b/src/KonvaRootComponent/ContextualToolbarImage.tsx index 3ea2137535..8a6c34f43f 100644 --- a/src/KonvaRootComponent/ContextualToolbarImage.tsx +++ b/src/KonvaRootComponent/ContextualToolbarImage.tsx @@ -10,15 +10,15 @@ import { ToolbarImageButtonNames } from "~/components/features/ToolbarImage/enum import { transitionTimingStyles } from "~/components/styles"; export const ContextualToolbarImage = () => { - const { isShowing, position, ...rest } = uiAccess.imageToolbar.signal.value; + const { isShowing, position, ...rest } = uiAccess.toolbarImage.signal.value; const buttonsProps = Object.values(ToolbarImageButtonNames).reduce( (acc, buttonName) => { acc[buttonName] = { - onClick: dispatchUiEvents.imageToolbar[buttonName], + onClick: dispatchUiEvents.toolbarImage[buttonName], disabled: - uiAccess.imageToolbar.signal.value.buttonStates[buttonName].disabled, + uiAccess.toolbarImage.signal.value.buttonStates[buttonName].disabled, active: - uiAccess.imageToolbar.signal.value.buttonStates[buttonName].active, + uiAccess.toolbarImage.signal.value.buttonStates[buttonName].active, }; return acc; }, diff --git a/src/KonvaRootComponent/KonvaRootComponent.tsx b/src/KonvaRootComponent/KonvaRootComponent.tsx index 53dfc6c81b..f3445d7ff9 100644 --- a/src/KonvaRootComponent/KonvaRootComponent.tsx +++ b/src/KonvaRootComponent/KonvaRootComponent.tsx @@ -5,7 +5,7 @@ import { KonvaCanvasContainer } from "./KonvaCanvasContainer"; import { ContextualToolbarImage } from "./ContextualToolbarImage"; import { ContextualLoadingBar } from "./ContextualLoadingBar"; import { SignaledToolbarMain } from "./SignaledToolbarMain"; -import { DialogError } from "~/components/features"; +import { SignaledDialogError } from "./SignaledComponents"; import { EngineType } from "~/KonvaApp"; // The KonvaApp is the root of the Konva stage @@ -33,7 +33,7 @@ export const KonvaRootComponent = ({ className }: { className: string }) => { - - + diff --git a/src/signals/uiAccess/errorDialogue.ts b/src/signals/uiAccess/dialogueError.ts similarity index 59% rename from src/signals/uiAccess/errorDialogue.ts rename to src/signals/uiAccess/dialogueError.ts index 2232787a74..024523e6d5 100644 --- a/src/signals/uiAccess/errorDialogue.ts +++ b/src/signals/uiAccess/dialogueError.ts @@ -5,20 +5,20 @@ const initialState = { title: "", message: "", }; -const errorDialogueSignal = signal(initialState); +const dialogErrorSignal = signal(initialState); -export const errorDialogue = { - signal: errorDialogueSignal, +export const dialogueError = { + signal: dialogErrorSignal, show({ title, message }: { title?: string; message?: string }) { - errorDialogueSignal.value = { - ...errorDialogueSignal.value, + dialogErrorSignal.value = { + ...dialogErrorSignal.value, title: title ?? "Error", message: message ?? "An unknownerror occurred", isShowing: true, }; }, hide() { - errorDialogueSignal.value = initialState; + dialogErrorSignal.value = initialState; }, }; diff --git a/src/signals/uiAccess/index.ts b/src/signals/uiAccess/index.ts index f46f0dedb0..4a40bdbddb 100644 --- a/src/signals/uiAccess/index.ts +++ b/src/signals/uiAccess/index.ts @@ -8,16 +8,16 @@ export type { uiAccessType }; import { buttonTest } from "./buttonTest"; -import { errorDialogue } from "./errorDialogue"; +import { dialogueError } from "./dialogueError"; import { loadingBar } from "./loadingBar"; -import { toolbarImage as imageToolbar } from "./toolbarImage"; +import { toolbarImage } from "./toolbarImage"; import { toolbarVideo } from "./toolbarVideo"; import { toolbarMain } from "./toolbarMain"; export const uiAccess = { buttonTest, - errorDialogue, - imageToolbar, + dialogueError, + toolbarImage, loadingBar, toolbarVideo, toolbarMain, diff --git a/src/signals/uiAccess/toolbarImage.ts b/src/signals/uiAccess/toolbarImage.ts index 21297fd3bc..f365b3dce9 100644 --- a/src/signals/uiAccess/toolbarImage.ts +++ b/src/signals/uiAccess/toolbarImage.ts @@ -2,7 +2,7 @@ import { signal } from "@preact/signals-react"; import { ContextualUi } from "./type"; import { ToolbarImageButtonNames } from "~/components/features/ToolbarImage/enums"; -interface ContextualImageToolbarProps extends ContextualUi { +interface ContextualToolbarImageProps extends ContextualUi { disabled: boolean; buttonStates: { [key in ToolbarImageButtonNames]: { @@ -12,7 +12,7 @@ interface ContextualImageToolbarProps extends ContextualUi { }; } -const toolbarImageSignal = signal({ +const toolbarImageSignal = signal({ position: { x: 0, y: 0, @@ -24,16 +24,16 @@ const toolbarImageSignal = signal({ export const toolbarImage = { signal: toolbarImageSignal, - setup(props: ContextualImageToolbarProps) { + setup(props: ContextualToolbarImageProps) { toolbarImageSignal.value = props; }, - update(props: Partial) { + update(props: Partial) { toolbarImageSignal.value = { ...toolbarImageSignal.value, ...props, }; }, - setPosition(position: ContextualImageToolbarProps["position"]) { + setPosition(position: ContextualToolbarImageProps["position"]) { toolbarImageSignal.value = { ...toolbarImageSignal.value, position, @@ -88,5 +88,5 @@ function initButtonStates() { active: false, }; }); - return ret as ContextualImageToolbarProps["buttonStates"]; + return ret as ContextualToolbarImageProps["buttonStates"]; } diff --git a/src/signals/uiEvents/index.ts b/src/signals/uiEvents/index.ts index 171fc67b05..5b860372d8 100644 --- a/src/signals/uiEvents/index.ts +++ b/src/signals/uiEvents/index.ts @@ -3,8 +3,8 @@ import { events as addMediaEvents, } from "./addMedia"; import { - dispatchers as imageToolbarDispatchers, - eventsHandlers as imageToolbarEvents, + dispatchers as toolbarImageDispatchers, + eventsHandlers as toolbarImageEvents, } from "./toolbarImage"; import { dispatchers as videoToolbarDispatchers, @@ -22,14 +22,14 @@ import { export const uiEvents = { ...addMediaEvents, buttonTest: buttonTestEvent, - imageToolbar: imageToolbarEvents, + toolbarImage: toolbarImageEvents, toolbarMain: toolbarMainEvents, toolbarVideo: videoToolbarEvents, }; export const dispatchUiEvents = { ...addMediaDispatchers, buttonTest: buttonTestDispatcher, - imageToolbar: imageToolbarDispatchers, + toolbarImage: toolbarImageDispatchers, toolbarMain: toolbarMainDispatchers, toolbarVideo: videoToolbarDispatchers, };