@thinkpixellab-public/px-vue 3.0.1

package/utils/drag.js

@@ -0,0 +1,363 @@
+// https://github.com/yomotsu/inertia-drag//
+
+const defaults = {
+    // event when drag starts (equivalent to mousedown)
+    onStart: null,
+
+    // event during drag (equivalent to mousemove)
+    onDrag: null,
+
+    // event on any move (drag or inertia movement)
+    onMove: null,
+
+    // event when drag ends (equivalent to mouse up)
+    onEnd: null,
+
+    // event just on inertia movement
+    onInertia: null,
+
+    // event on the final inertia move
+    onInertiaEnd: null,
+
+    // normally we prevent default but you can allow it with this
+    allowEventDefault: false,
+
+    // disable drag on these elements
+    excludeSelector: null,
+
+    // lock to 'x' or 'y' or nothing (null) or 'auto' (selects first to meet threshold)
+    lock: null,
+
+    // the minimum amount of drag before dragging starts (no events called until met)
+    startThreshold: 10,
+
+    // friction coefficient for inertia
+    friction: 0.96,
+
+    // initial value for the disabled property
+    disabled: false,
+};
+
+function Drag(element, options) {
+    this.element = element;
+    this.ops = { ...defaults, ...options };
+    this.disabled = this.ops.disabled;
+
+    // touch support test
+    this.supportsTouch = !!(
+        typeof window !== undefined &&
+        window.TouchEvent &&
+        'ontouchstart' in window
+    );
+
+    this.reset = () => {
+        this.thresholdMet = this.ops.startThreshold ? false : true;
+        this.previousEv = null;
+        this.startEv = null;
+        this.inertiaEv = null;
+        this.lock = this.ops.lock;
+    };
+
+    this.onStart = nativeEvent => {
+        if (this.disabled) {
+            return;
+        }
+
+        if (this.ops.excludeSelector) {
+            const excludeElements = this.element.querySelectorAll(this.ops.excludeSelector);
+            for (let i = 0; i < excludeElements.length; i++) {
+                if (excludeElements[i].contains(nativeEvent.target)) return;
+            }
+        }
+
+        this.addRuntimeEvents();
+
+        // reset
+        this.reset();
+
+        // store the start event
+        this.startEv = this.normalizeEvent(nativeEvent);
+
+        if (this.thresholdMet) {
+            this.isDragging = true;
+            if (this.ops.onStart) {
+                this.ops.onStart(this.startEv);
+            }
+        } else {
+            // threshold not met yet, so onStart will be called later
+        }
+    };
+
+    this.onDrag = nativeEvent => {
+        let ev = this.normalizeEvent(nativeEvent);
+
+        if (!this.thresholdMet) {
+            ev = this.thresholdCheck(ev);
+            if (!ev) {
+                return;
+            }
+        }
+
+        // if we've made it this far we've met the threshold test
+        if (!this.ops.allowEventDefault) {
+            nativeEvent.preventDefault();
+        }
+
+        this.updateDeltas(ev);
+
+        // store the last delta as initial velocity
+        this.velocity = ev.delta;
+
+        if (this.ops.onDrag) {
+            this.ops.onDrag(ev);
+        }
+
+        if (this.ops.onMove) {
+            this.ops.onMove(ev);
+        }
+    };
+
+    this.onEnd = nativeEvent => {
+        this.removeRuntimeEvents();
+
+        if (this.thresholdMet) {
+            let ev = this.normalizeEvent(nativeEvent);
+            this.isDragging = false;
+
+            let prevPrevious = this.previousEv;
+            this.updateDeltas(ev);
+
+            // We need restore the previous previous event since the native event
+            // event has the same coordinates as the last drag so the calculated
+            // previous got zeroed out when we called updateDeltas.
+            ev.previous = prevPrevious;
+            ev.delta = this.velocity;
+
+            if (this.ops.onEnd) {
+                this.ops.onEnd(ev);
+            }
+
+            if (this.ops.onMove || this.ops.onInertia) {
+                this.inertiaEv = ev;
+                this.inertiaEv.nativeEvent = null;
+                this.inertiaUpdate();
+            }
+        }
+    };
+
+    this.inertiaUpdate = () => {
+        if (this.inertiaEv) {
+            if (this.disabled) {
+                return;
+            }
+
+            this.inertiaEv.x += this.velocity.x;
+            this.inertiaEv.y += this.velocity.y;
+
+            this.velocity.x *= this.ops.friction;
+            this.velocity.y *= this.ops.friction;
+
+            this.updateDeltas(this.inertiaEv);
+
+            if (this.ops.onMove) {
+                this.ops.onMove(this.inertiaEv);
+            }
+
+            if (this.ops.onInertia) {
+                this.ops.onInertia(this.inertiaEv);
+            }
+
+            console.log('inertia');
+
+            // test for near zero velocity and end
+            if (Math.abs(this.velocity.x) > 0.5 || Math.abs(this.velocity.y) > 0.5) {
+                requestAnimationFrame(this.inertiaUpdate.bind(this));
+            } else {
+                if (this.ops.onInertiaEnd) {
+                    this.ops.onInertiaEnd(this.inertiaEv);
+                }
+            }
+        }
+    };
+
+    this.thresholdCheck = ev => {
+        if (!this.startEv) {
+            return false;
+        }
+
+        const startDelta = {
+            x: ev.x - this.startEv.x,
+            y: ev.y - this.startEv.y,
+        };
+
+        const metX = Math.abs(startDelta.x) >= this.ops.startThreshold;
+        const metY = Math.abs(startDelta.y) >= this.ops.startThreshold;
+
+        if (metX || metY) {
+            this.thresholdMet = true;
+
+            // lock == x | y
+            // if we met the threshold in a non supported direction then end
+            if ((metX && this.lock == 'y') || (metY && this.lock == 'x')) {
+                this.removeRuntimeEvents();
+                return false;
+            }
+
+            // lock == auto
+            // if lock is 'auto' we need to pretend it has been all along
+            if (this.lock == 'auto') {
+                this.lock = metX ? 'x' : 'y';
+            }
+
+            this.previousEv = this.startEv;
+
+            this.isDragging = true;
+
+            // raise the start event now that the threshold has been met
+            if (this.ops.onStart) {
+                this.ops.onStart(ev);
+            }
+
+            // threshold has now been met so return the "revised" event
+            return ev;
+        }
+
+        // threshold has not been met so return false
+        return false;
+    };
+
+    this.updateDeltas = ev => {
+        if (this.startEv) {
+            ev.start = this.startEv;
+            ev.startDelta = {
+                x: ev.x - ev.start.x,
+                y: ev.y - ev.start.y,
+            };
+        }
+
+        if (this.previousEv) {
+            ev.previous = this.previousEv;
+            ev.delta = {
+                x: ev.x - ev.previous.x,
+                y: ev.y - ev.previous.y,
+            };
+        }
+
+        this.previousEv = {
+            x: ev.x,
+            y: ev.y,
+        };
+    };
+
+    this.normalizeEvent = nativeEvent => {
+        if (!nativeEvent) {
+            return {};
+        }
+
+        const coords = {};
+
+        if (this.supportsTouch && nativeEvent) {
+            let touches = nativeEvent.targetTouches.length
+                ? nativeEvent.targetTouches
+                : nativeEvent.changedTouches;
+            coords.x = touches[0].clientX;
+            coords.y = touches[0].clientY;
+        } else {
+            coords.x = nativeEvent.clientX;
+            coords.y = nativeEvent.clientY;
+        }
+
+        const ev = {
+            x: this.thresholdMet && this.startEv && this.lock == 'y' ? this.startEv.x : coords.x,
+            y: this.thresholdMet && this.startEv && this.lock == 'x' ? this.startEv.y : coords.y,
+            native: nativeEvent,
+            lock: this.lock,
+        };
+
+        return ev;
+    };
+
+    // element events
+
+    this.addElementEvents = () => {
+        this.element.addEventListener(
+            this.supportsTouch ? 'touchstart' : 'mousedown',
+            this.onStart
+        );
+    };
+
+    this.removeElementEvents = () => {
+        this.element.removeEventListener(
+            this.supportsTouch ? 'touchstart' : 'mousedown',
+            this.onStart
+        );
+    };
+
+    // document (runtime) events
+
+    this.addRuntimeEvents = () => {
+        this.removeRuntimeEvents();
+        if (this.supportsTouch) {
+            document.addEventListener('touchmove', this.onDrag, { passive: false });
+            document.addEventListener('touchend', this.onEnd);
+        } else {
+            document.addEventListener('mousemove', this.onDrag, { passive: false });
+            document.addEventListener('mouseup', this.onEnd);
+        }
+    };
+
+    this.removeRuntimeEvents = () => {
+        if (this.supportsTouch) {
+            document.removeEventListener('touchmove', this.onDrag, { passive: false });
+            document.removeEventListener('touchend', this.onEnd);
+        } else {
+            document.removeEventListener('mousemove', this.onDrag, { passive: false });
+            document.removeEventListener('mouseup', this.onEnd);
+        }
+    };
+
+    // mouse down on element
+
+    this.addElementEvents();
+
+    // public
+
+    this.cancel = () => {
+        this.reset();
+        this.removeRuntimeEvents();
+    };
+
+    this.updateOptions = options => {
+        this.ops = { ...this.ops, options };
+    };
+
+    this.disable = () => {
+        this.reset();
+        this.disabled = true;
+    };
+
+    this.enable = () => {
+        this.reset();
+        this.disable = false;
+    };
+
+    this.destroy = () => {
+        this.reset();
+        this.removeRuntimeEvents();
+        this.removeElementEvents();
+    };
+
+    // this.setTouchActionDescendants = (elements, value) => {
+    //     let i = elements.length;
+    //     let children;
+    //     while (i--) {
+    //         value
+    //             ? (elements[i].style.touchAction = value)
+    //             : elements[i].style.removeProperty('touch-action');
+    //         children = elements[i].children;
+    //         children && children.length && this.setTouchActionDescendants(children, value);
+    //     }
+    // };
+}
+
+export default Drag;

