diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts index 557b359d6e..bdce96e8b8 100644 --- a/src/KonvaApp/Engine.ts +++ b/src/KonvaApp/Engine.ts @@ -95,7 +95,9 @@ export class Engine { uiAccess.loadingBar.hide(); this.setupStage(); } - + public isInitialized() { + return this.stage !== null; + } public async setupStage() { var textNode = new Konva.Text({ x: 0, diff --git a/src/KonvaApp/index.ts b/src/KonvaApp/index.ts index c48df2faf2..452cf23ac4 100644 --- a/src/KonvaApp/index.ts +++ b/src/KonvaApp/index.ts @@ -1,6 +1,8 @@ // to do fix https://codesandbox.io/p/sandbox/react-konva-infinite-grid-kkndq?file=%2Fsrc%2Findex.js the dotted background doesn't move when draggable. import { Engine } from "./Engine"; +export { Engine as EngineType }; export const KonvaApp = (element: HTMLDivElement) => { const engine = new Engine(element); engine.initializeStage(""); + return engine; }; diff --git a/src/KonvaRootComponent/KonvaRootComponent.tsx b/src/KonvaRootComponent/KonvaRootComponent.tsx index 5757b7dbc3..f2347cc9c5 100644 --- a/src/KonvaRootComponent/KonvaRootComponent.tsx +++ b/src/KonvaRootComponent/KonvaRootComponent.tsx @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { useCallback, useRef } from "react"; import { useRenderCounter } from "~/hooks/useRenderCounter"; import { KonvaCanvasContainer } from "./KonvaCanvasContainer"; @@ -6,6 +6,7 @@ import { ContextualToolbarImage } from "./ContextualToolbarImage"; import { ContextualLoadingBar } from "./ContextualLoadingBar"; import { SignaledToolbarMain } from "./SignaledToolbarMain"; import { ErrorDialog } from "~/components/features"; +import { EngineType } from "~/KonvaApp"; // The KonvaApp is the root of the Konva stage // and only entry point for anything in Konva JS @@ -16,11 +17,14 @@ export const KonvaRootComponent = ({ className }: { className: string }) => { // Let's make sure we only log once useRenderCounter("KonvaRootComponent"); + const engineRef = useRef(null); + const konvaContainerCallbackRef = useCallback((node: HTMLDivElement) => { - if (node !== null) { - KonvaApp(node); + if (node !== null && engineRef.current === null) { + engineRef.current = KonvaApp(node); } }, []); + return ( <> { className={className} // retreive the classNames from the parent for sizing/styling /> +