lost-sia/dist/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.js

Single Image Annotation Tool

import{jsx as t,jsxs as u}from"react/jsx-runtime";import{useState as y,useRef as f,useCallback as D}from"react";import{CTooltip as S,CDropdown as F,CDropdownToggle as R,CDropdownMenu as I,CFormInput as T,CDropdownDivider as E,CDropdownItem as p}from"@coreui/react";import{FontAwesomeIcon as N}from"@fortawesome/react-fontawesome";import{faTag as W}from"@fortawesome/free-solid-svg-icons";import b from"./TagLabel.js";const O=({isDisabled:m,isVisible:h,isFullscreen:g=!1,selectedLabelsIds:n,possibleLabels:a,isMultilabel:v=!1,onLabelSelect:x})=>{const[s,w]=y(""),i=f(null),l=f(null),C=D(e=>{if(i.current&&l.current&&i.current.removeEventListener("wheel",l.current),i.current=e,l.current=null,!e)return;const r=o=>{o.preventDefault(),e.scrollLeft+=o.deltaY*.2};l.current=r,e.addEventListener("wheel",r,{passive:!1})},[]),c=a.filter(e=>e.name.toLowerCase().includes(s.toLowerCase())),d=e=>{let r=[];if(v){r=[...n??[]];const o=(n??[]).indexOf(e.id);o===-1?r.push(e.id):r.splice(o,1)}else r=[e.id];x(r)},L=()=>a.filter(r=>n?.includes(r.id));return t(S,{content:"Add Image Label",children:u(F,{visible:h,autoClose:"outside",children:[t(R,{variant:"outline",caret:!1,color:m?"secondary":"primary",as:"div",children:(()=>{if(!n||n.length===0)return t("div",{children:t(N,{icon:W})});const e=L();return t("div",{ref:C,style:{display:"flex",flexWrap:"nowrap",overflowX:"auto",maxWidth:g?"500px":"300px",alignItems:"center",gap:"10px",scrollbarWidth:"thin"},className:"tag-scroll",children:e.map(r=>t(b,{name:r.name,color:r.color,size:25,triangleSize:17,style:{flexShrink:0},onRemove:()=>d(r)},r.name))})})()}),u(I,{as:"div",style:{padding:0},children:[t("div",{className:"px-3 py-2",children:t(T,{placeholder:"Filter label...",value:s,onChange:e=>w(e.target.value),autoFocus:!0})}),t(E,{}),t("div",{style:{maxHeight:"200px",overflowY:"auto"},children:c.length>0?c.map(e=>{const r=n?.includes(e.id);return t(p,{onClick:()=>d(e),active:r,children:e.name},e.id)}):t(p,{disabled:!0,children:"No results"})})]})]})})};export{O as default};