package/utils/fit.js

@@ -0,0 +1,73 @@
+export function cover(inner, outer, posX = 0.5, posY = 0.5) {
+    var aspectOuter = outer.width / outer.height,
+        aspectInner = inner.width / inner.height,
+        width,
+        height,
+        x,
+        y,
+        scale;
+    outer.x = outer.x ? outer.x : 0;
+    outer.y = outer.y ? outer.y : 0;
+    inner.x = inner.x ? inner.x : 0;
+    inner.y = inner.y ? inner.y : 0;
+
+    if (aspectOuter > aspectInner) {
+        width = outer.width;
+        height = outer.width * (1 / aspectInner);
+        x = outer.x;
+        y = outer.y - (height - outer.height) * posY;
+        scale = outer.height / height;
+    } else {
+        height = outer.height;
+        width = outer.height * aspectInner;
+        y = outer.y;
+        x = outer.x - (width - outer.width) * posX;
+        scale = outer.width / width;
+    }
+
+    var rect = {
+        width: width,
+        height: height,
+        x: x,
+        y: y,
+        scale: scale,
+    };
+
+    return rect;
+}
+
+export function contain(inner, outer, posX = 0.5, posY = 0.5) {
+    var aspectOuter = outer.width / outer.height,
+        aspectInner = inner.width / inner.height,
+        width,
+        height,
+        x,
+        y,
+        scale;
+    outer.x = outer.x ? outer.x : 0;
+    outer.y = outer.y ? outer.y : 0;
+
+    if (aspectInner > aspectOuter) {
+        width = outer.width;
+        height = outer.width / aspectInner;
+        x = 0;
+        y = outer.height * posY - height * posY;
+        scale = height / outer.height;
+    } else {
+        width = outer.height * aspectInner;
+        height = outer.height;
+        x = outer.width * posX - width * posX;
+        y = 0;
+        scale = width / outer.width;
+    }
+
+    var rect = {
+        width: width,
+        height: height,
+        x: x,
+        y: y,
+        scale: scale,
+    };
+
+    return rect;
+}

