react-image-label/dist/index.js

A comprehensive package for tagging images.

"use strict";var z=Object.create;var w=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var U=(t,n)=>{for(var a in n)w(t,a,{get:n[a],enumerable:!0})},A=(t,n,a,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let h of G(n))!B.call(t,h)&&h!==a&&w(t,h,{get:()=>n[h],enumerable:!(d=T(n,h))||d.enumerable});return t};var D=(t,n,a)=>(a=t!=null?z(V(t)):{},A(n||!t||!t.__esModule?w(a,"default",{value:t,enumerable:!0}):a,t)),k=t=>A(w({},"__esModule",{value:!0}),t);var O={};U(O,{Circle:()=>l.Circle,Dot:()=>l.Dot,Ellipse:()=>l.Ellipse,ImageAnnotator:()=>H,Point:()=>l.Point,Polygon:()=>l.Polygon,Rectangle:()=>l.Rectangle,Shape:()=>l.Shape,useImageAnnotator:()=>M});module.exports=k(O);var g=D(require("react")),o=require("image-labeling");function E(t,{insertAt:n}={}){if(!t||typeof document>"u")return;let a=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css",n==="top"&&a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.styleSheet?d.styleSheet.cssText=t:d.appendChild(document.createTextNode(t))}E(`.il-svg{overflow-y:scroll;margin:0 auto;display:block;background-color:#fff}.il-hid{display:none}.seg-point{cursor:pointer}.grabbable{cursor:move;cursor:grab}.grabbable:active{cursor:grabbing}.grabbable+.move-icon,.grabbable+.rot-icon{opacity:.4}.grabbable:hover+.move-icon,.grabbable:hover+.rot-icon,.rot-icon:hover{opacity:.9}.class-names{user-select:none}
`);var H=t=>{let n=()=>o.Director.instance,a=(0,g.useRef)(null),d=i=>{let r=n();if(!i)return;r.setMaxId(Math.max(...i.map(e=>e.id??0)));let c=i.filter(e=>e instanceof o.Rectangle||e.type==="rectangle").map(e=>new o.Rectangle([...e.points],e.categories,e.color,e.id)),f=i.filter(e=>e instanceof o.Polygon||e.type==="polygon").map(e=>new o.Polygon([...e.points],e.categories,e.color,e.id)),y=i.filter(e=>e instanceof o.Circle||e.type==="circle").map(e=>new o.Circle(e.centre,e.radius,e.categories,e.color,e.id)),m=i.filter(e=>e instanceof o.Ellipse||e.type==="ellipse").map(e=>new o.Ellipse(e.centre,e.radiusX,e.radiusY,e.categories,e.phi||0,e.color,e.id)),s=i.filter(e=>e instanceof o.Dot||e.type==="dot").map(e=>new o.Dot(e.position,e.categories,e.color,e.id));c.length>0&&r.plot(c),f.length>0&&r.plot(f),y.length>0&&r.plot(y),m.length>0&&r.plot(m),s.length>0&&r.plot(s)},h=(i,r=!0)=>{let c=n();i=c.setSizeAndRatio(i,r),c.zoom(i)},u=()=>{let i=n();i.stopDraw(),i.stopEdit()},x=()=>({drawRectangle(){u(),n().startDraw(new o.Rectangle)},drawPolygon(){u(),n().startDraw(new o.Polygon)},drawCircle(){u(),n().startDraw(new o.Circle)},drawEllipse(){u(),n().startDraw(new o.Ellipse)},drawDot(){u(),n().startDraw(new o.Dot)},stop:u,stopEdit:()=>n().stopEdit(),edit:i=>n().edit(i),delete:i=>n().removeById(i),updateCategories:(i,r,c)=>n().updateCategories(i,r,c),zoom:h,getShapes:n().getShapes}),R=g.default.useCallback((i,r,c)=>{let f=m=>{let s=m.bbox(),e=s.width,v=s.height,S=1,C=r.parentElement?.scrollWidth??0,p=o.Util.toPx(C,t.width),b=o.Util.toPx(C,t.height);Object.assign(r.style,{width:(p||e)+"px",height:(b||v)+"px",overflow:"hidden",backgroundColor:"#e6e6e6"}),t.naturalSize||(p||(p=r.scrollWidth),b||(b=r.scrollHeight),p/b>s.width/s.height?S=Math.min(b,s.height)/v:S=Math.min(p,s.width)/e),m.size("100%","100%");let P={width:e,height:v,ratio:S,discRadius:t.discRadius||5,hb:t.hideBorder,shortcut:t.shortcut,categoryOpt:t.categoryOpt||{vertical:"top"}};o.Director.init(i,P,r),d(t.shapes),t.setHandles({...x(),container:r}),t.onReady?.({...x(),container:r})};var y=i.image(c,f).size("","").attr("onmousedown","return false").attr("oncontextmenu","return false");y.on("testEvent",m=>f(new o.ImageEl(m.detail.testTarget)))},[t.width,t.height,t.shapes]);return(0,g.useEffect)(()=>{let i=[{type:o.ActType.Added,func:t.onAdded},{type:o.ActType.Edited,func:t.onEdited},{type:o.ActType.Selected,func:t.onSelected},{type:o.ActType.CtxMenu,func:t.onContextMenu}];return o.Director.setActions(i),()=>o.Director.setActions([])},[t.onAdded,t.onEdited,t.onContextMenu,t.onSelected]),(0,g.useEffect)(()=>{if(a.current&&t.imageUrl){var i=a.current.parentElement;R(new o.SVGSVGEl(a.current),i,t.imageUrl)}return()=>{o.Director.clear(a.current||void 0)}},[a,t.imageUrl,t.shapes]),g.default.createElement("div",null,g.default.createElement("svg",{ref:a}))};var l=require("image-labeling");var I=D(require("react")),M=()=>{let[t,n]=I.default.useState();return{setHandles:n,annotator:t}};0&&(module.exports={Circle,Dot,Ellipse,ImageAnnotator,Point,Polygon,Rectangle,Shape,useImageAnnotator});
//# sourceMappingURL=index.js.map