@leafer-in/viewport 1.1.1

package/dist/viewport.js

@@ -0,0 +1,357 @@
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.viewport = (function (exports, core) {
+    'use strict';
+
+    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;
+
+    return exports;
+
+})({}, LeaferUI);

package/dist/viewport.min.cjs

@@ -0,0 +1 @@
+"use strict";var t=require("@leafer-ui/core");function e(e,a,i){o(e.parentApp?e.parentApp:e,a),e.isApp||i||e.__eventIds.push(e.on_(t.MoveEvent.BEFORE_MOVE,(t=>{e.zoomLayer.move(e.getValidMove(t.moveX,t.moveY))})),e.on_(t.ZoomEvent.BEFORE_ZOOM,(o=>{const{zoomLayer:a}=e,i=e.getValidScale(o.scale);1!==i&&(t.PointHelper.scaleOf(a,o,i),a.scale=a.__.scaleX*i)})))}function o(e,o){o&&t.DataHelper.assign(e.config,o),t.DataHelper.assign(e.config,{wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}},e.userConfig)}const a=t.Debug.get("LeaferTypeCreator"),i={list:{},register(t,e){n[t]&&a.repeat(t),n[t]=e},run(t,e){const o=n[t];o&&o(e)}},{list:n,register:s}=i;s("viewport",e),s("custom",(function(t){e(t,null,!0)})),s("design",(function(t){e(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})})),s("document",(function(t){e(t,{zoom:{min:1},move:{scroll:"limit"}})}));const r={getData(e){const o=e[0],a=e[1],i=t.PointHelper.getCenter(o.from,a.from),n=t.PointHelper.getCenter(o.to,a.to),s={x:n.x-i.x,y:n.y-i.y},r=t.PointHelper.getDistance(o.from,a.from);return{move:s,scale:t.PointHelper.getDistance(o.to,a.to)/r,rotation:t.PointHelper.getRotation(o.from,a.from,o.to,a.to),center:n}}},c={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(e,o){let a,i=1,{zoomMode:n,zoomSpeed:s}=o;const r=e.deltaY||e.deltaX;if(n?(a="mouse"===n||!e.deltaX&&(t.Platform.intWheelDeltaY?Math.abs(r)>17:Math.ceil(r)!==r),(e.shiftKey||e.metaKey||e.ctrlKey)&&(a=!0)):a=!e.shiftKey&&(e.metaKey||e.ctrlKey),a){s=t.MathHelper.within(s,0,1);i=1-r/(4*(e.deltaY?o.delta.y:o.delta.x))*s,i<.5&&(i=.5),i>=1.5&&(i=1.5)}return i}};class m{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.MoveEvent.START,this.moveData)),e.path=this.moveData.path,o.emit(t.MoveEvent.BEFORE_MOVE,e),o.emit(t.MoveEvent.MOVE,e),this.transformEndWait()}zoom(e){const{interaction:o}=this;this.zoomData||(this.setPath(e),this.zoomData=Object.assign(Object.assign({},e),{scale:1}),o.emit(t.ZoomEvent.START,this.zoomData)),e.path=this.zoomData.path,o.emit(t.ZoomEvent.BEFORE_ZOOM,e),o.emit(t.ZoomEvent.ZOOM,e),this.transformEndWait()}rotate(e){const{interaction:o}=this;this.rotateData||(this.setPath(e),this.rotateData=Object.assign(Object.assign({},e),{rotation:0}),o.emit(t.RotateEvent.START,this.rotateData)),e.path=this.rotateData.path,o.emit(t.RotateEvent.BEFORE_ROTATE,e),o.emit(t.RotateEvent.ROTATE,e),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:e,moveData:o,zoomData:a,rotateData:i}=this;o&&e.emit(t.MoveEvent.END,o),a&&e.emit(t.ZoomEvent.END,a),i&&e.emit(t.RotateEvent.END,i),this.reset()}reset(){this.zoomData=this.moveData=this.rotateData=null}destroy(){this.reset()}}const h=t.Leafer.prototype,l=new t.Bounds;function u(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function v(t,e){return Object.assign(Object.assign({},e),{scale:t})}h.initType=function(t){i.run(t,this)},h.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}=l.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}},h.getValidScale=function(e){const{scaleX:o}=this.zoomLayer.__,{min:a,max:i,disabled:n}=this.app.config.zoom,s=Math.abs(o*e);return a&&s<a?e=a/o:i&&s>i&&(e=i/o),n?1:t.MathHelper.float(e)};const f=t.InteractionBase.prototype;f.createTransformer=function(){this.transformer=new m(this)},f.move=function(t){this.transformer.move(t)},f.zoom=function(t){this.transformer.zoom(t)},f.rotate=function(t){this.transformer.rotate(t)},f.transformEnd=function(){this.transformer.transformEnd()},f.wheel=function(t){const{wheel:e}=this.config;if(e.disabled)return;const o=e.getScale?e.getScale(t,e):c.getScale(t,e);1!==o?this.zoom(v(o,t)):this.move(u(e.getMove?e.getMove(t,e):c.getMove(t,e),t))},f.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=r.getData(e);Object.assign(t,n),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(v(i,t)),this.move(u(o,t))};const g=t.Dragger.prototype,{abs:p}=Math;g.checkDragEndAnimate=function(e,o){const{moveX:a,moveY:i}=this.dragData,n=p(a),s=p(i),r=o?1:.1,c=this.interaction.m.dragAnimate&&this.canAnimate&&this.moving&&(n>r||s>r);if(c){const r="touch"===e.pointerType?3:1,c=70;n*(o=o?.95:r)>c?o=c/n:s*o>c&&(o=c/s),e=Object.assign({},e),t.PointHelper.move(e,a*o,i*o),this.drag(e),this.animate((()=>{this.dragEnd(e,1)}))}return c},g.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},g.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},g.autoMoveOnDragOut=function(e){const{interaction:o,downData:a,canDragOut:i}=this,{autoDistance:n,dragOut:s}=o.m;if(!s||!i||!n)return;const r=o.shrinkCanvasBounds,{x:c,y:m}=r,h=t.BoundsHelper.maxX(r),l=t.BoundsHelper.maxY(r),u=e.x<c?n:h<e.x?-n:0,v=e.y<m?n:l<e.y?-n:0;let f=0,g=0;this.autoMoveTimer=setInterval((()=>{f+=u,g+=v,t.PointHelper.move(a,u,v),t.PointHelper.move(this.dragData,u,v),o.move(Object.assign(Object.assign({},e),{moveX:u,moveY:v,totalX:f,totalY:g,moveType:"drag"})),o.pointerMoveReal(e)}),10)},g.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)},exports.LeaferTypeCreator=i,exports.MultiTouchHelper=r,exports.Transformer=m,exports.WheelEventHelper=c,exports.addViewport=e,exports.addViewportConfig=o;

