@leafer-in/viewport 1.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-in/viewport

package/dist/viewport.cjs

@@ -0,0 +1,353 @@
+'use strict';
+
+var core = require('@leafer-ui/core');
+
+function addViewport(leafer, mergeConfig, custom) {
+    addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
+    if (leafer.isApp || custom)
+        return;
+    leafer.__eventIds.push(leafer.on_(core.MoveEvent.BEFORE_MOVE, (e) => {
+        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
+    }), leafer.on_(core.ZoomEvent.BEFORE_ZOOM, (e) => {
+        const { zoomLayer } = leafer;
+        const changeScale = leafer.getValidScale(e.scale);
+        if (changeScale !== 1) {
+            core.PointHelper.scaleOf(zoomLayer, e, changeScale);
+            zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
+        }
+    }));
+}
+function addViewportConfig(leafer, mergeConfig) {
+    if (mergeConfig)
+        core.DataHelper.assign(leafer.config, mergeConfig);
+    core.DataHelper.assign(leafer.config, {
+        wheel: { preventDefault: true },
+        touch: { preventDefault: true },
+        pointer: { preventDefaultMenu: true }
+    }, leafer.userConfig);
+}
+
+function custom(leafer) {
+    addViewport(leafer, null, true);
+}
+
+function design(leafer) {
+    addViewport(leafer, {
+        zoom: {
+            min: 0.01,
+            max: 256
+        },
+        move: {
+            holdSpaceKey: true,
+            holdMiddleKey: true,
+        }
+    });
+}
+
+function document(leafer) {
+    addViewport(leafer, {
+        zoom: { min: 1 },
+        move: { scroll: 'limit' }
+    });
+}
+
+const debug = core.Debug.get('LeaferTypeCreator');
+const LeaferTypeCreator = {
+    list: {},
+    register(name, fn) {
+        list[name] && debug.repeat(name);
+        list[name] = fn;
+    },
+    run(name, leafer) {
+        const fn = list[name];
+        fn && fn(leafer);
+    }
+};
+const { list, register } = LeaferTypeCreator;
+register('viewport', addViewport);
+register('custom', custom);
+register('design', design);
+register('document', document);
+
+const MultiTouchHelper = {
+    getData(list) {
+        const a = list[0], b = list[1];
+        const lastCenter = core.PointHelper.getCenter(a.from, b.from);
+        const center = core.PointHelper.getCenter(a.to, b.to);
+        const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y };
+        const lastDistance = core.PointHelper.getDistance(a.from, b.from);
+        const distance = core.PointHelper.getDistance(a.to, b.to);
+        const scale = distance / lastDistance;
+        const rotation = core.PointHelper.getRotation(a.from, b.from, a.to, b.to);
+        return { move, scale, rotation, center };
+    }
+};
+
+const WheelEventHelper = {
+    getMove(event, config) {
+        let { moveSpeed } = config;
+        let { deltaX, deltaY } = event;
+        if (event.shiftKey && !deltaX) {
+            deltaX = deltaY;
+            deltaY = 0;
+        }
+        if (deltaX > 50)
+            deltaX = Math.max(50, deltaX / 3);
+        if (deltaY > 50)
+            deltaY = Math.max(50, deltaY / 3);
+        return { x: -deltaX * moveSpeed * 2, y: -deltaY * moveSpeed * 2 };
+    },
+    getScale(event, config) {
+        let zoom;
+        let scale = 1;
+        let { zoomMode, zoomSpeed } = config;
+        const delta = event.deltaY || event.deltaX;
+        if (zoomMode) {
+            zoom = (zoomMode === 'mouse') ? true : (!event.deltaX && (core.Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
+            if (event.shiftKey || event.metaKey || event.ctrlKey)
+                zoom = true;
+        }
+        else {
+            zoom = !event.shiftKey && (event.metaKey || event.ctrlKey);
+        }
+        if (zoom) {
+            zoomSpeed = core.MathHelper.within(zoomSpeed, 0, 1);
+            const min = event.deltaY ? config.delta.y : config.delta.x;
+            scale = 1 - delta / (min * 4) * zoomSpeed;
+            if (scale < 0.5)
+                scale = 0.5;
+            if (scale >= 1.5)
+                scale = 1.5;
+        }
+        return scale;
+    }
+};
+
+class Transformer {
+    get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
+    constructor(interaction) {
+        this.interaction = interaction;
+    }
+    move(data) {
+        const { interaction } = this;
+        if (!data.moveType)
+            data.moveType = 'move';
+        if (!this.moveData) {
+            this.setPath(data);
+            this.moveData = Object.assign(Object.assign({}, data), { moveX: 0, moveY: 0 });
+            interaction.emit(core.MoveEvent.START, this.moveData);
+        }
+        data.path = this.moveData.path;
+        interaction.emit(core.MoveEvent.BEFORE_MOVE, data);
+        interaction.emit(core.MoveEvent.MOVE, data);
+        this.transformEndWait();
+    }
+    zoom(data) {
+        const { interaction } = this;
+        if (!this.zoomData) {
+            this.setPath(data);
+            this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+            interaction.emit(core.ZoomEvent.START, this.zoomData);
+        }
+        data.path = this.zoomData.path;
+        interaction.emit(core.ZoomEvent.BEFORE_ZOOM, data);
+        interaction.emit(core.ZoomEvent.ZOOM, data);
+        this.transformEndWait();
+    }
+    rotate(data) {
+        const { interaction } = this;
+        if (!this.rotateData) {
+            this.setPath(data);
+            this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+            interaction.emit(core.RotateEvent.START, this.rotateData);
+        }
+        data.path = this.rotateData.path;
+        interaction.emit(core.RotateEvent.BEFORE_ROTATE, data);
+        interaction.emit(core.RotateEvent.ROTATE, data);
+        this.transformEndWait();
+    }
+    setPath(data) {
+        const { interaction } = this;
+        const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
+        data.path = path;
+        interaction.cancelHover();
+    }
+    transformEndWait() {
+        clearTimeout(this.transformTimer);
+        this.transformTimer = setTimeout(() => {
+            this.transformEnd();
+        }, this.interaction.p.transformTime);
+    }
+    transformEnd() {
+        const { interaction, moveData, zoomData, rotateData } = this;
+        if (moveData)
+            interaction.emit(core.MoveEvent.END, moveData);
+        if (zoomData)
+            interaction.emit(core.ZoomEvent.END, zoomData);
+        if (rotateData)
+            interaction.emit(core.RotateEvent.END, rotateData);
+        this.reset();
+    }
+    reset() {
+        this.zoomData = this.moveData = this.rotateData = null;
+    }
+    destroy() {
+        this.reset();
+    }
+}
+
+const leafer = core.Leafer.prototype;
+const bounds = new core.Bounds();
+leafer.initType = function (type) {
+    LeaferTypeCreator.run(type, this);
+};
+leafer.getValidMove = function (moveX, moveY) {
+    const { scroll, disabled } = this.app.config.move;
+    if (scroll) {
+        const type = scroll === true ? '' : scroll;
+        if (type.includes('x'))
+            moveX = moveX || moveY, moveY = 0;
+        else if (type.includes('y'))
+            moveY = moveY || moveX, moveX = 0;
+        else
+            Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
+        if (type.includes('limit')) {
+            const { x, y, width, height } = bounds.set(this.__world).addPoint(this.zoomLayer);
+            const right = x + width - this.width, bottom = y + height - this.height;
+            if (x >= 0 && right <= 0)
+                moveX = 0;
+            else if (moveX > 0) {
+                if (x + moveX > 0)
+                    moveX = -x;
+            }
+            else if (moveX < 0 && right + moveX < 0)
+                moveX = -right;
+            if (y >= 0 && bottom <= 0)
+                moveY = 0;
+            else if (moveY > 0) {
+                if (y + moveY > 0)
+                    moveY = -y;
+            }
+            else if (moveY < 0 && bottom + moveY < 0)
+                moveY = -bottom;
+        }
+    }
+    return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
+};
+leafer.getValidScale = function (changeScale) {
+    const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
+    if (min && absScale < min)
+        changeScale = min / scaleX;
+    else if (max && absScale > max)
+        changeScale = max / scaleX;
+    return disabled ? 1 : core.MathHelper.float(changeScale);
+};
+
+function getMoveEventData(move, event) {
+    return Object.assign(Object.assign({}, event), { moveX: move.x, moveY: move.y });
+}
+function getRotateEventData(rotation, event) {
+    return Object.assign(Object.assign({}, event), { rotation });
+}
+function getZoomEventData(scale, event) {
+    return Object.assign(Object.assign({}, event), { scale });
+}
+const interaction = core.InteractionBase.prototype;
+interaction.createTransformer = function () {
+    this.transformer = new Transformer(this);
+};
+interaction.move = function (data) {
+    this.transformer.move(data);
+};
+interaction.zoom = function (data) {
+    this.transformer.zoom(data);
+};
+interaction.rotate = function (data) {
+    this.transformer.rotate(data);
+};
+interaction.transformEnd = function () {
+    this.transformer.transformEnd();
+};
+interaction.wheel = function (data) {
+    const { wheel } = this.config;
+    if (wheel.disabled)
+        return;
+    const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
+    scale !== 1 ? this.zoom(getZoomEventData(scale, data)) : this.move(getMoveEventData(wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel), data));
+};
+interaction.multiTouch = function (data, list) {
+    if (this.config.multiTouch.disabled)
+        return;
+    const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
+    Object.assign(data, center);
+    this.rotate(getRotateEventData(rotation, data));
+    this.zoom(getZoomEventData(scale, data));
+    this.move(getMoveEventData(move, data));
+};
+
+const dragger = core.Dragger.prototype;
+const { abs } = Math;
+dragger.checkDragEndAnimate = function (data, speed) {
+    const { moveX, moveY } = this.dragData;
+    const absMoveX = abs(moveX), absMoveY = abs(moveY), minMove = speed ? 1 : 0.1;
+    const dragAnimate = this.interaction.m.dragAnimate && this.canAnimate && this.moving && (absMoveX > minMove || absMoveY > minMove);
+    if (dragAnimate) {
+        const inertia = data.pointerType === 'touch' ? 3 : 1, maxMove = 70;
+        speed = speed ? 0.95 : inertia;
+        if (absMoveX * speed > maxMove)
+            speed = maxMove / absMoveX;
+        else if (absMoveY * speed > maxMove)
+            speed = maxMove / absMoveY;
+        data = Object.assign({}, data);
+        core.PointHelper.move(data, moveX * speed, moveY * speed);
+        this.drag(data);
+        this.animate(() => { this.dragEnd(data, 1); });
+    }
+    return dragAnimate;
+};
+dragger.animate = function (func, off) {
+    const animateWait = func || this.animateWait;
+    if (animateWait)
+        this.interaction.target.nextRender(animateWait, null, off);
+    this.animateWait = func;
+};
+dragger.checkDragOut = function (data) {
+    const { interaction } = this;
+    this.autoMoveCancel();
+    if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
+        this.autoMoveOnDragOut(data);
+};
+dragger.autoMoveOnDragOut = function (data) {
+    const { interaction, downData, canDragOut } = this;
+    const { autoDistance, dragOut } = interaction.m;
+    if (!dragOut || !canDragOut || !autoDistance)
+        return;
+    const bounds = interaction.shrinkCanvasBounds;
+    const { x, y } = bounds;
+    const right = core.BoundsHelper.maxX(bounds);
+    const bottom = core.BoundsHelper.maxY(bounds);
+    const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0);
+    const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0);
+    let totalX = 0, totalY = 0;
+    this.autoMoveTimer = setInterval(() => {
+        totalX += moveX;
+        totalY += moveY;
+        core.PointHelper.move(downData, moveX, moveY);
+        core.PointHelper.move(this.dragData, moveX, moveY);
+        interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
+        interaction.pointerMoveReal(data);
+    }, 10);
+};
+dragger.autoMoveCancel = function () {
+    if (this.autoMoveTimer) {
+        clearInterval(this.autoMoveTimer);
+        this.autoMoveTimer = 0;
+    }
+};
+
+exports.LeaferTypeCreator = LeaferTypeCreator;
+exports.MultiTouchHelper = MultiTouchHelper;
+exports.Transformer = Transformer;
+exports.WheelEventHelper = WheelEventHelper;
+exports.addViewport = addViewport;
+exports.addViewportConfig = addViewportConfig;