@leafer-in/viewport 1.8.0 → 1.9.0

package/dist/viewport.esm.js

@@ -1,26 +1,30 @@
-import { MoveEvent, ZoomEvent, DataHelper, Debug, PointHelper, Platform, MathHelper, RotateEvent, Leafer, Bounds, InteractionBase, Dragger, BoundsHelper, Plugin } from '@leafer-ui/core';
+import { MoveEvent, ZoomEvent, DataHelper, Debug, PointHelper, Platform, MathHelper, RotateEvent, Leafer, Bounds, InteractionBase, Dragger, isNumber, BoundsHelper, Plugin } from "@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_(MoveEvent.BEFORE_MOVE, (e) => {
+    if (leafer.isApp || custom) return;
+    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, e => {
         leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
-    }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
-        const { zoomLayer } = leafer;
+    }), leafer.on_(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)
-        DataHelper.assign(viewportConfig, mergeConfig);
+    if (mergeConfig) DataHelper.assign(viewportConfig, mergeConfig);
     DataHelper.assign(leafer.config, viewportConfig, leafer.userConfig);
 }
 
@@ -31,24 +35,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 = Debug.get('LeaferTypeCreator');
+const debug = Debug.get("LeaferTypeCreator");
+
 const LeaferTypeCreator = {
     list: {},
     register(name, fn) {
@@ -60,78 +69,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 = PointHelper.getCenter(a.from, b.from);
         const center = 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 = PointHelper.getDistance(a.from, b.from);
         const distance = PointHelper.getDistance(a.to, b.to);
         const scale = distance / lastDistance;
         const rotation = 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 && (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 && (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 = 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(MoveEvent.START, this.moveData);
         }
         data.path = this.moveData.path;
@@ -140,10 +163,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(ZoomEvent.START, this.zoomData);
         }
         data.path = this.zoomData.path;
@@ -152,10 +177,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(RotateEvent.START, this.rotateData);
         }
         data.path = this.rotateData.path;
@@ -164,8 +191,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();
     }
@@ -176,13 +203,10 @@ class Transformer {
         }, this.interaction.p.transformTime);
     }
     transformEnd() {
-        const { interaction, moveData, zoomData, rotateData } = this;
-        if (moveData)
-            interaction.emit(MoveEvent.END, moveData);
-        if (zoomData)
-            interaction.emit(ZoomEvent.END, zoomData);
-        if (rotateData)
-            interaction.emit(RotateEvent.END, rotateData);
+        const {interaction: interaction, moveData: moveData, zoomData: zoomData, rotateData: rotateData} = this;
+        if (moveData) interaction.emit(MoveEvent.END, moveData);
+        if (zoomData) interaction.emit(ZoomEvent.END, zoomData);
+        if (rotateData) interaction.emit(RotateEvent.END, rotateData);
         this.reset();
     }
     reset() {
@@ -194,103 +218,99 @@ class Transformer {
 }
 
 const leafer = Leafer.prototype;
-const bounds = new Bounds();
-leafer.initType = function (type) {
+
+const bounds = new 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 = 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)
-            PointHelper.round(move);
+        if (pointer.snap) 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();
@@ -300,65 +320,73 @@ interaction.multiTouch = function (data, list) {
 };
 
 const dragger = 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 ? isNumber(dragAnimate) ? dragAnimate : .95 : inertia;
+        if (absMoveX * speed > maxMove) speed = maxMove / absMoveX; else if (absMoveY * speed > maxMove) speed = maxMove / absMoveY;
         data = Object.assign({}, data);
         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 = BoundsHelper.maxX(bounds);
     const bottom = 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;
         PointHelper.move(downData, moveX, moveY);
         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;
     }
 };
 
-Plugin.add('viewport');
+Plugin.add("viewport");
 
 export { LeaferTypeCreator, MultiTouchHelper, Transformer, WheelEventHelper, addViewport, addViewportConfig };

package/dist/viewport.esm.min.js