package/dist/viewport.min.js

@@ -0,0 +1 @@
+this.LeaferIN=this.LeaferIN||{},this.LeaferIN.viewport=function(t,e){"use strict";function o(t,o,i){a(t.parentApp?t.parentApp:t,o),t.isApp||i||t.__eventIds.push(t.on_(e.MoveEvent.BEFORE_MOVE,(e=>{t.zoomLayer.move(t.getValidMove(e.moveX,e.moveY))})),t.on_(e.ZoomEvent.BEFORE_ZOOM,(o=>{const{zoomLayer:a}=t,i=t.getValidScale(o.scale);1!==i&&(e.PointHelper.scaleOf(a,o,i),a.scale=a.__.scaleX*i)})))}function a(t,o){o&&e.DataHelper.assign(t.config,o),e.DataHelper.assign(t.config,{wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}},t.userConfig)}const i=e.Debug.get("LeaferTypeCreator"),n={list:{},register(t,e){s[t]&&i.repeat(t),s[t]=e},run(t,e){const o=s[t];o&&o(e)}},{list:s,register:r}=n;r("viewport",o),r("custom",(function(t){o(t,null,!0)})),r("design",(function(t){o(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})})),r("document",(function(t){o(t,{zoom:{min:1},move:{scroll:"limit"}})}));const c={getData(t){const o=t[0],a=t[1],i=e.PointHelper.getCenter(o.from,a.from),n=e.PointHelper.getCenter(o.to,a.to),s={x:n.x-i.x,y:n.y-i.y},r=e.PointHelper.getDistance(o.from,a.from);return{move:s,scale:e.PointHelper.getDistance(o.to,a.to)/r,rotation:e.PointHelper.getRotation(o.from,a.from,o.to,a.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,o){let a,i=1,{zoomMode:n,zoomSpeed:s}=o;const r=t.deltaY||t.deltaX;if(n?(a="mouse"===n||!t.deltaX&&(e.Platform.intWheelDeltaY?Math.abs(r)>17:Math.ceil(r)!==r),(t.shiftKey||t.metaKey||t.ctrlKey)&&(a=!0)):a=!t.shiftKey&&(t.metaKey||t.ctrlKey),a){s=e.MathHelper.within(s,0,1);i=1-r/(4*(t.deltaY?o.delta.y:o.delta.x))*s,i<.5&&(i=.5),i>=1.5&&(i=1.5)}return i}};class h{get transforming(){return!!(this.moveData||this.zoomData||this.rotateData)}constructor(t){this.interaction=t}move(t){const{interaction:o}=this;t.moveType||(t.moveType="move"),this.moveData||(this.setPath(t),this.moveData=Object.assign(Object.assign({},t),{moveX:0,moveY:0}),o.emit(e.MoveEvent.START,this.moveData)),t.path=this.moveData.path,o.emit(e.MoveEvent.BEFORE_MOVE,t),o.emit(e.MoveEvent.MOVE,t),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.ZoomEvent.START,this.zoomData)),t.path=this.zoomData.path,o.emit(e.ZoomEvent.BEFORE_ZOOM,t),o.emit(e.ZoomEvent.ZOOM,t),this.transformEndWait()}rotate(t){const{interaction:o}=this;this.rotateData||(this.setPath(t),this.rotateData=Object.assign(Object.assign({},t),{rotation:0}),o.emit(e.RotateEvent.START,this.rotateData)),t.path=this.rotateData.path,o.emit(e.RotateEvent.BEFORE_ROTATE,t),o.emit(e.RotateEvent.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:t,moveData:o,zoomData:a,rotateData:i}=this;o&&t.emit(e.MoveEvent.END,o),a&&t.emit(e.ZoomEvent.END,a),i&&t.emit(e.RotateEvent.END,i),this.reset()}reset(){this.zoomData=this.moveData=this.rotateData=null}destroy(){this.reset()}}const l=e.Leafer.prototype,u=new e.Bounds;function v(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function f(t,e){return Object.assign(Object.assign({},e),{scale:t})}l.initType=function(t){n.run(t,this)},l.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}=u.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}},l.getValidScale=function(t){const{scaleX:o}=this.zoomLayer.__,{min:a,max:i,disabled:n}=this.app.config.zoom,s=Math.abs(o*t);return a&&s<a?t=a/o:i&&s>i&&(t=i/o),n?1:e.MathHelper.float(t)};const g=e.InteractionBase.prototype;g.createTransformer=function(){this.transformer=new h(this)},g.move=function(t){this.transformer.move(t)},g.zoom=function(t){this.transformer.zoom(t)},g.rotate=function(t){this.transformer.rotate(t)},g.transformEnd=function(){this.transformer.transformEnd()},g.wheel=function(t){const{wheel:e}=this.config;if(e.disabled)return;const o=e.getScale?e.getScale(t,e):m.getScale(t,e);1!==o?this.zoom(f(o,t)):this.move(v(e.getMove?e.getMove(t,e):m.getMove(t,e),t))},g.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=c.getData(e);Object.assign(t,n),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(f(i,t)),this.move(v(o,t))};const d=e.Dragger.prototype,{abs:p}=Math;return d.checkDragEndAnimate=function(t,o){const{moveX:a,moveY:i}=this.dragData,n=p(a),s=p(i),r=o?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*(o=o?.95:r)>c?o=c/n:s*o>c&&(o=c/s),t=Object.assign({},t),e.PointHelper.move(t,a*o,i*o),this.drag(t),this.animate((()=>{this.dragEnd(t,1)}))}return c},d.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},d.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},d.autoMoveOnDragOut=function(t){const{interaction:o,downData:a,canDragOut:i}=this,{autoDistance:n,dragOut:s}=o.m;if(!s||!i||!n)return;const r=o.shrinkCanvasBounds,{x:c,y:m}=r,h=e.BoundsHelper.maxX(r),l=e.BoundsHelper.maxY(r),u=t.x<c?n:h<t.x?-n:0,v=t.y<m?n:l<t.y?-n:0;let f=0,g=0;this.autoMoveTimer=setInterval((()=>{f+=u,g+=v,e.PointHelper.move(a,u,v),e.PointHelper.move(this.dragData,u,v),o.move(Object.assign(Object.assign({},t),{moveX:u,moveY:v,totalX:f,totalY:g,moveType:"drag"})),o.pointerMoveReal(t)}),10)},d.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)},t.LeaferTypeCreator=n,t.MultiTouchHelper=c,t.Transformer=h,t.WheelEventHelper=m,t.addViewport=o,t.addViewportConfig=a,t}({},LeaferUI);

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@leafer-in/viewport",
+  "version": "1.1.1",
+  "description": "@leafer-in/viewport",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/viewport.esm.js",
+  "exports": {
+    "import": "./dist/viewport.esm.js",
+    "require": "./dist/viewport.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/viewport.js",
+  "jsdelivr": "dist/viewport.js",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/viewport",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer viewport",
+    "leafer-viewport",
+    "leafer-in",
+    "viewport",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/core": "^1.1.1",
+    "@leafer-ui/interface": "^1.1.1",
+    "@leafer-in/interface": "^1.1.1"
+  }
+}

