@gx-design-vue/image 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/g-image.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@antdv-next/icons`),require(`@gx-design-vue/pro-provider`),require(`antdv-next/config-provider/context`),require(`antdv-next/config-provider/hooks/useCSSVarCls`),require(`antdv-next`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@antdv-next/icons`,`@gx-design-vue/pro-provider`,`antdv-next/config-provider/context`,`antdv-next/config-provider/hooks/useCSSVarCls`,`antdv-next`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GImage={},e.Vue,e._antdv_next_icons,e._gx_design_vue_pro_provider,e.antdv_next_config_provider_context,e.antdv_next_config_provider_hooks_useCSSVarCls,e.antdv_next))})(this,function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=Object.create,c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=u(t),a=0,o=i.length,s;a<o;a++)s=i[a],!f.call(e,s)&&s!==n&&c(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=l(t,s))||r.enumerable});return e};a=((e,t,n)=>(n=e==null?{}:s(d(e)),p(t||!e||!e.__esModule?c(n,`default`,{value:e,enumerable:!0}):n,e)))(a,1);function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function h(e){return typeof e==`boolean`}function g(e){return typeof e==`number`}function _(e){return Array.isArray===void 0?Object.prototype.toString.call(e)===`[object Array]`:Array.isArray(e)}function v(e){return e!==null&&m(e,`Object`)}function y(e){return typeof e==`string`}var b=typeof window>`u`,x=e=>setTimeout(e,16),S=e=>clearTimeout(e);typeof window<`u`&&`requestAnimationFrame`in window&&(x=e=>window.requestAnimationFrame(e),S=e=>window.cancelAnimationFrame(e));var C=0,w=new Map;function T(e){w.delete(e)}function E(e,t=1){C+=1;let n=C;function r(t){if(t===0)T(n),e();else{let e=x(()=>{r(t-1)});w.set(n,e)}}return r(t),n}E.cancel=e=>{let t=w.get(e);return T(t),S(t)};function D(e){return e.replace(/[-_](.)/g,(e,t)=>t.toUpperCase())}function O(e,t){if(b||!e||!t)return``;t=D(t),t===`float`&&(t=`cssFloat`);try{let n=e.style[t];if(n)return n;let r=document?.defaultView?.getComputedStyle(e,``);return r?r[t]:``}catch{return e.style[t]}}function k(e,t){if(!b)return(t==null?O(e,`overflow`):t?O(e,`overflow-y`):O(e,`overflow-x`)).match(/(scroll|auto|overlay)/)}function ee(e,t){if(b)return;let n=e;for(;n;){if([window,document,document.documentElement].includes(n))return window;if(k(n,t))return n;n=n.parentNode}return n}function A(...e){let t=[];for(let n=0;n<e.length;n++){let r=e[n];if(r){if(y(r))t.push(r);else if(_(r))for(let e=0;e<r.length;e++){let n=A(r[e]);n&&t.push(n)}else if(v(r))for(let e in r)r[e]&&t.push(e)}}return t.filter(e=>e).join(` `)}function j({vnode:e,defaultVNode:t},...n){return e===!1?null:typeof e==`function`?e?.(...n):e||t}function M({value:e,slotsValue:n,defaultVNode:r,render:i}){return e===!1?!1:e===!0?n??r:v(e)&&i?(0,t.isVNode)(e)?e:n:e||n}function N(e,...t){let{slots:n,key:r=`default`,render:i,props:a,defaultChildren:o}=e,s=a[r],c=n?.[r],l=typeof o==`function`?o?.():o,u=M({value:s,slotsValue:c,defaultVNode:l,render:i});return u===!1?!1:i?j({vnode:u,defaultVNode:l},...t):u}function P(e,...t){let{slots:n,key:r=`default`,props:i,defaultChildren:a}=e,o=i[r],s=n?.[r]?.(...t),c=typeof a==`function`?a?.():a,l=M({value:o,slotsValue:s,defaultVNode:c,render:!0});return l===!1?!1:j({vnode:l,defaultVNode:c},...t)}function te(e,...t){let{slots:n,props:r,keys:i,render:a,defaultVNodes:o}=e,s={};return i.forEach((e,i)=>{let c=o?o[i]:null,l=a?P({slots:n,props:r,key:e,defaultChildren:c},...t):N({slots:n,props:r,key:e,render:!1,defaultChildren:c},...t);(h(l)||l)&&(s[e]=l)}),s}function F(e,n){return(0,t.getCurrentScope)()?((0,t.onScopeDispose)(e,n),!0):!1}var I=new WeakMap,L=(...e)=>{let n=e[0],r=(0,t.getCurrentInstance)()?.proxy??(0,t.getCurrentScope)();if(r==null&&!(0,t.hasInjectionContext)())throw Error(`injectLocal must be called in setup`);return r&&I.has(r)&&n in I.get(r)?I.get(r)[n]:(0,t.inject)(...e)},R=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var z=Object.prototype.toString,B=e=>z.call(e)===`[object Object]`,V=()=>{},H=U();function U(){var e,t;return R&&!!(!((e=window)==null||(e=e.navigator)==null)&&e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((t=window)==null||(t=t.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window?.navigator.userAgent))}function ne(...e){if(e.length!==1)return(0,t.toRef)(...e);let n=e[0];return typeof n==`function`?(0,t.readonly)((0,t.customRef)(()=>({get:n,set:V}))):(0,t.ref)(n)}function re(e,t){function n(...n){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(i)})}return n}function ie(...e){let n=0,r,i=!0,a=V,o,s,c,l,u;!(0,t.isRef)(e[0])&&typeof e[0]==`object`?{delay:s,trailing:c=!0,leading:l=!0,rejectOnCancel:u=!1}=e[0]:[s,c=!0,l=!0,u=!1]=e;let d=()=>{r&&(clearTimeout(r),r=void 0,a(),a=V)};return e=>{let f=(0,t.toValue)(s),p=Date.now()-n,m=()=>o=e();return d(),f<=0?(n=Date.now(),m()):(p>f?(n=Date.now(),(l||!i)&&m()):c&&(o=new Promise((e,t)=>{a=u?t:e,r=setTimeout(()=>{n=Date.now(),i=!0,e(m()),d()},Math.max(0,f-p))})),!l&&!r&&(r=setTimeout(()=>i=!0,f)),i=!1,o)}}function W(e){return e.endsWith(`rem`)?Number.parseFloat(e)*16:Number.parseFloat(e)}function G(e){return Array.isArray(e)?e:[e]}function ae(e){return e||(0,t.getCurrentInstance)()}function oe(e,t=200,n=!1,r=!0,i=!1){return re(ie(t,n,r,i),e)}function se(e,n=!0,r){ae(r)?(0,t.onMounted)(e,r):n?e():(0,t.nextTick)(e)}function ce(e,n,r){return(0,t.watch)(e,n,{...r,immediate:!0})}var K=R?window:void 0;R&&window.document,R&&window.navigator,R&&window.location;function q(e){let n=(0,t.toValue)(e);return n?.$el??n}function J(...e){let n=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),r=(0,t.computed)(()=>{let n=G((0,t.toValue)(e[0])).filter(e=>e!=null);return n.every(e=>typeof e!=`string`)?n:void 0});return ce(()=>[r.value?.map(e=>q(e))??[K].filter(e=>e!=null),G((0,t.toValue)(r.value?e[1]:e[0])),G((0,t.unref)(r.value?e[2]:e[1])),(0,t.toValue)(r.value?e[3]:e[2])],([e,t,r,i],a,o)=>{if(!e?.length||!t?.length||!r?.length)return;let s=B(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>r.map(r=>n(e,t,r,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function le(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function ue(e){let n=le();return(0,t.computed)(()=>(n.value,!!e()))}var de=Symbol(`vueuse-ssr-width`);function fe(){let e=(0,t.hasInjectionContext)()?L(de,null):null;return typeof e==`number`?e:void 0}function pe(e,n={}){let{window:r=K,ssrWidth:i=fe()}=n,a=ue(()=>r&&`matchMedia`in r&&typeof r.matchMedia==`function`),o=(0,t.shallowRef)(typeof i==`number`),s=(0,t.shallowRef)(),c=(0,t.shallowRef)(!1);return(0,t.watchEffect)(()=>{if(o.value){o.value=!a.value,c.value=(0,t.toValue)(e).split(`,`).some(e=>{let t=e.includes(`not all`),n=e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),r=e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),a=!!(n||r);return n&&a&&(a=i>=W(n[1])),r&&a&&(a=i<=W(r[1])),t?!a:a});return}a.value&&(s.value=r.matchMedia((0,t.toValue)(e)),c.value=s.value.matches)}),J(s,`change`,e=>{c.value=e.matches},{passive:!0}),(0,t.computed)(()=>c.value)}function me(e){return typeof Window<`u`&&e instanceof Window?e.document.documentElement:typeof Document<`u`&&e instanceof Document?e.documentElement:e}function he(e){let t=window.getComputedStyle(e);if(t.overflowX===`scroll`||t.overflowY===`scroll`||t.overflowX===`auto`&&e.clientWidth<e.scrollWidth||t.overflowY===`auto`&&e.clientHeight<e.scrollHeight)return!0;{let t=e.parentNode;return!t||t.tagName===`BODY`?!1:he(t)}}function ge(e){let t=e||window.event,n=t.target;return he(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}var _e=new WeakMap;function ve(e,n=!1){let r=(0,t.shallowRef)(n),i=null,a=``;(0,t.watch)(ne(e),e=>{let n=me((0,t.toValue)(e));if(n){let e=n;if(_e.get(e)||_e.set(e,e.style.overflow),e.style.overflow!==`hidden`&&(a=e.style.overflow),e.style.overflow===`hidden`)return r.value=!0;if(r.value)return e.style.overflow=`hidden`}},{immediate:!0});let o=()=>{let n=me((0,t.toValue)(e));!n||r.value||(H&&(i=J(n,`touchmove`,e=>{ge(e)},{passive:!1})),n.style.overflow=`hidden`,r.value=!0)},s=()=>{let n=me((0,t.toValue)(e));!n||!r.value||(H&&i?.(),n.style.overflow=a,_e.delete(n),r.value=!1)};return F(s),(0,t.computed)({get(){return r.value},set(e){e?o():s()}})}function ye(e={}){let{window:n=K,initialWidth:r=1/0,initialHeight:i=1/0,listenOrientation:a=!0,includeScrollbar:o=!0,type:s=`inner`}=e,c=(0,t.shallowRef)(r),l=(0,t.shallowRef)(i),u=()=>{if(n)if(s===`outer`)c.value=n.outerWidth,l.value=n.outerHeight;else if(s===`visual`&&n.visualViewport){let{width:e,height:t,scale:r}=n.visualViewport;c.value=Math.round(e*r),l.value=Math.round(t*r)}else o?(c.value=n.innerWidth,l.value=n.innerHeight):(c.value=n.document.documentElement.clientWidth,l.value=n.document.documentElement.clientHeight)};u(),se(u);let d={passive:!0};return J(`resize`,u,d),n&&s===`visual`&&n.visualViewport&&J(n.visualViewport,`resize`,u,d),a&&(0,t.watch)(pe(`(orientation: portrait)`),()=>u()),{width:c,height:l}}function be(e){let{canPreview:n}=e,r=(0,t.ref)(!1),i=(0,t.ref)(null),a=ve(document.body,!1),o;return(0,t.onScopeDispose)(()=>{o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),a.value=!1}),J(`wheel`,e=>{r.value&&e.ctrlKey&&e.preventDefault()},{passive:!1}),{showViewer:r,mousePosition:i,openPreview:e=>{n.value&&(o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),e?i.value={x:e.clientX,y:e.clientY}:i.value=null,r.value=!0,o=window.requestAnimationFrame(()=>{a.value=!0,o=void 0}))},closePreview:()=>{o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),r.value=!1,i.value=null,a.value=!1}}}var xe=(typeof window>`u`?!1:/iPad|iPhone|iPod/.test(navigator.platform)||navigator.platform===`MacIntel`&&navigator.maxTouchPoints>1)&&!window.MSStream;typeof window>`u`||xe||window.safari;function Se(e){let n=(0,t.ref)(typeof e==`function`?e():e);function r(e){n.value=e}return[n,r]}function Ce(e,n){let{defaultValue:r,value:i=(0,t.ref)()}=n||{},a=typeof e==`function`?e():e;i.value!==void 0&&(a=(0,t.unref)(i)),r!==void 0&&(a=typeof r==`function`?r():r);let o=(0,t.ref)(a),s=(0,t.ref)(a),[c,l]=Se([s.value]),u=(0,t.watchEffect)(()=>{let e=i.value===void 0?o.value:i.value;n?.postState&&(e=n.postState(e,o.value)),s.value=e}),d=(0,t.watch)(c,()=>{let e=c.value[0];o.value!==e&&n?.onChange?.(o.value,e)},{deep:!0});function f(e){o.value=e}function p(e){f(e),l([s.value])}let m=(0,t.watch)(i,()=>{o.value=i.value});return(0,t.onScopeDispose)(()=>{u(),d(),m()}),[s,p,o]}var we={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Te(e){let{imageRef:n,minScale:r,maxScale:i,windowWidth:a,windowHeight:o,onTransform:s}=e,c=(0,t.ref)(null),l=(0,t.ref)([]),[u,d]=Se({...we}),f=e=>{let t={...u.value};d({...we}),(t.x!==0||t.y!==0||t.scale!==1||t.rotate!==0||t.flipX||t.flipY)&&s?.({transform:{...we},action:e})},p=(e,t)=>{c.value===null&&(l.value=[],c.value=E(()=>{let e={...u.value};for(let t of l.value)e={...e,...t};c.value=null,s?.({transform:e,action:t}),d(e)})),l.value.push({...u.value,...e})};return{transform:u,resetTransform:f,updateTransform:p,dispatchZoomChange:(e,t,s,c,l)=>{let d=n.value;if(!d)return;let{width:f,height:m,offsetWidth:h,offsetHeight:g,offsetLeft:_,offsetTop:v}=d,y=e,b=u.value.scale*e;b>i.value?(b=i.value,y=i.value/u.value.scale):b<r.value&&(b=l?b:r.value,y=b/u.value.scale);let x=s??a.value/2,S=c??o.value/2,C=y-1,w=C*f*.5,T=C*m*.5,E=C*(x-u.value.x-_),D=C*(S-u.value.y-v),O=u.value.x-(E-w),k=u.value.y-(D-T);if(e<1&&b===1){let e=h*b,t=g*b;e<=a.value&&t<=o.value&&(O=0,k=0)}p({x:O,y:k,scale:b},t)}}}function Ee(e,t,n,r){let i=t+n,a=(n-r)/2;if(n>r){if(t>0)return{[e]:a};if(t<0&&i<r)return{[e]:-a}}else if(t<0||i>r)return{[e]:t<0?a:-a};return{}}function De(e){let{imageWidth:t,imageHeight:n,imageLeft:r,imageTop:i,windowWidth:a,windowHeight:o}=e;return t<=a&&n<=o?{x:0,y:0}:t>a||n>o?{...Ee(`x`,r,t,a),...Ee(`y`,i,n,o)}:null}var Oe=1,ke=2;function Ae(e){let{imageRef:n,movable:r,visible:i,scaleStep:a,transform:o,updateTransform:s,dispatchZoomChange:c,windowWidth:l,windowHeight:u}=e,d=(0,t.ref)(!1),f=(0,t.ref)({diffX:0,diffY:0,transformX:0,transformY:0});return J(window,`mouseup`,()=>{if(!i.value||!d.value)return;d.value=!1;let{transformX:e,transformY:t}=f.value;if(!(o.value.x!==e&&o.value.y!==t))return;let r=n.value;if(!r)return;let a=r.offsetWidth*o.value.scale,c=r.offsetHeight*o.value.scale,{left:p,top:m}=r.getBoundingClientRect(),h=o.value.rotate%180!=0,g=De({imageWidth:h?c:a,imageHeight:h?a:c,imageLeft:p,imageTop:m,windowWidth:l.value,windowHeight:u.value});g&&s({...g},`dragRebound`)}),J(window,`mousemove`,e=>{!i.value||!d.value||s({x:e.pageX-f.value.diffX,y:e.pageY-f.value.diffY},`move`)}),{isMoving:d,onMouseDown:e=>{!r.value||e.button!==0||(e.preventDefault(),e.stopPropagation(),f.value={diffX:e.pageX-o.value.x,diffY:e.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},d.value=!0)},onWheel:e=>{if(!i.value||e.deltaY===0)return;let t=Oe+Math.min(Math.abs(e.deltaY/100),ke)*a.value;e.deltaY>0&&(t=Oe/t),c(t,`wheel`,e.clientX,e.clientY)}}}function Y(e,t){return Math.hypot(e.x-t.x,e.y-t.y)}function je(e,t,n,r){let i=Y(e,n),a=Y(t,r);if(i===0&&a===0)return[e.x,e.y];let o=i/(i+a);return[e.x+o*(t.x-e.x),e.y+o*(t.y-e.y)]}function Me(e){let{imageRef:n,movable:r,visible:i,minScale:a,transform:o,updateTransform:s,dispatchZoomChange:c,windowWidth:l,windowHeight:u}=e,d=(0,t.ref)(!1),f=(0,t.ref)({point1:{x:0,y:0},point2:{x:0,y:0},eventType:`none`}),p=e=>{f.value={...f.value,...e}};return J(window,`touchmove`,e=>{i.value&&r.value&&e.preventDefault()},{passive:!1}),{isTouching:d,onTouchStart:e=>{if(!r.value)return;e.stopPropagation(),d.value=!0;let{touches:t=[]}=e;t.length>1?p({point1:{x:t[0].clientX,y:t[0].clientY},point2:{x:t[1].clientX,y:t[1].clientY},eventType:`touchZoom`}):p({point1:{x:t[0].clientX-o.value.x,y:t[0].clientY-o.value.y},eventType:`move`})},onTouchMove:e=>{let{touches:t=[]}=e,{point1:n,point2:r,eventType:i}=f.value;if(t.length>1&&i===`touchZoom`){let e={x:t[0].clientX,y:t[0].clientY},i={x:t[1].clientX,y:t[1].clientY},[a,o]=je(n,r,e,i);c(Y(e,i)/Y(n,r),`touchZoom`,a,o,!0),p({point1:e,point2:i,eventType:`touchZoom`})}else i===`move`&&(s({x:t[0].clientX-n.x,y:t[0].clientY-n.y},`move`),p({eventType:`move`}))},onTouchEnd:()=>{if(!i.value)return;if(d.value&&=!1,p({eventType:`none`}),a.value>o.value.scale)return s({x:0,y:0,scale:a.value},`touchZoom`);let e=n.value;if(!e)return;let t=e.offsetWidth*o.value.scale,r=e.offsetHeight*o.value.scale,{left:c,top:f}=e.getBoundingClientRect(),m=o.value.rotate%180!=0,h=De({imageWidth:m?r:t,imageHeight:m?t:r,imageLeft:c,imageTop:f,windowWidth:l.value,windowHeight:u.value});h&&s({...h},`dragRebound`)}}}function Ne(e){return{zIndexPopup:`calc(${e.zIndexPopupBase} + 80)`,previewOperationColor:e.colorTextDescription,previewOperationHoverColor:e.colorText,previewOperationColorDisabled:e.colorTextDisabled,imagePreviewSwitchSize:e.controlHeightLG,previewOperationSize:e.fontSizeLG}}var Pe=e=>{let t=e.componentCls,{motionEaseOut:n,motionDurationSlow:i,previewOperationSize:a,zIndexPopup:o}=e,s={position:`absolute`,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,borderRadius:`50%`,width:e.controlHeightLG,height:e.controlHeightLG,padding:0,outline:0,border:0,boxShadow:e.boxShadowTertiary,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:a,"&:hover":{color:e.previewOperationHoverColor,backgroundColor:e.colorBgContainer},"&:active":{backgroundColor:e.colorBgContainer},svg:{stroke:`currentColor`}};return{[t]:{textAlign:`center`,inset:0,position:`fixed`,userSelect:`none`,zIndex:o,[`${t}-mask`]:{position:`absolute`,inset:0,background:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,backdropFilter:`blur(0px)`,transition:`background-color ${i}, backdrop-filter ${i}`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`},[`&${t}-mask-hidden`]:{display:`none`}},[`${t}-body`]:{position:`absolute`,inset:0,overflow:`hidden`,display:`flex`,alignItems:`center`,justifyContent:`center`,pointerEvents:`none`,"> *":{pointerEvents:`auto`}},[`${t}-img`]:{maxWidth:`100%`,maxHeight:`70%`,verticalAlign:`middle`,transform:`scale3d(1, 1, 1)`,transition:`transform ${i} ${n} 0s`,userSelect:`none`},[`&-movable ${t}-img`]:{cursor:`grab`},[`&-moving ${t}-img`]:{cursor:`grabbing`},[`${t}-close`]:{...s,top:e.marginSM,insetInlineEnd:e.marginSM},[`${t}-switch`]:{...s,top:`50%`,transform:`translateY(-50%)`,"&-disabled":{"&, &:hover, &:active":{color:e.previewOperationColorDisabled,backgroundColor:e.colorBgContainer,cursor:`not-allowed`}},"&-prev":{insetInlineStart:e.marginSM},"&-next":{insetInlineEnd:e.marginSM}},[`${t}-footer`]:{position:`absolute`,bottom:e.marginXL,left:{_skip_check_:!0,value:`50%`},display:`flex`,flexDirection:`column`,alignItems:`center`,color:e.previewOperationColor,transform:`translateX(-50%)`,gap:e.marginXS},[`${t}-progress`]:{color:e.previewOperationColor},[`${t}-actions`]:{display:`flex`,alignItems:`center`,gap:e.marginXXS,padding:e.paddingXXS,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,border:`${(0,r.unit)(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,borderRadius:e.borderRadiusLG,fontSize:a,"&-action":{color:`inherit`,background:`transparent`,border:0,font:`inherit`,lineHeight:1,width:e.controlHeight,height:e.controlHeight,padding:0,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,borderRadius:e.borderRadius,userSelect:`none`,[`&:not(${t}-actions-action-disabled):hover`]:{color:e.colorTextSecondary,backgroundColor:e.colorFillTertiary},[`&:not(${t}-actions-action-disabled):active`]:{color:e.colorText,backgroundColor:e.colorFillSecondary},"&-disabled":{cursor:`not-allowed`,opacity:.5},svg:{stroke:`currentColor`}}}}}},Fe=e=>{let t=e.componentCls,{motionDurationSlow:n,motionEaseOut:r}=e;return{[`${t}`]:{"&-fade-enter-active, &-fade-leave-active":{transition:`visibility ${n}`,[`${t}-mask`]:{transition:`background-color ${n}, backdrop-filter ${n}`},[`${t}-body`]:{transition:`transform ${n} ${r}`},[`${t}-close, ${t}-switch, ${t}-footer`]:{transition:`opacity ${n}, all ${n}`}},"&-fade-enter-from, &-fade-leave-to":{visibility:`visible`,[`${t}-mask`]:{backgroundColor:`transparent`,backdropFilter:`blur(0px)`},[`${t}-body`]:{transform:`scale(0)`},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:0}},"&-fade-enter-to, &-fade-leave-from":{[`${t}-mask`]:{backgroundColor:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`}},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:1}}}}},Ie=(0,r.proGenStyleHooks)(`GImagePreview`,e=>[Pe(e),Fe(e)],Ne),X=1,Z={rotateLeft:(0,t.createVNode)(n.RotateLeftOutlined,null,null),rotateRight:(0,t.createVNode)(n.RotateRightOutlined,null,null),zoomIn:(0,t.createVNode)(n.ZoomInOutlined,null,null),zoomOut:(0,t.createVNode)(n.ZoomOutOutlined,null,null),flipX:(0,t.createVNode)(n.SwapOutlined,null,null),flipY:(0,t.createVNode)(n.SwapOutlined,{rotate:90},null),copy:(0,t.createVNode)(n.CopyOutlined,null,null),download:(0,t.createVNode)(n.DownloadOutlined,null,null)},Q={copySuccess:`复制成功`,copyFailed:`复制失败`,downloadSuccess:`下载成功`,downloadFailed:`下载失败`};function Le(e){try{let t=new URL(e,window.location.href).pathname.match(/\/([^/]+)$/)?.[1];return t?decodeURIComponent(t):`image`}catch{let t=e.split(`?`)[0]?.split(`#`)[0]?.split(`/`).pop();return t?decodeURIComponent(t):`image`}}function Re(e){let t={"image/gif":`gif`,"image/jpg":`jpg`,"image/jpeg":`jpg`,"image/png":`png`,"image/svg+xml":`svg`,"image/webp":`webp`},n=e?.toLowerCase();return t[n]||n?.split(`/`)[1]?.split(`+`)[0]||`png`}async function ze(e){let t=await fetch(e,{mode:`cors`});if(!t.ok)throw Error(`Failed to fetch image: ${t.status}`);return t.blob()}async function Be(e){return new Promise((t,n)=>{let r=new Image,i=URL.createObjectURL(e);r.onload=()=>{URL.revokeObjectURL(i);let e=document.createElement(`canvas`);e.width=r.naturalWidth,e.height=r.naturalHeight;let a=e.getContext(`2d`);if(!a){n(Error(`Canvas context not available`));return}a.drawImage(r,0,0),e.toBlob(e=>{e?t(e):n(Error(`Failed to convert to PNG`))},`image/png`,1)},r.onerror=()=>{URL.revokeObjectURL(i),n(Error(`Failed to load image for PNG conversion`))},r.src=i})}async function Ve(e){let t=(e.type||``).toLowerCase();return t===`image/png`||t===`image/svg+xml`?{[t]:e}:{"image/png":await Be(e)}}function He(e,t){let n=Le(e);return n.includes(`.`)?n.endsWith(`.svg+xml`)?n.replace(/\.svg\+xml$/i,`.svg`):n:`${n}.${Re(t)}`}function Ue(e,t){let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,r.style.display=`none`,document.body.appendChild(r),r.click(),r.remove(),URL.revokeObjectURL(n)}var We=(0,t.defineComponent)((e,{emit:r,slots:s,expose:c})=>{let{width:l,height:u}=ye(),{prefixCls:d}=(0,i.useBaseConfig)(`pro-image-preview`,e),f=(0,a.default)(d),[p,m]=Ie(d,f),[h,g]=Ce(e.open,{value:(0,t.toRef)(e,`open`),onChange:t=>{e.onOpenChange?.(t),r(`update:open`,t)}}),_=(0,t.ref)(!0),v=(0,t.ref)(),y=(0,t.ref)(),b=(0,t.ref)(e.current??0),x=(0,t.ref)(!1),S=(0,t.ref)(!1),{transform:C,resetTransform:w,updateTransform:T,dispatchZoomChange:E}=Te({imageRef:v,minScale:(0,t.toRef)(e,`minScale`),maxScale:(0,t.toRef)(e,`maxScale`),windowWidth:l,windowHeight:u,onTransform:e.onTransform}),{isMoving:D,onMouseDown:O,onWheel:k}=Ae({imageRef:v,movable:(0,t.toRef)(e,`movable`),visible:h,scaleStep:(0,t.toRef)(e,`scaleStep`),transform:C,updateTransform:T,dispatchZoomChange:E,windowWidth:l,windowHeight:u}),{isTouching:ee,onTouchStart:j,onTouchMove:M,onTouchEnd:N}=Me({imageRef:v,movable:(0,t.toRef)(e,`movable`),visible:h,minScale:(0,t.toRef)(e,`minScale`),transform:C,updateTransform:T,dispatchZoomChange:E,windowWidth:l,windowHeight:u}),F=(0,t.computed)(()=>e.urls[b.value]),I=(0,t.computed)(()=>e.urls.length>1),L=(0,t.computed)(()=>e.urls.length>=1),R=(0,t.computed)(()=>e.mask===!1?{visible:!1,blur:!1}:e.mask&&typeof e.mask==`object`&&!(`type`in e.mask)?{visible:!0,blur:e.mask.blur!==!1}:{visible:!0,blur:!0}),z=(0,t.computed)(()=>{let t={};return e.mousePosition&&(t.transformOrigin=`${e.mousePosition.x}px ${e.mousePosition.y}px`),t});(0,t.watch)(()=>e.current,e=>{e!==void 0&&(b.value=e)}),(0,t.watch)(()=>e.current,e=>{e!==void 0&&(b.value=e)});let B=()=>{g(!1),e.onClose?.(),r(`close`)},V=()=>{D.value||B()},H=()=>{if(b.value>0||e.infinite){let n=b.value-1<0?e.urls.length-1:b.value-1;_.value=!1,b.value=n,w(`prev`),(0,t.nextTick)(()=>{_.value=!0})}},U=()=>{if(b.value<e.urls.length-1||e.infinite){let n=b.value+1>e.urls.length-1?0:b.value+1;_.value=!1,b.value=n,w(`next`),(0,t.nextTick)(()=>{_.value=!0})}},ne=()=>{E(X+(e.scaleStep??.5),`zoomIn`)},re=()=>{E(X/(X+(e.scaleStep??.5)),`zoomOut`)},ie=()=>{T({rotate:C.value.rotate+90},`rotateRight`)},W=()=>{T({rotate:C.value.rotate-90},`rotateLeft`)},G=()=>{T({flipX:!C.value.flipX},`flipX`)},ae=()=>{T({flipY:!C.value.flipY},`flipY`)},oe=async()=>{if(!(!F.value||x.value)){if(!navigator.clipboard||!window.ClipboardItem){o.message.error(Q.copyFailed);return}x.value=!0;try{let e=await Ve(await ze(F.value));await navigator.clipboard.write([new ClipboardItem(e)]),o.message.success(Q.copySuccess)}catch{o.message.error(Q.copyFailed)}finally{x.value=!1}}},se=async()=>{if(!(!F.value||S.value)){S.value=!0;try{let e=await ze(F.value);Ue(e,He(F.value,e.type)),o.message.success(Q.downloadSuccess)}catch{o.message.error(Q.downloadFailed)}finally{S.value=!1}}},ce=t=>{h.value&&(C.value.scale===1?E(X+(e.scaleStep??.5),`doubleClick`,t.clientX,t.clientY):T({x:0,y:0,scale:1},`doubleClick`))},K=e=>{if(e.key===`Escape`){B();return}!h.value||!I.value||(e.key===`ArrowLeft`?H():e.key===`ArrowRight`&&U())},q;(0,t.onMounted)(()=>{let e=e=>K(e);window.addEventListener(`keydown`,e),q=()=>window.removeEventListener(`keydown`,e)}),(0,t.onUnmounted)(()=>{q?.()}),c({setOpen:t=>{g(t),b.value=e.current??0}});let J=()=>te({slots:s,props:{...e.icons},keys:[`flipY`,`flipX`,`rotateLeft`,`rotateRight`,`zoomOut`,`zoomIn`,`copy`,`download`],render:!0,defaultVNodes:[Z.flipY,Z.flipX,Z.rotateLeft,Z.rotateRight,Z.zoomOut,Z.zoomIn,Z.copy,Z.download]}),le=()=>{let r=J();return[{icon:r.flipY,onClick:ae,type:`flipY`},{icon:r.flipX,onClick:G,type:`flipX`},{icon:r.rotateLeft,onClick:W,type:`rotateLeft`},{icon:r.rotateRight,onClick:ie,type:`rotateRight`},{icon:r.zoomOut,onClick:re,type:`zoomOut`,disabled:(0,t.computed)(()=>C.value.scale<=(e.minScale??1))},{icon:r.zoomIn,onClick:ne,type:`zoomIn`,disabled:(0,t.computed)(()=>C.value.scale===(e.maxScale??50))},{icon:x.value?(0,t.createVNode)(n.LoadingOutlined,{spin:!0},null):r.copy,onClick:oe,type:`copy`,disabled:(0,t.computed)(()=>x.value)},{icon:S.value?(0,t.createVNode)(n.LoadingOutlined,{spin:!0},null):r.download,onClick:se,type:`download`,disabled:(0,t.computed)(()=>S.value)}]};return()=>{let r={transform:`translate3d(${C.value.x}px, ${C.value.y}px, 0) scale3d(${C.value.flipX?`-`:``}${C.value.scale}, ${C.value.flipY?`-`:``}${C.value.scale}, 1) rotate(${C.value.rotate}deg)`,transitionDuration:!_.value||ee.value?`0s`:void 0},i=P({slots:s,props:{close:e.icons?.close},key:`close`}),a=P({slots:s,props:{left:e.icons?.left},key:`left`}),o=P({slots:s,props:{right:e.icons?.right},key:`right`}),c=`${d.value}-actions-action`,l=le();return(0,t.createVNode)(t.Teleport,{to:e.getContainer||`body`},{default:()=>[(0,t.createVNode)(t.Transition,{name:`${d.value}-fade`,appear:!0,onAfterLeave:()=>w(`close`)},{default:()=>[h.value&&(0,t.createVNode)(`div`,{ref:y,class:A(d.value,p.value,m.value,f.value,{[`${d.value}-movable`]:e.movable,[`${d.value}-moving`]:D.value}),style:{zIndex:e.zIndex},role:`dialog`,"aria-modal":`true`,"aria-label":`Image`,tabindex:-1},[R.value.visible&&(0,t.createVNode)(`div`,{class:A(`${d.value}-mask`,e.maskClass,{[`${d.value}-mask-blur`]:R.value.blur}),onClick:e.onHideOnClickModal?V:void 0},null),(0,t.createVNode)(`div`,{class:`${d.value}-body`,style:z.value},[(0,t.createVNode)(`img`,{ref:v,class:`${d.value}-img`,src:F.value,alt:`Image`,loading:`eager`,decoding:`sync`,style:r,onWheel:k,onMousedown:O,onDblclick:ce,onTouchstart:j,onTouchmove:M,onTouchend:N,onTouchcancel:N},null)]),(0,t.createVNode)(`button`,{type:`button`,class:`${d.value}-close`,onClick:B},[i||(0,t.createVNode)(n.CloseOutlined,null,null)]),I.value&&(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`button`,{type:`button`,class:A(`${d.value}-switch`,`${d.value}-switch-prev`,{[`${d.value}-switch-disabled`]:!e.infinite&&b.value===0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),H()}},[a||(0,t.createVNode)(n.LeftOutlined,null,null)]),(0,t.createVNode)(`button`,{type:`button`,class:A(`${d.value}-switch`,`${d.value}-switch-next`,{[`${d.value}-switch-disabled`]:!e.infinite&&b.value===e.urls.length-1}),onClick:e=>{e.preventDefault(),e.stopPropagation(),U()}},[o||(0,t.createVNode)(n.RightOutlined,null,null)])]),(0,t.createVNode)(`div`,{class:`${d.value}-footer`},[L.value&&(0,t.createVNode)(`div`,{class:`${d.value}-progress`},[e.countRender?e.countRender(b.value+1,e.urls.length):`${b.value+1} / ${e.urls.length}`]),(0,t.createVNode)(`div`,{class:`${d.value}-actions`},[l.map(({icon:e,onClick:n,type:r,disabled:i})=>(0,t.createVNode)(`button`,{type:`button`,class:A(c,`${c}-${r}`,{[`${c}-disabled`]:i&&i.value}),onClick:()=>{i?.value||n()},disabled:i?i.value:!1,"aria-label":r,key:r},[e]))])])])]})]})}},{props:(0,t.mergeDefaults)({class:{type:String,required:!1},style:{type:Object,required:!1},rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},urls:{type:Array,required:!0},open:{type:Boolean,required:!1,default:void 0},scaleStep:{type:Number,required:!1},minScale:{type:Number,required:!1},maxScale:{type:Number,required:!1},movable:{type:Boolean,required:!1,default:void 0},disabled:{type:Boolean,required:!1,default:void 0},zIndex:{type:Number,required:!1},current:{type:Number,required:!1},infinite:{type:Boolean,required:!1,default:void 0},getContainer:{type:String,required:!1},onHideOnClickModal:{type:Boolean,required:!1,default:void 0},mask:{type:[Object,Boolean],required:!1,default:void 0},maskClass:{type:String,required:!1},mousePosition:{type:[Object,null],required:!1},countRender:{type:[Function,Boolean],required:!1,default:void 0},icons:{type:Object,required:!1},onClose:{type:Function,required:!1},onTransform:{type:Function,required:!1},onOpenChange:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},{open:!1,scaleStep:.5,minScale:1,maxScale:50,movable:!0,zIndex:2e3,current:0,infinite:!0,onHideOnClickModal:!0,urls:[],icons:{}}),emits:[`close`,`transform`,`update:open`],name:`GImagePreview`,inheritAttrs:!1}),Ge=e=>{let{motionDurationSlow:t,paddingXXS:n,marginXXS:i,colorTextLightSolid:a}=e;return{position:`absolute`,inset:0,display:`flex`,alignItems:`center`,justifyContent:`center`,color:a,background:`rgba(0, 0, 0, 0.5)`,cursor:`pointer`,opacity:0,transition:`opacity ${t}`,[`.${e.componentCls}-mask-info`]:{overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`,padding:`0 ${(0,r.unit)(n)}`,".anticon":{marginInlineEnd:i,svg:{verticalAlign:`baseline`}}}}},Ke=e=>{let t={width:`100%`,height:`100%`};return{[e.componentCls]:{display:`inline-block`,position:`relative`,overflow:`hidden`,[`${e.componentCls}-img`]:{...t,verticalAlign:`top`,opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:`none`,cursor:`pointer`},"&-placeholder":{...t,backgroundColor:e.colorBgContainerDisabled,backgroundImage:`url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')`,backgroundRepeat:`no-repeat`,backgroundPosition:`center center`,backgroundSize:`30%`}},[`${e.componentCls}-error`]:{...t,display:`flex`,alignItems:`center`,justifyContent:`center`},[`${e.componentCls}-placeholder`]:{position:`absolute`,inset:0},[`${e.componentCls}-mask`]:{...Ge(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}},qe=(0,r.proGenStyleHooks)(`GImage`,e=>[Ke(e)]),Je={src:``,alt:``,fit:`contain`,preview:!0,loading:`eager`};function Ye(e){return e&&e.nodeType===1}var $=(0,t.defineComponent)((e,{emit:o,slots:s,expose:c,attrs:l})=>{let u=R&&`loading`in HTMLImageElement.prototype,{prefixCls:d}=(0,i.useBaseConfig)(`pro-image`,e),f=(0,a.default)(d),[p,m]=qe(d,f),h=(0,t.ref)(),_=(0,t.ref)(!1),v=(0,t.ref)(!0),b=(0,t.ref)(),x=(0,t.ref)(),S,C=(0,t.computed)(()=>e.loading===`eager`?!1:!u&&e.loading===`lazy`||e.lazy),w=(0,t.computed)(()=>R&&e.fit?{...e.imageStyle,objectFit:e.fit}:{...e.imageStyle}),T=(0,t.computed)(()=>typeof e.preview==`object`?e.preview:{}),E=(0,t.computed)(()=>!!e.preview),D=(0,t.computed)(()=>{let{urls:t=[],current:n=0}=T.value;if(g(n))return t.length>=n?n:0;let r=t.indexOf(e.src??``);return r>=0?r:0}),O=(0,t.computed)(()=>(0,r.unit)(e.width)),k=(0,t.computed)(()=>(0,r.unit)(e.height)),{showViewer:j,mousePosition:M,openPreview:N,closePreview:P}=be({canPreview:E}),F=()=>{R&&(v.value=!0,_.value=!1,h.value=e.src)},I=t=>{_.value||(v.value=!1,_.value=!1,e.onLoad?.(t),o(`load`,t))},L=t=>{v.value=!1,_.value=!0,e.onError?.(t),o(`error`,t)},z=()=>{if(!b.value||!x.value)return!1;let e=b.value.getBoundingClientRect(),t=x.value.getBoundingClientRect?x.value.getBoundingClientRect():{top:0,bottom:x.value.innerHeight??0,left:0,right:x.value.innerWidth??0};return e.top<t.bottom&&e.bottom>t.top&&e.left<t.right&&e.right>t.left},B=oe(()=>{z()&&(F(),S?.(),S=void 0)},200,!0),V=async()=>{if(!R)return;await(0,t.nextTick)();let{scrollContainer:n}=e;Ye(n)?x.value=n:y(n)&&n!==``?x.value=document.querySelector(n)??void 0:b.value&&(x.value=ee(b.value)),x.value&&(S=J(x.value,`scroll`,B),setTimeout(B,100))},H=t=>{let n=v.value?`loaded`:_.value?`error`:`success`;if(e.onClick?.(n),o(`click`,n),!(v.value||_.value)&&E.value){let e=t.currentTarget?.getBoundingClientRect();N(e?{...t,clientX:e.x+e.width/2,clientY:e.y+e.height/2}:t)}};return(0,t.watch)(()=>e.src,()=>{C.value?(v.value=!0,_.value=!1,S?.(),V()):F()}),(0,t.onMounted)(()=>{C.value?V():F()}),c({setOpen:e=>{e?N():P()}}),()=>{let i={},a={};for(let[e,t]of Object.entries(l))/^(?:data-|on[A-Z])/i.test(e)||[`id`,`style`,`class`].includes(e)?i[e]=t:a[e]=t;let o=te({slots:s,props:e,keys:[`fallback`,`mask`,`placeholder`],render:!0});return(0,t.createVNode)(`div`,(0,t.mergeProps)({class:A(d.value,p.value,m.value,f.value,e.class),ref:b},i,{style:{width:(0,r.unit)(e.size)||O.value,height:(0,r.unit)(e.size)||k.value,...i.style||{}},onClick:e=>{_.value&&H(e)}}),[_.value?(0,t.createVNode)(`div`,{class:A(`${d.value}-error`)},[o.fallback]):(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`img`,(0,t.mergeProps)(a,{src:h.value,loading:e.loading,style:w.value,class:A(e.imageClass,`${d.value}-img`,{[`${d.value}-img-placeholder`]:e.placeholder===!0,[`${d.value}-img-preview`]:E.value}),crossorigin:e.crossOrigin,width:O.value,height:k.value,onClick:H,onLoad:I,onError:L}),null),v.value&&(0,t.createVNode)(`div`,{class:A(`${d.value}-placeholder`),onClick:H},[o.placeholder])]),T.value.mask&&E.value&&(0,t.createVNode)(`div`,{class:A(`${d.value}-mask`,T.value.maskClass),style:{display:i.style?.display===`none`?`none`:void 0}},[o.mask||(0,t.createVNode)(`div`,{class:A(`${d.value}-mask-info`)},[(0,t.createVNode)(n.EyeOutlined,null,null)])]),E.value&&(0,t.createVNode)(We,(0,t.mergeProps)(T.value,{urls:T.value.urls||(e.src?[e.src]:[]),current:D.value,zIndex:e.zIndex??T.value.zIndex,open:j.value,mousePosition:M.value,onClose:()=>P()}),s)])}},{props:(0,t.mergeDefaults)({rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},src:{type:String,required:!1},alt:{type:String,required:!1},width:{type:Number,required:!1},height:{type:Number,required:!1},size:{type:Number,required:!1},fit:{type:String,required:!1},loading:{type:String,required:!1},crossOrigin:{type:String,required:!1},imageStyle:{type:Object,required:!1},imageClass:{type:String,required:!1},preview:{type:[Boolean,Object],required:!1,default:void 0},zIndex:{type:Number,required:!1},lazy:{type:Boolean,required:!1,default:void 0},scrollContainer:{required:!1},placeholder:{type:[Function,Object,String,Number,Boolean,null,Array],required:!1,default:void 0},fallback:{type:[Function,Object,String,Number,Boolean,null,Array],required:!1,default:void 0},onLoad:{type:Function,required:!1},onError:{type:Function,required:!1},onClick:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},Je),emits:[`click`,`load`,`error`],name:`GImage`,inheritAttrs:!1});$.isGImage=!0,$.install=e=>(e.component($.name,$),e),e.GImage=$,e.GImagePreview=We});

package/dist/hooks/useImageBoundary.d.ts

@@ -0,0 +1,15 @@
+//#region src/hooks/useImageBoundary.d.ts
+interface BoundaryDimensions {
+  imageWidth: number;
+  imageHeight: number;
+  imageLeft: number;
+  imageTop: number;
+  windowWidth: number;
+  windowHeight: number;
+}
+declare function getImageBoundaryFix(dimensions: BoundaryDimensions): {
+  x?: number;
+  y?: number;
+};
+//#endregion
+export { BoundaryDimensions, getImageBoundaryFix };

package/dist/hooks/useImageBoundary.js

@@ -0,0 +1,24 @@
+//#region src/hooks/useImageBoundary.ts
+function fixPoint(axis, start, length, clientLength) {
+	const startAddLength = start + length;
+	const offsetStart = (length - clientLength) / 2;
+	if (length > clientLength) {
+		if (start > 0) return { [axis]: offsetStart };
+		if (start < 0 && startAddLength < clientLength) return { [axis]: -offsetStart };
+	} else if (start < 0 || startAddLength > clientLength) return { [axis]: start < 0 ? offsetStart : -offsetStart };
+	return {};
+}
+function getImageBoundaryFix(dimensions) {
+	const { imageWidth, imageHeight, imageLeft, imageTop, windowWidth, windowHeight } = dimensions;
+	if (imageWidth <= windowWidth && imageHeight <= windowHeight) return {
+		x: 0,
+		y: 0
+	};
+	if (imageWidth > windowWidth || imageHeight > windowHeight) return {
+		...fixPoint("x", imageLeft, imageWidth, windowWidth),
+		...fixPoint("y", imageTop, imageHeight, windowHeight)
+	};
+	return null;
+}
+//#endregion
+export { getImageBoundaryFix };

package/dist/hooks/useImagePreview.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from "vue";
+
+//#region src/hooks/useImagePreview.d.ts
+interface UseImagePreviewOptions {
+  canPreview: Ref<boolean>;
+}
+declare function useImagePreview(options: UseImagePreviewOptions): {
+  showViewer: Ref<boolean, boolean>;
+  mousePosition: Ref<{
+    x: number;
+    y: number;
+  }, {
+    x: number;
+    y: number;
+  } | {
+    x: number;
+    y: number;
+  }>;
+  openPreview: (clickEvent?: MouseEvent) => void;
+  closePreview: () => void;
+};
+//#endregion
+export { UseImagePreviewOptions, useImagePreview as default };

package/dist/hooks/useImagePreview.js

@@ -0,0 +1,54 @@
+import { onScopeDispose, ref } from "vue";
+import { useEventListener, useScrollLock } from "@vueuse/core";
+//#region src/hooks/useImagePreview.ts
+function useImagePreview(options) {
+	const { canPreview } = options;
+	const showViewer = ref(false);
+	const mousePosition = ref(null);
+	const isScrollLocked = useScrollLock(document.body, false);
+	let lockFrame;
+	const openPreview = (clickEvent) => {
+		if (!canPreview.value) return;
+		if (lockFrame !== void 0) {
+			window.cancelAnimationFrame(lockFrame);
+			lockFrame = void 0;
+		}
+		if (clickEvent) mousePosition.value = {
+			x: clickEvent.clientX,
+			y: clickEvent.clientY
+		};
+		else mousePosition.value = null;
+		showViewer.value = true;
+		lockFrame = window.requestAnimationFrame(() => {
+			isScrollLocked.value = true;
+			lockFrame = void 0;
+		});
+	};
+	const closePreview = () => {
+		if (lockFrame !== void 0) {
+			window.cancelAnimationFrame(lockFrame);
+			lockFrame = void 0;
+		}
+		showViewer.value = false;
+		mousePosition.value = null;
+		isScrollLocked.value = false;
+	};
+	onScopeDispose(() => {
+		if (lockFrame !== void 0) {
+			window.cancelAnimationFrame(lockFrame);
+			lockFrame = void 0;
+		}
+		isScrollLocked.value = false;
+	});
+	useEventListener("wheel", (event) => {
+		if (showViewer.value && event.ctrlKey) event.preventDefault();
+	}, { passive: false });
+	return {
+		showViewer,
+		mousePosition,
+		openPreview,
+		closePreview
+	};
+}
+//#endregion
+export { useImagePreview as default };

package/dist/hooks/useImageTransform.d.ts

@@ -0,0 +1,23 @@
+import { DispatchZoomChangeFunc, TransformAction, TransformType, UpdateTransformFunc } from "../interface.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useImageTransform.d.ts
+interface UseImageTransformOptions {
+  imageRef: Ref<HTMLImageElement | undefined>;
+  minScale: Ref<number>;
+  maxScale: Ref<number>;
+  windowWidth: Ref<number>;
+  windowHeight: Ref<number>;
+  onTransform?: (info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => void;
+}
+declare function useImageTransform(options: UseImageTransformOptions): {
+  transform: Ref<TransformType, TransformType>;
+  resetTransform: (action: TransformAction) => void;
+  updateTransform: UpdateTransformFunc;
+  dispatchZoomChange: DispatchZoomChangeFunc;
+};
+//#endregion
+export { UseImageTransformOptions, useImageTransform as default };

package/dist/hooks/useImageTransform.js

@@ -0,0 +1,92 @@
+import { ref } from "vue";
+import { raf } from "@gx-design-vue/pro-utils";
+import { useState } from "@gx-design-vue/pro-hooks";
+//#region src/hooks/useImageTransform.ts
+const initialTransform = {
+	x: 0,
+	y: 0,
+	rotate: 0,
+	scale: 1,
+	flipX: false,
+	flipY: false
+};
+function useImageTransform(options) {
+	const { imageRef, minScale, maxScale, windowWidth, windowHeight, onTransform } = options;
+	const frameId = ref(null);
+	const updateQueue = ref([]);
+	const [transform, setTransform] = useState({ ...initialTransform });
+	const resetTransform = (action) => {
+		const oldTransform = { ...transform.value };
+		setTransform({ ...initialTransform });
+		if (oldTransform.x !== 0 || oldTransform.y !== 0 || oldTransform.scale !== 1 || oldTransform.rotate !== 0 || oldTransform.flipX || oldTransform.flipY) onTransform?.({
+			transform: { ...initialTransform },
+			action
+		});
+	};
+	const updateTransform = (newTransform, action) => {
+		if (frameId.value === null) {
+			updateQueue.value = [];
+			frameId.value = raf(() => {
+				let mergedState = { ...transform.value };
+				for (const queuedState of updateQueue.value) mergedState = {
+					...mergedState,
+					...queuedState
+				};
+				frameId.value = null;
+				onTransform?.({
+					transform: mergedState,
+					action
+				});
+				setTransform(mergedState);
+			});
+		}
+		updateQueue.value.push({
+			...transform.value,
+			...newTransform
+		});
+	};
+	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
+		const imageElement = imageRef.value;
+		if (!imageElement) return;
+		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imageElement;
+		let adjustedRatio = ratio;
+		let newScale = transform.value.scale * ratio;
+		if (newScale > maxScale.value) {
+			newScale = maxScale.value;
+			adjustedRatio = maxScale.value / transform.value.scale;
+		} else if (newScale < minScale.value) {
+			newScale = isTouch ? newScale : minScale.value;
+			adjustedRatio = newScale / transform.value.scale;
+		}
+		const mergedCenterX = centerX ?? windowWidth.value / 2;
+		const mergedCenterY = centerY ?? windowHeight.value / 2;
+		const diffRatio = adjustedRatio - 1;
+		const diffImageX = diffRatio * width * .5;
+		const diffImageY = diffRatio * height * .5;
+		const diffOffsetLeft = diffRatio * (mergedCenterX - transform.value.x - offsetLeft);
+		const diffOffsetTop = diffRatio * (mergedCenterY - transform.value.y - offsetTop);
+		let newX = transform.value.x - (diffOffsetLeft - diffImageX);
+		let newY = transform.value.y - (diffOffsetTop - diffImageY);
+		if (ratio < 1 && newScale === 1) {
+			const scaledWidth = offsetWidth * newScale;
+			const scaledHeight = offsetHeight * newScale;
+			if (scaledWidth <= windowWidth.value && scaledHeight <= windowHeight.value) {
+				newX = 0;
+				newY = 0;
+			}
+		}
+		updateTransform({
+			x: newX,
+			y: newY,
+			scale: newScale
+		}, action);
+	};
+	return {
+		transform,
+		resetTransform,
+		updateTransform,
+		dispatchZoomChange
+	};
+}
+//#endregion
+export { useImageTransform as default };

package/dist/hooks/useMouseEvent.d.ts

@@ -0,0 +1,22 @@
+import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "../interface.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useMouseEvent.d.ts
+interface UseMouseEventOptions {
+  imageRef: Ref<HTMLImageElement | undefined>;
+  movable: Ref<boolean>;
+  visible: Ref<boolean>;
+  scaleStep: Ref<number>;
+  transform: Ref<TransformType>;
+  updateTransform: UpdateTransformFunc;
+  dispatchZoomChange: DispatchZoomChangeFunc;
+  windowWidth: Ref<number>;
+  windowHeight: Ref<number>;
+}
+declare function useMouseEvent(options: UseMouseEventOptions): {
+  isMoving: Ref<boolean, boolean>;
+  onMouseDown: (event: MouseEvent) => void;
+  onWheel: (event: WheelEvent) => void;
+};
+//#endregion
+export { UseMouseEventOptions, useMouseEvent as default };

package/dist/hooks/useMouseEvent.js

@@ -0,0 +1,71 @@
+import { getImageBoundaryFix } from "./useImageBoundary.js";
+import { ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/hooks/useMouseEvent.ts
+const BASE_SCALE_RATIO = 1;
+const WHEEL_MAX_SCALE_RATIO = 2;
+function useMouseEvent(options) {
+	const { imageRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange, windowWidth, windowHeight } = options;
+	const isMoving = ref(false);
+	const startPosition = ref({
+		diffX: 0,
+		diffY: 0,
+		transformX: 0,
+		transformY: 0
+	});
+	const onMouseDown = (event) => {
+		if (!movable.value || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		startPosition.value = {
+			diffX: event.pageX - transform.value.x,
+			diffY: event.pageY - transform.value.y,
+			transformX: transform.value.x,
+			transformY: transform.value.y
+		};
+		isMoving.value = true;
+	};
+	const onMouseMove = (event) => {
+		if (!visible.value || !isMoving.value) return;
+		updateTransform({
+			x: event.pageX - startPosition.value.diffX,
+			y: event.pageY - startPosition.value.diffY
+		}, "move");
+	};
+	const onMouseUp = () => {
+		if (!visible.value || !isMoving.value) return;
+		isMoving.value = false;
+		const { transformX, transformY } = startPosition.value;
+		if (!(transform.value.x !== transformX && transform.value.y !== transformY)) return;
+		const imageElement = imageRef.value;
+		if (!imageElement) return;
+		const scaledWidth = imageElement.offsetWidth * transform.value.scale;
+		const scaledHeight = imageElement.offsetHeight * transform.value.scale;
+		const { left, top } = imageElement.getBoundingClientRect();
+		const isRotated = transform.value.rotate % 180 !== 0;
+		const boundaryFix = getImageBoundaryFix({
+			imageWidth: isRotated ? scaledHeight : scaledWidth,
+			imageHeight: isRotated ? scaledWidth : scaledHeight,
+			imageLeft: left,
+			imageTop: top,
+			windowWidth: windowWidth.value,
+			windowHeight: windowHeight.value
+		});
+		if (boundaryFix) updateTransform({ ...boundaryFix }, "dragRebound");
+	};
+	const onWheel = (event) => {
+		if (!visible.value || event.deltaY === 0) return;
+		let ratio = BASE_SCALE_RATIO + Math.min(Math.abs(event.deltaY / 100), WHEEL_MAX_SCALE_RATIO) * scaleStep.value;
+		if (event.deltaY > 0) ratio = BASE_SCALE_RATIO / ratio;
+		dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
+	};
+	useEventListener(window, "mouseup", onMouseUp);
+	useEventListener(window, "mousemove", onMouseMove);
+	return {
+		isMoving,
+		onMouseDown,
+		onWheel
+	};
+}
+//#endregion
+export { useMouseEvent as default };

package/dist/hooks/useTouchEvent.d.ts

@@ -0,0 +1,23 @@
+import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "../interface.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useTouchEvent.d.ts
+interface UseTouchEventOptions {
+  imageRef: Ref<HTMLImageElement | undefined>;
+  movable: Ref<boolean>;
+  visible: Ref<boolean>;
+  minScale: Ref<number>;
+  transform: Ref<TransformType>;
+  updateTransform: UpdateTransformFunc;
+  dispatchZoomChange: DispatchZoomChangeFunc;
+  windowWidth: Ref<number>;
+  windowHeight: Ref<number>;
+}
+declare function useTouchEvent(options: UseTouchEventOptions): {
+  isTouching: Ref<boolean, boolean>;
+  onTouchStart: (event: TouchEvent) => void;
+  onTouchMove: (event: TouchEvent) => void;
+  onTouchEnd: () => void;
+};
+//#endregion
+export { UseTouchEventOptions, useTouchEvent as default };

package/dist/{ImagePreview/hooks → hooks}/useTouchEvent.js

@@ -1,23 +1,20 @@
-import addEventListenerWrap from "../utils/addEventListener.js";
-import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition.js";
+import { getImageBoundaryFix } from "./useImageBoundary.js";
 import { ref } from "vue";
-import { useEffect, useState } from "@gx-design-vue/pro-hooks";
-
-//#region src/ImagePreview/hooks/useTouchEvent.ts
+import { useEventListener } from "@vueuse/core";
+//#region src/hooks/useTouchEvent.ts
 function getDistance(a, b) {
-	const x = a.x - b.x;
-	const y = a.y - b.y;
-	return Math.hypot(x, y);
+	return Math.hypot(a.x - b.x, a.y - b.y);
 }
-function getCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
+function getTouchCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
 	const distance1 = getDistance(oldPoint1, newPoint1);
 	const distance2 = getDistance(oldPoint2, newPoint2);
 	if (distance1 === 0 && distance2 === 0) return [oldPoint1.x, oldPoint1.y];
 	const ratio = distance1 / (distance1 + distance2);
 	return [oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x), oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y)];
 }
-function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange) {
-	const [isTouching, setIsTouching] = useState(false);
+function useTouchEvent(options) {
+	const { imageRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange, windowWidth, windowHeight } = options;
+	const isTouching = ref(false);
 	const touchPointInfo = ref({
 		point1: {
 			x: 0,
@@ -38,7 +35,7 @@ function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTran
 	const onTouchStart = (event) => {
 		if (!movable.value) return;
 		event.stopPropagation();
-		setIsTouching(true);
+		isTouching.value = true;
 		const { touches = [] } = event;
 		if (touches.length > 1) updateTouchPointInfo({
 			point1: {
@@ -71,7 +68,7 @@ function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTran
 				x: touches[1].clientX,
 				y: touches[1].clientY
 			};
-			const [centerX, centerY] = getCenter(point1, point2, newPoint1, newPoint2);
+			const [centerX, centerY] = getTouchCenter(point1, point2, newPoint1, newPoint2);
 			dispatchZoomChange(getDistance(newPoint1, newPoint2) / getDistance(point1, point2), "touchZoom", centerX, centerY, true);
 			updateTouchPointInfo({
 				point1: newPoint1,
@@ -88,29 +85,32 @@ function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTran
 	};
 	const onTouchEnd = () => {
 		if (!visible.value) return;
-		if (isTouching) setIsTouching(false);
+		if (isTouching.value) isTouching.value = false;
 		updateTouchPointInfo({ eventType: "none" });
-		if (minScale.value > transform.value.scale)
- /** When the scaling ratio is less than the minimum scaling ratio, reset the scaling ratio */
-		return updateTransform({
+		if (minScale.value > transform.value.scale) return updateTransform({
 			x: 0,
 			y: 0,
 			scale: minScale.value
 		}, "touchZoom");
-		const width = imgRef.value.offsetWidth * transform.value.scale;
-		const height = imgRef.value.offsetHeight * transform.value.scale;
-		const { left, top } = imgRef.value.getBoundingClientRect();
-		const isRotate = transform.value.rotate % 180 !== 0;
-		const fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
-		if (fixState) updateTransform({ ...fixState }, "dragRebound");
+		const imageElement = imageRef.value;
+		if (!imageElement) return;
+		const scaledWidth = imageElement.offsetWidth * transform.value.scale;
+		const scaledHeight = imageElement.offsetHeight * transform.value.scale;
+		const { left, top } = imageElement.getBoundingClientRect();
+		const isRotated = transform.value.rotate % 180 !== 0;
+		const boundaryFix = getImageBoundaryFix({
+			imageWidth: isRotated ? scaledHeight : scaledWidth,
+			imageHeight: isRotated ? scaledWidth : scaledHeight,
+			imageLeft: left,
+			imageTop: top,
+			windowWidth: windowWidth.value,
+			windowHeight: windowHeight.value
+		});
+		if (boundaryFix) updateTransform({ ...boundaryFix }, "dragRebound");
 	};
-	useEffect(() => {
-		let onTouchMoveListener;
-		if (visible.value && movable.value) onTouchMoveListener = addEventListenerWrap(window, "touchmove", (e) => e.preventDefault(), { passive: false });
-		return () => {
-			onTouchMoveListener?.remove();
-		};
-	}, [visible, movable]);
+	useEventListener(window, "touchmove", (event) => {
+		if (visible.value && movable.value) event.preventDefault();
+	}, { passive: false });
 	return {
 		isTouching,
 		onTouchStart,
@@ -118,6 +118,5 @@ function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTran
 		onTouchEnd
 	};
 }
-
 //#endregion
-export { useTouchEvent as default };
+export { useTouchEvent as default };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { BaseImagePreviewProps, PreviewPropsIcons } from "./ImagePreview/props.js";
-import { baseProps, imageProps } from "./props.js";
-import GImage, { GImageProps } from "./GImage.js";
-import GImagePreview, { ImagePreviewProps } from "./ImagePreview/index.js";
-export { BaseImagePreviewProps, GImage, GImagePreview, type GImageProps, type ImagePreviewProps, PreviewPropsIcons, baseProps, imageProps };
+import { DispatchZoomChangeFunc, ForwardGImageType, ForwardImagePreviewType, GImageEmits, GImageExpose, GImageProps, GImageSlotNames, GImageSlots, ImageFitType, ImageLoadingType, ImagePreviewConfig, ImagePreviewEmits, ImagePreviewExpose, ImagePreviewProps, ImagePreviewSlots, PreviewPropsIcons, PreviewSlotNames, TransformAction, TransformType, UpdateTransformFunc } from "./interface.js";
+import _default from "./Image.js";
+import _default$1 from "./ImagePreview.js";
+export { type DispatchZoomChangeFunc, type ForwardGImageType, type ForwardImagePreviewType, _default as GImage, type GImageEmits, type GImageExpose, _default$1 as GImagePreview, type GImageProps, type GImageSlotNames, type GImageSlots, type ImageFitType, type ImageLoadingType, type ImagePreviewConfig, type ImagePreviewEmits, type ImagePreviewExpose, type ImagePreviewProps, type ImagePreviewSlots, type PreviewPropsIcons, type PreviewSlotNames, type TransformAction, type TransformType, type UpdateTransformFunc };

package/dist/index.js

@@ -1,6 +1,3 @@
-import { baseProps, imageProps } from "./props.js";
-import "./ImagePreview/props.js";
-import ImagePreview_default from "./ImagePreview/index.js";
-import GImage_default from "./GImage.js";
-
-export { GImage_default as GImage, ImagePreview_default as GImagePreview, baseProps, imageProps };
+import GImagePreview from "./ImagePreview.js";
+import GImage from "./Image.js";
+export { GImage, GImagePreview };