@linkurious/ogma-annotations 1.1.4 → 1.1.5

package/dist/index.umd.js

@@ -19,5 +19,5 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     <span class="handle left bottom left-handle point-handle bottom-left" data-handle-id="7"></span>
     <textarea wrap="off"></textarea>
     </div>
-  `);v(this,"textArea");v(this,"handleSize");v(this,"rect",{x:0,y:0,width:0,height:0});v(this,"annotation",{...qt});v(this,"startX",0);v(this,"startY",0);v(this,"handles",[]);v(this,"draggedHandle",B);v(this,"isFocused",!1);v(this,"placeholder","Type your text here...");v(this,"_onFocus",()=>{this.textArea.value===this.placeholder&&(this.textArea.value=""),this.isFocused=!0});v(this,"_onBlur",()=>{this.isFocused=!1});v(this,"startDrawing",(t,r,a=Le(t,r,0,0,"",wt))=>{this.add(a);const c=this.ogma.view.graphToScreenCoordinates({x:t,y:r});this.select(a.id),this.startDragging(this.getById(a.id),c.x,c.y),this.draggedHandle=6});v(this,"cancelDrawing",()=>{this.isDragging&&(this.remove(this.annotation.id),this.annotation={...qt},this.draggedHandle=B,this.isDragging=!1,this.emit(Tt,this.annotation))});v(this,"startDragging",(t,r,a)=>{this.annotation=t;const c=ut(this.annotation),f=lt(this.annotation);this.rect.x=c.x,this.rect.y=c.y,this.rect.width=f.width,this.rect.height=f.height,this.startX=r,this.startY=a,this.disableDragging(),this.textArea.classList.add("noevents"),this.textArea.setAttribute("disabled","disabled"),this.emit(Bt,this.annotation),this.isDragging=!0});v(this,"onHandleMouseDown",t=>{const r=this.getById(this.selectedId)||this.getById(this.hoveredId);r&&(this.selectedId!==r.id&&this.select(this.hoveredId),this.startDragging(r,t.clientX,t.clientY),this.draggedHandle=te(t.target))});v(this,"onMouseMove",t=>{requestAnimationFrame(()=>this._onMouseMove(t))});v(this,"_onMouseMove",t=>{if(!this.isDragging)return;t.stopPropagation(),t.preventDefault();const r=this.handles[this.draggedHandle],a=r.classList.contains("top"),c=r.classList.contains("left"),f=r.classList.contains("right"),g=r.classList.contains("bottom"),p=r.classList.contains("line-handle"),s=this.ogma.view.getZoom(),d=(t.clientX-this.startX)/s,m=(t.clientY-this.startY)/s,A=this.ogma.view.getAngle(),T=new X(d,m).rotateRadians(A);(g&&c||a&&f)&&(T.y=0,T.x=0);const S=c||p?this.rect.x+T.x:this.rect.x,P=a||p?this.rect.y+T.y:this.rect.y,k=Math.max(this.rect.width+d*(p||c?0:1),$e),q=Math.max(this.rect.height+m*(p||a?0:1),$e);Se(this.annotation,S,P,k,q),this.emit(Ft,this.annotation,"text"),this.refreshEditor(),this.layer.refresh()});v(this,"onMouseUp",()=>{!this.isDragging||this.draggedHandle===B||(this.restoreDragging(),this.textArea.classList.remove("noevents"),this.textArea.removeAttribute("disabled"),this.emit(Tt,this.annotation),this.isDragging=!1,this.draggedHandle=B)});v(this,"onViewChanged",()=>{const t=Math.max(2,this.handleSize/this.ogma.view.getZoom());document.documentElement.style.setProperty("--handle-scale",`${1/t}`)});v(this,"_onInput",()=>{const t=this.getById(this.selectedId);t&&(this.textArea.value=this.textArea.value.replace(/ +(?= )/g,""),this.textArea.focus(),t.properties.content=this.textArea.value,this.emit(se,t),this.layer.refresh())});this.showeditorOnHover=!1,this.handleSize=oe.handleSize||r.textHandleSize,this.placeholder=oe.placeholder||r.textPlaceholder||"";const a=this.textArea=this.editor.element.querySelector("textarea");a.addEventListener("input",this._onInput),a.addEventListener("focus",this._onFocus),a.addEventListener("blur",this._onBlur),a.spellcheck=!1,this.handles=Array.prototype.slice.call(this.editor.element.querySelectorAll(".annotation-text-handle > .handle")),this.handles.forEach(c=>c.addEventListener("mousedown",this.onHandleMouseDown)),document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("mousemove",this.onMouseMove,!0),t.events.on(["viewChanged","zoom"],this.onViewChanged)}_canRemove(){return!this.isFocused}detect({x:t,y:r},a=0){const c=new X(t,r),f=this.ogma.view.getAngle();return this.elements.find(g=>{const{x:p,y:s}=ut(g),{width:d,height:m}=lt(g),A=new X(p,s),{x:T,y:S}=c.sub(A).rotateRadians(-f);return T>-a&&T<d+a&&S>-a&&S<m+a})}draw(t){t.innerHTML="";const r="",a=this.ogma.view.getAngle()*180/Math.PI;this.elements.forEach((f,g)=>{const p=`class${g}`,s=lt(f),d=ut(f),m=f.id,{color:A,fontSize:T,font:S,strokeColor:P,strokeWidth:k,strokeType:q,background:G}=f.properties.style||wt;if(m===this.selectedId)return;const D=Et("g");D.classList.add("annotation-text"),D.setAttribute("fill",`${A}`),D.setAttribute("font-size",`${T}px`),D.setAttribute("font-family",`${S}`);const Y=Et("rect");let Z=!1;q&&q!=="none"&&(Z=!0,Y.setAttribute("stroke",P||"black"),Y.setAttribute("stroke-width",`${k}`),q==="dashed"&&Y.setAttribute("stroke-dasharray","5,5")),(G&&G.length||Z)&&(Z=!0,Y.setAttribute("fill",G||"transparent")),Z&&(Y.setAttribute("width",`${s.width}`),Y.setAttribute("height",`${s.height}`)),D.appendChild(Y),cn(f,D),D.setAttribute("transform",`translate(${d.x},${d.y}) rotate(${a})`),D.classList.add(p),D.setAttribute("data-annotation",`${f.id}`),D.setAttribute("data-annotation-type","text"),t.appendChild(D)});const c=Et("style");c.innerHTML=r,t.firstChild&&t.insertBefore(c,t.firstChild)}refreshDrawing(){const t=this.ogma.view.getAngle()*180/Math.PI;[...this.layer.element.children].forEach(r=>{const a=r.getAttribute("transform"),c=a==null?void 0:a.match(/translate\(([^)]+)\)/);c&&r.setAttribute("transform",`translate(${c[1]}) rotate(${t})`)})}getDefaultOptions(){return qt}refreshEditor(){if(+this.selectedId<0&&+this.hoveredId<0)return;const t=this.getById(this.selectedId)||this.getById(this.hoveredId),r=lt(t),a=this.ogma.view.graphToScreenCoordinates(ut(t)),c=this.ogma.view.getZoom(),{font:f,fontSize:g,color:p,background:s,padding:d=0}=t.properties.style||wt,m=(g||1)*c;this.textArea.value=t.properties.content,this.editor.element.style.transform=`translate(${a.x}px, ${a.y}px)translate(-50%, -50%)translate(${r.width/2*c}px, ${r.height/2*c}px)`,this.editor.element.style.width=`${r.width*c}px`,this.editor.element.style.height=`${r.height*c}px`,this.textArea.style.font=`${m} ${f}`,this.textArea.style.fontFamily=f||"sans-serif",this.textArea.style.fontSize=`${m}px`,this.textArea.style.padding=`${d}px`,this.textArea.style.lineHeight=`${m}px`,this.textArea.style.boxSizing="border-box",this.textArea.style.color=p||"black",this.textArea.style.background=s||"transparent",this.textArea.placeholder=this.placeholder,this.layer.refresh()}select(t){super.select(t),this.textArea.focus()}destroy(){super.destroy(),document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("mousemove",this.onMouseMove,!0),this.ogma.events.off(this.onViewChanged)}}class un{constructor(){v(this,"links",{});v(this,"linksByTargetId",{});v(this,"linksByArrowId",{})}add(l,t,r,a,c){const f=Rt(),g=l.id,p={id:f,arrow:g,target:r,targetType:a,connectionPoint:c,side:t};return this.links[f]=p,this.linksByTargetId[r]||(this.linksByTargetId[r]=[]),this.linksByTargetId[r].push(f),this.linksByArrowId[g]||(this.linksByArrowId[g]={}),this.linksByArrowId[g][t]=f,l.properties.link=l.properties.link||{},l.properties.link[t]={id:r,side:t,type:a,magnet:c},this}arrowIsLinked(l,t){var r;return!!((r=this.linksByArrowId[l])!=null&&r[t])}remove(l,t){var g,p;const r=l.id,a=(g=this.linksByArrowId[r])==null?void 0:g[t];if((p=l.properties.link)==null||delete p[t],!a)return this;const c=this.links[a];delete this.links[a];const f=this.linksByTargetId[c.target];for(let s=0;s<f.length;s++)if(f[s]===a){f.splice(s,1);break}return delete this.linksByArrowId[r][t],this}getArrowLink(l,t){var a;const r=(a=this.linksByArrowId[l])==null?void 0:a[t];return r?this.links[r]:null}getTargetLinks(l,t){var r;return((r=this.linksByTargetId[l])==null?void 0:r.map(a=>this.links[a]).filter(a=>a.targetType===t))??[]}forEach(l){Object.values(this.links).forEach(l)}}const at=u=>u.properties.type==="arrow",gt=u=>u.properties.type==="text",ae=u=>u.type==="FeatureCollection",dn={magnetColor:"#3e8",detectMargin:20,magnetHandleRadius:5,magnetRadius:10,textPlaceholder:"Type here",arrowHandleSize:3.5,textHandleSize:3.5,minArrowHeight:20,maxArrowHeight:30},He=["start","end"],Re=[{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:0,y:.5},{x:1,y:.5},{x:0,y:1},{x:.5,y:1},{x:1,y:1}];class fn extends Ie{constructor(t,r={}){super();v(this,"arrows");v(this,"texts");v(this,"links",new un);v(this,"layer");v(this,"annotations");v(this,"ogma");v(this,"options");v(this,"selected",null);v(this,"updateTimeout",0);v(this,"hoveredNode",null);v(this,"dragged",null);v(this,"textToMagnet");v(this,"activeLinks",[]);v(this,"_render",t=>{if(!this.dragged||this.textToMagnet===void 0)return;t.beginPath(),t.fillStyle="green";const r=this.ogma.view.getZoom();Re.forEach(a=>{if(!this.textToMagnet)return;const c=lt(this.textToMagnet),f=ut(this.textToMagnet),{x:g,y:p}=new X(a.x,a.y).mul({x:c.width,y:c.height}).rotateRadians(this.ogma.view.getAngle()).add(f);t.moveTo(g,p),t.arc(g,p,this.options.magnetHandleRadius/r,0,Math.PI*2)}),t.fill(),t.closePath()});v(this,"_onFeatureDrag",(t,r)=>{const a=r;if(at(t)&&a==="line")["start","end"].find(c=>{const f=c==="start"?kt(t):Mt(t);return this._snapToText(t,a,f)||this._findAndSnapToNode(t,c,f)});else if(at(t)&&a!=="line"){const c=a==="start"?kt(t):Mt(t);this._snapToText(t,a,c)||this._findAndSnapToNode(t,a,c)}else gt(t)&&(this.activeLinks.forEach(({arrow:c,side:f,connectionPoint:g})=>{const p=this.getAnnotation(c),s=lt(t),d=ut(t),m=new X(g.x,g.y).mul({x:s.width,y:s.height}).rotateRadians(this.ogma.view.getAngle()).add(d);p.geometry.coordinates[f==="start"?0:1]=[m.x,m.y]}),this.activeLinks.length&&this.arrows.refreshLayer());this.layer.refresh(),this.emit(Ft,t,r)});v(this,"_onFeatureDragEnd",t=>{this.dragged!==null&&at(t)&&kt(this.dragged)&&He.forEach(r=>{this.links.getArrowLink(t.id,r)&&this.emit(an,{arrow:t,link:this.links.getArrowLink(t.id,r)})}),(gt(t)||at(t))&&this.onUpdate(t),this.dragged=null,this.activeLinks=[],this.textToMagnet=void 0,this.annotations.forEach(r=>r.enableDetection()),this.layer.refresh(),this.emit(Tt,t)});v(this,"_onFeatureDragStart",t=>{this.textToMagnet=void 0,at(t)?this.dragged=t:gt(t)&&this.activeLinks.push(...this.links.getTargetLinks(t.id,"text")),this.annotations.forEach(r=>{const a=r.getSelectedFeature();a&&a!==t&&r.unhover().unselect(),r.disableDetection()}),this.emit(Bt,t)});v(this,"_onNodesDragStart",()=>{this.arrows.unhover().unselect(),this.texts.unhover().unselect()});v(this,"_onNodesDrag",t=>{const{dx:r,dy:a}=t;this._moveNodes(t.nodes,r,a)});v(this,"_onLayoutEnd",t=>{t.ids.forEach((r,a)=>{this.links.getTargetLinks(r,"node").forEach(f=>{const g=this.getAnnotation(f.arrow),p=f.side,s=Dt(g,p==="start"?"end":"start"),d=t.positions.current[a],m=this.ogma.getNode(r).getAttribute("radius"),A=Lt(s,d,+m);vt(g,p,A.x,A.y)})}),this.arrows.refreshLayer(),this.texts.refreshLayer()});v(this,"_onAdded",t=>{this.emit(re,t)});v(this,"_onRemoved",t=>{this.emit(ie,t)});v(this,"_onUnselect",t=>{this.selected=null,this.emit(ne,t)});v(this,"_onSelect",t=>{this.selected!==t&&(this.selected=t,this.emit(ee,this.selected))});v(this,"onUpdate",t=>{cancelAnimationFrame(this.updateTimeout),this.updateTimeout=requestAnimationFrame(()=>this._onUpdate(t))});v(this,"_onUpdate",t=>{this.emit(se,t)});this.options=this.setOptions({...dn,...r}),this.ogma=t,this.arrows=new ze(t,this.options),this.texts=new Ne(t,this.options),this.annotations=[this.arrows,this.texts],this.annotations.forEach(a=>{a.on(Bt,this._onFeatureDragStart).on(Ft,this._onFeatureDrag).on(Tt,this._onFeatureDragEnd).on(se,this.onUpdate).on(ne,this._onUnselect).on(ee,this._onSelect).on(re,this._onAdded).on(ie,this._onRemoved)}),this.ogma.events.on("nodesDragStart",this._onNodesDragStart).on("nodesDragProgress",this._onNodesDrag).on("layoutEnd",this._onLayoutEnd).on(["viewChanged","rotate"],()=>{this.refreshTextLinks()}),this.layer=t.layers.addCanvasLayer(this._render),this.layer.moveToBottom()}_moveNodes(t,r,a){t.forEach(c=>{const f=this.links.getTargetLinks(c.getId(),"node"),g=c.getPosition();f.forEach(p=>{const s=this.getAnnotation(p.arrow),d=p.side,m=Dt(s,d==="start"?"end":"start");let A=g;const T=+c.getAttribute("radius"),S=1e-6;(p.connectionPoint.x-(g.x-r)>S||p.connectionPoint.y-(g.y-a)>S)&&(A=Lt(m,g,T)),vt(s,d,A.x,A.y)})}),this.arrows.refreshLayer()}_snapToText(t,r,a){const c=this.texts.detect(a,this.options.detectMargin);if(this.links.remove(t,r),!c)return!1;this.textToMagnet=c;const f=this.findMagnetPoint(Re,c,a);return f?(vt(t,r,f.point.x,f.point.y),this.links.add(t,r,c.id,"text",f.magnet),!0):!1}_findAndSnapToNode(t,r,a){const c=this.ogma.view.graphToScreenCoordinates(a),f=this.ogma.view.getElementAt(c);this.links.remove(t,r),f&&f.isNode?(this.hoveredNode=f,this.hoveredNode.setSelected(!0),this._snapToNode(t,r,f,c)):(this.hoveredNode&&this.hoveredNode.setSelected(!1),this.hoveredNode=null)}_snapToNode(t,r,a,c){const f=a.getPositionOnScreen(),g=+a.getAttribute("radius"),p=g*this.ogma.view.getZoom(),s=c.x-f.x,d=c.y-f.y,m=Math.sqrt(s*s+d*d),A=a.getPosition();if(m<p+this.options.detectMargin){let T=A;if(m>p/2){const S=Dt(t,r==="end"?"start":"end");T=Lt(S,T,g)}vt(t,r,T.x,T.y),this.links.add(t,r,a.getId(),"node",T)}}refreshTextLinks(){let t=!1;this.links.forEach(({connectionPoint:r,targetType:a,target:c,arrow:f,side:g})=>{if(a!=="text")return;t=!0;const p=this.getAnnotation(c),s=this.getAnnotation(f),d=lt(p),m=ut(p),A=new X(r.x,r.y).mul({x:d.width,y:d.height}).rotateRadians(this.ogma.view.getAngle()).add(m);vt(s,g,A.x,A.y)}),t&&this.arrows.refreshLayer()}getSelected(){return this.selected}findMagnetPoint(t,r,a){let c;for(const f of t){const g=lt(r),p=ut(r),s=new X(f.x,f.y).mul({x:g.width,y:g.height}).rotateRadians(this.ogma.view.getAngle()).add(p),d=s.sub(a).length(),m=Math.min(this.options.magnetRadius*this.ogma.view.getZoom(),g.width/2,g.height/2);if(d<Math.max(m,this.options.magnetHandleRadius)){c={point:s,magnet:f};break}}return c}setOptions(t={}){return this.options={...this.options||{},...t},this.options}select(t){const r=this.getAnnotations().features.find(a=>a.id===t);return r?(at(r)?this.arrows.select(r.id):gt(r)&&this.texts.select(r.id),this):this}unselect(){return this.selected?(at(this.selected)?this.arrows.unselect():gt(this.selected)&&this.texts.unselect(),this):this}add(t){if(ae(t)){const[r,a]=t.features.reduce((c,f)=>(at(f)?c[1].push(f):gt(f)&&c[0].push(f),c),[[],[]]);return r.forEach(c=>this.add(c)),a.forEach(c=>this.add(c)),this.arrows.refreshLayer(),this}switch(t.properties.type){case"text":this.texts.add(t);break;default:this.arrows.add(t),this.loadLink(t);break}return this}remove(t){return ae(t)?(t.features.forEach(r=>this.remove(r)),this):(at(t)?(this.links.remove(t,"start"),this.links.remove(t,"end"),this.arrows.remove(t.id)):this.texts.remove(t.id),this)}loadLink(t){if(t.properties.link)for(const r of He){const a=t.properties.link[r];if(!a)continue;const c=this.getAnnotation(a.id);if(a.type==="text"&&c)this.links.add(t,r,a.id,a.type,a.magnet);else if(a.type==="node"){const f=this.ogma.getNode(a.id);if(!f)continue;this.links.add(t,r,a.id,a.type,a.magnet);const g=f.getPosition(),p=f.getAttribute("radius")||0,s=Dt(t,r==="start"?"end":"start"),d=Lt(s,g,+p);vt(t,r,d.x,d.y)}}}startArrow(t,r,a){this.cancelDrawing(),this.arrows.startDrawing(t,r,a)}startText(t,r,a){this.cancelDrawing(),this.texts.startDrawing(t,r,a)}cancelDrawing(){this.annotations.forEach(t=>t.cancelDrawing()),this.emit(on)}updateStyle(t,r){const a=this.getAnnotations().features.find(c=>c.id===t);return a?(at(a)?this.arrows.updateStyle(a,r):gt(a)&&this.texts.updateStyle(a,r),this.onUpdate(a),this):this}getAnnotations(){const t={type:"FeatureCollection",features:[]};return this.annotations.forEach(r=>{t.features=[...t.features,...r.getElements()]}),t}getAnnotation(t){return this.getAnnotations().features.find(r=>r.id===t)}destroy(){this.annotations.forEach(t=>t.destroy()),this.layer.destroy()}}I.Arrows=ze,I.Control=fn,I.Texts=Ne,I.createArrow=be,I.createSVGElement=Et,I.createText=Le,I.defaultArrowOptions=Wt,I.defaultArrowStyle=St,I.defaultControllerOptions=oe,I.defaultTextOptions=qt,I.defaultTextStyle=wt,I.getAnnotationsBounds=en,I.getArrowEnd=Mt,I.getArrowEndPoints=zt,I.getArrowSide=Dt,I.getArrowStart=kt,I.getAttachmentPointOnNode=Lt,I.getHandleId=te,I.getTextBbox=Kt,I.getTextPosition=ut,I.getTextSize=lt,I.isAnnotationCollection=ae,I.isArrow=at,I.isText=gt,I.setArrowEnd=Qt,I.setArrowEndPoint=vt,I.setArrowStart=Jt,I.setTextBbox=Se,I.updateTextBbox=Ae,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})});
+  `);v(this,"textArea");v(this,"handleSize");v(this,"rect",{x:0,y:0,width:0,height:0});v(this,"annotation",{...qt});v(this,"startX",0);v(this,"startY",0);v(this,"handles",[]);v(this,"draggedHandle",B);v(this,"isFocused",!1);v(this,"placeholder","Type your text here...");v(this,"_onFocus",()=>{this.textArea.value===this.placeholder&&(this.textArea.value=""),this.isFocused=!0});v(this,"_onBlur",()=>{this.isFocused=!1});v(this,"startDrawing",(t,r,a=Le(t,r,0,0,"",wt))=>{this.add(a);const c=this.ogma.view.graphToScreenCoordinates({x:t,y:r});this.select(a.id),this.startDragging(this.getById(a.id),c.x,c.y),this.draggedHandle=6});v(this,"cancelDrawing",()=>{this.isDragging&&(this.remove(this.annotation.id),this.annotation={...qt},this.draggedHandle=B,this.isDragging=!1,this.emit(Tt,this.annotation))});v(this,"startDragging",(t,r,a)=>{this.annotation=t;const c=ut(this.annotation),f=lt(this.annotation);this.rect.x=c.x,this.rect.y=c.y,this.rect.width=f.width,this.rect.height=f.height,this.startX=r,this.startY=a,this.disableDragging(),this.textArea.classList.add("noevents"),this.textArea.setAttribute("disabled","disabled"),this.emit(Bt,this.annotation),this.isDragging=!0});v(this,"onHandleMouseDown",t=>{const r=this.getById(this.selectedId)||this.getById(this.hoveredId);r&&(this.selectedId!==r.id&&this.select(this.hoveredId),this.startDragging(r,t.clientX,t.clientY),this.draggedHandle=te(t.target))});v(this,"onMouseMove",t=>{requestAnimationFrame(()=>this._onMouseMove(t))});v(this,"_onMouseMove",t=>{if(!this.isDragging)return;t.stopPropagation(),t.preventDefault();const r=this.handles[this.draggedHandle],a=r.classList.contains("top"),c=r.classList.contains("left"),f=r.classList.contains("right"),g=r.classList.contains("bottom"),p=r.classList.contains("line-handle"),s=this.ogma.view.getZoom(),d=(t.clientX-this.startX)/s,m=(t.clientY-this.startY)/s,A=this.ogma.view.getAngle(),T=new X(d,m).rotateRadians(A);(g&&c||a&&f)&&(T.y=0,T.x=0);const S=c||p?this.rect.x+T.x:this.rect.x,P=a||p?this.rect.y+T.y:this.rect.y,k=Math.max(this.rect.width+d*(p||c?0:1),$e),q=Math.max(this.rect.height+m*(p||a?0:1),$e);Se(this.annotation,S,P,k,q),this.emit(Ft,this.annotation,"text"),this.refreshEditor(),this.layer.refresh()});v(this,"onMouseUp",()=>{!this.isDragging||this.draggedHandle===B||(this.restoreDragging(),this.textArea.classList.remove("noevents"),this.textArea.removeAttribute("disabled"),this.emit(Tt,this.annotation),this.isDragging=!1,this.draggedHandle=B)});v(this,"onViewChanged",()=>{const t=Math.max(2,this.handleSize/this.ogma.view.getZoom());document.documentElement.style.setProperty("--handle-scale",`${1/t}`)});v(this,"_onInput",()=>{const t=this.getById(this.selectedId);t&&(this.textArea.value=this.textArea.value.replace(/ +(?= )/g,""),this.textArea.focus(),t.properties.content=this.textArea.value,this.emit(se,t),this.layer.refresh())});this.showeditorOnHover=!1,this.handleSize=oe.handleSize||r.textHandleSize,this.placeholder=oe.placeholder||r.textPlaceholder||"";const a=this.textArea=this.editor.element.querySelector("textarea");a.addEventListener("input",this._onInput),a.addEventListener("focus",this._onFocus),a.addEventListener("blur",this._onBlur),a.spellcheck=!1,this.handles=Array.prototype.slice.call(this.editor.element.querySelectorAll(".annotation-text-handle > .handle")),this.handles.forEach(c=>c.addEventListener("mousedown",this.onHandleMouseDown)),document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("mousemove",this.onMouseMove,!0),t.events.on(["viewChanged","zoom"],this.onViewChanged)}_canRemove(){return!this.isFocused}detect({x:t,y:r},a=0){const c=new X(t,r),f=this.ogma.view.getAngle();return this.elements.find(g=>{const{x:p,y:s}=ut(g),{width:d,height:m}=lt(g),A=new X(p,s),{x:T,y:S}=c.sub(A).rotateRadians(-f);return T>-a&&T<d+a&&S>-a&&S<m+a})}draw(t){t.innerHTML="";const r="",a=this.ogma.view.getAngle()*180/Math.PI;this.elements.forEach((f,g)=>{const p=`class${g}`,s=lt(f),d=ut(f),m=f.id,{color:A,fontSize:T,font:S,strokeColor:P,strokeWidth:k,strokeType:q,background:G}=f.properties.style||wt;if(m===this.selectedId)return;const D=Et("g");D.classList.add("annotation-text"),D.setAttribute("fill",`${A}`),D.setAttribute("font-size",`${T}px`),D.setAttribute("font-family",`${S}`);const Y=Et("rect");let Z=!1;q&&q!=="none"&&(Z=!0,Y.setAttribute("stroke",P||"black"),Y.setAttribute("stroke-width",`${k}`),q==="dashed"&&Y.setAttribute("stroke-dasharray","5,5")),(G&&G.length||Z)&&(Z=!0,Y.setAttribute("fill",G||"transparent")),Z&&(Y.setAttribute("width",`${s.width}`),Y.setAttribute("height",`${s.height}`)),D.appendChild(Y),cn(f,D),D.setAttribute("transform",`translate(${d.x},${d.y}) rotate(${a})`),D.classList.add(p),D.setAttribute("data-annotation",`${f.id}`),D.setAttribute("data-annotation-type","text"),t.appendChild(D)});const c=Et("style");c.innerHTML=r,t.firstChild&&t.insertBefore(c,t.firstChild)}refreshDrawing(){const t=this.ogma.view.getAngle()*180/Math.PI;[...this.layer.element.children].forEach(r=>{const a=r.getAttribute("transform"),c=a==null?void 0:a.match(/translate\(([^)]+)\)/);c&&r.setAttribute("transform",`translate(${c[1]}) rotate(${t})`)})}getDefaultOptions(){return qt}refreshEditor(){if(+this.selectedId<0&&+this.hoveredId<0)return;const t=this.getById(this.selectedId)||this.getById(this.hoveredId),r=lt(t),a=this.ogma.view.graphToScreenCoordinates(ut(t)),c=this.ogma.view.getZoom(),{font:f,fontSize:g,color:p,background:s,padding:d=0}=t.properties.style||wt,m=(g||1)*c;this.textArea.value=t.properties.content,this.editor.element.style.transform=`translate(${a.x}px, ${a.y}px)translate(-50%, -50%)translate(${r.width/2*c}px, ${r.height/2*c}px)`,this.editor.element.style.width=`${r.width*c}px`,this.editor.element.style.height=`${r.height*c}px`,this.textArea.style.font=`${m} ${f}`,this.textArea.style.fontFamily=f||"sans-serif",this.textArea.style.fontSize=`${m}px`,this.textArea.style.padding=`${c*d}px`,this.textArea.style.lineHeight=`${m}px`,this.textArea.style.boxSizing="border-box",this.textArea.style.color=p||"black",this.textArea.style.background=s||"transparent",this.textArea.placeholder=this.placeholder,this.layer.refresh()}select(t){super.select(t),this.textArea.focus()}destroy(){super.destroy(),document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("mousemove",this.onMouseMove,!0),this.ogma.events.off(this.onViewChanged)}}class un{constructor(){v(this,"links",{});v(this,"linksByTargetId",{});v(this,"linksByArrowId",{})}add(l,t,r,a,c){const f=Rt(),g=l.id,p={id:f,arrow:g,target:r,targetType:a,connectionPoint:c,side:t};return this.links[f]=p,this.linksByTargetId[r]||(this.linksByTargetId[r]=[]),this.linksByTargetId[r].push(f),this.linksByArrowId[g]||(this.linksByArrowId[g]={}),this.linksByArrowId[g][t]=f,l.properties.link=l.properties.link||{},l.properties.link[t]={id:r,side:t,type:a,magnet:c},this}arrowIsLinked(l,t){var r;return!!((r=this.linksByArrowId[l])!=null&&r[t])}remove(l,t){var g,p;const r=l.id,a=(g=this.linksByArrowId[r])==null?void 0:g[t];if((p=l.properties.link)==null||delete p[t],!a)return this;const c=this.links[a];delete this.links[a];const f=this.linksByTargetId[c.target];for(let s=0;s<f.length;s++)if(f[s]===a){f.splice(s,1);break}return delete this.linksByArrowId[r][t],this}getArrowLink(l,t){var a;const r=(a=this.linksByArrowId[l])==null?void 0:a[t];return r?this.links[r]:null}getTargetLinks(l,t){var r;return((r=this.linksByTargetId[l])==null?void 0:r.map(a=>this.links[a]).filter(a=>a.targetType===t))??[]}forEach(l){Object.values(this.links).forEach(l)}}const at=u=>u.properties.type==="arrow",gt=u=>u.properties.type==="text",ae=u=>u.type==="FeatureCollection",dn={magnetColor:"#3e8",detectMargin:20,magnetHandleRadius:5,magnetRadius:10,textPlaceholder:"Type here",arrowHandleSize:3.5,textHandleSize:3.5,minArrowHeight:20,maxArrowHeight:30},He=["start","end"],Re=[{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:0,y:.5},{x:1,y:.5},{x:0,y:1},{x:.5,y:1},{x:1,y:1}];class fn extends Ie{constructor(t,r={}){super();v(this,"arrows");v(this,"texts");v(this,"links",new un);v(this,"layer");v(this,"annotations");v(this,"ogma");v(this,"options");v(this,"selected",null);v(this,"updateTimeout",0);v(this,"hoveredNode",null);v(this,"dragged",null);v(this,"textToMagnet");v(this,"activeLinks",[]);v(this,"_render",t=>{if(!this.dragged||this.textToMagnet===void 0)return;t.beginPath(),t.fillStyle="green";const r=this.ogma.view.getZoom();Re.forEach(a=>{if(!this.textToMagnet)return;const c=lt(this.textToMagnet),f=ut(this.textToMagnet),{x:g,y:p}=new X(a.x,a.y).mul({x:c.width,y:c.height}).rotateRadians(this.ogma.view.getAngle()).add(f);t.moveTo(g,p),t.arc(g,p,this.options.magnetHandleRadius/r,0,Math.PI*2)}),t.fill(),t.closePath()});v(this,"_onFeatureDrag",(t,r)=>{const a=r;if(at(t)&&a==="line")["start","end"].find(c=>{const f=c==="start"?kt(t):Mt(t);return this._snapToText(t,a,f)||this._findAndSnapToNode(t,c,f)});else if(at(t)&&a!=="line"){const c=a==="start"?kt(t):Mt(t);this._snapToText(t,a,c)||this._findAndSnapToNode(t,a,c)}else gt(t)&&(this.activeLinks.forEach(({arrow:c,side:f,connectionPoint:g})=>{const p=this.getAnnotation(c),s=lt(t),d=ut(t),m=new X(g.x,g.y).mul({x:s.width,y:s.height}).rotateRadians(this.ogma.view.getAngle()).add(d);p.geometry.coordinates[f==="start"?0:1]=[m.x,m.y]}),this.activeLinks.length&&this.arrows.refreshLayer());this.layer.refresh(),this.emit(Ft,t,r)});v(this,"_onFeatureDragEnd",t=>{this.dragged!==null&&at(t)&&kt(this.dragged)&&He.forEach(r=>{this.links.getArrowLink(t.id,r)&&this.emit(an,{arrow:t,link:this.links.getArrowLink(t.id,r)})}),(gt(t)||at(t))&&this.onUpdate(t),this.dragged=null,this.activeLinks=[],this.textToMagnet=void 0,this.annotations.forEach(r=>r.enableDetection()),this.layer.refresh(),this.emit(Tt,t)});v(this,"_onFeatureDragStart",t=>{this.textToMagnet=void 0,at(t)?this.dragged=t:gt(t)&&this.activeLinks.push(...this.links.getTargetLinks(t.id,"text")),this.annotations.forEach(r=>{const a=r.getSelectedFeature();a&&a!==t&&r.unhover().unselect(),r.disableDetection()}),this.emit(Bt,t)});v(this,"_onNodesDragStart",()=>{this.arrows.unhover().unselect(),this.texts.unhover().unselect()});v(this,"_onNodesDrag",t=>{const{dx:r,dy:a}=t;this._moveNodes(t.nodes,r,a)});v(this,"_onLayoutEnd",t=>{t.ids.forEach((r,a)=>{this.links.getTargetLinks(r,"node").forEach(f=>{const g=this.getAnnotation(f.arrow),p=f.side,s=Dt(g,p==="start"?"end":"start"),d=t.positions.current[a],m=this.ogma.getNode(r).getAttribute("radius"),A=Lt(s,d,+m);vt(g,p,A.x,A.y)})}),this.arrows.refreshLayer(),this.texts.refreshLayer()});v(this,"_onAdded",t=>{this.emit(re,t)});v(this,"_onRemoved",t=>{this.emit(ie,t)});v(this,"_onUnselect",t=>{this.selected=null,this.emit(ne,t)});v(this,"_onSelect",t=>{this.selected!==t&&(this.selected=t,this.emit(ee,this.selected))});v(this,"onUpdate",t=>{cancelAnimationFrame(this.updateTimeout),this.updateTimeout=requestAnimationFrame(()=>this._onUpdate(t))});v(this,"_onUpdate",t=>{this.emit(se,t)});this.options=this.setOptions({...dn,...r}),this.ogma=t,this.arrows=new ze(t,this.options),this.texts=new Ne(t,this.options),this.annotations=[this.arrows,this.texts],this.annotations.forEach(a=>{a.on(Bt,this._onFeatureDragStart).on(Ft,this._onFeatureDrag).on(Tt,this._onFeatureDragEnd).on(se,this.onUpdate).on(ne,this._onUnselect).on(ee,this._onSelect).on(re,this._onAdded).on(ie,this._onRemoved)}),this.ogma.events.on("nodesDragStart",this._onNodesDragStart).on("nodesDragProgress",this._onNodesDrag).on("layoutEnd",this._onLayoutEnd).on(["viewChanged","rotate"],()=>{this.refreshTextLinks()}),this.layer=t.layers.addCanvasLayer(this._render),this.layer.moveToBottom()}_moveNodes(t,r,a){t.forEach(c=>{const f=this.links.getTargetLinks(c.getId(),"node"),g=c.getPosition();f.forEach(p=>{const s=this.getAnnotation(p.arrow),d=p.side,m=Dt(s,d==="start"?"end":"start");let A=g;const T=+c.getAttribute("radius"),S=1e-6;(p.connectionPoint.x-(g.x-r)>S||p.connectionPoint.y-(g.y-a)>S)&&(A=Lt(m,g,T)),vt(s,d,A.x,A.y)})}),this.arrows.refreshLayer()}_snapToText(t,r,a){const c=this.texts.detect(a,this.options.detectMargin);if(this.links.remove(t,r),!c)return!1;this.textToMagnet=c;const f=this.findMagnetPoint(Re,c,a);return f?(vt(t,r,f.point.x,f.point.y),this.links.add(t,r,c.id,"text",f.magnet),!0):!1}_findAndSnapToNode(t,r,a){const c=this.ogma.view.graphToScreenCoordinates(a),f=this.ogma.view.getElementAt(c);this.links.remove(t,r),f&&f.isNode?(this.hoveredNode=f,this.hoveredNode.setSelected(!0),this._snapToNode(t,r,f,c)):(this.hoveredNode&&this.hoveredNode.setSelected(!1),this.hoveredNode=null)}_snapToNode(t,r,a,c){const f=a.getPositionOnScreen(),g=+a.getAttribute("radius"),p=g*this.ogma.view.getZoom(),s=c.x-f.x,d=c.y-f.y,m=Math.sqrt(s*s+d*d),A=a.getPosition();if(m<p+this.options.detectMargin){let T=A;if(m>p/2){const S=Dt(t,r==="end"?"start":"end");T=Lt(S,T,g)}vt(t,r,T.x,T.y),this.links.add(t,r,a.getId(),"node",T)}}refreshTextLinks(){let t=!1;this.links.forEach(({connectionPoint:r,targetType:a,target:c,arrow:f,side:g})=>{if(a!=="text")return;t=!0;const p=this.getAnnotation(c),s=this.getAnnotation(f),d=lt(p),m=ut(p),A=new X(r.x,r.y).mul({x:d.width,y:d.height}).rotateRadians(this.ogma.view.getAngle()).add(m);vt(s,g,A.x,A.y)}),t&&this.arrows.refreshLayer()}getSelected(){return this.selected}findMagnetPoint(t,r,a){let c;for(const f of t){const g=lt(r),p=ut(r),s=new X(f.x,f.y).mul({x:g.width,y:g.height}).rotateRadians(this.ogma.view.getAngle()).add(p),d=s.sub(a).length(),m=Math.min(this.options.magnetRadius*this.ogma.view.getZoom(),g.width/2,g.height/2);if(d<Math.max(m,this.options.magnetHandleRadius)){c={point:s,magnet:f};break}}return c}setOptions(t={}){return this.options={...this.options||{},...t},this.options}select(t){const r=this.getAnnotations().features.find(a=>a.id===t);return r?(at(r)?this.arrows.select(r.id):gt(r)&&this.texts.select(r.id),this):this}unselect(){return this.selected?(at(this.selected)?this.arrows.unselect():gt(this.selected)&&this.texts.unselect(),this):this}add(t){if(ae(t)){const[r,a]=t.features.reduce((c,f)=>(at(f)?c[1].push(f):gt(f)&&c[0].push(f),c),[[],[]]);return r.forEach(c=>this.add(c)),a.forEach(c=>this.add(c)),this.arrows.refreshLayer(),this}switch(t.properties.type){case"text":this.texts.add(t);break;default:this.arrows.add(t),this.loadLink(t);break}return this}remove(t){return ae(t)?(t.features.forEach(r=>this.remove(r)),this):(at(t)?(this.links.remove(t,"start"),this.links.remove(t,"end"),this.arrows.remove(t.id)):this.texts.remove(t.id),this)}loadLink(t){if(t.properties.link)for(const r of He){const a=t.properties.link[r];if(!a)continue;const c=this.getAnnotation(a.id);if(a.type==="text"&&c)this.links.add(t,r,a.id,a.type,a.magnet);else if(a.type==="node"){const f=this.ogma.getNode(a.id);if(!f)continue;this.links.add(t,r,a.id,a.type,a.magnet);const g=f.getPosition(),p=f.getAttribute("radius")||0,s=Dt(t,r==="start"?"end":"start"),d=Lt(s,g,+p);vt(t,r,d.x,d.y)}}}startArrow(t,r,a){this.cancelDrawing(),this.arrows.startDrawing(t,r,a)}startText(t,r,a){this.cancelDrawing(),this.texts.startDrawing(t,r,a)}cancelDrawing(){this.annotations.forEach(t=>t.cancelDrawing()),this.emit(on)}updateStyle(t,r){const a=this.getAnnotations().features.find(c=>c.id===t);return a?(at(a)?this.arrows.updateStyle(a,r):gt(a)&&this.texts.updateStyle(a,r),this.onUpdate(a),this):this}getAnnotations(){const t={type:"FeatureCollection",features:[]};return this.annotations.forEach(r=>{t.features=[...t.features,...r.getElements()]}),t}getAnnotation(t){return this.getAnnotations().features.find(r=>r.id===t)}destroy(){this.annotations.forEach(t=>t.destroy()),this.layer.destroy()}}I.Arrows=ze,I.Control=fn,I.Texts=Ne,I.createArrow=be,I.createSVGElement=Et,I.createText=Le,I.defaultArrowOptions=Wt,I.defaultArrowStyle=St,I.defaultControllerOptions=oe,I.defaultTextOptions=qt,I.defaultTextStyle=wt,I.getAnnotationsBounds=en,I.getArrowEnd=Mt,I.getArrowEndPoints=zt,I.getArrowSide=Dt,I.getArrowStart=kt,I.getAttachmentPointOnNode=Lt,I.getHandleId=te,I.getTextBbox=Kt,I.getTextPosition=ut,I.getTextSize=lt,I.isAnnotationCollection=ae,I.isArrow=at,I.isText=gt,I.setArrowEnd=Qt,I.setArrowEndPoint=vt,I.setArrowStart=Jt,I.setTextBbox=Se,I.updateTextBbox=Ae,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=index.umd.js.map