yamlover 0.3.3 → 0.3.5

package/dist/client/assets/imagemap-j0tV2wtS.js

@@ -0,0 +1 @@
+import{j as a,b as U,f as J,d as K,r,D as A,e as V,c as X}from"./index-BiwY33f2.js";import{L as h,w as Y}from"./panzoom-tORQ67Sx.js";const E=e=>Number(e)||0;function _(e,t,f,s,c){if(!e||s<=0||c<=0)return;const o=document.createElement("canvas");o.width=s,o.height=c;const l=o.getContext("2d");if(l){l.drawImage(e,t,f,s,c,0,0,s,c);try{return o.toDataURL("image/png")}catch{return}}}function q(e){return e.filter(t=>t.selector?.type==="rect").map(t=>({x:E(t.selector.x),y:E(t.selector.y),w:E(t.selector.w),h:E(t.selector.h),title:t.description,color:X(t),ann:V(t)?t:void 0}))}function z({src:e,className:t,regions:f,onSelectRegion:s,onRegionClick:c,selectColor:o}){const l=r.useRef(null),g=r.useRef(null),x=r.useRef(null),w=r.useRef(null),R=r.useRef({w:1,h:1}),N=r.useRef(s),j=r.useRef(c),b=r.useRef(o),[C,S]=r.useState(null),[F,G]=r.useState(0),P=JSON.stringify(f??[]),M=!!s;return r.useEffect(()=>{N.current=s,j.current=c,b.current=o}),r.useEffect(()=>{let i=!1,y=null;S(null);const n=new Image;return n.onload=()=>{if(i||!l.current)return;const v=n.naturalWidth||1,m=n.naturalHeight||1;R.current={w:v,h:m},w.current=n;const u=h.map(l.current,{crs:h.CRS.Simple,minZoom:-8,attributionControl:!1,zoomSnap:0}),d=[[0,0],[m,v]];h.imageOverlay(e,d).addTo(u),u.fitBounds(d),x.current=h.layerGroup().addTo(u),g.current=u,y=Y(u,{color:()=>b.current?.()??A,onSelect:M?(p,W)=>{const{h:Z}=R.current,O=p.getWest(),B=p.getEast(),H=p.getSouth(),I=p.getNorth(),L=Math.round(O),T=Math.round(Z-I),k=Math.round(B-O),D=Math.round(I-H);N.current?.({type:"rect",x:L,y:T,w:k,h:D},W,_(w.current,L,T,k,D))}:void 0}),G(p=>p+1)},n.onerror=()=>{i||S("could not load image")},n.src=e,()=>{i=!0,y?.(),g.current?.remove(),g.current=null,x.current=null}},[e]),r.useEffect(()=>{const i=x.current;if(!i)return;i.clearLayers();const{h:y}=R.current;for(const n of f??[]){const v=n.color||A,m=h.rectangle([[y-n.y,n.x],[y-(n.y+n.h),n.x+n.w]],{className:"yo-region",color:v,weight:3,fillColor:v,fillOpacity:.25});if(n.title&&m.bindTooltip(n.title),n.ann){const u=n.ann;m.on("click",d=>{h.DomEvent.stop(d),j.current?.(u,{x:d.originalEvent.clientX,y:d.originalEvent.clientY})})}m.addTo(i)}},[P,F]),a.jsxs(a.Fragment,{children:[C&&a.jsxs("div",{className:"error",children:["image: ",C]}),a.jsx("div",{ref:l,className:t+(M?" yo-selectable":"")})]})}function ee({node:e}){const t=J(e.path),{openCreate:f,openEdit:s,palette:c,preview:o,color:l}=K(t),g=o?[...t.annotations,{path:"(preview)",selector:o.selector,tag:o.tag}]:t.annotations;return a.jsxs("div",{className:"text",children:[e.title&&a.jsx("h1",{className:"chapter-title",children:e.title}),e.description&&a.jsx("p",{className:"chapter-subtitle",children:e.description}),a.jsx(z,{src:U(e.path),regions:q(g),onSelectRegion:(x,w,R)=>f(x,w,void 0,R),onRegionClick:s,selectColor:()=>l,className:"filemap fileimagemap"}),c]})}function te({chunk:e}){return a.jsx(z,{src:U(e.path),className:"filemap chunk-map fileimagemap"})}export{te as ImageChunk,ee as ImageView,z as PanZoomImage};