diff --git a/js/draw/app.js b/js/draw/app.js index 669f038..c94fcd0 100644 --- a/js/draw/app.js +++ b/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); }; diff --git a/js/draw/drag.js b/js/draw/drag.js new file mode 100644 index 0000000..6d7807b --- /dev/null +++ b/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); +} diff --git a/js/types/objects.js b/js/types/objects.js index d270ab7..5623d76 100644 --- a/js/types/objects.js +++ b/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];