yamlover 0.3.55 → 0.3.58

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

@@ -0,0 +1 @@
+import{j as f,O as K,r as a,D as G,l as V,m as X,t as Y,b as J,u as _,a as Q,f as ee,e as te,c as ne}from"./index-0ALNONIF.js";import{u as re,L as p,f as oe,w as ae}from"./panzoom-BXEAw479.js";import{a as se}from"./paged-Cjy3svw2.js";const w=t=>Number(t)||0,ce=t=>t.replace(/[&<>"]/g,r=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[r]);function ie(t){return t.map(r=>{const o=V({name:r.label,color:r.color});return X(r.path)?`<span class="tagswatch" style="--tag:${o}" title="${ce(r.label)}"></span>`:Y(r.path,r.label,o)}).join("")}function le(t,r,o,n,c){if(!t||n<=0||c<=0)return;const s=document.createElement("canvas");s.width=n,s.height=c;const d=s.getContext("2d");if(d){d.drawImage(t,r,o,n,c,0,0,n,c);try{return s.toDataURL("image/png")}catch{return}}}function ue(t,r){const o=new Map;for(const n of t){if(n.selector?.type!=="rect")continue;const c=JSON.stringify(n.selector);let s=o.get(c);s||(s={x:w(n.selector.x),y:w(n.selector.y),w:w(n.selector.w),h:w(n.selector.h),title:n.description,color:ne(n),ann:te(n)?n:void 0,id:n.fragmentSlug?ee(r,n.fragmentSlug):void 0,tags:[]},o.set(c,s)),n.tag&&s.tags.push({path:n.tag.path,label:n.tag.name,color:n.tag.color})}return[...o.values()]}function fe({src:t,className:r,regions:o,onSelectRegion:n,onRegionClick:c,selectColor:s,fill:d=!0,onNavigate:S}){const y=a.useRef(null),m=a.useRef(S);m.current=S;const x=a.useRef(null),E=a.useRef(null),k=a.useRef(null),N=a.useRef({w:1,h:1}),L=a.useRef(n),I=a.useRef(c),M=a.useRef(s),[T,A]=a.useState(null),[H,W]=a.useState(0),D=JSON.stringify(o??[]),P=!!n;se(y,14,d,0),re(y,()=>x.current),a.useEffect(()=>{L.current=n,I.current=c,M.current=s}),a.useEffect(()=>{let i=!1,g=null;A(null);const e=new Image;return e.onload=()=>{if(i||!y.current)return;const h=e.naturalWidth||1,b=e.naturalHeight||1;N.current={w:h,h:b},k.current=e;const l=p.map(y.current,{crs:p.CRS.Simple,minZoom:-8,attributionControl:!1,zoomSnap:0}),R=[[0,0],[b,h]];p.imageOverlay(t,R).addTo(l),oe(l,R),E.current=p.layerGroup().addTo(l),x.current=l,g=ae(l,{color:()=>M.current?.()??G,onSelect:P?(u,v)=>{const{h:j}=N.current,C=u.getWest(),$=u.getEast(),q=u.getSouth(),U=u.getNorth(),Z=Math.round(C),z=Math.round(j-U),F=Math.round($-C),B=Math.round(U-q);L.current?.({type:"rect",x:Z,y:z,w:F,h:B},v,le(k.current,Z,z,F,B))}:void 0}),W(u=>u+1)},e.onerror=()=>{i||A("could not load image")},e.src=t,()=>{i=!0,g?.(),x.current?.remove(),x.current=null,E.current=null}},[t]);const O=a.useRef(new Map);return a.useEffect(()=>{const i=E.current;if(!i)return;i.clearLayers(),O.current.clear();const{h:g}=N.current;for(const e of o??[]){const h=e.color||G,b=[[g-e.y,e.x],[g-(e.y+e.h),e.x+e.w]],l=p.rectangle(b,{className:"yo-region",color:h,weight:3,fillColor:h,fillOpacity:.25});if(e.title&&l.bindTooltip(e.title),e.ann){const R=e.ann,u=v=>{p.DomEvent.stop(v),I.current?.(R,{x:v.originalEvent.clientX,y:v.originalEvent.clientY})};l.on("click",u),l.on("contextmenu",u)}if(l.addTo(i),e.tags&&e.tags.length){const R=p.latLng(g-(e.y+e.h),e.x),u=p.divIcon({className:"yo-region-tags",html:ie(e.tags),iconAnchor:[0,0]});p.marker(R,{icon:u,interactive:!1,keyboard:!1}).addTo(i).getElement()?.addEventListener("click",j=>{const C=j.target.closest("[data-tag-path]");C&&(j.stopPropagation(),m.current?.(C.getAttribute("data-tag-path")))})}e.id&&O.current.set(e.id,{rect:l,bounds:b})}},[D,H]),a.useEffect(()=>{const i=()=>{const g=x.current,e=decodeURIComponent(window.location.hash.slice(1)),h=e?O.current.get(e):void 0;!g||!h||(g.fitBounds(h.bounds,{maxZoom:g.getZoom(),padding:[40,40]}),h.rect.setStyle({weight:6,fillOpacity:.45}),window.setTimeout(()=>h.rect.setStyle({weight:3,fillOpacity:.25}),1e3))};return i(),window.addEventListener("hashchange",i),()=>window.removeEventListener("hashchange",i)},[D,H]),f.jsxs(f.Fragment,{children:[T&&f.jsxs("div",{className:"error",children:["image: ",T]}),f.jsx("div",{ref:y,className:r+(P?" yo-selectable":"")})]})}function de({node:t,onNavigate:r}){const o=_(t.path),{openCreate:n,openEdit:c,palette:s,preview:d,color:S}=Q(o,t.path),y=ue(o.annotations,t.path);if(d?.selector.type==="rect"){const m=d.selector;y.push({x:w(m.x),y:w(m.y),w:w(m.w),h:w(m.h),color:d.color})}return f.jsxs("div",{className:"text",children:[t.title&&f.jsx("h1",{className:"chapter-title",children:t.title}),t.description&&f.jsx("p",{className:"chapter-subtitle",children:t.description}),f.jsx(fe,{src:J(t.path),regions:y,onSelectRegion:(m,x,E)=>n(m,x,void 0,E),onRegionClick:c,selectColor:()=>S,className:"filemap fileimagemap",onNavigate:r}),s]})}function ge({src:t,path:r,onNavigate:o}){return f.jsx(K,{path:r,onNavigate:o,title:"Open image on its own page",children:f.jsx("img",{className:"chunk-image",src:t,alt:"",loading:"lazy"})})}function ye({chunk:t,onNavigate:r}){return f.jsx(ge,{src:J(t.path),path:t.path,onNavigate:r})}export{ye as ImageChunk,de as ImageView,fe as PanZoomImage,ge as StaticImageChunk};