@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
  • Usage
  • new DragManager(stage, startCallback, endCallback)
  • .setActive(active)
  • .addEventsToObject(display)
  • .removeEventsFromObject(display)
  • .startDrag(display)
  • .stopDrag()
  • .handleMouseDown(event)
  • .handleStageMouseMove(event)
  • .handleStageMouseUp(event)
  • .distanceTo(a, b) ⇒ Number
  • .add(...displayObject)
  • .remove(...displayObjects)
  • .clear()

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