UNPKG

@linkurious/ogma-annotations-react

Version:

A react component to add ogma annotations with react

2 lines (1 loc) 3.91 kB
(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@linkurious/ogma-annotations"),require("@linkurious/ogma-react"),require("react")):typeof define=="function"&&define.amd?define(["exports","@linkurious/ogma-annotations","@linkurious/ogma-react","react"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.OgmaAnnotationsReact={},t.OgmaAnnotations,t.OgmaReact,t.React))})(this,(function(t,o,B,r){"use strict";const f=[8,10,12,14,16,24,32,48,64,72],d="none",C="#333333",k=["#FFFFFF","#F44E3B","#FE9200","#FCDC00","#A4DD00","#68CCCA","#73D8FF","#AEA1FF","#1E88E5","#333333","#808080","#cccccc"],v=["Roboto","Helvetica Neue","Helvetica","Arial","sans-serif","Georgia, serif","Menlo","Monaco","Consolas","Courier New","monospace"].sort((a,s)=>a.toLocaleLowerCase().localeCompare(s.toLocaleLowerCase())),w={head:"arrow",strokeColor:C,strokeWidth:5},T=.25,b={font:"Roboto",fontSize:f[2],padding:f[2]*T,color:C,strokeType:d,background:d},m=r.createContext(void 0),L=()=>r.useContext(m);function N(){return r.createContext(null)}function A(a){return a.reduce((s,c)=>s+c,0)/a.length}function j(a,s=0,c=1){return s+(c-s)*a}function V(a,s=0,c=1){return(a-s)/(c-s)}const z=({children:a,annotations:s})=>{const c=B.useOgma(),[_,y]=r.useState(s||{type:"FeatureCollection",features:[]}),[u,S]=r.useState(null),[i,E]=r.useState(w),[g,P]=r.useState(b),[e,F]=r.useState(),[D,O]=r.useState(1),[x,h]=r.useState(1),[H,W]=r.useState(!1),[I,U]=r.useState(!1);return r.useEffect(()=>{if(!c)return;const n=new o.Control(c,{minArrowHeight:1}),M=A(c.getNodes().getAttribute("radius"))/5,p=D;return E({...i,strokeWidth:(i.strokeWidth||1)*p}),O(p),h(M),n.on(o.EVT_SELECT,()=>{n.getSelectedAnnotations().features.forEach(l=>{l&&(o.isArrow(l)?E({...l.properties.style||{}}):o.isText(l)&&P({...l.properties.style||{}}),S(l))})}).on(o.EVT_UNSELECT,()=>{S(null)}).on(o.EVT_ADD,()=>{y(n.getAnnotations())}).on(o.EVT_REMOVE,()=>{y(n.getAnnotations())}).on(o.EVT_UPDATE,()=>{y(n.getAnnotations())}).on(o.EVT_HISTORY,()=>{W(n.canUndo()),U(n.canRedo())}),F(n),s&&(n.add(s),n.clearHistory()),()=>{n.destroy()}},[c]),r.useEffect(()=>{e&&u&&(u==null?void 0:u.properties.type)==="arrow"&&e.updateStyle(u.id,i)},[e,i,u]),r.useEffect(()=>{e&&u&&(u==null?void 0:u.properties.type)==="text"&&e.updateStyle(u.id,g)},[e,g,u]),r.createElement(m.Provider,{value:{annotations:_,currentAnnotation:u,setCurrentAnnotation:S,textStyle:g,setTextStyle:P,arrowStyle:i,setArrowStyle:E,arrowWidthFactor:D,setArrowWidthFactor:O,textSizeFactor:x,setTextSizeFactor:h,editor:e,setEditor:F,canUndo:H,canRedo:I,undo:()=>(e==null?void 0:e.undo())||!1,redo:()=>(e==null?void 0:e.redo())||!1,clearHistory:()=>e==null?void 0:e.clearHistory(),add:n=>e==null?void 0:e.add(n),remove:n=>e==null?void 0:e.remove(n),cancelDrawing:()=>e==null?void 0:e.cancelDrawing(),select:n=>e==null?void 0:e.select(n),enableBoxDrawing:n=>e==null?void 0:e.enableBoxDrawing(n),enablePolygonDrawing:n=>e==null?void 0:e.enablePolygonDrawing(n),enableCommentDrawing:n=>e==null?void 0:e.enableCommentDrawing(n)}},a)};Object.defineProperty(t,"createBox",{enumerable:!0,get:()=>o.createBox}),Object.defineProperty(t,"createComment",{enumerable:!0,get:()=>o.createComment}),Object.defineProperty(t,"createPolygon",{enumerable:!0,get:()=>o.createPolygon}),Object.defineProperty(t,"getAnnotationsBounds",{enumerable:!0,get:()=>o.getAnnotationsBounds}),Object.defineProperty(t,"isBox",{enumerable:!0,get:()=>o.isBox}),Object.defineProperty(t,"isComment",{enumerable:!0,get:()=>o.isComment}),Object.defineProperty(t,"isPolygon",{enumerable:!0,get:()=>o.isPolygon}),t.AnnotationsContextProvider=z,t.BLACK=C,t.RELATIVE_PADDING=T,t.TRANSPARENT=d,t.createAnnotationsContext=N,t.defaultArrowStyle=w,t.defaultColors=k,t.defaultTextStyle=b,t.fontSizes=f,t.fonts=v,t.interpolate=j,t.mean=A,t.normalize=V,t.useAnnotationsContext=L,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));