@curiousmedia/drag-manager

DragManager

A controller for handling "Click & Stick" or "Drag & Drop" functionality for PBS games

Callback functions when start drag and end drag of a DisplayObject happen

DragManager

Also see examples folder:

import DragManager from '@curiousmedia/drag-manager';

// CreateJS Stage
const stage = new createjs.Stage(document.querySelector('canvas'));

// Stage update
createjs.Ticker.framerate = 60;
createjs.Ticker.addEventListener("tick", stage);

// Start callback function when we start the drag
function startDrag(event) {
    // Get the selected DisplayObject
    let target = event.selected;
    // OR
    let dragObject = dragManager.selected;

    // Do things with the selected DisplayObject
}

// End callback function when we end the drag
function endDrag(event) {
    // Get the selected DisplayObject
    let target = event.selected;
    // OR
    let dragObject = dragManager.selected;

    // Do things with the selected DisplayObject
}

// DragManager instance
const dragManager = new DragManager(stage, startDrag, endDrag);

// Create Display Object
let circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 250;
circle.y = 250;
stage.addChild(circle);

// Add DisplayObjects to be controlled by the DragManager
dragManager.add(
    circle
);

// Turn on the events for the stage and DragManager's children
    dragManager.setActive(true);

new DragManager(stage, startCallback, endCallback)

Constructor

Param	Type	Description
stage	`Createjs.Stage`	Our CreateJS Stage for events
startCallback	`function`	Callback function to trigger on the initial mousedown of a drag object
endCallback	`function`	Callback function to trigger when a drag or click/stick has finished

dragManager.setActive(active)

Set the events of this DragManager active or not

Param	Type	Description
active	`Bool`	True enables events / False disables events

dragManager.addEventsToObject(display)

Add the DragManager events to the DisplayObject

Param	Type	Description
display	`createjs.DisplayObject`	DisplayObject to add events to

dragManager.removeEventsFromObject(display)

Remove the DragManager events from the DisplayObject

Param	Type	Description
display	`createjs.DisplayObject`	DisplayObject to remove events from

dragManager.startDrag(display)

Manually start dragging an object

Param	Type	Description
display	`createjs.DisplayObject`	The DisplayObject to start dragging

dragManager.stopDrag()

Manually stop dragging our current object

dragManager.handleMouseDown(event)

Handle the mousedown event on the drag objects

Param	Type	Description
event	`Event`	'mousedown' event

dragManager.handleStageMouseMove(event)

Handle the stagemousemove Event

Param	Type	Description
event	`Event`	'stagemousemove' event

dragManager.handleStageMouseUp(event)

Handle the stagemouseup event Determine if we have dragged or if we need to set click and stick

Param	Type	Description
event	`Event`	'stagemouseup' event

dragManager.distanceTo(a, b) ⇒ `Number`

Get the distance between two points/vectors/objects with an "x" and "y" property

Returns: Number - - The distance between the Vectors

Param	Type	Description
a	`Point/Object`	{x: 0, y: 0}
b	`Point/Object`	{x: 0, y: 0}

dragManager.add(...displayObject)

Add an object to be managed by this DragManager

Param	Type	Description
...displayObject	`createjs.DisplayObject`	one ore more createjs.DisplayObject

dragManager.remove(...displayObjects)

Remove an object from this DragManager

Param	Type	Description
...displayObjects	`createjs.DisplayObject`	one ore more createjs.DisplayObject

dragManager.clear()

Clear out all our drag objects and events from this DragManager