@leafer-in/viewport 1.7.0 → 1.9.0

package/dist/viewport.cjs

@@ -1,28 +1,32 @@
-'use strict';
+"use strict";
 
-var core = require('@leafer-ui/core');
+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) => {
+    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;
+    }), leafer.on_(core.ZoomEvent.BEFORE_ZOOM, e => {
+        const {zoomLayer: zoomLayer} = leafer;
         const changeScale = leafer.getValidScale(e.scale);
-        if (changeScale !== 1)
-            zoomLayer.scaleOfWorld(e, changeScale);
+        if (changeScale !== 1) zoomLayer.scaleOfWorld(e, changeScale);
     }));
 }
+
 function addViewportConfig(leafer, mergeConfig) {
     const viewportConfig = {
-        wheel: { preventDefault: true },
-        touch: { preventDefault: true },
-        pointer: { preventDefaultMenu: true }
+        wheel: {
+            preventDefault: true
+        },
+        touch: {
+            preventDefault: true
+        },
+        pointer: {
+            preventDefaultMenu: true
+        }
     };
-    if (mergeConfig)
-        core.DataHelper.assign(viewportConfig, mergeConfig);
+    if (mergeConfig) core.DataHelper.assign(viewportConfig, mergeConfig);
     core.DataHelper.assign(leafer.config, viewportConfig, leafer.userConfig);
 }
 
@@ -33,24 +37,29 @@ function custom(leafer) {
 function design(leafer) {
     addViewport(leafer, {
         zoom: {
-            min: 0.01,
+            min: .01,
             max: 256
         },
         move: {
             holdSpaceKey: true,
-            holdMiddleKey: true,
+            holdMiddleKey: true
         }
     });
 }
 
 function document(leafer) {
     addViewport(leafer, {
-        zoom: { min: 1 },
-        move: { scroll: 'limit' }
+        zoom: {
+            min: 1
+        },
+        move: {
+            scroll: "limit"
+        }
     });
 }
 
-const debug = core.Debug.get('LeaferTypeCreator');
+const debug = core.Debug.get("LeaferTypeCreator");
+
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
@@ -62,78 +71,92 @@ const LeaferTypeCreator = {
         fn && fn(leafer);
     }
 };
-const { list, register } = LeaferTypeCreator;
-register('viewport', addViewport);
-register('custom', custom);
-register('design', design);
-register('document', document);
+
+const {list: list, register: 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 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 };
+        return {
+            move: move,
+            scale: scale,
+            rotation: rotation,
+            center: center
+        };
     }
 };
 
 const WheelEventHelper = {
     getMove(event, config) {
-        let { moveSpeed } = config;
-        let { deltaX, deltaY } = event;
+        let {moveSpeed: moveSpeed} = config;
+        let {deltaX: deltaX, deltaY: 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 };
+        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;
+        let {zoomMode: zoomMode, zoomSpeed: 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 = 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;
+            if (scale < .5) scale = .5;
+            if (scale >= 1.5) scale = 1.5;
         }
         return scale;
     }
 };
 
 class Transformer {
-    get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
+    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';
+        const {interaction: 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 });
+            this.moveData = Object.assign(Object.assign({}, data), {
+                moveX: 0,
+                moveY: 0
+            });
             interaction.emit(core.MoveEvent.START, this.moveData);
         }
         data.path = this.moveData.path;
