generate multiple instances of a drag and drop symbol on demand

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

is this an html5 app?

Hi.

One approach would be to add a new symbol instance from Library (using addChild or addChildAt) on top of the selected menu item in a mouse down event handler and then add the drag and drob behavior to this new instance.

Meaning that you'll add the same drag and drop behavior you already have but to a instance that has just been instantiated at runtime.

Please let us know if you need further assistance.

Regards,

JC