package/src/Leafer.ts

@@ -0,0 +1,46 @@
+import { ILeaferType, IPointData } from '@leafer-ui/interface'
+
+import { Leafer, Bounds, MathHelper } from '@leafer-ui/core'
+
+import { LeaferTypeCreator } from './LeaferTypeCreator'
+
+
+const leafer = Leafer.prototype
+const bounds = new Bounds()
+
+leafer.initType = function (type: ILeaferType) {
+    LeaferTypeCreator.run(type, this)
+}
+
+leafer.getValidMove = function (moveX: number, moveY: number): IPointData {
+    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 as IPointData)
+            const right = x + width - this.width, bottom = y + height - this.height
+
+            if (x >= 0 && right <= 0) moveX = 0 // includeX
+            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 // includeY
+            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: number): number {
+    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 : MathHelper.float(changeScale)
+}

package/src/LeaferTypeCreator.ts

@@ -0,0 +1,34 @@
+import { ILeaferBase, ILeaferTypeList, ILeaferTypeFunction } from '@leafer-ui/interface'
+
+import { Debug } from '@leafer-ui/core'
+
+import { addViewport } from './type/viewport'
+import { custom } from './type/custom'
+import { design } from './type/design'
+import { document } from './type/document'
+
+
+const debug = Debug.get('LeaferTypeCreator')
+
+export const LeaferTypeCreator = {
+
+    list: {} as ILeaferTypeList,
+
+    register(name: string, fn: ILeaferTypeFunction): void {
+        list[name] && debug.repeat(name)
+        list[name] = fn
+    },
+
+    run(name: string, leafer: ILeaferBase): void {
+        const fn = list[name]
+        fn && fn(leafer)
+    }
+
+}
+
+const { list, register } = LeaferTypeCreator
+
+register('viewport', addViewport)
+register('custom', custom)
+register('design', design)
+register('document', document)

