use stage.setWindow when creating a popout window to re-create event listeners

Author: RajRai

src/App.jsx

@@ -4,11 +4,18 @@ import { Stage, Layer, Rect, Circle } from 'react-konva';
 import 'dockview/dist/styles/dockview.css';
 
 // Canvas component with Konva shapes
-const CanvasView = ({ panel }) => {
+const CanvasView = (panel) => {
     const containerRef = useRef(null);
+    const stageRef = useRef(null);
     const [size, setSize] = useState({ width: 400, height: 400 });
 
     useEffect(() => {
+        panel.api.onDidLocationChange(({location}) => {
+            if (location.type === 'popout'){
+                stageRef.current?.setWindow(location?.getWindow());
+            }
+        })
+
         if (containerRef.current) {
             const resize = () => {
                 const { clientWidth, clientHeight } = containerRef.current;
@@ -31,6 +38,7 @@ const CanvasView = ({ panel }) => {
                 draggable
                 onDragStart={() => setDragging(true)}
                 onDragEnd={() => setDragging(false)}
+                ref={stageRef}
             >
                 <Layer>
                     <Rect x={100} y={100} width={300} height={150} fill="blue" cornerRadius={10} />
@@ -61,7 +69,7 @@ export const RightControls = (props) => {
         return () => {
             disposable.dispose();
         };
-    }, [props.containerApi]);
+    }, [props.api, props.containerApi]);
 
     const onClickPopout = () => {
         if (props.api.location.type !== 'popout') {