@@ -142,10 +165,12 @@ class Transformer {
         this.transformEndWait();
     }
     zoom(data) {
-        const { interaction } = this;
+        const {interaction: interaction} = this;
         if (!this.zoomData) {
             this.setPath(data);
-            this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+            this.zoomData = Object.assign(Object.assign({}, data), {
+                scale: 1
+            });
             interaction.emit(core.ZoomEvent.START, this.zoomData);
         }
         data.path = this.zoomData.path;
@@ -154,10 +179,12 @@ class Transformer {
         this.transformEndWait();
     }
     rotate(data) {
-        const { interaction } = this;
+        const {interaction: interaction} = this;
         if (!this.rotateData) {
             this.setPath(data);
-            this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+            this.rotateData = Object.assign(Object.assign({}, data), {
+                rotation: 0
+            });
             interaction.emit(core.RotateEvent.START, this.rotateData);
         }
         data.path = this.rotateData.path;
@@ -166,8 +193,8 @@ class Transformer {
         this.transformEndWait();
     }
     setPath(data) {
-        const { interaction } = this;
-        const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
+        const {interaction: interaction} = this;
+        const {path: path} = interaction.selector.getByPoint(data, interaction.hitRadius);
         data.path = path;
         interaction.cancelHover();
     }
@@ -178,13 +205,10 @@ class Transformer {
         }, 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);
+        const {interaction: interaction, moveData: moveData, zoomData: zoomData, rotateData: 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() {
@@ -196,103 +220,99 @@ class Transformer {
 }
 
 const leafer = core.Leafer.prototype;
-const bounds = new core.Bounds();
-leafer.initType = function (type) {
+
+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;
+
+leafer.getValidMove = function(moveX, moveY) {
+    const {scroll: scroll, disabled: 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 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: x, y: y, width: width, height: 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;
+            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 };
+    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;
+
+leafer.getValidScale = function(changeScale) {
+    const {scaleX: scaleX} = this.zoomLayer.__, {min: min, max: max, disabled: 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 : changeScale;
 };
 
 function getMoveEventData(move, event) {
-    return Object.assign(Object.assign({}, event), { moveX: move.x, moveY: move.y });
+    return Object.assign(Object.assign({}, event), {
+        moveX: move.x,
+        moveY: move.y
+    });
 }
+
 function getRotateEventData(rotation, event) {
-    return Object.assign(Object.assign({}, event), { rotation });
+    return Object.assign(Object.assign({}, event), {
+        rotation: rotation
+    });
 }
+
 function getZoomEventData(scale, event) {
-    return Object.assign(Object.assign({}, event), { scale });
+    return Object.assign(Object.assign({}, event), {
+        scale: scale
+    });
 }
+
 const interaction = core.InteractionBase.prototype;
-interaction.createTransformer = function () {
+
+interaction.createTransformer = function() {
     this.transformer = new Transformer(this);
 };
-interaction.move = function (data) {
+
+interaction.move = function(data) {
     this.transformer.move(data);
 };
-interaction.zoom = function (data) {
+
+interaction.zoom = function(data) {
     this.transformer.zoom(data);
 };
-interaction.rotate = function (data) {
+
+interaction.rotate = function(data) {
     this.transformer.rotate(data);
 };
-interaction.transformEnd = function () {
+
+interaction.transformEnd = function() {
     this.transformer.transformEnd();
 };
-interaction.wheel = function (data) {
-    const { wheel, pointer } = this.config, { posDeltaSpeed, negDeltaSpeed } = wheel;
-    if (wheel.disabled)
-        return;
-    if (data.deltaX > 0)
-        posDeltaSpeed && (data.deltaX *= posDeltaSpeed);
-    else
-        negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
-    if (data.deltaY > 0)
-        posDeltaSpeed && (data.deltaY *= posDeltaSpeed);
-    else
-        negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
+
+interaction.wheel = function(data) {
+    const {wheel: wheel, pointer: pointer} = this.config, {posDeltaSpeed: posDeltaSpeed, negDeltaSpeed: negDeltaSpeed} = wheel;
+    if (wheel.disabled) return;
+    if (data.deltaX > 0) posDeltaSpeed && (data.deltaX *= posDeltaSpeed); else negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
+    if (data.deltaY > 0) posDeltaSpeed && (data.deltaY *= posDeltaSpeed); else negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
     const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
-    if (scale !== 1)
-        this.zoom(getZoomEventData(scale, data));
-    else {
+    if (scale !== 1) this.zoom(getZoomEventData(scale, data)); else {
         const move = wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel);
-        if (pointer.snap)
-            core.PointHelper.round(move);
+        if (pointer.snap) core.PointHelper.round(move);
         this.move(getMoveEventData(move, data));
     }
 };
-interaction.multiTouch = function (data, list) {
-    if (this.config.multiTouch.disabled)
-        return;
-    const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
+
+interaction.multiTouch = function(data, list) {
+    if (this.config.multiTouch.disabled) return;
+    const {move: move, rotation: rotation, scale: scale, center: center} = MultiTouchHelper.getData(list);
     Object.assign(data, center);
     data.multiTouch = true;
     this.pointerWaitCancel();
@@ -302,70 +322,83 @@ interaction.multiTouch = function (data, list) {
 };
 
 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);
+
+const {abs: abs} = Math;
+
+dragger.checkDragEndAnimate = function(data, speed) {
+    const {moveX: moveX, moveY: moveY} = this.dragData;
+    const absMoveX = abs(moveX), absMoveY = abs(moveY), minMove = speed ? 1 : .1;
+    const dragAnimate = this.canAnimate && this.moving && (absMoveX > minMove || absMoveY > minMove) && this.interaction.m.dragAnimate;
     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;
+        const inertia = data.pointerType === "touch" ? 3 : 1, maxMove = 70;
+        speed = speed ? core.isNumber(dragAnimate) ? dragAnimate : .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); });
+        this.animate(() => {
+            this.dragEnd(data, 1);
+        });
     }
     return dragAnimate;
 };
-dragger.animate = function (func, off) {
+
+dragger.animate = function(func, off) {
     const animateWait = func || this.animateWait;
-    if (animateWait)
-        this.interaction.target.nextRender(animateWait, null, off);
+    if (animateWait) this.interaction.target.nextRender(animateWait, null, off);
     this.animateWait = func;
 };
-dragger.checkDragOut = function (data) {
-    const { interaction } = this;
+
+dragger.checkDragOut = function(data) {
+    const {interaction: interaction} = this;
     this.autoMoveCancel();
-    if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
-        this.autoMoveOnDragOut(data);
+    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;
+
+dragger.autoMoveOnDragOut = function(data) {
+    const {interaction: interaction, downData: downData, canDragOut: canDragOut} = this;
+    const {autoDistance: autoDistance, dragOut: dragOut} = interaction.m;
+    if (!dragOut || !canDragOut || !autoDistance) return;
     const bounds = interaction.shrinkCanvasBounds;
-    const { x, y } = bounds;
+    const {x: x, y: 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);
+    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.move(Object.assign(Object.assign({}, data), {
+            moveX: moveX,
+            moveY: moveY,
+            totalX: totalX,
+            totalY: totalY,
+            moveType: "drag"
+        }));
         interaction.pointerMoveReal(data);
     }, 10);
 };
-dragger.autoMoveCancel = function () {
+
+dragger.autoMoveCancel = function() {
     if (this.autoMoveTimer) {
         clearInterval(this.autoMoveTimer);
         this.autoMoveTimer = 0;
     }
 };
 
-core.Plugin.add('viewport');
+core.Plugin.add("viewport");
 
 exports.LeaferTypeCreator = LeaferTypeCreator;
+
 exports.MultiTouchHelper = MultiTouchHelper;
+
 exports.Transformer = Transformer;
+
 exports.WheelEventHelper = WheelEventHelper;
+
 exports.addViewport = addViewport;
+
 exports.addViewportConfig = addViewportConfig;