lost-sia 2.0.1-alpha1 → 2.0.1-alpha11

package/README.md

@@ -0,0 +1,4 @@
+# SIA - Single Image Annotation
+
+A react library for generating annotations on images.  
+Supported annotation types: Point, Line, Bounding Box, Polygon

package/dist/AnnoExampleViewer.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as i}from"react/jsx-runtime";import c from"./Prompt.js";import"react";import{Card as t,Image as d}from"semantic-ui-react";const s=e=>{const m=l=>{l.stopPropagation(),e.onRequestExample&&e.onRequestExample()},o=()=>{if(!e.lbl||!e.exampleImg)return null;const l=i("div",{children:[e.lbl.description,n("h4",{children:"Comment:"}),e.exampleImg.anno?e.exampleImg.anno.comment:"no comment"]});return n("div",{children:i(t,{children:[n(d,{onClick:a=>m(a),src:e.exampleImg.img,wrapped:!0,ui:!1}),i(t.Content,{children:[n(t.Header,{children:e.lbl.label}),n(t.Description,{children:l})]})]})})},r=()=>{e.onClose&&e.onClose()};return n(c,{onClick:()=>{r()},active:e.active,content:o()})};export{s as default};

package/dist/AnnoLabelInput.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import i,{Component as p}from"react";import l from"./LabelInput.js";import{allowedToLabel as n}from"./utils/constraints.js";import{CHANGED as r,NEW as o}from"./types/annoStatus.js";class c extends p{constructor(s){super(s),this.state={top:400,left:100,label:void 0,visibility:"hidden",possibleLabels:[]},this.inputGroupRef=i.createRef()}componentWillMount(){this.setPosition()}componentDidUpdate(s){this.props.visible&&this.setPosition()}setPosition(){if(this.props.mousePos){const s=this.props.mousePos.y+this.props.svg.top-10,t=this.props.mousePos.x+this.props.svg.left-10;(this.state.top!==s||this.state.left!==t)&&this.setState({top:s,left:t})}}onClose(){this.props.onClose&&this.props.onClose()}annoLabelUpdate(s){this.props.onLabelUpdate&&this.props.onLabelUpdate(s)}updateAnnoLabel(s){n(this.props.allowedActions,this.props.selectedAnno)&&this.annoLabelUpdate({...this.props.selectedAnno,labelIds:s,status:this.props.selectedAnno.status!==o?r:o})}render(){return this.props.visible?e("div",{ref:this.inputGroupRef,style:{position:"fixed",top:this.state.top,left:this.state.left},children:e(l,{svg:this.props.svg,onClose:()=>this.onClose(),initLabelIds:this.props.selectedAnno.labelIds,relatedId:this.props.selectedAnno.id,visible:this.props.visible,onLabelUpdate:s=>this.updateAnnoLabel(s),possibleLabelsProp:this.props.possibleLabels,multilabels:this.props.multilabels,disabled:!this.props.allowedActions.label,renderPopup:!0,focusOnRender:!0,open:!0,defaultLabel:this.props.defaultLabel})}):null}}export{c as default};

package/dist/AnnoToolBar.js

