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