image-labeling
Version:
A comprehensive package for tagging images.
4 lines • 35.6 kB
JavaScript
"use strict";var K=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var et=Object.prototype.hasOwnProperty;var it=(o,i)=>{for(var t in i)K(o,t,{get:i[t],enumerable:!0})},st=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of tt(i))!et.call(o,s)&&s!==t&&K(o,s,{get:()=>i[s],enumerable:!(e=U(i,s))||e.enumerable});return o};var rt=o=>st(K({},"__esModule",{value:!0}),o);var nt={};it(nt,{ActType:()=>R,Circle:()=>w,Color:()=>E,Director:()=>V,Dot:()=>v,Ellipse:()=>x,ImageEl:()=>Y,Polygon:()=>b,Rectangle:()=>g,SVGSVGEl:()=>G,Shape:()=>y,Util:()=>a});module.exports=rt(nt);var p=class p{};p.ArrayXYSum=(...i)=>i.reduce((t,e)=>[t[0]+e[0],t[1]+e[1]],[0,0]),p.rotate=(i,t,e)=>{let s=i[0]-t[0],r=i[1]-t[1],n=e*Math.PI/180;return[s*Math.cos(n)-r*Math.sin(n)+t[0],s*Math.sin(n)+r*Math.cos(n)+t[1]]},p.fileName=i=>i?.substring(i.lastIndexOf("/")+1)||"",p.parseColor=i=>{let t;if(i[0]==="#"){i=i.substring(1,i.length>=7?7:4);var e=i.length/3,s=[17,1][e-1];t=[Math.round(parseInt(i.substring(0,e),16)*s),Math.round(parseInt(i.substring(e,2*e),16)*s),Math.round(parseInt(i.substring(2*e,3*e),16)*s)]}else t=i.split("(")[1].split(")")[0].split(",").map(r=>+r);return t.length<4&&t.push(1),t},p.removeOpacity=i=>{if(i[0]==="#"||i.startsWith("rgb")){let t=p.parseColor(i);return`rgb(${t[0]},${t[1]},${t[2]})`}else return i},p.toPx=(i,t)=>{if(typeof t=="string"){if(t.endsWith("%"))return parseInt(t)/100*i;if(t.match("^[0-9]*(.[0-9]+)?(px)?$"))return parseInt(t)}else return t},p.touchPos=(i,t=!1)=>{for(var e=i.target;e.parentElement&&!(e instanceof SVGSVGElement);)e=e.parentElement;let s=e.getBoundingClientRect();var r=t?i.changedTouches[0]:i.targetTouches[0];return{X:r.clientX-s.left,Y:r.clientY-s.top}};var a=p;var y=class{constructor(i=[],t=0,e,s=0){this.categories=i;this.phi=t;this.color=e;this.id=s;this.getCenterWithOffset=()=>({X:0,Y:0})}getOutput(i,t){let e=this.output(i),s=this.getCenter(),r=t.node.getBoundingClientRect();return e.id=this.id,this.color&&(e.color=this.color),e.phi=Math.round(this.phi),e.getCenterWithOffset=()=>({X:s[0]+r.x,Y:s[1]+r.y}),e}rotatePosition(){let i=this.labelPosition("bottom");return[i[0],i[1]+10]}},v=class o extends y{constructor(t=[-100,-100],e=[],s,r=0){super(e,0,s,r);this.position=t;this.categories=e;this.color=s;this.id=r;this.type="dot"}labelPosition(t){let e;return t==="bottom"?e=[this.position[0],this.position[1]+30]:e=[this.position[0],this.position[1]-30],e}getCenter(){return this.position}zoom(t){this.position=[this.position[0]*t,this.position[1]*t]}output(t){return new o([Math.round(this.position[0]/t),Math.round(this.position[1]/t)],this.categories)}centerChanged(t){this.position=t}},D=class extends y{constructor(t=[],e=[],s,r=0){super(e,0,s,r);this.points=t;this.categories=e;this.color=s;this.id=r}labelPosition(t){let e=this.points.map(r=>r[0]).filter((r,n)=>n<this.points.length-1).reduce((r,n)=>r+n,0)/(this.points.length-1),s;return t==="bottom"?s=Math.max(...this.points.map(r=>r[1]))+14:t==="middle"?s=this.getCenter()[1]:s=Math.min(...this.points.map(r=>r[1]))-14,[e,s]}outPoints(t){let e=this.getCenter();return this.points.filter((s,r)=>r<this.points.length-1).map(s=>{let r=a.rotate([s[0]/t,s[1]/t],[e[0]/t,e[1]/t],this.phi);return[Math.round(r[0]),Math.round(r[1])]})}getCenter(){if(this.points.length===0)return[0,0];let t=this.points.map(s=>s[0]).filter((s,r)=>r<this.points.length-1).reduce((s,r)=>s+r,0)/(this.points.length-1),e=(Math.min(...this.points.map(s=>s[1]))+Math.max(...this.points.map(s=>s[1])))/2;return[t,e]}centerChanged(t){let e=this.getCenter(),s=t[0]-e[0],r=t[1]-e[1];this.points.forEach(n=>{n[0]+=s,n[1]+=r})}zoom(t){this.points=this.points.map(e=>[e[0]*t,e[1]*t])}},E=(d=>(d.BlackDisc="#000",d.GreenDisc="#009900",d.GrayDisc="#a6a6a6",d.BlackLine="#000",d.GreenLine="#030",d.LightGreenLine="#ccffcc",d.RedLine="#f00",d.WhiteLine="#fff",d.ShapeFill="#ffffff00",d))(E||{}),R=(s=>(s[s.Added=0]="Added",s[s.Edited=1]="Edited",s[s.Selected=2]="Selected",s[s.CtxMenu=3]="CtxMenu",s))(R||{}),g=class o extends D{constructor(){super(...arguments);this.type="rectangle"}output(t){return new o(this.outPoints(t),this.categories)}},b=class o extends D{constructor(){super(...arguments);this.type="polygon"}output(t){return new o(this.outPoints(t),this.categories)}},L=class extends y{constructor(t=[0,0],e=[],s=0,r,n=0){super(e,s,r,n);this.centre=t;this.categories=e;this.phi=s;this.color=r;this.id=n}getCenter(){return this.centre}centerChanged(t){this.centre=t}},w=class o extends L{constructor(t=[0,0],e=0,s=[],r,n=0){super(t,s,0,r,n);this.centre=t;this.radius=e;this.categories=s;this.color=r;this.id=n;this.type="circle";this.output=t=>new o([Math.round(this.centre[0]/t),Math.round(this.centre[1]/t)],Math.round(this.radius/t),this.categories)}get width(){return 2*this.radius}set width(t){this.radius=t/2}get height(){return 2*this.radius}set height(t){this.radius=t/2}labelPosition(t){let e;return t==="bottom"?e=this.centre[1]+this.radius+14:t==="middle"?e=this.centre[1]:e=this.centre[1]-this.radius-14,[this.centre[0],e]}zoom(t){this.centre=[this.centre[0]*t,this.centre[1]*t],this.radius*=t}},x=class o extends L{constructor(t=[0,0],e=0,s=0,r=[],n=0,l,c=0){super(t,r,n,l,c);this.centre=t;this.radiusX=e;this.radiusY=s;this.categories=r;this.phi=n;this.color=l;this.id=c;this.type="ellipse";this.output=t=>new o([Math.round(this.centre[0]/t),Math.round(this.centre[1]/t)],Math.round(this.radiusX/t),Math.round(this.radiusY/t),this.categories)}get width(){return 2*this.radiusX}set width(t){this.radiusX=t/2}get height(){return 2*this.radiusY}set height(t){this.radiusY=t/2}labelPosition(t){let e;return t==="bottom"?e=this.centre[1]+this.radiusY+14:t==="middle"?e=this.centre[1]:e=this.centre[1]-this.radiusY-14,[this.centre[0],e]}zoom(t){this.centre=[this.centre[0]*t,this.centre[1]*t],this.radiusX*=t,this.radiusY*=t}};var h=class o{constructor(i,t){this.onEdited=i;this.enlist=t;this.svg=o._svg;this.sd=o._sd;this.moveIcon=i=>`M${i[0]+11.3},${i[1]}l-4.6-4.6v2.4h-4.5v-4.5h2.4l-4.6,-4.6l-4.6,4.6h2.4v4.5h-4.5v-2.4l-4.6,4.6l4.6,4.6v-2.4h4.5v4.5h-2.4l4.6,4.6
l4.6-4.6h-2.4v-4.5h4.5v2.4l4.6-4.6z`;this.rotateIcon=i=>`M${i[0]+5.2},${i[1]+4.5}a7,7,0,1,1,0-8l-3,3h9v-9l-3,3a11+11,0,1,0,0+14z`;this.rotateArr=[];this.canRotate=!0;this.drawing=!1}drawDisc(i,t,e,s){return this.svg.circle(e).fill(s).move(i,t)}rotate(i=this.element){if(!this.canRotate)return;let t=i.shape,e=t.getCenter(),s=[i,i.shadow,i.connector,...i.discs];i.editing&&s.push(...this.rotateArr),s.forEach(r=>r?.attr("transform",`rotate(${t.phi},${e[0]},${e[1]})`))}basePlotShape(){let i=this.shape;this.plotShape(),this.rotate(),this.setOptions(this.element,i.categories,i.color)}labeledStyle(i,t,e){i.stroke({color:e?a.removeOpacity(e):t?"#fff":"#f00"})}setOptions(i,t,e){let s=t.length>0;if(this.labeledStyle(i,s,e),i.fill(e||"#ffffff00"),this.sd.hb&&this.canHB&&([i.shadow,...i.discs].forEach(r=>r.addClass("il-hid")),i.stroke({width:0})),i.categoriesPlain&&i.categoriesPlain.remove(),i.categoriesRect&&i.categoriesRect.remove(),s){let r=i.shape.labelPosition(this.sd.categoryOpt.vertical),n=t.join(", ");i.categoriesPlain=this.svg.plain(n).font(12,"bold");let l=i.categoriesPlain.bbox().width,c=i.categoriesPlain.bbox().height;i.categoriesRect=this.svg.rect(l,c).radius(2).move(r[0]-l/2,r[1]-c/2).fill("#ffffff80"),i.categoriesPlain.remove(),i.categoriesPlain=this.svg.plain(n).move(r[0],r[1]+c/4).font(12,"bold","#3a4620","middle").addClass("class-names").on("contextmenu",d=>{d.preventDefault(),i.node.dispatchEvent(new Event("contextmenu",d))})}}removeElement(){let i=this.element;[i,i.shadow,this.movePath,i.categoriesPlain,i.categoriesRect,i.connector,...i.discs,...this.rotateArr].forEach(t=>t?.remove()),this.drawing&&this.createElement(this.newShape())}addMoveIcon(){this.movePath?.remove();let i=this.moveIcon(this.element.shape.getCenter());this.movePath=this.svg.path(i),this.element.after(this.movePath),this.movePath.attr("class","move-icon grabbable").mousedown(t=>this.drag_md(t)).touchstart(t=>this.drag_ts(t)).on("contextmenu",t=>{t.preventDefault(),this.element.node.dispatchEvent(new Event("contextmenu",t))})}addRotateIcon(){if(!this.canRotate)return;let i=this.element.shape.rotatePosition(),t=this.rotateIcon(i),e=this.svg.path(t),s=this.svg.circle(12).move(i[0],i[1]).fill("#ffffff00");this.rotateArr=[e,s],e.attr("class","rot-icon grabbable"),s.attr("class","grabbable").after(e),this.rotateArr.forEach(r=>r.mousedown(n=>this.rotate_md(n)).touchstart(n=>this.rotate_ts(n)).click(n=>n.stopPropagation())),this.rotate()}initDrag(){this.element.addClass("grabbable").click(i=>{i.stopPropagation()}).mousedown(i=>this.drag_md(i)).touchstart(i=>this.drag_ts(i)),this.addMoveIcon()}drag_md(i){i.buttons===1&&!i.ctrlKey&&!this.lastPoint&&(this.lastPoint={X:i.offsetX,Y:i.offsetY},this.rotateArr.forEach(t=>t.remove()),this.movePath.attr("display","none"),this.svg.mousemove(t=>this.drag_mm(t)).mouseup(()=>this.drag_upevent(!1)),i.stopPropagation())}drag_ts(i){!i.ctrlKey&&!this.lastPoint&&(this.lastPoint=a.touchPos(i),this.rotateArr.forEach(t=>t.remove()),this.movePath.attr("display","none"),this.svg.touchmove(t=>this.drag_tm(t)).touchend(()=>this.drag_upevent(!0)),i.stopPropagation())}drag_mm(i){if(i.buttons!==1)return this.drag_upevent(!1);this.drag_moveevent({X:i.offsetX,Y:i.offsetY})}drag_tm(i){this.drag_moveevent(a.touchPos(i))}drag_moveevent(i){if(this.lastPoint){if(!this.element)return;let t=i.X-this.lastPoint.X,e=i.Y-this.lastPoint.Y,s=this.element.shape.getCenter();[this.element,this.element.shadow,this.element.connector,...this.element.discs].forEach(r=>{r?.increment([t,e])}),this.element.shape.centerChanged([s[0]+t,s[1]+e]),this.rotate(),this.lastPoint=i}}drag_upevent(i){if(this.lastPoint){if(!this.element)return;this.addMoveIcon(),this.addRotateIcon(),this.lastPoint=void 0,i?this.svg.off("touchmove").off("touchend"):this.svg.off("mousemove").off("mouseup"),this.onEdited(this.shape)}}stopDrag(){this.element&&(this.element.removeClass("grabbable").off("click").off("mousedown").off("touchstart"),this.movePath&&this.movePath.remove(),this.rotateArr.forEach(i=>i.remove()),this.rotateArr=[],this.lastPoint=void 0,this.movePath=void 0)}rotate_md(i){i.buttons===1&&!i.ctrlKey&&(this.svg.mousemove(t=>this.rotate_mm(t)).mouseup(()=>this.rotate_upevent(!1)),i.stopPropagation())}rotate_ts(i){i.ctrlKey||(this.svg.touchmove(t=>this.rotate_tm(t)).touchend(()=>this.rotate_upevent(!0)),i.stopPropagation())}rotate_mm(i){if(i.buttons!==1)return this.rotate_upevent(!1);this.rotate_moveevent({X:i.offsetX,Y:i.offsetY})}rotate_tm(i){this.rotate_moveevent(a.touchPos(i))}rotate_moveevent(i){if(!this.element)return;let t=this.element.shape.getCenter(),e=[i.X-t[0],i.Y-t[1]];this.element.shape.phi=Math.atan2(-e[0],e[1])*180/Math.PI,this.rotate()}rotate_upevent(i){i?this.svg.off("touchmove").off("touchend"):this.svg.off("mousemove").off("mouseup"),this.onEdited(this.shape)}zoom(i,t){if(i.shape.zoom(t),this.plot(i),i.discs?.forEach(e=>e.x(e.x()*t).y(e.y()*t)),i.connector?.plot(i.connector.array().map(e=>[e[0]*t,e[1]*t])),i.editing){if(this.rotateArr.length>0){let e=i.shape.rotatePosition(),[s,r]=this.rotateArr;s.plot(this.rotateIcon(e)),r.move(e[0],e[1])}this.movePath?.plot(this.moveIcon(i.shape.getCenter()))}else this.setOptions(i,i.shape.categories,i.shape.color);this.rotate(i)}stopEdit(){this.element&&this.element.editing&&(this.element.editing=!1,this.stopDrag(),this.stopEditShape(this.element),this.drawing&&this.createElement(this.newShape()))}stopEditShape(i){let t=i.shape;i.discs?.forEach(e=>e.fill("#000").radius(2).removeClass("seg-point").off("click").off("mousedown").off("mouseup")),this.setOptions(i,t.categories,t.color)}edit(){let i=this.element;i.editing=!0,i.categoriesPlain&&(i.categoriesPlain.node.innerHTML=""),i.categoriesRect&&i.categoriesRect.remove(),this.canHB&&([i.shadow,...i.discs].forEach(t=>t.removeClass("il-hid")),i.stroke({width:2})),this.initDrag(),this.addRotateIcon(),this.editShape()}};var S="http://www.w3.org/2000/svg",m=class{constructor(i,t=[]){this.node=i;this.events=t;this.append=i=>this.node.append(i.node);this.getAttr=i=>this.node.getAttribute(i);this.remove=()=>this.node.remove();this.after=i=>this.node.after(i.node);this.before=i=>this.node.before(i.node)}fill(i){return this.attr("fill",i),this}move(i,t){return this.attr("cx",i.toString()),this.attr("cy",t.toString()),this}addClass(i){let t=this.getAttr("class");return t?t.split(" ").indexOf(i)===-1&&(t+=" "+i):t=i,this.attr("class",t),this}removeClass(i){let t=this.getAttr("class")||"";return t=t.split(" ").filter(e=>e!==i).join(" "),this.attr("class",t),this}stroke(i){return i.color!==void 0&&this.attr("stroke",i.color),i.width!==void 0&&this.attr("stroke-width",i.width.toString()),i.opacity!==void 0&&this.attr("stroke-opacity",i.opacity.toString()),i.dasharray!==void 0&&this.attr("stroke-dasharray",i.dasharray),this}attr(i,t){return this.node.setAttribute(i,t),this}register(i,t){this.events=this.events||[],this.events.push({event:i,cb:t})}mouseup(i){return this.node.addEventListener("mouseup",i),this.register("mouseup",i),this}mousedown(i){return this.node.addEventListener("mousedown",i),this.register("mousedown",i),this}mousemove(i){return this.node.addEventListener("mousemove",i),this.register("mousemove",i),this}mouseover(i){return this.node.addEventListener("mouseover",i),this.register("mouseover",i),this}mouseout(i){return this.node.addEventListener("mouseout",i),this.register("mouseout",i),this}touchstart(i){return this.node.addEventListener("touchstart",i),this.register("touchstart",i),this}touchmove(i){return this.node.addEventListener("touchmove",i),this.register("touchmove",i),this}touchend(i){return this.node.addEventListener("touchend",i),this.register("touchend",i),this}click(i){return this.node.addEventListener("click",i),this.register("click",i),this}dblclick(i){return this.node.addEventListener("dblclick",i),this.register("dblclick",i),this}on(i,t){return this.node.addEventListener(i,t),this.register(i,t),this}off(i){return this.events=this.events||[],this.events.filter(t=>t.event===i).forEach(t=>{this.node.removeEventListener(t.event,t.cb)}),this}opacity(i){return this.attr("opacity",i.toString()),this}increment(i){throw new Error("not implemented")}},z=class extends m{constructor(t){super(t);this.node=t;this.increment=Q;this.x=q;this.y=J}radius(t){return this.attr("r",t.toString()),this}},O=class extends m{constructor(t){super(t);this.node=t;this.increment=Q;this.x=q;this.y=J}radius(t,e){return this.attr("rx",t.toString()),this.attr("ry",e.toString()),this}},W=class extends m{constructor(t){super(t);this.node=t}radius(t){return this.attr("rx",t.toString()),this.attr("ry",t.toString()),this}move(t,e){return this.attr("x",t.toString()),this.attr("y",e.toString()),this}},A=class extends m{constructor(t){super(t);this.node=t}array(){return(this.getAttr("points")||"").split(" ").filter(t=>t.length).map(t=>{var e=t.split(",");return[parseFloat(e[0]),parseFloat(e[1])]})}plot(t){this.attr("points",t.reduce((e,s)=>`${e} ${s[0]},${s[1]}`,"").trimStart())}increment(t){var e=this.array().map(s=>[s[0]+t[0],s[1]+t[1]]);this.plot(e)}},H=class extends m{constructor(t){super(t);this.node=t;this.bbox=()=>this.node.getBBox()}font(t,e,s,r){return this.attr("font-size",t.toString()),this.attr("font-weight",e),s&&this.fill(s),r&&this.attr("text-anchor",r),this}move(t,e){return this.attr("x",t.toString()),this.attr("y",e.toString()),this}},N=class extends m{constructor(t){super(t);this.node=t}plot(t){return this.attr("d",t),this}},Y=class extends m{constructor(t){super(t);this.node=t;this.bbox=()=>this.node.getBBox()}size(t,e){return j(this,t,e),this}},G=class extends m{constructor(t){super(t);this.node=t}circle(t){let e=new z(document.createElementNS(S,"circle"));return e.attr("r",t.toString()),this.append(e),e}ellipse(t,e){let s=new O(document.createElementNS(S,"ellipse"));return s.attr("rx",t.toString()),s.attr("ry",e.toString()),this.append(s),s}rect(t,e){let s=new W(document.createElementNS(S,"rect"));return s.attr("height",e.toString()),s.attr("width",t.toString()),this.append(s),s}polyline(t){let e=new A(document.createElementNS(S,"polyline"));return e.plot(t),this.append(e),e}plain(t){let e=new H(document.createElementNS(S,"text"));return e.node.innerHTML=t,this.append(e),e}path(t){let e=new N(document.createElementNS(S,"path"));return e.plot(t),this.append(e),e}image(t,e){let s=new Y(document.createElementNS(S,"image"));return s.attr("href",t),this.append(s),s.node.addEventListener("load",r=>{!r?.currentTarget||!this.node.innerHTML||e(new Y(r.currentTarget))}),s}size(t,e){j(this,t.toString(),e.toString())}};function j(o,i,t){i?o.attr("width",i):o.node.removeAttribute("width"),t?o.attr("height",t):o.node.removeAttribute("height")}function q(o){return o===void 0?parseFloat(this.getAttr("cx")||"0"):(this.attr("cx",o.toString()),this)}function J(o){return o===void 0?parseFloat(this.getAttr("cy")||"0"):(this.attr("cy",o.toString()),this)}function Q(o){this.x(this.x()+o[0]).y(this.y()+o[1])}var X=class extends h{constructor(){super(...arguments);this.canHB=!0}createElement(t){this.element=Object.assign(this.svg.polyline([]),{shape:t,shadow:this.svg.polyline([]),discs:[],hasConnector:!1,editing:!1}),this.element.fill("#ffffff00"),this.element.stroke({color:"#f00",width:2,opacity:.7}),this.element.shadow.fill("none"),this.element.shadow.stroke({color:"#000",width:4,opacity:.4}),t.points&&t.points.forEach((e,s)=>{if(s<t.points.length-1){let r=this.drawDisc(e[0],e[1],2,"#000");this.element.discs.push(r)}})}plotShape(){let t=this.shape;t.points.push([...t.points[0]]),this.processShape(),t.zoom(this.sd.ratio),this.createElement(t),this.plotAngledShape()}plotAngledShape(){this.element&&this.plot(this.element)}plot(t){t.shadow.plot(t.shape.points),t.plot(t.shape.points)}editShape(){this.element.discs?.forEach((e,s)=>{e.fill("#009900").radius(this.sd.discRadius).addClass("seg-point").click(r=>{r.stopPropagation()}).mousedown(r=>{r.buttons===1&&!r.ctrlKey&&this.dragIndex===void 0&&(this.dragIndex=s,[this.movePath,...this.rotateArr].forEach(n=>n.remove()),this.svg.mousemove(n=>this.editShape_mm(n)),r.stopPropagation())}),e.mouseup(()=>this.editShape_mu())})}editShape_mu(){this.dragIndex!==void 0&&(this.addMoveIcon(),this.addRotateIcon(),this.dragIndex=void 0,this.svg.off("mousemove"),this.onEdited(this.shape))}processShape(){}};var I=class extends X{constructor(){super(...arguments);this.startClicked=!1;this.canRotate=!1;this.newShape=()=>new b}ofType(t){return t instanceof b}startDraw(){this.svg.click(t=>this.addPoint(t)),this.svg.dblclick(t=>this.addPointAndClose(t))}addPoint(t){if(t.ctrlKey||t.shiftKey||t.altKey||t.detail>1)return;if(!this.element)throw new Error;let e=this.element;if(this.startClicked){e.discs[0].remove();let s=e.shape.points[0];e.discs[0]=this.drawDisc(s[0],s[1],4,"#000"),e.discs.forEach(r=>{r.fill("#000").radius(2)}),this.startClicked=!1,this.svg.off("mousemove"),this.enlist(e.shape)}else{e.hasConnector&&(e.shape.points.pop(),e.hasConnector=!1),e.editing&&(this.stopEdit(),this.createElement(new b),e=this.element);let s=t.offsetX,r=t.offsetY,n=this.sd.discRadius+this.sd.width/150;e.shape.points.length>=3&&Math.pow(e.shape.points[0][0]-s,2)+Math.pow(e.shape.points[0][1]-r,2)<Math.pow(n,2)&&(this.startClicked=!0,s=e.shape.points[0][0],r=e.shape.points[0][1]),e.shape.points.push([s,r]),this.plotAngledShape();let l=e.shape.points.length===1?5:3;if(e.shape.points.length===1){this.svg.mousemove(d=>this.newPlg_mm(d));let c=this.drawDisc(s,r,l,"#009900");e.discs=[c],c.mouseover(()=>{this.element.shape.points.length>2&&c.attr("fill","#ccffcc")}),c.mouseout(()=>{c.attr("fill","#009900")}),c.attr("class","seg-point")}else this.startClicked?(e.discs[0].attr("class",""),this.addPoint({...t,offsetX:s,offsetY:r})):e.discs.push(this.drawDisc(s,r,l,"#a6a6a6"))}}newPlg_mm(t){this.element&&(this.element.hasConnector?this.element.shape.points.pop():this.element.hasConnector=!0,this.element.shape.points.push([t.offsetX,t.offsetY]),this.plotAngledShape())}editShape_mm(t){if(this.dragIndex!==void 0){if(t.buttons!==1)return this.editShape_mu();let e=this.sd.discRadius;this.element.shape.points[this.dragIndex]=[t.offsetX,t.offsetY],this.element.discs[this.dragIndex].move(t.offsetX,t.offsetY),this.dragIndex===0&&(this.element.shape.points[this.element.shape.points.length-1]=[t.offsetX,t.offsetY]),this.plotAngledShape()}}addPointAndClose(t){if(t.ctrlKey||t.shiftKey||t.altKey)return;if(!this.element)throw new Error;if(this.element.shape.points.length<3)return;this.startClicked=!0;let e=this.element.shape.points[0][0],s=this.element.shape.points[0][1];this.element.shape.points.push([e,s]),this.plotAngledShape(),this.element.discs[0].attr("class",""),this.addPoint({...t,offsetX:e,offsetY:s})}stopDraw(){this.element&&this.element.shape.id===0&&(this.element.remove(),this.element.shadow.remove(),this.element.discs.forEach(t=>t.remove())),this.svg.off("click").off("mousemove").off("dblclick")}};var _=class extends X{constructor(){super(...arguments);this.newShape=()=>new g;this.rect_mu=t=>this.rect_upevent({X:t.offsetX,Y:t.offsetY},!1);this.rect_te=t=>this.rect_upevent(a.touchPos(t,!0),!0)}ofType(t){return t instanceof g}rect_md(t){t.buttons===1&&!t.ctrlKey&&!this.rectOrigin&&(this.element?.editing&&this.stopEdit(),this.rectOrigin={X:t.offsetX,Y:t.offsetY},this.createElement(new g),this.svg.mousemove(e=>this.newRect_mm(e)),this.svg.mouseup(e=>this.rect_mu(e)))}rect_ts(t){this.rectOrigin||(this.element?.editing&&this.stopEdit(),this.rectOrigin=a.touchPos(t),this.createElement(new g),this.svg.touchmove(e=>this.newRect_tm(e)).touchend(e=>this.rect_te(e)))}rect_upevent(t,e){if(this.rectOrigin){if(Math.abs(this.rectOrigin.X-t.X)<10||Math.abs(this.rectOrigin.Y-t.Y)<10){this.removeElement(),this.rectOrigin=void 0;return}if(!this.element)throw new Error;this.element.shape.points.filter((s,r)=>r<this.element.shape.points.length-1).forEach(s=>{this.element.discs.push(this.drawDisc(s[0],s[1],2,"#000"))}),e?this.svg.off("touchmove").off("touchend"):this.svg.off("mousemove").off("mouseup"),this.enlist(this.element.shape),this.rectOrigin=void 0}}startDraw(){this.svg.mousedown(t=>this.rect_md(t)),this.sd.touch&&this.svg.addClass("pinch-zm").touchstart(t=>this.rect_ts(t))}stopDraw(){this.svg.off("mousedown").off("mouseup").off("touchstart").off("touchend")}newRect_mm(t){if(t.buttons!==1)return this.rect_mu(t);this.newRect_moveevent(t.shiftKey,{X:t.offsetX,Y:t.offsetY})}newRect_tm(t){this.newRect_moveevent(t.shiftKey,a.touchPos(t))}newRect_moveevent(t,e){if(this.rectOrigin){let s=[];if(s.push([this.rectOrigin.X,this.rectOrigin.Y]),t){let r=Math.min(Math.abs(this.rectOrigin.X-e.X),Math.abs(this.rectOrigin.Y-e.Y)),n=Math.sign(e.X-this.rectOrigin.X),l=Math.sign(e.Y-this.rectOrigin.Y);s.push([this.rectOrigin.X,r*l+this.rectOrigin.Y]),s.push([r*n+this.rectOrigin.X,r*l+this.rectOrigin.Y]),s.push([r*n+this.rectOrigin.X,this.rectOrigin.Y])}else s.push([this.rectOrigin.X,e.Y]),s.push([e.X,e.Y]),s.push([e.X,this.rectOrigin.Y]);s.push([this.rectOrigin.X,this.rectOrigin.Y]),this.element.shape.points=s,this.plotAngledShape()}}editShape_mm(t){if(this.dragIndex!==void 0){if(t.buttons!==1)return this.editShape_mu();let e=this.element,s=e.shape.phi,r=this.sd.discRadius,n=e.shape.getCenter(),[l,c]=a.rotate([t.offsetX,t.offsetY],n,-s);e.shape.points[this.dragIndex]=[l,c];let d=this.dragIndex===0?3:this.dragIndex-1,P=this.dragIndex===3?0:this.dragIndex+1;this.dragIndex%2===0?(e.shape.points[d][1]=c,e.shape.points[P][0]=l):(e.shape.points[d][0]=l,e.shape.points[P][1]=c),e.shape.points[e.shape.points.length-1]=[...e.shape.points[0]],e.shape.centerChanged(a.rotate(e.shape.getCenter(),n,s)),e.discs.forEach((k,u)=>k.move(e.shape.points[u][0],e.shape.points[u][1])),this.plotAngledShape(),this.rotate()}}processShape(){let t=this.shape,e=t.points;if(e[0][0]===e[3][0]){let s=e[1];e[1]=[...e[3]],e[3]=[...s]}e[0][0]!=e[1][0]&&(t.phi=Math.atan2(e[3][1]-e[0][1],e[3][0]-e[0][0])*180/Math.PI,t.points=e.map(s=>a.rotate(s,t.getCenter(),-t.phi)))}};var M=class extends h{constructor(){super(...arguments);this.points=[];this.canHB=!0}createElement(t){this.element=Object.assign(this.svg.ellipse(t.width/2,t.height/2),{shape:t,shadow:this.svg.ellipse(t.width/2,t.height/2),discs:[],editing:!1}),this.element.fill("#ffffff00").move(t.centre[0],t.centre[1]),this.element.stroke({color:"#f00",width:2,opacity:.7}),this.element.shadow.fill("none").move(t.centre[0],t.centre[1]),this.element.shadow.stroke({color:"#000",width:4,opacity:.4})}startDraw(){this.svg.mousedown(t=>this.draw_md(t)),this.sd.touch&&this.svg.addClass("pinch-zm").touchstart(t=>this.draw_ts(t))}draw_md(t){t.buttons===1&&!t.ctrlKey&&!this.origin&&(this.element?.editing&&this.stopEdit(),this.origin={X:t.offsetX,Y:t.offsetY},this.createElement(this.newShape()),this.svg.mousemove(e=>this.draw_mm(e)).mouseup(e=>this.draw_mu(e)))}draw_ts(t){!t.ctrlKey&&!this.origin&&(this.element?.editing&&this.stopEdit(),this.origin=a.touchPos(t),this.createElement(this.newShape()),this.svg.touchmove(e=>this.draw_tm(e)).touchend(e=>this.draw_te(e)))}draw_mm(t){if(t.buttons!==1)return this.draw_mu(t);this.draw_moveevent({X:t.offsetX,Y:t.offsetY})}draw_tm(t){this.draw_moveevent(a.touchPos(t))}draw_moveevent(t){if(this.origin){let e=[(this.origin.X+t.X)/2,(this.origin.Y+t.Y)/2],s=this.calculateRadius([t.X,t.Y]);[this.element,this.element.shadow].forEach(r=>r.radius(s[0],s[1]).move(e[0],e[1]))}}draw_mu(t){this.draw_upevent({X:t.offsetX,Y:t.offsetY},!1)}draw_te(t){this.draw_upevent(a.touchPos(t,!0),!0)}draw_upevent(t,e){let s=this.element.shape,r=[(this.origin.X+t.X)/2,(this.origin.Y+t.Y)/2],n=this.calculateRadius([t.X,t.Y]);s.centre=r,s.width=2*n[0],s.height=2*n[1],e?this.svg.off("touchmove").off("touchend"):this.svg.off("mousemove").off("mouseup"),n[0]>10&&n[1]>10?this.enlist(s):this.removeElement(),this.origin=void 0}plotShape(){let t=this.shape;t.zoom(this.sd.ratio),this.createElement(t)}stopDraw(){this.svg.off("mousedown").off("mouseup").off("touchstart").off("touchend")}plot(t){[t,t.shadow].forEach(e=>e.radius(t.shape.width/2,t.shape.height/2).move(t.shape.centre[0],t.shape.centre[1]))}editShape(){this.addDiscs(),this.element.discs?.forEach((t,e)=>{t.addClass("seg-point").click(s=>{s.stopPropagation()}).mousedown(s=>{s.buttons===1&&!s.ctrlKey&&this.dragIndex===void 0&&(this.setPoints(),this.dragIndex=e,[this.movePath,...this.rotateArr].forEach(r=>r.remove()),s.stopPropagation(),this.svg.mousemove(r=>this.editShape_mm(r)),this.svg.mouseup(()=>this.editShape_mu()))})})}editShape_mu(){this.addMoveIcon(),this.addRotateIcon(),this.origin=void 0,this.dragIndex=void 0,this.svg.off("mousemove").off("mouseup"),this.onEdited(this.shape)}addDiscs(){let t=this.element;this.setPoints(),t.discs=this.points.map(e=>this.drawDisc(e[0],e[1],this.sd.discRadius,"#009900")),t.connector=this.svg.polyline([...this.points,this.points[0]]).fill("#ffffff00").stroke({color:"#000",width:1,opacity:.8,dasharray:"3,3"}).mousedown(e=>{e.stopPropagation()}),t.before(t.connector),this.rotate()}setPoints(){let t=this.element,e=t.shape.width,s=t.shape.height,r=t.shape.centre[0],n=t.shape.centre[1];this.points=[[r-e/2,n-s/2],[r-e/2,n+s/2],[r+e/2,n+s/2],[r+e/2,n-s/2]]}editShape_mm(t){if(this.dragIndex!==void 0){if(t.buttons!==1)return this.editShape_mu();let e=this.element,s=this.sd.discRadius,r=e.shape.phi,n=e.shape.getCenter(),[l,c]=a.rotate([t.offsetX,t.offsetY],n,-r),d=this.dragIndex===0?3:this.dragIndex-1,P=this.dragIndex===3?0:this.dragIndex+1,k=this.dragIndex>1?this.dragIndex-2:this.dragIndex+2;this.origin={X:this.points[k][0],Y:this.points[k][1]};let u=this.calculateDifferent([l,c]);this.points[this.dragIndex]=[u[0]+this.origin.X,u[1]+this.origin.Y],this.dragIndex%2===0?(this.points[d][1]=u[1]+this.origin.Y,this.points[P][0]=u[0]+this.origin.X):(this.points[d][0]=u[0]+this.origin.X,this.points[P][1]=u[1]+this.origin.Y),e.shape.width=Math.abs(u[0]),e.shape.height=Math.abs(u[1]),e.shape.centerChanged(a.rotate([this.origin.X+u[0]/2,this.origin.Y+u[1]/2],n,r)),this.setPoints(),e.discs.forEach((Z,F)=>Z.move(this.points[F][0],this.points[F][1])),e.connector.plot([...this.points,this.points[0]]),this.plot(e),this.rotate()}}stopEditShape(t){let e=t.shape;t.discs?.forEach((s,r)=>{this.dragIndex=void 0,s.remove()}),t.discs=[],t.connector.remove(),this.setOptions(t,e.categories,e.color)}};var C=class extends M{constructor(){super(...arguments);this.canRotate=!1;this.newShape=()=>new w}ofType(t){return t instanceof w}calculateRadius(t){let e;return e=Math.sqrt(Math.pow(this.origin.X-t[0],2)+Math.pow(this.origin.Y-t[1],2))/2,[e,e]}calculateDifferent(t){let e=Math.sign(t[0]-this.origin.X),s=Math.sign(t[1]-this.origin.Y),r=Math.min(Math.abs(this.origin.X-t[0]),Math.abs(this.origin.Y-t[1]));return[r*e,r*s]}};var T=class extends M{constructor(){super(...arguments);this.newShape=()=>new x}ofType(t){return t instanceof x}calculateRadius(t){let e=Math.abs(t[0]-this.origin.X)/2,s=Math.abs(t[1]-this.origin.Y)/2;return[e,s]}calculateDifferent(t){return[t[0]-this.origin.X,t[1]-this.origin.Y]}};var B=class extends h{constructor(){super(...arguments);this.canRotate=!1;this.canHB=!1;this.newShape=()=>new v}ofType(t){return t instanceof v}createElement(t){let[e,s]=t.position,r=this.svg.polyline(this.vertices(e,s,16,13)).fill("#ffffff00").stroke({color:"#000",width:1,opacity:.8,dasharray:"3,3"}),n=Object.assign(r,{shape:t,shadow:this.drawDisc(e,s,6,"#000").opacity(.4),discs:[this.drawDisc(e,s,4,"#f00").opacity(.6)],editing:!1});n.discs[0].after(n),this.element=n}labeledStyle(t,e){t.discs[0].fill(e?"#fff":"#f00")}plotShape(){let t=this.shape;t.zoom(this.sd.ratio),this.createElement(t)}startDraw(){this.svg.click(t=>this.drawClick(t))}drawClick(t){if(t.ctrlKey||t.shiftKey||t.altKey)return;let e=this.element;e.editing?(this.stopEdit(),this.createElement(new v),this.drawClick(t)):(e.shape.position=[t.offsetX,t.offsetY],e.discs[0].move(t.offsetX,t.offsetY),this.plot(e),this.enlist(e.shape))}plot(t){let[e,s]=t.shape.position;t.shadow.move(e,s),t.plot(this.vertices(e,s,16,13))}stopDraw(){this.svg.off("click")}editShape(){}stopEditShape(t){let e=t.shape;this.setOptions(t,e.categories,e.color)}vertices(t,e,s,r){return[[t-s,e-r],[t+s,e-r],[t+s,e+r],[t-s,e+r],[t-s,e-r]]}};var f=class f{constructor(i,t){this.svg=i;this.container=t;this.maxId=0;this.elements=[];this.stopEdit=()=>this.builders.filter(i=>i.element?.editing).forEach(i=>i.stopEdit());this.setMaxId=i=>this.maxId=Math.max(this.maxId,i);this.getElement=i=>this.elements.find(t=>t.shape.id===i);this.getShapes=()=>this.elements.map(i=>i.shape.getOutput(h._sd.ratio,this.svg));this.findShape=i=>this.elements.find(t=>t.shape.id===i).shape;let r=[n=>this.raise(1,n),n=>this.enlist(n,!0)];this.builders=[new I(...r),new _(...r),new C(...r),new T(...r),new B(...r)]}raise(i,t){f.actions.find(e=>e.type===i).func(t)}getBuilder(i){let t=this.builders.find(e=>e.ofType(i));return t.shape=i,t}edit(i){this.stopEdit();let t=this.getElement(i),e=this.getBuilder(t.shape);e.element=t,e.edit()}zoom(i){let t=this.builders.find(e=>e.drawing);t?.element?.shape.id===0&&t.zoom(t.element,i),this.elements.forEach(e=>this.getBuilder(e.shape).zoom(e,i))}setOptions(i,t,e){this.getBuilder(i.shape).setOptions(i,t,e)}plot(i){i.forEach(t=>{t.id===0&&(t.id=++this.maxId),this.getBuilder(t).basePlotShape(),this.enlist(t,!1)})}startDraw(i){let t=this.getBuilder(i);t.drawing=!0,t.createElement(i),t.startDraw()}stopDraw(){let i=this.builders.find(t=>t.drawing);i&&(i.stopDraw(),i.drawing=!1)}enlist(i,t){let e=this.getBuilder(i);if(!e.element)return;e.element.shape.id===0&&(e.element.shape.id=++this.maxId);let s=e.element.shape.id;this.elements.push(e.element),e.element.node.addEventListener("contextmenu",r=>{r.preventDefault();let n=this.elements.find(l=>l.shape.id===s);return this.raise(3,n.shape),!1},!1),e.element.node.onclick=r=>{if(!this.builders.some(n=>n.drawing)){let n=this.elements.find(l=>l.shape.id===s);!r.ctrlKey&&!n.editing&&(this.edit(s),this.raise(2,e.element.shape)),r.stopPropagation()}},t&&(e.element.editing||e.edit(),this.raise(0,e.element.shape),this.raise(2,e.element.shape))}updateCategories(i,t,e){let s=this.getElement(i);if(!s)return;s.shape.categories=t,e!==void 0&&(s.shape.color=e);let r=this.getBuilder(s.shape);s.editing||r.setOptions(s,t,s.shape.color)}removeById(i){this.stopEdit();let t=this.getElement(i),e=this.getBuilder(t.shape);e.element=t,e.removeElement(),this.elements.splice(this.elements.indexOf(t),1)}remove(){if(this.builders.filter(i=>i.element?.editing).length>0){let i=this.builders.filter(t=>t.element?.editing)[0].element.shape.id;this.removeById(i)}}drag_md(i,t){t.buttons===1&&t.ctrlKey&&!this.origin&&(this.origin={X:t.clientX,Y:t.clientY},i.onmousemove=e=>this.drag_mm(e),i.onmouseup=()=>this.drag_mu())}drag_mm(i){if(this.origin){let t=this.container;t.scrollLeft=t.scrollLeft-i.clientX+this.origin.X,t.scrollTop=t.scrollTop-i.clientY+this.origin.Y,this.origin={X:i.clientX,Y:i.clientY},i.ctrlKey||this.drag_mu()}}drag_mu(){this.origin&&(this.container.onmousemove=null,this.container.onmouseup=null,this.origin=void 0)}static init(i,t,e){i.addClass("il-svg"),i.size(t.width*t.ratio,t.height*t.ratio),h._svg=i,h._sd=t;let s=f.instance=new f(i,e);e.onmousedown=r=>s.drag_md(e,r),e.onwheel=r=>s.mousewheel(r),e.onclick=r=>!s.builders.some(n=>n.drawing)&&!r.ctrlKey&&s.stopEdit(),s.winEv={keydown:r=>r.key==="Control"&&s.container.classList.add("grabbable"),keyup:r=>{r.key==="Control"&&s.winEv.blur(),(h._sd.shortcut?.del&&r.key==="Delete"||h._sd.shortcut?.bksp&&r.key==="Backspace")&&s.remove(),r.key==="Escape"&&s?.stopEdit()},blur:()=>s.container.classList.remove("grabbable")},Object.keys(s.winEv).forEach(r=>window.addEventListener(r,s.winEv[r]))}static setActions(i){let t=e=>s=>e?.(s.getOutput(h._sd.ratio,h._svg));f.actions=i.map(e=>({type:e.type,func:t(e.func)}))}static clear(i){f.instance?._clear(),i?.children.length&&(i.children[0].setAttribute("href",""),i.innerHTML="")}_clear(){this.builders.forEach(i=>{i.stopDraw(),i.stopEdit()}),this.elements=[],this.builders=[],Object.keys(this.winEv).forEach(i=>window.removeEventListener(i,this.winEv[i])),f.instance=void 0}mousewheel(i){if(i.ctrlKey){i.preventDefault();let t=this.container,e=i.deltaY>0?.8:1.25,{scrollLeft:s,scrollTop:r}=t;this.setSizeAndRatio(e,!0),this.zoom(e),t.scrollLeft=Math.min(Math.max(s*e+(e-1)*(i.pageX-t.offsetLeft),0),t.scrollWidth-t.clientWidth),t.scrollTop=Math.min(Math.max(r*e+(e-1)*(i.pageY-t.offsetTop),0),t.scrollHeight-t.clientHeight)}}setSizeAndRatio(i,t){let e=t?h._sd.ratio*i:i;return i=e/h._sd.ratio,h._sd.ratio=e,h._svg.size(h._sd.width*e,h._sd.height*e),i}};f.get=()=>f.instance;var V=f;function $(o,{insertAt:i}={}){if(!o||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",i==="top"&&t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.styleSheet?e.styleSheet.cssText=o:e.appendChild(document.createTextNode(o))}$(`.il-svg{overflow-y:scroll;margin:0 auto;display:block;background-color:#fff}.pinch-zm{touch-action:pinch-zoom}.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}
`);0&&(module.exports={ActType,Circle,Color,Director,Dot,Ellipse,ImageEl,Polygon,Rectangle,SVGSVGEl,Shape,Util});
//# sourceMappingURL=index.js.map