package/src/index.ts

@@ -0,0 +1,9 @@
+export { LeaferTypeCreator } from './LeaferTypeCreator'
+export { addViewport, addViewportConfig } from './type/viewport'
+export { MultiTouchHelper } from './interaction/MultiTouchHelper'
+export { WheelEventHelper } from './interaction/WheelEventHelper'
+export { Transformer } from './interaction/Transformer'
+
+import './Leafer'
+import './interaction/Interaction'
+import './interaction/Dragger'

package/src/interaction/Dragger.ts

@@ -0,0 +1,73 @@
+import { IPointerEvent, IFunction } from '@leafer-ui/interface'
+
+import { Dragger, BoundsHelper, PointHelper } from '@leafer-ui/core'
+
+
+const dragger = Dragger.prototype
+const { abs } = Math
+
+dragger.checkDragEndAnimate = function (data: IPointerEvent, speed?: number): boolean {
+    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 = { ...data }
+        PointHelper.move(data, moveX * speed, moveY * speed)
+
+        this.drag(data)
+        this.animate(() => { this.dragEnd(data, 1) })
+    }
+
+    return dragAnimate
+}
+
+dragger.animate = function (func?: IFunction, off?: 'off'): void { // dragEnd animation
+    const animateWait = func || this.animateWait
+    if (animateWait) this.interaction.target.nextRender(animateWait, null, off)
+    this.animateWait = func
+}
+
+dragger.checkDragOut = function (data: IPointerEvent): void {
+    const { interaction } = this
+    this.autoMoveCancel()
+    if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data)) this.autoMoveOnDragOut(data)
+}
+
+dragger.autoMoveOnDragOut = function (data: IPointerEvent): void {
+    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 = 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)
+    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({ ...data, moveX, moveY, totalX, totalY, moveType: 'drag' })
+        interaction.pointerMoveReal(data)
+    }, 10)
+}
+
+dragger.autoMoveCancel = function (): void {
+    if (this.autoMoveTimer) {
+        clearInterval(this.autoMoveTimer)
+        this.autoMoveTimer = 0
+    }
+}