package/utils/tween.js

@@ -0,0 +1,129 @@
+// Super simple tweening
+// Usage: tween({from: 0, to: 1, dur: 1000, update: (v) => {}, complete: () => {}, ease: 'linear'});
+
+// easing functions
+
+const easeIn = power => t => Math.pow(t, power);
+
+const easeOut = power => t => 1 - Math.abs(Math.pow(t - 1, power));
+
+const easeInOut = power => t =>
+    t < 0.5 ? easeOut(power)(t * 2) / 2 : easeOut(power)(t * 2 - 1) / 2 + 0.5;
+
+const easings = {
+    linear: easeInOut(1),
+    easeInQuad: easeIn(2),
+    easeOutQuad: easeOut(2),
+    easeInOutQuad: easeInOut(2),
+    easeInCubic: easeIn(3),
+    easeOutCubic: easeOut(3),
+    easeInOutCubic: easeInOut(3),
+    easeInQuart: easeIn(4),
+    easeOutQuart: easeOut(4),
+    easeInOutQuart: easeInOut(4),
+    easeInQuint: easeIn(5),
+    easeOutQuint: easeOut(5),
+    easeInOutQuint: easeInOut(5),
+};
+
+const isClient = () => {
+    return !process.server && typeof window !== 'undefined' && typeof document !== undefined;
+};
+
+const getActiveTweens = () => {
+    if (typeof window == 'undefined') {
+        return {};
+    }
+
+    // create active tweens collection on window
+    if (!window.pxTween || !window.pxTween.activeTweens) {
+        window.pxTween = window?.pxTween || {};
+        window.pxTween.activeTweens = {};
+    }
+    return window.pxTween.activeTweens;
+};
+
+const getNextTweenId = () => {
+    if (typeof window == 'undefined') {
+        return 0;
+    }
+    if (!window.pxTween || !window.pxTween.nextTweenId) {
+        window.pxTween = window?.pxTween || {};
+        window.pxTween.nextTweenId = 0;
+    }
+    return window.pxTween.nextTweenId + 1;
+};
+
+const deleteTween = id => {
+    let tweens = getActiveTweens();
+    delete tweens[id];
+};
+
+function tweenValue(from, to, cb, { time, done, easeFunc, delay } = {}) {
+    if (typeof window == 'undefined') {
+        return 0;
+    }
+
+    const activeTweens = getActiveTweens();
+    const id = getNextTweenId();
+
+    activeTweens[id] = true;
+
+    const ease = easeFunc || easings.linear;
+    const diff = from - to;
+    const targetTime = time;
+    delay = delay ? delay : 0;
+    let start = null;
+    function step(timestamp) {
+        if (!start) start = timestamp;
+        const elapsed = timestamp - (start + delay);
+        if (activeTweens[id]) {
+            if (elapsed >= delay) {
+                const percentage = Math.min((elapsed - delay) / targetTime, 1);
+                cb(from - ease(percentage) * diff);
+            }
+            if (elapsed < targetTime + delay) {
+                window && window.requestAnimationFrame(step);
+            } else {
+                cb(to);
+                done && done();
+            }
+        }
+    }
+    window && window.requestAnimationFrame(step);
+    return id;
+}
+
+const tween = ({
+    from = 0,
+    to = 1,
+    dur = 1000,
+    delay = 0,
+    update = null,
+    complete = null,
+    ease = 'easeOutQuart',
+}) => {
+    // this should be the only check we need since nothing gets exported
+    if (!isClient()) {
+        return;
+    }
+
+    if (typeof ease === 'string' || ease instanceof String) {
+        ease = easings[ease];
+    }
+
+    const id = tweenValue(from, to, update, {
+        time: dur,
+        done: complete,
+        delay: delay,
+        easeFunc: ease,
+    });
+
+    return {
+        cancel: function () {
+            deleteTween(id);
+        },
+    };
+};
+
+export default tween;