improved drag and drop

src/dragAndDrop.js

@@ -1,9 +1,40 @@
+let appt = { app: undefined };
+
 function onDragMove(node, event, shift = { x: 0, y: 0 }) {
     // shift is a tuple representing the shift between the coords of the node and the pointer
     const dragPoint = event.global;
     dragPoint.x -= shift.x;
     dragPoint.y -= shift.y;
-    node.parent.toLocal(dragPoint, null, node.position);
+    const parent = node.parent;
+    const newPos = parent.toLocal(dragPoint);
+    if (newPos.x < 0) {
+        newPos.x = 0;
+    } else {
+        const right =
+            parent.layout?.computedLayout.width -
+            node.layout?.computedLayout.width;
+        console.log(
+            node.x,
+            right,
+            parent.width,
+            node.layout?.computedLayout.width,
+        );
+        if (newPos.x > right) {
+            newPos.x = right;
+        }
+    }
+    if (newPos.y < 0) {
+        newPos.y = 0;
+    } else {
+        const bottom =
+            parent.layout?.computedLayout.height -
+            node.layout?.computedLayout.height;
+        if (newPos.y > bottom) {
+            newPos.y = bottom;
+        }
+    }
+
+    node.position = newPos;
 }
 
 function onDragEnd(node, onDrop) {
@@ -36,4 +67,4 @@ function makeDragable(node, onDrop = () => {}) {
     });
 }
 
-export { makeDragable };
+export { makeDragable, appt };

src/main.js

@@ -1,10 +1,10 @@
 import "@pixi/layout";
 import { Application, Assets, Container, Sprite } from "pixi.js";
 
-import { makeDragable } from "./dragAndDrop.js";
+import { makeDragable, appt } from "./dragAndDrop.js";
 const app = new Application();
 let root = new Container();
-
+appt.app = app;
 const backgroundLayout = {
     width: "100%",
     height: "100%",
@@ -16,15 +16,17 @@ async function setup() {
     await app.init({ background: "#1099bb", resizeTo: window });
 
     root = app.stage;
-    root.layout = {
-        width: app.screen.width,
-        height: app.screen.height,
-    };
-    app.renderer.on("resize", () => {
+    const setRootLayout = () => {
         root.layout = {
             width: app.screen.width,
             height: app.screen.height,
+            maxWidth: app.screen.width,
+            maxHeight: app.screen.height,
         };
+    };
+    setRootLayout();
+    app.renderer.on("resize", () => {
+        setRootLayout();
     });
     document.body.appendChild(app.canvas);
 }
@@ -176,6 +178,9 @@ function switchToGame(gameContainer, newGame) {
         position: "absolute",
         width: "100%",
         height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        margin: 0,
     };
     //const opinator = new Opinator(gameContainter);
     const fridge = new Fridge(gameContainter);