lost-sia 2.0.1-alpha0 → 2.0.1-alpha10

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

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

@@ -0,0 +1,30 @@
+import { Point } from '../../types';
+import { default as Annotation } from './Annotation';
+declare const _default: {
+    addNode: (annotation: Annotation, point: Point) => {
+        internalId: number;
+        externalId?: string;
+        annoTime?: number;
+        coordinates: Point[];
+        labelIds?: number[];
+        mode: import('../../models').AnnotationMode;
+        selectedNode: number;
+        status: import('../../models').AnnotationStatus;
+        type: import('../../models').AnnotationTool;
+        timestamp?: DOMHighResTimeStamp;
+    };
+    startAnnotimeMeasure: (annotation: Annotation) => {
+        internalId: number;
+        externalId?: string;
+        annoTime?: number;
+        coordinates: Point[];
+        labelIds?: number[];
+        mode: import('../../models').AnnotationMode;
+        selectedNode: number;
+        status: import('../../models').AnnotationStatus;
+        type: import('../../models').AnnotationTool;
+        timestamp?: DOMHighResTimeStamp;
+    };
+    stopAnnotimeMeasure: (annotation: Annotation) => [Annotation, number];
+};
+export default _default;

package/dist/Annotation/logic/AnnotationUtils.js

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