@tarojs/components/dist/esm-es5/taro-movable-area-core_2.entry.js

Taro 组件库

import{__awaiter,__generator}from"tslib";import{r as registerInstance,h,g as getElement,H as Host,c as createEvent}from"./index-ab3c86da.js";import{i as isElement}from"./index-a00a7418.js";var areaCss="taro-movable-area-core{width:10px;height:10px;display:block;position:relative}";var MovableArea=function(){function e(e){var t=this;registerInstance(this,e);this.views=[];this.scaleLength=0;this.viewsChanged=function(){t.views=[];var e=t.element.querySelectorAll("taro-movable-view-core");Array.from(e).forEach((function(e){t.views.push(e)}));t.updateArea()};this.handleTouchStart=function(e){var a=e.touches;if(!a||a.length<=1){return}var i={width:a[1].pageX-a[0].pageX,height:a[1].pageY-a[0].pageY};t.scaleLength=Math.sqrt(i.width*i.width+i.height*i.height);if(t.scaleArea){return}var n=function(e,t){var a=function(e,t){if(!(e=e.parentNode)){return false}return(!isElement(e)||e!==document.body)&&(e===t||e===t.element||e.element===t||a(e,t))};for(var i=0;i<t.length;i++){var n=t[i];if(e===n["element"]||a(e,n)){return n}}};var r=n(a[0].target,t.views);var s=n(a[1].target,t.views);t.scaleTarget=r&&r===s?r:undefined};this.handleTouchMove=function(e){var a=e.touches;if(!a||a.length<=1){return}e.preventDefault();var i={width:a[1].pageX-a[0].pageX,height:a[1].pageY-a[0].pageY};if(t.scaleLength>0){t.updateScale(Math.sqrt(i.width*i.width+i.height*i.height)/t.scaleLength)}};this.handleTouchEnd=function(e){var a,i;if(e.touches&&e.touches.length||!e.changedTouches){return}t.scaleLength=0;if(t.scaleArea){t.views.forEach((function(e){var t;(t=e["endScale"])===null||t===void 0?void 0:t.call(e)}))}else{(i=(a=t.scaleTarget)===null||a===void 0?void 0:a["endScale"])===null||i===void 0?void 0:i.call(a)}t.scaleTarget=undefined};this.updateScale=function(e){var a,i;if(!e||e===1){return}if(t.scaleArea){t.views.forEach((function(t){var a;(a=t["setScale"])===null||a===void 0?void 0:a.call(t,e)}))}else{(i=(a=t.scaleTarget)===null||a===void 0?void 0:a["setScale"])===null||i===void 0?void 0:i.call(a,e)}};this.updateArea=function(){var e=window.getComputedStyle(t.element);var a=t.element.getBoundingClientRect();var i=["Left","Right"].map((function(t){return parseFloat(e["border"+t+"Width"])+parseFloat(e["padding"+t])}));var n=["Top","Bottom"].map((function(t){return parseFloat(e["border"+t+"Width"])+parseFloat(e["padding"+t])}));t.views.forEach((function(e){var r;(r=e["setParent"])===null||r===void 0?void 0:r.call(e,{element:t.element,area:{height:a.height-n[0]-n[1],width:a.width-i[0]-i[1]}})}))};this.scaleArea=undefined}e.prototype.connectedCallback=function(){var e=this;this.observer=new MutationObserver((function(t){t.forEach((function(t){var a,i;if(t.attributeName==="class"||t.attributeName==="style"){var n=e.element.offsetWidth;var r=e.element.offsetHeight;if(n!==((a=e.offset)===null||a===void 0?void 0:a.width)||r!==((i=e.offset)===null||i===void 0?void 0:i.height)){e.updateArea()}e.offset={width:n,height:r}}}))}));this.observer.observe(this.element,{attributes:true})};e.prototype.disconnectedCallback=function(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()};e.prototype.componentDidLoad=function(){this.viewsChanged()};e.prototype.render=function(){return h(Host,{onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd})};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MovableArea.style=areaCss;var viewCss="taro-movable-view-core{width:10px;height:10px;display:inline-block;position:absolute;top:0;left:0}";var MovableView=function(){function e(e){var t=this;registerInstance(this,e);this.onChange=createEvent(this,"change",7);this.onScale=createEvent(this,"scale",7);this.onHTouchMove=createEvent(this,"htouchmove",7);this.onVTouchMove=createEvent(this,"vtouchmove",7);this.translateX=0;this.translateY=0;this.origin={x:0,y:0};this.area={width:0,height:0};this.originScale=1;this.currentScale=1;this.width=0;this.height=0;this.minX=0;this.minY=0;this.maxX=0;this.maxY=0;this.baseX=0;this.baseY=0;this.offset={x:0,y:0};this.scaleOffset={x:0,y:0};this.getLimitXY=function(e,a){var i=false;e>t.maxX?(e=t.maxX,i=true):e<t.minX&&(e=t.minX,i=true);a>t.maxY?(a=t.maxY,i=true):a<t.minY&&(a=t.minY,i=true);return{x:e,y:a,outOfBounds:i}};this.animationTo=function(e,a,i,n,r,s,o){if(t.animation){t.setTransform(e,a,i,n,r,s);o===null||o===void 0?void 0:o()}else{t.setTransform(e,a,i,n,r,s)}};this.setTransform=function(e,a,i,n,r,s){e=Number(e.toFixed(1));a=Number(a.toFixed(1));i=Number((i!==null&&i!==void 0?i:t.currentScale).toFixed(3));if(!t.outOfBounds){var o=t.getLimitXY(e,a);e=o.x;a=o.y}var c=function(e,t){return+((1e3*e-1e3*t)/1e3).toFixed(1)};var l=c(e,t.scaleOffset.x);var h=c(a,t.scaleOffset.y);if(t.translateX!==e||t.translateY!==a){!r&&t.onChange.emit({x:l,y:h,source:n})}if(i!==t.currentScale){s&&t.onScale.emit({scale:i,x:l,y:h})}var u="translateX(".concat(e,"px) translateY(").concat(a,"px) translateZ(0px) scale(").concat(i,")");t.element.style.transform=u;t.element.style.webkitTransform=u;t.translateX=e;t.translateY=a;t.currentScale=i};this.updateOffset=function(){var e=function(t,a){if(t===a||!t.offsetParent){return{left:0,top:0}}var i=e(t.offsetParent,a);return{left:t.offsetLeft+i.left,top:t.offsetTop+i.top}};if(!t.parent){return}var a=e(t.element,t.parent);t.offset.x=a.left;t.offset.y=a.top};this.updateScaleOffset=function(e){if(e===void 0){e=t.currentScale}var a=t.element.getBoundingClientRect();t.height=a.height/t.currentScale;t.width=a.width/t.currentScale;t.scaleOffset.x=(t.width*e-t.width)/2;t.scaleOffset.y=(t.height*e-t.height)/2};this.updateBoundary=function(){var e=0-t.offset.x+t.scaleOffset.x;var a=t.area.width-t.width-t.offset.x-t.scaleOffset.x;t.minX=Math.min(e,a);t.maxX=Math.max(e,a);var i=0-t.offset.y+t.scaleOffset.y;var n=t.area.height-t.height-t.offset.y-t.scaleOffset.y;t.minY=Math.min(i,n);t.maxY=Math.max(i,n)};this.updateScale=function(e,a,i){if(!t.scale){return}var n=t.adjustScale(e);t.updateScaleOffset(n);t.updateBoundary();var r=t.getLimitXY(t.translateX,t.translateY),s=r.x,o=r.y;if(a){t.animationTo(s,o,n,"",true,true,i)}else if(!t.updating){t.updating=true;requestAnimationFrame((function(){t.setTransform(s,o,n,"",true,true);t.updating=false}))}};this.setOriginScale=function(e){t.originScale=e};this.adjustScale=function(e){return Math.min(10,t.scaleMax,Math.max(.5,t.scaleMin,e))};this.handleTouchStart=function(e){var a=e.touches;if(t.disabled||a.length>1||!t.element){return}var i=a[0];t.touching=true;t.firstMoveFireEvent=false;t.origin.x=i.screenX;t.origin.y=i.screenY;t.baseX=t.translateX;t.baseY=t.translateY;t.element.style.willChange="transform"};this.handleTouchMove=function(e){var a=e.touches;if(t.disabled||!t.element||t.scaling||!t.touching||a.length>1){return}if(t.direction!=="horizontal"){e.preventDefault()}var i=a[0];var n=i.screenX-t.origin.x;var r=i.screenY-t.origin.y;t.setTransform(t.xMove?n+t.baseX:0,t.yMove?r+t.baseY:0);if(!t.firstMoveFireEvent){t.firstMoveFireEvent=true;var s=Math.abs(n)>Math.abs(r)?t.onHTouchMove:t.onVTouchMove;s.emit({originalEvent:e,bubbles:false,capturePhase:false,composed:true,extraFields:{touches:e.touches||{},changedTouches:e.changedTouches||{}}})}};this.handleTouchEnd=function(e){var a=e.changedTouches[0];if(t.disabled||!t.touching||!a){return}t.touching=false;var i=a.screenX-t.origin.x;var n=a.screenY-t.origin.y;t.setTransform(t.xMove?i+t.baseX:0,t.yMove?n+t.baseY:0)};this.x=0;this.y=0;this.direction="none";this.outOfBounds=false;this.inertia=false;this.friction=2;this.damping=20;this.disabled=false;this.scale=false;this.scaleMin=.5;this.scaleMax=10;this.scaleValue=1;this.animation=true}e.prototype.watchX=function(e){this.setTransform(parseFloat("".concat(e||0)),this.translateY)};e.prototype.watchY=function(e){this.setTransform(this.translateX,parseFloat("".concat(e||0)))};e.prototype.watchScaleMinOrMax=function(){if(!this.scale)return false;this.updateScale(this.currentScale,true);this.setOriginScale(this.currentScale)};e.prototype.watchScaleValue=function(e){if(!this.scale){return false}this.updateScale(e,true);this.setOriginScale(e);return e};e.prototype.setParent=function(e){var t=e.element,a=e.area;return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=this.scale?this.scaleValue:1;this.area=a;this.parent=t;this.updateOffset();this.updateScaleOffset(e);this.updateBoundary();this.setTransform(Number(this.x)+this.scaleOffset.x,Number(this.y)+this.scaleOffset.y,e,"",true);this.setOriginScale(e);return[2]}))}))};e.prototype.endScale=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.scaling=false;this.setOriginScale(this.currentScale);return[2]}))}))};e.prototype.setScale=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.scale){return[2]}this.scaling=true;this.updateScale(e*this.originScale);return[2]}))}))};e.prototype.connectedCallback=function(){var e=this;this.observer=new MutationObserver((function(t){t.forEach((function(t){var a=t.attributeName;if(a&&["class","style"].includes(a)){var i=t.oldValue;var n=t.target.getAttribute(a);if(i===n){return}var r=function(e){return e===null||e===void 0?void 0:e.split(";").filter((function(e){return!["transform","will-change"].find((function(t){return e.trim().startsWith(t)}))})).join(";")};if(a==="style"&&r(n)===r(i)){return}e.updateOffset();e.updateScaleOffset();e.updateBoundary();e.setTransform(e.translateX,e.translateY)}}))}));this.observer.observe(this.element,{attributes:true,attributeOldValue:true})};e.prototype.disconnectedCallback=function(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()};e.prototype.componentDidLoad=function(){this.element.style.transformOrigin="center";this.xMove=["horizontal","all"].includes(this.direction);this.yMove=["vertical","all"].includes(this.direction);if(this.friction<=0){this.friction=2}if(this.x||this.y){var e=parseFloat("".concat(this.x||0));var t=parseFloat("".concat(this.y||0));this.setTransform(e,t)}};e.prototype.render=function(){return h(Host,{onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd})};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{x:["watchX"],y:["watchY"],scaleMin:["watchScaleMinOrMax"],scaleMax:["watchScaleMinOrMax"],scaleValue:["watchScaleValue"]}},enumerable:false,configurable:true});return e}();MovableView.style=viewCss;export{MovableArea as taro_movable_area_core,MovableView as taro_movable_view_core};