@@ -0,0 +1,19 @@
+import{jsx as i,jsxs as n}from"react/jsx-runtime";import c,{Component as p}from"react";import{getTopPoint as r,getMostLeftPoint as l}from"./utils/transform.js";class v extends p{constructor(t){super(t),this.state={top:400,left:100,width:50,label:void 0,visibility:"hidden",possibleLabels:[]},this.inputGroupRef=c.createRef()}componentWillMount(){this.setPosition()}componentDidUpdate(t){this.props.visible&&this.setPosition()}setPosition(){if(this.props.selectedAnno){let t=r(this.props.selectedAnno.data);t=l(t)[0];const o=this.inputGroupRef.current.getBoundingClientRect();let s=this.props.svg.top+(t.y+this.props.svg.translateY)*this.props.svg.scale-44,e=this.props.svg.left+(t.x+this.props.svg.translateX)*this.props.svg.scale-o.width/2-1;s<0&&(s=this.props.svg.top+(t.y+this.props.svg.translateY+10)*this.props.svg.scale),(this.state.top!==s||this.state.left!==e)&&this.setState({top:s,left:e})}}onClose(){this.props.onClose&&this.props.onClose()}handleClick(t){this.props.onClick&&this.props.onClick(t)}renderDaviIcon(){return i("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"60px",onClick:t=>this.handleClick(t),children:n("g",{id:"Info",children:[i("path",{id:"Maps",fill:this.props.color,d:`M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
+                    c-24.452-109.811-74.341-207.569-139.215-298.675c-27.507-38.628-55.814-77.404-77.438-119.371
+                    C324.363,242.85,402.696,58.71,574.209,26.508c145.509-27.32,282.953,75.871,296.543,222.773
+                    c4.659,50.356-7.471,97.96-32.152,141.022c-27.812,48.526-58.75,95.364-90.073,141.758
+                    c-50.917,75.411-91.062,155.558-113.421,244.091c-2.438,9.652-3.936,19.543-6.271,29.227c-0.992,4.104-3.023,7.961-4.584,11.93
+                    C623.021,817.277,621.789,817.247,620.561,817.217z`}),i("path",{id:"Text",fillRule:"evenodd",clipRule:"evenodd",fill:"#FFFFFF",d:`M724.709,250.898
+                    c-0.055-3.974,0.047-7.949,0.033-11.923c-0.007-1.228-1.54-2.767-2.76-2.777c-2.428-0.021-4.862-0.015-7.29-0.015
+                    c-22.466,0.001-44.934,0.005-67.404,0.009c-2.475,0.001-3.658,1.154-3.658,3.588c-0.001,47.365-0.001,94.73-0.001,142.096
+                    c0,13.526,0,27.05,0.001,40.577c0,2.305,1.274,3.584,3.562,3.59c6.623,0.004,9.256-0.07,19.873,0.004
+                    c10.618,0.072,14.146,8.543,14.146,14.189c-0.002,5.645-4.233,13.055-14.299,13.367c-13.135,0.061-26.277-0.02-39.414-0.014
+                    c-14.575,0.004-29.146,0.004-43.722,0.02c-4.191-0.084-13.717-2.789-13.717-13.492s6.233-13.643,13.132-14.117
+                    c4.979,0.037,13.802,0.057,20.701,0.049c1.695,0,3.11-1.537,3.11-3.361c0.003-13.912-0.004-27.823-0.004-41.736
+                    c0-30.252,0-60.503,0.002-90.754c0.002-17.03,0.005-33.649,0.002-50.678c0-1.991-1.38-3.336-3.396-3.336
+                    c-24.79,0-49.577,0-74.362,0c-2.133,0-3.38,1.22-3.383,3.308c-0.006,3.754-0.011,7.509,0.005,11.262
+                    c-0.023,6.339-3.067,13.143-12.456,13.143c-9.389,0-14.337-4.647-14.915-13.23c-0.128-4.305,0.004-8.612,0.004-12.918
+                    c0-8.392,0-16.781,0-25.173c0-0.321,0.228-5.156,4.091-9.277c3.864-4.122,8.014-3.822,8.445-3.822
+                    c25.835,0.003,51.672,0.002,77.507,0.002c46.813,0.001,140.443,0.001,140.443,0.001s6.153-0.088,10.926-0.052
+                    c0.3-0.008,5.713,0.363,9.178,3.994c3.46,3.631,3.046,8.407,3.046,8.635c-0.007,12.862,0.079,25.725-0.003,38.587
+                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z`})]})})}render(){return this.props.visible?i("div",{ref:this.inputGroupRef,style:{position:"fixed",top:this.state.top,left:this.state.left,cursor:"pointer"},children:this.renderDaviIcon()}):null}}export{v as default};

package/dist/Annotation/AnnoBar.js

@@ -0,0 +1 @@
+import{jsxs as p,jsx as i}from"react/jsx-runtime";import r,{Component as f}from"react";import{getTopPoint as d,getMostLeftPoint as c}from"../utils/transform.js";import{CREATE as a,VIEW as u}from"../types/modes.js";const n=10,b=15;class R extends f{constructor(t){super(t),this.state={top:0,left:0,width:50,height:b,fontSize:n},this.textRef=r.createRef()}componentWillMount(){this.props.mode!==a&&this.setPosition()}componentDidUpdate(){this.props.mode!==a&&this.setPosition()}handleClick(t){t.preventDefault(),this.props.onClick&&this.props.onClick(t)}setPosition(){let t=d(this.props.anno.data);if(t=c(t)[0],this.textRef.current){let h=(this.textRef.current.getBoundingClientRect().width+2)/this.props.svg.scale;h!==this.state.width&&this.setState({width:h,fontSize:Math.ceil(n/this.props.svg.scale)})}let e=t.y-10,s=t.x+7;e<0&&(e=t.y+10),(this.state.top!==e||this.state.left!==s)&&this.setState({top:e,left:s})}render(){let t="";if(!this.props.possibleLabels)return null;let e;switch(this.props.anno.labelIds&&this.props.anno.labelIds.length>0?this.props.anno.labelIds.forEach((s,o)=>{e=this.props.possibleLabels.find(l=>l.id===s),o>0&&(t+=", "),t+=e.label}):this.props.defaultLabel?Number.isInteger(this.props.defaultLabel)?(e=this.props.possibleLabels.find(s=>s.id===this.props.defaultLabel),t=e.label):t=this.props.defaultLabel:t="no label",this.props.mode){case u:return p("g",{children:[i("rect",{x:this.state.left,y:this.state.top-6,width:this.state.width,height:this.state.height,rx:"5",opacity:"0.5",style:this.props.style}),i("text",{x:this.state.left,y:this.state.top,fill:"white",onClick:s=>this.handleClick(s),textAnchor:"start",alignmentBaseline:"central",ref:this.textRef,fontSize:this.state.fontSize+"pt",children:t}),i("rect",{x:this.state.left,y:this.state.top-6,width:this.state.width,height:this.state.height,rx:"5",opacity:"0.01",style:this.props.style})]});default:return null}}}export{R as default};

package/dist/Annotation/Annotation.js

@@ -0,0 +1 @@
+import{jsx as i,jsxs as a}from"react/jsx-runtime";import h,{Component as l}from"react";import p from"./AnnoBar.js";import d from"./Point.js";import c from"./BBox.js";import f from"./Line.js";import A from"./Polygon.js";import{DELETED as r,EDIT as u,MOVE as g,EDIT_LABEL as m,CREATE as C}from"../types/modes.js";import{ANNO_SELECTED as b,ANNO_CREATED as E,ANNO_MOVED as v,ANNO_EDITED as M,ANNO_CREATED_FINAL_NODE as y,ANNO_ENTER_EDIT_MODE as N,ANNO_ENTER_MOVE_MODE as D,ANNO_DELETED as S}from"../types/canvasActions.js";import{DELETED as k}from"../types/annoStatus.js";import{getDefaultColor as w}from"../utils/colorlut.js";import{allowedToLabel as T,allowedToEdit as L}from"../utils/constraints.js";import{correctAnnotation as R,getArea as O}from"../utils/transform.js";class H extends l{constructor(t){super(t),this.state={selAreaCss:"sel-area-off",visibility:"visible",anno:void 0},this.myAnno=h.createRef()}componentWillMount(){this.setState({anno:{...this.props.data}})}componentDidUpdate(t){t.data!==this.props.data&&this.setState({anno:{...this.props.data}}),t.showSingleAnno!==this.props.showSingleAnno&&(this.props.showSingleAnno===void 0?this.setVisible(!0):this.props.showSingleAnno!==this.props.data.id?this.setVisible(!1):this.setVisible(!0)),this.props.showSingleAnno===void 0&&this.state.anno.visible!==void 0&&(this.state.anno.visible?this.setVisible(!0):this.setVisible(!1))}onClick(t){t.stopPropagation(),this.performedAction(this.state.anno,b)}onMouseDown(t){t.preventDefault(),this.props.onMouseDown&&this.props.onMouseDown(t)}onContextMenu(t){t.preventDefault()}handleModeChangeRequest(t,e){this.setMode(t,e)}performedAction(t,e){this.props.onAction&&this.props.onAction(t,e)}notify(t){this.props.onNotification&&this.props.onNotification(t)}performedAnnoAction(t,e){switch(e){case y:case M:case v:case E:const s=R(t.data,this.props.svg,this.props.imageOffset);let o={...t,data:s};const n=O(s,this.props.svg,t.type,this.props.image);n!==void 0?n<this.props.canvasConfig.annos.minArea?(this.notify({title:"Annotation to small",message:"Annotation area was "+Math.round(n)+"px but needs to be bigger than "+this.props.canvasConfig.annos.minArea+" px",type:void 0}),this.setMode(o,r)):this.performedAction(o,e):this.performedAction(o,e);break;default:this.performedAction(t,e);break}}setAnnoMode(t,e){this.setState({anno:{...t,mode:e}})}setMode(t,e){if(t.mode!==e)switch(e){case m:T(this.props.allowedActions)&&this.setAnnoMode(t,e);break;case r:this.setAnnoMode(t,e);const s={...t,mode:e.DELETED};this.performedAction(s,S);break;case g:this.setAnnoMode(t,e),this.performedAction(t,D);break;case u:this.setAnnoMode(t,e),this.performedAction(t,N);break;default:this.setAnnoMode(t,e);break}}setVisible(t){t?this.state.visibility!=="visible"&&this.setState({visibility:"visible"}):this.state.visibility!=="hidden"&&this.setState({visibility:"hidden"})}isSelected(){return L(this.props.allowedActions,this.state.anno)?this.props.selectedAnno===this.props.data.id:!1}getResult(){return{...this.state.anno,data:this.myAnno.current.state.anno,createMode:this.myAnno.current.state.mode===C}}getLabel(t){return this.props.possibleLabels.find(e=>e.id===t)}getColor(){return this.state.anno.labelIds&&this.state.anno.labelIds.length>0?this.getLabel(this.state.anno.labelIds[0]).color:w()}getStyle(){const t=this.getColor();return this.isSelected()?{stroke:t,fill:t,strokeWidth:this.props.uiConfig.strokeWidth/this.props.svg.scale,r:this.props.uiConfig.nodeRadius/this.props.svg.scale}:{stroke:t,fill:t,strokeWidth:this.props.uiConfig.strokeWidth/this.props.svg.scale,r:this.props.uiConfig.nodeRadius/this.props.svg.scale}}getCssClass(){return this.isSelected()?"selected":"not-selected"}renderAnno(){const t=this.props.type;switch(this.state.anno&&console.log("ANNOTATION: ",this.state.anno.mode,this.state.anno),t){case"point":return i(d,{ref:this.myAnno,anno:this.state.anno,style:this.getStyle(),className:this.getCssClass(),isSelected:this.isSelected(),svg:this.props.svg,onModeChangeRequest:(e,s)=>this.handleModeChangeRequest(e,s),onAction:(e,s)=>this.performedAnnoAction(e,s)});case"bBox":return i(c,{ref:this.myAnno,anno:this.state.anno,style:this.getStyle(),className:this.getCssClass(),onNodeClick:(e,s)=>this.onNodeClick(e,s),onNodeMouseDown:(e,s)=>this.onNodeMouseDown(e,s),isSelected:this.isSelected(),svg:this.props.svg,onModeChangeRequest:(e,s)=>this.handleModeChangeRequest(e,s),onAction:(e,s)=>this.performedAnnoAction(e,s)});case"polygon":return i(A,{ref:this.myAnno,anno:this.state.anno,style:this.getStyle(),className:this.getCssClass(),onNodeClick:(e,s)=>this.onNodeClick(e,s),isSelected:this.isSelected(),svg:this.props.svg,onModeChangeRequest:(e,s)=>this.handleModeChangeRequest(e,s),onAction:(e,s)=>this.performedAnnoAction(e,s)});case"line":return i(f,{ref:this.myAnno,anno:this.state.anno,style:this.getStyle(),className:this.getCssClass(),isSelected:this.isSelected(),svg:this.props.svg,onAction:(e,s)=>this.performedAnnoAction(e,s),onModeChangeRequest:(e,s)=>this.handleModeChangeRequest(e,s)});default:console.error("Wrong annoType for annotations: ",this.props.annoType)}}renderAnnoBar(){return i(p,{anno:this.state.anno,mode:this.state.anno.mode,possibleLabels:this.props.possibleLabels,onClick:t=>this.onClick(t),style:this.getStyle(),svg:this.props.svg,defaultLabel:this.props.defaultLabel})}render(){return!this.state.anno.data||!this.props.possibleLabels||this.state.anno.status===k?null:i("g",{children:a("g",{visibility:this.state.visibility,onClick:t=>this.onClick(t),onMouseDown:t=>this.onMouseDown(t),onContextMenu:t=>this.onContextMenu(t),children:[this.renderAnnoBar(),this.renderAnno()]})})}}export{H as default};

package/dist/Annotation/BBox.js

@@ -0,0 +1 @@
+import{jsx as h,jsxs as l}from"react/jsx-runtime";import{Component as m}from"react";/* empty css               */import{CREATE as i,EDIT as p,VIEW as a,MOVE as r,EDIT_LABEL as M}from"../types/modes.js";import{move as f}from"../utils/transform.js";import{ANNO_CREATED as u,ANNO_EDITED as N,ANNO_MOVED as y}from"../types/canvasActions.js";import{getMousePosition as v}from"../utils/mouse.js";import g from"./InfSelectionArea.js";import c from"./Node.js";class q extends m{constructor(e){super(e),this.state={anno:void 0}}componentDidMount(e){if(this.props.anno.mode===i){const t=this.props.anno.data[0],s={...this.props.anno,data:[{x:t.x,y:t.y},{x:t.x+1,y:t.y},{x:t.x+1,y:t.y+1},{x:t.x,y:t.y+1}],selectedNode:2};this.setState({anno:s})}else this.setState({anno:{...this.props.anno}})}componentDidUpdate(e){e.anno!==this.props.anno&&this.setState({anno:{...this.props.anno}})}onNodeMouseMove(e,t){switch(this.state.anno.mode){case i:case p:const s=v(e,this.props.svg),n=t-1<0?3:t-1,d=t+1>3?0:t+1;let o=[...this.state.anno.data];t%2===0?(o[n].x=s.x,o[t].x=s.x,o[t].y=s.y,o[d].y=s.y):(o[n].y=s.y,o[t].x=s.x,o[t].y=s.y,o[d].x=s.x),this.setState({anno:{...this.state.anno,data:o}});break}}onNodeMouseDown(e,t){switch(this.state.anno.mode){case a:e.button===0&&this.requestModeChange({...this.state.anno,selectedNode:t},p);break}}onNodeMouseUp(e,t){switch(this.state.anno.mode){case p:e.button===0&&(this.requestModeChange(this.state.anno,a),this.performedAction(this.state.anno,N));break;case i:e.button===2&&(this.requestModeChange(this.state.anno,a),this.performedAction(this.state.anno,u));break}}handleNodeMouseLeave(e,t){switch(this.state.anno.mode){case i:this.requestModeChange(this.state.anno,a),this.performedAction(this.state.anno,u);break}}onMouseMove(e){switch(this.state.anno.mode){case r:this.move(e.movementX/this.props.svg.scale,e.movementY/this.props.svg.scale);break}}onMouseUp(e){switch(this.state.anno.mode){case r:e.button===0&&(this.requestModeChange(this.state.anno,a),this.performedAction(this.state.anno,y));break}}onMouseDown(e){switch(this.state.anno.mode){case a:e.button===0&&this.props.isSelected&&this.requestModeChange(this.state.anno,r);break}}getResult(){return this.state.anno}requestModeChange(e,t){this.props.onModeChangeRequest(e,t)}performedAction(e,t){this.props.onAction&&this.props.onAction(e,t)}toPolygonStr(e){return e.map(t=>`${t.x},${t.y}`).join(" ")}move(e,t){this.setState({anno:{...this.state.anno,data:f(this.state.anno.data,e,t)}})}renderPolygon(){switch(this.state.anno.mode){default:return h("polygon",{points:this.toPolygonStr(this.state.anno.data),fill:"none",stroke:"purple",style:this.props.style,className:this.props.className,onMouseDown:e=>this.onMouseDown(e),onMouseUp:e=>this.onMouseUp(e)})}}renderNodes(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case r:case M:return null;case p:case i:return h(c,{anno:this.state.anno.data,idx:this.state.anno.selectedNode,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(e,t)=>this.onNodeMouseDown(e,t),onMouseUp:(e,t)=>this.onNodeMouseUp(e,t),onMouseMove:(e,t)=>this.onNodeMouseMove(e,t),onMouseLeave:(e,t)=>this.handleNodeMouseLeave(e,t)},this.state.anno.selectedNode);default:return this.state.anno.data.map((e,t)=>h(c,{anno:this.state.anno.data,idx:t,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(s,n)=>this.onNodeMouseDown(s,n),onMouseUp:(s,n)=>this.onNodeMouseUp(s,n),onMouseLeave:(s,n)=>this.handleNodeMouseLeave(s,n)},t))}}renderInfSelectionArea(){switch(this.state.anno.mode){case r:return h(g,{enable:!0,svg:this.props.svg});default:return null}}render(){return this.state.anno?l("g",{onMouseMove:e=>this.onMouseMove(e),onMouseUp:e=>this.onMouseUp(e),onMouseDown:e=>this.onMouseDown(e),children:[this.renderPolygon(),this.renderNodes(),this.renderInfSelectionArea()]}):null}}export{q as default};

package/dist/Annotation/Edge.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as t}from"react/jsx-runtime";import{Component as p}from"react";/* empty css               */class l extends p{constructor(s){super(s),this.state={haloCss:"node-halo-off"}}componentDidUpdate(){}onMouseOver(s){this.props.isSelected&&this.setState({haloCss:"node-halo-on"})}onMouseLeave(s){this.props.isSelected&&this.setState({haloCss:"node-halo-off"})}onMouseDown(s){this.props.onMouseDown&&this.props.onMouseDown(s,this.props.idx)}onMouseUp(s){s.stopPropagation()}render(){let s,e;if(this.props.closingEdge){if(this.props.idx===0&&this.props.anno.length===1)return null;s=this.props.anno[this.props.anno.length-1],e=this.props.anno[0]}else{if(this.props.idx-1<0||this.props.idx>this.props.anno.length-1)return null;s=this.props.anno[this.props.idx-1],e=this.props.anno[this.props.idx]}return n("g",{onMouseOver:o=>{this.onMouseOver(o)},onMouseLeave:o=>{this.onMouseLeave(o)},children:[t("line",{x1:s.x,y1:s.y,x2:e.x,y2:e.y,stroke:"black",strokeWidth:this.props.style.strokeWidth*3,className:this.state.haloCss,onMouseOver:o=>{this.onMouseOver(o)},onMouseDown:o=>this.onMouseDown(o),onMouseUp:o=>this.onMouseUp(o)}),t("line",{x1:s.x,y1:s.y,x2:e.x,y2:e.y,stroke:"black",style:this.props.style,className:this.props.className,onMouseDown:o=>this.onMouseDown(o),onMouseUp:o=>this.onMouseUp(o)})]})}}export{l as default};

package/dist/Annotation/InfSelectionArea.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";import{Component as o}from"react";class i extends o{constructor(e){super(e),this.state={selAreaCss:"sel-area-off"}}componentDidMount(){this.props.enable?this.enableSelArea():this.disableSelArea()}componentDidUpdate(){this.props.enable?this.enableSelArea():this.disableSelArea()}onMouseMove(e){this.props.onMouseMove&&this.props.onMouseMove(e)}onMouseUp(e){this.props.onMouseUp&&this.props.onMouseUp(e)}enableSelArea(){this.state.selAreaCss!=="sel-area-on"&&this.setState({selAreaCss:"sel-area-on"})}disableSelArea(){this.state.selAreaCss!=="sel-area-off"&&this.setState({selAreaCss:"sel-area-off"})}render(){return s("circle",{cx:this.props.svg.width/2,cy:this.props.svg.height/2,r:"100%",className:this.state.selAreaCss,onMouseMove:e=>{this.onMouseMove(e)},onMouseUp:e=>{this.onMouseUp(e)}})}}export{i as default};

package/dist/Annotation/Line.js

@@ -0,0 +1 @@
+import{jsx as s,jsxs as r}from"react/jsx-runtime";import"react";import i from"./Polygon.js";import l from"./Edge.js";import{ADD as a,VIEW as p}from"../types/modes.js";class M extends i{renderEdges(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case p:case a:return this.state.anno.data.map((e,t)=>s(l,{anno:this.state.anno.data,idx:t,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,onMouseDown:(o,n)=>{this.onEdgeMouseDown(o,n)}},t));default:return null}}renderPolyline(){return s("polyline",{points:this.toPolygonStr(this.state.anno.data),fill:"none",stroke:"purple",style:{...this.props.style,fill:"none"},className:this.props.className})}render(){return this.state.anno?r("g",{onMouseMove:e=>this.onMouseMove(e),onMouseUp:e=>this.onMouseUp(e),onMouseDown:e=>this.onMouseDown(e),children:[this.renderPolyline(),this.renderEdges(),this.renderNodes(),this.renderInfSelectionArea()]}):s("g",{})}}export{M as default};

package/dist/Annotation/Node.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Component as n}from"react";/* empty css               */import{EDIT as o,CREATE as r,VIEW as a}from"../types/modes.js";import{NORMAL_NODE as h,EDIT_NODE as p,CREATE_NODE as l}from"../types/cursorstyles.js";class m extends n{constructor(s){super(s),this.state={haloCss:"node-halo-off",selAreaCss:"sel-area-off",nodeSelected:!1,style:{}}}componentDidMount(){this.setState({style:{...this.props.style,cursor:this.getCursorStyle(this.props.mode)}})}componentDidUpdate(s){switch(this.props.mode){case r:(this.props.idx!==0||this.props.isPoint)&&this.turnSelAreaOn();break;case o:this.turnSelAreaOn();break}s.mode!==this.props.mode&&this.setState({style:{...this.state.style,cursor:this.getCursorStyle(this.props.mode)}}),s.style!==this.props.style&&this.setState({style:{...this.state.style,...this.props.style,cursor:this.getCursorStyle(this.props.mode)}})}onClick(s){this.turnHaloOn(),this.props.onClick&&this.props.onClick(s,this.props.idx)}onMouseMove(s){this.props.onMouseMove&&this.props.onMouseMove(s,this.props.idx)}onContextMenu(s){s.preventDefault()}onMouseUp(s){switch(this.props.mode){case o:switch(s.button){case 0:this.turnSelAreaOff();break}break}this.props.onMouseUp&&this.props.onMouseUp(s,this.props.idx)}onMouseDown(s){switch(s.stopPropagation(),this.props.onMouseDown&&this.props.onMouseDown(s,this.props.idx),this.props.mode){case r:switch(s.button){case 0:this.turnSelAreaOff();break;case 2:this.turnSelAreaOff();break}break}}onMouseOver(s){this.props.isSelected&&this.turnHaloOn()}onMouseLeave(s){this.props.isSelected&&this.turnHaloOff()}onDoubleClick(s){this.props.onDoubleClick&&this.props.onDoubleClick(s,this.props.idx)}handleMouseLeave(s){this.props.onMouseLeave&&this.props.onMouseLeave(s,this.props.idx)}getCursorStyle(s){switch(s){case r:return l;case o:return p;case a:return h}}turnSelAreaOn(){this.state.selAreaCss!=="sel-area-on"&&this.setState({selAreaCss:"sel-area-on"})}turnSelAreaOff(){this.state.selAreaCss!=="sel-area-off"&&this.setState({selAreaCss:"sel-area-off"})}turnHaloOn(){this.setState({haloCss:"node-halo-on"})}turnHaloOff(){this.setState({haloCss:"node-halo-off"})}renderHalo(){if(this.state.haloCss==="node-halo-off")return null;const s=this.props.anno[this.props.idx];return t("circle",{cx:s.x,cy:s.y,r:this.props.style.r*3,className:this.state.haloCss,onMouseLeave:e=>this.onMouseLeave(e)})}renderNodes(){const s=this.props.anno[this.props.idx];if(s!==void 0)return i("g",{onClick:e=>this.onClick(e),onMouseMove:e=>this.onMouseMove(e),onContextMenu:e=>this.onContextMenu(e),onMouseUp:e=>this.onMouseUp(e),onMouseDown:e=>this.onMouseDown(e),onDoubleClick:e=>this.onDoubleClick(e),onMouseLeave:e=>this.handleMouseLeave(e),children:[t("circle",{cx:s.x,cy:s.y,r:"100%",className:this.state.selAreaCss}),this.renderHalo(),t("circle",{cx:s.x,cy:s.y,r:3,fill:"red",style:this.state.style,className:this.props.className,onMouseOver:e=>this.onMouseOver(e)})]})}render(){return t("g",{children:this.renderNodes()})}}export{m as default};

package/dist/Annotation/Point.js

@@ -0,0 +1 @@
+import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Component as d}from"react";import c from"./InfSelectionArea.js";import r from"./Node.js";import{CREATE as a,MOVE as s,VIEW as i,EDIT as l,EDIT_LABEL as m}from"../types/modes.js";import{move as u}from"../utils/transform.js";import{ANNO_CREATED as f,ANNO_MOVED as M}from"../types/canvasActions.js";class E extends d{constructor(t){super(t),this.state={anno:void 0}}componentDidMount(t){if(this.props.anno.mode===a){const e=this.props.anno.data[0],n={...this.props.anno,data:[{x:e.x,y:e.y}],selectedNode:0};this.setState({anno:n})}else this.setState({anno:{...this.props.anno}})}componentDidUpdate(t){t.anno!==this.props.anno&&this.setState({anno:{...this.props.anno}})}onMouseMove(t){switch(this.state.anno.mode){case s:this.move(t.movementX/this.props.svg.scale,t.movementY/this.props.svg.scale);break}}onMouseUp(t){switch(this.state.anno.mode){case s:t.button===0&&(this.requestModeChange(this.state.anno,i),this.performedAction(this.state.anno,M));break;case a:this.requestModeChange(this.state.anno,i),this.performedAction(this.state.anno,f);break}}onNodeMouseDown(t,e){switch(this.state.anno.mode){case i:t.button===0&&this.props.isSelected&&this.requestModeChange(this.state.anno,s);break}}getResult(){return this.state.anno}performedAction(t,e){this.props.onAction&&this.props.onAction(t,e)}requestModeChange(t,e){this.props.onModeChangeRequest(t,e)}move(t,e){this.setState({anno:{...this.state.anno,data:u(this.state.anno.data,t,e)}})}renderInfSelectionArea(){switch(this.state.anno.mode){case s:return o(c,{enable:!0,svg:this.props.svg});default:return null}}renderNode(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case m:case s:return null;case l:case a:return o(r,{anno:this.state.anno.data,idx:this.state.anno.selectedNode,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(t,e)=>this.onNodeMouseDown(t,e),isPoint:!0},this.state.selectedNode);default:return this.state.anno.data.map((t,e)=>o(r,{anno:this.state.anno.data,idx:e,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(n,h)=>this.onNodeMouseDown(n,h),isPoint:!0},e))}}renderPoint(){return this.state.anno.data.map((t,e)=>o("circle",{cx:t.x,cy:t.y,r:10,fill:"red",style:this.props.style,className:this.props.className},e))}render(){return this.state.anno?p("g",{onMouseMove:t=>this.onMouseMove(t),onMouseUp:t=>this.onMouseUp(t),children:[this.renderPoint(),this.renderNode(),this.renderInfSelectionArea()]}):null}}export{E as default};

package/dist/Annotation/Polygon.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as N}from"react/jsx-runtime";import{Component as M}from"react";import l from"./Edge.js";import u from"./Node.js";import D from"./InfSelectionArea.js";import{move as g}from"../utils/transform.js";import{ANNO_MOVED as f,ANNO_EDITED as A,ANNO_CREATED_NODE as w,ANNO_CREATED_FINAL_NODE as E,ANNO_ADDED_NODE as y,ANNO_REMOVED_SPECIFIC_NODE as v,ANNO_REMOVED_NODE as S}from"../types/canvasActions.js";/* empty css               */import{CREATE as r,MOVE as a,VIEW as i,EDIT as h,ADD as p}from"../types/modes.js";import{getMousePosition as m}from"../utils/mouse.js";class T extends M{constructor(t){super(t),this.state={anno:void 0}}componentDidMount(){if(this.props.anno.mode===r){const t=this.props.anno.data[0],e={...this.props.anno,data:[{x:t.x,y:t.y},{x:t.x+1,y:t.y}],selectedNode:1};this.setState({anno:e})}else this.setState({anno:{...this.props.anno}})}componentDidUpdate(t){t.anno!==this.props.anno&&this.setState({anno:{...this.props.anno}})}onMouseMove(t){switch(this.state.anno.mode){case a:this.move(t.movementX/this.props.svg.scale,t.movementY/this.props.svg.scale);break}}onMouseUp(t){switch(this.state.anno.mode){case a:t.button===0&&(this.performedAction(this.state.anno,f),this.requestModeChange(this.state.anno,i));break}}onMouseDown(t){switch(this.state.anno.mode){case i:t.button===0&&this.props.isSelected&&this.requestModeChange(this.state.anno,a);break}}onNodeMouseUp(t,e){switch(this.state.anno.mode){case h:this.performedAction(this.state.anno,A),this.requestModeChange(this.state.anno,i);break}}onNodeMouseDown(t,e){switch(this.state.anno.mode){case r:if(t.button===2){let s=[...this.state.anno.data];s.push({x:s[e].x,y:s[e].y});const o={...this.state.anno,data:s,selectedNode:this.state.anno.selectedNode+1};this.setState({anno:o}),this.performedAction(o,w)}break;case i:t.button===0&&this.requestModeChange({...this.state.anno,selectedNode:e},h);break;case p:t.button===0&&this.removeNode(t,e);break}}onNodeMouseMove(t,e){switch(this.state.anno.mode){case r:this.updateAnnoByMousePos(t,e);break;case h:t.stopPropagation(),this.updateAnnoByMousePos(t,e);break}}onNodeDoubleClick(t,e){switch(this.state.anno.mode){case r:this.performedAction(this.state.anno,E);break}}onEdgeMouseDown(t,e){switch(this.state.anno.mode){case p:this.addNode(t,e);break;case i:t.button===0&&this.requestModeChange(this.state.anno,a);break}}performedAction(t,e){this.props.onAction&&this.props.onAction(t,e)}toPolygonStr(t){return t.map(e=>`${e.x},${e.y}`).join(" ")}requestModeChange(t,e){this.props.onModeChangeRequest(t,e)}move(t,e){this.setState({anno:{...this.state.anno,data:g(this.state.anno.data,t,e)}})}addNode(t,e){const s=m(t,this.props.svg);let o=this.state.anno.data.slice(0,e);o.push(s);const d=this.state.anno.data.slice(e),c={...this.state.anno,data:o.concat(d)};this.setState({anno:c}),this.performedAction(c,y)}removeNode(t,e){let s=[...this.state.anno.data];s.splice(e,1);const o={...this.state.anno,data:s};this.setState({anno:o}),this.performedAction(o,v)}removeLastNode(){const t={...this.state.anno,data:[...this.state.anno.data.slice(0,this.state.anno.data.length-1)],selectedNode:this.state.anno.selectedNode-1};this.setState({anno:t}),this.performedAction(t,S)}updateAnnoByMousePos(t,e){const s=m(t,this.props.svg);let o=[...this.state.anno.data];o[e].x=s.x,o[e].y=s.y,this.setState({anno:{...this.state.anno,data:o}})}getResult(){return this.state.anno}renderNodes(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case a:return null;case h:case r:return n(u,{anno:this.state.anno.data,idx:this.state.anno.selectedNode,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(t,e)=>this.onNodeMouseDown(t,e),onMouseUp:(t,e)=>this.onNodeMouseUp(t,e),onDoubleClick:(t,e)=>this.onNodeDoubleClick(t,e),onMouseMove:(t,e)=>this.onNodeMouseMove(t,e)},this.state.anno.selectedNode);default:return this.state.anno.data.map((t,e)=>n(u,{anno:this.state.anno.data,idx:e,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(s,o)=>this.onNodeMouseDown(s,o),onMouseUp:(s,o)=>this.onNodeMouseUp(s,o),onDoubleClick:(s,o)=>this.onNodeDoubleClick(s,o),onMouseMove:(s,o)=>this.onNodeMouseMove(s,o)},e))}}renderEdges(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case i:case p:let t=this.state.anno.data.map((e,s)=>n(l,{anno:this.state.anno.data,idx:s,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,onMouseDown:(o,d)=>{this.onEdgeMouseDown(o,d)}},s));return t.push(n(l,{anno:this.state.anno.data,closingEdge:!0,idx:0,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,onMouseDown:(e,s)=>{this.onEdgeMouseDown(e,s)}},t.length)),t;default:return null}}renderPolygon(){return n("polygon",{points:this.toPolygonStr(this.state.anno.data),fill:"none",stroke:"purple",style:this.props.style,className:this.props.className})}renderInfSelectionArea(){switch(this.state.anno.mode){case a:return n(D,{enable:!0,svg:this.props.svg});default:return null}}render(){return this.state.anno?N("g",{onMouseMove:t=>this.onMouseMove(t),onMouseUp:t=>this.onMouseUp(t),onMouseDown:t=>this.onMouseDown(t),children:[this.renderPolygon(),this.renderEdges(),this.renderNodes(),this.renderInfSelectionArea()]}):n("g",{})}}export{T as default};

package/dist/Annotation/logic/Annotation.d.ts

@@ -0,0 +1,17 @@
+import { AnnotationMode } from '../../models';
+import { default as AnnotationStatus } from '../../models/AnnotationStatus';
+import { default as AnnotationTool } from '../../models/AnnotationTool';
+import { Point } from '../../types';
+declare class Annotation {
+    internalId: number;
+    externalId?: string;
+    annoTime: number;
+    coordinates: Point[];
+    labelIds?: number[];
+    mode: AnnotationMode;
+    selectedNode: number;
+    status: AnnotationStatus;
+    type: AnnotationTool;
+    constructor(internalId: number, type: AnnotationTool, coordinates: Point[], mode?: AnnotationMode, status?: AnnotationStatus, externalId?: string);
+}
+export default Annotation;

package/dist/Annotation/logic/Annotation.js

@@ -0,0 +1 @@
+var r=Object.defineProperty;var l=(o,e,s)=>e in o?r(o,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[e]=s;var t=(o,e,s)=>l(o,typeof e!="symbol"?e+"":e,s);import h from"../../models/AnnotationMode.js";import m from"../../models/AnnotationStatus.js";class u{constructor(e,s,n,i=h.CREATE,a=m.CREATING,d=""){t(this,"internalId");t(this,"externalId");t(this,"annoTime");t(this,"coordinates");t(this,"labelIds");t(this,"mode");t(this,"selectedNode");t(this,"status");t(this,"type");this.internalId=e,this.externalId=d,this.labelIds=[],this.type=s,this.mode=i,this.status=a,this.coordinates=n,this.selectedNode=1,this.annoTime=0}}export{u as default};

package/dist/Annotation/ui/AnnotationComponent.d.ts

@@ -0,0 +1,24 @@
+import { default as Annotation } from '../logic/Annotation';
+import { default as CanvasAction } from '../../models/CanvasAction';
+import { AnnotationSettings, Label, Point, SIANotification } from '../../types';
+import { default as AnnotationMode } from '../../models/AnnotationMode';
+type AnnotationComponentProps = {
+    scaledAnnotation: Annotation;
+    annotationSettings: AnnotationSettings;
+    possibleLabels: Label[];
+    svgScale: number;
+    svgTranslation: Point;
+    pageToStageOffset: Point;
+    strokeWidth: number;
+    nodeRadius: number;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    onFinishAnnoCreate: (fullyCreatedAnnotation: Annotation) => void;
+    onLabelIconClicked: (markerPosition: Point) => void;
+    onAction?: (annotation: Annotation, canvasAction: CanvasAction) => void;
+    onAnnoChanged?: (annotation: Annotation) => void;
+    onAnnotationModeChange?: (annotationMode: AnnotationMode) => void;
+    onNotification?: (notification: SIANotification) => void;
+};
+declare const AnnotationComponent: ({ scaledAnnotation, annotationSettings, possibleLabels, svgScale, svgTranslation, pageToStageOffset, strokeWidth, nodeRadius, isSelected, isDisabled, onFinishAnnoCreate, onLabelIconClicked, onAction, onAnnoChanged, onAnnotationModeChange, onNotification, }: AnnotationComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default AnnotationComponent;

package/dist/Annotation/ui/AnnotationComponent.js

@@ -0,0 +1 @@
+import{jsxs as G,jsx as f}from"react/jsx-runtime";import h from"../../models/AnnotationTool.js";import{getDefaultColor as L}from"../../utils/color.js";import H from"./tools/Point.js";import J from"./tools/Line.js";import K from"./atoms/AnnoBar.js";import Q from"../../models/CanvasAction.js";import X from"./tools/BBox.js";import Y from"./tools/Polygon.js";import{useState as I,useRef as x,useEffect as M}from"react";import e from"../../models/AnnotationMode.js";import Z from"../../utils/TimeUtils.js";const fo=({scaledAnnotation:r,annotationSettings:m,possibleLabels:b,svgScale:i,svgTranslation:a,pageToStageOffset:l,strokeWidth:B,nodeRadius:P,isSelected:d,isDisabled:V=!1,onFinishAnnoCreate:w,onLabelIconClicked:W,onAction:k=(n,C)=>{},onAnnoChanged:A=n=>{},onAnnotationModeChange:F=n=>{},onNotification:O=n=>{}})=>{const[n,C]=I(r.coordinates),[t,c]=I(r.mode),[j,D]=I(!1),R=x(void 0),[_,U]=I();M(()=>{R.current=_},[_]);const y=x(n);M(()=>{y.current=n},[n]);const N=()=>{c(e.VIEW);const o={...r,coordinates:y.current};w(o)},q=o=>b.find(s=>s.id===o),T=(()=>{if(!r.labelIds||r.labelIds.length==0)return L();const o=q(r.labelIds[0]);return o===void 0||o.color===void 0?L():o.color})(),u={stroke:T,fill:T,strokeWidth:B/i,r:P/i},p=o=>{C(o);let s=o;[e.ADD,e.MOVE].includes(t)&&(s=o.slice(0,-1)),A({...r,coordinates:s})},g=o=>{[e.ADD,e.CREATE,e.MOVE].includes(t)||(c(e.MOVE),U(performance.now())),C(o)},E=()=>{c(e.VIEW);const o=Z.getRoundedDuration(R.current,performance.now()),s=isNaN(r.annoTime)||r.annoTime===null?o:r.annoTime+o;A({...r,coordinates:y.current,annoTime:s})};M(()=>{F(t)},[t]),M(()=>{t===e.CREATE||t===e.ADD||C(r.coordinates)},[r]);const z=()=>{switch(r.type){case h.Point:return f(H,{isSelected:d,annotationSettings:m,coordinates:n[0],pageToStageOffset:l,svgScale:i,svgTranslation:a,style:u,onMoving:o=>g([o]),onMoved:E,onIsDraggingStateChanged:D});case h.Line:return f(J,{annotationSettings:m,coordinates:n,isSelected:d,pageToStageOffset:l,annotationMode:t,setAnnotationMode:c,svgScale:i,svgTranslation:a,style:u,onAddNode:p,onDeleteNode:p,onMoving:g,onMoved:E,onIsDraggingStateChanged:D,onFinishAnnoCreate:N});case h.BBox:return f(X,{annotationMode:t,annotationSettings:m,startCoords:n[0],endCoords:n[1],isSelected:d,pageToStageOffset:l,style:u,svgScale:i,svgTranslation:a,onDeleteNode:()=>{console.log("TODO")},onIsDraggingStateChanged:D,onFinishAnnoCreate:N,onMoving:g,onMoved:E});case h.Polygon:return f(Y,{annotationSettings:m,coordinates:n,isSelected:d,isDisabled:V,pageToStageOffset:l,annotationMode:t,setAnnotationMode:c,svgScale:i,svgTranslation:a,style:u,onAddNode:p,onDeleteNode:p,onMoving:g,onMoved:E,onNotification:O,onIsDraggingStateChanged:D,onFinishAnnoCreate:N})}};return G("g",{onClick:o=>{o.stopPropagation(),k(r,Q.ANNO_SELECTED)},children:[!j&&t!==e.CREATE&&f(K,{annotationCoordinates:n,canLabel:m.canLabel,labels:b,color:T,isSelected:d,selectedLabelIds:r.labelIds,style:u,svgScale:i,onLabelIconClicked:W}),z()]})};export{fo as default};

package/dist/Annotation/ui/atoms/AnnoBar.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { Label, Point } from '../../../types';
+type AnnoBarProps = {
+    annotationCoordinates: Point[];
+    canLabel: boolean;
+    color: string;
+    labels: Label[];
+    selectedLabelIds: number[];
+    isSelected: boolean;
+    svgScale: number;
+    style: CSSProperties;
+    onLabelIconClicked: (markerPosition: Point) => void;
+};
+declare const AnnoBar: ({ annotationCoordinates, canLabel, color, labels, selectedLabelIds, isSelected, svgScale, style, onLabelIconClicked, }: AnnoBarProps) => import("react/jsx-runtime").JSX.Element;
+export default AnnoBar;

package/dist/Annotation/ui/atoms/AnnoBar.js

@@ -0,0 +1 @@
+import{jsxs as _,jsx as x}from"react/jsx-runtime";import{useState as r,useRef as C,useEffect as f}from"react";import T from"../../../utils/transform2.js";import H from"./DaviIcon.js";const R=10,a=15,j=3,U=({annotationCoordinates:u,canLabel:y,color:b,labels:E,selectedLabelIds:h=[],isSelected:L,svgScale:t,style:d,onLabelIconClicked:P})=>{const[c,w]=r({x:0,y:0}),e={x:c.x+7/t,y:c.y-10/t},[p,D]=r(0),[z,A]=r(0),[l,B]=r(0),[m,F]=r(""),s=C(null);f(()=>{F(W())},[h]),f(()=>{const o=T.getTopPoint(u),i=T.getMostLeftPoints(o)[0];w(i);const n=Math.ceil(R/t);B(n),A(a/t)},[t]),f(()=>{if(s===void 0)return;const n=(s.current.getBoundingClientRect().width+j)/t;D(n)},[s,m,l]);const W=()=>{const i=E.filter(n=>h.includes(n.id)).map(n=>n.name).join(", ");return i.length?i:"no label"};return _("g",{children:[L&&y&&x(H,{x:e.x-33/t,y:e.y-30/t,color:b,size:60/t,onClick:()=>P(c)}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:z,rx:5/t,opacity:"0.5",style:d}),x("text",{x:e.x+1/t,y:e.y+6/t,fill:"white",textAnchor:"start",alignmentBaseline:"central",ref:s,fontSize:`${l}pt`,children:m}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:a,rx:5/t,opacity:"0.01",style:d,onContextMenu:o=>o.preventDefault()})]})};export{U as default};

package/dist/Annotation/ui/atoms/DaviIcon.d.ts

@@ -0,0 +1,9 @@
+type DaviIconProps = {
+    x: number;
+    y: number;
+    color: string;
+    size: number;
+    onClick?: () => void;
+};
+declare const DaviIcon: ({ x, y, color, size, onClick, }: DaviIconProps) => import("react/jsx-runtime").JSX.Element;
+export default DaviIcon;

package/dist/Annotation/ui/atoms/DaviIcon.js

@@ -0,0 +1,19 @@
+import{jsxs as d,jsx as c}from"react/jsx-runtime";const o=({x:n,y:e,color:l,size:s=60,onClick:t=()=>{}})=>{const a=s/1400;return d("g",{transform:`translate(${n} ${e}) scale(${a})`,fill:l,onClick:t,children:[c("path",{id:"Maps",d:`M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
+                    c-24.452-109.811-74.341-207.569-139.215-298.675c-27.507-38.628-55.814-77.404-77.438-119.371
+                    C324.363,242.85,402.696,58.71,574.209,26.508c145.509-27.32,282.953,75.871,296.543,222.773
+                    c4.659,50.356-7.471,97.96-32.152,141.022c-27.812,48.526-58.75,95.364-90.073,141.758
+                    c-50.917,75.411-91.062,155.558-113.421,244.091c-2.438,9.652-3.936,19.543-6.271,29.227c-0.992,4.104-3.023,7.961-4.584,11.93
+                    C623.021,817.277,621.789,817.247,620.561,817.217z`}),c("path",{id:"Text",fillRule:"evenodd",clipRule:"evenodd",fill:"#FFFFFF",d:`M724.709,250.898
+                    c-0.055-3.974,0.047-7.949,0.033-11.923c-0.007-1.228-1.54-2.767-2.76-2.777c-2.428-0.021-4.862-0.015-7.29-0.015
+                    c-22.466,0.001-44.934,0.005-67.404,0.009c-2.475,0.001-3.658,1.154-3.658,3.588c-0.001,47.365-0.001,94.73-0.001,142.096
+                    c0,13.526,0,27.05,0.001,40.577c0,2.305,1.274,3.584,3.562,3.59c6.623,0.004,9.256-0.07,19.873,0.004
+                    c10.618,0.072,14.146,8.543,14.146,14.189c-0.002,5.645-4.233,13.055-14.299,13.367c-13.135,0.061-26.277-0.02-39.414-0.014
+                    c-14.575,0.004-29.146,0.004-43.722,0.02c-4.191-0.084-13.717-2.789-13.717-13.492s6.233-13.643,13.132-14.117
+                    c4.979,0.037,13.802,0.057,20.701,0.049c1.695,0,3.11-1.537,3.11-3.361c0.003-13.912-0.004-27.823-0.004-41.736
+                    c0-30.252,0-60.503,0.002-90.754c0.002-17.03,0.005-33.649,0.002-50.678c0-1.991-1.38-3.336-3.396-3.336
+                    c-24.79,0-49.577,0-74.362,0c-2.133,0-3.38,1.22-3.383,3.308c-0.006,3.754-0.011,7.509,0.005,11.262
+                    c-0.023,6.339-3.067,13.143-12.456,13.143c-9.389,0-14.337-4.647-14.915-13.23c-0.128-4.305,0.004-8.612,0.004-12.918
+                    c0-8.392,0-16.781,0-25.173c0-0.321,0.228-5.156,4.091-9.277c3.864-4.122,8.014-3.822,8.445-3.822
+                    c25.835,0.003,51.672,0.002,77.507,0.002c46.813,0.001,140.443,0.001,140.443,0.001s6.153-0.088,10.926-0.052
+                    c0.3-0.008,5.713,0.363,9.178,3.994c3.46,3.631,3.046,8.407,3.046,8.635c-0.007,12.862,0.079,25.725-0.003,38.587
+                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z`})]})};export{o as default};

package/dist/Annotation/ui/atoms/Edge.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, MouseEvent } from 'react';
+import { Point, Vector2 } from '../../../types';
+type EdgeProps = {
+    startCoordinate: Point;
+    endCoordinate: Point;
+    isDisabled?: boolean;
+    pageToStageOffset: Point;
+    svgScale: number;
+    svgTranslation: Vector2;
+    style: CSSProperties;
+    onAddNode?: (coordinate: Point) => void;
+    onDoubleClick?: (e: MouseEvent) => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+};
+declare const Edge: ({ startCoordinate, endCoordinate, isDisabled, pageToStageOffset, style, svgScale, svgTranslation, onAddNode, onDoubleClick, onMouseDown, onMouseMove, }: EdgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Edge;

package/dist/Annotation/ui/atoms/Edge.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import d from"../../../utils/mouse2.js";const S=({startCoordinate:o,endCoordinate:t,isDisabled:s=!1,pageToStageOffset:r,style:n,svgScale:a,svgTranslation:l,onAddNode:u=()=>{},onDoubleClick:x=()=>{},onMouseDown:c,onMouseMove:m})=>{const y=e=>{const f=d.getAntiScaledMouseStagePosition(e,r,a,l);u(f)};return i("line",{x1:o.x,y1:o.y,x2:t.x,y2:t.y,style:n,onClick:e=>e.ctrlKey&&y(e),onDoubleClick:x,onMouseDown:c,onMouseMove:m,onContextMenu:e=>e.preventDefault(),strokeDasharray:s?"10,5":"0"})};export{S as default};

package/dist/Annotation/ui/atoms/Node.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { Point, AnnotationSettings } from '../../../types';
+type NodeProps = {
+    index: number;
+    coordinates: Point;
+    annotationSettings: AnnotationSettings;
+    pageToStageOffset: Point;
+    svgScale: number;
+    svgTranslation: Point;
+    style: CSSProperties;
+    onDeleteNode: () => void;
+    onMoving: (index: number, coordinates: Point) => void;
+    onMoved: () => void;
+    onIsDraggingStateChanged: (bool: any) => void;
+};
+declare const Node: ({ index, coordinates, annotationSettings, pageToStageOffset, svgScale, svgTranslation, style, onDeleteNode, onMoving, onMoved, onIsDraggingStateChanged, }: NodeProps) => import("react/jsx-runtime").JSX.Element;
+export default Node;

package/dist/Annotation/ui/atoms/Node.js

@@ -0,0 +1 @@
+import{jsxs as H,jsx as u}from"react/jsx-runtime";import{useState as c,useRef as h,useEffect as m}from"react";import L from"../../../utils/mouse2.js";const K=({index:v,coordinates:t,annotationSettings:o,pageToStageOffset:x,svgScale:r,svgTranslation:y,style:p,onDeleteNode:D,onMoving:I,onMoved:g,onIsDraggingStateChanged:A})=>{const[E,i]=c(!1),[n,l]=c(!1),[s,a]=c(!1),f=h(s);m(()=>{f.current=s},[s]);const M=e=>{if(!n)return;const C=L.getAntiScaledMouseStagePosition(e,x,r,y);(e.movementX!==0||e.movementY!==0)&&(a(!0),I(v,C))};m(()=>{if(A(n),!n)return;const e=()=>{l(!1),f.current&&g(),a(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[n]);const d=e=>{o.canEdit&&(e.ctrlKey?D():l(!0))},w=()=>u("circle",{cx:t.x,cy:t.y,r:12/r,onMouseLeave:e=>o.canEdit&&i(!1),onMouseDown:d,onContextMenu:e=>e.preventDefault()});return H("g",{children:[n&&u("circle",{cx:t.x,cy:t.y,r:"100%",style:{opacity:0},onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()}),E&&w(),u("circle",{cx:t.x,cy:t.y,r:10/r,style:p,onMouseOver:()=>{o.canEdit&&i(!0)},onMouseDown:d,onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()})]})};export{K as default};

package/dist/Annotation/ui/atoms/PolygonArea.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { Point, AnnotationSettings } from '../../../types';
+import { default as AnnotationMode } from '../../../models/AnnotationMode';
+type PolygonAreaProps = {
+    coordinates: Point[];
+    isSelected: boolean;
+    isDisabled?: boolean;
+    annotationMode: AnnotationMode;
+    annotationSettings: AnnotationSettings;
+    pageToStageOffset: Point;
+    svgScale: number;
+    style: CSSProperties;
+    onFinishAnnoCreate?: () => void;
+    onMouseDown: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+    onMouseUp?: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+    onMouseMove: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+    onIsDraggingStateChanged: (bool: any) => void;
+};
+declare const PolygonArea: ({ coordinates, isSelected, isDisabled, annotationMode, style, onFinishAnnoCreate, onMouseDown, onMouseUp, onMouseMove, }: PolygonAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default PolygonArea;

package/dist/Annotation/ui/atoms/PolygonArea.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{useState as c,useEffect as C}from"react";import x from"../../../models/AnnotationMode.js";const E=({coordinates:f,isSelected:n,isDisabled:e=!1,annotationMode:s,style:u,onFinishAnnoCreate:p=()=>{},onMouseDown:a,onMouseUp:l=()=>{},onMouseMove:i})=>{const y=f.map(o=>`${o.x},${o.y}`).join(" "),[g,r]=c("pointer");C(()=>{if(e)return r("not-allowed");r(n?"grab":"pointer")},[n,e]);const t={...u};return t.cursor=g,t.fillOpacity=n?0:.3,n&&e&&(t.stroke="none"),m("polygon",{points:y,style:t,onMouseDown:o=>{n&&r("grabbing"),a(o)},onMouseUp:o=>{r("grab"),l(o)},onDoubleClick:()=>s===x.CREATE&&p(),onMouseMove:i,onContextMenu:o=>o.preventDefault()})};export{E as default};

package/dist/Annotation/ui/tools/BBox.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { AnnotationSettings, Point } from '../../../types';
+import { default as AnnotationMode } from '../../../models/AnnotationMode';
+type BBoxProps = {
+    annotationMode: AnnotationMode;
+    annotationSettings: AnnotationSettings;
+    pageToStageOffset: Point;
+    startCoords: Point;
+    endCoords: Point;
+    svgScale: number;
+    svgTranslation: Point;
+    isSelected: boolean;
+    style: CSSProperties;
+    onDeleteNode: (coordinates: Point[]) => void;
+    onFinishAnnoCreate: () => void;
+    onIsDraggingStateChanged: (newDraggingState: boolean) => void;
+    onMoving: (coordinates: Point[]) => void;
+    onMoved: () => void;
+};
+declare const BBox: ({ annotationMode, annotationSettings, pageToStageOffset, startCoords, endCoords, svgScale, svgTranslation, isSelected, style, onDeleteNode, onFinishAnnoCreate, onIsDraggingStateChanged, onMoving, onMoved, }: BBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default BBox;

package/dist/Annotation/ui/tools/BBox.js

@@ -0,0 +1 @@
+import{jsxs as H,jsx as v}from"react/jsx-runtime";import{useState as l,useRef as J,useEffect as x}from"react";import K from"../atoms/Node.js";import d from"../../../models/AnnotationMode.js";import Q from"../../../utils/mouse2.js";import V from"../atoms/PolygonArea.js";import W from"../atoms/Edge.js";const re=({annotationMode:m,annotationSettings:i,pageToStageOffset:w,startCoords:R,endCoords:b,svgScale:s,svgTranslation:C,isSelected:E,style:M,onDeleteNode:j,onFinishAnnoCreate:z,onIsDraggingStateChanged:p,onMoving:A,onMoved:k})=>{const n=[R,{x:R.x,y:b.y},b,{x:b.x,y:R.y}],[L,B]=l(m===d.CREATE),[a,N]=l(!1),[f,X]=l(!1),[_,$]=l(0),[D,y]=l(!1),g=J(D);x(()=>{g.current=D},[D]);const Y=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&N(!0)},T=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&X(!0)},h=e=>{if(a){const r=[{...n[0]},{...n[2]}].map(t=>({x:t.x+=e.movementX/s,y:t.y+=e.movementY/s}));(e.movementX!==0||e.movementY!==0)&&(y(!0),A(r))}if(m===d.CREATE){const o=Q.getAntiScaledMouseStagePosition(e,w,s,C),t=[[...n][0],o];A(t)}};x(()=>{if(!L)return;const e=o=>{o.button===2&&(z(),B(!1))};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[L]),x(()=>{if(p(a),!a)return;const e=()=>{N(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[a]),x(()=>{if(p(f),!f)return;const e=()=>{X(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[f]);const q=()=>n.map((o,r)=>v(K,{index:r,annotationSettings:i,coordinates:o,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:M,onDeleteNode:()=>{const t=[...n];t.splice(r,1),j(t)},onMoving:(t,c)=>{const u=[n[0],n[2]];switch(t){case 0:u[0]=c;break;case 1:u[0].x=c.x,u[1].y=c.y;break;case 2:u[1]=c;break;case 3:u[1].x=c.x,u[0].y=c.y;break}A(u)},onMoved:()=>k(),onIsDraggingStateChanged:p},`node_${r}`)),I=(e,o)=>{const r=[n[0],n[2]];switch(e){case 0:r[0].x+=o.movementX/s;break;case 1:r[1].y+=o.movementY/s;break;case 2:r[1].x+=o.movementX/s;break;case 3:r[0].y+=o.movementY/s;break}(o.movementX!==0||o.movementY!==0)&&(y(!0),A(r))},G=()=>n.map((o,r)=>{const t=r+1<n.length?n[r+1]:n[0],c=r%2===0?"ew-resize":"ns-resize";return v(W,{startCoordinate:o,endCoordinate:t,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:{...M,cursor:c},onMouseDown:T,onMouseMove:u=>{$(r),f&&I(r,u)}},`edge_${r}`)}),U=e=>v("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:Y,onMouseMove:o=>{e&&f&&I(_,o),e||h(o)},onContextMenu:o=>o.preventDefault()});return H("g",{children:[(a||m===d.CREATE)&&U(!1),v(V,{annotationSettings:i,coordinates:n,isSelected:E,annotationMode:m,pageToStageOffset:w,style:M,svgScale:s,onIsDraggingStateChanged:p,onMouseDown:Y,onMouseMove:h}),f&&U(!0),E&&i.canEdit&&G(),E&&m!==d.CREATE&&q()]})};export{re as default};

package/dist/Annotation/ui/tools/Line.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import { AnnotationSettings, Point } from '../../../types';
+import { default as AnnotationMode } from '../../../models/AnnotationMode';
+type LineProps = {
+    annotationSettings: AnnotationSettings;
+    coordinates: Point[];
+    isSelected: boolean;
+    annotationMode: AnnotationMode;
+    setAnnotationMode: (annotationMode: AnnotationMode) => void;
+    pageToStageOffset: Point;
+    svgScale: number;
+    svgTranslation: Point;
+    style: CSSProperties;
+    onAddNode: (coordinates: Point[]) => void;
+    onDeleteNode: (coordinates: Point[]) => void;
+    onFinishAnnoCreate: () => void;
+    onIsDraggingStateChanged: (newDraggingState: boolean) => void;
+    onMoving: (coordinates: Point[]) => void;
+    onMoved: () => void;
+};
+declare const Line: ({ annotationSettings, coordinates, isSelected, annotationMode, pageToStageOffset, svgScale, svgTranslation, style, onAddNode, onDeleteNode, onFinishAnnoCreate, onMoving, onMoved, onIsDraggingStateChanged, }: LineProps) => import("react/jsx-runtime").JSX.Element;
+export default Line;

package/dist/Annotation/ui/tools/Line.js

@@ -0,0 +1 @@
+import{jsxs as k,jsx as A}from"react/jsx-runtime";import{useState as b,useRef as U,useEffect as x}from"react";import q from"../atoms/Node.js";import m from"../../../models/AnnotationMode.js";import z from"../atoms/Edge.js";import I from"../../../utils/mouse2.js";const Q=({annotationSettings:p,coordinates:n,isSelected:C,annotationMode:r,pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onAddNode:R,onDeleteNode:L,onFinishAnnoCreate:j,onMoving:E,onMoved:v,onIsDraggingStateChanged:y})=>{const[i,D]=b(!1),[d,M]=b(!1),N=U(d);x(()=>{N.current=d},[d]);const h=t=>{if(p.canEdit!==!1&&(C&&r!==m.CREATE&&t.button===0&&D(!0),t.button===2&&r==m.CREATE)){const o=I.getAntiScaledMouseStagePosition(t,c,s,f),e=[...n];e.push(o),R(e)}},g=t=>{if(i){const o=n.map(e=>({x:e.x+=t.movementX/s,y:e.y+=t.movementY/s}));(t.movementX!==0||t.movementY!==0)&&(M(!0),E(o))}if(r===m.CREATE){const o=I.getAntiScaledMouseStagePosition(t,c,s,f);let e=[...n];n.length>1&&(e=n.slice(0,-1)),e.push(o),E(e)}};x(()=>{if(y(i),!i)return;const t=()=>{D(!1),N.current&&v(),M(!1)};return window.addEventListener("mouseup",t),()=>{window.removeEventListener("mouseup",t)}},[i]);const X=()=>A("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:h,onMouseMove:g,onContextMenu:t=>t.preventDefault()}),Y=()=>n.map((o,e)=>A(q,{index:e,annotationSettings:p,coordinates:o,pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onDeleteNode:()=>{const u=[...n];u.splice(e,1),L(u)},onMoving:(u,l)=>{const P=[...n];P[u]=l,E(P)},onMoved:()=>v(),onIsDraggingStateChanged:y},`node_${e}`)),_=()=>n.map((o,e)=>{if(!(e+1>=n.length))return A(z,{startCoordinate:o,endCoordinate:n[e+1],pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onAddNode:u=>{const l=[...n];l.splice(e+1,0,u),R(l)},onDoubleClick:()=>r===m.CREATE&&j(),onMouseDown:h,onMouseMove:g},`edge_${e}`)}),$=C&&r!==m.CREATE;return k("g",{children:[(i||r===m.CREATE)&&X(),_(),$&&Y()]})};export{Q as default};

package/dist/Annotation/ui/tools/Point.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { AnnotationSettings, Point as TPoint } from '../../../types';
+type PointProps = {
+    annotationSettings: AnnotationSettings;
+    coordinates: TPoint;
+    isSelected: boolean;
+    pageToStageOffset: TPoint;
+    svgScale: number;
+    svgTranslation: TPoint;
+    style: CSSProperties;
+    onIsDraggingStateChanged: (bool: any) => void;
+    onMoving: (coordinates: TPoint) => void;
+    onMoved: (coordinates: TPoint[]) => void;
+};
+declare const Point: ({ annotationSettings, coordinates, isSelected, pageToStageOffset, svgScale, svgTranslation, style, onMoving, onMoved, onIsDraggingStateChanged, }: PointProps) => import("react/jsx-runtime").JSX.Element;
+export default Point;

package/dist/Annotation/ui/tools/Point.js

@@ -0,0 +1 @@
+import{jsx as l}from"react/jsx-runtime";import s from"../atoms/Node.js";const N=({annotationSettings:e,coordinates:o,isSelected:n,pageToStageOffset:t,svgScale:r,svgTranslation:d,style:i,onMoving:m,onMoved:f,onIsDraggingStateChanged:p})=>l(s,{index:0,annotationSettings:e,coordinates:o,pageToStageOffset:t,svgScale:r,svgTranslation:d,style:i,onDeleteNode:()=>{},onMoving:(u,x)=>n&&m(x),onMoved:()=>f([o]),onIsDraggingStateChanged:p});export{N as default};

package/dist/Annotation/ui/tools/Polygon.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+import { Point, SIANotification, AnnotationSettings } from '../../../types';
+import { default as AnnotationMode } from '../../../models/AnnotationMode';
+type PolygonProps = {
+    annotationSettings: AnnotationSettings;
+    coordinates: Point[];
+    isSelected: boolean;
+    isDisabled?: boolean;
+    annotationMode: AnnotationMode;
+    setAnnotationMode: (annotationMode: AnnotationMode) => void;
+    pageToStageOffset: Point;
+    svgScale: number;
+    svgTranslation: Point;
+    style: CSSProperties;
+    onAddNode: (coordinates: Point[]) => void;
+    onDeleteNode: (coordinates: Point[]) => void;
+    onFinishAnnoCreate: () => void;
+    onIsDraggingStateChanged: (newDraggingState: boolean) => void;
+    onMoving: (coordinates: Point[]) => void;
+    onMoved: () => void;
+    onNotification?: (notification: SIANotification) => void;
+};
+declare const Polygon: ({ annotationSettings, coordinates, isSelected, isDisabled, annotationMode, pageToStageOffset, svgScale, svgTranslation, style, onAddNode, onDeleteNode, onFinishAnnoCreate, onIsDraggingStateChanged, onMoving, onMoved, onNotification, }: PolygonProps) => import("react/jsx-runtime").JSX.Element;
+export default Polygon;

package/dist/Annotation/ui/tools/Polygon.js

@@ -0,0 +1 @@
+import{jsxs as q,jsx as C}from"react/jsx-runtime";import{useState as j,useRef as z,useEffect as F}from"react";import B from"../atoms/Node.js";import G from"../atoms/PolygonArea.js";import s from"../../../models/AnnotationMode.js";import H from"../atoms/Edge.js";import I from"../../../utils/mouse2.js";import L from"../../../models/NotificationType.js";const a=({annotationSettings:i,coordinates:e,isSelected:E,isDisabled:P=!1,annotationMode:t,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onAddNode:v,onDeleteNode:X,onFinishAnnoCreate:Y,onIsDraggingStateChanged:y,onMoving:R,onMoved:g,onNotification:N=m=>{}})=>{const[m,b]=j(!1),[d,x]=j(!1),M=z(d),_=()=>{if(e.length<3)return N({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:L.ERROR});Y()};F(()=>{M.current=d},[d]);const h=o=>{if(i.canEdit!==!1&&(E&&t!==s.CREATE&&t!==s.ADD&&o.button===0&&b(!0),o.button===2&&[s.CREATE,s.ADD].includes(t))){const n=I.getAntiScaledMouseStagePosition(o,f,u,p),r=[...e];r.push(n),v(r)}},D=o=>{if(m){const n=e.map(r=>({x:r.x+=o.movementX/u,y:r.y+=o.movementY/u}));(o.movementX!==0||o.movementY!==0)&&(x(!0),R(n))}if(t===s.CREATE){const n=I.getAntiScaledMouseStagePosition(o,f,u,p);let r=[...e];e.length>1&&(r=e.slice(0,-1)),r.push(n),R(r)}};F(()=>{if(y(m),!m)return;const o=()=>{b(!1),M.current&&g(),x(!1)};return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[m]);const $=()=>e.map((n,r)=>C(B,{index:r,annotationSettings:i,coordinates:n,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onDeleteNode:()=>{if(e.length<4)return N({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:L.ERROR});const l=[...e];l.splice(r,1),X(l)},onMoving:(l,w)=>{const A=[...e];A[l]=w,R(A)},onMoved:()=>g(),onIsDraggingStateChanged:y},`node_${r}`)),k=()=>e.map((n,r)=>{const l=r+1<e.length?e[r+1]:e[0];return C(H,{startCoordinate:n,endCoordinate:l,isDisabled:P&&E,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onAddNode:w=>{const A=[...e];A.splice(r+1,0,w),v(A)},onDoubleClick:()=>t===s.CREATE&&_(),onMouseDown:h,onMouseMove:D},`edge_${r}`)}),U=()=>C("circle",{cx:e[0].x,cy:e[0].y,r:"100%",style:{opacity:0},onMouseDown:h,onMouseMove:D,onContextMenu:o=>o.preventDefault()});return q("g",{children:[(m||t===s.CREATE||t===s.ADD)&&U(),C(G,{annotationSettings:i,coordinates:e,isSelected:E,isDisabled:P,annotationMode:t,pageToStageOffset:f,style:c,svgScale:u,onFinishAnnoCreate:_,onIsDraggingStateChanged:y,onMouseDown:h,onMouseMove:D}),E&&i.canEdit&&k(),E&&t!==s.CREATE&&$()]})};export{a as default};

package/dist/Canvas/Canvas.d.ts

@@ -0,0 +1,30 @@
+import { default as AnnotationTool } from '../models/AnnotationTool';
+import { default as Annotation } from '../Annotation/logic/Annotation';
+import { AnnotationSettings, Label, UiConfig, PolygonOperationResult, SIANotification } from '../types';
+type CanvasProps = {
+    annotations?: Annotation[];
+    annotationSettings: AnnotationSettings;
+    defaultLabelId?: number;
+    image: string;
+    isFullscreen?: boolean;
+    isImageJunk?: boolean;
+    isPolygonSelectionMode?: boolean;
+    selectedAnnotation: Annotation | undefined;
+    selectedAnnoTool: AnnotationTool;
+    toolbarHeight?: number;
+    polygonOperationResult?: PolygonOperationResult;
+    possibleLabels: Label[];
+    preventScrolling?: boolean;
+    uiConfig: UiConfig;
+    onAnnoCreated: (createdAnno: Annotation) => void;
+    onAnnoCreationFinished: (createdAnno: Annotation, hasAnnotationExisted: boolean) => void;
+    onAnnoChanged: (changedAnno: Annotation) => void;
+    onAnnoEditing: (annoToEdit: Annotation) => void;
+    onNotification?: (notification: SIANotification) => void;
+    onRequestNewAnnoId: () => number;
+    onSelectAnnotation: (annotation?: Annotation) => void;
+    onSetSelectedTool: (tool: AnnotationTool) => void;
+    onShouldDeleteAnno: (internalAnnoId: number) => void;
+};
+declare const Canvas: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetSelectedTool, onShouldDeleteAnno, }: CanvasProps) => import("react/jsx-runtime").JSX.Element;
+export default Canvas;

package/dist/Canvas/Canvas.js

@@ -0,0 +1 @@
+import{jsxs as L,jsx as p,Fragment as Xe}from"react/jsx-runtime";import{useState as m,useRef as fe,useEffect as D}from"react";import M from"../models/AnnotationTool.js";import i from"../models/EditorModes.js";import He from"../utils/KeyMapper.js";import a from"../models/KeyAction.js";import ge from"../Annotation/logic/Annotation.js";import $e from"../models/CanvasAction.js";import Ge from"../Annotation/ui/AnnotationComponent.js";import me from"../utils/mouse2.js";import N from"../models/AnnotationMode.js";import je from"./LabelInput.js";import{FontAwesomeIcon as Je}from"@fortawesome/react-fontawesome";import{faBan as Qe}from"@fortawesome/free-solid-svg-icons";import S from"../models/AnnotationStatus.js";import x from"../utils/transform2.js";import Ze from"../models/NotificationType.js";import qe from"../utils/TimeUtils.js";const Ct=({annotations:C=[],annotationSettings:W,defaultLabelId:J,image:Q,isFullscreen:ye=!1,isImageJunk:Z=!1,isPolygonSelectionMode:B=!1,polygonOperationResult:K={annotationsToDelete:[],polygonsToCreate:[]},possibleLabels:q,preventScrolling:ee=!0,selectedAnnotation:r,selectedAnnoTool:k,toolbarHeight:F=0,uiConfig:z,onAnnoCreated:Ee,onAnnoCreationFinished:te,onAnnoChanged:ne,onAnnoEditing:he=T=>{},onNotification:oe=T=>{},onRequestNewAnnoId:U,onSelectAnnotation:v,onSetSelectedTool:pe=T=>{},onShouldDeleteAnno:re})=>{const[T,A]=m(i.VIEW),[xe,Ce]=m(),[se,Te]=m(J),[R,Ae]=m({x:-1,y:-1}),[ie,ae]=m(0),V={x:R.x,y:R.y},[c,Y]=m({x:-1,y:-1}),[u,X]=m({x:-1,y:-1}),[y,ce]=m({x:-1,y:-1}),[d,P]=m(1),[f,w]=m({x:0,y:0}),H={x:f.x+ie,y:f.y},[E,$]=m(),[G,b]=m(!1),h=fe(null),g=fe(null),O=((e,t)=>{if(e.x===0||e.y===0||t.x===0||t.y===0)return 0;const n=t.x/e.x,o=t.y/e.y;return Math.min(n,o)})(c,u),Oe=()=>{if((g==null?void 0:g.current)===null)return{x:0,y:0};const e=c.x*O;if(z.imageCentered&&u.x>e){const l=(u.x-e)/2;ae(l)}else ae(0);const{top:t,left:n}=h.current.getBoundingClientRect(),o={x:n+window.scrollX,y:t+window.scrollY};Ae(o)},ve=new He(e=>_e(e)),Ie=e=>{A(i.CREATE);const t=x.convertStageCoordinatesToPercentaged([e],O,c);k===M.BBox&&t.push(t[0]);const n=U(),o=new ge(n,k,t);if(Ce(performance.now()),se!==void 0&&(o.labelIds=[se]),Ee(o),k===M.Point){const s={...o,coordinates:[e],annoTime:0};j(s)}},De=()=>{if(r&&![M.Line,M.Polygon].includes(r.type))return;const e=C.find(t=>t.internalId===(r==null?void 0:r.internalId));e!==void 0&&(e.mode=N.CREATE,e.status=S.CREATING,e.selectedNode=e.coordinates.length-1,A(i.ADD),pe(e.type),he(e))},Me=()=>{const e=r?r.internalId:0,t=C.find(n=>n.internalId>e);if(t)return v(t);if(C.length>0)return v(C[0])},Se=()=>{const e=r?r.internalId:0,t=[...C];t.sort((o,s)=>s.internalId-o.internalId);const n=t.find(o=>o.internalId<e);if(n)return v(n);if(C.length>0)return v(C[C.length-1])},we=()=>{if(r){const e=JSON.stringify(r);localStorage.setItem("lostAnnotationClipboard",e);const t={title:"Success",message:"Annotation copied",type:Ze.SUCCESS};oe(t)}},be=()=>{const e=localStorage.getItem("lostAnnotationClipboard");if(e==null)return;const t=JSON.parse(e);t.internalId=U(),t.externalId="",te(t,!0),v(t)},_e=e=>{switch(e){case a.EDIT_LABEL:r&&b(!0);break;case a.DELETE_ANNO:r&&re(r.internalId);break;case a.DELETE_ANNO_IN_CREATION:T===i.CREATE&&(re(r.internalId),A(i.VIEW));break;case a.ENTER_ANNO_ADD_MODE:console.log("KeyAction TODO: ENTER_ANNO_ADD_MODE");break;case a.LEAVE_ANNO_ADD_MODE:console.log("KeyAction TODO: LEAVE_ANNO_ADD_MODE");break;case a.UNDO:console.log("KeyAction TODO: UNDO");break;case a.REDO:console.log("KeyAction TODO: REDO");break;case a.TRAVERSE_ANNOS:Me();break;case a.TRAVERSE_ANNOS_BACKWARDS:Se();break;case a.CAM_MOVE_LEFT:_(20*d,0);break;case a.CAM_MOVE_RIGHT:_(-20*d,0);break;case a.CAM_MOVE_UP:_(0,20*d);break;case a.CAM_MOVE_DOWN:_(0,-20*d);break;case a.CAM_MOVE_STOP:console.log("KeyAction TODO: CAM_MOVE_STOP");break;case a.COPY_ANNOTATION:we();break;case a.PASTE_ANNOTATION:be();break;case a.RECREATE_ANNO:console.log("KeyAction TODO: RECREATE_ANNO"),De();break;default:console.log("Unknown KeyAction",e);break}},_=(e,t)=>{let n=f.x+e/d,o=f.y+t/d;const s=u.x*-.25,l=u.y*-.25,I=u.x*.75,Ye=u.y*.75;n<s&&(n+=25),n>I&&(n-=25),o<l&&(o+=25),o>Ye&&(o-=25),w({x:n,y:o})},Ne=(e=>y.x<=0||y.y<=0||c.x<=0||c.y<=0?[]:C.map(n=>({...n,coordinates:x.convertPercentagedCoordinatesToStage(n.coordinates,c,y)})))(),ke=()=>{if(A(i.VIEW),ce({x:-1,y:-1}),g.current!==null){const{width:e,height:t}=g.current.getBoundingClientRect();Y({x:e,y:t})}P(1),w({x:0,y:0}),$(void 0),b(!1)};D(()=>{if((h==null?void 0:h.current)!==void 0){const{width:e,height:t}=h.current.getBoundingClientRect(),n=t-F;X({x:e,y:n});const o=new ResizeObserver(()=>{const{width:s,height:l}=h.current.getBoundingClientRect(),I=l-F;X({x:s,y:I})});return o.observe(h.current),()=>o.disconnect()}ke()},[Q,ye]),D(()=>{Oe()},[g,f,u]),D(()=>{if(h.current===null)return;const{width:e,height:t}=h.current.getBoundingClientRect(),n=t-F;X({x:e,y:n})},[h]),D(()=>{if(g.current===null)return;const{width:e,height:t}=g.current.getBoundingClientRect();Y({x:e,y:t});const n=new ResizeObserver(()=>{const{width:o,height:s}=g.current.getBoundingClientRect();Y({x:o,y:s})});return n.observe(g.current),()=>n.disconnect()},[g]),D(()=>{if(O===0)return;const e={x:c.x*O,y:c.y*O};ce(e)},[O,c]),D(()=>{B&&K.polygonsToCreate!==void 0&&K.polygonsToCreate.forEach(e=>{const t=U(),n=new ge(t,e.type,x.convertPercentagedCoordinatesToStage(e.coordinates,c,y),N.VIEW,S.CREATED);j(n)})},[K]);const j=e=>{A(i.VIEW);const t={...e,mode:N.VIEW};if(e.type!==M.Point){const s=qe.getRoundedDuration(xe,performance.now());t.annoTime=s}const n=x.convertStageCoordinatesToPercentaged(e.coordinates,O,c);t.coordinates=n,ne(t);const o=k===M.Point||B;te(t,o)},Re=e=>{e.preventDefault(),ve.keyDown(e.key,e.shiftKey,e.ctrlKey)},Ve=e=>{e.preventDefault()},Pe=e=>{if(e.button!==0){if(e.button===1)A(i.CAMERA_MOVE);else if(e.button===2){if(!W.canCreate||T===i.ADD)return;const t=me.getAntiScaledMouseStagePosition(e,V,d,f),n={x:t.x-ie,y:t.y};Ie(n)}}},Le=()=>{ee&&(document.body.style.overflow="hidden")},We=e=>{switch(e.button){case 1:A(i.VIEW);break}},de=(e,t)=>{T===i.CAMERA_MOVE&&_(e,t)},Be=()=>{ee&&(document.body.style.overflow="")},Ke=e=>{const o=(e.deltaY<0?1:-1)>0?d*1.25:d/1.25,s=me.getAntiScaledMouseStagePosition(e,V,d,f),l=d/o,I={x:l*(s.x+f.x)-s.x,y:l*(s.y+f.y)-s.y};o<1?(P(1),(f.x!=0||f.y!=0)&&w({x:0,y:0})):o>200?(P(200),w(I)):(P(o),w(I))},Fe=(e,t)=>{if(t!==$e.ANNO_SELECTED){console.log("Unknown Canvas Action:",t);return}const n={...e,coordinates:x.convertStageCoordinatesToPercentaged([...e.coordinates],O,c)};v(n);const o=x.getMostLeftPoints(e.coordinates),s=x.getTopPoint(o)[0],l=x.convertStageToPage(s,V,d,f);$(l)},le=e=>{const t=x.convertStageCoordinatesToPercentaged(e.coordinates,O,c),n={...e,coordinates:t};n.status===S.LOADED&&(n.status=S.CHANGED),ne(n)},ze=()=>{if(T===i.CAMERA_MOVE)return p(Xe,{});const t=[i.CREATE,i.ADD,i.MOVE].includes(T),n=Ne.map(o=>{const s=o.internalId===(r==null?void 0:r.internalId);return t&&!s?p("g",{},`annotationComponent_${o.internalId}`):p(Ge,{scaledAnnotation:o,annotationSettings:W,possibleLabels:q,svgScale:d,svgTranslation:H,pageToStageOffset:V,nodeRadius:z.nodeRadius,strokeWidth:z.strokeWidth,isSelected:s,isDisabled:B&&s,onFinishAnnoCreate:j,onLabelIconClicked:()=>b(!0),onAction:Fe,onAnnoChanged:le,onAnnotationModeChange:l=>{l===N.MOVE&&A(i.MOVE),T===i.MOVE&&l===N.VIEW&&A(i.VIEW)},onNotification:oe},`annotationComponent_${o.internalId}`)});return p("g",{children:n})},Ue=()=>p("circle",{cx:y.x/2,cy:y.y/2,r:"100%",style:{opacity:0},onContextMenu:e=>e.preventDefault(),onClick:()=>{b(!1)}}),ue={x:R.x+u.x/2,y:R.y+u.y/2};return L("div",{ref:h,style:{width:"100%",height:"100%"},children:[p("div",{style:{position:"absolute",left:(E==null?void 0:E.x)!==void 0?E.x:0,top:(E==null?void 0:E.y)!==void 0?E.y:0,display:(E==null?void 0:E.y)!==void 0?"inherit":"none",zIndex:G?7e3:-1},children:p(je,{defaultLabelId:J,isVisible:G,selectedLabelsIds:r==null?void 0:r.labelIds,possibleLabels:q,isMultilabel:W.canHaveMultipleLabels,onLabelSelect:e=>{if(b(!1),e.length>0){const o=e.filter(s=>!r.labelIds.includes(s));o.length>0&&Te(o[0])}const t=r.status===S.LOADED?S.CHANGED:r.status,n={...r,coordinates:x.convertPercentagedCoordinatesToStage(r.coordinates,c,y),labelIds:[...e],status:t};le(n)}})}),Z&&L("div",{style:{position:"absolute",left:ue.x,top:ue.y,transform:"translate(-50%, -50%)",textAlign:"center",color:"white"},children:[p(Je,{icon:Qe,size:"5x",style:{marginBottom:15}}),p("h2",{children:"Marked as Junk"})]}),L("svg",{width:"100%",height:"100%",onKeyDown:Re,onKeyUp:Ve,onMouseMove:e=>de(e.movementX,e.movementY),tabIndex:0,children:[L("g",{transform:`scale(${d}) translate(${H.x}, ${H.y})`,onMouseOver:Le,onMouseLeave:Be,onMouseUp:We,onWheel:Ke,onMouseMove:e=>de(e.movementX,e.movementY),onClick:()=>{v(void 0)},children:[p("image",{onContextMenu:e=>e.preventDefault(),onMouseDown:e=>Pe(e),href:Q,ref:g,width:y.x>0?y.x:void 0,height:y.y>0?y.y:void 0}),ze()]}),G&&Ue(),Z&&p("rect",{x:"0",y:"0",width:u.x,height:u.y,style:{opacity:.8},onContextMenu:e=>e.preventDefault(),onClick:()=>{$(void 0)}})]})]})};export{Ct as default};

package/dist/Canvas/LabelInput.d.ts

@@ -0,0 +1,11 @@
+import { Label } from '../types';
+type LabelInputProps = {
+    defaultLabelId?: number;
+    isVisible: boolean;
+    selectedLabelsIds: number[];
+    possibleLabels: Label[];
+    isMultilabel?: boolean;
+    onLabelSelect: (selectedLabelIds: number[]) => void;
+};
+declare const LabelInput: ({ defaultLabelId, isVisible, selectedLabelsIds, possibleLabels, isMultilabel, onLabelSelect, }: LabelInputProps) => import("react/jsx-runtime").JSX.Element;
+export default LabelInput;

package/dist/Canvas/LabelInput.js

@@ -0,0 +1 @@
+import{jsxs as r,Fragment as v,jsx as o}from"react/jsx-runtime";import{useState as g}from"react";import{CPopover as w,CDropdown as D,CDropdownToggle as x,CDropdownMenu as y,CFormInput as F,CDropdownDivider as I,CDropdownItem as c}from"@coreui/react";const S=({defaultLabelId:i,isVisible:d,selectedLabelsIds:l,possibleLabels:s,isMultilabel:m=!1,onLabelSelect:f})=>{const[a,C]=g(""),p=s.filter(e=>e.name.toLowerCase().includes(a.toLowerCase())),h=e=>{let n=[];if(m){n=[...l];const u=l.indexOf(e.id);u!==-1?n.splice(u,1):n.push(e.id)}else n=[e.id];f(n)},t=i?s.find(e=>e.id===i):void 0;return r(v,{children:[o(w,{content:`Default Label: ${t==null?void 0:t.name}`,visible:d&&t!==void 0,children:o("div",{style:{marginLeft:80}})}),r(D,{visible:d,autoClose:!1,style:{marginTop:-25},children:[o(x,{style:{display:"none"}}),r(y,{children:[o("div",{className:"px-3 py-2",children:o(F,{placeholder:"Filter label...",value:a,onChange:e=>C(e.target.value),autoFocus:!0})}),o(I,{}),p.length>0?p.map(e=>o(c,{onClick:()=>h(e),children:e.name},e.id)):o(c,{disabled:!0,children:"No results"})]})]})]})};export{S as default};

package/dist/Canvas.js

@@ -0,0 +1 @@
+import{jsx as h,jsxs as A}from"react/jsx-runtime";import E,{Component as Y}from"react";import{uniqueId as B}from"lodash-es";import J from"./Annotation/Annotation.js";import W from"./AnnoLabelInput.js";import F from"./AnnoToolBar.js";import $ from"./ImgBar.js";import Z from"./LabelInput.js";import j from"./Prompt.js";import{Button as q,Icon as D,Dimmer as O,Loader as Q,Header as tt}from"semantic-ui-react";import{DATABASE as w,NEW as g,DELETED as C,CHANGED as y}from"./types/annoStatus.js";import{IMG_JUNK_UPDATE as et,CANVAS_IMG_LOADED as st,ANNO_COMMENT_UPDATE as _,ANNO_CREATED_FINAL_NODE as it,ANNO_CREATED_NODE as U,ANNO_LABEL_UPDATE as R,ANNO_DELETED as L,ANNO_EDITED as nt,ANNO_REMOVED_SPECIFIC_NODE as at,ANNO_REMOVED_NODE as ot,ANNO_ADDED_NODE as ht,ANNO_ENTER_EDIT_MODE as lt,ANNO_ENTER_MOVE_MODE as rt,ANNO_MOVED as dt,ANNO_CREATED as V,ANNO_START_CREATING as pt,ANNO_SELECTED as gt,ANNO_MARK_EXAMPLE as P,ANNO_ENTER_CREATE_MODE as T,CANVAS_IMGBAR_CLOSE as mt,IMG_LABEL_UPDATE as N,CANVAS_LABEL_INPUT_CLOSE as ct,IMG_ANNO_TIME_UPDATE as ut,CANVAS_SVG_UPDATE as ft,CANVAS_UI_CONFIG_UPDATE as At}from"./types/canvasActions.js";import{VIEW as l,CAMERA_MOVE as v,ADD as k,DELETED as m,CREATE as c,EDIT as vt,MOVE as bt,EDIT_LABEL as St}from"./types/modes.js";import{POSITIVE_POINT as M,NEGATIVE_POINT as x,SAM_BBOX as b,BBOX as It,POINT as Et}from"./types/tools.js";import{fixBackendAnnos as H,canvasToBackendAnnos as X,canvasToBackendSingleAnno as Lt,backendAnnosToCanvas as Mt}from"./utils/annoConversion.js";import{getColor as wt,getDefaultColor as Ct}from"./utils/colorlut.js";import yt from"./utils/hist.js";import Tt,{RECREATE_ANNO as Nt,PASTE_ANNOTATION as kt,COPY_ANNOTATION as xt,CAM_MOVE_STOP as Bt,CAM_MOVE_DOWN as Dt,CAM_MOVE_UP as Ot,CAM_MOVE_RIGHT as _t,CAM_MOVE_LEFT as Ut,TRAVERSE_ANNOS as Rt,REDO as Vt,UNDO as Pt,LEAVE_ANNO_ADD_MODE as Ht,ENTER_ANNO_ADD_MODE as Xt,DELETE_ANNO_IN_CREATION as Gt,TOGGLE_ANNO_COMMENT_INPUT as Kt,DELETE_ANNO as zt,EDIT_LABEL as Yt}from"./utils/keyActions.js";import{getMousePositionAbs as Jt}from"./utils/mouse.js";import{correctAnnotation as G,getArea as Wt}from"./utils/transform.js";import{getZoomTranslation as K,getViewportCoordinates as z}from"./utils/windowViewport.js";import Ft from"./InfoBoxes/InfoBoxArea.js";/* empty css        */class be extends Y{constructor(t){super(t),this.state={svg:{width:"100%",height:"100%",scale:1,translateX:0,translateY:0},image:{width:void 0,height:void 0},imageOffset:{x:0,y:0},annos:[],mode:l,selectedAnnoId:void 0,showSingleAnno:void 0,showLabelInput:!1,imageLoaded:!1,imgLoadCount:0,imgLabelIds:[],imgLabelChanged:!1,imgAnnoTime:0,imgLoadTimestamp:0,performedImageInit:!1,prevLabel:[],imageBlob:void 0,isJunk:t.isJunk,imgBarVisible:!1,annoToolBarVisible:!1,possibleLabels:void 0,annoCommentInputTrigger:0,imgActions:[],isDrawingSamBBox:!1,samBBoxStartPoint:null},this.img=E.createRef(),this.svg=E.createRef(),this.container=E.createRef(),this.hist=new yt,this.keyMapper=new Tt(e=>this.handleKeyAction(e)),this.mousePosAbs=void 0,this.clipboard=void 0,this.delayedBackendUpdates={},this.tempIdMap={}}componentDidMount(){this.updatePossibleLabels(),Number.isInteger(this.props.defaultLabel)&&this.setState({prevLabel:[this.props.defaultLabel]}),this.props.onGetFunction&&this.props.onGetFunction({deleteAllAnnos:()=>this.deleteAllAnnos(),unloadImage:()=>this.unloadImage(),resetZoom:()=>this.resetZoom(),getAnnos:(t,e)=>this.getAnnos(t,e)})}componentDidUpdate(t,e){t.annoSaveResponse!==this.props.annoSaveResponse&&this.updateAnnoBySaveResponse(this.props.annoSaveResponse),t.imageMeta!==this.props.imageMeta&&this.props.imageMeta&&this.setState({imgLabelIds:this.props.imageMeta.labelIds,imgAnnoTime:this.props.imageMeta.annoTime,imgActions:this.props.imageMeta.imgActions?this.props.imageMeta.imgActions:[],imgLoadTimestamp:performance.now()}),t.annos!==this.props.annos&&this.state.imageBlob&&this.updateCanvasView(H(this.props.annos)),t.isJunk!==this.props.isJunk&&this.state.isJunk!==this.props.isJunk&&(this.setState({isJunk:this.props.isJunk}),this.state.imageLoaded&&!this.props.isImageChanging&&this.handleAnnoSaveEvent(et,void 0,{isJunk:this.props.isJunk})),this.state.imageBlob!==this.props.imageBlob&&this.setState({imageBlob:this.props.imageBlob}),this.props.possibleLabels!==t.possibleLabels&&this.updatePossibleLabels(),this.state.performedImageInit&&(this.setState({performedImageInit:!1,annoToolBarVisible:!1}),this.props.uiConfig.imgBarVisible&&this.setState({imgBarVisible:!0}),this.hist.clearHist(),this.hist.push({...this.getAnnos(),selectedAnnoId:void 0},"init")),this.state.imageLoaded&&(this.putSelectedOnTop(e),e.imgLoadCount!==this.state.imgLoadCount&&(this.updateCanvasView(H(this.props.annos)),this.props.imageMeta&&(this.setImageLabels(this.props.imageMeta.labelIds),this.setState({performedImageInit:!0}))),t.layoutUpdate!==this.props.layoutUpdate&&(this.selectAnnotation(void 0),this.updateCanvasView(X(this.state.annos,this.state.svg,!1,this.state.imageOffset))))}onImageLoad(){this.setState({imageLoaded:!0,imgLoadCount:this.state.imgLoadCount+1,showLabelInput:!1,showSingleAnno:void 0,selectedAnnoId:void 0}),this.triggerCanvasEvent(st)}onMouseOver(){this.svg.current.focus(),this.props.preventScrolling&&(document.body.style.overflow="hidden")}onMouseLeave(){this.props.preventScrolling&&(document.body.style.overflow="")}onWheel(t){const e=t.deltaY<0,s=this.getMousePosition(t),i=1.25;let n;e?n=this.state.svg.scale*i:n=this.state.svg.scale/i;let a;return n<1?(n=1,a={x:0,y:0}):n>200?(n=200,a=K(s,this.state.svg,n)):a=K(s,this.state.svg,n),this.setState({svg:{...this.state.svg,scale:n,translateX:a.x,translateY:a.y}}),!1}onRightClick(t){t.preventDefault()}onMouseDown(t){if(t.button===0)this.selectAnnotation(void 0);else if(t.button===1)this.setMode(v);else if(t.button===2){if(this.props.selectedTool===M||this.props.selectedTool===x||this.props.selectedTool===b)return;this.createNewAnnotation(t)}}onAnnoMouseDown(t){if(t.button===1)this.setMode(v);else if(t.button===2){if(this.props.selectedTool===M||this.props.selectedTool===x||this.props.selectedTool===b)return;this.createNewAnnotation(t)}else if(t.button===0&&this.state.showLabelInput){const e=this.findAnno(this.state.selectedAnnoId);this.updateSelectedAnno(e,l),this.showSingleAnno(void 0),this.showLabelInput(!1)}}onMouseUp(t){switch(t.button){case 1:this.setMode(l);break}}updateAnnoComment(t){const e=this.findAnno(this.state.selectedAnnoId);e.comment=t,this.handleAnnoEvent(e,_)}handleKeyAction(t){const e=this.findAnno(this.state.selectedAnnoId),s=20*this.state.svg.scale;switch(console.log("handleKeyAction",t,e),t){case Yt:const i=this.findAnnoRef(this.state.selectedAnnoId);let n;i!==void 0&&(n=i.current.myAnno.current.getResult()),this.editAnnoLabel(n);break;case zt:this.deleteAnnotation(e);break;case Kt:this.state.selectedAnnoId&&this.setState({annoCommentInputTrigger:this.state.annoCommentInputTrigger+1});break;case Gt:this.deleteAnnoInCreationMode(e);break;case Xt:e&&this.updateSelectedAnno(e,k);break;case Ht:e&&this.updateSelectedAnno(e,l);break;case Pt:this.undo();break;case Vt:this.redo();break;case Rt:this.traverseAnnos();break;case Ut:this.moveCamera(s,0);break;case _t:this.moveCamera(-s,0);break;case Ot:this.moveCamera(0,s);break;case Dt:this.moveCamera(0,-s);break;case Bt:break;case xt:this.copyAnnotation();break;case kt:this.pasteAnnotation(0);break;case Nt:this.state.selectedAnnoId&&this.recreateAnnotation(this.state.selectedAnnoId);break}}onKeyDown(t){t.preventDefault(),this.keyMapper.keyDown(t.key),this.props.onKeyDown&&this.props.onKeyDown(t)}onKeyUp(t){t.preventDefault(),this.keyMapper.keyUp(t.key),this.props.onKeyUp&&this.props.onKeyUp(t)}onMouseMove(t){this.state.mode===v&&this.moveCamera(t.movementX,t.movementY)}onLabelInputDeleteClick(t){this.removeSelectedAnno()}triggerCanvasEvent(t,e){this.props.onCanvasEvent&&this.props.onCanvasEvent(t,e)}checkAndCorrectAnno(t){const e=G(t.data,this.state.svg,this.state.imageOffset);let s={...t,data:e};const i=Wt(e,this.state.svg,t.type,this.state.image);return i!==void 0&&i<this.props.canvasConfig.annos.minArea&&(this.handleNotification({title:"Annotation to small",message:"Annotation area was "+Math.round(i)+"px but needs to be bigger than "+this.props.canvasConfig.annos.minArea+" px",type:void 0}),s={...s,mode:m}),this.checkAnnoLength(t)||(s={...s,mode:m}),s}handleAnnoEvent(t,e){let s,i;switch(console.log("canvasActions: ",t,e),e){case T:break;case P:s=this.updateSelectedAnno(t,l),this.pushHist(s,t.id,e,this.state.showSingleAnno),this.handleAnnoSaveEvent(e,t);break;case gt:this.selectAnnotation(t.id);break;case pt:s=this.updateSelectedAnno(t),this.pushHist(s,t.id,e,this.state.showSingleAnno);break;case V:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),s=this.updateSelectedAnno({...t,status:w},l),this.pushHist(s,t.id,e,void 0),this.showSingleAnno(void 0),this.setState({annoToolBarVisible:!0}),this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case dt:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),s=this.updateSelectedAnno(t,l),this.showSingleAnno(void 0),this.pushHist(s,t.id,e,void 0),this.setState({annoToolBarVisible:!0}),this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case rt:t=this.startAnnotimeMeasure(t),this.updateSelectedAnno(t,bt),this.showSingleAnno(t.id),this.setState({annoToolBarVisible:!1});break;case lt:t=this.startAnnotimeMeasure(t),this.updateSelectedAnno(t,vt),this.setState({annoToolBarVisible:!1});break;case ht:i=[...this.state.imgActions,e],s=this.updateSelectedAnno(t,k),this.pushHist(s,t.id,e,this.state.showSingleAnno),this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case ot:i=[...this.state.imgActions,e],this.checkAnnoLength(t)?s=this.updateSelectedAnno(t,c):(s=this.updateSelectedAnno(t,m),this.showSingleAnno(void 0)),this.pushHist(s,t.id,e,this.state.showSingleAnno),t.status!==g&&this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case at:i=[...this.state.imgActions,e],this.checkAnnoLength(t)?s=this.updateSelectedAnno(t,k):(s=this.updateSelectedAnno(t,m),this.showSingleAnno(void 0)),this.pushHist(s,t.id,e,this.state.showSingleAnno),t.status!==g&&this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case nt:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),s=this.updateSelectedAnno(t,l),this.pushHist(s,t.id,e,this.state.showSingleAnno),this.setState({annoToolBarVisible:!0}),this.handleAnnoSaveEvent(e,t,{imgActions:i});break;case L:i=[...this.state.imgActions,e];const n=this.updateSelectedAnno(t,m,!0);s=n.newAnnos,this.selectAnnotation(void 0),this.showSingleAnno(void 0),this.pushHist(s,void 0,e,this.state.showSingleAnno),this.handleAnnoSaveEvent(e,n.newAnno,{imgActions:i});break;case _:i=[...this.state.imgActions,e];const a=this.updateSelectedAnno(t,l,!0);s=a.newAnnos,this.pushHist(s,t.id,e,this.state.showSingleAnno),this.handleNotification({title:"Saved comment",message:`Saved comment: ${t.comment}`,type:void 0}),this.handleAnnoSaveEvent(e,a.newAnno,{imgActions:i});break;case R:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),t=this.checkAndCorrectAnno(t),t.mode===m?this.updateSelectedAnno(t,m):this.updateSelectedAnno({...t,status:w},l),this.setState({annoToolBarVisible:!0}),t.mode!==m&&(this.pushHist(s,t.id,e,void 0),this.handleAnnoSaveEvent(e,t,{imgActions:i}));break;case U:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),s=this.updateSelectedAnno(t,c),this.pushHist(s,t.id,e,this.state.showSingleAnno);break;case it:i=[...this.state.imgActions,e],t=this.stopAnnotimeMeasure(t),s=this.updateSelectedAnno({...t,status:w},l),this.pushHist(s,t.id,e,void 0),this.showSingleAnno(void 0),this.setState({annoToolBarVisible:!0}),this.handleAnnoSaveEvent(e,t,{imgActions:i});break}i&&this.setState({imgActions:i}),this.props.onAnnoEvent&&this.props.onAnnoEvent(t,s,e)}handleAnnoSaveEvent(t,e,s){const i={...s,imgId:this.props.imageMeta.id,annoTime:this.props.imageMeta.annoTime+(performance.now()-this.state.imgLoadTimestamp)/1e3};let n;if(e){let o=this.addDelayedBackendUpdate(e,t);if(!o)return;o.id in this.tempIdMap&&(o={...o,id:this.tempIdMap[o.id]}),n=Lt(o,this.state.svg,!1,this.state.imageOffset)}const a={anno:n,img:i,action:t};this.props.onAnnoSaveEvent&&this.props.onAnnoSaveEvent(a)}onAnnoLabelInputUpdate(t){this.updateSelectedAnno(t)}onAnnoLabelInputClose(){this.svg.current.focus(),this.showLabelInput(!1),this.showSingleAnno(void 0);const t=this.findAnno(this.state.selectedAnnoId);this.handleAnnoEvent(t,R)}handleImgBarClose(){this.triggerCanvasEvent(mt)}gotNewLabel(t){let e=!1;return t.length===0?this.state.imgLabelIds.length!==0:(t.forEach(s=>{this.state.imgLabelIds.includes(s)||(e=!0)}),e)}handleImgLabelUpdate(t){if(this.gotNewLabel(t)){const e=[...this.state.imgActions,N];this.setState({imgLabelIds:t,imgLabelChanged:!0,imgActions:e}),this.pushHist(this.state.annos,this.state.selectedAnnoId,N,this.state.showSingleAnno,t);const s={imgLabelIds:t,imgLabelChanged:!0,imgActions:e};this.handleAnnoSaveEvent(N,void 0,s)}}handleCanvasClick(t){this.props.uiConfig.imgBarVisible&&this.setState({imgBarVisible:!0})}handleContextMenu(t){if(t.preventDefault(),this.props.selectedTool===M||this.props.selectedTool===x){const{x:e,y:s}=this.getMousePosition(t),i=this.state.svg.width-2*this.state.imageOffset.x,n=this.state.svg.height-2*this.state.imageOffset.y,a=(e-this.state.imageOffset.x)/i,o=(s-this.state.imageOffset.y)/n,p=this.props.selectedTool===M?"positive":"negative";this.props.onSamPointClick(e,s,a,o,p)}}handleMouseDown(t){if(this.props.selectedTool===b){if(t.button!==2)return;t.preventDefault();const{x:e,y:s}=this.getMousePosition(t);this.setState({isDrawingSamBBox:!0,samBBoxStartPoint:{x:e,y:s}}),this.props.onUpdateSamBBox({x:e,y:s,width:0,height:0})}}handleImgBarMouseEnter(t){this.setState({imgBarVisible:!1})}handleImgLabelInputClose(){this.triggerCanvasEvent(ct)}handleSvgMouseMove(t){if(this.mousePosAbs=Jt(t,this.state.svg),this.props.selectedTool===b){if(!this.state.isDrawingSamBBox||!this.state.samBBoxStartPoint)return;const{x:e,y:s}=this.getMousePosition(t),i=this.state.samBBoxStartPoint,n=this.state.svg.width-2*this.state.imageOffset.x,a=this.state.svg.height-2*this.state.imageOffset.y,o=Math.min(i.x,e),p=Math.min(i.y,s),r=Math.abs(e-i.x),d=Math.abs(s-i.y),u=(o-this.state.imageOffset.x)/n,f=(p-this.state.imageOffset.y)/a,S=(o+r-this.state.imageOffset.x)/n,I=(p+d-this.state.imageOffset.y)/a;this.props.onUpdateSamBBox({x:o,y:p,width:r,height:d,xMinNorm:u,yMinNorm:f,xMaxNorm:S,yMaxNorm:I})}}handleMouseUp(t){if(this.props.selectedTool===b){if(t.button!==2)return;t.preventDefault(),this.setState({isDrawingSamBBox:!1})}}handleMouseLeave(t){this.props.selectedTool===b&&this.setState({isDrawingSamBBox:!1})}handleNotification(t){this.props.onNotification&&this.props.onNotification(t)}handleHideLbl(t,e){let s=!1;const i=this.state.annos.map(n=>{const a={...n};return n.labelIds.includes(t.id)?(a.visible=!e,n.id===this.state.selectedAnnoId&&(s=!0)):n.labelIds.length===0&&t.id===-1&&(a.visible=!e,n.id===this.state.selectedAnnoId&&(s=!0)),a});this.setState({annos:i}),s&&this.selectAnnotation(void 0)}handleMarkExample(t){const e={...t};e.isExample==null?e.isExample=!0:e.isExample?e.isExample=!1:e.isExample=!0,this.handleAnnoEvent(e,P)}copyAnnotation(){this.clipboard=this.findAnno(this.state.selectedAnnoId),this.handleNotification({title:"Copyed annotation to clipboard",message:"Copyed "+this.clipboard.type,type:void 0})}pasteAnnotation(t=0){if(this.clipboard){const e=B("new"),s=this.clipboard.data.map(n=>({x:n.x+t,y:n.y+t})),i={...this.clipboard,id:e,annoTime:0,status:g,mode:l,data:G(s,this.state.svg,this.state.imageOffset)};this.handleNotification({title:"Pasted annotation to canvas",message:"Pasted and selected "+this.clipboard.type,type:void 0}),this.handleAnnoEvent(i,V)}}checkAnnoLength(t){return t.type==="polygon"&&t.data.length<3?(this.handleNotification({title:"Invalid polygon!",message:"A vaild polygon needs at least 3 points!",type:void 0}),!1):!0}startAnnotimeMeasure(t){return t.timestamp=performance.now(),t}stopAnnotimeMeasure(t){if(t.timestamp!==void 0){let e=performance.now();return t.annoTime+=(e-t.timestamp)/1e3,t.timestamp=e,t}return t}updatePossibleLabels(){if(!this.props.possibleLabels||this.props.possibleLabels.length<=0)return;let t=this.props.possibleLabels;t=t.map(e=>"color"in e?{...e}:{...e,color:wt(e.id)}),this.setState({possibleLabels:[...t]})}editAnnoLabel(t){if(this.state.selectedAnnoId){let e;t===void 0?e=this.findAnno(this.state.selectedAnnoId):e={...t},e=this.startAnnotimeMeasure(e),this.showLabelInput(),this.updateSelectedAnno(e,St)}}unloadImage(){this.state.imageLoaded&&this.setState({imageLoaded:!1}),this.handleAnnoSaveEvent(ut,void 0,void 0)}findAnno(t){return this.state.annos.find(e=>e.id===t)}findAnnoRef(t){if(this.state.selectedAnnoId!==void 0)return this.annoRefs.find(e=>e.current?e.current.isSelected():!1)}pushHist(t,e,s,i,n=this.state.imgLabelIds){this.hist.push({...this.getAnnos(t,!1),selectedAnnoId:e,showSingleAnno:i,imgLabelIds:n},s)}undo(){this.handleNotification({title:"Redo/ Undo not supported",message:"Redo and Undo functions are currently not supported",type:void 0})}redo(){this.handleNotification({title:"Redo/ Undo not supported",message:"Redo and Undo functions are currently not supported",type:void 0})}deleteAnnotation(t){if(t)if(t.mode===c){const e=this.findAnnoRef(this.state.selectedAnnoId);e!==void 0&&e.current.myAnno.current.removeLastNode()}else this.handleAnnoEvent(t,L)}deleteAnnoInCreationMode(t){t&&t.mode===c&&this.handleAnnoEvent(t,L)}deleteAllAnnos(){this.state.annos.forEach(t=>{if(typeof t.id!="string"){const e={...t,status:C};this.handleAnnoEvent(e,L)}}),this.selectAnnotation(void 0),this.showSingleAnno(void 0)}setCanvasState(t,e,s,i){this.updateCanvasView({...t}),this.setImageLabels([...e]),this.selectAnnotation(s),this.setState({showSingleAnno:i})}isLocked(t){return!!(this.props.lockedAnnos&&this.props.lockedAnnos.includes(t))}selectAnnotation(t){if(this.isLocked(t)){this.handleNotification({title:"Annotation locked",message:`Annotation with id ${t} is locked and can not be edited`,type:void 0});return}if(t){const e=this.findAnno(t);this.setState({selectedAnnoId:t}),e&&e.mode!==c&&this.setState({annoToolBarVisible:!0})}else this.setState({selectedAnnoId:void 0,annoToolBarVisible:!1}),this.state.showLabelInput&&this.onAnnoLabelInputClose()}traverseAnnos(){if(this.state.annos.length>0){const t=this.state.annos.filter(e=>e.status!==C&&!this.isLocked(e.id)&&e.visible!==!1);if(t.length>0)if(!this.state.selectedAnnoId)this.selectAnnotation(t[0].id);else{let e=t.findIndex(s=>s.id===this.state.selectedAnnoId);e+1<t.length?this.selectAnnotation(t[e+1].id):this.selectAnnotation(t[0].id)}}}getAnnos(t=void 0,e=!0){const s=t||this.state.annos,i=X(s,this.state.svg,e,this.state.imageOffset);return{imgId:this.props.imageMeta.id,imgLabelIds:this.state.imgLabelIds,imgLabelChanged:this.state.imgLabelChanged,imgActions:this.state.imgActions,annotations:i,isJunk:this.state.isJunk,annoTime:this.props.imageMeta.annoTime+(performance.now()-this.state.imgLoadTimestamp)/1e3}}resetZoom(){this.setState({svg:{...this.state.svg,translateX:0,translateY:0,scale:1}})}moveCamera(t,e){let s=this.state.svg.translateX+t/this.state.svg.scale,i=this.state.svg.translateY+e/this.state.svg.scale;const n=this.state.svg.width*.25,a=this.state.svg.width*.75,o=this.state.svg.height*.25,p=this.state.svg.height*.75,r=z({x:0,y:0},this.state.svg),d=z({x:this.state.svg.width,y:this.state.svg.height},this.state.svg);r.vX>=n?s=this.state.svg.translateX-5:d.vX<=a&&(s=this.state.svg.translateX+5),r.vY>=o?i=this.state.svg.translateY-5:d.vY<=p&&(i=this.state.svg.translateY+5),this.setState({svg:{...this.state.svg,translateX:s,translateY:i}})}setMode(t){this.state.mode!==t&&this.setState({mode:t})}getMousePosition(t){const e=this.getMousePositionAbs(t);return{x:e.x/this.state.svg.scale-this.state.svg.translateX,y:e.y/this.state.svg.scale-this.state.svg.translateY}}getMousePositionAbs(t){return{x:t.pageX-this.svg.current.getBoundingClientRect().left,y:t.pageY-this.svg.current.getBoundingClientRect().top}}showLabelInput(t=!0){this.setState({showLabelInput:t}),t&&this.showSingleAnno(this.state.selectedAnnoId)}createNewAnnotation(t){let e=!1;if(!this.keyMapper.controlDown&&!this.keyMapper.shiftDown){if(this.props.selectedTool){const s=this.props.canvasConfig.annos.maxAnnos;s?this.state.annos.length<s?e=!0:this.handleNotification({title:"Maximum number of annotations reached!",message:`Only ${s} annotations per image are allowed by config`,type:void 0}):e=!0}else this.handleNotification({title:"No tool selected!",message:"Please select an annotation tool in the toolbar.",type:void 0});if(e){const s=this.getMousePosition(t);let i={id:this.props.nextAnnoId?this.props.nextAnnoId:B("new"),type:this.props.selectedTool,data:[{x:s.x,y:s.y},{x:s.x,y:s.y}],mode:c,status:g,labelIds:this.state.prevLabel,selectedNode:1,annoTime:0};if(i=this.startAnnotimeMeasure(i),this.setState({annos:[...this.state.annos,i],selectedAnnoId:i.id,showSingleAnno:i.id,annoToolBarVisible:!1}),this.props.selectedTool!==It&&this.props.selectedTool!==Et){const n=this.mergeSelectedAnno(i);this.pushHist(n.newAnnos,i.id,U,i.id)}this.handleAnnoEvent(i,T)}}}recreateAnnotation(t){let e=this.state.annos,s,i;for(var n in e)if(e[n].id==t){s=n,i=e[n];break}if(!["line","polygon"].includes(i.type))return;this.state.annos.splice(s,1);let a={id:i.id,type:i.type,data:i.data,mode:c,status:i.status==="database"||i.status==="changed"?y:g,labelIds:i.labelIds,selectedNode:i.data.length-1,annoTime:i.annoTime};a=this.startAnnotimeMeasure(a),this.setState({annos:[...this.state.annos,a],selectedAnnoId:a.id,showSingleAnno:a.id,annoToolBarVisible:!1}),this.handleAnnoEvent(a,T)}putSelectedOnTop(t){if(this.state.selectedAnnoId&&t.selectedAnnoId!==this.state.selectedAnnoId){const e=this.state.annos.filter(i=>i.id!==this.state.selectedAnnoId),s=this.state.annos.find(i=>i.id===this.state.selectedAnnoId);e.push(s),this.setState({annos:[...e]})}}getLabel(t){return this.state.possibleLabels.find(e=>e.id===t)}getAnnoColor(){if(this.state.selectedAnnoId){const t=this.findAnno(this.state.selectedAnnoId);if(t&&t.labelIds.length>0)return this.getLabel(t.labelIds[0]).color}return Ct()}updateDelayedBackendUpdates(t,e){if(t!==e&&(this.tempIdMap[t]=e),t in this.delayedBackendUpdates)if(this.delayedBackendUpdates[t]!==null){const{anno:s,action:i}=this.delayedBackendUpdates[t],n={...s,status:s.status===g?y:s.status};delete this.delayedBackendUpdates[t],this.handleAnnoSaveEvent(i,n)}else delete this.delayedBackendUpdates[t]}addDelayedBackendUpdate(t,e){if(this.props.onAnnoSaveEvent){if(typeof t.id=="string"&&!(t.id in this.tempIdMap)){let s;return t.id in this.delayedBackendUpdates?this.delayedBackendUpdates[t.id]={anno:t,action:e}:(this.delayedBackendUpdates[t.id]=null,s=t),s}}else console.error("onAnnoSaveEvent needs to be provided in order to use SIA Canvas in a correct war!");return t}updateAnnoBySaveResponse(t){if(t&&t.tempId!==t.dbId){if(!this.findAnno(t.tempId))return;this.updateDelayedBackendUpdates(t.tempId,t.dbId)}}updateSelectedAnno(t,e=void 0,s=!1){if(!t)return;const{newAnnos:i,newAnno:n}=this.mergeSelectedAnno(t,e);return this.setState({annos:i,selectedAnnoId:t.id,prevLabel:t.labelIds}),s?{newAnnos:i,newAnno:n}:i}updateAnno(t,e=void 0,s=!1){if(!t)return;const{newAnnos:i,newAnno:n}=this.mergeSelectedAnno(t,e);return this.setState({annos:i}),s?{newAnnos:i,newAnno:n}:i}mergeSelectedAnno(t,e=void 0){let s=this.state.annos.filter(a=>a.id!==t.id);s=s.map(a=>({...a,mode:l}));let i;return e?(i={...t,mode:e},e===m?t.status!==g?i={...i,status:C}:i=null:i={...i,status:t.status!==g?y:g}):i={...t},i!==null&&s.push(i),{newAnnos:[...s],newAnno:i}}showSingleAnno(t){this.state.showSingleAnno!==t&&this.setState({showSingleAnno:t})}updateImageSize(){var t=this.props.container.current.getBoundingClientRect(),e=document.documentElement.clientHeight,s,i,n,a;const o=this.props.uiConfig.layoutOffset;o?(s=t.top+o.top,i=t.left+o.left,n=e-t.top-o.bottom-o.top,a=t.right-i-o.right):(s=t.top,i=t.left,n=e-t.top,a=t.right-i);var p=this.img.current.naturalWidth/this.img.current.naturalHeight,r="100%",d="100%";n*p>a?(r=a,d=a/p):(r=n*p,d=n);var u;const f={x:0,y:0};if(this.props.uiConfig.maxCanvas)f.x=(a-r)/2,f.y=(n-d)/2,u={...this.state.svg,width:a,height:n,left:i,top:s};else{if(this.props.uiConfig.centerCanvasInContainer){const S=a-r;S>2&&(i=i+S/2);const I=n-d;I>2&&(s=s+I/2)}u={...this.state.svg,width:r,height:d,left:i,top:s}}return this.setState({svg:u,image:{width:this.img.current.naturalWidth,height:this.img.current.naturalHeight},imageOffset:f}),this.svgUpdate(u),{imgWidth:this.props.fixedImageSize?this.props.fixedImageSize:r,imgHeight:this.props.fixedImageSize?this.props.fixedImageSize:d,imgOffset:f}}svgUpdate(t){this.triggerCanvasEvent(ft,t)}setImageLabels(t){t!==this.state.imgLabelIds&&this.setState({imgLabelIds:t})}updateCanvasView(t){if(t){const e=this.updateImageSize();this.setState({annos:[...Mt(t,{width:e.imgWidth,height:e.imgHeight},e.imgOffset)]})}}renderAnnotations(){if(this.state.mode!==v){this.annoRefs=[];const t=this.state.annos.map(e=>(this.annoRefs.push(E.createRef()),h(J,{type:e.type,data:e,svg:{...this.state.svg},imageOffset:this.state.imageOffset,ref:this.annoRefs[this.annoRefs.length-1],onMouseDown:s=>this.onAnnoMouseDown(s),onAction:(s,i)=>this.handleAnnoEvent(s,i),selectedAnno:this.state.selectedAnnoId,showSingleAnno:this.state.showSingleAnno,uiConfig:this.props.uiConfig,allowedActions:this.props.canvasConfig.annos.actions,possibleLabels:this.state.possibleLabels,image:this.state.image,canvasConfig:this.props.canvasConfig,onNotification:s=>this.handleNotification(s),defaultLabel:this.props.defaultLabel},e.id)));return h("g",{children:t})}else return null}renderImgLabelInput(){return this.props.imageMeta?h(j,{onClick:()=>this.handleImgLabelInputClose(),active:this.props.uiConfig.imgLabelInputVisible,header:h("div",{children:"Add label for the whole image"}),content:A("div",{children:[h(Z,{multilabels:this.props.canvasConfig.img.multilabels,visible:!0,onLabelUpdate:t=>this.handleImgLabelUpdate(t),possibleLabelsProp:this.state.possibleLabels,initLabelIds:this.state.imgLabelIds,relatedId:this.props.imageMeta.id,defaultLabel:this.props.defaultLabel}),A(q,{basic:!0,color:"green",inverted:!0,onClick:()=>this.handleImgLabelInputClose(),children:[h(D,{name:"check"}),"OK"]})]})}):null}renderAnnoToolBar(t){let e=this.state.annoToolBarVisible;return this.state.mode===v&&(e=!1),h(F,{visible:e,selectedAnno:t,svg:this.state.svg,onClick:()=>this.editAnnoLabel(),color:this.getAnnoColor()})}renderAnnoLabelInpput(t){let e=this.state.showLabelInput;return this.state.mode===v&&(e=!1),h(W,{svg:this.state.svg,onClose:()=>this.onAnnoLabelInputClose(),onDeleteClick:s=>this.onLabelInputDeleteClick(s),selectedAnno:t,visible:e,onLabelUpdate:s=>this.onAnnoLabelInputUpdate(s),possibleLabels:this.state.possibleLabels,allowedActions:this.props.canvasConfig.annos.actions,multilabels:this.props.canvasConfig.annos.multilabels,mousePos:this.mousePosAbs,defaultLabel:this.props.defaultLabel})}renderSamPoints(){return this.props.samPoints.map((t,e)=>h("circle",{cx:t.x,cy:t.y,r:5,fill:t.type==="positive"?"lightgreen":"lightcoral"},e))}renderSamBBox(){return this.props.samBBox&&h("rect",{x:this.props.samBBox.x,y:this.props.samBBox.y,width:this.props.samBBox.width,height:this.props.samBBox.height,fill:"rgba(0, 0, 255, 0.1)",stroke:"blue",strokeWidth:"2"})}render(){const t=this.findAnno(this.state.selectedAnnoId);return A("div",{ref:this.container,children:[A("div",{height:this.state.svg.height,style:{position:this.props.isStaticPosition?"static":"fixed",top:this.state.svg.top,left:this.state.svg.left},children:[this.renderImgLabelInput(),h($,{container:this.container,visible:this.state.imgBarVisible,possibleLabels:this.state.possibleLabels,annos:this.props.annos,annoTaskId:this.props.annoTaskId,svg:this.state.svg,imageMeta:this.props.imageMeta,onClose:()=>this.handleImgBarClose(),imgLabelIds:this.state.imgLabelIds,onMouseEnter:e=>this.handleImgBarMouseEnter(e)}),h(O,{active:!this.state.imageLoaded||this.props.blocked,children:(!this.state.imageLoaded||this.props.blocked)&&h(Q,{children:"Loading"})}),h(O,{active:this.state.isJunk,children:this.state.isJunk&&A(tt,{as:"h2",icon:!0,inverted:!0,style:{background:"rgba(0,0,0,0)"},children:[h(D,{name:"ban"}),"Marked as Junk"]})}),this.renderAnnoToolBar(t),this.renderAnnoLabelInpput(t),h(Ft,{container:this.props.container,layoutUpdate:this.props.layoutUpdate,annos:this.state.annos,selectedAnno:t,possibleLabels:this.state.possibleLabels,allowedToMarkExample:this.props.canvasConfig.allowedToMarkExample,uiConfig:this.props.uiConfig,imgLoadCount:this.state.imgLoadCount,onCommentUpdate:e=>this.updateAnnoComment(e),onUiConfigUpdate:e=>this.triggerCanvasEvent(At,e),onHideLbl:(e,s)=>this.handleHideLbl(e,s),onMarkExample:e=>this.handleMarkExample(e),commentInputTrigger:this.state.annoCommentInputTrigger,onGetAnnoExample:e=>this.props.onGetAnnoExample?this.props.onGetAnnoExample(e):{},exampleImg:this.props.exampleImg}),h("svg",{ref:this.svg,width:this.props.fixedImageSize?this.props.fixedImageSize:this.state.svg.width,height:this.props.fixedImageSize?this.props.fixedImageSize:this.state.svg.height,onKeyDown:e=>this.onKeyDown(e),onKeyUp:e=>this.onKeyUp(e),onClick:e=>this.handleCanvasClick(e),onMouseMove:e=>this.handleSvgMouseMove(e),onContextMenu:e=>this.handleContextMenu(e),onMouseDown:e=>this.handleMouseDown(e),onMouseUp:e=>this.handleMouseUp(e),onMouseLeave:e=>this.handleMouseLeave(e),tabIndex:"0",children:A("g",{transform:`scale(${this.state.svg.scale}) translate(${this.state.svg.translateX}, ${this.state.svg.translateY})`,onMouseOver:()=>{this.onMouseOver()},onMouseLeave:()=>{this.onMouseLeave()},onMouseUp:e=>{this.onMouseUp(e)},onWheel:e=>this.onWheel(e),onMouseMove:e=>{this.onMouseMove(e)},children:[h("image",{onContextMenu:e=>this.onRightClick(e),onMouseDown:e=>this.onMouseDown(e),href:this.props.imageBlob,width:this.props.fixedImageSize?this.props.fixedImageSize:this.state.svg.width,height:this.props.fixedImageSize?this.props.fixedImageSize:this.state.svg.height}),this.renderAnnotations(),this.renderSamPoints(),this.renderSamBBox()]})}),h("img",{alt:"sia",style:{display:"none"},ref:this.img,onLoad:()=>{this.onImageLoad()},src:this.state.imageBlob,width:"100%",height:"100%"})]}),h("div",{style:{minHeight:this.state.svg.height}})]})}}export{be as default};