@makefully/platypus 4.1.5 → 4.1.6

package/src/components/LogicDirectionalMovement.js

@@ -0,0 +1,325 @@
+/* global platypus */
+import Vector from '../Vector.js';
+import createComponentClass from '../factory.js';
+
+const
+    processDirection = function (direction) {
+        return function (state) {
+            this[direction] = !state || (state.pressed !== false);
+        };
+    },
+    doNothing = function () {},
+    rotate = {
+        x: function (heading, lastHeading) {
+            if (heading !== lastHeading) {
+                if (((heading > 180) && (lastHeading <= 180)) || ((heading <= 180) && (lastHeading > 180))) {
+                    this.owner.triggerEvent('transform', 'vertical');
+                }
+            }
+        },
+        y: function (heading, lastHeading) {
+            if (heading !== lastHeading) {
+                if (((heading > 90 && heading <= 270) && (lastHeading <= 90 || lastHeading > 270)) || ((heading <= 90 || heading > 270) && (lastHeading > 90 && lastHeading <= 270))) {
+                    this.owner.triggerEvent('transform', 'horizontal');
+                }
+            }
+        },
+        z: function (heading, lastHeading) {
+            if (heading !== lastHeading) {
+                this.owner.triggerEvent('replace-transform', 'rotate-' + heading);
+            }
+        }
+    };
+
+export default createComponentClass(/** @lends platypus.components.LogicDirectionalMovement.prototype */{
+    id: 'LogicDirectionalMovement',
+    
+    properties: {
+        /**
+         * Defines the axis around which the entity should be transformed. Defaults to "y" for platforming behavior. Use "z" for top-down behavior.
+         *
+         * @property axis
+         * @type String
+         * @default "y"
+         */
+        axis: 'y',
+
+        /**
+         * Defines the distance in world units that the entity should be moved per millisecond.
+         *
+         * @property speed
+         * @type Number
+         * @default 0.3
+         */
+        speed: 0.3
+    },
+    
+    /**
+     * This component changes the [Motion](platypus.components.Motion.html) of an entity according to its current speed and heading. It accepts directional messages that can stand alone, or come from a mapped controller, in which case it checks the `pressed` value of the message before changing its course.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#accelerate
+     * @listens platypus.Entity#component-added
+     * @listens platypus.Entity#face
+     * @listens platypus.Entity#handle-logic
+     * @listens platypus.Entity#stop
+     * @listens platypus.Entity#go-down
+     * @listens platypus.Entity#go-south
+     * @listens platypus.Entity#go-down-left
+     * @listens platypus.Entity#go-southwest
+     * @listens platypus.Entity#go-left
+     * @listens platypus.Entity#go-west
+     * @listens platypus.Entity#go-up-left
+     * @listens platypus.Entity#go-northwest
+     * @listens platypus.Entity#go-up
+     * @listens platypus.Entity#go-north
+     * @listens platypus.Entity#go-up-right
+     * @listens platypus.Entity#go-northeast
+     * @listens platypus.Entity#go-right
+     * @listens platypus.Entity#go-east
+     * @listens platypus.Entity#go-down-right
+     * @listens platypus.Entity#go-southeast
+     * @fires platypus.Entity#replace-transform
+     * @fires platypus.Entity#transform
+     */
+    initialize: function () {
+        const
+            state = this.state = this.owner.state;
+        
+        if (typeof this.speed === 'number') {
+            this.speed = [this.speed, 0, 0];
+        }
+        this.initialVector = Vector.setUp(this.speed);
+        this.reorient = rotate[this.axis];
+        if (!this.reorient) {
+            this.reorient = doNothing;
+        }
+        
+        this.moving = state.set('moving', false);
+        this.left   = state.set('left', false);
+        this.right  = state.set('right', false);
+        this.up     = state.set('up', false);
+        this.down   = state.set('down', false);
+
+        this.upLeft = false;
+        this.upRight = false;
+        this.downLeft = false;
+        this.downRight = false;
+        
+        this.heading = 0;
+        this.owner.heading = this.owner.heading || 0;
+        this.headingsMap = {
+            up: 270,
+            north: 270,
+            down: 90,
+            south: 90,
+            left: 180,
+            west: 180,
+            right: 0,
+            east: 0,
+            "up-left": 225,
+            northwest: 225,
+            "up-right": 315,
+            northeast: 315,
+            "down-left": 135,
+            southwest: 135,
+            "down-right": 45,
+            southeast: 45
+        };
+    },
+    events: {
+        "component-added": function (component) {
+            if (component === this) {
+                if (!this.owner.addMover) {
+                    platypus.debug.warn('The "LogicDirectionalMovement" component requires a "Mover" component to function correctly.');
+                    return;
+                }
+
+                this.direction = this.owner.addMover({
+                    velocity: this.speed,
+                    drag: 0,
+                    friction: 0,
+                    stopOnCollision: false,
+                    orient: false,
+                    aliases: {
+                        "moving": "control-velocity"
+                    }
+                }).velocity;
+                
+                if (this.owner.heading !== this.heading) {
+                    this.direction.setVector(this.initialVector).rotate((this.owner.heading / 180) * Math.PI);
+                    this.heading = this.owner.heading;
+                }
+                
+                this.owner.triggerEvent('moving', this.moving);
+            }
+        },
+        
+        "handle-logic": function () {
+            const state = this.state,
+                upLeft    = this.upLeft    || (this.up && this.left),
+                downLeft  = this.downLeft  || (this.down && this.left),
+                downRight = this.downRight || (this.down && this.right),
+                upRight   = this.upRight   || (this.up && this.right);
+            let up        = this.up        || this.upLeft || this.upRight,
+                left      = this.left      || this.upLeft || this.downLeft,
+                down      = this.down      || this.downLeft || this.downRight,
+                right     = this.right     || this.upRight || this.downRight;
+            
+            if ((left && right) || (up && down)) {
+                this.moving = false;
+            } else if (upLeft) {
+                this.moving = true;
+                this.heading = 225;
+            } else if (upRight) {
+                this.moving = true;
+                this.heading = 315;
+            } else if (downLeft) {
+                this.moving = true;
+                this.heading = 135;
+            } else if (downRight) {
+                this.moving = true;
+                this.heading = 45;
+            } else if (left) {
+                this.moving = true;
+                this.heading = 180;
+            } else if (right) {
+                this.moving = true;
+                this.heading = 0;
+            } else if (up) {
+                this.moving = true;
+                this.heading = 270;
+            } else if (down) {
+                this.moving = true;
+                this.heading = 90;
+            } else {
+                this.moving = false;
+                
+                // This is to retain the entity's direction even if there is no movement. There's probably a better way to do this since this is a bit of a retrofit. - DDD
+                switch (this.heading) {
+                case 270:
+                    up = true;
+                    break;
+                case 90:
+                    down = true;
+                    break;
+                case 180:
+                    left = true;
+                    break;
+                case 225:
+                    up = true;
+                    left = true;
+                    break;
+                case 315:
+                    up = true;
+                    right = true;
+                    break;
+                case 135:
+                    down = true;
+                    left = true;
+                    break;
+                case 45:
+                    down = true;
+                    right = true;
+                    break;
+                case 0:
+                default:
+                    right = true;
+                    break;
+                }
+            }
+            
+            if (this.owner.heading !== this.heading) {
+                this.direction.setVector(this.initialVector).rotate((this.heading / 180) * Math.PI);
+                this.reorient(this.heading, this.owner.heading);
+                this.owner.heading = this.heading;
+            }
+            
+            //TODO: possibly remove the separation of this.state.direction and this.direction to just use state?
+            if (state.get('moving') !== this.moving) {
+                this.owner.triggerEvent('moving', this.moving);
+                state.set('moving', this.moving);
+            }
+
+            state.set('up', up);
+            state.set('right', right);
+            state.set('down', down);
+            state.set('left', left);
+        },
+
+        "go-down": processDirection('down'),
+
+        "go-south": processDirection('down'),
+
+        "go-down-left": processDirection('downLeft'),
+
+        "go-southwest": processDirection('downLeft'),
+
+        "go-left": processDirection('left'),
+
+        "go-west": processDirection('left'),
+
+        "go-up-left": processDirection('upLeft'),
+
+        "go-northwest": processDirection('upLeft'),
+
+        "go-up": processDirection('up'),
+
+        "go-north": processDirection('up'),
+
+        "go-up-right": processDirection('upRight'),
+
+        "go-northeast": processDirection('upRight'),
+
+        "go-right": processDirection('right'),
+
+        "go-east": processDirection('right'),
+
+        "go-down-right": processDirection('downRight'),
+
+        "go-southeast": processDirection('downRight'),
+        
+        "stop": function (state) {
+            if (!state || (state.pressed !== false)) {
+                this.left = false;
+                this.right = false;
+                this.up = false;
+                this.down = false;
+                this.upLeft = false;
+                this.upRight = false;
+                this.downLeft = false;
+                this.downRight = false;
+            }
+        },
+        
+        /**
+         * Set the direction the entity should face while stopped.
+         *
+         * @event platypus.Entity#face
+         * @param direction {String} A value such as "north" or "left" to point the entity in a particular direction.
+         */
+        "face": function (direction) {
+            this.heading = this.headingsMap[direction] || 0;
+        },
+        
+        /**
+         * Changes the velocity of the Entity when in motion.
+         *
+         * @event platypus.Entity#accelerate
+         * @param velocity {Number|platypus.Vector} The magnitude or Vector to multiply the current velocity by.
+         */
+        "accelerate": function (velocity) {
+            this.initialVector.normalize().multiply(velocity);
+            this.direction.normalize().multiply(velocity);
+        }
+    },
+    
+    methods: {
+        destroy: function () {
+            this.initialVector.recycle();
+            this.state = null;
+        }
+    }
+});