@@ -1,2 +1,2 @@
-import{MoveEvent as t,ZoomEvent as e,DataHelper as o,Debug as a,PointHelper as i,Platform as n,MathHelper as s,RotateEvent as r,Leafer as c,Bounds as m,InteractionBase as h,Dragger as l,BoundsHelper as u,Plugin as d}from"@leafer-ui/core";function f(o,a,i){g(o.parentApp?o.parentApp:o,a),o.isApp||i||o.__eventIds.push(o.on_(t.BEFORE_MOVE,(t=>{o.zoomLayer.move(o.getValidMove(t.moveX,t.moveY))})),o.on_(e.BEFORE_ZOOM,(t=>{const{zoomLayer:e}=o,a=o.getValidScale(t.scale);1!==a&&e.scaleOfWorld(t,a)})))}function g(t,e){const a={wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}};e&&o.assign(a,e),o.assign(t.config,a,t.userConfig)}const v=a.get("LeaferTypeCreator"),p={list:{},register(t,e){D[t]&&v.repeat(t),D[t]=e},run(t,e){const o=D[t];o&&o(e)}},{list:D,register:O}=p;O("viewport",f),O("custom",(function(t){f(t,null,!0)})),O("design",(function(t){f(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})})),O("document",(function(t){f(t,{zoom:{min:1},move:{scroll:"limit"}})}));const y={getData(t){const e=t[0],o=t[1],a=i.getCenter(e.from,o.from),n=i.getCenter(e.to,o.to),s={x:n.x-a.x,y:n.y-a.y},r=i.getDistance(e.from,o.from);return{move:s,scale:i.getDistance(e.to,o.to)/r,rotation:i.getRotation(e.from,o.from,e.to,o.to),center:n}}},M={getMove(t,e){let{moveSpeed:o}=e,{deltaX:a,deltaY:i}=t;return t.shiftKey&&!a&&(a=i,i=0),a>50&&(a=Math.max(50,a/3)),i>50&&(i=Math.max(50,i/3)),{x:-a*o*2,y:-i*o*2}},getScale(t,e){let o,a=1,{zoomMode:i,zoomSpeed:r}=e;const c=t.deltaY||t.deltaX;if(i?(o="mouse"===i||!t.deltaX&&(n.intWheelDeltaY?Math.abs(c)>17:Math.ceil(c)!==c),(t.shiftKey||t.metaKey||t.ctrlKey)&&(o=!0)):o=!t.shiftKey&&(t.metaKey||t.ctrlKey),o){r=s.within(r,0,1);a=1-c/(4*(t.deltaY?e.delta.y:e.delta.x))*r,a<.5&&(a=.5),a>=1.5&&(a=1.5)}return a}};class T{get transforming(){return!!(this.moveData||this.zoomData||this.rotateData)}constructor(t){this.interaction=t}move(e){const{interaction:o}=this;e.moveType||(e.moveType="move"),this.moveData||(this.setPath(e),this.moveData=Object.assign(Object.assign({},e),{moveX:0,moveY:0}),o.emit(t.START,this.moveData)),e.path=this.moveData.path,o.emit(t.BEFORE_MOVE,e),o.emit(t.MOVE,e),this.transformEndWait()}zoom(t){const{interaction:o}=this;this.zoomData||(this.setPath(t),this.zoomData=Object.assign(Object.assign({},t),{scale:1}),o.emit(e.START,this.zoomData)),t.path=this.zoomData.path,o.emit(e.BEFORE_ZOOM,t),o.emit(e.ZOOM,t),this.transformEndWait()}rotate(t){const{interaction:e}=this;this.rotateData||(this.setPath(t),this.rotateData=Object.assign(Object.assign({},t),{rotation:0}),e.emit(r.START,this.rotateData)),t.path=this.rotateData.path,e.emit(r.BEFORE_ROTATE,t),e.emit(r.ROTATE,t),this.transformEndWait()}setPath(t){const{interaction:e}=this,{path:o}=e.selector.getByPoint(t,e.hitRadius);t.path=o,e.cancelHover()}transformEndWait(){clearTimeout(this.transformTimer),this.transformTimer=setTimeout((()=>{this.transformEnd()}),this.interaction.p.transformTime)}transformEnd(){const{interaction:o,moveData:a,zoomData:i,rotateData:n}=this;a&&o.emit(t.END,a),i&&o.emit(e.END,i),n&&o.emit(r.END,n),this.reset()}reset(){this.zoomData=this.moveData=this.rotateData=null}destroy(){this.reset()}}const E=c.prototype,b=new m;function z(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function x(t,e){return Object.assign(Object.assign({},e),{scale:t})}E.initType=function(t){p.run(t,this)},E.getValidMove=function(t,e){const{scroll:o,disabled:a}=this.app.config.move;if(o){const a=!0===o?"":o;if(a.includes("x")?(t=t||e,e=0):a.includes("y")?(e=e||t,t=0):Math.abs(t)>Math.abs(e)?e=0:t=0,a.includes("limit")){const{x:o,y:a,width:i,height:n}=b.set(this.__world).addPoint(this.zoomLayer),s=o+i-this.width,r=a+n-this.height;o>=0&&s<=0?t=0:t>0?o+t>0&&(t=-o):t<0&&s+t<0&&(t=-s),a>=0&&r<=0?e=0:e>0?a+e>0&&(e=-a):e<0&&r+e<0&&(e=-r)}}return{x:a?0:t,y:a?0:e}},E.getValidScale=function(t){const{scaleX:e}=this.zoomLayer.__,{min:o,max:a,disabled:i}=this.app.config.zoom,n=Math.abs(e*t);return o&&n<o?t=o/e:a&&n>a&&(t=a/e),i?1:t};const j=h.prototype;j.createTransformer=function(){this.transformer=new T(this)},j.move=function(t){this.transformer.move(t)},j.zoom=function(t){this.transformer.zoom(t)},j.rotate=function(t){this.transformer.rotate(t)},j.transformEnd=function(){this.transformer.transformEnd()},j.wheel=function(t){const{wheel:e,pointer:o}=this.config,{posDeltaSpeed:a,negDeltaSpeed:n}=e;if(e.disabled)return;t.deltaX>0?a&&(t.deltaX*=a):n&&(t.deltaX*=n),t.deltaY>0?a&&(t.deltaY*=a):n&&(t.deltaY*=n);const s=e.getScale?e.getScale(t,e):M.getScale(t,e);if(1!==s)this.zoom(x(s,t));else{const a=e.getMove?e.getMove(t,e):M.getMove(t,e);o.snap&&i.round(a),this.move(z(a,t))}},j.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=y.getData(e);Object.assign(t,n),t.multiTouch=!0,this.pointerWaitCancel(),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(x(i,t)),this.move(z(o,t))};const R=l.prototype,{abs:S}=Math;R.checkDragEndAnimate=function(t,e){const{moveX:o,moveY:a}=this.dragData,n=S(o),s=S(a),r=e?1:.1,c=this.interaction.m.dragAnimate&&this.canAnimate&&this.moving&&(n>r||s>r);if(c){const r="touch"===t.pointerType?3:1,c=70;n*(e=e?.95:r)>c?e=c/n:s*e>c&&(e=c/s),t=Object.assign({},t),i.move(t,o*e,a*e),this.drag(t),this.animate((()=>{this.dragEnd(t,1)}))}return c},R.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},R.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},R.autoMoveOnDragOut=function(t){const{interaction:e,downData:o,canDragOut:a}=this,{autoDistance:n,dragOut:s}=e.m;if(!s||!a||!n)return;const r=e.shrinkCanvasBounds,{x:c,y:m}=r,h=u.maxX(r),l=u.maxY(r),d=t.x<c?n:h<t.x?-n:0,f=t.y<m?n:l<t.y?-n:0;let g=0,v=0;this.autoMoveTimer=setInterval((()=>{g+=d,v+=f,i.move(o,d,f),i.move(this.dragData,d,f),e.move(Object.assign(Object.assign({},t),{moveX:d,moveY:f,totalX:g,totalY:v,moveType:"drag"})),e.pointerMoveReal(t)}),10)},R.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)},d.add("viewport");export{p as LeaferTypeCreator,y as MultiTouchHelper,T as Transformer,M as WheelEventHelper,f as addViewport,g as addViewportConfig};
+import{MoveEvent as t,ZoomEvent as e,DataHelper as o,Debug as a,PointHelper as i,Platform as n,MathHelper as s,RotateEvent as r,Leafer as c,Bounds as m,InteractionBase as h,Dragger as l,isNumber as u,BoundsHelper as d,Plugin as f}from"@leafer-ui/core";function g(o,a,i){v(o.parentApp?o.parentApp:o,a),o.isApp||i||o.__eventIds.push(o.on_(t.BEFORE_MOVE,t=>{o.zoomLayer.move(o.getValidMove(t.moveX,t.moveY))}),o.on_(e.BEFORE_ZOOM,t=>{const{zoomLayer:e}=o,a=o.getValidScale(t.scale);1!==a&&e.scaleOfWorld(t,a)}))}function v(t,e){const a={wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}};e&&o.assign(a,e),o.assign(t.config,a,t.userConfig)}const p=a.get("LeaferTypeCreator"),D={list:{},register(t,e){O[t]&&p.repeat(t),O[t]=e},run(t,e){const o=O[t];o&&o(e)}},{list:O,register:y}=D;y("viewport",g),y("custom",function(t){g(t,null,!0)}),y("design",function(t){g(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})}),y("document",function(t){g(t,{zoom:{min:1},move:{scroll:"limit"}})});const M={getData(t){const e=t[0],o=t[1],a=i.getCenter(e.from,o.from),n=i.getCenter(e.to,o.to),s={x:n.x-a.x,y:n.y-a.y},r=i.getDistance(e.from,o.from);return{move:s,scale:i.getDistance(e.to,o.to)/r,rotation:i.getRotation(e.from,o.from,e.to,o.to),center:n}}},T={getMove(t,e){let{moveSpeed:o}=e,{deltaX:a,deltaY:i}=t;return t.shiftKey&&!a&&(a=i,i=0),a>50&&(a=Math.max(50,a/3)),i>50&&(i=Math.max(50,i/3)),{x:-a*o*2,y:-i*o*2}},getScale(t,e){let o,a=1,{zoomMode:i,zoomSpeed:r}=e;const c=t.deltaY||t.deltaX;if(i?(o="mouse"===i||!t.deltaX&&(n.intWheelDeltaY?Math.abs(c)>17:Math.ceil(c)!==c),(t.shiftKey||t.metaKey||t.ctrlKey)&&(o=!0)):o=!t.shiftKey&&(t.metaKey||t.ctrlKey),o){r=s.within(r,0,1);a=1-c/(4*(t.deltaY?e.delta.y:e.delta.x))*r,a<.5&&(a=.5),a>=1.5&&(a=1.5)}return a}};class E{get transforming(){return!!(this.moveData||this.zoomData||this.rotateData)}constructor(t){this.interaction=t}move(e){const{interaction:o}=this;e.moveType||(e.moveType="move"),this.moveData||(this.setPath(e),this.moveData=Object.assign(Object.assign({},e),{moveX:0,moveY:0}),o.emit(t.START,this.moveData)),e.path=this.moveData.path,o.emit(t.BEFORE_MOVE,e),o.emit(t.MOVE,e),this.transformEndWait()}zoom(t){const{interaction:o}=this;this.zoomData||(this.setPath(t),this.zoomData=Object.assign(Object.assign({},t),{scale:1}),o.emit(e.START,this.zoomData)),t.path=this.zoomData.path,o.emit(e.BEFORE_ZOOM,t),o.emit(e.ZOOM,t),this.transformEndWait()}rotate(t){const{interaction:e}=this;this.rotateData||(this.setPath(t),this.rotateData=Object.assign(Object.assign({},t),{rotation:0}),e.emit(r.START,this.rotateData)),t.path=this.rotateData.path,e.emit(r.BEFORE_ROTATE,t),e.emit(r.ROTATE,t),this.transformEndWait()}setPath(t){const{interaction:e}=this,{path:o}=e.selector.getByPoint(t,e.hitRadius);t.path=o,e.cancelHover()}transformEndWait(){clearTimeout(this.transformTimer),this.transformTimer=setTimeout(()=>{this.transformEnd()},this.interaction.p.transformTime)}transformEnd(){const{interaction:o,moveData:a,zoomData:i,rotateData:n}=this;a&&o.emit(t.END,a),i&&o.emit(e.END,i),n&&o.emit(r.END,n),this.reset()}reset(){this.zoomData=this.moveData=this.rotateData=null}destroy(){this.reset()}}const b=c.prototype,z=new m;function x(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function j(t,e){return Object.assign(Object.assign({},e),{scale:t})}b.initType=function(t){D.run(t,this)},b.getValidMove=function(t,e){const{scroll:o,disabled:a}=this.app.config.move;if(o){const a=!0===o?"":o;if(a.includes("x")?(t=t||e,e=0):a.includes("y")?(e=e||t,t=0):Math.abs(t)>Math.abs(e)?e=0:t=0,a.includes("limit")){const{x:o,y:a,width:i,height:n}=z.set(this.__world).addPoint(this.zoomLayer),s=o+i-this.width,r=a+n-this.height;o>=0&&s<=0?t=0:t>0?o+t>0&&(t=-o):t<0&&s+t<0&&(t=-s),a>=0&&r<=0?e=0:e>0?a+e>0&&(e=-a):e<0&&r+e<0&&(e=-r)}}return{x:a?0:t,y:a?0:e}},b.getValidScale=function(t){const{scaleX:e}=this.zoomLayer.__,{min:o,max:a,disabled:i}=this.app.config.zoom,n=Math.abs(e*t);return o&&n<o?t=o/e:a&&n>a&&(t=a/e),i?1:t};const R=h.prototype;R.createTransformer=function(){this.transformer=new E(this)},R.move=function(t){this.transformer.move(t)},R.zoom=function(t){this.transformer.zoom(t)},R.rotate=function(t){this.transformer.rotate(t)},R.transformEnd=function(){this.transformer.transformEnd()},R.wheel=function(t){const{wheel:e,pointer:o}=this.config,{posDeltaSpeed:a,negDeltaSpeed:n}=e;if(e.disabled)return;t.deltaX>0?a&&(t.deltaX*=a):n&&(t.deltaX*=n),t.deltaY>0?a&&(t.deltaY*=a):n&&(t.deltaY*=n);const s=e.getScale?e.getScale(t,e):T.getScale(t,e);if(1!==s)this.zoom(j(s,t));else{const a=e.getMove?e.getMove(t,e):T.getMove(t,e);o.snap&&i.round(a),this.move(x(a,t))}},R.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=M.getData(e);Object.assign(t,n),t.multiTouch=!0,this.pointerWaitCancel(),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(j(i,t)),this.move(x(o,t))};const S=l.prototype,{abs:X}=Math;S.checkDragEndAnimate=function(t,e){const{moveX:o,moveY:a}=this.dragData,n=X(o),s=X(a),r=e?1:.1,c=this.canAnimate&&this.moving&&(n>r||s>r)&&this.interaction.m.dragAnimate;if(c){const r="touch"===t.pointerType?3:1,m=70;n*(e=e?u(c)?c:.95:r)>m?e=m/n:s*e>m&&(e=m/s),t=Object.assign({},t),i.move(t,o*e,a*e),this.drag(t),this.animate(()=>{this.dragEnd(t,1)})}return c},S.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},S.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},S.autoMoveOnDragOut=function(t){const{interaction:e,downData:o,canDragOut:a}=this,{autoDistance:n,dragOut:s}=e.m;if(!s||!a||!n)return;const r=e.shrinkCanvasBounds,{x:c,y:m}=r,h=d.maxX(r),l=d.maxY(r),u=t.x<c?n:h<t.x?-n:0,f=t.y<m?n:l<t.y?-n:0;let g=0,v=0;this.autoMoveTimer=setInterval(()=>{g+=u,v+=f,i.move(o,u,f),i.move(this.dragData,u,f),e.move(Object.assign(Object.assign({},t),{moveX:u,moveY:f,totalX:g,totalY:v,moveType:"drag"})),e.pointerMoveReal(t)},10)},S.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)},f.add("viewport");export{D as LeaferTypeCreator,M as MultiTouchHelper,E as Transformer,T as WheelEventHelper,g as addViewport,v as addViewportConfig};
 //# sourceMappingURL=viewport.esm.min.js.map