vexip-ui/lib/components/viewer/viewer.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../divider/index.cjs");require("../icon/index.cjs");require("../renderer/index.cjs");const u=require("@vexip-ui/config"),_=require("@vexip-ui/hooks"),A=require("@vexip-ui/utils"),ce=require("./props.cjs"),r=require("./symbol.cjs"),d=require("../icon/icon.cjs"),me=require("../renderer/renderer.cjs"),ve=require("../divider/divider.vue2.cjs"),fe=["title","onClick"],de=e.defineComponent({name:"Viewer",__name:"viewer",props:ce.viewerProps,setup(H,{expose:W}){const K=H,t=u.useProps("viewer",K,{locale:null,width:"100%",height:"100%",moveDisabled:!1,zoomDisabled:!1,zoomDelta:.15,zoomMin:.1,zoomMax:1/0,rotateDisabled:!1,rotateDelta:90,flipDisabled:!1,fullDisabled:!1,toolbarPlacement:"bottom",actions:()=>[],toolbarFade:!1,noTransition:!1,centerScale:!1,actionLayout:()=>[]}),a=u.useNameHelper("viewer"),v=u.useLocale("viewer",e.toRef(t,"locale")),f=u.useIcons(),{timer:x}=_.useSetTimeout(),C=e.ref(!1),p=e.ref(1),c=e.ref(0),F=e.ref(!1),R=e.ref(!1),B=e.ref(),g=e.ref(),{supported:j,full:y,enter:G,exit:J}=_.useFullScreen(B),{target:h,x:z,y:k,moving:S}=_.useMoving({onStart:(n,o)=>{if(t.moveDisabled||o.button>0)return!1;u.emitEvent(t.onMoveStart,M())},onMove:()=>{u.emitEvent(t.onMoveStart,M())},onEnd:()=>{u.emitEvent(t.onMoveStart,M())}}),i=e.reactive({zoom:p,rotate:c,flipX:F,flipY:R,full:y,moving:S,x:z,y:k}),E={x:0,y:0};_.useModifier({target:B,passive:!1,onKeyDown:(n,o)=>{if(!S.value&&(o.up||o.down||o.left||o.right)){n.preventDefault();const s=o.up||o.down?k:z,m=o.up||o.left?-10:10;s.value+=n.ctrlKey?5*m:m,o.resetAll()}}});function M(){return i}function D(n,o){return A.callIfFunc(n[o],i)}function b(n){return a.be(n)}const Q=[{name:r.InternalActionName.RotateRight,process:()=>q(t.rotateDelta),iconRenderer:()=>e.h(d,f.value.rotateRight),class:b(r.InternalActionName.RotateRight),title:()=>v.value.rotateRight,hidden:()=>t.rotateDisabled},{name:r.InternalActionName.RotateLeft,process:()=>q(-1*t.rotateDelta),iconRenderer:()=>e.h(d,f.value.rotateLeft),class:b(r.InternalActionName.RotateLeft),title:()=>v.value.rotateLeft,hidden:()=>t.rotateDisabled},{name:r.InternalActionName.FlipX,process:()=>$(),iconRenderer:()=>e.h(d,f.value.flipX),class:b(r.InternalActionName.FlipX),title:()=>v.value.flipHorizontal,hidden:()=>t.flipDisabled},{name:r.InternalActionName.FlipY,process:()=>X(),iconRenderer:()=>e.h(d,f.value.flipY),class:b(r.InternalActionName.FlipY),title:()=>v.value.flipVertical,hidden:()=>t.flipDisabled},{name:r.InternalActionName.ZoomIn,process:()=>I(t.zoomDelta),iconRenderer:()=>e.h(d,f.value.zoomIn),class:b(r.InternalActionName.ZoomIn),title:()=>v.value.zoomIn,hidden:()=>t.zoomDisabled},{name:r.InternalActionName.ZoomOut,process:()=>I(-1*t.zoomDelta),iconRenderer:()=>e.h(d,f.value.zoonOut),class:b(r.InternalActionName.ZoomOut),title:()=>v.value.zoomOut,hidden:()=>t.zoomDisabled},{name:r.InternalActionName.FullScreen,process:()=>P(!y.value),iconRenderer:()=>e.h(d,y.value?f.value.resetScreen:f.value.fullScreen),class:b(r.InternalActionName.FullScreen),title:()=>y.value?v.value.fullScreenExit:v.value.fullScreen,hidden:()=>t.fullDisabled},{name:r.InternalActionName.Reset,process:()=>Z(),iconRenderer:()=>e.h(d,f.value.refresh),class:b(r.InternalActionName.Reset),title:()=>v.value.reset}],U=e.computed(()=>({[a.b()]:!0,[a.bs("vars")]:!0,[a.bm("inherit")]:t.inherit,[a.bm("draggable")]:!t.moveDisabled,[a.bm("resizable")]:!t.zoomDisabled,[a.bm("full")]:y.value,[a.bm("moving")]:S.value,[a.bm("static")]:t.noTransition})),ee=e.computed(()=>({width:A.toCssSize(t.width),height:A.toCssSize(t.height)})),V=e.computed(()=>{const[n]=t.toolbarPlacement.split("-");return n==="left"||n==="right"}),T=e.computed(()=>typeof t.toolbarFade=="number"?t.toolbarFade:t.toolbarFade?1500:0),te=e.computed(()=>({[a.be("toolbar")]:!0,[a.bem("toolbar","active")]:T.value<300||C.value,[a.bem("toolbar",t.toolbarPlacement)]:!0,[a.bem("toolbar","vertical")]:V.value})),ne=e.computed(()=>({transform:`translate3d(${z.value}px, ${k.value}px, 0) scale(${p.value})`})),oe=e.computed(()=>({transform:`scaleX(${F.value?-1:1}) scaleY(${R.value?-1:1}) rotate(${c.value}deg)`})),Y=e.computed(()=>{var m;const n=new Map,o=[];Q.concat(t.actions).forEach(l=>{l.name&&n.set(l.name,l)});let s;(m=t.actionLayout)!=null&&m.length?s=t.actionLayout:(s=[...r.viewerDefaultActionLayout],t.actions.length&&s.push(t.actions.map(l=>l.name)));for(const l of s){const N=l.map(L=>n.get(L)).filter(Boolean);N.length&&o.push(N)}return o});W({moving:S,fullSupported:j,state:i,viewer:B,container:h,transition:g,handleRotate:q,toggleFlipHorizontal:$,toggleFlipVertical:X,handleZoom:I,toggleFull:P,handleReset:Z}),e.onMounted(()=>{if(h.value){const n=h.value.getBoundingClientRect();E.x=n.left+n.width*.5,E.y=n.top+n.height*.5}});function le(n){n.stopPropagation(),n.preventDefault();const o=n.deltaY>0?-1:1;E.x=n.clientX,E.y=n.clientY,u.emitEvent(t.onWheel,o,i),I(o*t.zoomDelta)}function q(n,o=!0){t.rotateDisabled||(c.value+=n,t.noTransition&&c.value%360===0&&(c.value=0),o&&u.emitEvent(t.onRotate,n,i),t.noTransition&&e.nextTick(O))}function $(n=!F.value,o=!0){t.flipDisabled||(F.value=n,o&&u.emitEvent(t.onFlipX,n,i))}function X(n=!R.value,o=!0){t.flipDisabled||(R.value=n,o&&u.emitEvent(t.onFlipY,n,i))}function I(n,o=!0){if(t.zoomDisabled||!h.value||S.value)return;const s=h.value.getBoundingClientRect(),{x:m,y:l}=E,{offsetWidth:N,offsetHeight:L}=h.value,ie=p.value;p.value=A.toFixed(A.boundRange(p.value+n,t.zoomMin,t.zoomMax),5);const w=p.value/ie-1,se=w*N*.5,ue=w*L*.5;t.centerScale||(z.value-=w*(m-s.left-z.value)-se,k.value-=w*(l-s.top-k.value)-ue),o&&u.emitEvent(t.onZoom,p.value,i)}async function P(n=!y.value,o=!0){n?await G():await J(),o&&u.emitEvent(t.onFull,n,i)}function Z(n=!0){k.value=0,z.value=0,c.value=0,F.value=!1,R.value=!1,p.value=1,n&&u.emitEvent(t.onReset,i)}function O(){if(t.noTransition){c.value%360===0&&(c.value=0);return}const n=[];c.value%360===0&&n.push(()=>{g.value&&(g.value.style.transitionDuration="0ms")},()=>{c.value=0},()=>{g.value&&(g.value.style.transitionDuration="")});const o=()=>{var s;(s=n.shift())==null||s(),n.length&&requestAnimationFrame(o)};o()}function ae(){clearTimeout(x.toolbarFade),C.value=!0}function re(){clearTimeout(x.toolbarFade),T.value>=300&&(x.toolbarFade=setTimeout(()=>{C.value=!1},T.value))}return(n,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"viewer",ref:B,class:e.normalizeClass(U.value),tabindex:"0",style:e.normalizeStyle(ee.value)},[e.createElementVNode("div",{ref_key:"container",ref:h,class:e.normalizeClass(e.unref(a).be("container")),onWheel:le},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).be("content")),style:e.normalizeStyle(ne.value)},[e.createElementVNode("div",{ref_key:"transition",ref:g,class:e.normalizeClass(e.unref(a).be("transition")),style:e.normalizeStyle(oe.value),onTransitionend:O},[e.renderSlot(n.$slots,"default",{state:i})],38)],6)],34),e.createElementVNode("div",{class:e.normalizeClass(te.value),role:"toolbar",onMouseenter:ae,onMouseleave:re},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Y.value,(s,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:m},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s,l=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l.name},[D(l,"hidden")?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass([{[e.unref(a).be("action")]:!0,[e.unref(a).bem("action","disabled")]:D(l,"disabled")},D(l,"class")]),title:D(l,"title"),onClick:e.withModifiers(N=>l.process(i),["stop"])},[e.renderSlot(n.$slots,`action-${l.name}`,{state:i},()=>[l.iconRenderer?(e.openBlock(),e.createBlock(e.unref(me),{key:0,renderer:l.iconRenderer,data:i},null,8,["renderer","data"])):l.icon?(e.openBlock(),e.createBlock(e.unref(d),{key:1,icon:l.icon,style:e.normalizeStyle(D(l,"iconStyle")),scale:D(l,"iconScale")||1},null,8,["icon","style","scale"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(l.name),1)],64))])],10,fe))],64))),128)),m!==Y.value.length-1?(e.openBlock(),e.createBlock(e.unref(ve),{key:0,inherit:"",vertical:!V.value},null,8,["vertical"])):e.createCommentVNode("",!0)],64))),128))],34)],6))}});module.exports=de;
//# sourceMappingURL=viewer.vue2.cjs.map