Have ideas to improve npm?Join in the discussion! »

    @curiousmedia/drag-manager

    1.0.2 • Public • Published

    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

    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

    Install

    npm i @curiousmedia/drag-manager

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar