diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d32267f1b..53bc9f38a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,7 +1,8 @@ import React from "react"; import { DrawerContent, GuiState } from "@framework/GuiMessageBroker"; -import { LayoutElement, Workbench } from "@framework/Workbench"; +import { LayoutElement } from "@framework/ModuleInstanceManager"; +import { Workbench } from "@framework/Workbench"; import { NavBar } from "@framework/internal/components/NavBar"; import { SettingsContentPanels } from "@framework/internal/components/SettingsContentPanels"; import { useQueryClient } from "@tanstack/react-query"; @@ -20,7 +21,7 @@ function App() { workbench.current.getModuleInstanceManager().makeLayout(layout); } - if (workbench.current.getLayout().length === 0) { + if (workbench.current.getModuleInstanceManager().getLayout().length === 0) { workbench.current.getGuiMessageBroker().setState(GuiState.DrawerContent, DrawerContent.ModulesList); } diff --git a/frontend/src/framework/LayoutService.ts b/frontend/src/framework/ModuleInstanceManager.ts similarity index 100% rename from frontend/src/framework/LayoutService.ts rename to frontend/src/framework/ModuleInstanceManager.ts diff --git a/frontend/src/framework/TemplateRegistry.ts b/frontend/src/framework/TemplateRegistry.ts index 8cb7890b0..e426a7ff8 100644 --- a/frontend/src/framework/TemplateRegistry.ts +++ b/frontend/src/framework/TemplateRegistry.ts @@ -1,5 +1,5 @@ import { BroadcastChannelKeyCategory } from "./Broadcaster"; -import { LayoutElement } from "./LayoutService"; +import { LayoutElement } from "./ModuleInstanceManager"; import { SyncSettingKey } from "./SyncSettings"; export type DataChannelTemplate = { diff --git a/frontend/src/framework/Workbench.ts b/frontend/src/framework/Workbench.ts index 07c8a0a9f..05428a1bd 100644 --- a/frontend/src/framework/Workbench.ts +++ b/frontend/src/framework/Workbench.ts @@ -3,7 +3,7 @@ import { QueryClient } from "@tanstack/react-query"; import { Broadcaster } from "./Broadcaster"; import { EnsembleIdent } from "./EnsembleIdent"; import { GuiMessageBroker } from "./GuiMessageBroker"; -import { ModuleInstanceManager } from "./LayoutService"; +import { ModuleInstanceManager } from "./ModuleInstanceManager"; import { WorkbenchServices } from "./WorkbenchServices"; import { WorkbenchSession } from "./WorkbenchSession"; import { loadEnsembleSetMetadataFromBackend } from "./internal/EnsembleSetLoader"; diff --git a/frontend/src/framework/internal/components/Content/private-components/layout.tsx b/frontend/src/framework/internal/components/Content/private-components/layout.tsx index ac366d291..ba2ab03a8 100644 --- a/frontend/src/framework/internal/components/Content/private-components/layout.tsx +++ b/frontend/src/framework/internal/components/Content/private-components/layout.tsx @@ -1,7 +1,8 @@ import React from "react"; import { GuiEvent, GuiEventPayloads } from "@framework/GuiMessageBroker"; -import { LayoutElement, Workbench } from "@framework/Workbench"; +import { LayoutElement } from "@framework/ModuleInstanceManager"; +import { Workbench } from "@framework/Workbench"; import { useModuleInstances } from "@framework/internal/hooks/workbenchHooks"; import { useElementSize } from "@lib/hooks/useElementSize"; import { @@ -37,9 +38,11 @@ export const Layout: React.FC = (props) => { const mainRef = React.useRef(null); const size = useElementSize(ref); const layoutBoxRef = React.useRef(null); - const moduleInstances = useModuleInstances(props.workbench); + const moduleInstanceManager = props.workbench.getModuleInstanceManager(); const guiMessageBroker = props.workbench.getGuiMessageBroker(); + const moduleInstances = useModuleInstances(moduleInstanceManager); + const convertLayoutRectToRealRect = React.useCallback( (element: LayoutElement): Rect => { return { @@ -61,9 +64,9 @@ export const Layout: React.FC = (props) => { let dragging = false; let moduleInstanceId: string | null = null; let moduleName: string | null = null; - setLayout(layoutService.getLayout()); - let originalLayout: LayoutElement[] = layoutService.getLayout(); - let currentLayout: LayoutElement[] = layoutService.getLayout(); + setLayout(moduleInstanceManager.getLayout()); + let originalLayout: LayoutElement[] = moduleInstanceManager.getLayout(); + let currentLayout: LayoutElement[] = moduleInstanceManager.getLayout(); let originalLayoutBox = makeLayoutBoxes(originalLayout); let currentLayoutBox = originalLayoutBox; layoutBoxRef.current = currentLayoutBox; @@ -119,7 +122,7 @@ export const Layout: React.FC = (props) => { if (isNewModule && moduleName) { const layoutElement = currentLayout.find((el) => el.moduleInstanceId === pointerDownElementId); if (layoutElement) { - const instance = layoutService.makeAndAddModuleInstance(moduleName, layoutElement); + const instance = moduleInstanceManager.makeAndAddModuleInstance(moduleName, layoutElement); layoutElement.moduleInstanceId = instance.getId(); layoutElement.moduleName = instance.getName(); } @@ -132,7 +135,7 @@ export const Layout: React.FC = (props) => { originalLayoutBox = currentLayoutBox; layoutBoxRef.current = currentLayoutBox; setLayout(currentLayout); - layoutService.setLayout(currentLayout); + moduleInstanceManager.setLayout(currentLayout); setPosition({ x: 0, y: 0 }); setPointer({ x: -1, y: -1 }); e.stopPropagation(); @@ -228,13 +231,13 @@ export const Layout: React.FC = (props) => { if (dragging) { return; } - layoutService.removeModuleInstance(e.moduleInstanceId); - currentLayoutBox.removeLayoutElement(e.moduleInstanceId); + moduleInstanceManager.removeModuleInstance(payload.moduleInstanceId); + currentLayoutBox.removeLayoutElement(payload.moduleInstanceId); currentLayout = currentLayoutBox.toLayout(); setLayout(currentLayout); originalLayout = currentLayout; originalLayoutBox = currentLayoutBox; - layoutService.setLayout(currentLayout); + moduleInstanceManager.setLayout(currentLayout); }; const removeModuleHeaderPointerDownSubscriber = guiMessageBroker.subscribeToEvent( diff --git a/frontend/src/framework/internal/components/Content/private-components/layoutBox.tsx b/frontend/src/framework/internal/components/Content/private-components/layoutBox.tsx index c06fa0201..75b260c4e 100644 --- a/frontend/src/framework/internal/components/Content/private-components/layoutBox.tsx +++ b/frontend/src/framework/internal/components/Content/private-components/layoutBox.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { LayoutElement } from "@framework/LayoutService"; +import { LayoutElement } from "@framework/ModuleInstanceManager"; import { Point, Rect, Size, outerRectContainsInnerRect, rectContainsPoint, rectsAreEqual } from "@lib/utils/geometry"; function layoutElementToRect(layoutElement: LayoutElement): Rect { diff --git a/frontend/src/framework/internal/components/NavBar/navBar.tsx b/frontend/src/framework/internal/components/NavBar/navBar.tsx index 140ce25ad..92a446d87 100644 --- a/frontend/src/framework/internal/components/NavBar/navBar.tsx +++ b/frontend/src/framework/internal/components/NavBar/navBar.tsx @@ -3,7 +3,7 @@ import React from "react"; import WebvizLogo from "@assets/webviz.svg"; import { EnsembleIdent } from "@framework/EnsembleIdent"; import { DrawerContent, GuiState, useGuiState } from "@framework/GuiMessageBroker"; -import { ModuleInstanceEvents } from "@framework/LayoutService"; +import { ModuleInstanceEvents } from "@framework/ModuleInstanceManager"; import { Workbench } from "@framework/Workbench"; import { useEnsembleSet } from "@framework/WorkbenchSession"; import { LoginButton } from "@framework/internal/components/LoginButton"; diff --git a/frontend/src/framework/internal/hooks/workbenchHooks.ts b/frontend/src/framework/internal/hooks/workbenchHooks.ts index 99bd97612..66403fcf6 100644 --- a/frontend/src/framework/internal/hooks/workbenchHooks.ts +++ b/frontend/src/framework/internal/hooks/workbenchHooks.ts @@ -1,17 +1,17 @@ import React from "react"; -import { ModuleInstanceEvents, ModuleInstanceManager } from "@framework/LayoutService"; import { ModuleInstance } from "@framework/ModuleInstance"; +import { ModuleInstanceEvents, ModuleInstanceManager } from "@framework/ModuleInstanceManager"; -export function useModuleInstances(layoutService: ModuleInstanceManager): ModuleInstance[] { +export function useModuleInstances(moduleInstanceManager: ModuleInstanceManager): ModuleInstance[] { const [moduleInstances, setModuleInstances] = React.useState[]>([]); React.useEffect(() => { function handleModuleInstancesChange() { - setModuleInstances(layoutService.getModuleInstances()); + setModuleInstances(moduleInstanceManager.getModuleInstances()); } - const unsubscribeFunc = layoutService.subscribe( + const unsubscribeFunc = moduleInstanceManager.subscribe( ModuleInstanceEvents.ModuleInstancesChanged, handleModuleInstancesChange );