package/src/components/LogicDragDrop.js

@@ -0,0 +1,371 @@
+/* global platypus */
+import {Container, Rectangle} from 'pixi.js';
+import createComponentClass from '../factory.js';
+
+const
+    claimHitArea = new Rectangle(-2000, -2000, 4000, 4000),
+    allDraggedItems = [];
+
+export default createComponentClass(/** @lends platypus.components.LogicDragDrop.prototype */{
+    id: 'LogicDragDrop',
+    
+    properties: {
+        //TODO: Impement Multi-Drag
+
+        /**
+         * Sets how far a `pressmove` event can deviate from the original `pointerdown` before a stickyClick becomes unstuck (ie normal drag-drop). `0` means any movement will unstick the click. `10` means the mouse needs to move more than 10 units before the unstick occurs. `stickyClick` must be enabled for this property to matter.
+         * 
+         * @property stickiness
+         * @type Number
+         * @default 0
+         */
+        stickiness: 0,
+
+        /**
+         * Sets whether an entity can be dragged at initial. Change via disable-drag().
+         *
+         * @property dragDisabled
+         * @type Boolean
+         * @default false
+         */
+        dragDisabled: false
+
+    },
+
+    publicProperties: {
+        /**
+         * Whether dragged items must stay within the camera frame.
+         * 
+         * @property stayInViewport
+         * @type Boolean
+         * @default false
+         */
+        stayInViewport: false,
+
+        /**
+         * Sets whether a click-move should start the dragging behavior in addition to click-drag. Defaults to `true` on desktop and `false` on mobile devices.
+         *
+         * @property stickyClick
+         * @type Boolean
+         * @default undefined
+         */
+        stickyClick: undefined
+    },
+    
+    /**
+     * A component that allows an object to be dragged and dropped. Can use collision to prevent dropping the objects in certain locations.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#camera-update
+     * @listens platypus.Entity#component-added
+     * @listens platypus.Entity#handle-logic
+     * @listens platypus.Entity#handle-post-collision-logic
+     * @listens platypus.Entity#pointerdown
+     * @listens platypus.Entity#pointermove
+     * @listens platypus.Entity#prepare-logic
+     * @listens platypus.Entity#pressmove
+     * @listens platypus.Entity#pressup
+     */
+    initialize: function () {
+        this.aabb = this.owner.parent.worldCamera.viewport;
+        this.cameraScaleX = 1;
+        this.cameraScaleY = 1;
+        this.nextX = this.owner.x;
+        this.nextY = this.owner.y;
+        this.grabOffsetX = 0;
+        this.grabOffsetY = 0;
+        this.state = this.owner.state;
+        this.state.set('dragging', false);
+        this.dragId = null;
+        this.originalContainer = null
+        this.dragContainer = new Container();
+
+        this.dragContainer.zIndex = Infinity;
+
+        if (this.stickyClick === undefined) {
+            this.stickyClick = !platypus.supports.mobile;
+        }
+        this.releaseStick = false;
+    },
+
+    events: {
+        "camera-update": function ({scaleX, scaleY}) {
+            this.cameraScaleX = scaleX;
+            this.cameraScaleY = scaleY;
+            this.checkCamera();
+        },
+        
+        "prepare-logic": function () {
+            this.checkCamera(); // may end dragging
+        },
+
+        "handle-logic": function () {
+            let defaultCancelled = false;
+
+            if (this.state.get('dragging')) {
+                const
+                    {dragContainer, nextX, nextY, owner} = this;
+
+                owner.triggerEvent('dragging', {
+                    dragContainer,
+                    entity: owner,
+                    x: nextX,
+                    y: nextY,
+                    pointer: {
+                        x: nextX + this.grabOffsetX,
+                        y: nextY + this.grabOffsetY
+                    },
+                    preventDefault: () => {
+                        defaultCancelled = true;
+                    }
+                });
+
+                if (!defaultCancelled) {
+                    owner.x = nextX;
+                    owner.y = nextY;
+                }
+            }
+        },
+
+        "pointerdown": function (eventData) {
+            if (this.dragDisabled) {
+                return;
+            }
+
+            if (this.sticking) {
+                this.sticking = null;
+                this.nextX = eventData.x - this.grabOffsetX;
+                this.nextY = eventData.y - this.grabOffsetY;
+                if (this.stayInViewport) {
+                    this.checkCamera();
+                }
+                this.releaseStick = true; // Delay release until logic runs in case of collision checks, etc.
+            } else {
+                const
+                    {owner} = this;
+
+                if (this.dragId === null) {
+                    const
+                        {dragContainer} = this;
+                    let defaultCancelled = false;
+
+                    this.dragId = eventData.event.pointerId;
+
+                    owner.triggerEvent('drag-start', {
+                        dragContainer,
+                        entity: owner,
+                        preventDefault: () => {
+                            defaultCancelled = true;
+                        }
+                    });
+
+                    if (defaultCancelled) {
+                        this.dragId = null;
+                    } else {
+                        const
+                            {state} = this,
+                            {x, y} = owner;
+
+                        this.nextX = x;
+                        this.nextY = y;
+                        this.grabOffsetX = (eventData.x >> 0) - x;
+                        this.grabOffsetY = (eventData.y >> 0) - y;
+                        state.set('dragging', true);
+                        owner.dragMode = true;
+                        this.sticking = this.stickyClick ? {x, y} : null;
+                        this.claimPointer();
+        
+                        // put in top layer
+                        this.checkCamera(); //update dragContainer dimensions
+                        this.originalContainer = owner.container.parent;
+                        dragContainer.addChild(owner.container);
+                        owner.parent.stage.addChild(dragContainer);
+                        allDraggedItems.push(this);
+                    }
+                }
+            }
+            
+            eventData.pixiEvent.stopPropagation();
+        },
+
+        "pressup": function (eventData) {
+            if (this.releaseStick) {
+                this.release();
+                this.releaseStick = false;
+                return;
+            }
+
+            if (!this.state.get('dragging')) {
+                return;
+            }
+
+            if (this.dragId !== null && !this.sticking) {
+                this.release();
+            }
+            
+            eventData.pixiEvent.stopPropagation();
+        },
+
+        "input-off": function () {
+            if (this.state.get('dragging') && this.dragId !== null) {
+                this.release();
+            }
+        },
+
+        "pointermove": function (eventData) {
+            if (!this.state.get('dragging')) {
+                return;
+            }
+
+            if (this.sticking) {
+                this.nextX = eventData.x - this.grabOffsetX;
+                this.nextY = eventData.y - this.grabOffsetY;
+                if (this.stayInViewport) {
+                    this.checkCamera();
+                }
+                
+                eventData.event.preventDefault();
+                eventData.pixiEvent.stopPropagation();
+            }
+        },
+
+        "pressmove": function (eventData) {
+            if (!this.state.get('dragging')) {
+                return;
+            }
+            
+            if (this.dragId !== null) {
+                const
+                    {stickiness, sticking} = this;
+
+                this.nextX = eventData.x - this.grabOffsetX;
+                this.nextY = eventData.y - this.grabOffsetY;
+                if (this.stayInViewport) {
+                    this.checkCamera();
+                }
+                if (sticking && (((this.nextX - sticking.x) ** 2) + ((this.nextY - sticking.y) ** 2) > stickiness ** 2)) {
+                    this.sticking = null;
+                }
+                
+                eventData.event.preventDefault();
+                eventData.pixiEvent.stopPropagation();
+            }
+        },
+
+        "disable-drag": function (disable) {
+            //If we don't send in a value, we toggle the dragDisabled.
+            this.dragDisabled = typeof disable === 'boolean' ? disable : !this.dragDisabled;
+
+            if (this.dragDisabled && this.state.get('dragging')) {
+                this.release();
+            }
+        }
+    },
+    
+    methods: {// These are methods that are called by this component.
+        checkCamera () {
+            const
+                {state, stayInViewport} = this,
+                dragging = state?.get('dragging');
+
+            if (dragging || stayInViewport) {
+                const
+                    {aabb} = this;
+
+                if (!aabb.containsPoint(dragging ? this.nextX + this.grabOffsetX : this.owner.x, dragging ? this.nextY + this.grabOffsetY : this.owner.y)) {
+                    if (this.stayInViewport) {
+                        if (dragging) {
+                            this.nextX = Math.min(aabb.right, Math.max(aabb.left, this.nextX + this.grabOffsetX)) - this.grabOffsetX;
+                            this.nextY = Math.min(aabb.bottom, Math.max(aabb.top, this.nextY + this.grabOffsetY)) - this.grabOffsetY;
+                        } else {
+                            this.owner.x = Math.min(aabb.right, Math.max(aabb.left, this.owner.x));
+                            this.owner.y = Math.min(aabb.bottom, Math.max(aabb.top, this.owner.y));
+                        }
+                    } else {
+                        this.release();
+                    }
+                } else { // adjust container if needed.
+                    const
+                        {cameraScaleX, cameraScaleY, dragContainer} = this;
+    
+                    dragContainer.scale.x = cameraScaleX;
+                    dragContainer.scale.y = cameraScaleY;
+                    dragContainer.x = -(aabb.left * cameraScaleX);
+                    dragContainer.y = -(aabb.top * cameraScaleY);
+                }
+            }
+        },
+
+        claimPointer () {
+            this.lastHitArea = this.owner.container.hitArea;
+
+            this.owner.container.hitArea = claimHitArea; // capture all the clicks!
+        },
+
+        releasePointer () {
+            this.owner.container.hitArea = this.lastHitArea;
+        },
+
+        releaseContainer () {
+            const
+                {originalContainer, owner} = this,
+                index = allDraggedItems.indexOf(this);
+
+            if (index >= 0) {
+                allDraggedItems.splice(index, 1);
+            }
+
+            if (originalContainer) {
+                owner.parent.stage.removeChild(this.dragContainer);
+                originalContainer.addChild(owner.container);
+                this.originalContainer = null;
+            }
+        },
+
+        release () {
+            const
+                {dragContainer, owner, state} = this,
+                dropX = owner.x,
+                dropY = owner.y;
+            let defaultCancelled = false;
+
+            this.sticking = null;
+
+            this.dragId = null;
+            state.set('dragging', false);
+            owner.dragMode = false;
+            this.releasePointer();
+
+            this.releaseContainer();
+
+            owner.triggerEvent('drop', {
+                dragContainer,
+                entity: owner,
+                x: dropX,
+                y: dropY,
+                preventDefault: () => {
+                    defaultCancelled = true;
+                }
+            });
+
+            if (!defaultCancelled) {
+                //do default drop actions here
+                owner.x = dropX;
+                owner.y = dropY;
+                owner.triggerEvent('drop-complete');
+            }
+        },
+        
+        destroy () {
+            if (this.state.get('dragging')) {
+                this.dragId = null;
+                this.releaseContainer();
+                this.state.set('dragging', false);
+            }
+            this.owner.dragMode = false;
+            this.state = null;
+        }
+    }
+});