@ezuikit/control-zoom 0.0.1-beta.1 → 1.0.0-alpha.1

package/dist/index.js

@@ -1,7 +1,6 @@
 /*
-* ZoomControl v0.0.1-beta.1
-* zoom
-* Copyright (c) 2025-11-05 Ezviz-OpenBiz
+* @ezuikit/control-zoom v1.0.0-alpha.1
+* Copyright (c) 2026-03-15 Ezviz-OpenBiz
 * Released under the MIT License.
 */
-"use strict";const t={initialZoom:1,defaultCursor:"auto",scrollVelocity:.1,animDuration:.25,defaultPos:[0,0],allowZoom:!0,allowMove:!0,allowPan:!0,onZoomChange:()=>{},onPanChange:(t,o)=>{},maxZoom:8,minZoom:1,zoomStep:.1,allowTouchEvents:!1,allowWheel:!0,ignoredMouseButtons:[],doubleTouchMaxDelay:300,decelerationDuration:750};class o{constructor(o,s){var i=this;this.destroy=()=>{this.removeEventListeners()},this.setTransform=t=>{this.transform=t},this.getTransform=()=>this.transform,this.updateTranslate=()=>{let t=0,o=0;t=this.percentPos[0]<0?this.percentPos[0]<-.5*(this.zoom-1)?-.5*(this.zoom-1):this.percentPos[0]:this.percentPos[0]>.5*(this.zoom-1)?.5*(this.zoom-1):this.percentPos[0],o=this.percentPos[1]<0?this.percentPos[1]<-.5*(this.zoom-1)?-.5*(this.zoom-1):this.percentPos[1]:this.percentPos[1]>.5*(this.zoom-1)?.5*(this.zoom-1):this.percentPos[1],this.percentPos=[t,o]},this.update=()=>{this.container&&(this.updateTranslate(),this.container.style.transition=`transform ease-out ${this.transition}s`,this.container.style.transform=`translate3d(${100*this.percentPos[0]}%, ${100*this.percentPos[1]}%, 0) scale(${this.zoom})`)},this.setAllowZoom=t=>{this.options.allowZoom=t},this.setZoom=(t,o)=>{this.zoom=parseFloat(t.toFixed(this.getPrecision(this.options.zoomStep))),this.update(),this.options.onZoomChange&&this.options.onZoomChange(this.zoom.toFixed(this.getPrecision(this.options.zoomStep)),o)},this.getZoom=()=>this.zoom,this.setPos=t=>{var o,s;const i=null===(o=this.container)||void 0===o?void 0:o.clientWidth,e=null===(s=this.container)||void 0===s?void 0:s.clientHeight;this.percentPos=[t[0]/i,t[1]/e],this.pos=t,this.update(),this.options.onPanChange&&this.options.onPanChange({posX:t[0],posY:t[1]})},this.setTransitionDuration=t=>{this.transition=t,this.update()},this.setCursor=t=>{this.container&&(this.cursor=t)},this.zoomIn=t=>{var o,s;let i=this.pos[0],e=this.pos[1];const n=this.zoom,h=n+t<(null!==(o=this.options.maxZoom)&&void 0!==o?o:8)?n+t:null!==(s=this.options.maxZoom)&&void 0!==s?s:8;h!==n&&(i=i*(h-1)/(n>1?n-1:n),e=e*(h-1)/(n>1?n-1:n)),this.setZoom(h),this.setPos([i,e]),this.setTransitionDuration(this.options.animDuration)},this.zoomOut=t=>{var o,s;let i=this.pos[0],e=this.pos[1];const n=this.zoom,h=n-t>(null!==(o=this.options.minZoom)&&void 0!==o?o:1)?n-t:null!==(s=this.options.minZoom)&&void 0!==s?s:1;h!==n&&(i=i*(h-1)/(n-1),e=e*(h-1)/(n-1)),this.setZoom(h),this.setPos([i,e]),this.setTransitionDuration(this.options.animDuration)},this.zoomToZone=(t,o,s,i)=>{var e,n;if(!this.container)return;let h=this.pos[0],l=this.pos[1];const a=(null===(e=this.container)||void 0===e?void 0:e.parentNode).getBoundingClientRect(),r=this.zoom,u=a.width/s,d=a.height/i,c=Math.min(u,d,null!==(n=this.options.maxZoom)&&void 0!==n?n:8),m=this.container.getBoundingClientRect(),[p,v]=[m.width/r/2,m.height/r/2],[g,f]=[t+s/2,o+i/2];h=(p-g)*c,l=(v-f)*c,this.setZoom(c),this.setPos([h,l]),this.setTransitionDuration(this.options.animDuration)},this.getNewPosition=(t,o,s)=>{const[i,e,n]=[this.zoom,this.pos[0],this.pos[1]];if(1===s||!this)return[0,0];if(s>i){const h=this.container.getBoundingClientRect(),[l,a]=[h.width/2,h.height/2],[r,u]=[t-h.left-window.pageXOffset,o-h.top-window.pageYOffset],[d,c]=[(l-r)/i,(a-u)/i],m=s-i;return[e+d*m,n+c*m]}return[e*(s-1)/(i-1),n*(s-1)/(i-1)]},this.fullZoomInOnPosition=(t,o)=>{var s;const i=null!==(s=this.options.maxZoom)&&void 0!==s?s:8;this.setPos(this.getNewPosition(t,o,i)),this.setZoom(null!=i?i:8),this.setTransitionDuration(this.options.animDuration)},this.getLimitedShift=(t,o,s,i,e)=>{if(t>0){if(i>o)return 0;if(i+t>o)return o-i}else if(t<0){if(e<s)return 0;if(e+t<s)return s-e}return t},this.getCursor=(t,o)=>t&&o?"move":t?"ew-resize":o?"ns-resize":"auto",this.move=function(t,o){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;if(!i.container)return;let e,n,h=i.pos[0],l=i.pos[1];const a=i.container.getBoundingClientRect(),r=i.container.parentNode.getBoundingClientRect(),u=i.transform?o:t,d=i.transform?t:o,[c,m,p]=i.transform?[a.height>r.bottom-r.top,d>0&&a.top-r.top<0,d<0&&a.bottom-r.bottom>0]:[a.width>r.right-r.left,u>0&&a.left-r.left<0,u<0&&a.right-r.right>0];e=c||m||p,e&&(i.transform?h+=i.getLimitedShift(d,r.top,r.bottom,a.top,a.bottom):h+=i.getLimitedShift(u,r.left,r.right,a.left,a.right));const[v,g,f]=i.transform?[a.width>r.right-r.left,u>0&&a.right-r.right<0,u<0&&a.left-r.left>0]:[a.height>r.bottom-r.top,d>0&&a.top-r.top<0,d<0&&a.bottom-r.bottom>0];if(n=v||g||f,n)if(i.transform){function w(t,o,s,i,e){if(t>0){if(e<s+1)return 0;if(e+t<s+1)return s-e}else if(t<0){if(i+1>o)return 0;if(i+1+t>o)return o-i}return t}l+=w(u,r.left,r.right,a.left,a.right)}else l+=i.getLimitedShift(d,r.top,r.bottom,a.top,a.bottom);const b=i.getCursor(e,n);i.setPos([h,l]),i.setCursor(b),i.setTransitionDuration(s)},this.isDoubleTapping=()=>{var t,o,s,i;const e=(new Date).getTime();return e-(null!==(t=this.lastTouchTime)&&void 0!==t?t:0)<(null!==(o=this.options.doubleTouchMaxDelay)&&void 0!==o?o:300)&&e-(null!==(s=this.lastDoubleTapTime)&&void 0!==s?s:0)>(null!==(i=this.options.doubleTouchMaxDelay)&&void 0!==i?i:750)?(this.lastDoubleTapTime=e,!0):(this.lastTouchTime=e,!1)},this.startDeceleration=(t,o)=>{let s=null;const i=e=>{var n,h,l;null===s&&(s=e);const a=e-s,r=((null!==(n=this.options.decelerationDuration)&&void 0!==n?n:750)-a)/(null!==(h=this.options.decelerationDuration)&&void 0!==h?h:750),[u,d]=[t*r,o*r];a<(null!==(l=this.options.decelerationDuration)&&void 0!==l?l:750)&&Math.max(Math.abs(u),Math.abs(d))>1?(this.move(u,d,0),this.lastRequestAnimationId=requestAnimationFrame(i)):this.lastRequestAnimationId=null};this.lastRequestAnimationId=requestAnimationFrame(i)},this.reset=()=>{this.setZoom(this.options.initialZoom,!0),this.cursor=this.options.defaultCursor,this.setTransitionDuration(this.options.animDuration),this.setPos(this.options.defaultPos)},this.handleDoubleClick=t=>{var o;t.preventDefault(),this.options.allowZoom&&(this.zoom===(null!==(o=this.options.minZoom)&&void 0!==o?o:1)?this.fullZoomInOnPosition(t.pageX,t.pageY):this.reset())},this.addScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;i.handleZoomAdd(t)},this.handleZoomAdd=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;var o;if(!i.options.allowZoom||!i.options.allowWheel)return;let s=parseFloat((i.zoom+t).toFixed(i.getPrecision(i.options.zoomStep)));s>(null!==(o=i.options.maxZoom)&&void 0!==o?o:8)&&(s=8),i.setZoom(s),i.setPos(i.pos),i.setTransitionDuration(.05)},this.subScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;i.handleZoomSub(t)},this.handleZoomSub=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;var o,s;if(!i.options.allowZoom||!i.options.allowWheel)return;let e=parseFloat((i.zoom-t).toFixed(i.getPrecision(i.options.zoomStep))),n=i.pos;e<(null!==(o=i.options.minZoom)&&void 0!==o?o:1)?(e=1,n=i.options.defaultPos):e!==i.zoom&&(n=e!==(null!==(s=i.options.minZoom)&&void 0!==s?s:1)?i.getNewPosition(i.pos[0],i.pos[1],e):i.options.defaultPos),i.setZoom(e),i.setPos(n),i.setTransitionDuration(.05)},this.handleMouseWheel=t=>{var o,s;if(t.preventDefault(),!this.options.allowZoom||!this.options.allowWheel)return;const i=t.deltaY<0?this.options.scrollVelocity:0-this.options.scrollVelocity,e=parseFloat(Math.max(Math.min(this.zoom+i,null!==(o=this.options.maxZoom)&&void 0!==o?o:8),null!==(s=this.options.minZoom)&&void 0!==s?s:1).toFixed(this.getPrecision(this.options.zoomStep)));this.setZoom(e),this.setPos(this.pos),this.setTransitionDuration(.05)},this.handleMouseStart=t=>{var o;t.preventDefault(),this.options.allowPan&&!(null===(o=this.options.ignoredMouseButtons)||void 0===o?void 0:o.includes(t.button))&&(this.lastRequestAnimationId&&cancelAnimationFrame(this.lastRequestAnimationId),this.lastCursor=[t.pageX,t.pageY])},this.handleMouseMove=t=>{if(t.preventDefault(),!this.options.allowPan||!this.lastCursor)return;const[o,s]=[t.pageX,t.pageY],i=o-this.lastCursor[0],e=s-this.lastCursor[1];this.move(i,e,0),this.lastCursor=[o,s],this.lastShift=[i,e]},this.handleMouseStop=t=>{t.preventDefault(),this.lastShift&&(this.startDeceleration(this.lastShift[0],this.lastShift[1]),this.lastShift=null),this.lastCursor=null,this.setCursor("auto")},this.getCoordinates=t=>this.transform?[t.pageY,window.innerWidth-t.pageX]:[t.pageX,t.pageY],this.handleTouchStart=t=>{const o=this.isDoubleTapping();this.isMultiTouch=t.touches.length,this.options.allowTouchEvents||t.preventDefault(),this.lastRequestAnimationId&&cancelAnimationFrame(this.lastRequestAnimationId);const[s,i]=this.getCoordinates(t.touches[0]);this.isMultiTouch>1?this.lastTouch=[s,i]:o&&this.options.allowZoom?1===this.zoom?this.fullZoomInOnPosition(s,i):this.reset():this.options.allowPan&&(this.lastTouch=[s,i])},this.handleTouchMove=t=>{var o,s,i,e;if(this.options.allowTouchEvents||t.preventDefault(),this.lastTouch)if(1===this.isMultiTouch){const[o,s]=this.getCoordinates(t.touches[0]);let i=o-this.lastTouch[0],e=s-this.lastTouch[1];this.move(i,e),this.lastShift=[i,e],this.lastTouch=[o,s],this.lastTouchDistance=null}else if(this.isMultiTouch>1){let n=this.zoom;const[h,l]=this.getCoordinates(t.touches[0]),[a,r]=this.getCoordinates(t.touches[1]),u=Math.sqrt(Math.pow(a-h,2)+Math.pow(r-l,2));if(this.lastTouchDistance&&u&&u!==this.lastTouchDistance){this.options.allowZoom&&(n+=(u-this.lastTouchDistance)/100,n>(null!==(o=this.options.maxZoom)&&void 0!==o?o:8)?n=null!==(s=this.options.maxZoom)&&void 0!==s?s:8:n<(null!==(i=this.options.minZoom)&&void 0!==i?i:1)&&(n=null!==(e=this.options.minZoom)&&void 0!==e?e:1));const[t,d]=[(h+a)/2,(l+r)/2],c=this.getNewPosition(t,d,n);this.setZoom(n),this.setPos(c),this.setTransitionDuration(0)}this.lastTouch=[h,l],this.lastTouchDistance=u}},this.handleTouchStop=()=>{this.lastShift&&(this.startDeceleration(this.lastShift[0],this.lastShift[1]),this.lastShift=null),this.lastTouch=null,this.lastTouchDistance=null,this.isMultiTouch=0},this.container=o,this.options=Object.assign({},t,s||{}),this.pos=[0,0],this.percentPos=[0,0],this.transition=this.options.animDuration,this.zoom=1,this.cursor="auto",this.lastCursor=[0,0],this.lastShift=null,this.lastTouch=null,this.lastTouchDistance=null,this.lastRequestAnimationId=null,this.lastTouchTime=(new Date).getTime(),this.lastDoubleTapTime=(new Date).getTime(),this.transform=!1,this.isMultiTouch=1,this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseStart=this.handleMouseStart.bind(this),this.handleMouseStop=this.handleMouseStop.bind(this),this.handleMouseWheel=this.handleMouseWheel.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchStop=this.handleTouchStop.bind(this),this.getZoom=this.getZoom.bind(this),this.setZoom=this.setZoom.bind(this),this.containerResizeObserver=new ResizeObserver((t=>{for(let o of t)this.pos=[o.contentRect.width*this.percentPos[0],o.contentRect.height*this.percentPos[1]]}))}setUpEventListeners(){const t=this.container,o=window.matchMedia("(pointer: fine)").matches;null==t||t.addEventListener("wheel",this.handleMouseWheel,{passive:!1}),this.containerResizeObserver.observe(t),o?(null==t||t.addEventListener("mousedown",this.handleMouseStart,{passive:!1}),null==t||t.addEventListener("mousemove",this.handleMouseMove,{passive:!1}),null==t||t.addEventListener("mouseup",this.handleMouseStop,{passive:!1}),null==t||t.addEventListener("mouseleave",this.handleMouseStop,{passive:!1})):(null==t||t.addEventListener("touchstart",this.handleTouchStart,{passive:!1}),null==t||t.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),null==t||t.addEventListener("touchend",this.handleTouchStop,{passive:!1}),null==t||t.addEventListener("touchcancel",this.handleTouchStop,{passive:!1}))}removeEventListeners(){const t=this.container,o=window.matchMedia("(pointer: fine)").matches;null==t||t.removeEventListener("wheel",this.handleMouseWheel),this.containerResizeObserver.unobserve(t),o?(null==t||t.removeEventListener("mousedown",this.handleMouseStart),null==t||t.removeEventListener("mousemove",this.handleMouseMove),null==t||t.removeEventListener("mouseup",this.handleMouseStop),null==t||t.removeEventListener("mouseleave",this.handleMouseStop)):(null==t||t.removeEventListener("touchstart",this.handleTouchStart),null==t||t.removeEventListener("touchmove",this.handleTouchMove),null==t||t.removeEventListener("touchend",this.handleTouchStop),null==t||t.removeEventListener("touchcancel",this.handleTouchStop))}getPrecision(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1).toString();return-1!==t.indexOf(".")?t.split(".")[1].length:1}}const s={maxZoom:8,minZoom:1,onZoomChange:()=>{}};exports.Zoom=o,exports.ZoomUI=class{constructor(t,i){var e=this;this.setTransform=t=>{this.Zoom.setTransform(t)},this.startZoom=()=>{const t=document.getElementById(`${this.options.id}-zoom-container`);t&&(t.style.display="block"),this.Zoom.setAllowZoom(!0),this.Zoom.setUpEventListeners()},this.stopZoom=()=>{const t=document.getElementById(`${this.options.id}-zoom-container`);t&&(t.style.display="none"),this.Zoom.setAllowZoom(!1),this.Zoom.reset(),this.Zoom.removeEventListeners()},this.addScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;e.Zoom.handleZoomAdd(t)},this.subScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;e.Zoom.handleZoomSub(t)},this.container=t,this.options=Object.assign({},s,i||{}),this.Zoom=new o(this.container,Object.assign(Object.assign({},this.options),{allowZoom:!1,onZoomChange:(t,o)=>{this.renderDot(t),this.options.onZoomChange&&this.options.onZoomChange(t,o)}}));const n=document.createElement("div");n.id=`${this.options.id}-zoom-container`;const h=document.getElementById(`${this.options.id}-audioControls`);let l=48;h&&(l=h.offsetHeight);const a=this.options.isMobile?"\n        -webkit-transform: scale(0.8);\n        -moz-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n        transform-origin: left bottom;":"";n.style.cssText=`position: absolute;\n        display:none;\n        left: 12px;\n        bottom: ${this.options.isMobile?`${l+6}px`:"102px"};\n        ${a}\n        `;const r=`\n        <div\n        style="display: inline-flex;justify-content: space-between;flex-direction: column;width: 36px;height: 160px;background:rgba(0,0,0,0.60);border-radius: 2px;align-items: center;">\n        <div id="${this.options.id}-scale-value" style="font-size: 12px;color:#FFFFFF;margin:10px 0; user-select: none;">1.0X</div>\n        <div style="width: 20px;height: 20px;margin-bottom:4px;" id="${this.options.id}-addScale">\n          <?xml version="1.0" encoding="utf-8"?>\n          <svg version="1.1" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n             viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">\n          <title>${this.options.i18n.t("ZOOM_ADD")}</title>\n          <g>\n            <rect class="st0" width="20" height="20" fill="none"/>\n          </g>\n          <g>\n            <path class="st1" d="M10,3.8c3.5,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2S3.8,13.5,3.8,10S6.5,3.8,10,3.8z M10,5c-2.8,0-5,2.2-5,5\n              s2.2,5,5,5s5-2.2,5-5S12.8,5,10,5z"/>\n          </g>\n          <g>\n            <path class="st2" d="M12.5,10.7h-5c-0.3,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h5c0.3,0,0.6,0.3,0.6,0.6S12.8,10.7,12.5,10.7z"/>\n          </g>\n          <g>\n            <path class="st2" d="M10,13.2c-0.3,0-0.6-0.3-0.6-0.6v-5c0-0.3,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v5C10.6,12.9,10.3,13.2,10,13.2z"/>\n          </g>\n          </svg>\n        </div>\n        <div style="\n        position: relative;\n        width: 2px;\n        height: 64px;\n        border-radius: 2px;\n        background: rgba(255,255,255,0.75);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-end;">\n        <div class="scale-body-line-dot" id="${this.options.id}-scale-body-line-dot" style="\n          width: 6px;\n          height: 6px;\n          background: #FFFFFF;\n          border-radius: 100%;\n          position: absolute;\n          bottom: -3px;\n          border: 1px solid #407AFF;"></div>\n          <div id="${this.options.id}-line-dot" style="\n          width: 2px;\n          height: 0%;\n          border-radius: 2px;\n          background: #407AFF;"></div>\n        </div>\n        <div style="width: 20px;height: 20px;margin: 4px 0 10px;" id="${this.options.id}-subScale">\n          <?xml version="1.0" encoding="utf-8"?>\n          <svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n            viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">\n            <title>${this.options.i18n.t("ZOOM_SUB")}</title>\n            <g>\n              <rect class="st0" width="20" height="20" fill="none"/>\n            </g>\n            <g>\n              <path class="st1" d="M10,3.8c3.5,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2S3.8,13.5,3.8,10S6.5,3.8,10,3.8z M10,5c-2.8,0-5,2.2-5,5\n                s2.2,5,5,5s5-2.2,5-5S12.8,5,10,5z"/>\n            </g>\n            <g>\n              <path class="st2" d="M12.5,10.7h-5c-0.3,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h5c0.3,0,0.6,0.3,0.6,0.6S12.8,10.7,12.5,10.7z"/>\n            </g>\n          </svg>\n        </div>\n      </div>\n        `;n.innerHTML=r;const u=document.getElementById(`${this.options.id}-audioControls`);if(u){u.parentNode&&u.parentNode.appendChild(n);const t=document.getElementById(`${this.options.id}-addScale`);t&&(t.onclick=()=>{this.addScale()});const o=document.getElementById(`${this.options.id}-subScale`);o&&(o.onclick=()=>{this.subScale()})}this.startZoom=this.startZoom.bind(this),this.stopZoom=this.stopZoom.bind(this),this.addScale=this.addScale.bind(this),this.subScale=this.subScale.bind(this),this.setTransform=this.setTransform.bind(this)}renderDot(t){const o=document.getElementById(`${this.options.id}-scale-value`);o&&(o.innerHTML=`${parseFloat(t).toFixed(1)}X`);const s=document.getElementById(`${this.options.id}-line-dot`);s&&(s.style.height=(parseFloat(t)-1)/7*100+"%");const i=document.getElementById(`${this.options.id}-scale-body-line-dot`);i&&(i.style.bottom=`calc(${(parseFloat(t)-1)/7*100}% - 3px)`)}};
+"use strict";function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var ZOOM_DEFAULT_POSITION=[0,0],DefaultOptions={initialZoom:1,defaultCursor:"pointer",scrollVelocity:.1,animDuration:.25,allowZoom:!0,allowPan:!0,onChange:function(){},onTranslateChange:function(){},onTap:function(){},max:8,min:1,zoomStep:.1,allowTouchEvents:!1,allowWheel:!0,ignoredMouseButtons:[],doubleTouchMaxDelay:300,decelerationDuration:750},Zoom=function(){function Zoom(container,options){var _this=this;this._dragging=!1,this.destroy=function(){_this.setAllowZoom(!1),_this.reset(),_this.removeEventListeners()},this.setTransform=function(trans){_this.transform=trans},this.getTransform=function(){return _this.transform},this.updateTranslate=function(){var translateX=0,translateY=0;translateX=_this.percentPos[0]<0?_this.percentPos[0]<-.5*(_this.zoom-1)?-.5*(_this.zoom-1):_this.percentPos[0]:_this.percentPos[0]>.5*(_this.zoom-1)?.5*(_this.zoom-1):_this.percentPos[0],translateY=_this.percentPos[1]<0?_this.percentPos[1]<-.5*(_this.zoom-1)?-.5*(_this.zoom-1):_this.percentPos[1]:_this.percentPos[1]>.5*(_this.zoom-1)?.5*(_this.zoom-1):_this.percentPos[1],_this.percentPos=[translateX,translateY]},this.update=function(){_this.container&&(_this.updateTranslate(),_this.container.style.transition="transform ease-out "+_this.transition+"s",_this.container.style.transform="translate3d("+100*_this.percentPos[0]+"%, "+100*_this.percentPos[1]+"%, 0) scale("+_this.zoom+")")},this.setAllowZoom=function(allow){_this.options.allowZoom=allow},this.setZoom=function(zoom,reset){zoom=parseFloat(zoom.toFixed(_this.getPrecision(_this.options.zoomStep))),_this.zoom!==zoom&&(_this.zoom=zoom,_this.update(),null==_this.options.onChange||_this.options.onChange.call(_this.options,+_this.zoom.toFixed(_this.getPrecision(_this.options.zoomStep)),reset))},this.getZoom=function(){return _this.zoom},this.setPos=function(pos){var _this_container,_this_container1,containerWidth=null==(_this_container=_this.container)?void 0:_this_container.clientWidth,containerHeight=null==(_this_container1=_this.container)?void 0:_this_container1.clientHeight;+_this.pos[0]===pos[0]&&+_this.pos[1]===pos[1]||(_this.percentPos=[pos[0]/containerWidth,pos[1]/containerHeight],_this.update(),null==_this.options.onTranslateChange||_this.options.onTranslateChange.call(_this.options,{posX:pos[0],posY:pos[1]}))},this.setTransitionDuration=function(duration){_this.transition=duration,_this.update()},this.setCursor=function(cursor){_this.container&&(_this.container.style.cssText+="cursor:"+cursor+";",_this.cursor=cursor)},this.zoomIn=function(value){var _this_options_max,_this_options_max1,newPosX=_this.pos[0],newPosY=_this.pos[1],prevZoom=_this.zoom,newZoom=prevZoom+value<(null!=(_this_options_max=_this.options.max)?_this_options_max:8)?prevZoom+value:null!=(_this_options_max1=_this.options.max)?_this_options_max1:8;newZoom!==prevZoom&&(newPosX=newPosX*(newZoom-1)/(prevZoom>1?prevZoom-1:prevZoom),newPosY=newPosY*(newZoom-1)/(prevZoom>1?prevZoom-1:prevZoom)),_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)},this.zoomOut=function(value){var _this_options_min,_this_options_min1,newPosX=_this.pos[0],newPosY=_this.pos[1],prevZoom=_this.zoom,newZoom=prevZoom-value>(null!=(_this_options_min=_this.options.min)?_this_options_min:1)?prevZoom-value:null!=(_this_options_min1=_this.options.min)?_this_options_min1:1;newZoom!==prevZoom&&(newPosX=newPosX*(newZoom-1)/(prevZoom-1),newPosY=newPosY*(newZoom-1)/(prevZoom-1)),_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)},this.zoomToZone=function(relX,relY,relWidth,relHeight){var _this_container;if(_this.container){var _this_options_max,newPosX=_this.pos[0],newPosY=_this.pos[1],parentRect=(null==(_this_container=_this.container)?void 0:_this_container.parentNode).getBoundingClientRect(),prevZoom=_this.zoom,optimalZoomX=parentRect.width/relWidth,optimalZoomY=parentRect.height/relHeight,newZoom=Math.min(optimalZoomX,optimalZoomY,null!=(_this_options_max=_this.options.max)?_this_options_max:8),rect=_this.container.getBoundingClientRect(),_ref=[rect.width/prevZoom/2,rect.height/prevZoom/2],_ref1=[relX+relWidth/2,relY+relHeight/2];newPosX=(_ref[0]-_ref1[0])*newZoom,newPosY=(_ref[1]-_ref1[1])*newZoom,_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)}},this.getNewPosition=function(x,y,newZoom){var prevZoom=[_this.zoom,_this.pos[0],_this.pos[1]][0];if(1===newZoom||!_this)return ZOOM_DEFAULT_POSITION;var _ref1=[_this.container.clientWidth,_this.container.clientHeight],clientWidth=_ref1[0],clientHeight=_ref1[1];if(newZoom>prevZoom)return[0,0];var w=-(x-clientWidth/2)/(clientWidth/2)*newZoom/2,h=-(y-clientHeight/2)/(clientHeight/2)*newZoom/2;return w>newZoom/2-.5&&(w=3.5),h>newZoom/2-.5&&(h=3.5),[clientWidth*w,clientHeight*h]},this.fullZoomInOnPosition=function(x,y){var _this_options_max,zoom=null!=(_this_options_max=_this.options.max)?_this_options_max:DefaultOptions.max;_this.setZoom(null!=zoom?zoom:DefaultOptions.max),_this.setPos(_this.getNewPosition(x,y,zoom)),_this.setTransitionDuration(_this.options.animDuration)},this.getLimitedShift=function(shift,minLimit,maxLimit,minElement,maxElement){if(shift>0){if(minElement>minLimit)return 0;if(minElement+shift>minLimit)return minLimit-minElement}else if(shift<0){if(maxElement<maxLimit)return 0;if(maxElement+shift<maxLimit)return maxLimit-maxElement}return shift},this.getCursor=function(canMoveOnX,canMoveOnY){return canMoveOnX&&canMoveOnY?"move":canMoveOnX?"ew-resize":canMoveOnY?"ns-resize":"auto"},this.move=function(shiftX,shiftY,transitionDuration){if(void 0===transitionDuration&&(transitionDuration=0),_this.container){var newPosX=_this.pos[0],newPosY=_this.pos[1],rect=_this.container.getBoundingClientRect(),parentRect=_this.container.parentNode.getBoundingClientRect(),shiftHorizontal=_this.transform?shiftY:shiftX,shiftVertical=_this.transform?shiftX:shiftY,_ref=_this.transform?[rect.height>parentRect.bottom-parentRect.top,shiftVertical>0&&rect.top-parentRect.top<0,shiftVertical<0&&rect.bottom-parentRect.bottom>0]:[rect.width>parentRect.right-parentRect.left,shiftHorizontal>0&&rect.left-parentRect.left<0,shiftHorizontal<0&&rect.right-parentRect.right>0],canMoveOnX=_ref[0]||_ref[1]||_ref[2];canMoveOnX&&(_this.transform?newPosX+=_this.getLimitedShift(shiftVertical,parentRect.top,parentRect.bottom,rect.top,rect.bottom):newPosX+=_this.getLimitedShift(shiftHorizontal,parentRect.left,parentRect.right,rect.left,rect.right));var _ref1=_this.transform?[rect.width>parentRect.right-parentRect.left,shiftHorizontal>0&&rect.right-parentRect.right<0,shiftHorizontal<0&&rect.left-parentRect.left>0]:[rect.height>parentRect.bottom-parentRect.top,shiftVertical>0&&rect.top-parentRect.top<0,shiftVertical<0&&rect.bottom-parentRect.bottom>0],canMoveOnY=_ref1[0]||_ref1[1]||_ref1[2];if(canMoveOnY)if(_this.transform){newPosY+=function(shift,minLimit,maxLimit,minElement,maxElement){if(shift>0){if(maxElement<maxLimit+1)return 0;if(maxElement+shift<maxLimit+1)return maxLimit-maxElement}else if(shift<0){if(minElement+1>minLimit)return 0;if(minElement+1+shift>minLimit)return minLimit-minElement}return shift}(shiftHorizontal,parentRect.left,parentRect.right,rect.left,rect.right)}else newPosY+=_this.getLimitedShift(shiftVertical,parentRect.top,parentRect.bottom,rect.top,rect.bottom);var cursor=_this.getCursor(canMoveOnX,canMoveOnY);_this.setPos([newPosX,newPosY]),_this.setCursor(cursor),_this.setTransitionDuration(transitionDuration)}},this.isDoubleTapping=function(){var _this_lastTouchTime,_this_options_doubleTouchMaxDelay,_this_lastDoubleTapTime,_this_options_doubleTouchMaxDelay1,touchTime=(new Date).getTime();return touchTime-(null!=(_this_lastTouchTime=_this.lastTouchTime)?_this_lastTouchTime:0)<(null!=(_this_options_doubleTouchMaxDelay=_this.options.doubleTouchMaxDelay)?_this_options_doubleTouchMaxDelay:300)&&touchTime-(null!=(_this_lastDoubleTapTime=_this.lastDoubleTapTime)?_this_lastDoubleTapTime:0)>(null!=(_this_options_doubleTouchMaxDelay1=_this.options.doubleTouchMaxDelay)?_this_options_doubleTouchMaxDelay1:750)?(_this.lastDoubleTapTime=touchTime,!0):(_this.lastTouchTime=touchTime,!1)},this.startDeceleration=function(lastShiftOnX,lastShiftOnY){var startTimestamp=null,startDecelerationMove=function(timestamp){null===startTimestamp&&(startTimestamp=timestamp);var _this_options_decelerationDuration,_this_options_decelerationDuration1,_this_options_decelerationDuration2,progress=timestamp-startTimestamp,ratio=((null!=(_this_options_decelerationDuration=_this.options.decelerationDuration)?_this_options_decelerationDuration:750)-progress)/(null!=(_this_options_decelerationDuration1=_this.options.decelerationDuration)?_this_options_decelerationDuration1:750),_ref=[lastShiftOnX*ratio,lastShiftOnY*ratio],shiftX=_ref[0],shiftY=_ref[1];progress<(null!=(_this_options_decelerationDuration2=_this.options.decelerationDuration)?_this_options_decelerationDuration2:750)&&Math.max(Math.abs(shiftX),Math.abs(shiftY))>1?(_this.move(shiftX,shiftY,0),_this.lastRequestAnimationId=requestAnimationFrame(startDecelerationMove)):_this.lastRequestAnimationId=null};_this.lastRequestAnimationId=requestAnimationFrame(startDecelerationMove)},this.reset=function(){_this.setZoom(_this.options.initialZoom,!0),_this.cursor=_this.options.defaultCursor,_this.setTransitionDuration(_this.options.animDuration),_this.setPos(ZOOM_DEFAULT_POSITION)},this.addScale=function(scale){void 0===scale&&(scale=1),_this.handleZoomAdd(scale)},this.handleZoomAdd=function(scale){if(void 0===scale&&(scale=1),_this.options.allowZoom&&_this.options.allowWheel){var _this_options_max,newZoom=parseFloat((_this.zoom+scale).toFixed(_this.getPrecision(_this.options.zoomStep)));newZoom>(null!=(_this_options_max=_this.options.max)?_this_options_max:8)&&(newZoom=8),_this.setZoom(newZoom),_this.setPos(_this.pos),_this.setTransitionDuration(.05)}},this.subScale=function(scale){void 0===scale&&(scale=1),_this.handleZoomSub(scale)},this.handleZoomSub=function(scale){if(void 0===scale&&(scale=1),_this.options.allowZoom&&_this.options.allowWheel){var newZoom=parseFloat((_this.zoom-scale).toFixed(_this.getPrecision(_this.options.zoomStep)));newZoom<1&&(newZoom=1),_this.setZoom(newZoom),_this.setPos(_this.pos),_this.setTransitionDuration(.05)}},this.handleMouseWheel=function(event){if(event.preventDefault(),_this.options.allowZoom&&_this.options.allowWheel){var _this_options_max,_this_options_min,velocity=event.deltaY<0?_this.options.scrollVelocity:0-_this.options.scrollVelocity,newZoom=parseFloat(Math.max(Math.min(_this.zoom+velocity,null!=(_this_options_max=_this.options.max)?_this_options_max:8),null!=(_this_options_min=_this.options.min)?_this_options_min:1).toFixed(_this.getPrecision(_this.options.zoomStep)));_this.setZoom(newZoom),_this.setTransitionDuration(.05)}},this.handleMouseStart=function(event){var _this_options_ignoredMouseButtons;event.preventDefault(),_this.options.allowPan&&!(null==(_this_options_ignoredMouseButtons=_this.options.ignoredMouseButtons)?void 0:_this_options_ignoredMouseButtons.includes(event.button))&&(_this._dragging=!0,_this.lastRequestAnimationId&&cancelAnimationFrame(_this.lastRequestAnimationId),_this.lastCursor=_this.getCoordinates(event))},this.handleMouseMove=function(event){event.preventDefault(),_this.options.allowPan&&_this.lastCursor&&_this._dragging&&_this._touchOrMouseDrag(event)},this.handleMouseStop=function(event){event.preventDefault(),_this.lastShift&&(_this.startDeceleration(_this.lastShift[0],_this.lastShift[1]),_this.lastShift=null),_this.lastCursor=null,_this.setCursor("auto"),_this._dragging=!1},this.handleTouchStart=function(event){var isThisDoubleTapping=_this.isDoubleTapping();_this.isMultiTouch=event.touches.length,_this.options.allowTouchEvents||event.preventDefault(),_this.lastRequestAnimationId&&cancelAnimationFrame(_this.lastRequestAnimationId);var _this_getCoordinates=_this.getCoordinates(event.touches[0]),posX=_this_getCoordinates[0],posY=_this_getCoordinates[1];if(_this.isMultiTouch>1)_this.lastCursor=[posX,posY];else if(isThisDoubleTapping&&_this.options.allowZoom)if(1===_this.zoom){var _this_container_getBoundingClientRect=_this.container.getBoundingClientRect();_this_container_getBoundingClientRect.top,_this_container_getBoundingClientRect.left;var ref,ref1,x=_this_container_getBoundingClientRect.x,y=_this_container_getBoundingClientRect.y;posX=(ref1=[posX-(x=(ref=_this.transform?[y,x]:[x,y])[0]),posY-(y=ref[1])])[0],posY=ref1[1],_this.fullZoomInOnPosition(posX,posY)}else _this.reset();else _this._tapStartTime=(new Date).getTime(),_this.options.allowPan&&(_this.lastCursor=[posX,posY])},this.handleTouchMove=function(event){if(_this.options.allowTouchEvents||event.preventDefault(),_this.lastCursor)if(1===_this.isMultiTouch)_this._touchOrMouseDrag(event.touches[0]),_this.lastTouchDistance=null;else if(_this.isMultiTouch>1){var newZoom=_this.zoom,_this_getCoordinates=_this.getCoordinates(event.touches[0]),pos1X=_this_getCoordinates[0],pos1Y=_this_getCoordinates[1],_this_getCoordinates1=_this.getCoordinates(event.touches[1]),pos2X=_this_getCoordinates1[0],pos2Y=_this_getCoordinates1[1],distance=Math.sqrt(Math.pow(pos2X-pos1X,2)+Math.pow(pos2Y-pos1Y,2));if(_this.lastTouchDistance&&distance&&distance!==_this.lastTouchDistance){var _this_options_max,_this_options_min,_this_options_max1;if(_this.options.allowZoom)if((newZoom+=(distance-_this.lastTouchDistance)/100)>(null!=(_this_options_max=_this.options.max)?_this_options_max:8))newZoom=null!=(_this_options_max1=_this.options.max)?_this_options_max1:8;else if(newZoom<(null!=(_this_options_min=_this.options.min)?_this_options_min:1)){var _this_options_min1;newZoom=null!=(_this_options_min1=_this.options.min)?_this_options_min1:1}_this.setZoom(newZoom),_this.setTransitionDuration(0)}_this.lastCursor=[pos1X,pos1Y],_this.lastTouchDistance=distance}},this.handleTouchStop=function(){_this.lastShift&&(_this.startDeceleration(_this.lastShift[0],_this.lastShift[1]),_this.lastShift=null),_this._tapStartTime&&(new Date).getTime()-_this._tapStartTime<200&&(null==_this.options.onTap||_this.options.onTap.call(_this.options)),_this._tapStartTime=void 0,_this.lastCursor=null,_this.lastTouchDistance=null,_this.isMultiTouch=0},this.container=container,this.options=Object.assign({},DefaultOptions,options||{}),this.percentPos=ZOOM_DEFAULT_POSITION,this.transition=this.options.animDuration,this.zoom=1,this.cursor="auto",this.lastCursor=[0,0],this.lastShift=null,this.lastTouchDistance=null,this.lastRequestAnimationId=null,this.lastTouchTime=(new Date).getTime(),this.lastDoubleTapTime=(new Date).getTime(),this.transform=!1,this.isMultiTouch=1,this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseStart=this.handleMouseStart.bind(this),this.handleMouseStop=this.handleMouseStop.bind(this),this.handleMouseWheel=this.handleMouseWheel.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchStop=this.handleTouchStop.bind(this),this.getZoom=this.getZoom.bind(this),this.setZoom=this.setZoom.bind(this)}var _proto=Zoom.prototype;return _proto.setUpEventListeners=function(){var refCurrentValue=this.container;window.matchMedia("(pointer: fine)").matches?(this.options.allowWheel&&(null==refCurrentValue||refCurrentValue.addEventListener("wheel",this.handleMouseWheel,{passive:!1})),null==refCurrentValue||refCurrentValue.addEventListener("mousedown",this.handleMouseStart,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mousemove",this.handleMouseMove,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mouseup",this.handleMouseStop,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mouseleave",this.handleMouseStop,{passive:!1})):(null==refCurrentValue||refCurrentValue.addEventListener("touchstart",this.handleTouchStart,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchend",this.handleTouchStop,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchcancel",this.handleTouchStop,{passive:!1}))},_proto.removeEventListeners=function(){var refCurrentValue=this.container;window.matchMedia("(pointer: fine)").matches?(this.options.allowWheel&&(null==refCurrentValue||refCurrentValue.removeEventListener("wheel",this.handleMouseWheel)),null==refCurrentValue||refCurrentValue.removeEventListener("mousedown",this.handleMouseStart),null==refCurrentValue||refCurrentValue.removeEventListener("mousemove",this.handleMouseMove),null==refCurrentValue||refCurrentValue.removeEventListener("mouseup",this.handleMouseStop),null==refCurrentValue||refCurrentValue.removeEventListener("mouseleave",this.handleMouseStop)):(null==refCurrentValue||refCurrentValue.removeEventListener("touchstart",this.handleTouchStart),null==refCurrentValue||refCurrentValue.removeEventListener("touchmove",this.handleTouchMove),null==refCurrentValue||refCurrentValue.removeEventListener("touchend",this.handleTouchStop),null==refCurrentValue||refCurrentValue.removeEventListener("touchcancel",this.handleTouchStop))},_proto.getPrecision=function(value){void 0===value&&(value=1);var valueStr=value.toString();return valueStr.includes(".")?valueStr.split(".")[1].length:1},_proto.getCoordinates=function(event){var clientHeight=this.container.clientHeight,clientTop=this.container.clientTop,clientLeft=this.container.clientLeft,_ref=this.transform?[event.clientY,clientHeight-event.clientX]:[event.clientX-clientTop,event.clientY-clientLeft];return[_ref[0],_ref[1]]},_proto._touchOrMouseDrag=function(event){if(this.lastCursor){var _this_getCoordinates=this.getCoordinates(event),posX=_this_getCoordinates[0],posY=_this_getCoordinates[1],shiftX=posX-this.lastCursor[0],shiftY=posY-this.lastCursor[1];this.move(shiftX,shiftY,0),this.lastCursor=[posX,posY],this.lastShift=[shiftX,shiftY]}},_create_class(Zoom,[{key:"pos",get:function(){return[this.container.clientWidth*this.percentPos[0],this.container.clientHeight*this.percentPos[1]]}}]),Zoom}();Zoom.VERSION="1.0.0-alpha.1",module.exports=Zoom;

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+/*
+* @ezuikit/control-zoom v1.0.0-alpha.1
+* Copyright (c) 2026-03-15 Ezviz-OpenBiz
+* Released under the MIT License.
+*/
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Zoom=factory()}(this,function(){"use strict";function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var ZOOM_DEFAULT_POSITION=[0,0],DefaultOptions={initialZoom:1,defaultCursor:"pointer",scrollVelocity:.1,animDuration:.25,allowZoom:!0,allowPan:!0,onChange:function(){},onTranslateChange:function(){},onTap:function(){},max:8,min:1,zoomStep:.1,allowTouchEvents:!1,allowWheel:!0,ignoredMouseButtons:[],doubleTouchMaxDelay:300,decelerationDuration:750},Zoom=function(){function Zoom(container,options){var _this=this;this._dragging=!1,this.destroy=function(){_this.setAllowZoom(!1),_this.reset(),_this.removeEventListeners()},this.setTransform=function(trans){_this.transform=trans},this.getTransform=function(){return _this.transform},this.updateTranslate=function(){var translateX=0,translateY=0;translateX=_this.percentPos[0]<0?_this.percentPos[0]<-.5*(_this.zoom-1)?-.5*(_this.zoom-1):_this.percentPos[0]:_this.percentPos[0]>.5*(_this.zoom-1)?.5*(_this.zoom-1):_this.percentPos[0],translateY=_this.percentPos[1]<0?_this.percentPos[1]<-.5*(_this.zoom-1)?-.5*(_this.zoom-1):_this.percentPos[1]:_this.percentPos[1]>.5*(_this.zoom-1)?.5*(_this.zoom-1):_this.percentPos[1],_this.percentPos=[translateX,translateY]},this.update=function(){_this.container&&(_this.updateTranslate(),_this.container.style.transition="transform ease-out "+_this.transition+"s",_this.container.style.transform="translate3d("+100*_this.percentPos[0]+"%, "+100*_this.percentPos[1]+"%, 0) scale("+_this.zoom+")")},this.setAllowZoom=function(allow){_this.options.allowZoom=allow},this.setZoom=function(zoom,reset){zoom=parseFloat(zoom.toFixed(_this.getPrecision(_this.options.zoomStep))),_this.zoom!==zoom&&(_this.zoom=zoom,_this.update(),null==_this.options.onChange||_this.options.onChange.call(_this.options,+_this.zoom.toFixed(_this.getPrecision(_this.options.zoomStep)),reset))},this.getZoom=function(){return _this.zoom},this.setPos=function(pos){var _this_container,_this_container1,containerWidth=null==(_this_container=_this.container)?void 0:_this_container.clientWidth,containerHeight=null==(_this_container1=_this.container)?void 0:_this_container1.clientHeight;+_this.pos[0]===pos[0]&&+_this.pos[1]===pos[1]||(_this.percentPos=[pos[0]/containerWidth,pos[1]/containerHeight],_this.update(),null==_this.options.onTranslateChange||_this.options.onTranslateChange.call(_this.options,{posX:pos[0],posY:pos[1]}))},this.setTransitionDuration=function(duration){_this.transition=duration,_this.update()},this.setCursor=function(cursor){_this.container&&(_this.container.style.cssText+="cursor:"+cursor+";",_this.cursor=cursor)},this.zoomIn=function(value){var _this_options_max,_this_options_max1,newPosX=_this.pos[0],newPosY=_this.pos[1],prevZoom=_this.zoom,newZoom=prevZoom+value<(null!=(_this_options_max=_this.options.max)?_this_options_max:8)?prevZoom+value:null!=(_this_options_max1=_this.options.max)?_this_options_max1:8;newZoom!==prevZoom&&(newPosX=newPosX*(newZoom-1)/(prevZoom>1?prevZoom-1:prevZoom),newPosY=newPosY*(newZoom-1)/(prevZoom>1?prevZoom-1:prevZoom)),_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)},this.zoomOut=function(value){var _this_options_min,_this_options_min1,newPosX=_this.pos[0],newPosY=_this.pos[1],prevZoom=_this.zoom,newZoom=prevZoom-value>(null!=(_this_options_min=_this.options.min)?_this_options_min:1)?prevZoom-value:null!=(_this_options_min1=_this.options.min)?_this_options_min1:1;newZoom!==prevZoom&&(newPosX=newPosX*(newZoom-1)/(prevZoom-1),newPosY=newPosY*(newZoom-1)/(prevZoom-1)),_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)},this.zoomToZone=function(relX,relY,relWidth,relHeight){var _this_container;if(_this.container){var _this_options_max,newPosX=_this.pos[0],newPosY=_this.pos[1],parentRect=(null==(_this_container=_this.container)?void 0:_this_container.parentNode).getBoundingClientRect(),prevZoom=_this.zoom,optimalZoomX=parentRect.width/relWidth,optimalZoomY=parentRect.height/relHeight,newZoom=Math.min(optimalZoomX,optimalZoomY,null!=(_this_options_max=_this.options.max)?_this_options_max:8),rect=_this.container.getBoundingClientRect(),_ref=[rect.width/prevZoom/2,rect.height/prevZoom/2],_ref1=[relX+relWidth/2,relY+relHeight/2];newPosX=(_ref[0]-_ref1[0])*newZoom,newPosY=(_ref[1]-_ref1[1])*newZoom,_this.setZoom(newZoom),_this.setPos([newPosX,newPosY]),_this.setTransitionDuration(_this.options.animDuration)}},this.getNewPosition=function(x,y,newZoom){var prevZoom=[_this.zoom,_this.pos[0],_this.pos[1]][0];if(1===newZoom||!_this)return ZOOM_DEFAULT_POSITION;var _ref1=[_this.container.clientWidth,_this.container.clientHeight],clientWidth=_ref1[0],clientHeight=_ref1[1];if(newZoom>prevZoom)return[0,0];var w=-(x-clientWidth/2)/(clientWidth/2)*newZoom/2,h=-(y-clientHeight/2)/(clientHeight/2)*newZoom/2;return w>newZoom/2-.5&&(w=3.5),h>newZoom/2-.5&&(h=3.5),[clientWidth*w,clientHeight*h]},this.fullZoomInOnPosition=function(x,y){var _this_options_max,zoom=null!=(_this_options_max=_this.options.max)?_this_options_max:DefaultOptions.max;_this.setZoom(null!=zoom?zoom:DefaultOptions.max),_this.setPos(_this.getNewPosition(x,y,zoom)),_this.setTransitionDuration(_this.options.animDuration)},this.getLimitedShift=function(shift,minLimit,maxLimit,minElement,maxElement){if(shift>0){if(minElement>minLimit)return 0;if(minElement+shift>minLimit)return minLimit-minElement}else if(shift<0){if(maxElement<maxLimit)return 0;if(maxElement+shift<maxLimit)return maxLimit-maxElement}return shift},this.getCursor=function(canMoveOnX,canMoveOnY){return canMoveOnX&&canMoveOnY?"move":canMoveOnX?"ew-resize":canMoveOnY?"ns-resize":"auto"},this.move=function(shiftX,shiftY,transitionDuration){if(void 0===transitionDuration&&(transitionDuration=0),_this.container){var newPosX=_this.pos[0],newPosY=_this.pos[1],rect=_this.container.getBoundingClientRect(),parentRect=_this.container.parentNode.getBoundingClientRect(),shiftHorizontal=_this.transform?shiftY:shiftX,shiftVertical=_this.transform?shiftX:shiftY,_ref=_this.transform?[rect.height>parentRect.bottom-parentRect.top,shiftVertical>0&&rect.top-parentRect.top<0,shiftVertical<0&&rect.bottom-parentRect.bottom>0]:[rect.width>parentRect.right-parentRect.left,shiftHorizontal>0&&rect.left-parentRect.left<0,shiftHorizontal<0&&rect.right-parentRect.right>0],canMoveOnX=_ref[0]||_ref[1]||_ref[2];canMoveOnX&&(_this.transform?newPosX+=_this.getLimitedShift(shiftVertical,parentRect.top,parentRect.bottom,rect.top,rect.bottom):newPosX+=_this.getLimitedShift(shiftHorizontal,parentRect.left,parentRect.right,rect.left,rect.right));var _ref1=_this.transform?[rect.width>parentRect.right-parentRect.left,shiftHorizontal>0&&rect.right-parentRect.right<0,shiftHorizontal<0&&rect.left-parentRect.left>0]:[rect.height>parentRect.bottom-parentRect.top,shiftVertical>0&&rect.top-parentRect.top<0,shiftVertical<0&&rect.bottom-parentRect.bottom>0],canMoveOnY=_ref1[0]||_ref1[1]||_ref1[2];if(canMoveOnY)if(_this.transform){newPosY+=function(shift,minLimit,maxLimit,minElement,maxElement){if(shift>0){if(maxElement<maxLimit+1)return 0;if(maxElement+shift<maxLimit+1)return maxLimit-maxElement}else if(shift<0){if(minElement+1>minLimit)return 0;if(minElement+1+shift>minLimit)return minLimit-minElement}return shift}(shiftHorizontal,parentRect.left,parentRect.right,rect.left,rect.right)}else newPosY+=_this.getLimitedShift(shiftVertical,parentRect.top,parentRect.bottom,rect.top,rect.bottom);var cursor=_this.getCursor(canMoveOnX,canMoveOnY);_this.setPos([newPosX,newPosY]),_this.setCursor(cursor),_this.setTransitionDuration(transitionDuration)}},this.isDoubleTapping=function(){var _this_lastTouchTime,_this_options_doubleTouchMaxDelay,_this_lastDoubleTapTime,_this_options_doubleTouchMaxDelay1,touchTime=(new Date).getTime();return touchTime-(null!=(_this_lastTouchTime=_this.lastTouchTime)?_this_lastTouchTime:0)<(null!=(_this_options_doubleTouchMaxDelay=_this.options.doubleTouchMaxDelay)?_this_options_doubleTouchMaxDelay:300)&&touchTime-(null!=(_this_lastDoubleTapTime=_this.lastDoubleTapTime)?_this_lastDoubleTapTime:0)>(null!=(_this_options_doubleTouchMaxDelay1=_this.options.doubleTouchMaxDelay)?_this_options_doubleTouchMaxDelay1:750)?(_this.lastDoubleTapTime=touchTime,!0):(_this.lastTouchTime=touchTime,!1)},this.startDeceleration=function(lastShiftOnX,lastShiftOnY){var startTimestamp=null,startDecelerationMove=function(timestamp){null===startTimestamp&&(startTimestamp=timestamp);var _this_options_decelerationDuration,_this_options_decelerationDuration1,_this_options_decelerationDuration2,progress=timestamp-startTimestamp,ratio=((null!=(_this_options_decelerationDuration=_this.options.decelerationDuration)?_this_options_decelerationDuration:750)-progress)/(null!=(_this_options_decelerationDuration1=_this.options.decelerationDuration)?_this_options_decelerationDuration1:750),_ref=[lastShiftOnX*ratio,lastShiftOnY*ratio],shiftX=_ref[0],shiftY=_ref[1];progress<(null!=(_this_options_decelerationDuration2=_this.options.decelerationDuration)?_this_options_decelerationDuration2:750)&&Math.max(Math.abs(shiftX),Math.abs(shiftY))>1?(_this.move(shiftX,shiftY,0),_this.lastRequestAnimationId=requestAnimationFrame(startDecelerationMove)):_this.lastRequestAnimationId=null};_this.lastRequestAnimationId=requestAnimationFrame(startDecelerationMove)},this.reset=function(){_this.setZoom(_this.options.initialZoom,!0),_this.cursor=_this.options.defaultCursor,_this.setTransitionDuration(_this.options.animDuration),_this.setPos(ZOOM_DEFAULT_POSITION)},this.addScale=function(scale){void 0===scale&&(scale=1),_this.handleZoomAdd(scale)},this.handleZoomAdd=function(scale){if(void 0===scale&&(scale=1),_this.options.allowZoom&&_this.options.allowWheel){var _this_options_max,newZoom=parseFloat((_this.zoom+scale).toFixed(_this.getPrecision(_this.options.zoomStep)));newZoom>(null!=(_this_options_max=_this.options.max)?_this_options_max:8)&&(newZoom=8),_this.setZoom(newZoom),_this.setPos(_this.pos),_this.setTransitionDuration(.05)}},this.subScale=function(scale){void 0===scale&&(scale=1),_this.handleZoomSub(scale)},this.handleZoomSub=function(scale){if(void 0===scale&&(scale=1),_this.options.allowZoom&&_this.options.allowWheel){var newZoom=parseFloat((_this.zoom-scale).toFixed(_this.getPrecision(_this.options.zoomStep)));newZoom<1&&(newZoom=1),_this.setZoom(newZoom),_this.setPos(_this.pos),_this.setTransitionDuration(.05)}},this.handleMouseWheel=function(event){if(event.preventDefault(),_this.options.allowZoom&&_this.options.allowWheel){var _this_options_max,_this_options_min,velocity=event.deltaY<0?_this.options.scrollVelocity:0-_this.options.scrollVelocity,newZoom=parseFloat(Math.max(Math.min(_this.zoom+velocity,null!=(_this_options_max=_this.options.max)?_this_options_max:8),null!=(_this_options_min=_this.options.min)?_this_options_min:1).toFixed(_this.getPrecision(_this.options.zoomStep)));_this.setZoom(newZoom),_this.setTransitionDuration(.05)}},this.handleMouseStart=function(event){var _this_options_ignoredMouseButtons;event.preventDefault(),_this.options.allowPan&&!(null==(_this_options_ignoredMouseButtons=_this.options.ignoredMouseButtons)?void 0:_this_options_ignoredMouseButtons.includes(event.button))&&(_this._dragging=!0,_this.lastRequestAnimationId&&cancelAnimationFrame(_this.lastRequestAnimationId),_this.lastCursor=_this.getCoordinates(event))},this.handleMouseMove=function(event){event.preventDefault(),_this.options.allowPan&&_this.lastCursor&&_this._dragging&&_this._touchOrMouseDrag(event)},this.handleMouseStop=function(event){event.preventDefault(),_this.lastShift&&(_this.startDeceleration(_this.lastShift[0],_this.lastShift[1]),_this.lastShift=null),_this.lastCursor=null,_this.setCursor("auto"),_this._dragging=!1},this.handleTouchStart=function(event){var isThisDoubleTapping=_this.isDoubleTapping();_this.isMultiTouch=event.touches.length,_this.options.allowTouchEvents||event.preventDefault(),_this.lastRequestAnimationId&&cancelAnimationFrame(_this.lastRequestAnimationId);var _this_getCoordinates=_this.getCoordinates(event.touches[0]),posX=_this_getCoordinates[0],posY=_this_getCoordinates[1];if(_this.isMultiTouch>1)_this.lastCursor=[posX,posY];else if(isThisDoubleTapping&&_this.options.allowZoom)if(1===_this.zoom){var _this_container_getBoundingClientRect=_this.container.getBoundingClientRect();_this_container_getBoundingClientRect.top,_this_container_getBoundingClientRect.left;var ref,ref1,x=_this_container_getBoundingClientRect.x,y=_this_container_getBoundingClientRect.y;posX=(ref1=[posX-(x=(ref=_this.transform?[y,x]:[x,y])[0]),posY-(y=ref[1])])[0],posY=ref1[1],_this.fullZoomInOnPosition(posX,posY)}else _this.reset();else _this._tapStartTime=(new Date).getTime(),_this.options.allowPan&&(_this.lastCursor=[posX,posY])},this.handleTouchMove=function(event){if(_this.options.allowTouchEvents||event.preventDefault(),_this.lastCursor)if(1===_this.isMultiTouch)_this._touchOrMouseDrag(event.touches[0]),_this.lastTouchDistance=null;else if(_this.isMultiTouch>1){var newZoom=_this.zoom,_this_getCoordinates=_this.getCoordinates(event.touches[0]),pos1X=_this_getCoordinates[0],pos1Y=_this_getCoordinates[1],_this_getCoordinates1=_this.getCoordinates(event.touches[1]),pos2X=_this_getCoordinates1[0],pos2Y=_this_getCoordinates1[1],distance=Math.sqrt(Math.pow(pos2X-pos1X,2)+Math.pow(pos2Y-pos1Y,2));if(_this.lastTouchDistance&&distance&&distance!==_this.lastTouchDistance){var _this_options_max,_this_options_min,_this_options_max1;if(_this.options.allowZoom)if((newZoom+=(distance-_this.lastTouchDistance)/100)>(null!=(_this_options_max=_this.options.max)?_this_options_max:8))newZoom=null!=(_this_options_max1=_this.options.max)?_this_options_max1:8;else if(newZoom<(null!=(_this_options_min=_this.options.min)?_this_options_min:1)){var _this_options_min1;newZoom=null!=(_this_options_min1=_this.options.min)?_this_options_min1:1}_this.setZoom(newZoom),_this.setTransitionDuration(0)}_this.lastCursor=[pos1X,pos1Y],_this.lastTouchDistance=distance}},this.handleTouchStop=function(){_this.lastShift&&(_this.startDeceleration(_this.lastShift[0],_this.lastShift[1]),_this.lastShift=null),_this._tapStartTime&&(new Date).getTime()-_this._tapStartTime<200&&(null==_this.options.onTap||_this.options.onTap.call(_this.options)),_this._tapStartTime=void 0,_this.lastCursor=null,_this.lastTouchDistance=null,_this.isMultiTouch=0},this.container=container,this.options=Object.assign({},DefaultOptions,options||{}),this.percentPos=ZOOM_DEFAULT_POSITION,this.transition=this.options.animDuration,this.zoom=1,this.cursor="auto",this.lastCursor=[0,0],this.lastShift=null,this.lastTouchDistance=null,this.lastRequestAnimationId=null,this.lastTouchTime=(new Date).getTime(),this.lastDoubleTapTime=(new Date).getTime(),this.transform=!1,this.isMultiTouch=1,this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseStart=this.handleMouseStart.bind(this),this.handleMouseStop=this.handleMouseStop.bind(this),this.handleMouseWheel=this.handleMouseWheel.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchStop=this.handleTouchStop.bind(this),this.getZoom=this.getZoom.bind(this),this.setZoom=this.setZoom.bind(this)}var _proto=Zoom.prototype;return _proto.setUpEventListeners=function(){var refCurrentValue=this.container;window.matchMedia("(pointer: fine)").matches?(this.options.allowWheel&&(null==refCurrentValue||refCurrentValue.addEventListener("wheel",this.handleMouseWheel,{passive:!1})),null==refCurrentValue||refCurrentValue.addEventListener("mousedown",this.handleMouseStart,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mousemove",this.handleMouseMove,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mouseup",this.handleMouseStop,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("mouseleave",this.handleMouseStop,{passive:!1})):(null==refCurrentValue||refCurrentValue.addEventListener("touchstart",this.handleTouchStart,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchend",this.handleTouchStop,{passive:!1}),null==refCurrentValue||refCurrentValue.addEventListener("touchcancel",this.handleTouchStop,{passive:!1}))},_proto.removeEventListeners=function(){var refCurrentValue=this.container;window.matchMedia("(pointer: fine)").matches?(this.options.allowWheel&&(null==refCurrentValue||refCurrentValue.removeEventListener("wheel",this.handleMouseWheel)),null==refCurrentValue||refCurrentValue.removeEventListener("mousedown",this.handleMouseStart),null==refCurrentValue||refCurrentValue.removeEventListener("mousemove",this.handleMouseMove),null==refCurrentValue||refCurrentValue.removeEventListener("mouseup",this.handleMouseStop),null==refCurrentValue||refCurrentValue.removeEventListener("mouseleave",this.handleMouseStop)):(null==refCurrentValue||refCurrentValue.removeEventListener("touchstart",this.handleTouchStart),null==refCurrentValue||refCurrentValue.removeEventListener("touchmove",this.handleTouchMove),null==refCurrentValue||refCurrentValue.removeEventListener("touchend",this.handleTouchStop),null==refCurrentValue||refCurrentValue.removeEventListener("touchcancel",this.handleTouchStop))},_proto.getPrecision=function(value){void 0===value&&(value=1);var valueStr=value.toString();return valueStr.includes(".")?valueStr.split(".")[1].length:1},_proto.getCoordinates=function(event){var clientHeight=this.container.clientHeight,clientTop=this.container.clientTop,clientLeft=this.container.clientLeft,_ref=this.transform?[event.clientY,clientHeight-event.clientX]:[event.clientX-clientTop,event.clientY-clientLeft];return[_ref[0],_ref[1]]},_proto._touchOrMouseDrag=function(event){if(this.lastCursor){var _this_getCoordinates=this.getCoordinates(event),posX=_this_getCoordinates[0],posY=_this_getCoordinates[1],shiftX=posX-this.lastCursor[0],shiftY=posY-this.lastCursor[1];this.move(shiftX,shiftY,0),this.lastCursor=[posX,posY],this.lastShift=[shiftX,shiftY]}},_create_class(Zoom,[{key:"pos",get:function(){return[this.container.clientWidth*this.percentPos[0],this.container.clientHeight*this.percentPos[1]]}}]),Zoom}();return Zoom.VERSION="1.0.0-alpha.1",Zoom});

package/dist/types/index.d.ts

@@ -1,65 +1,159 @@
+/**
+ * Zoom position
+ *
+ */
+interface ZoomPosition {
+    posX: number;
+    posY: number;
+}
+/**
+ * Zoom options
+ */
 interface ZoomOptions {
-    initialZoom: number;
-    defaultCursor: string;
-    scrollVelocity: number;
-    animDuration: number;
-    defaultPos: [number, number];
-    allowZoom: boolean;
-    allowMove: boolean;
-    allowPan: boolean;
-    onZoomChange: Function;
-    onPanChange: (pos: object) => void;
-    maxZoom: number;
-    minZoom: number;
-    zoomStep: number;
-    allowTouchEvents: boolean;
+    /** 初始化缩放倍数, 默认 1 */
+    initialZoom?: number;
+    /** 默认光标，默认 auto */
+    defaultCursor?: string;
+    /** 滚动速度, 默认 0.1 */
+    scrollVelocity?: number;
+    /** 过渡持续时间，默认 0.25 单位秒 */
+    animDuration?: number;
+    /** 允许缩放， 默认 true */
+    allowZoom?: boolean;
+    /** 是否允许滚轮， 默认 true */
     allowWheel: boolean;
-    ignoredMouseButtons: any[];
-    doubleTouchMaxDelay: number;
-    decelerationDuration: number;
+    /** 是否允许触屏移动(mousemove, touchmove)，默认 true */
+    allowPan?: boolean;
+    /**
+     * 缩放倍数变化
+     * @param zoom - 缩放倍数
+     * @param reset - 是否重置
+     */
+    onChange?: (zoom: number, reset?: boolean) => void;
+    /**
+     * 内容平移的位置变化，（值时放大后的偏移量）
+     * @param pos - 位置
+     */
+    onTranslateChange?: (pos: ZoomPosition) => void;
+    onTap?: () => void;
+    /** 最大缩放倍数， 默认 8 */
+    max?: number;
+    /** 最小缩放倍数， 默认 1 */
+    min?: number;
+    /** 缩放倍数步数大小， 默认 0.1  */
+    zoomStep?: number;
+    /** 允许 event.preventDefault ,默认 false */
+    allowTouchEvents?: boolean;
+    /**
+     * 鼠标按钮，0：主按钮（通常为左键）， 1：辅助按钮（通常为中键/滚轮） 2：次按钮（通常为右键） 3：后退按钮（浏览器后退功能） 4：前进按钮（浏览器前进功能）
+     * @default []
+     */
+    ignoredMouseButtons?: number[];
+    /** 双击最大延时, 默认 300 单位ms, 仅移动端支持 */
+    doubleTouchMaxDelay?: number;
+    /** 减速持续时间, 默认 750 单位 ms */
+    decelerationDuration?: number;
 }
+/**
+ * dom 节点放大和拖动
+ *
+ */
 declare class Zoom {
+    static VERSION: string;
     container: HTMLElement;
-    options: ZoomOptions;
-    pos: [number, number];
+    options: Required<ZoomOptions>;
     percentPos: [number, number];
     transition: number;
     zoom: number;
     cursor: string;
     lastCursor: [number, number] | null;
     lastShift: [number, number] | null;
-    lastTouch: [number, number] | null;
     lastTouchDistance: number | null;
     lastRequestAnimationId: number | null;
     lastTouchTime: number | null;
     lastDoubleTapTime: number | null;
+    /** 是否旋转了 90度 */
     transform: boolean;
     isMultiTouch: number | 0;
-    containerResizeObserver: ResizeObserver;
+    private _tapStartTime;
+    private _dragging;
     constructor(container: HTMLElement, options?: Partial<ZoomOptions>);
+    get pos(): [number, number];
+    /**
+     * 销毁
+     * destroy
+     */
     destroy: () => void;
+    /**
+     * 设置是否旋转
+     * @param trans - 是否transform
+     */
     setTransform: (trans: boolean) => void;
+    /**
+     * 获取是否旋转
+     * @returns
+     */
     getTransform: () => boolean;
+    /**
+     * 更新x轴和Y轴平移值
+     */
     updateTranslate: () => void;
+    /**
+     * 更新容器样式
+     */
     update: () => void;
+    /**
+     * 设置支持缩放
+     * @param allow
+     */
     setAllowZoom: (allow: boolean) => void;
+    /**
+     * 设置缩放值
+     * @param zoom - 缩放值
+     * @param reset - 是否重置
+     */
     setZoom: (zoom: number, reset?: boolean | false) => void;
+    /**
+     * 获取缩放值
+     * @returns
+     */
     getZoom: () => number;
+    /**
+     * 设置位置
+     * @param pos - 位置 [X轴坐标转换， Y轴坐标转换]
+     */
     setPos: (pos: [number, number]) => void;
+    /**
+     * 设置过渡时间
+     * @param duration - 过渡时间, 单位秒
+     */
     setTransitionDuration: (duration: number) => void;
+    /**
+     * 设置鼠标样式
+     * @param cursor
+     * @returns
+     */
     setCursor: (cursor: string) => void;
     zoomIn: (value: number) => void;
     zoomOut: (value: number) => void;
     zoomToZone: (relX: number, relY: number, relWidth: number, relHeight: number) => void;
     getNewPosition: (x: number, y: number, newZoom: number) => [number, number];
+    /**
+     * 缩放到最大
+     * @param x - 点击点X坐标
+     * @param y - 点击点Y坐标
+     */
     fullZoomInOnPosition: (x: number, y: number) => void;
     getLimitedShift: (shift: number, minLimit: number, maxLimit: number, minElement: number, maxElement: number) => number;
     getCursor: (canMoveOnX: boolean, canMoveOnY: boolean) => "auto" | "move" | "ew-resize" | "ns-resize";
     move: (shiftX: number, shiftY: number, transitionDuration?: number) => void;
+    /**
+     * 移动端双击
+     * @returns
+     */
     isDoubleTapping: () => boolean;
     startDeceleration: (lastShiftOnX: number, lastShiftOnY: number) => void;
     reset: () => void;
-    handleDoubleClick: (event: MouseEvent) => void;
     setUpEventListeners(): void;
     removeEventListeners(): void;
     getPrecision(value?: number): number;
@@ -71,28 +165,17 @@ declare class Zoom {
     handleMouseStart: (event: MouseEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;
     handleMouseStop: (event: MouseEvent) => void;
-    getCoordinates: (event: Touch) => number[];
+    /**
+     * 获取坐标 (伪横屏X、Y轴坐标转换, 相对值)
+     * @param event
+     * @returns
+     */
+    getCoordinates(event: Touch | MouseEvent): [number, number];
     handleTouchStart: (event: TouchEvent) => void;
     handleTouchMove: (event: TouchEvent) => void;
     handleTouchStop: () => void;
+    private _touchOrMouseDrag;
 }
 
-interface ZoomUIOptions extends ZoomOptions {
-    id: string;
-    isMobile: boolean;
-    i18n: any;
-}
-declare class ZoomUI {
-    container: HTMLElement;
-    options: ZoomUIOptions;
-    Zoom: ZoomOptions | any;
-    constructor(container: HTMLElement, options: ZoomUIOptions);
-    setTransform: (trans: boolean) => void;
-    startZoom: () => void;
-    stopZoom: () => void;
-    addScale: (scale?: number) => void;
-    subScale: (scale?: number) => void;
-    renderDot(zoom: string): void;
-}
-
-export { Zoom, type ZoomOptions, ZoomUI, type ZoomUIOptions };
+export { Zoom as default };
+export type { ZoomOptions };

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "@ezuikit/control-zoom",
-  "version": "0.0.1-beta.1",
-  "description": "zoom",
+  "version": "1.0.0-alpha.1",
+  "description": "zoom control for ezviz",
   "title": "zoom",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
-  "module": "dist/index.mjs",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.mjs --watch",
-    "build": "npm run clean && cross-env NODE_ENV=production rollup --config rollup.config.mjs",
-    "clean": "rimraf dist"
-  },
   "keywords": [
     "zoom"
   ],
+  "files": [
+    "dist"
+  ],
   "author": "Ezviz-OpenBiz",
   "license": "",
-  "dependencies": {
-    "lodash-es": "^4.17.21"
+  "dependencies": {},
+  "peerDependencies": {},
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ezviz-OpenBiz/EZUIKit-player-controls.git"
   },
-  "devDependencies": {
-    "@config/rollup": "workspace:*",
-    "@types/lodash-es": "^4.17.12"
+  "bugs": {
+    "url": "https://github.com/Ezviz-OpenBiz/EZUIKit-player-controls/issues"
   },
-  "peerDependencies": {}
-}
+  "homepage": "https://github.com/Ezviz-OpenBiz/EZUIKit-player-controls#readme"
+}

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env"
-  ],
-  "plugins": []
-}

package/dist/dependencies.txt

@@ -1 +0,0 @@
-No third parties dependencies

package/dist/index.mjs

@@ -1,7 +0,0 @@
-/*
-* ZoomControl v0.0.1-beta.1
-* zoom
-* Copyright (c) 2025-11-05 Ezviz-OpenBiz
-* Released under the MIT License.
-*/
-const t={initialZoom:1,defaultCursor:"auto",scrollVelocity:.1,animDuration:.25,defaultPos:[0,0],allowZoom:!0,allowMove:!0,allowPan:!0,onZoomChange:()=>{},onPanChange:(t,o)=>{},maxZoom:8,minZoom:1,zoomStep:.1,allowTouchEvents:!1,allowWheel:!0,ignoredMouseButtons:[],doubleTouchMaxDelay:300,decelerationDuration:750};class o{constructor(o,s){var i=this;this.destroy=()=>{this.removeEventListeners()},this.setTransform=t=>{this.transform=t},this.getTransform=()=>this.transform,this.updateTranslate=()=>{let t=0,o=0;t=this.percentPos[0]<0?this.percentPos[0]<-.5*(this.zoom-1)?-.5*(this.zoom-1):this.percentPos[0]:this.percentPos[0]>.5*(this.zoom-1)?.5*(this.zoom-1):this.percentPos[0],o=this.percentPos[1]<0?this.percentPos[1]<-.5*(this.zoom-1)?-.5*(this.zoom-1):this.percentPos[1]:this.percentPos[1]>.5*(this.zoom-1)?.5*(this.zoom-1):this.percentPos[1],this.percentPos=[t,o]},this.update=()=>{this.container&&(this.updateTranslate(),this.container.style.transition=`transform ease-out ${this.transition}s`,this.container.style.transform=`translate3d(${100*this.percentPos[0]}%, ${100*this.percentPos[1]}%, 0) scale(${this.zoom})`)},this.setAllowZoom=t=>{this.options.allowZoom=t},this.setZoom=(t,o)=>{this.zoom=parseFloat(t.toFixed(this.getPrecision(this.options.zoomStep))),this.update(),this.options.onZoomChange&&this.options.onZoomChange(this.zoom.toFixed(this.getPrecision(this.options.zoomStep)),o)},this.getZoom=()=>this.zoom,this.setPos=t=>{var o,s;const i=null===(o=this.container)||void 0===o?void 0:o.clientWidth,e=null===(s=this.container)||void 0===s?void 0:s.clientHeight;this.percentPos=[t[0]/i,t[1]/e],this.pos=t,this.update(),this.options.onPanChange&&this.options.onPanChange({posX:t[0],posY:t[1]})},this.setTransitionDuration=t=>{this.transition=t,this.update()},this.setCursor=t=>{this.container&&(this.cursor=t)},this.zoomIn=t=>{var o,s;let i=this.pos[0],e=this.pos[1];const n=this.zoom,h=n+t<(null!==(o=this.options.maxZoom)&&void 0!==o?o:8)?n+t:null!==(s=this.options.maxZoom)&&void 0!==s?s:8;h!==n&&(i=i*(h-1)/(n>1?n-1:n),e=e*(h-1)/(n>1?n-1:n)),this.setZoom(h),this.setPos([i,e]),this.setTransitionDuration(this.options.animDuration)},this.zoomOut=t=>{var o,s;let i=this.pos[0],e=this.pos[1];const n=this.zoom,h=n-t>(null!==(o=this.options.minZoom)&&void 0!==o?o:1)?n-t:null!==(s=this.options.minZoom)&&void 0!==s?s:1;h!==n&&(i=i*(h-1)/(n-1),e=e*(h-1)/(n-1)),this.setZoom(h),this.setPos([i,e]),this.setTransitionDuration(this.options.animDuration)},this.zoomToZone=(t,o,s,i)=>{var e,n;if(!this.container)return;let h=this.pos[0],l=this.pos[1];const a=(null===(e=this.container)||void 0===e?void 0:e.parentNode).getBoundingClientRect(),r=this.zoom,u=a.width/s,d=a.height/i,c=Math.min(u,d,null!==(n=this.options.maxZoom)&&void 0!==n?n:8),m=this.container.getBoundingClientRect(),[p,v]=[m.width/r/2,m.height/r/2],[g,f]=[t+s/2,o+i/2];h=(p-g)*c,l=(v-f)*c,this.setZoom(c),this.setPos([h,l]),this.setTransitionDuration(this.options.animDuration)},this.getNewPosition=(t,o,s)=>{const[i,e,n]=[this.zoom,this.pos[0],this.pos[1]];if(1===s||!this)return[0,0];if(s>i){const h=this.container.getBoundingClientRect(),[l,a]=[h.width/2,h.height/2],[r,u]=[t-h.left-window.pageXOffset,o-h.top-window.pageYOffset],[d,c]=[(l-r)/i,(a-u)/i],m=s-i;return[e+d*m,n+c*m]}return[e*(s-1)/(i-1),n*(s-1)/(i-1)]},this.fullZoomInOnPosition=(t,o)=>{var s;const i=null!==(s=this.options.maxZoom)&&void 0!==s?s:8;this.setPos(this.getNewPosition(t,o,i)),this.setZoom(null!=i?i:8),this.setTransitionDuration(this.options.animDuration)},this.getLimitedShift=(t,o,s,i,e)=>{if(t>0){if(i>o)return 0;if(i+t>o)return o-i}else if(t<0){if(e<s)return 0;if(e+t<s)return s-e}return t},this.getCursor=(t,o)=>t&&o?"move":t?"ew-resize":o?"ns-resize":"auto",this.move=function(t,o){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;if(!i.container)return;let e,n,h=i.pos[0],l=i.pos[1];const a=i.container.getBoundingClientRect(),r=i.container.parentNode.getBoundingClientRect(),u=i.transform?o:t,d=i.transform?t:o,[c,m,p]=i.transform?[a.height>r.bottom-r.top,d>0&&a.top-r.top<0,d<0&&a.bottom-r.bottom>0]:[a.width>r.right-r.left,u>0&&a.left-r.left<0,u<0&&a.right-r.right>0];e=c||m||p,e&&(i.transform?h+=i.getLimitedShift(d,r.top,r.bottom,a.top,a.bottom):h+=i.getLimitedShift(u,r.left,r.right,a.left,a.right));const[v,g,f]=i.transform?[a.width>r.right-r.left,u>0&&a.right-r.right<0,u<0&&a.left-r.left>0]:[a.height>r.bottom-r.top,d>0&&a.top-r.top<0,d<0&&a.bottom-r.bottom>0];if(n=v||g||f,n)if(i.transform){function w(t,o,s,i,e){if(t>0){if(e<s+1)return 0;if(e+t<s+1)return s-e}else if(t<0){if(i+1>o)return 0;if(i+1+t>o)return o-i}return t}l+=w(u,r.left,r.right,a.left,a.right)}else l+=i.getLimitedShift(d,r.top,r.bottom,a.top,a.bottom);const b=i.getCursor(e,n);i.setPos([h,l]),i.setCursor(b),i.setTransitionDuration(s)},this.isDoubleTapping=()=>{var t,o,s,i;const e=(new Date).getTime();return e-(null!==(t=this.lastTouchTime)&&void 0!==t?t:0)<(null!==(o=this.options.doubleTouchMaxDelay)&&void 0!==o?o:300)&&e-(null!==(s=this.lastDoubleTapTime)&&void 0!==s?s:0)>(null!==(i=this.options.doubleTouchMaxDelay)&&void 0!==i?i:750)?(this.lastDoubleTapTime=e,!0):(this.lastTouchTime=e,!1)},this.startDeceleration=(t,o)=>{let s=null;const i=e=>{var n,h,l;null===s&&(s=e);const a=e-s,r=((null!==(n=this.options.decelerationDuration)&&void 0!==n?n:750)-a)/(null!==(h=this.options.decelerationDuration)&&void 0!==h?h:750),[u,d]=[t*r,o*r];a<(null!==(l=this.options.decelerationDuration)&&void 0!==l?l:750)&&Math.max(Math.abs(u),Math.abs(d))>1?(this.move(u,d,0),this.lastRequestAnimationId=requestAnimationFrame(i)):this.lastRequestAnimationId=null};this.lastRequestAnimationId=requestAnimationFrame(i)},this.reset=()=>{this.setZoom(this.options.initialZoom,!0),this.cursor=this.options.defaultCursor,this.setTransitionDuration(this.options.animDuration),this.setPos(this.options.defaultPos)},this.handleDoubleClick=t=>{var o;t.preventDefault(),this.options.allowZoom&&(this.zoom===(null!==(o=this.options.minZoom)&&void 0!==o?o:1)?this.fullZoomInOnPosition(t.pageX,t.pageY):this.reset())},this.addScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;i.handleZoomAdd(t)},this.handleZoomAdd=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;var o;if(!i.options.allowZoom||!i.options.allowWheel)return;let s=parseFloat((i.zoom+t).toFixed(i.getPrecision(i.options.zoomStep)));s>(null!==(o=i.options.maxZoom)&&void 0!==o?o:8)&&(s=8),i.setZoom(s),i.setPos(i.pos),i.setTransitionDuration(.05)},this.subScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;i.handleZoomSub(t)},this.handleZoomSub=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;var o,s;if(!i.options.allowZoom||!i.options.allowWheel)return;let e=parseFloat((i.zoom-t).toFixed(i.getPrecision(i.options.zoomStep))),n=i.pos;e<(null!==(o=i.options.minZoom)&&void 0!==o?o:1)?(e=1,n=i.options.defaultPos):e!==i.zoom&&(n=e!==(null!==(s=i.options.minZoom)&&void 0!==s?s:1)?i.getNewPosition(i.pos[0],i.pos[1],e):i.options.defaultPos),i.setZoom(e),i.setPos(n),i.setTransitionDuration(.05)},this.handleMouseWheel=t=>{var o,s;if(t.preventDefault(),!this.options.allowZoom||!this.options.allowWheel)return;const i=t.deltaY<0?this.options.scrollVelocity:0-this.options.scrollVelocity,e=parseFloat(Math.max(Math.min(this.zoom+i,null!==(o=this.options.maxZoom)&&void 0!==o?o:8),null!==(s=this.options.minZoom)&&void 0!==s?s:1).toFixed(this.getPrecision(this.options.zoomStep)));this.setZoom(e),this.setPos(this.pos),this.setTransitionDuration(.05)},this.handleMouseStart=t=>{var o;t.preventDefault(),this.options.allowPan&&!(null===(o=this.options.ignoredMouseButtons)||void 0===o?void 0:o.includes(t.button))&&(this.lastRequestAnimationId&&cancelAnimationFrame(this.lastRequestAnimationId),this.lastCursor=[t.pageX,t.pageY])},this.handleMouseMove=t=>{if(t.preventDefault(),!this.options.allowPan||!this.lastCursor)return;const[o,s]=[t.pageX,t.pageY],i=o-this.lastCursor[0],e=s-this.lastCursor[1];this.move(i,e,0),this.lastCursor=[o,s],this.lastShift=[i,e]},this.handleMouseStop=t=>{t.preventDefault(),this.lastShift&&(this.startDeceleration(this.lastShift[0],this.lastShift[1]),this.lastShift=null),this.lastCursor=null,this.setCursor("auto")},this.getCoordinates=t=>this.transform?[t.pageY,window.innerWidth-t.pageX]:[t.pageX,t.pageY],this.handleTouchStart=t=>{const o=this.isDoubleTapping();this.isMultiTouch=t.touches.length,this.options.allowTouchEvents||t.preventDefault(),this.lastRequestAnimationId&&cancelAnimationFrame(this.lastRequestAnimationId);const[s,i]=this.getCoordinates(t.touches[0]);this.isMultiTouch>1?this.lastTouch=[s,i]:o&&this.options.allowZoom?1===this.zoom?this.fullZoomInOnPosition(s,i):this.reset():this.options.allowPan&&(this.lastTouch=[s,i])},this.handleTouchMove=t=>{var o,s,i,e;if(this.options.allowTouchEvents||t.preventDefault(),this.lastTouch)if(1===this.isMultiTouch){const[o,s]=this.getCoordinates(t.touches[0]);let i=o-this.lastTouch[0],e=s-this.lastTouch[1];this.move(i,e),this.lastShift=[i,e],this.lastTouch=[o,s],this.lastTouchDistance=null}else if(this.isMultiTouch>1){let n=this.zoom;const[h,l]=this.getCoordinates(t.touches[0]),[a,r]=this.getCoordinates(t.touches[1]),u=Math.sqrt(Math.pow(a-h,2)+Math.pow(r-l,2));if(this.lastTouchDistance&&u&&u!==this.lastTouchDistance){this.options.allowZoom&&(n+=(u-this.lastTouchDistance)/100,n>(null!==(o=this.options.maxZoom)&&void 0!==o?o:8)?n=null!==(s=this.options.maxZoom)&&void 0!==s?s:8:n<(null!==(i=this.options.minZoom)&&void 0!==i?i:1)&&(n=null!==(e=this.options.minZoom)&&void 0!==e?e:1));const[t,d]=[(h+a)/2,(l+r)/2],c=this.getNewPosition(t,d,n);this.setZoom(n),this.setPos(c),this.setTransitionDuration(0)}this.lastTouch=[h,l],this.lastTouchDistance=u}},this.handleTouchStop=()=>{this.lastShift&&(this.startDeceleration(this.lastShift[0],this.lastShift[1]),this.lastShift=null),this.lastTouch=null,this.lastTouchDistance=null,this.isMultiTouch=0},this.container=o,this.options=Object.assign({},t,s||{}),this.pos=[0,0],this.percentPos=[0,0],this.transition=this.options.animDuration,this.zoom=1,this.cursor="auto",this.lastCursor=[0,0],this.lastShift=null,this.lastTouch=null,this.lastTouchDistance=null,this.lastRequestAnimationId=null,this.lastTouchTime=(new Date).getTime(),this.lastDoubleTapTime=(new Date).getTime(),this.transform=!1,this.isMultiTouch=1,this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseStart=this.handleMouseStart.bind(this),this.handleMouseStop=this.handleMouseStop.bind(this),this.handleMouseWheel=this.handleMouseWheel.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchStop=this.handleTouchStop.bind(this),this.getZoom=this.getZoom.bind(this),this.setZoom=this.setZoom.bind(this),this.containerResizeObserver=new ResizeObserver((t=>{for(let o of t)this.pos=[o.contentRect.width*this.percentPos[0],o.contentRect.height*this.percentPos[1]]}))}setUpEventListeners(){const t=this.container,o=window.matchMedia("(pointer: fine)").matches;null==t||t.addEventListener("wheel",this.handleMouseWheel,{passive:!1}),this.containerResizeObserver.observe(t),o?(null==t||t.addEventListener("mousedown",this.handleMouseStart,{passive:!1}),null==t||t.addEventListener("mousemove",this.handleMouseMove,{passive:!1}),null==t||t.addEventListener("mouseup",this.handleMouseStop,{passive:!1}),null==t||t.addEventListener("mouseleave",this.handleMouseStop,{passive:!1})):(null==t||t.addEventListener("touchstart",this.handleTouchStart,{passive:!1}),null==t||t.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),null==t||t.addEventListener("touchend",this.handleTouchStop,{passive:!1}),null==t||t.addEventListener("touchcancel",this.handleTouchStop,{passive:!1}))}removeEventListeners(){const t=this.container,o=window.matchMedia("(pointer: fine)").matches;null==t||t.removeEventListener("wheel",this.handleMouseWheel),this.containerResizeObserver.unobserve(t),o?(null==t||t.removeEventListener("mousedown",this.handleMouseStart),null==t||t.removeEventListener("mousemove",this.handleMouseMove),null==t||t.removeEventListener("mouseup",this.handleMouseStop),null==t||t.removeEventListener("mouseleave",this.handleMouseStop)):(null==t||t.removeEventListener("touchstart",this.handleTouchStart),null==t||t.removeEventListener("touchmove",this.handleTouchMove),null==t||t.removeEventListener("touchend",this.handleTouchStop),null==t||t.removeEventListener("touchcancel",this.handleTouchStop))}getPrecision(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1).toString();return-1!==t.indexOf(".")?t.split(".")[1].length:1}}const s={maxZoom:8,minZoom:1,onZoomChange:()=>{}};class i{constructor(t,i){var e=this;this.setTransform=t=>{this.Zoom.setTransform(t)},this.startZoom=()=>{const t=document.getElementById(`${this.options.id}-zoom-container`);t&&(t.style.display="block"),this.Zoom.setAllowZoom(!0),this.Zoom.setUpEventListeners()},this.stopZoom=()=>{const t=document.getElementById(`${this.options.id}-zoom-container`);t&&(t.style.display="none"),this.Zoom.setAllowZoom(!1),this.Zoom.reset(),this.Zoom.removeEventListeners()},this.addScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;e.Zoom.handleZoomAdd(t)},this.subScale=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;e.Zoom.handleZoomSub(t)},this.container=t,this.options=Object.assign({},s,i||{}),this.Zoom=new o(this.container,Object.assign(Object.assign({},this.options),{allowZoom:!1,onZoomChange:(t,o)=>{this.renderDot(t),this.options.onZoomChange&&this.options.onZoomChange(t,o)}}));const n=document.createElement("div");n.id=`${this.options.id}-zoom-container`;const h=document.getElementById(`${this.options.id}-audioControls`);let l=48;h&&(l=h.offsetHeight);const a=this.options.isMobile?"\n        -webkit-transform: scale(0.8);\n        -moz-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n        transform-origin: left bottom;":"";n.style.cssText=`position: absolute;\n        display:none;\n        left: 12px;\n        bottom: ${this.options.isMobile?`${l+6}px`:"102px"};\n        ${a}\n        `;const r=`\n        <div\n        style="display: inline-flex;justify-content: space-between;flex-direction: column;width: 36px;height: 160px;background:rgba(0,0,0,0.60);border-radius: 2px;align-items: center;">\n        <div id="${this.options.id}-scale-value" style="font-size: 12px;color:#FFFFFF;margin:10px 0; user-select: none;">1.0X</div>\n        <div style="width: 20px;height: 20px;margin-bottom:4px;" id="${this.options.id}-addScale">\n          <?xml version="1.0" encoding="utf-8"?>\n          <svg version="1.1" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n             viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">\n          <title>${this.options.i18n.t("ZOOM_ADD")}</title>\n          <g>\n            <rect class="st0" width="20" height="20" fill="none"/>\n          </g>\n          <g>\n            <path class="st1" d="M10,3.8c3.5,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2S3.8,13.5,3.8,10S6.5,3.8,10,3.8z M10,5c-2.8,0-5,2.2-5,5\n              s2.2,5,5,5s5-2.2,5-5S12.8,5,10,5z"/>\n          </g>\n          <g>\n            <path class="st2" d="M12.5,10.7h-5c-0.3,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h5c0.3,0,0.6,0.3,0.6,0.6S12.8,10.7,12.5,10.7z"/>\n          </g>\n          <g>\n            <path class="st2" d="M10,13.2c-0.3,0-0.6-0.3-0.6-0.6v-5c0-0.3,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v5C10.6,12.9,10.3,13.2,10,13.2z"/>\n          </g>\n          </svg>\n        </div>\n        <div style="\n        position: relative;\n        width: 2px;\n        height: 64px;\n        border-radius: 2px;\n        background: rgba(255,255,255,0.75);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-end;">\n        <div class="scale-body-line-dot" id="${this.options.id}-scale-body-line-dot" style="\n          width: 6px;\n          height: 6px;\n          background: #FFFFFF;\n          border-radius: 100%;\n          position: absolute;\n          bottom: -3px;\n          border: 1px solid #407AFF;"></div>\n          <div id="${this.options.id}-line-dot" style="\n          width: 2px;\n          height: 0%;\n          border-radius: 2px;\n          background: #407AFF;"></div>\n        </div>\n        <div style="width: 20px;height: 20px;margin: 4px 0 10px;" id="${this.options.id}-subScale">\n          <?xml version="1.0" encoding="utf-8"?>\n          <svg fill="#FFFFFF" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n            viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">\n            <title>${this.options.i18n.t("ZOOM_SUB")}</title>\n            <g>\n              <rect class="st0" width="20" height="20" fill="none"/>\n            </g>\n            <g>\n              <path class="st1" d="M10,3.8c3.5,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2S3.8,13.5,3.8,10S6.5,3.8,10,3.8z M10,5c-2.8,0-5,2.2-5,5\n                s2.2,5,5,5s5-2.2,5-5S12.8,5,10,5z"/>\n            </g>\n            <g>\n              <path class="st2" d="M12.5,10.7h-5c-0.3,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h5c0.3,0,0.6,0.3,0.6,0.6S12.8,10.7,12.5,10.7z"/>\n            </g>\n          </svg>\n        </div>\n      </div>\n        `;n.innerHTML=r;const u=document.getElementById(`${this.options.id}-audioControls`);if(u){u.parentNode&&u.parentNode.appendChild(n);const t=document.getElementById(`${this.options.id}-addScale`);t&&(t.onclick=()=>{this.addScale()});const o=document.getElementById(`${this.options.id}-subScale`);o&&(o.onclick=()=>{this.subScale()})}this.startZoom=this.startZoom.bind(this),this.stopZoom=this.stopZoom.bind(this),this.addScale=this.addScale.bind(this),this.subScale=this.subScale.bind(this),this.setTransform=this.setTransform.bind(this)}renderDot(t){const o=document.getElementById(`${this.options.id}-scale-value`);o&&(o.innerHTML=`${parseFloat(t).toFixed(1)}X`);const s=document.getElementById(`${this.options.id}-line-dot`);s&&(s.style.height=(parseFloat(t)-1)/7*100+"%");const i=document.getElementById(`${this.options.id}-scale-body-line-dot`);i&&(i.style.bottom=`calc(${(parseFloat(t)-1)/7*100}% - 3px)`)}}export{o as Zoom,i as ZoomUI};

package/public/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <script src="./index.umd.js" text="text/javascript"></script>
-    <script>
-      console.log(ZoomControl);
-      const zoom = new ZoomControl();
-      console.log(zoom);
-    </script>
-  </body>
-</html>

package/rollup.config.mjs

@@ -1,8 +0,0 @@
-import generateConfig from '@config/rollup';
-import pkg from './package.json' assert { type: 'json' }; // 新版需要改成 with
-
-export default generateConfig({
-  ...pkg,
-  port: 3000,
-  compiler: 'tsc'
-});