lost-sia/dist/Annotation/Annotation.js

Single Image Annotation Tool

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};