melonjs 10.3.0 → 10.5.1

package/src/renderable/container.js

@@ -19,19 +19,14 @@ var globalFloatingCounter = 0;
 /**
  * @classdesc
  * me.Container represents a collection of child objects
- * @class Container
- * @augments me.Renderable
- * @memberof me
- * @param {number} [x=0] position of the container (accessible via the inherited pos.x property)
- * @param {number} [y=0] position of the container (accessible via the inherited pos.y property)
- * @param {number} [w=me.game.viewport.width] width of the container
- * @param {number} [h=me.game.viewport.height] height of the container
+ * @augments Renderable
  */
-
 class Container extends Renderable {
-
     /**
-     * @ignore
+     * @param {number} [x=0] position of the container (accessible via the inherited pos.x property)
+     * @param {number} [y=0] position of the container (accessible via the inherited pos.y property)
+     * @param {number} [width=game.viewport.width] width of the container
+     * @param {number} [height=game.viewport.height] height of the container
      */
     constructor(x = 0, y = 0, width = game.viewport.width, height = game.viewport.height, root = false) {
 
@@ -50,7 +45,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name root
-         * @memberof me.Container
+         * @memberof Container
          */
         this.root = root;
 
@@ -67,7 +62,7 @@ class Container extends Renderable {
          * @type {string}
          * @default me.game.sortOn
          * @name sortOn
-         * @memberof me.Container
+         * @memberof Container
          */
         this.sortOn = game.sortOn;
 
@@ -77,7 +72,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default true
          * @name autoSort
-         * @memberof me.Container
+         * @memberof Container
          */
         this.autoSort = true;
 
@@ -87,7 +82,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default true
          * @name autoDepth
-         * @memberof me.Container
+         * @memberof Container
          */
         this.autoDepth = true;
 
@@ -97,14 +92,14 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name clipping
-         * @memberof me.Container
+         * @memberof Container
          */
         this.clipping = false;
 
         /**
          * a callback to be extended, triggered after a child has been added or removed
          * @name onChildChange
-         * @memberof me.Container#
+         * @memberof Container#
          * @function
          * @param {number} index added or removed child index
          */
@@ -120,10 +115,23 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name enableChildBoundsUpdate
-         * @memberof me.Container
+         * @memberof Container
          */
         this.enableChildBoundsUpdate = false;
 
+        /**
+         * define a background color for this container
+         * @public
+         * @type {Color}
+         * @name backgroundColor
+         * @default (0, 0, 0, 0.0)
+         * @memberof Container
+         * @example
+         * // add a red background color to this container
+         * this.backgroundColor.setColor(255, 0, 0);
+         */
+        this.backgroundColor = pool.pull("Color", 0, 0, 0, 0.0);
+
         /**
          * Used by the debug panel plugin
          * @ignore
@@ -148,7 +156,7 @@ class Container extends Renderable {
     /**
      * reset the container, removing all childrens, and reseting transforms.
      * @name reset
-     * @memberof me.Container
+     * @memberof Container
      * @function
      */
     reset() {
@@ -171,6 +179,8 @@ class Container extends Renderable {
             // just reset some variables
             this.currentTransform.identity();
         }
+
+        this.backgroundColor.setColor(0, 0, 0, 0.0);
     }
 
     /**
@@ -182,11 +192,11 @@ class Container extends Renderable {
      * orginal container.  Then when the me.game.world.reset() is called the renderable
      * will not be in any container.
      * @name addChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {number} [z] forces the z index of the child to the specified value
-     * @returns {me.Renderable} the added child
+     * @returns {Renderable} the added child
      */
     addChild(child, z) {
         if (child.ancestor instanceof Container) {
@@ -246,11 +256,11 @@ class Container extends Renderable {
      * Add a child to the container at the specified index<br>
      * (the list won't be sorted after insertion)
      * @name addChildAt
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {number} index
-     * @returns {me.Renderable} the added child
+     * @returns {Renderable} the added child
      */
     addChildAt(child, index) {
         if (index >= 0 && index < this.getChildren().length) {
@@ -305,7 +315,7 @@ class Container extends Renderable {
      *    - The index of element in the array. <br>
      *    - The array forEach() was called upon. <br>
      * @name forEach
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {Function} callback fnction to execute on each element
      * @param {object} [thisArg] value to use as this(i.e reference Object) when executing callback.
@@ -342,10 +352,10 @@ class Container extends Renderable {
     /**
      * Swaps the position (z-index) of 2 children
      * @name swapChildren
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
-     * @param {me.Renderable} child2
+     * @param {Renderable} child
+     * @param {Renderable} child2
      */
     swapChildren(child, child2) {
         var index = this.getChildIndex(child);
@@ -368,10 +378,10 @@ class Container extends Renderable {
     /**
      * Returns the Child at the specified index
      * @name getChildAt
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {number} index
-     * @returns {me.Renderable} the child at the specified index
+     * @returns {Renderable} the child at the specified index
      */
     getChildAt(index) {
         if (index >= 0 && index < this.getChildren().length) {
@@ -385,9 +395,9 @@ class Container extends Renderable {
     /**
      * Returns the index of the given Child
      * @name getChildIndex
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @returns {number} index
      */
     getChildIndex(child) {
@@ -397,10 +407,10 @@ class Container extends Renderable {
     /**
      * Returns the next child within the container or undefined if none
      * @name getNextChild
-     * @memberof me.Container
+     * @memberof Container
      * @function
-     * @param {me.Renderable} child
-     * @returns {me.Renderable} child
+     * @param {Renderable} child
+     * @returns {Renderable} child
      */
     getNextChild(child) {
         var index = this.getChildren().indexOf(child) - 1;
@@ -413,9 +423,9 @@ class Container extends Renderable {
     /**
      * Returns true if contains the specified Child
      * @name hasChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @returns {boolean}
      */
     hasChild(child) {
@@ -427,12 +437,12 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object tree each time
      * @name getChildByProp
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string} prop Property name
      * @param {string|RegExp|number|boolean} value Value of the property
-     * @returns {me.Renderable[]} Array of childs
+     * @returns {Renderable[]} Array of childs
      * @example
      * // get the first child object called "mainPlayer" in a specific container :
      * var ent = myContainer.getChildByProp("name", "mainPlayer");
@@ -479,11 +489,11 @@ class Container extends Renderable {
     /**
      * returns the list of childs with the specified class type
      * @name getChildByType
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {object} classType
-     * @returns {me.Renderable[]} Array of children
+     * @returns {Renderable[]} Array of children
      */
     getChildByType(classType) {
         var objList = [];
@@ -506,11 +516,11 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
      * @name getChildByName
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string|RegExp|number|boolean} name child name
-     * @returns {me.Renderable[]} Array of children
+     * @returns {Renderable[]} Array of children
      */
     getChildByName(name) {
         return this.getChildByProp("name", name);
@@ -521,11 +531,11 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
      * @name getChildByGUID
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string|RegExp|number|boolean} guid child GUID
-     * @returns {me.Renderable} corresponding child or null
+     * @returns {Renderable} corresponding child or null
      */
     getChildByGUID(guid) {
         var obj = this.getChildByProp("GUID", guid);
@@ -535,10 +545,10 @@ class Container extends Renderable {
     /**
      * return all child in this container
      * @name getChildren
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
-     * @returns {me.Renderable[]} an array of renderable object
+     * @returns {Renderable[]} an array of renderable object
      */
     getChildren() {
         if (typeof this.children === "undefined") {
@@ -551,9 +561,9 @@ class Container extends Renderable {
      * update the bounding box for this shape.
      * @ignore
      * @name updateBounds
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @returns {me.Bounds} this shape bounding box Rectangle object
+     * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds(forceUpdateChildBounds = false) {
 
@@ -580,7 +590,7 @@ class Container extends Renderable {
      * Checks if this container is root or if it's attached to the root container.
      * @private
      * @name isAttachedToRoot
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @returns {boolean}
      */
@@ -603,7 +613,7 @@ class Container extends Renderable {
      * update the cointainer's bounding rect (private)
      * @ignore
      * @name updateBoundsPos
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      */
     updateBoundsPos(newX, newY) {
@@ -638,10 +648,10 @@ class Container extends Renderable {
     /**
      * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed
      * @name removeChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {boolean} [keepalive=False] True to prevent calling child.destroy()
      */
     removeChild(child, keepalive) {
@@ -656,11 +666,11 @@ class Container extends Renderable {
     /**
      * Removes (and optionally destroys) a child from the container.<br>
      * (removal is immediate and unconditional)<br>
-     * Never use keepalive=true with objects from {@link me.pool}. Doing so will create a memory leak.
+     * Never use keepalive=true with objects from {@link pool}. Doing so will create a memory leak.
      * @name removeChildNow
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {boolean} [keepalive=False] True to prevent calling child.destroy()
      */
     removeChildNow(child, keepalive) {
@@ -711,7 +721,7 @@ class Container extends Renderable {
     /**
      * Automatically set the specified property of all childs to the given value
      * @name setChildsProperty
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {string} prop property name
      * @param {object} value property value
@@ -729,9 +739,9 @@ class Container extends Renderable {
     /**
      * Move the child in the group one step forward (z depth).
      * @name moveUp
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveUp(child) {
         var childIndex = this.getChildIndex(child);
@@ -744,9 +754,9 @@ class Container extends Renderable {
     /**
      * Move the child in the group one step backward (z depth).
      * @name moveDown
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveDown(child) {
         var childIndex = this.getChildIndex(child);
@@ -759,9 +769,9 @@ class Container extends Renderable {
     /**
      * Move the specified child to the top(z depth).
      * @name moveToTop
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveToTop(child) {
         var childIndex = this.getChildIndex(child);
@@ -777,9 +787,9 @@ class Container extends Renderable {
     /**
      * Move the specified child the bottom (z depth).
      * @name moveToBottom
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveToBottom(child) {
         var childIndex = this.getChildIndex(child);
@@ -795,7 +805,7 @@ class Container extends Renderable {
     /**
      * Manually trigger the sort of all the childs in the container</p>
      * @name sort
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {boolean} [recursive=false] recursively sort all containers if true
@@ -888,9 +898,9 @@ class Container extends Renderable {
 
     /**
      * container update function. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name update
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
@@ -941,13 +951,13 @@ class Container extends Renderable {
 
     /**
      * draw the container. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
-     * @param {me.Rect|me.Bounds} [rect] the area or viewport to (re)draw
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {Rect|Bounds} [rect] the area or viewport to (re)draw
      */
     draw(renderer, rect) {
         var isFloating = false;
@@ -968,6 +978,11 @@ class Container extends Renderable {
         // adjust position if required (e.g. canvas/window centering)
         renderer.translate(this.pos.x, this.pos.y);
 
+        // color background if defined
+        if (this.backgroundColor.alpha > 1 / 255) {
+            renderer.clearColor(this.backgroundColor);
+        }
+
         var children = this.getChildren();
         for (var i = children.length, obj; i--, (obj = children[i]);) {
             if (obj.isRenderable) {

package/src/renderable/dragndrop.js

@@ -0,0 +1,224 @@
+import Vector2d from "./../math/vector2.js";
+import * as input from "./../input/input.js";
+import * as event from "./../system/event.js";
+import Renderable from "./../renderable/renderable.js";
+
+/**
+ * @classdesc
+ * A Draggable base object
+ * @see DropTarget
+ * @augments Renderable
+ */
+export class Draggable extends Renderable {
+    /**
+     * @param {number} x the x coordinates of the draggable object
+     * @param {number} y the y coordinates of the draggable object
+     * @param {number} width draggable object width
+     * @param {number} height draggable object height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+        this.isKinematic = false;
+        this.dragging = false;
+        this.dragId = null;
+        this.grabOffset = new Vector2d(0, 0);
+        this.initEvents();
+    }
+
+    /**
+     * Initializes the events the modules needs to listen to
+     * It translates the pointer events to me.events
+     * in order to make them pass through the system and to make
+     * this module testable. Then we subscribe this module to the
+     * transformed events.
+     * @name initEvents
+     * @memberof Draggable
+     * @function
+     * @private
+     */
+    initEvents() {
+        input.registerPointerEvent("pointerdown", this, (e) => { event.emit(event.DRAGSTART, e, this); });
+        input.registerPointerEvent("pointerup", this,  (e) => { event.emit(event.DRAGEND, e, this); });
+        input.registerPointerEvent("pointercancel", this, (e) => { event.emit(event.DRAGEND, e, this); });
+        event.on(event.POINTERMOVE, this.dragMove.bind(this));
+        event.on(event.DRAGSTART, (e, draggable) => {
+            if (draggable === this) {
+                this.dragStart(e);
+            }
+        });
+        event.on(event.DRAGEND, (e, draggable) => {
+            if (draggable === this) {
+                this.dragEnd(e);
+            }
+        });
+    }
+
+    /**
+     * Gets called when the user starts dragging the entity
+     * @name dragStart
+     * @memberof Draggable
+     * @function
+     * @param {object} e the pointer event
+     * @returns {boolean} false if the object is being dragged
+     */
+    dragStart(e) {
+        if (this.dragging === false) {
+            this.dragging = true;
+            this.grabOffset.set(e.gameX, e.gameY);
+            this.grabOffset.sub(this.pos);
+            return false;
+        }
+    }
+
+    /**
+     * Gets called when the user drags this entity around
+     * @name dragMove
+     * @memberof Draggable
+     * @function
+     * @param {object} e the pointer event
+     */
+    dragMove(e) {
+        if (this.dragging === true) {
+            this.pos.set(e.gameX, e.gameY, this.pos.z); //TODO : z ?
+            this.pos.sub(this.grabOffset);
+        }
+    }
+
+    /**
+     * Gets called when the user stops dragging the entity
+     * @name dragEnd
+     * @memberof Draggable
+     * @function
+     * @returns {boolean} false if the object stopped being dragged
+     */
+    dragEnd() {
+        if (this.dragging === true) {
+            this.dragging = false;
+            return false;
+        }
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof Draggable
+     * @function
+     * @ignore
+     */
+    destroy() {
+        event.off(event.POINTERMOVE, this.dragMove);
+        event.off(event.DRAGSTART, this.dragStart);
+        event.off(event.DRAGEND, this.dragEnd);
+        input.releasePointerEvent("pointerdown", this);
+        input.releasePointerEvent("pointerup", this);
+        input.releasePointerEvent("pointercancel", this);
+        super.destroy();
+    }
+};
+
+/**
+ * @classdesc
+ * a base drop target object
+ * @see Draggable
+ * @augments Renderable
+ */
+export class DropTarget extends Renderable {
+    /**
+     * @param {number} x the x coordinates of the drop target
+     * @param {number} y the y coordinates of the drop target
+     * @param {number} width drop target width
+     * @param {number} height drop target height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+
+        this.isKinematic = false;
+
+        /**
+         * constant for the overlaps method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_OVERLAP
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_OVERLAP = "overlaps";
+
+        /**
+         * constant for the contains method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_CONTAINS
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_CONTAINS = "contains";
+
+        /**
+         * the checkmethod we want to use
+         * @public
+         * @constant
+         * @type {string}
+         * @name checkMethod
+         * @default "overlaps"
+         * @memberof DropTarget
+         */
+        this.checkMethod = this.CHECKMETHOD_OVERLAP;
+
+        event.on(event.DRAGEND, this.checkOnMe, this);
+
+    }
+
+    /**
+     * Sets the collision method which is going to be used to check a valid drop
+     * @name setCheckMethod
+     * @memberof DropTarget
+     * @function
+     * @param {string} checkMethod the checkmethod (defaults to CHECKMETHOD_OVERLAP)
+     */
+    setCheckMethod(checkMethod) {
+        //  We can improve this check,
+        //  because now you can use every method in theory
+        if (typeof(this.getBounds()[this.checkMethod]) === "function") {
+            this.checkMethod = checkMethod;
+        }
+    }
+
+    /**
+     * Checks if a dropped entity is dropped on the current entity
+     * @name checkOnMe
+     * @memberof DropTarget
+     * @function
+     * @param {object} e the triggering event
+     * @param {Draggable} draggable the draggable object that is dropped
+     */
+    checkOnMe(e, draggable) {
+        if (draggable && this.getBounds()[this.checkMethod](draggable.getBounds())) {
+            // call the drop method on the current entity
+            this.drop(draggable);
+        }
+    }
+
+    /**
+     * Gets called when a draggable entity is dropped on the current entity
+     * @name drop
+     * @memberof DropTarget
+     * @function
+     * @param {Draggable} draggable the draggable object that is dropped
+     */
+    drop() {
+
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof DropTarget
+     * @function
+     * @ignore
+     */
+    destroy() {
+        event.off(event.DRAGEND, this.checkOnMe);
+        super.destroy();
+    }
+};