Hi again!
Thank you very much for the compliments! And, yeah, they also add a whole new dimension to wrtiting code while we hold them in our arms! 😄
Just added a v2. Hopefully it will address the remaining requested features.
Preview:
https://bit.ly/40gGNOO
JavaScript code:
const root = this;
const SPACE_KEY = "Space";
let keys, spawnedItem;
function main()
{
createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
keys = {};
root.stop();
root.map.minZoom = 1;
root.map.maxZoom = 3;
root.map.zoomStep = 0.05;
root.menu.children.forEach(child => child.mouseChildren = false);
root.menu.on("mousedown", menuDown);
root.menu.on("pressmove", menuMove);
root.menu.on("pressup", menuUp);
root.map.on("mousedown", mapItemDown);
root.map.on("pressmove", mapItemMove);
root.map.on("pressup", mapUp);
root.mapRec.on("mousedown", mapDown);
root.mapRec.on("pressmove", mapMove);
root.clearAllButton.on("click", clearMap);
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);
canvas.addEventListener('mousewheel', onMouseWheel);
canvas.addEventListener('DOMMouseScroll', onMouseWheel);
}
function menuDown(e)
{
spawnedItem = new e.target.constructor();
spawnedItem.x = e.currentTarget.x + e.target.x;
spawnedItem.y = e.currentTarget.y + e.target.y;
spawnedItem.mouseChildren = false;
root.addChild(spawnedItem);
setDrag(spawnedItem);
}
function menuMove()
{
drag(spawnedItem);
}
function menuUp(e)
{
const dropPoint = { x: spawnedItem.x, y: spawnedItem.y };
if (root.mapRec.hitTest(dropPoint.x - root.mapRec.x, dropPoint.y - root.mapRec.y))
{
let localPos;
root.map.addChild(spawnedItem);
localPos = root.map.globalToLocal(dropPoint.x * stage.scaleX, dropPoint.y * stage.scaleY);
spawnedItem.x = localPos.x;
spawnedItem.y = localPos.y;
spawnedItem.fromMenu = true;
}
else
root.removeChild(spawnedItem);
spawnedItem = null;
}
function mapItemDown(e)
{
if (keys[SPACE_KEY])
setDrag(e.currentTarget);
else
{
if (e.target.fromMenu)
setDrag(e.target);
}
}
function mapItemMove(e)
{
if (keys[SPACE_KEY])
drag(e.currentTarget);
else
{
if (e.target.fromMenu)
drag(e.target);
}
}
function mapDown(e)
{
if (keys[SPACE_KEY])
setDrag(root.map);
}
function mapMove(e)
{
if (keys[SPACE_KEY])
drag(root.map);
}
function mapUp(e)
{
const pos = e.target.localToLocal(0, 0, root.mapRec);
if (!keys[SPACE_KEY] && !root.mapRec.hitTest(pos.x, pos.y))
{
e.target.parent.removeChild(e.target);
e.target = null;
}
}
function onKeyDown(e)
{
keys[e.code] = true;
}
function onKeyUp(e)
{
delete keys[e.code];
}
function onMouseWheel(e)
{
const evt = window.event || e;
const mouseWheelDelta = clamp(-1, evt.wheelDelta || -evt.detail, 1);
const localCursorPosBefore = root.map.globalToLocal(stage.mouseX, stage.mouseY);
let localCursorPosAfter;
root.map.regX = localCursorPosBefore.x;
root.map.regY = localCursorPosBefore.y;
localCursorPosAfter = root.map.globalToLocal(stage.mouseX, stage.mouseY);
root.map.x += (localCursorPosAfter.x - localCursorPosBefore.x) * root.map.scaleX;
root.map.y += (localCursorPosAfter.y - localCursorPosBefore.y) * root.map.scaleY;
root.map.scale = clamp(root.map.minZoom, root.map.scale + mouseWheelDelta * root.map.zoomStep, root.map.maxZoom);
}
function clearMap(e)
{
let i, child;
for (i = root.map.numChildren - 1; i > -1; i--)
{
child = root.map.children[i];
if (child.fromMenu)
{
child.parent.removeChild(child);
child = null;
}
}
}
function setDrag(target)
{
const pos = target.parent.globalToLocal(stage.mouseX, stage.mouseY);
target.offset =
{
x: pos.x - target.x,
y: pos.y - target.y
};
}
function drag(target)
{
const pos = target.parent.globalToLocal(stage.mouseX, stage.mouseY);
target.x = pos.x - target.offset.x;
target.y = pos.y - target.offset.y;
}
function clamp(min, value, max)
{
if (value < min)
return min;
if (value > max)
return max;
return value;
}
main();
Download / source / files: https://bit.ly/3W9A6wy
... View more
AdChoices