lost-sia/dist/Annotation/BBox.js

Single Image Annotation Tool

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