improve dragging, add event to window, not to individual box to preve…

…nt lose box

js/draw/app.js

@@ -1,4 +1,5 @@
 import { Application, Container, Culler } from "../pixi.min.mjs";
+import { dragEnd } from "./drag.js";
 import { addScroll } from "./scroll.js";
 
 const pixi = {
@@ -40,6 +41,10 @@ export const createContainer = (app) => {
   });
 
   app.stage.addChild(container);
+  app.stage.eventMode = "static";
+  app.stage.hitArea = app.screen;
+  app.stage.on("pointerup", dragEnd);
+  app.stage.on("pointerupoutside", dragEnd);
   addScroll(app);
 };
 

js/draw/drag.js

@@ -0,0 +1,39 @@
+import { getApp, getContainer } from "./app.js";
+
+let currentObject;
+let prevX, prevY;
+
+export function dragStart(event) {
+  const app = getApp();
+  const container = getContainer();
+
+  prevX = container.toLocal(event.data.global).x;
+  prevY = container.toLocal(event.data.global).y;
+
+  this.zIndex = 2;
+  currentObject = this;
+
+  app.stage.on("pointermove", dragMove, this);
+}
+
+export function dragMove(event) {
+  const container = getContainer();
+
+  const eventX = container.toLocal(event.data.global).x;
+  const eventY = container.toLocal(event.data.global).y;
+
+  const deltaX = eventX - prevX;
+  const deltaY = eventY - prevY;
+
+  this.position.x += deltaX;
+  this.position.y += deltaY;
+
+  prevX = eventX;
+  prevY = eventY;
+}
+
+export function dragEnd() {
+  currentObject.zIndex = 1;
+  const app = getApp();
+  app.stage.off("pointermove", dragMove);
+}

js/types/objects.js

@@ -12,6 +12,7 @@ import {
   addHoverModal,
 } from "../draw/box.js";
 import { textToSVG } from "../lib/generate-svg.js";
+import { dragStart } from "../draw/drag.js";
 
 const IMAGE_MARGIN = 10;
 const IMAGE_SIZE = 40;
@@ -41,43 +42,7 @@ class EDMObject {
     box.cursor = "pointer";
     box.eventMode = "static";
 
-    const container = box.parent;
-
-    box
-      .on(
-        "pointerdown",
-        function (downEvent) {
-          let prevX = container.toLocal(downEvent.data.global).x;
-          let prevY = container.toLocal(downEvent.data.global).y;
-
-          this.on(
-            "pointermove",
-            function (event) {
-              const eventX = container.toLocal(event.data.global).x;
-              const eventY = container.toLocal(event.data.global).y;
-
-              const deltaX = eventX - prevX;
-              const deltaY = eventY - prevY;
-
-              this.position.x += deltaX;
-              this.position.y += deltaY;
-              prevX = eventX;
-              prevY = eventY;
-            },
-            box
-          );
-          this.zIndex = 2;
-        },
-        box
-      )
-      .on(
-        "pointerup",
-        function () {
-          this.off("pointermove");
-          this.zIndex = 1;
-        },
-        box
-      );
+    box.on("pointerdown", dragStart, box);
 
     addHoverModal(box, this.objectModalLines());
     return [box, nextY];