package/src/interaction/Interaction.ts

@@ -0,0 +1,63 @@
+import { IMoveEvent, IZoomEvent, IRotateEvent, IWheelEvent, IUIEvent, IKeepTouchData, IPointData, IEvent } from '@leafer-ui/interface'
+
+import { InteractionBase } from '@leafer-ui/core'
+
+import { WheelEventHelper } from './WheelEventHelper'
+import { Transformer } from './Transformer'
+import { MultiTouchHelper } from './MultiTouchHelper'
+
+
+function getMoveEventData(move: IPointData, event: IEvent): IMoveEvent {
+    return { ...event, moveX: move.x, moveY: move.y } as IMoveEvent
+}
+
+function getRotateEventData(rotation: number, event: IEvent): IRotateEvent {
+    return { ...event, rotation } as IRotateEvent
+}
+
+function getZoomEventData(scale: number, event: IEvent): IZoomEvent {
+    return { ...event, scale, } as IZoomEvent
+}
+
+
+const interaction = InteractionBase.prototype
+
+interaction.createTransformer = function (): void {
+    this.transformer = new Transformer(this)
+}
+
+interaction.move = function (data: IMoveEvent): void {
+    this.transformer.move(data)
+}
+
+interaction.zoom = function (data: IZoomEvent): void {
+    this.transformer.zoom(data)
+}
+
+interaction.rotate = function (data: IRotateEvent): void {
+    this.transformer.rotate(data)
+}
+
+interaction.transformEnd = function (): void {
+    this.transformer.transformEnd()
+}
+
+
+interaction.wheel = function (data: IWheelEvent): void {
+    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: IUIEvent, list: IKeepTouchData[]): void {
+    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))
+}