lost-sia/dist/ToolBar.js

Single Image Annotation Tool

import{jsx as e,jsxs as a,Fragment as I}from"react/jsx-runtime";import{faPaperPlane as E,faSquare as ee,faTrashCan as ne}from"@fortawesome/free-regular-svg-icons";import{faSave as te,faTag as oe,faSearch as ie,faArrowRight as ae,faArrowLeft as le,faPlusCircle as re,faMinusCircle as ce,faVectorSquare as de,faBan as S,faTrash as se,faMaximize as fe,faQuestion as ue,faCheck as Ce}from"@fortawesome/free-solid-svg-icons";import{useState as s,useRef as he,useEffect as ge}from"react";import{Card as t,Button as T}from"semantic-ui-react";import b from"./Prompt.js";import me from"./SIAFilterButton.js";import ve from"./SIASettingButton.js";/* empty css           */import{CSidebar as Ie,CSidebarNav as Ee}from"@coreui/react";import{FontAwesomeIcon as f}from"@fortawesome/react-fontawesome";import l from"./ToolbarItem.js";import{SAVE as Se,SHOW_IMAGE_LABEL_INPUT as Te,GET_NEXT_IMAGE as be,GET_PREV_IMAGE as ke,TOOL_SELECTED as Ae,IMG_IS_JUNK as Pe,DELETE_ALL_ANNOS as Be,SET_FULLSCREEN as Le,TASK_FINISHED as Re,CLEAR_SAM_HELPER_ANNOS as He}from"./types/toolbarEvents.js";import{POSITIVE_POINT as k,NEGATIVE_POINT as A,SAM_BBOX as P,POINT as B,LINE as L,BBOX as R,POLYGON as H}from"./types/tools.js";import{pointIcon as Ne,lineIcon as we,polygonIcon as Fe}from"./utils/siaIcons.js";const Ze=n=>{const[d,N]=s({left:0,top:5,width:40}),[u,w]=s(!1),[C,F]=s(!1),h=he(null),g={background:"#1b1c1d"};ge(()=>{_()},[n.layoutUpdate,n.svg]);const c=(i,o)=>{r(Ae,o)},_=()=>{if(!n.enabled)return;if(h.current.getBoundingClientRect()&&n.svg){let o=n.svg.top+n.svg.height/6;N({...d,left:n.svg.left-55,top:o})}},y=()=>{r(be)},G=()=>{r(ke)},O=()=>{r(Re)},m=()=>{w(!u)},M=()=>{r(Le)},D=()=>{r(Te)},x=()=>{r(Pe)},v=()=>{F(!C)},U=()=>{r(Be)},K=()=>{r(Se)},r=(i,o)=>{n.onToolBarEvent&&n.onToolBarEvent(i,o)},V=()=>{if(!n.canvasConfig||!n.enabled.toolSelection||!n.canvasConfig.annos.actions.draw)return null;let i=[];return n.canvasConfig.tools.sam&&(i.push(e(l,{color:"#0081FB",active:n.active.selectedTool===k,onClick:o=>c(o,k),faIcon:re})),i.push(e(l,{color:"#0081FB",active:n.active.selectedTool===A,onClick:o=>c(o,A),faIcon:ce})),i.push(e(l,{color:"#0081FB",active:n.active.selectedTool===P,onClick:o=>c(o,P),faIcon:ee})),i.push(e(l,{color:"#0081FB",onClick:o=>r(He),faIcon:ne}))),n.canvasConfig.tools.point&&i.push(e(l,{active:n.active.selectedTool===B,onClick:o=>c(o,B),siaIcon:Ne()})),n.canvasConfig.tools.line&&i.push(e(l,{active:n.active.selectedTool===L,onClick:o=>c(o,L),siaIcon:we()})),n.canvasConfig.tools.bbox&&i.push(e(l,{active:n.active.selectedTool===R,onClick:o=>c(o,R),faIcon:de})),n.canvasConfig.tools.polygon&&i.push(e(l,{active:n.active.selectedTool===H,onClick:o=>c(o,H),siaIcon:Fe()})),i},W=()=>e(b,{active:u,header:a("div",{children:[e(f,{icon:E}),"  Do you wish to FINISH this SIA Task?"]}),content:a("div",{children:[a(T,{basic:!0,color:"green",inverted:!0,onClick:()=>O(),children:[e(f,{icon:Ce}),"   Yes"]}),a(T,{basic:!0,color:"red",inverted:!0,onClick:()=>m(),children:[e(f,{icon:S}),"   No"]})]})}),J=()=>{let i=[];return n.enabled.nextPrev?(n.imageMeta&&(n.imageMeta.isLast?i.push(a(I,{children:[e(l,{onClick:()=>m(),faIcon:E}),W()]})):i.push(e(l,{onClick:()=>y(),faIcon:ae})),i.push(e(l,{disabled:n.imageMeta.isFirst,onClick:()=>G(),faIcon:le}))),i):null},j=()=>n.enabled.junk?e(l,{active:n.active.isJunk,onClick:()=>x(),faIcon:S}):null,X=()=>n.enabled.deleteAll?e(l,{onClick:()=>U(),faIcon:se}):null,Y=()=>n.enabled.save?e(l,{onClick:()=>K(),faIcon:te}):null,Z=()=>n.enabled.help?a(I,{children:[e(l,{onClick:()=>v(),faIcon:ue}),e(b,{active:C,onClick:()=>v(),content:e("div",{children:a(t.Group,{children:[a(t,{children:[e(t.Content,{header:"How to draw?"}),e(t.Content,{description:"1.) Select a Tool in the toolbar 2.) Draw with RIGHT CLICK on Canvas"})]}),a(t,{children:[e(t.Content,{header:"How to delete an annotation?"}),e(t.Content,{description:"1.) Select an annotation with LEFT CLICK 2.) Press DELETE or BACKSPACE"})]}),a(t,{children:[e(t.Content,{header:"How to assign a label?"}),e(t.Content,{description:"1.) Select an annotation with LEFT CLICK 2.) Hit ENTER 3.) Type into the input field 4.) Hit ENTER to confirm 5.) Hit ESCAPE to close the input field"})]}),a(t,{children:[e(t.Content,{header:"Undo/ Redo"}),e(t.Content,{description:"Undo: Hit STRG + Z"}),e(t.Content,{description:"Redo: Hit STRG + R"})]}),a(t,{children:[e(t.Content,{header:"Add/ Remove a node to Line/Polygon"}),e(t.Content,{description:"Add: Hit STRG + Click left on the line"}),e(t.Content,{description:"Remove: Hit STRG + Click left on the node to delete"})]}),a(t,{children:[e(t.Content,{header:"Remove a node from Line/Polygon in create mode"}),e(t.Content,{description:"Press DELETE or BACKSPACE"})]}),a(t,{children:[e(t.Content,{header:"Edit Line/Polygon"}),e(t.Content,{description:"1.) Click on the Annotation you want to edit."}),e(t.Content,{description:'2.) Press "e". New nodes can now be added using right click'})]}),a(t,{children:[e(t.Content,{header:"Zoom/ Move Canvas"}),e(t.Content,{description:"Zoom: Use MOUSE WHEEL to zoom in/out"}),e(t.Content,{description:"Move: Hold MOUSE WHEEL and move mouse. Or Use W/A/S/D keys to move camera up/left/down/right"})]}),a(t,{children:[e(t.Content,{header:"TAB navigation"}),e(t.Content,{description:"You can traverse all visible annotation by hitting TAB."})]}),a(t,{children:[e(t.Content,{header:"Next/Prev image navigation"}),e(t.Content,{description:"Get next image by hitting ARROW_RIGHT key. Get previous image by hitting ARROW_LEFT key."})]}),a(t,{children:[e(t.Content,{header:"Copy and Paste annotations"}),e(t.Content,{description:"Copy: 1.) Select annotation 2.) Hit STRG + C"}),e(t.Content,{description:"Paste: STRG + V"})]}),a(t,{children:[e(t.Content,{header:"Mark image as junk"}),e(t.Content,{description:"1.) Press J key"})]}),a(t,{children:[e(t.Content,{header:"Assign a comment to a 2D annoation"}),e(t.Content,{description:"1.) Select annotation 2.) Hit C key"})]})]})})})]}):null,q=()=>{if(!n.enabled.imgLabel)return null;if(n.canvasConfig.img.actions.label)return e(l,{onClick:()=>D(),faIcon:oe})},z=()=>n.enabled.imgSearch?e(l,{faIcon:ie,onClick:()=>{if(n.onImgageSearchClicked)return n.onImgageSearchClicked()}}):null,Q=()=>n.enabled.fullscreen?e(l,{active:n.active.fullscreen,onClick:()=>M(),faIcon:fe}):null,$=()=>n.enabled.settings?e(ve,{enabled:n.enabled.settings,uiConfig:n.uiConfig,onSettingEvent:(i,o)=>r(i,o),toolbarItemStyle:g}):null,p=()=>!n.enabled.filter||!n.filter?null:e(me,{enabled:n.enabled.filter,onFilterEvent:(i,o)=>r(i,o),filter:n.filter,imageMeta:n.imageMeta,toolbarItemStyle:g});return n.enabled?e("div",{ref:h,style:{position:"fixed",top:d.top,left:d.left},children:e(Ie,{narrow:!0,className:"sia-toolbar",children:a(Ee,{children:[$(),p(),Y(),q(),z(),J(),V(),j(),X(),Q(),Z()]})})}):null};export{Ze as default};