@leafer-in/viewport 1.1.1

package/dist/viewport.esm.js

@@ -0,0 +1,346 @@
+import { MoveEvent, ZoomEvent, PointHelper, DataHelper, Debug, Platform, MathHelper, RotateEvent, Leafer, Bounds, InteractionBase, Dragger, BoundsHelper } 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) => {
+        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
+    }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
+        const { zoomLayer } = leafer;
+        const changeScale = leafer.getValidScale(e.scale);
+        if (changeScale !== 1) {
+            PointHelper.scaleOf(zoomLayer, e, changeScale);
+            zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
+        }
+    }));
+}
+function addViewportConfig(leafer, mergeConfig) {
+    if (mergeConfig)
+        DataHelper.assign(leafer.config, mergeConfig);
+    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 = 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 = 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 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 };
+    }
+};
+
+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 && (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;
+        }
+        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(MoveEvent.START, this.moveData);
+        }
+        data.path = this.moveData.path;
+        interaction.emit(MoveEvent.BEFORE_MOVE, data);
+        interaction.emit(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(ZoomEvent.START, this.zoomData);
+        }
+        data.path = this.zoomData.path;
+        interaction.emit(ZoomEvent.BEFORE_ZOOM, data);
+        interaction.emit(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(RotateEvent.START, this.rotateData);
+        }
+        data.path = this.rotateData.path;
+        interaction.emit(RotateEvent.BEFORE_ROTATE, data);
+        interaction.emit(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(MoveEvent.END, moveData);
+        if (zoomData)
+            interaction.emit(ZoomEvent.END, zoomData);
+        if (rotateData)
+            interaction.emit(RotateEvent.END, rotateData);
+        this.reset();
+    }
+    reset() {
+        this.zoomData = this.moveData = this.rotateData = null;
+    }
+    destroy() {
+        this.reset();
+    }
+}
+
+const leafer = Leafer.prototype;
+const bounds = new 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 : 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 = 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 = 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);
+        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 = 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(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;
+    }
+};
+
+export { LeaferTypeCreator, MultiTouchHelper, Transformer, WheelEventHelper, addViewport, addViewportConfig };

package/dist/viewport.esm.min.js

@@ -0,0 +1 @@
+import{MoveEvent as t,ZoomEvent as e,PointHelper as o,DataHelper as a,Debug 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}from"@leafer-ui/core";function f(a,i,n){g(a.parentApp?a.parentApp:a,i),a.isApp||n||a.__eventIds.push(a.on_(t.BEFORE_MOVE,(t=>{a.zoomLayer.move(a.getValidMove(t.moveX,t.moveY))})),a.on_(e.BEFORE_ZOOM,(t=>{const{zoomLayer:e}=a,i=a.getValidScale(t.scale);1!==i&&(o.scaleOf(e,t,i),e.scale=e.__.scaleX*i)})))}function g(t,e){e&&a.assign(t.config,e),a.assign(t.config,{wheel:{preventDefault:!0},touch:{preventDefault:!0},pointer:{preventDefaultMenu:!0}},t.userConfig)}const v=i.get("LeaferTypeCreator"),d={list:{},register(t,e){p[t]&&v.repeat(t),p[t]=e},run(t,e){const o=p[t];o&&o(e)}},{list:p,register:D}=d;D("viewport",f),D("custom",(function(t){f(t,null,!0)})),D("design",(function(t){f(t,{zoom:{min:.01,max:256},move:{holdSpaceKey:!0,holdMiddleKey:!0}})})),D("document",(function(t){f(t,{zoom:{min:1},move:{scroll:"limit"}})}));const O={getData(t){const e=t[0],a=t[1],i=o.getCenter(e.from,a.from),n=o.getCenter(e.to,a.to),s={x:n.x-i.x,y:n.y-i.y},r=o.getDistance(e.from,a.from);return{move:s,scale:o.getDistance(e.to,a.to)/r,rotation:o.getRotation(e.from,a.from,e.to,a.to),center:n}}},y={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 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.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,T=new m;function b(t,e){return Object.assign(Object.assign({},e),{moveX:t.x,moveY:t.y})}function z(t,e){return Object.assign(Object.assign({},e),{scale:t})}E.initType=function(t){d.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}=T.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:s.float(t)};const x=h.prototype;x.createTransformer=function(){this.transformer=new M(this)},x.move=function(t){this.transformer.move(t)},x.zoom=function(t){this.transformer.zoom(t)},x.rotate=function(t){this.transformer.rotate(t)},x.transformEnd=function(){this.transformer.transformEnd()},x.wheel=function(t){const{wheel:e}=this.config;if(e.disabled)return;const o=e.getScale?e.getScale(t,e):y.getScale(t,e);1!==o?this.zoom(z(o,t)):this.move(b(e.getMove?e.getMove(t,e):y.getMove(t,e),t))},x.multiTouch=function(t,e){if(this.config.multiTouch.disabled)return;const{move:o,rotation:a,scale:i,center:n}=O.getData(e);Object.assign(t,n),this.rotate(function(t,e){return Object.assign(Object.assign({},e),{rotation:t})}(a,t)),this.zoom(z(i,t)),this.move(b(o,t))};const j=l.prototype,{abs:_}=Math;j.checkDragEndAnimate=function(t,e){const{moveX:a,moveY:i}=this.dragData,n=_(a),s=_(i),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),o.move(t,a*e,i*e),this.drag(t),this.animate((()=>{this.dragEnd(t,1)}))}return c},j.animate=function(t,e){const o=t||this.animateWait;o&&this.interaction.target.nextRender(o,null,e),this.animateWait=t},j.checkDragOut=function(t){const{interaction:e}=this;this.autoMoveCancel(),this.dragging&&!e.shrinkCanvasBounds.hitPoint(t)&&this.autoMoveOnDragOut(t)},j.autoMoveOnDragOut=function(t){const{interaction:e,downData:a,canDragOut:i}=this,{autoDistance:n,dragOut:s}=e.m;if(!s||!i||!n)return;const r=e.shrinkCanvasBounds,{x:c,y:m}=r,h=u.maxX(r),l=u.maxY(r),f=t.x<c?n:h<t.x?-n:0,g=t.y<m?n:l<t.y?-n:0;let v=0,d=0;this.autoMoveTimer=setInterval((()=>{v+=f,d+=g,o.move(a,f,g),o.move(this.dragData,f,g),e.move(Object.assign(Object.assign({},t),{moveX:f,moveY:g,totalX:v,totalY:d,moveType:"drag"})),e.pointerMoveReal(t)}),10)},j.autoMoveCancel=function(){this.autoMoveTimer&&(clearInterval(this.autoMoveTimer),this.autoMoveTimer=0)};export{d as LeaferTypeCreator,O as MultiTouchHelper,M as Transformer,y as WheelEventHelper,f as addViewport,g as addViewportConfig};