daiquiri-ui 2025.12.1__py3-none-any.whl → 2026.2.0__py3-none-any.whl

daiquiri_ui/static/assets/TwoD-ca5cd677.js

@@ -1,3 +0,0 @@
-var pe=Object.defineProperty;var ue=(o,s,e)=>s in o?pe(o,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[s]=e;var b=(o,s,e)=>(ue(o,typeof s!="symbol"?s+"":s,e),e);import{r as y,j as n,R as U,C as I,B as D,l as h,w as F,c as Y,m as j,u as me,a as fe,b as J,f as Z,d as R,N as ge,F as S,I as X,T as M,e as C,g as V,h as ee,i as be,k as we,t as d,n as q,X as W,P as x,A as ne,s as ce,o as xe,p as ve,q as Se}from"./index-0751d893.js";import{D as H}from"./DropdownButton-d066ece0.js";import{T as _,B as ye,u as Ce,S as K}from"./store-c3eddf46.js";import{f,C as Oe}from"./CanvasEnhancer-16124b1e.js";import{J as je}from"./jsmpeg-player.esm-5b64ab36.js";import{S as Me}from"./ScanPlot1d-38bddb23.js";import"./types-46afffa0.js";import"./index-a0f7b98c.js";import"./H5WebCurvePlot-136dfa6f.js";function Te(o){const{hide:s=!1}=o,e=()=>{o.onChange({sampleimageid:o.sampleimageid,hide:!s})};return n.jsx(D,{className:"ms-auto",title:s?"Show":"Hide",size:"sm",onClick:e,variant:s?"secondary":"primary",children:n.jsx("i",{className:`fa fa-${s?"eye-slash":"eye"}`})})}function ke(o){const[s,e]=y.useState(!0),t=()=>{h.each(o.images,i=>{o.actions.updateImage({sampleimageid:i.sampleimageid,hide:s})}),e(!s)};return n.jsx("div",{className:"d-grid gap-2 mb-1",children:n.jsxs(H,{align:"end",size:"sm",title:n.jsxs(n.Fragment,{children:[n.jsx("i",{className:"fa fa-eye me-1"}),"Visibility"]}),className:"image-selection",children:[n.jsxs(U,{children:[n.jsx(I,{xs:10,children:"Show/Hide All Images"}),n.jsx(I,{xs:2,children:n.jsx(D,{size:"sm",onClick:t,variant:s?"secondary":"primary",className:"ms-auto d-inline-block",children:n.jsx("i",{className:`fa fa-${s?"eye-slash":"eye"}`})})})]}),h.map(o.images,i=>n.jsxs(U,{children:[n.jsx(I,{xs:2,children:i.sampleimageid}),n.jsx(I,{xs:4,children:i.offsetx}),n.jsx(I,{xs:4,children:i.offsety}),n.jsx(I,{xs:2,children:n.jsx(Te,{...i,onChange:o.actions.updateImage})})]},i.sampleimageid))]})})}const Ie=(o,s)=>({images:s.providers.metadata.images.selector("results",o)}),Re=(o,s)=>({actions:{updateImage:e=>s.providers.metadata.images.updateLocal(e)}}),Le=F({metadata:j})(Y(Ie,Re)(ke));function Ee(o){const s=y.useRef(null),e=y.useRef(null),t=y.useRef(),i=y.useRef(null),[a,r]=y.useState(!1),c=y.useCallback(()=>{var p,u,m,v;r(!0),(p=i.current)!=null&&p.checkValidity()&&s.current&&e.current&&(o.setQuantization([Number.parseFloat((u=s.current)==null?void 0:u.value)*1e3,Number.parseFloat((m=e.current)==null?void 0:m.value)*1e3]),(v=t.current)==null||v.close())},[]),l=y.useCallback(p=>{var u;i.current=p,(u=s.current)==null||u.focus()},[]);return n.jsx(ee,{id:"setQuantization",title:"Set Quantization",ref:t,buttonProps:{className:"me-1 d-inline",size:"sm"},buttons:n.jsx(D,{onClick:c,children:"Set Quantization"}),button:n.jsx(n.Fragment,{children:n.jsx("i",{className:"fa fa-plus"})}),children:n.jsx(S,{ref:l,validated:a,children:n.jsxs(S.Group,{as:U,children:[n.jsx(S.Label,{column:!0,sm:3,children:"Quantization"}),n.jsx(I,{children:n.jsxs(X,{children:[n.jsx(S.Control,{ref:s,type:"number",step:"0.001",required:!0,onKeyDown:p=>p.key==="Enter"&&c()}),n.jsx(X.Text,{children:"µm"}),n.jsx(S.Control.Feedback,{type:"invalid",children:"Please provide a quantization in X"})]})}),n.jsx(I,{xs:1,className:"text-center",children:"x"}),n.jsx(I,{children:n.jsxs(X,{children:[n.jsx(S.Control,{ref:e,type:"number",step:"0.001",required:!0,onKeyDown:p=>p.key==="Enter"&&c()}),n.jsx(X.Text,{children:"µm"}),n.jsx(S.Control.Feedback,{type:"invalid",children:"Please provide a quantization in Y"})]})})]})})})}function ze(o){var se,ie,ae,oe;y.useEffect(()=>{o.actions.fetchOriginSettings()},[]);function s(g){o.currentAction===g?o.actions.selectAction(""):(o.actions.selectAction(g),["roi","loi","poi","measure","move"].includes(g)&&o.actions.toggleCursor(!1))}const e=me(),t=fe();function i(){o.actions.saveImage({sampleid:o.currentSample}).catch(g=>{var k,re;o.actions.addToast({type:"error",title:"Could not save image",text:((re=(k=g.response)==null?void 0:k.data)==null?void 0:re.error)||g.message})})}function a(){o.actions.toggleClampOrigin(!o.clampOrigin)}function r(){o.actions.toggleDisableOrigin(!o.disableOrigin)}function c(){o.actions.toggleCentreOnClick(!o.centreOnClick)}function l(g){const k=Number.parseInt(g.target.value,10);o.actions.changeDrawQuantize([k,k])}function p(){o.actions.toggleDrawSnap(!o.drawSnap)}function u(){o.actions.toggleMultiROI(!o.multiROI)}function m(){o.actions.toggleClampLOI(!o.clampLOI)}function v(){o.cursor&&o.actions.setSourceHover({}),o.actions.toggleCursor(!o.cursor)}function w(){o.actions.saveCanvas()}function O(){o.actions.autoFocusImage()}function T(g){o.actions.updateOriginSettings({[g]:!o.originSettings[g]})}function P(g){o.actions.setSourceUrl(g.target.value)}function E(g){o.actions.setClampTarget(g.target.value)}const A={5e4:"50µm",25e3:"25µm",2e4:"20µm",1e4:"10µm",5e3:"5µm",1e3:"1µm",500:"500nm",200:"200nm",...Object.fromEntries(((ae=(ie=(se=o.config)==null?void 0:se.options)==null?void 0:ie.extra_quantizations)==null?void 0:ae.map(g=>{const k=Z(g*R.pixelSize);return[g,`${J(k.scalar,12)}${k.prefix}m`]}))||[])};y.useEffect(()=>{if(!o.drawQuantize){const g=o.config.options.default_quantization||5e3;o.actions.changeDrawQuantize([g,g])}},[]);const z=o.drawQuantize?o.drawQuantize[0]===o.drawQuantize[1]:!0,G=o.drawQuantize?o.drawQuantize[0]!==o.drawQuantize[1]||!Object.keys(A).includes(String(o.drawQuantize[0])):!1,N=G?Z(o.drawQuantize[0]*R.pixelSize):null,de=G?"custom":o.drawQuantize?o.drawQuantize[0]:void 0,L=h.find(o.sources,{origin:!0});return n.jsxs(ge,{bg:"cyan",className:"p-2",children:[n.jsxs(S,{className:"text-nowrap",children:[n.jsxs(X,{className:"d-inline",children:[n.jsx(M,{tooltip:"Enable draw quantisation",children:n.jsxs(S.Control,{className:"d-inline",style:{width:"auto"},as:"select",size:"sm",value:de,onChange:l,children:[h.map(A,(g,k)=>n.jsx("option",{value:k,children:g})),o.drawQuantize&&G&&N&&n.jsxs("option",{value:"custom",children:[z?J(N.scalar,12):`${N.scalar}x${J(o.drawQuantize[1]*N.multiplier*R.pixelSize,12)}`,N==null?void 0:N.prefix,"m"]})]})}),n.jsx(Ee,{setQuantization:o.actions.changeDrawQuantize})]}),n.jsx(M,{tooltip:"Snap to nearest object",children:n.jsx(_,{type:"checkbox",value:o.drawSnap?["1"]:void 0,onChange:p,children:n.jsxs(C,{value:"1",size:"sm",className:" me-2",id:"snap",children:[n.jsx("i",{className:"fa fa-object-ungroup me-1"}),"Snap"]})})})]}),n.jsx(S,{children:n.jsxs(ye,{children:[n.jsxs(_,{type:"radio",name:"action",value:o.currentAction,onChange:s,className:"me-1",children:[n.jsxs(C,{value:"",size:"sm",id:"off",children:[n.jsx("i",{className:"fa fa-power-off me-1"}),"Off"]}),n.jsxs(C,{value:"mosaic",id:"mosaic",size:"sm",disabled:!e||t||!o.currentSample,children:[n.jsx("i",{className:"fa fa-th me-1"}),"Mosaic"]}),o.config.options.import_reference&&n.jsxs(C,{value:"reference",id:"reference",size:"sm",disabled:!e||t||!o.selectedSampleActionId,children:[n.jsx("i",{className:"fa fa-map-marker me-1"}),"Ref"]}),n.jsxs(C,{value:"poi",size:"sm",id:"poi",disabled:!o.currentSample,children:[n.jsx("i",{className:"fa fa-map-pin me-1"}),"POI"]}),n.jsxs(C,{value:"roi",id:"roi",size:"sm",disabled:!o.currentSample,children:[n.jsx("i",{className:"fa fa-square-o me-1"}),"ROI",n.jsx(M,{tooltip:"Draw multiple ROIs",children:n.jsx(S.Check,{className:"d-inline ms-1",type:"checkbox",checked:o.multiROI,value:"1",onChange:u})})]}),n.jsxs(C,{value:"loi",id:"loi",size:"sm",disabled:!o.currentSample,children:[n.jsx("i",{className:"fa fa-long-arrow-right me-1"}),"LOI",n.jsx(M,{tooltip:"Clamp LOIs",children:n.jsx(S.Check,{className:"d-inline ms-1",type:"checkbox",checked:o.clampLOI,value:"1",onChange:m})})]}),n.jsxs(C,{value:"measure",id:"measure",size:"sm",children:[n.jsx("i",{className:"fa fa-expand me-1"}),"Measure"]}),n.jsxs(C,{value:"pan",id:"pan",size:"sm",children:[n.jsx("i",{className:"fa fa-arrows me-1"}),"Pan"]}),n.jsxs(C,{value:"move",id:"move",size:"sm",disabled:!e||t,children:[n.jsx("i",{className:"fa fa-map-marker me-1"}),"Move",(o.originSettings.fine_fixed||o.originSettings.coarse_fixed)&&o.originSettings.config.allow_fixed_axes&&n.jsx(M,{tooltip:"One axis is currently fixed",children:n.jsx("div",{className:"bg-warning px-1 ml-1 rounded text-dark",children:n.jsx("i",{className:"fa fa-warning"})})})]}),o.user.is_staff&&o.showStaff&&n.jsxs(C,{value:"beam",size:"sm",id:"move-beam",disabled:t,children:[n.jsx("i",{className:"fa fa-crosshairs me-1"}),"Move Beam"]}),o.user.is_staff&&o.showStaff&&n.jsxs(C,{id:"calib-beam",value:"calib",size:"sm",disabled:t,children:[n.jsx("i",{className:"fa fa-map-calib me-1"}),"Calibrate"]})]}),o.originSettings.has_fine&&o.originSettings.config.allow_fixed_axes&&n.jsx(H,{size:"sm",title:"",children:n.jsxs(V,{className:"pl-2 pr-2",children:[n.jsx(S.Check,{type:"switch",id:"fine-switch",label:"Fix Fine Axes",checked:o.originSettings.fine_fixed,onChange:()=>T("fine_fixed")}),n.jsx(S.Check,{type:"switch",id:"coarse-switch",label:"Fix Coarse Axes",className:"text-nowrap",checked:o.originSettings.coarse_fixed,onChange:()=>T("coarse_fixed")})]})}),o.config.options.centre_selection&&n.jsx(M,{tooltip:"Centre object on selection",children:n.jsx(_,{className:"me-1",type:"checkbox",value:o.centreOnClick?["1"]:void 0,onChange:c,children:n.jsxs(C,{id:"center-selection",value:"1",size:"sm",children:[n.jsx("i",{className:"fa fa-align-center me-1"}),"Centre"]})})}),n.jsx(M,{tooltip:"Toggle showing cursor values and click to show",children:n.jsx(_,{type:"checkbox",value:o.cursor?["1"]:void 0,onChange:v,className:"ms-1 me-1",children:n.jsxs(C,{value:"1",id:"cursor",size:"sm",className:"text-center",children:[n.jsx("i",{className:"fa fa-crosshairs me-1"}),"Cursor"]})})}),n.jsx(H,{size:"sm",title:n.jsxs(n.Fragment,{children:[n.jsx("i",{className:"fa fa-video-camera me-1"})," Video"]}),className:"me-1",children:n.jsxs(V,{className:"pl-2 pr-2",children:[n.jsx("div",{className:"d-grid gap-2 mb-1",children:L&&Object.keys(L.polylines).length>0&&n.jsxs("div",{className:"d-grid gap-2 mb-1 border bg-primary rounded p-1 text-light",children:[n.jsx(M,{tooltip:`${o.clampOrigin?"Un-clamp":"Clamp"} the viewport to the video source (unclamp to pan)`,children:n.jsx(_,{type:"checkbox",value:o.clampOrigin?["1"]:void 0,onChange:a,children:n.jsxs(C,{value:"1",size:"sm",className:"text-start",id:"clamp-viewport",children:[n.jsx("i",{className:`fa fa-fw me-1 ${o.clampOrigin?"fa-lock":"fa-unlock"}`}),o.clampOrigin?"Un-clamp":"Clamp"]})})}),o.originSettings.has_fine&&n.jsxs("div",{className:"bg-light text-primary rounded p-1",style:{fontSize:"0.7875rem"},children:[n.jsx(S.Check,{name:"clampTarget",checked:o.clampTarget==="",type:"radio",value:"",label:"video",onChange:E,className:"mb-0"}),Object.keys(L.polylines).filter(g=>g!=="limits").map(g=>n.jsx(S.Check,{name:"clampTarget",type:"radio",checked:o.clampTarget===g,value:g,label:g,onChange:E,className:"mb-0"}))]})]})}),((oe=L==null?void 0:L.additional_urls)==null?void 0:oe.length)>0&&n.jsxs("div",{className:"d-grid gap-2 mb-1 border bg-primary rounded p-1 text-light",children:[n.jsxs("div",{className:"mx-1",style:{fontSize:"0.7875rem"},children:[n.jsx("i",{className:"fa fa-fw me-1 fa-film"}),"Stream"]}),n.jsxs("div",{className:"bg-light text-primary rounded p-1",style:{fontSize:"0.7875rem"},children:[n.jsx(S.Check,{name:"sourceUrl",checked:o.sourceUrl==="",type:"radio",value:"",label:"default",onChange:P,className:"mb-0"}),L==null?void 0:L.additional_urls.map(g=>n.jsxs(n.Fragment,{children:[n.jsx("hr",{style:{margin:"0.1rem"}}),n.jsx(S.Check,{name:"sourceUrl",type:"radio",checked:o.sourceUrl===g.name,value:g.name,label:g.name,onChange:P,className:"mb-0"})]}))]})]}),o.config.options.autofocus&&n.jsx("div",{className:"d-grid gap-2 mb-1",children:n.jsx(M,{tooltip:"Autofocus the video source",children:n.jsxs(D,{size:"sm",onClick:O,disabled:!e||t,className:"text-start",children:[n.jsx("i",{className:"fa fa-fw fa-eye me-1"})," Autofocus"]})})}),n.jsx("div",{className:"d-grid gap-2 mb-1",children:n.jsx(M,{tooltip:`${o.disableOrigin?"Enable":"Disable"} the video source`,children:n.jsx(_,{type:"checkbox",value:o.disableOrigin?["1"]:void 0,onChange:r,children:n.jsxs(C,{value:"1",size:"sm",className:"text-start",id:"disable-video",children:[n.jsx("i",{className:"fa fa-fw fa-power-off me-1"}),o.disableOrigin?"Enable":"Disable"]})})})})]})}),n.jsx(H,{size:"sm",title:n.jsxs(n.Fragment,{children:[n.jsx("i",{className:"fa fa-picture-o me-1"})," Images"]}),children:n.jsxs(V,{className:"pl-2 pr-2",children:[n.jsx("div",{className:"d-grid gap-2 mb-1",children:n.jsx(M,{tooltip:"Save the current sample image",children:n.jsxs(D,{size:"sm",onClick:i,disabled:!o.currentSample||o.pendingSaveImage,className:"text-start",children:[n.jsx("i",{className:"me-1 fa fa-camera"}),o.pendingSaveImage&&n.jsxs(n.Fragment,{children:["Saving ",n.jsx("i",{className:"fa fa-spin fa-spinner"})]}),!o.pendingSaveImage&&n.jsx(n.Fragment,{children:"Save"})]})})}),n.jsx("div",{className:"d-grid gap-2 mb-1",children:n.jsx(M,{tooltip:"Save the current canvas",children:n.jsxs(D,{size:"sm",onClick:w,disabled:!o.currentSample||o.pendingSaveCanvas,className:"text-start",children:[n.jsx("i",{className:"me-1 fa fa-picture-o"}),o.pendingSaveCanvas&&n.jsxs(n.Fragment,{children:["Saving ",n.jsx("i",{className:"fa fa-spin fa-spinner"})]}),!o.pendingSaveCanvas&&n.jsx(n.Fragment,{children:"Canvas"})]})})}),n.jsx(Le,{})]})})]})})]})}function le(o,s="real"){return e=>{const{fetch:t,invalidateAll:i}=be(),{selectedSampleActionId:a}=Ce(),r={sampleactionid:a,type:s},c=we(K.getList,a?r:null),l=y.useCallback(async({x:p,y:u})=>{const m=c.rows&&c.rows.length>0?Math.max(...c.rows.map(w=>w.id)):0,v=await t(K.getList.push,{posx:p,posy:u,sampleactionid:a,type:s,id:m+1});return i(K.getList),v},[c]);return n.jsx(o,{...e,selectedSampleActionId:a,sampleActionPositions:c.rows,addSampleActionPosition:l})}}const Pe=(o,s)=>({currentAction:d.selector("currentAction",o),clampOrigin:d.selector("clampOrigin",o),sourceUrl:d.selector("sourceUrl",o),clampTarget:d.selector("clampTarget",o),disableOrigin:d.selector("disableOrigin",o),centreOnClick:d.selector("centreOnClick",o),drawQuantize:d.selector("drawQuantize",o),drawSnap:d.selector("drawSnap",o),multiROI:d.selector("multiROI",o),clampLOI:d.selector("clampLOI",o),cursor:d.selector("cursor",o),zoom:d.selector("zoom",o),currentSample:j.selector("currentSample",o),user:s.providers.metadata.user.selector("results",o),pendingSaveImage:d.selector("pendingSaveImage",o),pendingSaveCanvas:d.selector("saveCanvas",o),config:q.selector("config",o,"imageviewer"),originSettings:s.providers.twod.origin.selector("results",o),sources:s.providers.twod.sources.selector("results",o)}),Ae=(o,s)=>({actions:{selectAction:e=>d.dispatch("SELECT_ACTION",e),toggleClampOrigin:e=>{d.dispatch("CLAMP_ORIGIN",e)},setSourceUrl:e=>{d.dispatch("SOURCE_URL",e)},setClampTarget:e=>{d.dispatch("CLAMP_TARGET",e)},toggleDisableOrigin:e=>d.dispatch("UPDATE_ORIGIN",{hide:e}),toggleCentreOnClick:e=>d.dispatch("CENTRE_ON_CLICK",e),changeDrawQuantize:e=>d.dispatch("CHANGE_DRAW_QUANTIZE",e),toggleDrawSnap:e=>d.dispatch("TOGGLE_DRAW_SNAP",e),toggleMultiROI:e=>d.dispatch("TOGGLE_MULTI_ROI",e),toggleClampLOI:e=>d.dispatch("TOGGLE_CLAMP_LOI",e),toggleCursor:e=>d.dispatch("TOGGLE_CURSOR",e),saveImage:e=>d.dispatch("SAVE_IMAGE",e),saveCanvas:()=>d.dispatch("SAVE_CANVAS"),addToast:e=>q.dispatch("ADD_TOAST",e),autoFocusImage:()=>d.dispatch("AUTOFOCUS_IMAGE"),setSourceHover:e=>d.dispatch("SET_SOURCE_HOVER",e),fetchOriginSettings:()=>s.providers.twod.origin.fetch(),updateOriginSettings:e=>s.providers.twod.origin.update(e)}}),Ne=le(F({metadata:j,twod:d})(Y(Pe,Ae)(ze))),De=f.fabric.util.createClass(f.fabric.Image,{initialize:function(o){this.callSuper("initialize",o),this.first=!0,this.firstRender=!0,this.readyCallback=o.readyCallback,this.mcanvas=document.createElement("canvas"),this.mplayer=new je.Player(o.url,{canvas:this.mcanvas,videoBufferSize:1024*1024*4,audio:!1,onVideoDecode:this.onVideoDecode.bind(this),protocols:[],disableGl:!0}),o.autoplay&&this.mplayer.play()},onVideoDecode:function(){this.first&&(console.log("first video decode",this.mcanvas.width,this.mcanvas.height),this.mcanvas.width&&this.mcanvas.height&&(this.setSrc(this.mcanvas.toDataURL()),this.width=this.mcanvas.width,this.height=this.mcanvas.height,this.setCoords(),this.first=!1,this.readyCallback&&this.readyCallback()))},play:function(){this.mplayer.play()},stop:function(){this.mplayer.stop()},_renderFill:function(o){this.firstRender&&(this.setCoords(),this.firstRender=!1);const s=this._element;if(!s)return;const e=this.width,t=this.height,i=Math.min(s.naturalWidth||s.width,e*this._filterScalingX),a=Math.min(s.naturalHeight||s.height,t*this._filterScalingY),r=-e/2,c=-t/2,l=Math.max(0,this.cropX*this._filterScalingX),p=Math.max(0,this.cropY*this._filterScalingY);s&&o.drawImage(this.mcanvas,l,p,i,a,r,c,e,t)},dispose:function(o){console.log("JSMpegImage dispose"),this.mplayer&&this.mplayer.destroy(),this.mplayer=null,this.callSuper("dispose",o)}}),_e=De;class B extends HTMLElement{constructor(){super(),this.DISCONNECT_TIMEOUT=5e3,this.RECONNECT_TIMEOUT=15e3,this.CODECS=["avc1.640029","avc1.64002A","avc1.640033","hvc1.1.6.L153.B0","mp4a.40.2","mp4a.40.5","flac","opus"],this.mode="webrtc,mse,hls,mjpeg",this._isConnected=!0,this.media="video,audio",this.background=!1,this.visibilityThreshold=0,this.visibilityCheck=!0,this.pcConfig={bundlePolicy:"max-bundle",iceServers:[{urls:"stun:stun.l.google.com:19302"}],sdpSemantics:"unified-plan"},this.wsState=WebSocket.CLOSED,this.pcState=WebSocket.CLOSED,this.video=null,this.ws=null,this.wsURL="",this.pc=null,this.connectTS=0,this.mseCodecs="",this.disconnectTID=0,this.reconnectTID=0,this.ondata=null,this.onmessage=null}set src(s){let e=s;typeof e!="string"&&(e=s.toString()),e.startsWith("http")?e=`ws${e.substring(4)}`:s.startsWith("/")&&(e=`ws${window.location.origin.substring(4)}${e}`),this.wsURL=e,this.onconnect()}play(){this.video.play().catch(()=>{this.video.muted||(this.video.muted=!0,this.video.play().catch(s=>{console.warn(s)}))})}send(s){this.ws&&this.ws.send(JSON.stringify(s))}codecs(s){return this.CODECS.filter(e=>this.media.indexOf(e.indexOf("vc1")>0?"video":"audio")>=0).filter(e=>s(`video/mp4; codecs="${e}"`)).join(",")}connectedCallback(){if(this.disconnectTID&&(clearTimeout(this.disconnectTID),this.disconnectTID=0),this.video){const s=this.video.seekable;s.length>0&&(this.video.currentTime=s.end(s.length-1)),this.play()}else this.oninit();this.onconnect()}disconnectedCallback(){this.background||this.disconnectTID||this.wsState===WebSocket.CLOSED&&this.pcState===WebSocket.CLOSED||(this.disconnectTID=setTimeout(()=>{this.reconnectTID&&(clearTimeout(this.reconnectTID),this.reconnectTID=0),this.disconnectTID=0,this.ondisconnect()},this.DISCONNECT_TIMEOUT))}oninit(){console.log("VIDEO oninit"),this.video=document.createElement("video"),this.video.controls=!1,this.video.playsInline=!0,this.video.preload="auto",this.video.style.display="block",this.video.style.width="100%",this.video.style.height="100%",this.append(this.video),this.video.addEventListener("error",e=>{console.warn(e),this.ws&&this.ws.close()});const s=window.navigator.userAgent.match(/Version\/(\d+).+Safari/);if(s){const e=s[1]<"13"?"mp4a.40.2":s[1]<"14"?"flac":"opus";this.CODECS.splice(this.CODECS.indexOf(e))}this.background||("hidden"in document&&this.visibilityCheck&&document.addEventListener("visibilitychange",()=>{document.hidden?this.disconnectedCallback():this._isConnected&&this.connectedCallback()}),"IntersectionObserver"in window&&this.visibilityThreshold&&new IntersectionObserver(t=>{t.forEach(i=>{i.isIntersecting?this._isConnected&&this.connectedCallback():this.disconnectedCallback()})},{threshold:this.visibilityThreshold}).observe(this))}onconnect(){return!this._isConnected||!this.wsURL||this.ws||this.pc?!1:(this.wsState=WebSocket.CONNECTING,this.connectTS=Date.now(),this.ws=new WebSocket(this.wsURL),this.ws.binaryType="arraybuffer",this.ws.addEventListener("open",()=>this.onopen()),this.ws.addEventListener("close",()=>this.onclose()),!0)}ondisconnect(){this.wsState=WebSocket.CLOSED,this.ws&&(this.ws.close(),this.ws=null),this.pcState=WebSocket.CLOSED,this.pc&&(this.pc.getSenders().forEach(s=>{s.track&&s.track.stop()}),this.pc.close(),this.pc=null),this.video.src="",this.video.srcObject=null}onopen(){this.wsState=WebSocket.OPEN,this.ws.addEventListener("message",e=>{if(typeof e.data=="string"){const t=JSON.parse(e.data);Object.keys(this.onmessage).forEach(i=>{this.onmessage[i](t)})}else this.ondata(e.data)}),this.ondata=null,this.onmessage={};const s=[];return this.mode.indexOf("mse")>=0&&("MediaSource"in window||"ManagedMediaSource"in window)?(s.push("mse"),this.onmse()):this.mode.indexOf("hls")>=0&&this.video.canPlayType("application/vnd.apple.mpegurl")?(s.push("hls"),this.onhls()):this.mode.indexOf("mp4")>=0&&(s.push("mp4"),this.onmp4()),this.mode.indexOf("webrtc")>=0&&"RTCPeerConnection"in window&&(s.push("webrtc"),this.onwebrtc()),this.mode.indexOf("mjpeg")>=0&&(s.length?this.onmessage.mjpeg=e=>{e.type!=="error"||e.value.indexOf(s[0])!==0||this.onmjpeg()}:(s.push("mjpeg"),this.onmjpeg())),s}onclose(){if(this.wsState===WebSocket.CLOSED)return!1;this.wsState=WebSocket.CONNECTING,this.ws=null;const s=Math.max(this.RECONNECT_TIMEOUT-(Date.now()-this.connectTS),0);return this.reconnectTID=setTimeout(()=>{this.reconnectTID=0,this.onconnect()},s),!0}onmse(){let s;if("ManagedMediaSource"in window){const e=window.ManagedMediaSource;s=new e,s.addEventListener("sourceopen",()=>{this.send({type:"mse",value:this.codecs(e.isTypeSupported)})},{once:!0}),this.video.disableRemotePlayback=!0,this.video.srcObject=s}else s=new MediaSource,s.addEventListener("sourceopen",()=>{URL.revokeObjectURL(this.video.src),this.send({type:"mse",value:this.codecs(MediaSource.isTypeSupported)})},{once:!0}),this.video.src=URL.createObjectURL(s),this.video.srcObject=null;this.play(),this.mseCodecs="",this.onmessage.mse=e=>{if(e.type!=="mse")return;this.mseCodecs=e.value;const t=s.addSourceBuffer(e.value);t.mode="segments",t.addEventListener("updateend",()=>{if(!t.updating&&a>0)try{const r=i.slice(0,a);t.appendBuffer(r),a=0}catch{}if(!t.updating&&t.buffered&&t.buffered.length){const r=t.buffered.end(t.buffered.length-1),c=r-5,l=t.buffered.start(0);c>l&&(t.remove(l,c),s.setLiveSeekableRange(c,r)),this.video.currentTime<c&&(this.video.currentTime=c);const p=r-this.video.currentTime;this.video.playbackRate=p>.1?p:.1}});const i=new Uint8Array(2*1024*1024);let a=0;this.ondata=r=>{if(t.updating||a>0){const c=new Uint8Array(r);i.set(c,a),a+=c.byteLength}else try{t.appendBuffer(r)}catch{}}}}onwebrtc(){const s=new RTCPeerConnection(this.pcConfig);s.addEventListener("icecandidate",e=>{if(e.candidate&&this.mode.indexOf("webrtc/tcp")>=0&&e.candidate.protocol==="udp")return;const t=e.candidate?e.candidate.toJSON().candidate:"";this.send({type:"webrtc/candidate",value:t})}),s.addEventListener("connectionstatechange",()=>{if(s.connectionState==="connected"){const e=s.getTransceivers().filter(i=>i.currentDirection==="recvonly").map(i=>i.receiver.track),t=document.createElement("video");t.addEventListener("loadeddata",()=>this.onpcvideo(t),{once:!0}),t.srcObject=new MediaStream(e)}else(s.connectionState==="failed"||s.connectionState==="disconnected")&&(s.close(),this.pcState=WebSocket.CLOSED,this.pc=null,this.onconnect())}),this.onmessage.webrtc=e=>{switch(e.type){case"webrtc/candidate":if(this.mode.indexOf("webrtc/tcp")>=0&&e.value.indexOf(" udp ")>0)return;s.addIceCandidate({candidate:e.value,sdpMid:"0"}).catch(t=>{console.warn(t)});break;case"webrtc/answer":s.setRemoteDescription({type:"answer",sdp:e.value}).catch(t=>{console.warn(t)});break;case"error":if(e.value.indexOf("webrtc/offer")<0)return;s.close()}},this.createOffer(s).then(e=>{this.send({type:"webrtc/offer",value:e.sdp})}),this.pcState=WebSocket.CONNECTING,this.pc=s}async createOffer(s){try{this.media.indexOf("microphone")>=0&&(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(i=>{s.addTransceiver(i,{direction:"sendonly"})})}catch(t){console.warn(t)}for(const t of["video","audio"])this.media.indexOf(t)>=0&&s.addTransceiver(t,{direction:"recvonly"});const e=await s.createOffer();return await s.setLocalDescription(e),e}onpcvideo(s){if(this.pc){let e=0,t=0;const i=s.srcObject;i.getVideoTracks().length>0&&(e+=544),i.getAudioTracks().length>0&&(e+=258),this.mseCodecs.indexOf("hvc1.")>=0&&(t+=560),this.mseCodecs.indexOf("avc1.")>=0&&(t+=528),this.mseCodecs.indexOf("mp4a.")>=0&&(t+=257),e>=t?(this.video.srcObject=i,this.play(),this.pcState=WebSocket.OPEN,this.wsState=WebSocket.CLOSED,this.ws&&(this.ws.close(),this.ws=null)):(this.pcState=WebSocket.CLOSED,this.pc&&(this.pc.close(),this.pc=null))}s.srcObject=null}onmjpeg(){this.ondata=s=>{this.video.controls=!1,this.video.poster=`data:image/jpeg;base64,${B.btoa(s)}`},this.send({type:"mjpeg"})}onhls(){this.onmessage.hls=s=>{if(s.type!=="hls")return;const e=`http${this.wsURL.substring(2,this.wsURL.indexOf("/ws"))}/hls/`,t=s.value.replace("hls/",e);this.video.src=`data:application/vnd.apple.mpegurl;base64,${btoa(t)}`,this.play()},this.send({type:"hls",value:this.codecs(s=>this.video.canPlayType(s))})}onmp4(){const s=document.createElement("canvas");let e;const t=document.createElement("video");t.autoplay=!0,t.playsInline=!0,t.muted=!0,t.addEventListener("loadeddata",()=>{e||(s.width=t.videoWidth,s.height=t.videoHeight,e=s.getContext("2d")),e.drawImage(t,0,0,s.width,s.height),this.video.controls=!1,this.video.poster=s.toDataURL("image/jpeg")}),this.ondata=i=>{t.src=`data:video/mp4;base64,${B.btoa(i)}`},this.send({type:"mp4",value:this.codecs(this.video.canPlayType)})}static btoa(s){const e=new Uint8Array(s),t=e.byteLength;let i="";for(let a=0;a<t;a++)i+=String.fromCodePoint(e[a]);return window.btoa(i)}}customElements.define("video-stream",B);const Ye=f.fabric.util.createClass(f.fabric.Image,{initialize:function(o){this.callSuper("initialize",o),this.firstRender=!0,this.readyCallback=o.readyCallback,this.videoStream=document.createElement("video-stream"),this.videoStream.visibilityCheck=!1,this.videoStream.oninit(),this.videoStream.src=o.url,this.videoStream.video.addEventListener("loadedmetadata",this.onVideoMetadata.bind(this)),o.autoplay&&this.video.play()},onVideoMetadata:function(){const o=this.videoStream.video;o.width=o.videoWidth,o.height=o.videoHeight,this.width=o.videoWidth,this.height=o.videoHeight,this.setElement(o),this.setCoords(),this.readyCallback&&this.readyCallback()},play:function(){this.video.play()},stop:function(){this.video.stop()}}),We=Ye;f.fabric.Object.prototype.objectCaching=!1;class Xe{constructor(s){b(this,"annotationSize",14);b(this,"colors",{object:"blue",hasdata:"green",queued:"yellow",selected:"red",selectedGroup:"orange",scaleBar:"grey",marking:"yellow",markingInvert:"cyan",polyline:"purple",reference:"magenta"});this.pending={},this.pendingComposites={},this.pendingImages={},this.pendingSources={},this.fabric=s.fabric,this.width=s.width,this.addObject=s.addObject,this.x_dir=s.flip_x?-1:1,this.lastMarkingStroke=null,this.markingDebounce=1e3,this.lastMarkingTime=0,this.getSelectedObjects=s.getSelectedObjects,this.lastLum=0,this.lumDebounce=2e3,this.lastLumTime=0}select(s){this.setStroke({object:s.object,stroke:s.deselect?this.getStrokeColor(s.object.object):this.colors.selected})}getStrokeColor(s){const e=this.fabric.getActiveObject();return e&&e.object.subsampleid===s.subsampleid?this.colors.selected:this.getSelectedObjects().indexOf(s.subsampleid)>-1?this.colors.selectedGroup:s.queued?this.colors.queued:s.datacollections?this.colors.hasdata:this.colors.object}setStroke(s){s.object.type==="group"?h.each(s.object.getObjects(),e=>{e.type==="text"?e.set({fill:s.stroke,stroke:s.stroke}):e.set({stroke:s.stroke})}):s.object.set({stroke:s.stroke})}scaleStrokeWidth(s){let e=Math.round(1/this.fabric.getZoom());e<1&&(e=1),s.type==="group"?h.each(s.getObjects(),t=>{t.type!=="text"&&t.set({strokeWidth:e})}):s.set({strokeWidth:e})}drawCursor(s){if(this.cursor){this.updateCursor(s);return}this.cursor=new f.fabric.Text("",{fill:this.colors.scaleBar,left:10,top:10,fontSize:11,fontFamily:"Poppins",backgroundColor:s&&s.text?"#333":"transparent"}),this.fabric.add(this.cursor),this.updateCursor(s)}updateCursor(s){const e=1/this.fabric.getZoom();this.fabric.bringToFront(this.cursor),this.cursor.scaleX=e,this.cursor.scaleY=e,this.cursor.set({top:e*(10-this.fabric.viewportTransform[5]),left:e*(10-this.fabric.viewportTransform[4])}),s&&this.cursor.set({text:s.text,backgroundColor:s&&s.text?"#333":"transparent"}),this.cursor.setCoords()}drawScaleBar(s){if(this.scalebar){this.updateScale(s);return}const e=50,t=0,i=0,a=new f.fabric.Line([t,i,t,i+e],{stroke:this.colors.scaleBar,strokeWidth:2,originY:"bottom"}),r=new f.fabric.Line([t+e,i+e,t,i+e],{stroke:this.colors.scaleBar,strokeWidth:2,originY:"bottom"}),c=new f.fabric.Text("50um",{fill:this.colors.scaleBar,left:t+10,top:i+e-20,fontSize:11,fontFamily:"Poppins"});this.scalebar=new f.fabric.Group([a,r,c]),this.fabric.add(this.scalebar),this.updateScale(s)}updateScale(s){const e=1/this.fabric.getZoom(),t=e*R.pixelSize,i=Z(t*50),a=i.scalar%parseInt(i.scalar,10),r=(i.scalar-a)/i.scalar;this.scalebar.getObjects()[1].scaleX=r,this.scalebar.getObjects()[0].scaleY=r,this.fabric.bringToFront(this.scalebar),this.scalebar.getObjects()[2].set({text:`${(i.scalar-a).toFixed(0)} ${i.prefix}m`}),this.scalebar.scaleX=e,this.scalebar.scaleY=e,this.scalebar.set({top:e*(s.height-70-this.fabric.viewportTransform[5]),left:e*(20-this.fabric.viewportTransform[4])}),this.scalebar.setCoords(),this.drawCursor()}selectionDefault(s,e=!1,t=!1){s.selectable=!0,s.lockScalingX=!t,s.lockScalingY=!t,s.hasRotatingPoint=!1,s.setControlsVisibility({mt:!1,mb:!1,ml:!1,mr:!1,bl:!1,br:!!t,tl:!1,tr:!1,mtr:!1}),s.lockMovementX=!e,s.lockMovementY=!e}drawROI(s,e,t){console.log("drawROI");const i=this.getStrokeColor(s),a=s.x+e.offsetx,r=s.y+e.offsety,c=s.x2-s.x,l=s.y2-s.y,p=new f.fabric.Rect({left:a,top:r,width:c,height:l,stroke:i,fill:null,strokeWidth:1,hasBorders:!1,hoverCursor:"pointer"}),u=new f.fabric.Text(`${t}`,{left:a+c,top:r+l,fontSize:this.annotationSize,fontFamily:"Poppins",fill:i}),m=new f.fabric.Group([p,u],{hasBorders:!1,hoverCursor:"pointer"});return this.selectionDefault(m,s.datacollections===0,s.datacollections===0),this.addObject({type:"rois",object:m}),this.updateROI(m,s,e),m}updateROI(s,e,t,i){let a=1/this.fabric.getZoom();a<1&&(a=1);const r=this.getStrokeColor(e),c=e.x2-e.x,l=e.y2-e.y,p=e.x+t.offsetx,u=e.y+t.offsety;s.getObjects()[0].set({stroke:r,left:-c/2,top:-l/2,width:c,height:l}),s.getObjects()[1].set({stroke:r,scaleX:a,scaleY:a,left:c/2,top:l/2}),s.set({left:p,top:u,width:c*s.scaleX,height:l*s.scaleY,scaleX:1,scaleY:1}),this.selectionDefault(s,e.datacollections===0&&i,e.datacollections===0&&i)}drawCrossText({x:s,y:e,annotationText:t,strokeColor:i}){const r=Math.round(10.5),c=new f.fabric.Line([0,-r,0,r],{stroke:i,strokeWidth:1,hasBorders:!1,originX:"center",originY:"center"}),l=new f.fabric.Line([-r,0,r,0],{stroke:i,strokeWidth:1,hasBorders:!1,originX:"center",originY:"center"}),p=new f.fabric.Text(`${t}`,{left:r,top:r,fontSize:this.annotationSize,fontFamily:"Poppins",fill:i});return new f.fabric.Group([c,l,p],{hasBorders:!1,hoverCursor:"pointer",left:s,top:e,originX:"center",originY:"center"})}updateCrossText({fobj:s,x:e,y:t,strokeColor:i}){let a=1/this.fabric.getZoom();a<1&&(a=1),s.set({left:e,top:t});const r=s.getObjects()[0];r.scaleY=a,r.stroke=i;const c=s.getObjects()[1];c.scaleX=a,c.stroke=i,s.getObjects()[2].set({stroke:i,left:r.left+r.width,top:r.top+r.height,scaleX:a,scaleY:a})}drawReference(s,e){const t=this.colors.reference,i=this.drawCrossText({x:s.posx,y:s.posy,annotationText:s.id,strokeColor:t});return this.selectionDefault(i,s.datacollections===0),this.addObject({type:"refs",object:i}),this.updateReference(i,s),i}updateReference(s,e){const t=this.colors.reference;this.updateCrossText({fobj:s,x:e.posx,y:e.posy,strokeColor:t})}drawPOI(s,e,t){const i=s.x+e.offsetx,a=s.y+e.offsety,r=this.getStrokeColor(s),c=this.drawCrossText({x:i,y:a,annotationText:t,strokeColor:r});return this.selectionDefault(c,s.datacollections===0),this.addObject({type:"pois",object:c}),this.updatePOI(c,s,e),c}updatePOI(s,e,t){const i=this.getStrokeColor(e);this.updateCrossText({fobj:s,x:e.x+t.offsetx,y:e.y+t.offsety,strokeColor:i})}drawLOI(s,e,t){const i=s.x+e.offsetx,a=s.y+e.offsety,r=s.x2+e.offsetx,c=s.y2+e.offsety,l=this.getStrokeColor(s),p=new f.fabric.Line([i,a,r,c],{stroke:l,strokeWidth:1,hasBorders:!1}),u=Math.atan2(c-a,r-i)*180/Math.PI,m=new f.fabric.Triangle({top:c,left:r,angle:u+90,width:10,height:10,stroke:l,fill:!1,originX:"center",originY:"center"}),v=new f.fabric.Text(`${t}`,{left:r,top:c,fontSize:this.annotationSize,fontFamily:"Poppins",fill:l}),w=new f.fabric.Group([p,m,v],{hasBorders:!1,hoverCursor:"pointer"});return this.selectionDefault(w,s.datacollections===0),this.addObject({type:"lois",object:w}),this.updateLOI(w,s,e),w}updateLOI(s,e,t,i){let a=1/this.fabric.getZoom();a<1&&(a=1),s.set({x1:e.x+t.offsetx,y1:e.y+t.offsety}),s.lockMovementX=i,s.lockMovementY=i;const r=this.getStrokeColor(e),c=s.getObjects()[0];c.scale=a,c.stroke=r,s.getObjects()[1].set({stroke:r,width:a*10,height:a*10}),s.getObjects()[2].set({stroke:r,scaleX:a,scaleY:a})}drawMarking(s){const e=this.toCanvasCoords(s.position),t=Math.round(80/2),i=this.colors.marking,a=new f.fabric.Line([0,-t,0,t],{stroke:i,strokeWidth:1,hasBorders:!1,originX:"center",originY:"center"}),r=new f.fabric.Line([-t,0,t,0],{stroke:i,strokeWidth:1,hasBorders:!1,originX:"center",originY:"center"}),c=new f.fabric.Ellipse({left:0,top:0,originX:"center",originY:"center",strokeWidth:1,stroke:this.colors.marking,fill:!1,rx:s.size[0]/2,ry:s.size[1]/2}),l=new f.fabric.Group([a,r,c],{hasBorders:!1,hoverCursor:"cursor",originX:"center",originY:"center",left:Math.round(e[0]),top:Math.round(e[1])});return this.addObject({type:"markings",object:l}),this.updateMarking(l,s),l}updateMarking(s,e){const t=this.toCanvasCoords(e.position);let i=1/this.fabric.getZoom();i<1&&(i=1);const a=s.getObjects()[0],r=s.getObjects()[1];a.scaleY=i,r.scaleX=i;const c=r.getScaledWidth(),l=a.getScaledHeight(),p=f.fabric.util.transformPoint({x:t[0],y:t[1]},this.fabric.viewportTransform),u=f.fabric.util.transformPoint({x:t[0]+c,y:t[1]+l},this.fabric.viewportTransform);if(Number.isNaN(u.x)||Number.isNaN(u.y))return;const m=Date.now();if(m-this.lastLumTime>this.lumDebounce){const O=(u.x-p.x)/3,T=this.fabric.contextContainer,P=window.devicePixelRatio,{data:E}=T.getImageData((p.x-O)*P,(p.y-O)*P,O*2*P,O*2*P),A=[];for(let z=0;z<E.length;z+=4)A.push(.299*E[z]+.587*E[z+1]+.114**E[z+2]*(E[z+3]/255));this.lastLum=A.length?h.sum(A)/A.length:0,this.lastLumTime=m}const v=150,w=this.lastLum>v?this.colors.markingInvert:this.colors.marking;w!==this.lastMarkingStroke&&m-this.lastMarkingTime>this.markingDebounce&&(a.set({stroke:w}),r.set({stroke:w}),s.getObjects()[2].set({stroke:w}),this.lastMarkingTime=m,this.lastMarkingStroke=w),this.scaleStrokeWidth(s),s.set({left:Math.round(t[0]),top:Math.round(t[1])}),s.setCoords()}refreshImage(s,e){const t=Date.now(),i=new Image;i.onload=()=>{e.setElement(i),this.refreshThread=setTimeout(this.refreshImage.bind(this,s,e),100)},i.src=`${s.url}?${t}`}toCanvasCoords(s){return[s[0],-s[1]]}drawSource(s,e){if(s.sourceid in this.pendingSources)return null;this.pendingSources[s.sourceid]=1;let t=s.url,i=s.scale;if(e){const a=h.find(s.additional_urls,{name:e});a&&(t=a.url,i=a.scale)}return new Promise(a=>{const r=this.toCanvasCoords(s.center);if(t.startsWith("ws")||t.startsWith("rtc")){const c=t.startsWith("ws")?_e:We,l=new c({url:t.replace("rtc:",""),readyCallback:()=>{l.set({left:r[0],top:r[1],hoverCursor:"default",originX:"center",originY:"center"}),l.setCoords();const p=this.toCanvasCoords(s.pixelsize);this.scaleObject(l,p,i),this.addObject({type:"sources",object:l}),a(l),delete this.pendingSources[s.sourceid]}})}else new f.fabric.Image.fromURL(t,c=>{c.set({left:r[0],top:r[1],hoverCursor:"default",width:c.width,height:c.height,originX:"center",originY:"center"});const l=this.toCanvasCoords(s.pixelsize);this.scaleObject(c,l,s.scale),this.addObject({type:"sources",object:c}),a(c),delete this.pendingSources[s.sourceid]},{crossOrigin:"Anonymous"})})}scaleObject(s,e,t=1){s.scaleToWidth(s.width*Math.abs(e[0]*t),!0),s.scaleY=Math.abs(e[1]*t),s.flipX=Math.sign(e[0])===-1,s.flipY=Math.sign(e[1])===-1}updateSource(s,e,t){const i=this.toCanvasCoords(e.center);s.set({left:i[0],top:i[1],opacity:e.hide?0:1});const a=h.find(e.additional_urls,{name:t}),r=a?a.scale:e.scale,c=this.toCanvasCoords(e.pixelsize);this.scaleObject(s,c,r),s.setCoords()}drawImage(s,e,t=1){const i=this.fabric.vptCoords,a=this.toCanvasCoords([s.offsetx,s.offsety]),r=this.toCanvasCoords([s.scalex,s.scaley]),c=e.offsetx+a[0]-Math.abs(s.width*r[0])/2,l=e.offsetx+a[0]+Math.abs(s.width*r[0])/2,p=e.offsety+a[1]-Math.abs(s.height*r[1])/2,u=e.offsety+a[1]+Math.abs(s.height*r[1])/2;if(l>i.tl.x&&c<i.br.x&&u>i.tl.y&&p<i.br.y)return s.sampleimageid in this.pendingImages?null:(this.pendingImages[s.sampleimageid]=1,new Promise((m,v)=>{const w=new W;w.onerror=()=>{v()},w.onload=()=>{const O=w.width/s.width,T=new f.fabric.Image(w,{left:e.offsetx+a[0],top:e.offsety+a[1],hoverCursor:"default",width:w.width,height:w.height,originX:"center",originY:"center"});this.scaleObject(T,r,1/O),T.loadedScale=O,this.addObject({type:"images",object:T}),delete this.pendingImages[s.sampleimageid],m(T)},w.load(`${R.baseUrl+s.url}?scale=${t}`)}))}updateImage(s,e,t){const i=this.toCanvasCoords([e.offsetx,e.offsety]);s.set({left:t.offsetx+i[0],top:t.offsety+i[1],opacity:e.hide?0:1});const a=this.toCanvasCoords([e.scalex,e.scaley]);this.scaleObject(s,a,1/s.loadedScale),s.setCoords()}calcPoint(s){const e=this.toCanvasCoords(s);return{x:e[0],y:e[1]}}drawPolyline(s,e=!1){const t=e?null:this.colors.polyline,i=h.map(s,r=>this.calcPoint(r)),a=new f.fabric.Polyline(i,{stroke:t,strokeWidth:1,fill:null,hoverCursor:"default",originX:e?"center":null,originY:e?"center":null});return this.addObject({type:"polyline",object:a}),this.updatePolyline(a,s),a}updatePolyline(s,e){const t=h.map(e,a=>this.calcPoint(a));s.set({points:t}),this.scaleStrokeWidth(s);const i=s._calcDimensions();s.set({width:i.width,height:i.height,left:i.left,top:i.top,pathOffset:{x:i.width/2+i.left,y:i.height/2+i.top},dirty:!0}),s.setCoords()}drawMap(s,e){return s.mapid in this.pending?null:(this.pending[s.mapid]=1,new Promise((t,i)=>{const a=new W;a.onerror=()=>{i()},a.onload=()=>{const r=new f.fabric.Image(a,{left:e.left,top:e.top,width:a.width,height:a.height,hoverCursor:"default"});r.scaleToWidth(e.width),r.scaleY=e.height/r.height,this.addObject({type:"maps",object:r}),delete this.pending[s.mapid],t(r),r.lastMap=s},a.load(R.baseUrl+s.url)}))}updateMap(s,e,t){let i=!1;if(h.each(["min","max","points","colourmap","opacity","scale"],a=>{e[a]!==s.lastMap[a]&&(i=!0)}),s.set({left:t.left,top:t.top}),i){const a=new W;a.onload=()=>{s.setElement(a,r=>{r.set({hoverCursor:"default",selectable:!0})}),s.lastMap=e},a.load(R.baseUrl+e.url)}}drawComposite(s,e){return s.compositeid in this.pendingComposites?null:(this.pendingComposites[s.compositeid]=1,new Promise((t,i)=>{const a=new W;a.onerror=()=>{i()},a.onload=()=>{const r=new f.fabric.Image(a,{left:e.left,top:e.top,width:a.width,height:a.height,hoverCursor:"default"});r.scaleToWidth(e.width),r.scaleY=e.height/r.height,r.compositeMap=s,this.addObject({type:"composite",object:r}),delete this.pendingComposites[s.compositeid],t(r)},a.load(R.baseUrl+s.url)}))}updateComposite(s,e,t){let i=!1;if(h.each(["ropacity","gopacity","bopacity","opacity"],a=>{e[a]!==s.compositeMap[a]&&(i=!0)}),s.set({left:t.left,top:t.top}),i){const a=new W;a.onload=()=>{s.setElement(a,r=>{r.set({hoverCursor:"default",selectable:!0})}),s.compositeMap=e},a.load(R.baseUrl+e.url)}}}var $;let Ue=($=class extends y.Component{constructor(s){super(s),this.modalRef=y.createRef()}componentDidUpdate(s){(this.props.pointer.point!==s.pointer.point||this.props.pointer.scanid!==s.pointer.scanid)&&(this.props.pointer.point!==void 0?(this.getSpectra(),this.modalRef.current.showModal()):this.props.actions.setMapPointer())}getSpectra(){this.props.actions.fetchScanSpectra({scanid:this.props.pointer.scanid,point:this.props.pointer.point}).catch(()=>{console.log("Couldnt load spectra")})}render(){const s=h.map(this.props.rois,i=>({type:"rect",xref:"x",yref:"paper",y0:0,y1:1,x0:i.start,x1:i.end,fillcolor:"#ccc",opacity:.5,line:{width:0}}));let e=0;const t=h.map(this.props.rois,i=>({xref:"x",yref:"paper",y:.8-e++*.06,x:i.start,text:`${i.element}-${i.edge}`,showarrow:!1}));return n.jsxs(ee,{id:"mca",ref:this.modalRef,showButton:!1,title:"MCA",children:[this.props.spectraFetching&&n.jsxs(ne,{variant:"info",children:[n.jsx("i",{className:"fa fa-spin fa-spinner me-1"}),"Fetching point ",this.props.pointer.point," from scan"," ",this.props.pointer.scanid]}),this.props.spectraError&&n.jsxs(ne,{variant:"warning",children:["Scan number ",this.props.pointer.scanid," is no longer available"]}),!this.props.spectraError&&this.props.spectraFetched&&!this.props.spectraFetching&&n.jsxs(V,{children:[n.jsxs(U,{children:["Point ",this.props.pointer.point+1,"/",this.props.spectra.npoints]}),n.jsx(U,{style:{height:"40vh"},children:n.jsx(I,{children:n.jsx(Me,{fetching:this.props.spectraFetching,selectable:!1,spectra:this.props.spectra,data:{scanid:null},layout:{shapes:s,annotations:t,xaxis:{title:"Energy (eV)"},yaxis:{title:"Counts"}}})})})]})]})}},b($,"defaultProps",{pointer:{},spectra:{},rois:{},spectraError:"",spectraFetched:!1,spectraFetching:!1}),b($,"propTypes",{pointer:x.shape({scanid:x.number,point:x.number}),spectra:x.shape({npoints:x.number}),rois:x.shape({}),actions:x.shape({setMapPointer:x.func.isRequired,fetchScanSpectra:x.func.isRequired}).isRequired,spectraError:x.string,spectraFetched:x.bool,spectraFetching:x.bool}),$);const Fe=(o,s)=>{const{xrf_map_rois:e}=s.providers.metadata,{spectra:t}=s.providers.scans;return{pointer:d.selector("mapPointer",o),spectra:t.selector("results",o),spectraError:t.selector("error",o),spectraFetched:t.selector("fetched",o),spectraFetching:t.selector("fetching",o),rois:e.selector("results",o)}},$e=(o,s)=>({actions:{fetchScanSpectra:e=>s.providers.scans.spectra.fetch(e),setMapPointer:e=>d.dispatch("SET_MAP_POINTER",e)}}),Qe=F({scans:ce,metadata:j})(Y(Fe,$e)(Ue));function Ve(o){const{actions:s,pointer:e={},valueFetched:t,valueError:i,value:a}=o;return y.useEffect(()=>{e.x!==void 0&&e.y!==void 0?s.fetchValue({mapid:e.mapid,x:e.x,y:e.y}).catch(()=>{console.log("Couldnt load value")}):s.setMapHover()},[e]),e.x===void 0||!t&&!i?null:n.jsxs("div",{className:"tooltip-inner",style:{position:"absolute",top:e.py+30,left:e.px+30,zIndex:1070},children:[i&&n.jsxs("span",{children:["x: ",a.x," y: ",a.y," p: ",e.point+1," | Could not fetch value"]}),!i&&t&&n.jsxs("div",{className:"value-modal",children:["x: ",a.x," y: ",a.y," p: ",e.point+1," | v:"," ",a.value.toFixed(2)]})]})}const He=(o,s)=>{const{xrf_maps:e,xrf_map_value:t}=s.providers.metadata;return{pointer:d.selector("mapHover",o),maps:e.selector("results",o),selection:d.selector("mapSelection",o),value:t.selector("results",o),valueError:t.selector("error",o),valueFetched:t.selector("fetched",o)}},Ze=(o,s)=>({actions:{fetchValue:e=>s.providers.metadata.xrf_map_value.fetch(e),setMapHover:e=>d.dispatch("SET_MAP_HOVER",e)}}),Be=F({metadata:j})(Y(He,Ze)(Ve));var Q;let qe=(Q=class extends Oe{constructor(e){super(e);b(this,"zindexes",{images:0,sources:50,maps:200,composite:300,polyline:500,rois:1e3,pois:2e3,lois:2500,markings:3e3,refs:2800});b(this,"getSelectedObjects",()=>this.props.selectedObjects||[]);b(this,"startPan",e=>{e.which===2&&(this.lastAction=this.props.currentAction,this.props.actions.toggleClampOrigin(!1),this.props.actions.selectAction("pan"),this.moouseIsDown=!0,this.lastPosX=e.clientX,this.lastPosY=e.clientY)});b(this,"stopPan",e=>{e.which===2&&(this.props.actions.selectAction(this.lastAction),this.moouseIsDown=!1)});b(this,"requestAnimFrame",()=>{this.destroyed||(this.fabric.requestRenderAll(),clearTimeout(this.refreshThread),this.refreshThread=setTimeout(()=>{this.requestAnimFrame()},66))});b(this,"onFocusLost",()=>{this.props.currentAction==="move"&&this.props.config.options.disable_move_blur&&this.props.actions.selectAction("pan")});b(this,"objectScaling",e=>{const t=e.target,i=t.width*t.scaleX,a=t.height*t.scaleY;let r=i,c=a;if(this.props.drawQuantize){const l=i%this.props.drawQuantize[0],p=a%this.props.drawQuantize[1];r=i-l+(l>this.props.drawQuantize[0]/2?this.props.drawQuantize[0]:0),c=a-p+(p>this.props.drawQuantize[1]/2?this.props.drawQuantize[1]:0)}t.set({width:r,height:c,scaleX:1,scaleY:1}),t.getObjects()[0].set({left:-r/2,top:-c/2,width:r,height:c}),t.getObjects()[1].set({left:r/2,top:c/2})});b(this,"objectScaled",e=>{const t=e.target,i=t.width*t.scaleX,a=t.height*t.scaleY;t.set({width:i,height:a,scaleX:1,scaleY:1}),t.getObjects()[0].set({left:-i/2,top:-a/2,width:i,height:a}),t.getObjects()[1].set({left:i/2,top:a/2});const r=t.left,c=t.top;this.props.actions.updateObject({subsampleid:t.subsampleid,x:r,y:c,x2:r+i,y2:c+a})});b(this,"objectMoved",e=>{const t=e.target,i=this.props.objects[t.subsampleid],a=this.fabric.getZoom(),r=this.getNearest(t.left,t.top,a),c=r?r.left:t.left,l=r?r.top:t.top;this.props.actions.updateObject({subsampleid:t.subsampleid,x:Math.round(c),y:Math.round(l),x2:Math.round(c+(i.x2-i.x)),y2:Math.round(l+(i.y2-i.y))})});b(this,"selectionCreated",e=>{e.target&&(this.draw.select({object:e.target}),this.inExternalUpdate||(this.props.actions.resetSelection(),this.props.actions.addSelection({subsampleid:e.target.subsampleid}),e.target.object.datacollections===0&&this.props.currentAction==="pan"&&this.props.actions.selectAction("")))});b(this,"selectionUpdated",e=>{e.deselected&&(this.draw.select({object:e.deselected[0],deselect:!0}),this.inExternalUpdate||this.props.actions.resetSelection()),e.selected&&(this.draw.select({object:e.selected[0]}),this.inExternalUpdate||(this.props.actions.resetSelection(),this.props.actions.addSelection({subsampleid:e.target.subsampleid})),e.selected[0].object.datacollections===0&&this.props.currentAction==="pan"&&this.props.actions.selectAction(""))});b(this,"selectionCleared",e=>{e.deselected&&(this.draw.select({object:e.deselected[0],deselect:!0}),this.inExternalUpdate||this.props.actions.resetSelection()),e.deselected&&e.deselected[0].object.datacollections===0&&this.props.currentAction===""&&this.props.actions.selectAction("pan")});b(this,"roiMouseDown",({e,target:t,pointer:i})=>{if(!this.props.cursor)return;const a=this.getTopMap(e,i);if(a){const{x:r,y:c}=this.getMapPoint(e,t,a);this.props.actions.setMapPointer({point:c*a.w+r,mapid:a.mapid,scanid:a.datacollectionnumber})}});b(this,"roiMouseMove",({e,target:t,pointer:i})=>{if(!this.props.cursor)return;const a=this.getTopMap(e,i);if(a){const{x:r,y:c}=this.getMapPoint(e,t,a);this.props.actions.setMapHover({x:r,y:c,point:c*a.w+r,mapid:a.mapid,px:i.x,py:i.y})}});b(this,"roiMouseOut",()=>{this.props.cursor&&this.props.actions.setMapHover()});b(this,"sourceMouseMove",e=>{this.props.cursor&&h.each(this.objs.sources,t=>{const i=t.width*t.scaleX,a=t.height*t.scaleY;if(e.x>=t.left-i/2&&e.x<=t.left+i/2&&e.y>=t.top-a/2&&e.y<=t.top+a/2){const c=Math.round((e.x-t.left)/t.scaleX*10)/10,l=Math.round((e.y-t.top)/t.scaleY*10)/10,p=Math.round((e.x-(t.left-i/2))/t.scaleX*10)/10,u=Math.round((e.y-(t.top-a/2))/t.scaleY*10)/10,m=f.fabric.util.transformPoint({x:e.x,y:e.y},this.fabric.viewportTransform),v=this.fabric.contextContainer,w=window.devicePixelRatio,{data:O}=v.getImageData(m.x,m.y,1*w,1*w),T=Math.round(.299*O[0]+.587*O[1]+.114**O[2]*(O[3]/255));this.props.actions.setSourceHover({x:p,y:u,xCentre:c,yCentre:l,lum:T})}})});b(this,"onMouseWheel",e=>{const t=400/this.fabric.getZoom(),i=e.e.deltaMode===1?e.e.deltaY*18:e.e.deltaY,a=this.clampZoom(this.fabric.getZoom()+-1*i/t);this.setZoom(a,e.e.offsetX,e.e.offsetY),e.e.preventDefault(),e.e.stopPropagation()});b(this,"onMouseDown",e=>{this.moouseIsDown=!0;const t=this.fabric.getZoom(),i=this.fabric.getPointer(e.e);if(this.origX=i.x,this.origY=i.y,this.props.currentAction==="move"){if(this.props.runningScan)return;this.props.actions.moveToCoords({x:parseInt(i.x,10),y:parseInt(i.y,10)}).catch(a=>{this.props.actions.addToast({type:"error",title:"Could Not Move",text:a.response&&a.response.data&&a.response.data.error||a.message})})}if(this.props.currentAction==="roi"||this.props.currentAction==="mosaic"){const a=this.getNearest(this.origX,this.origY,t);this.newRect=new f.fabric.Rect({left:a?a.left:this.origX,top:a?a.top:this.origY,width:0,height:0,stroke:"green",strokeDashArray:[5/t,5/t],fill:null}),this.newRect.selectable=!0,this.fabric.add(this.newRect)}if(this.props.currentAction==="loi"&&(this.newLine=new f.fabric.Line([this.origX,this.origY,i.x,i.y],{stroke:"green",strokeDashArray:[5/t,5/t]}),this.newLine.selectable=!0,this.fabric.add(this.newLine)),this.props.currentAction==="measure"&&(this.newLineText=new f.fabric.Text("0m",{left:this.origX,top:this.origY,fontSize:14,fontFamily:"Poppins",fill:"purple"}),this.newLine=new f.fabric.Line([this.origX,this.origY,this.origX,this.origY],{stroke:"purple"}),this.fabric.add(this.newLine),this.fabric.add(this.newLineText)),this.props.currentAction==="pan"&&(console.log("scrolling mouseDown"),this.lastPosX=e.e.clientX,this.lastPosY=e.e.clientY),this.props.currentAction==="beam"){const a=h.find(this.objs.sources,{origin:!0}),r=h.find(this.objs.markings,{origin:!0}),c=Math.round((i.x-a.left)/a.scaleX),l=Math.round((i.y-a.top)/a.scaleY),p=h.find(this.props.sources,{sourceid:a.sourceid});this.props.actions.updateMarking({markingid:r.markingid,x:parseInt(c,10),y:parseInt(l,10),scalelabel:p.scalelabel})}if(this.props.currentAction==="calib"){const a=h.find(this.objs.sources,{origin:!0}),r=h.find(this.props.sources,{origin:!0}),c=(i.x-a.left)/a.scaleX,l=(i.y-a.top)/a.scaleY;console.log(i,c,l),this.calibStep===0?(this.calib={offsetx:r.offsetx,offsety:r.offsety,pointerx:c,pointery:l},this.calibStep+=1):this.calibStep=0}});b(this,"onMouseMove",e=>{const t=this.fabric.getPointer(e.e),i=this.fabric.getZoom()<1?this.fabric.getZoom():1;if(this.sourceMouseMove(t),!!this.moouseIsDown){if(this.props.currentAction==="roi"){this.origX>t.x&&this.newRect.set({left:t.x}),this.origY>t.y&&this.newRect.set({top:t.y});const a=Math.abs(this.origX-t.x),r=Math.abs(this.origY-t.y);let c=a,l=r;if(this.props.drawQuantize){const p=a%this.props.drawQuantize[0],u=r%this.props.drawQuantize[1];c=a-p+(p>this.props.drawQuantize[0]/2?this.props.drawQuantize[0]:0),l=r-u+(u>this.props.drawQuantize[1]/2?this.props.drawQuantize[1]:0)}this.newRect.set({width:c,height:l}),this.draw.scaleStrokeWidth(this.newRect)}if(this.props.currentAction==="loi"){let a=t.x,r=t.y;if(this.props.clampLOI&&(a-this.newLine.x1<50/i?a=this.newLine.x1:r=this.newLine.y1),this.props.drawQuantize){const c=a-this.origX,l=r-this.origY,p=Math.sqrt(c*c+l*l),u=Math.atan2(l,c),m=p%this.props.drawQuantize[0],v=p-m+(m>this.props.drawQuantize[0]/2?this.props.drawQuantize[0]:0);a=Math.cos(u)*v+this.origX,r=Math.sin(u)*v+this.origY}this.newLine.set({x2:a,y2:r}),this.draw.scaleStrokeWidth(this.newLine)}if(this.props.currentAction==="mosaic"){this.origX>t.x&&this.newRect.set({left:Math.abs(t.x)}),this.origY>t.y&&this.newRect.set({top:Math.abs(t.y)});const a=Math.abs(this.origX-t.x),r=Math.abs(this.origY-t.y),c=h.find(this.objs.sources,{origin:!0}),l=a%c.getScaledWidth(),p=r%c.getScaledHeight(),u=a-l+(l>c.getScaledWidth()/2?c.getScaledWidth():0),m=r-p+(p>c.getScaledHeight()/2?c.getScaledHeight():0);this.newRect.set({width:u,height:m}),this.draw.scaleStrokeWidth(this.newRect)}if(this.props.currentAction==="measure"){this.newLine.set({x2:t.x,y2:t.y});const a=Math.sqrt((t.x-this.newLine.x1)**2+(t.y-this.newLine.y1)**2),r=Z(a*R.pixelSize);this.newLineText.set({left:this.origX+(t.x-this.origX)/2+20,top:this.origY+(t.y-this.origY)/2+20,fontFamily:"Poppins",text:`${r.scalar.toFixed(1)}${r.prefix}m`}),this.newLineText.scaleX=1/i,this.newLineText.scaleY=1/i,this.draw.scaleStrokeWidth(this.newLine)}this.props.currentAction==="pan"&&(this.setViewport({x:this.fabric.viewportTransform[4]+e.e.clientX-this.lastPosX,y:this.fabric.viewportTransform[5]+e.e.clientY-this.lastPosY}),this.clampViewPort(),this.lastPosX=e.e.clientX,this.lastPosY=e.e.clientY,this.draw.drawScaleBar({height:this.state.height}),this.debouncedPlotImages()),this.fabric.renderAll()}});b(this,"onMouseUp",e=>{this.moouseIsDown=!1;const t=h.find(this.props.sources,{origin:!0});if(this.props.currentAction==="roi"){let i=t.additional;if(t.hide){const a=this.findIntersectingImages(this.newRect);a.length?(i=a[a.length-1].positions,a.length>1&&this.props.actions.addToast({type:"warning",title:"Additional Positions",text:`Multiple images are visible, the most recent has been used.
-${JSON.stringify(i,null,2)}`})):this.props.actions.addToast({type:"warning",title:"Additional Positions",text:`The origin is hidden but no images were found. Additional positions have been taken from the origin.
-${JSON.stringify(i,null,2)}`})}if(this.newRect.width&&this.newRect.height){const a=parseInt(this.newRect.left,10),r=parseInt(this.newRect.top,10);this.props.actions.addObject({sampleid:this.props.currentSampleId,x:a,y:r,x2:a+parseInt(this.newRect.width,10),y2:r+parseInt(this.newRect.height,10),type:"roi",positions:i})}else if(this.props.drawQuantize){const a=parseInt(this.newRect.left-this.props.drawQuantize[0]/2,10),r=parseInt(this.newRect.top-this.props.drawQuantize[1]/2,10);this.props.actions.addObject({sampleid:this.props.currentSampleId,x:a,y:r,x2:a+parseInt(this.props.drawQuantize[0],10),y2:r+parseInt(this.props.drawQuantize[1],10),type:"roi",positions:t.additional})}this.fabric.remove(this.newRect),this.props.multiROI||this.props.actions.selectAction("")}if(this.props.currentAction==="loi"&&(this.newLine.x2&&this.newLine.y2&&this.props.actions.addObject({sampleid:this.props.currentSampleId,x:parseInt(this.newLine.x1,10),y:parseInt(this.newLine.y1,10),x2:parseInt(this.newLine.x2,10),y2:parseInt(this.newLine.y2,10),type:"loi",positions:t.additional}),this.fabric.remove(this.newLine),this.props.actions.selectAction("")),this.props.currentAction==="mosaic"&&this.mosaicRef.current.showModal(),this.props.currentAction==="poi"){const i=this.fabric.getPointer(e.e);this.props.actions.addObject({sampleid:this.props.currentSampleId,x:parseInt(i.x,10),y:parseInt(i.y,10),type:"poi",positions:t.additional})}if(this.props.currentAction==="reference"){const i=this.fabric.getPointer(e.e);this.props.addSampleActionPosition({x:parseInt(i.x,10),y:parseInt(i.y,10)}),this.props.actions.selectAction("")}this.props.currentAction==="measure"&&(this.measureTimeout=setTimeout(()=>{this.fabric.remove(this.newLine),this.fabric.remove(this.newLineText)},3e3))});b(this,"cancelMosaic",()=>{this.fabric.remove(this.newRect)});b(this,"startMosaic",()=>{const e=h.find(this.objs.sources,{origin:!0});this.newRect.width&&this.newRect.height&&(this.props.actions.mosaic({x1:parseInt(this.newRect.left+e.getScaledWidth()/2,10),y1:parseInt(this.newRect.top+e.getScaledHeight()/2,10),x2:parseInt(this.newRect.left+this.newRect.width-e.getScaledWidth()/2,10),y2:parseInt(this.newRect.top+this.newRect.height-e.getScaledHeight()/2,10),steps_x:this.newRect.width/e.getScaledWidth(),steps_y:this.newRect.height/e.getScaledHeight(),sampleid:this.props.currentSampleId}),this.fabric.remove(this.newRect),this.mosaicRef.current.close())});this.props.actions.setZoom=h.debounce(this.props.actions.setZoom,50),this.debouncedPlotImages=h.debounce(this.plotImages,50),this.props.actions.setViewport=h.debounce(this.props.actions.setViewport,50),this.mcaModal=y.createRef(),window.addEventListener("blur",this.onFocusLost)}render(){return n.jsxs(n.Fragment,{children:[n.jsx(ee,{id:"mosaic",ref:this.mosaicRef,showButton:!1,title:"Start Mosaic",onClose:this.cancelMosaic,buttons:n.jsx(D,{onClick:this.startMosaic,children:"Start"}),children:n.jsx("p",{children:"Are you sure you want to start this mosaic?"})}),n.jsx(Be,{}),n.jsx(Qe,{providers:{scans:{spectra:{namespace:"mcamodal"}}}}),super.render()]})}addObject(e){this.objs[e.type].push(e.object)}initFabric(){this.mosaicRef=y.createRef(),this.inExternalUpdate=!1,this.objs={sources:[],images:[],maps:[],composite:[],rois:[],pois:[],lois:[],markings:[],polyline:[],refs:[]},super.initFabric();const e=this.canvasRef.current.getContext("2d");e.imageSmoothingEnabled=!1,this.draw=new Xe({fabric:this.fabric,width:this.state.width,addObject:this.addObject.bind(this),flip_x:this.props.config.options.flip_x,getSelectedObjects:this.getSelectedObjects}),this.fabric.selection=!1,this.fabric.setZoom(.2),this.containerRef.current.addEventListener("mousedown",this.startPan),this.containerRef.current.addEventListener("mouseup",this.stopPan),this.fabric.on("mouse:wheel",this.onMouseWheel),this.fabric.on("mouse:down",this.onMouseDown),this.fabric.on("mouse:move",this.onMouseMove),this.fabric.on("mouse:up",this.onMouseUp),this.fabric.on("object:moved",this.objectMoved),this.fabric.on("object:scaled",this.objectScaled),this.fabric.on("object:scaling",this.objectScaling),this.fabric.on("selection:created",this.selectionCreated),this.fabric.on("selection:updated",this.selectionUpdated),this.fabric.on("selection:cleared",this.selectionCleared),this.props.actions.fetchSources().then(()=>{this.plotSources(),this.props.actions.fetchComponents()}),this.calibStep=0,this.markingInterval=setInterval(()=>{this.plotMarkings()},500),this.roiMouseMove=h.debounce(this.roiMouseMove.bind(this),200),this.roiMouseOut=h.debounce(this.roiMouseOut.bind(this),500),this.sourceMouseMove=h.debounce(this.sourceMouseMove.bind(this),10),this.requestAnimFrame()}componentWillUnmount(){this.containerRef.current.removeEventListener("mousedown",this.startPan),this.containerRef.current.removeEventListener("mouseup",this.stopPan),clearTimeout(this.refreshThread),clearTimeout(this.markingInterval),clearTimeout(this.measureTimeout),this.destroyed=!0,this.fabric.dispose(),window.removeEventListener("blur",this.onFocusLost)}saveCanvas(){if(this.props.config.upload_canvas)this.props.actions.saveCanvasRemote({sampleid:this.props.currentSampleId,image:this.fabric.toDataURL()}).then(()=>{this.props.actions.clearSaveCanvas()}).catch(()=>{this.props.actions.clearSaveCanvas()});else{const e=document.createElement("a");e.href=this.fabric.toDataURL(),e.download=`${this.props.currentSample.name}_canvas.png`,e.click(),this.props.actions.clearSaveCanvas()}}selectSample(){console.log("select sample",this.props.currentSampleId),this.props.currentSampleId&&this.props.actions.fetchSample({sampleid:this.props.currentSampleId})}updateSelectedObject(){this.inExternalUpdate=!0,this.plotObjects();const e=this.props.selectedObjects&&this.props.selectedObjects.slice(-1)[0];h.each(["rois","pois","lois"],t=>{h.each(this.objs[t],i=>{i.subsampleid===e&&(this.fabric.setActiveObject(i),this.props.centreOnClick&&this.zoomToObject(i))})}),this.inExternalUpdate=!1,!this.destroyed&&this.fabric.renderAll()}zoomToObject(e){let t=this.state.width/e.getScaledWidth()*.25;t>this.props.maxZoom&&(t=this.props.maxZoom),this.setZoom(t),this.setViewport({x:-(e.left+e.getScaledWidth()/2)*this.fabric.getZoom()+this.state.width/2,y:-(e.top+e.getScaledHeight()/2)*this.fabric.getZoom()+this.state.height/2}),this.draw.drawScaleBar({height:this.state.height})}getMapPoint(e,t,i){const a=t.getLocalPointer(e);return{x:Math.floor(i.w*a.x/t.width),y:Math.floor(i.h*a.y/t.height)}}getTopMap(e,t){const a=this.fabric.getObjects().filter(r=>this.fabric.containsPoint(e,r,t)&&this.objs.maps.indexOf(r)>-1&&!this.fabric.isTargetTransparent(r,t.x,t.y)).map(r=>r.mapid);return a.length?this.props.maps[a[a.length-1]]:null}plotObjects(){if(!this.props.currentSample){console.log("waiting for current sample");return}h.each(this.props.objects,(e,t)=>{let i;if(e.type==="roi"){const a=h.find(this.objs.rois,{subsampleid:e.subsampleid});if(a){this.draw.updateROI(a,e,this.props.currentSample,this.props.currentAction===""),this.draw.scaleStrokeWidth(a);return}i=this.draw.drawROI(e,this.props.currentSample,t),i.on("mousedown",this.roiMouseDown),i.on("mousemove",this.roiMouseMove),i.on("mouseout",this.roiMouseOut),this.fabric.add(i)}else if(e.type==="loi"){const a=h.find(this.objs.lois,{subsampleid:e.subsampleid});if(a){this.draw.updateLOI(a,e,this.props.currentSample,this.props.currentAction=="roi"||this.props.currentAction=="loi"),this.draw.scaleStrokeWidth(a);return}i=this.draw.drawLOI(e,this.props.currentSample,t),this.fabric.add(i)}else{const a=h.find(this.objs.pois,{subsampleid:e.subsampleid});if(a){this.draw.updatePOI(a,e,this.props.currentSample),this.draw.scaleStrokeWidth(a);return}i=this.draw.drawPOI(e,this.props.currentSample,t),this.fabric.add(i)}i.object=e,i.subsampleid=e.subsampleid,this.draw.scaleStrokeWidth(i),this.updateSelectedObject()}),h.each(["pois","rois","lois"],e=>{const t=[];h.each(this.objs[e],i=>{i.subsampleid in this.props.objects||(console.log("remove",i),t.push(i))}),h.each(t,i=>{this.fabric.remove(i),h.remove(this.objs[e],i)})}),this.zindex(),this.plotMaps()}plotReferences(){h.each(this.props.sampleActionPositions,e=>{const t=h.find(this.objs.refs,{sampleactionpositionid:e.sampleactionpositionid});if(t){this.draw.updateReference(t,e);return}const i=this.draw.drawReference(e);this.fabric.add(i),i.sampleactionpositionid=e.sampleactionpositionid}),this.zindex()}loadMap(e){const t=e<this.mapsToLoad.length?this.mapsToLoad[e]:null;if(t){const[i,a]=t,r=this.draw.drawMap(i,a,this.props.currentSample);r&&r.then(c=>{c.mapid=i.mapid,c.subsampleid=i.subsampleid,this.fabric.add(c),this.mapLoadStatus(e),this.loadMap(e+1)}).catch(c=>{console.log("could not load map",i.mapid,c),this.loadMap(e+1)})}}clearMapStatus(e){this.props.actions.setMessage({type:"mapProgress",message:{text:"",timeout:e||2e3}})}mapLoadStatus(e){if(this.mapsToLoad.length===0){this.clearMapStatus(100);return}e===this.mapsToLoad.length-1?(this.props.actions.setMessage({type:"mapProgress",message:{text:"Maps loaded"}}),this.clearMapStatus(),this.zindex(),this.plotComposites()):this.props.actions.setMessage({type:"mapProgress",message:{text:`Loading maps: ${e}/${this.mapsToLoad.length-1}`}})}plotMaps(){if(this.remObjs("maps","mapid","maps"),!h.values(this.props.objects).length){console.log("waiting for objects");return}this.mapsToLoad=[];const e={};h.eachRight(this.props.maps,t=>{const i=h.find(this.objs.rois,{subsampleid:t.subsampleid});if(!i){console.log("cant find object for map");return}const a=h.find(this.objs.maps,{mapid:t.mapid});if(t.opacity===0){a&&(h.remove(this.objs.maps,a),this.fabric.remove(a),e[a.subsampleid]===a.mapid&&delete e[a.subsampleid]);return}const r=e[t.subsampleid];if(r&&r!==t.mapid){a&&(h.remove(this.objs.maps,a),this.fabric.remove(a));return}if(e[t.subsampleid]=t.mapid,a){this.draw.updateMap(a,t,i,this.props.currentSample);return}this.mapsToLoad.push([t,i])}),this.mapsToLoad.length===0?(this.zindex(),this.plotComposites()):this.loadMap(0)}plotComposites(){if(this.remObjs("composite","compositeid","composites"),!h.values(this.props.maps).length){console.log("waiting for maps");return}const e=[];return h.each(this.props.composites,t=>{const i=h.find(this.objs.rois,{subsampleid:t.subsampleid});if(!i){console.log("cant find object for composite");return}const a=h.find(this.objs.composite,{compositeid:t.compositeid});if(a){this.draw.updateComposite(a,t,i,this.props.maps);return}const r=this.draw.drawComposite(t,i,this.props.maps);r&&e.push(r.then(c=>{c.compositeid=t.compositeid,this.fabric.add(c)}).catch(c=>{console.log("could not load composite map",t.compositeid,c)}))}),Promise.all(e).then(()=>this.zindex())}plotSources({updatedUrl:e}={}){const t=[];return h.each(this.props.sources,i=>{const a=h.find(this.objs.sources,{sourceid:i.sourceid});if(a){if((i.url.startsWith("ws")&&i.hide||e)&&(a.dispose(),delete this.obj,this.objs.sources.splice(this.objs.sources.indexOf(a),1),!e))return null;if(!e)return this.draw.updateSource(a,i,this.props.sourceUrl),null}if(i.url.startsWith("ws")&&i.hide)return null;const r=this.draw.drawSource(i,this.props.sourceUrl);r&&t.push(r.then(c=>{c.sourceid=i.sourceid,c.origin=i.origin,this.fabric.add(c)}))}),Promise.all(t).then(()=>{this.props.clampOrigin&&(this.fabric.setZoom(this.getMinZoom()),this.clampViewPort(),this.draw.drawScaleBar({height:this.state.height})),this.plotMarkings(),this.plotObjects(),this.plotReferences(),this.plotImages(),this.plotPolylines(),this.props.clampOrigin&&this.props.clampTarget&&this.clampViewPort()})}plotPolylines(){this.props.config.options.polylines&&(h.each(this.props.sources,e=>{h.each(e.polylines,(p,u)=>{const m=h.find(this.objs.polyline,{key:u});if(m){this.draw.updatePolyline(m,p);return}const v=this.draw.drawPolyline(p);v.key=u,this.fabric.add(v),this.draw.updatePolyline(v,p)});const t=e.markings.beam,i=1024*4*Math.abs(e.pixelsize[0]),a=768*4*Math.abs(e.pixelsize[1]),r=[[t.position[0],t.position[1]],[t.position[0]+i,t.position[1]],[t.position[0]+i,t.position[1]-a],[t.position[0],t.position[1]-a],[t.position[0],t.position[1]]],c=h.find(this.objs.polyline,{key:"fov"});if(c){this.draw.updatePolyline(c,r);return}const l=this.draw.drawPolyline(r,!0);l.key="fov",this.fabric.add(l),this.draw.updatePolyline(l,r)}),this.zindex())}loadImage(e){const t=h.values(this.props.images),i=e<t.length?t[e]:null;if(i){const a=i.width*Math.abs(i.scalex)*this.fabric.getZoom(),r=2**Math.round(Math.log2(Math.min(a/i.width,1))),c=Math.floor(i.width*r)/i.width,l=h.find(this.objs.images,{sampleimageid:i.sampleimageid});if(l){if(!l.isOnScreen()){console.log("removing",l.sampleimageid),this.fabric.remove(l),h.remove(this.objs.images,l),this.loadImage(e+1);return}if(l.loadedScale!==c&&l.isOnScreen())this.fabric.remove(l),h.remove(this.objs.images,l);else{this.draw.updateImage(l,i,this.props.currentSample),this.loadImage(e+1);return}}const p=this.draw.drawImage(i,this.props.currentSample,c);p?p.then(u=>{u.image=i,u.sampleimageid=i.sampleimageid,this.fabric.add(u),this.imageLoadStatus(e),this.loadImage(e+1)}).catch(u=>{console.log("Error loading image",u)}):this.loadImage(e+1)}else this.remObjs("images","sampleimageid","images"),this.zindex()}clearStatus(e){this.props.actions.setMessage({type:"imageProgress",message:{text:"",timeout:e||2e3}})}imageLoadStatus(e){const t=h.values(this.props.images);if(t.length===0){this.clearStatus(100);return}e===t.length-1?(this.props.actions.setMessage({type:"imageProgress",message:{text:"Sample images loaded"}}),this.clearStatus(),this.remObjs("images","sampleimageid","images"),this.zindex()):this.props.actions.setMessage({type:"imageProgress",message:{text:`Loading sample images: ${e}/${t.length-1}`}})}plotImages(){this.loadImage(0)}remObjs(e,t,i){const a=[];h.each(this.objs[e],r=>{h.find(this.props[i],{[t]:r[t]})||a.push(r)}),h.each(a,r=>{h.remove(this.objs[e],r),this.fabric.remove(r)})}plotMarkings(){h.each(this.props.sources,e=>{h.each(e.markings,(t,i)=>{const a=h.find(this.objs.markings,{key:i});if(a){this.draw.updateMarking(a,t);return}const r=this.draw.drawMarking(t);this.fabric.add(r),r.key=i,r.origin=t.origin})}),this.zindex()}zindex(){h.each(h.values(this.zindexes).sort((e,t)=>e-t),e=>{const t=h.invert(this.zindexes)[e];h.each(this.objs[t],i=>{i.bringToFront()})}),h.each(["newRect","newLine","newLineText"],e=>{this[e]&&this[e].canvas&&this[e].bringToFront()}),this.draw.drawScaleBar({height:this.state.height})}componentDidMount(){super.componentDidMount(),this.setCurrentSampleMessage(),this.props.currentSampleId&&this.selectSample()}componentDidUpdate(e){super.componentDidUpdate(e),e.currentSampleId!==this.props.currentSampleId&&(this.selectSample(),this.setCurrentSampleMessage()),e.objects!==this.props.objects&&this.plotObjects(),e.maps!==this.props.maps&&this.plotMaps(),e.composites!==this.props.composites&&this.plotComposites(),e.images!==this.props.images&&this.plotImages(),e.sources!==this.props.sources&&this.plotSources(),e.sourceUrl!==this.props.sourceUrl&&this.plotSources({updatedUrl:!0}),e.sampleActionPositions!==this.props.sampleActionPositions&&this.plotReferences(),e.selectedObjects!==this.props.selectedObjects&&this.updateSelectedObject(e),(e.clampOrigin!==this.props.clampOrigin&&this.props.clampOrigin||e.clampTarget!==this.props.clampTarget&&this.props.clampOrigin)&&this.setZoom(this.getMinZoom()),e.saveCanvas!==this.props.saveCanvas&&this.props.saveCanvas&&this.saveCanvas(),e.sourceHover!==this.props.sourceHover&&this.draw.drawCursor({text:this.props.sourceHover.x!==void 0?`x: ${this.props.sourceHover.x} y: ${this.props.sourceHover.y} lum: ${this.props.sourceHover.lum} | cx: ${this.props.sourceHover.xCentre} cy: ${this.props.sourceHover.yCentre}`:""}),e.currentAction!==this.props.currentAction&&this.plotObjects()}setCurrentSampleMessage(){this.props.actions.setMessage({type:"currentSample",message:{text:this.props.currentSampleId?"":"No sample selected. Please create one from the samples sidebar",timeout:0}})}dosetZoom(e,t=null,i=null){t&&i?(this.fabric.zoomToPoint({x:t,y:i},e),this.props.actions.setViewport({x:this.fabric.viewportTransform[4],y:this.fabric.viewportTransform[5]})):this.fabric.setZoom(e),this.clampViewPort(),h.each(this.objs,(a,r)=>{h.each(a,c=>{c.setCoords(),r==="polyline"&&this.draw.scaleStrokeWidth(c)})}),this.newRect&&this.draw.scaleStrokeWidth(this.newRect),this.plotMarkings(),this.plotObjects(),this.plotReferences(),this.debouncedPlotImages(),this.plotPolylines(),this.draw.drawScaleBar({height:this.state.height})}setZoom(e,t=null,i=null){this.dosetZoom(e,t,i),this.props.actions.setZoom(e)}doSetViewport(e){this.fabric.viewportTransform[4]=e.x,this.fabric.viewportTransform[5]=e.y}setViewport(e){this.doSetViewport(e),this.props.actions.setViewport(e)}clampViewPort(){const e=this.getClampTarget();if(e&&this.props.clampOrigin){const t=this.fabric.getZoom(),i=e.getScaledWidth()*t,a=e.getScaledHeight()*t,r=e.left*t,c=e.top*t,{minX:l,minY:p,maxX:u,maxY:m}=this.getClampTargetMinMax(r,c,i,a);this.fabric.viewportTransform[4]<u&&(this.fabric.viewportTransform[4]=u),this.fabric.viewportTransform[4]>l&&(this.fabric.viewportTransform[4]=l),this.fabric.viewportTransform[5]<m&&(this.fabric.viewportTransform[5]=m),this.fabric.viewportTransform[5]>p&&(this.fabric.viewportTransform[5]=p)}}clampZoom(e){return Math.min(Math.max(e,this.getMinZoom()),this.props.maxZoom)}getClampTarget(){if(this.props.clampTarget)return h.find(this.objs.polyline,{key:this.props.clampTarget});const e=h.find(this.objs.sources,{origin:!0});return e||h.find(this.objs.polyline,{key:"fov"})}getClampTargetMinMax(e,t,i,a){const r=this.props.clampTarget===""?i/2:0,c=this.props.clampTarget===""?a/2:0,l=-(i+e-r-this.state.width),p=-(a+t-c-this.state.height),u=-e+r,m=-t+c;return{minX:u,minY:m,maxX:l,maxY:p}}getMinZoom(){const e=this.getClampTarget();if(e&&this.props.clampOrigin){const t=e.getScaledWidth()-e.strokeWidth,i=e.getScaledHeight()-e.strokeWidth,a=this.state.width/t,r=this.state.height/i;return a<r?this.state.width/t:this.state.height/i}return this.props.minZoom}getNearest(e,t,i){let a=null;return this.props.drawSnap&&h.each(this.objs.rois,r=>{const c={tr:{left:r.left+r.width,top:r.top},bl:{left:r.left,top:r.top+r.height}};h.each(c,l=>{Math.sqrt((e-l.left)**2+(t-l.top)**2)<30/i&&(a={left:l.left,top:l.top})})}),a}findIntersectingImages(e){const t=h.filter(h.filter(this.objs.images,i=>i.intersectsWithObject(e)),i=>!this.props.images[i.sampleimageid].hide);return h.map(t,i=>this.props.images[i.sampleimageid])}getMarkOffset(){const e=h.find(this.objs.markings,{origin:!0}),t=h.find(this.objs.sources,{origin:!0});return t&&e?{x:e.left-t.left,y:e.top-t.top}:{x:0,y:0}}},b(Q,"defaultProps",{maxZoom:8,minZoom:2e-5}),b(Q,"propTypes",{currentSampleId:x.number,currentAction:x.string,objects:x.objectOf(x.shape({subsampleid:x.number.isRequired,x:x.number.isRequired,y:x.number.isRequired}))}),Q);const Ge=(o,s)=>{const{samples:e}=s.providers.metadata;return{runningScan:ce.selector("runningScanid",o),samples:e.selector("results",o),images:s.providers.metadata.images.selector("results",o),objects:s.providers.metadata.subsamples.selector("results",o),maps:s.providers.metadata.xrf_maps.selector("results",o),composites:s.providers.metadata.xrf_composites.selector("results",o),sources:s.providers.twod.sources.selector("results",o),currentAction:d.selector("currentAction",o),currentSampleId:j.selector("currentSample",o),currentSample:e.selector("results",o)[j.selector("currentSample",o)],selectedObjects:j.selector("selectedSubSamples",o),clampOrigin:d.selector("clampOrigin",o),clampTarget:d.selector("clampTarget",o),sourceUrl:d.selector("sourceUrl",o),centreOnClick:d.selector("centreOnClick",o),drawQuantize:d.selector("drawQuantize",o),drawSnap:d.selector("drawSnap",o),multiROI:d.selector("multiROI",o),clampLOI:d.selector("clampLOI",o),cursor:d.selector("cursor",o),config:q.selector("config",o,"imageviewer"),zoom:d.selector("zoom",o),viewport:d.selector("viewport",o),saveCanvas:d.selector("saveCanvas",o),sourceHover:d.selector("sourceHover",o)}},Je=(o,s)=>{const{subsamples:e}=s.providers.metadata;return{actions:{selectAction:t=>d.dispatch("SELECT_ACTION",t),addObject:t=>e.add(t),updateObject:t=>e.update(t),addSelection:t=>j.dispatch("SELECT_SUB_SAMPLE",t),removeSelection:t=>j.dispatch("UNSELECT_SUB_SAMPLE",t),resetSelection:()=>j.dispatch("RESET_SUB_SAMPLE_SELECTION"),fetchSources:()=>s.providers.twod.sources.fetch(),selectSample:t=>j.dispatch("SELECT_SAMPLE",t),fetchComponents:()=>s.providers.metadata.components.fetch(),fetchSamples:()=>s.providers.metadata.samples.fetch(),fetchSample:(t,i)=>{const a=[];return a.push(s.providers.metadata.xrf_maps.fetch()),a.push(s.providers.metadata.xrf_composites.fetch()),a.push(s.providers.metadata.xrf_map_rois.fetch()),a.push(s.providers.metadata.images.fetch()),a.push(e.fetch()),Promise.all(a)},moveToCoords:t=>d.dispatch("MOVE_TO_COORDS",t),updateMarking:t=>s.providers.twod.markings.update(t),setZoom:t=>d.dispatch("SET_ZOOM",t),setViewport:t=>d.dispatch("SET_VIEWPORT",t),mosaic:t=>d.dispatch("MOSAIC",t),setMapPointer:t=>d.dispatch("SET_MAP_POINTER",t),setMapHover:t=>d.dispatch("SET_MAP_HOVER",t),setSourceHover:t=>d.dispatch("SET_SOURCE_HOVER",t),setMessage:t=>d.dispatch("SET_MESSAGE",t),clearSaveCanvas:()=>d.dispatch("CLEAR_SAVE_CANVAS"),saveCanvasRemote:t=>d.dispatch("SAVE_CANVAS_REMOTE",t),addToast:t=>q.dispatch("ADD_TOAST",t),toggleClampOrigin:t=>{d.dispatch("CLAMP_ORIGIN",t)}}}},Ke=le(F({metadata:j,twod:d})(Y(Ge,Je)(qe)));class te extends y.Component{constructor(e){super(te.getDefaultedProps(e));b(this,"timeout1",null);b(this,"timeout2",null);this.state={children:null,emptyChildren:!1,class:null}}static getDefaultedProps(e){const{timeout:t=3e3,transition:i=1e3,children:a}=e;return{timeout:t,transition:i,children:a}}static getDerivedStateFromProps(e){return e.children?{children:e.children,emptyChildren:!1}:e.children?null:{emptyChildren:!0}}componentDidUpdate(e,t){t.emptyChildren!==this.state.emptyChildren&&this.state.emptyChildren&&(this.timeout1=setTimeout(()=>{this.setState({class:"transistion-children-out"}),this.timeout2=setTimeout(()=>{this.setState({children:null,emptyChildren:!1,class:null})},this.props.transition)},this.props.timeout))}componentWillUnmount(){this.timeout1&&clearTimeout(this.timeout1),this.timeout2&&clearTimeout(this.timeout2)}render(){return n.jsx("div",{className:xe("transistion-children",this.state.class),children:this.state.children})}}function he(o){const s=h.map(o.messages,(e,t)=>n.jsx(te,{timeout:e.timeout,children:e.text},t));return n.jsx("div",{className:"overlay-messages",children:s})}he.propTypes={messages:x.objectOf(x.shape({text:x.node.isRequired,timeout:x.number})).isRequired};let et=class extends y.Component{render(){return n.jsx(ve,{children:n.jsxs("div",{className:"h-100-container twod",children:[n.jsx(Ne,{}),n.jsx(Ke,{className:"overlay",providers:this.props.providers}),n.jsx(he,{messages:this.props.messages})]})})}};function tt(o){return{messages:d.selector("messages",o)}}function st(o){return{actions:{}}}const it=Y(tt,st)(et);function bt(o){const{providers:s,yamlNode:e,...t}=o;return Se(e,t),n.jsx(it,{providers:s})}export{bt as default};