@visuallyjs/browser-ui-react 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/visuallyjs.browser-ui-react.cjs.js +1 -1
  3. package/visuallyjs.browser-ui-react.es.js +1 -1
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@visuallyjs/browser-ui-react","version":"1.1.0","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.1.0"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
1
+ {"name":"@visuallyjs/browser-ui-react","version":"1.1.1","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.1.1"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
package/visuallyjs.browser-ui-react.cjs.js CHANGED
@@ -1 +1 @@
1
- var ft=Object.create;var Te=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Et=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,xt=Object.prototype.hasOwnProperty;var Ot=(e,t)=>{for(var r in t)Te(e,r,{get:t[r],enumerable:!0})},tt=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Et(t))!xt.call(e,o)&&o!==r&&Te(e,o,{get:()=>t[o],enumerable:!(n=Ct(t,o))||n.enumerable});return e};var _=(e,t,r)=>(r=e!=null?ft(gt(e)):{},tt(t||!e||!e.__esModule?Te(r,"default",{value:e,enumerable:!0}):r,e)),St=e=>tt(Te({},"__esModule",{value:!0}),e);var Qt={};Ot(Qt,{ATTRIBUTE_CAN_REDO:()=>ct,ATTRIBUTE_CAN_UNDO:()=>st,AreaChartComponent:()=>zt,BackgroundComponent:()=>Ge,BarChartComponent:()=>Ut,BrowserUIReactModel:()=>ce,BubbleChartComponent:()=>Jt,CLASS_REACT_GROUP:()=>Ae,CLASS_REACT_NODE:()=>Ne,CLASS_REACT_OVERLAY:()=>$e,CLASS_SELECTED_MODE:()=>je,ColorPickerComponent:()=>jt,ColumnChartComponent:()=>Gt,ControlsComponent:()=>wt,DEFAULT_SHAPE_HEIGHT:()=>dt,DEFAULT_SHAPE_WIDTH:()=>ut,DecoratorComponent:()=>Qe,DiagramComponent:()=>Tt,DiagramContext:()=>w,DiagramPaletteComponent:()=>kt,DiagramProvider:()=>vt,EdgeTypePickerComponent:()=>ht,ExportControlsComponent:()=>Mt,GaugeChartComponent:()=>$t,GridBackgroundComponent:()=>Zt,ImageBackgroundComponent:()=>Yt,InspectorComponent:()=>At,InspectorContext:()=>Re,JSXWrapper:()=>we,LineChartComponent:()=>Ft,MiniviewComponent:()=>Nt,PaletteComponent:()=>Bt,PieChartComponent:()=>Ht,SankeyChartComponent:()=>Xt,ScatterChartComponent:()=>Wt,ShapeComponent:()=>Vt,ShapePaletteComponent:()=>It,SurfaceComponent:()=>Dt,SurfaceContext:()=>g,SurfaceProvider:()=>Rt,TiledImageBackgroundComponent:()=>qt,VisuallyJsContext:()=>ye,VisuallyJsProvider:()=>yt,XYChartComponent:()=>Lt,createDiagramRef:()=>Ke,createInspectorRef:()=>Ye,createRefHandler:()=>de,createSurfaceRef:()=>ue,getSurfaceComponent:()=>Pe,newInstance:()=>Xe,registerSurface:()=>Je,useDiagram:()=>_t,useInspector:()=>he,useSurface:()=>Ze,useVisuallyJsModel:()=>bt,useZoom:()=>Kt});module.exports=St(Qt);var We=require("@visuallyjs/browser-ui"),rt=new Map,Se={};function Je(e,t){rt.set(e,t),Pt(e,t)}function Pt(e,t){(Se[e]||[]).forEach(n=>{try{n(t)}catch(o){(0,We.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Se[e]}function Pe(e,t){let r=rt.get(e);if(r)try{t(r)}catch(n){(0,We.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Se[e]=Se[e]||[],Se[e].push(t)}var Ne="vjs-react-node",Ae="vjs-react-group",$e="vjs-react-overlay";var oe=_(require("react"));function we(e){let t=(0,oe.useRef)(!1);return(0,oe.useEffect)(()=>{t.current||(t.current=!0,e.cb(e.ns))}),oe.default.createElement(oe.default.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}var Me=require("@visuallyjs/browser-ui"),ce=class extends Me.BrowserUIModel{render(t,r){return(0,Me.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Xe(e){return e=e||{},new ce(e)}var K=_(require("react")),g=(0,K.createContext)(null);function Rt(e){let t=(0,K.useRef)(null),r=ue(t);return K.default.createElement(g.Provider,{value:r},e.children||[])}function ue(e){return de(e)}function de(e){let t=[];return{set:r=>{e.current=r,t.forEach(n=>n(r))},listen:r=>{e.current==null?t.push(r):r(e.current)},Ri:()=>e}}function Ze(){let e=(0,K.useContext)(g);return new Promise((t,r)=>{e!=null?e.listen(n=>t(n)):r()})}var Ie=require("react"),Re=(0,Ie.createContext)(null);function Ye(e){return de(e)}function he(){let e=(0,Ie.useContext)(Re);return e==null?null:e.Ri().current}var Q=_(require("react")),Ve=require("@visuallyjs/browser-ui");function ht(e){let t=(0,Q.useRef)(!1),r=(0,Q.useRef)(null),n=(0,Q.useRef)(null),o=he(),{propertyName:u}=e,a=()=>o.getFromContext(Ve.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||o.$ui.$getEdgePropertyMappings();return(0,Q.useEffect)(()=>{t.current||(t.current=!0,n.current=new Ve.EdgeTypePicker(o.$ui,r.current,a(),o.getValue(u),(d,m)=>{o.setValue(u,m)}),n.current.render(u,o.qe),o.onChange(()=>{n.current.select(u,o.getValue(u))}))}),Q.default.createElement("div",{ref:r})}var ne=_(require("react")),ye=(0,ne.createContext)(void 0);function yt(e){let t=Xe(e.modelOptions||{});return ne.default.createElement(ye.Provider,{value:t},e.children||[])}function bt(){let e=(0,ne.useContext)(ye);return new Promise((t,r)=>{if(e==null){let n=(0,ne.useContext)(g);n!=null?n.listen(o=>t(o.model)):r()}else t(e)})}var x=_(require("react")),qe=_(require("react-dom")),l=require("@visuallyjs/browser-ui"),Dt=(0,x.forwardRef)((e,t)=>{let r=(0,x.useRef)(!1),n=(0,x.useContext)(ye),o=(0,x.useRef)(null),u=(0,x.useRef)(null),a=(0,x.useRef)(null),d,m=(0,x.useContext)(g);m==null?(d=(0,x.useRef)(null),m=ue(d)):d=m.Ri();let[O,R]=(0,x.useState)([]),[j,c]=(0,x.useState)([]),y=[],U=[];function M(f){return x.default.createElement(we,{ns:f,model:a.current,ui:d.current,childProps:e.childProps,cb:v=>{ee(v)}})}function ee(f){if(f.hydrated!==!0){let v=(0,l.isGroup)(f.obj)?Ae:Ne;f.domElement.firstElementChild&&((0,l.addClass)(f.domElement.firstElementChild,v),f.domElement.firstElementChild.getAttribute(l.ATTRIBUTE_NOT_DRAGGABLE)===l.TRUE&&f.domElement.setAttribute(l.ATTRIBUTE_NOT_DRAGGABLE,l.TRUE)),d.current.$vertexRendered(f.obj,f.domElement,f.def,f.payload.eventInfo),f.hydrated=!0}else d.current.$revalidateElement(f.domElement)}function F(){R(y.slice())}function te(f){return x.default.createElement(we,{ns:f,model:a.current,ui:d.current,childProps:e.childProps,cb:v=>{A(v)}})}function A(f){if(f.hydrated!==!0){let v=(0,l.isGroup)(f.obj)?Ae:Ne;f.domElement.firstElementChild&&(0,l.addClass)(f.domElement.firstElementChild,v),f.hydrated=!0}else d.current.$revalidateElement(f.domElement)}function $(){c(U.slice())}let X={getSurface:()=>d.current,getModel:()=>a.current};(0,x.useImperativeHandle)(t,()=>X),(0,x.useEffect)(()=>{var f;if(!r.current){r.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new ce(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(u.current=document.createElement("div"),u.current.style.position="fixed",u.current.style.left="10000px",u.current.style.top="10000px",u.current.style.width="100px",u.current.style.height="100px",u.current.style.opacity="0",o.current.appendChild(u.current));let v=(C,E,k,V,T,p,b,re)=>{let[Oe,B]=p.component||p.jsx?[p,null]:(0,l.isGroup)(b)?[Object.assign(Object.assign({},p),{jsx:He=>x.default.createElement(x.default.Fragment,null,He.obj.data.label)}),l.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},p),{jsx:He=>x.default.createElement(x.default.Fragment,null,He.obj.data.label)}),l.CLASS_DEFAULT_NODE],se=T.containerType===l.ElementTypes.HTML?document.createElement(l.ELEMENT_DIV):(0,l.$svgNode)(l.ELEMENT_SVG);u.current.appendChild(se),B!=null&&T.$addClassToElement(se,B);let pt={data:E,model:k,surface:T,componentId:b.getFullId(),obj:b,props:e.childProps,element:se,eventInfo:re};y.push({data:E,def:Oe,payload:pt,domElement:se,key:b.id,obj:b,hydrated:!1}),F()},ae=(C,E)=>{E.parentNode&&E.parentNode.removeChild(E)},xe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(C,E,k,V)=>{},render:v,rerender:(C,E,k,V,T,p,b,re,Oe)=>{let B=(0,l.partition)(y,se=>se.obj!==b);y=B.left,F(),v(C,E,k,V,T,p,b,re),B.right.length>0&&setTimeout(()=>{ae(null,B.right[0].domElement)})},cleanupVertex:ae,cleanupPort:(C,E)=>{}},ie=((f=e.viewOptions)==null?void 0:f.edges)||{};for(let C in ie){let E=ie[C];E.overlays!=null&&(E.overlays=E.overlays.map(k=>{if(k.jsx!=null){let V=(0,l.uuid)();return{type:l.CustomOverlay.type,options:{create:p=>{let b=document.createElement(l.ELEMENT_DIV);b.className=$e;let re={data:p.edge.data,model:a.current,surface:le,componentId:p.edge.getFullId(),obj:p.edge,props:e.childProps,element:b};return U.push({def:{jsx:k.jsx},data:p.edge.data,obj:p.edge,payload:re,domElement:b,key:V,hydrated:!1}),$(),b}}}}else return k}))}let Le=Object.assign(e.renderOptions||{},{view:e.viewOptions}),le=(0,l.renderSurface)(a.current,o.current,xe,Le);m.set(le),e.surfaceId!=null&&Je(e.surfaceId,X);let ve=(C,E)=>{let k=()=>{let T={};return(E.originalData||E.updates)&&(T=(0,l.extend)(E.originalData,E.updates)),T},V=y.find(T=>T.key===C);V!=null&&(V.data=k(),F())},_e=C=>{y=y.filter(E=>E.payload.componentId!==C),F()},Fe=(C,E)=>{let k=()=>{let T={};return(E.originalData||E.updates)&&(T=(0,l.extend)(E.originalData,E.updates)),T},V=U.find(T=>T.obj.id===C);V!=null&&(V.data=k(),$())},ze=C=>{U=U.filter(E=>E.payload.obj.id!==C),$()};a.current.bind(l.EVENT_NODE_UPDATED,C=>{ve(C.vertex.getFullId(),C)}),a.current.bind(l.EVENT_GROUP_UPDATED,C=>{ve(C.vertex.getFullId(),C)}),a.current.bind(l.EVENT_NODE_REMOVED,C=>{_e(C.node.id)}),a.current.bind(l.EVENT_GROUP_REMOVED,C=>{_e(C.group.id)}),a.current.bind(l.EVENT_EDGE_REMOVED,C=>{ze(C.edge.id)}),a.current.bind(l.EVENT_EDGE_UPDATED,C=>{Fe(C.edge.id,C)}),a.current.bind(l.EVENT_GRAPH_CLEARED,()=>{y=[],F(),U=[],$()}),e.data?a.current.load({data:e.data,onload:()=>setTimeout(()=>le.repaintEverything(),250)}):e.url&&a.current.load({url:e.url,onload:()=>setTimeout(()=>le.repaintEverything(),250)})}});let Ee=`${e.className||""} vjs-react-surface`,ge=e.style||{};return x.default.createElement("div",{ref:o,className:Ee,style:ge},O.map(f=>qe.createPortal(M(f),f.domElement,f.key)),j.map(f=>qe.createPortal(te(f),f.domElement,f.key)),x.default.createElement(g.Provider,{value:m},e.children))});var h=_(require("react")),ot=require("@visuallyjs/browser-ui"),w=(0,h.createContext)(null);function Ke(e){return de(e)}function vt(e){let t=(0,h.useRef)(null),r=Ke(t);return h.default.createElement(w.Provider,{value:r},e.children||[])}function _t(){let e=(0,h.useContext)(w);return new Promise((t,r)=>{e!=null?e.listen(n=>t(n)):r()})}var Tt=(0,h.forwardRef)((e,t)=>{let r=(0,h.useRef)(null),n=(0,h.useRef)(!1),o,u,a=(0,h.useContext)(w);a==null?(o=(0,h.useRef)(null),a=Ke(o)):o=a.Ri();let d=(0,h.useContext)(g);d==null?(u=(0,h.useRef)(null),d=ue(u)):u=d.Ri();let m={getDiagram:()=>o.current};(0,h.useImperativeHandle)(t,()=>m),(0,h.useEffect)(()=>{n.current||(n.current=!0,o.current=(0,ot.createDiagram)(r.current,e.options,e.modelOptions),u.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),a.set(o.current),d.set(u.current))});let O=`${e.className||""} vjs-react-diagram`,R=e.style||{};return h.default.createElement("div",{ref:r,className:O,style:R},h.default.createElement(g.Provider,{value:d},h.default.createElement(w.Provider,{value:a},e.children)))});var Be=require("@visuallyjs/browser-ui"),G=_(require("react")),Nt=(0,G.forwardRef)((e,t)=>{let r=(0,G.useContext)(g),n=(0,G.useContext)(w),o=(0,G.useRef)(!1),u=(0,G.useRef)(null),a;(0,G.useImperativeHandle)(t,()=>({toggleCollapsed:()=>a==null?void 0:a.toggleCollapsed()}));function d(m){m.addPlugin({type:Be.MiniviewPlugin.type,options:{container:u.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter}})}return(0,G.useEffect)(()=>{o.current||(o.current=!0,r!=null?r.listen(d):n!=null&&n.listen(m=>{m.$ui instanceof Be.Surface&&d(m.$ui)}))}),G.default.createElement("div",{ref:u,className:`${e.className||""}`})});var me=require("@visuallyjs/browser-ui"),S=_(require("react")),At=(0,S.forwardRef)((e,t)=>{let r=(0,S.useContext)(g),n=(0,S.useContext)(w),o,u=(0,S.useContext)(Re);u==null&&(o=(0,S.useRef)(null),u=Ye(o));let[a,d]=(0,S.useState)(null),[m,O]=(0,S.useState)(0),[R,j]=(0,S.useState)(null),c=(0,S.useRef)(!1),y=(0,S.useRef)(null),U=e.className||"";(0,S.useEffect)(()=>{var A;(A=o==null?void 0:o.current)==null||A.$refresh()},[m]);let M=e.onSelectionCleared||(()=>d(null)),ee=(A,$)=>{d(A),e.refresh&&e.refresh(A),O(X=>X+1)};function F(A){o.current=new me.Inspector({container:y.current,ui:A,renderEmptyContainer:M,refresh:ee,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(A):null}),j(o.current)}let te={getInspector:()=>R};return(0,S.useImperativeHandle)(t,()=>te),(0,S.useEffect)(()=>{c.current||(c.current=!0,r!=null?r.listen(F):n!=null?n.listen(A=>{A.$ui instanceof me.Surface&&F(A.$ui)}):(0,me.log)("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),S.default.createElement("div",{ref:y,className:U},S.default.createElement(Re.Provider,{value:u},a!=null&&S.default.createElement(S.default.Fragment,null,typeof e.children=="function"?e.children(a,o.current.$ui.model):e.children||[]),a==null&&S.default.createElement(S.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var In="group:added",Vn="group:member:added",Bn="group:member:removed",jn="group:removed",kn="dataLoadStart",Gn="dataAppendStart",Un="dataLoadEnd",Ln="dataAppendEnd",Fn="dataUpdated",zn="graphClearStart",Hn="graphCleared",Wn="graphChanged",Jn="group:updated",$n="node:updated",Xn="port:updated",Zn="edge:updated",Yn="edge:added",qn="node:added",Kn="edge:removed",Qn="node:removed",ea="port:added",ta="port:removed",ra="edge:target",oa="edge:source",nt="select",at="deselect",it="selection:cleared",na="edge:geometry",aa="edge:pathEdited",ia="edge:typeChanged",la="node:typeChanged",sa="port:typeChanged",ca="group:typeChanged",ua="group:move:start",da="group:move",ma="group:move:end",pa="internal:group:sizeChanged",fa="internal:group:sizeChangedRedo",Ca="internal:group:sizeChangedUndo",Ea="renderer:added",ga="node:move:start",xa="node:move",Oa="node:move:end",Sa="node:move:abort",Pa="undoredo:update",Ra="undo",ha="redo",ya="destroy";var s=_(require("react")),i=require("@visuallyjs/browser-ui"),st="can-undo",ct="can-redo",je="vjs-selected-mode",lt="vjs-controls-has-selection";function wt(e){let t="Clear selection",[r,n]=(0,s.useState)("row"),[o,u]=(0,s.useState)(!1),[a,d]=(0,s.useState)(!1),m=(0,s.useContext)(g),O=(0,s.useContext)(w),R=(0,s.useRef)(null),j=(0,s.useRef)(!1),c=(0,s.useRef)(null),[y,U]=(0,s.useState)("Clear dataset?"),M=(0,s.useRef)(null),[ee,F]=(0,s.useState)(!0),[te,A]=(0,s.useState)(!1),[$,X]=(0,s.useState)(!0),[Ee,ge]=(0,s.useState)(!0),[f,v]=(0,s.useState)([]),[ae,xe]=(0,s.useState)([]);function ie(p){c.current=p,e.clearMessage&&U(e.clearMessage),e.onMaybeClear&&(M.current=e.onMaybeClear),e.orientation&&n(e.orientation),e.undoRedo===!1&&X(!1),e.zoomToExtents===!1&&F(!1),e.zoomButtons===!0&&A(!0),e.clear===!1&&ge(!1);let b=(e.buttons||[]).filter(B=>B.mode!=null);v(b);let re=(e.buttons||[]).filter(B=>B.mode==null);xe(re),p.bind(i.EVENT_SURFACE_MODE_CHANGED,B=>{p.removeClass(p.$getSelector(R.current,"[data-mode]"),je),p.addClass(p.$getSelector(R.current,"[data-mode='"+B+"']"),je)}),p.model.bind(i.EVENT_UNDOREDO_UPDATE,B=>{R.current.setAttribute(st,B.undoCount>0?i.TRUE:i.FALSE),R.current.setAttribute(ct,B.redoCount>0?i.TRUE:i.FALSE)}),p.model.bind(nt,V),p.model.bind(at,V),p.model.bind(it,V);let Oe=p.getPlugin(i.LassoPlugin.type);u(Oe!=null),d(Oe!=null||b.length>0)}function Le(){c.current.model.clearSelection(),c.current.zoomToFit()}function le(){c.current.zoomIn()}function ve(){c.current.zoomOut()}function _e(){c.current.setMode(i.SURFACE_MODE_PAN)}function Fe(){c.current.setMode(i.SURFACE_MODE_SELECT)}function ze(){c.current.model.clearSelection(),(0,i.supportsPathEditing)(c.current)&&c.current.stopEditingPath()}function C(){M.current!=null?M.current(()=>c.current.model.clear()):window.confirm(y)&&c.current.model.clear()}function E(){c.current.model.undo()}function k(){c.current.model.redo()}let V=()=>{c.current.model.getSelection().isEmpty()?R.current.removeAttribute(lt):R.current.setAttribute(lt,"true")};(0,s.useEffect)(()=>{j.current===!1&&(j.current=!0,e.surfaceId!=null?Pe(e.surfaceId,p=>ie(p.getSurface())):m!=null?m.listen(ie):O!=null?O.listen(p=>{p.$ui instanceof i.Surface&&ie(p.$ui)}):(0,i.log)("WARN: controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))});let T=e.style||{};return s.default.createElement("div",{style:T,ref:R,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":r},a&&s.default.createElement("i",{className:"vjs-pan-mode "+je,"data-mode":i.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>_e()},s.default.createElement("svg",{fill:"none",viewBox:i.PAN_VIEW_BOX,stroke:"currentColor"},s.default.createElement("path",{d:i.PAN_PATH}))),o&&s.default.createElement("i",{className:"vjs-select-mode","data-mode":i.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>Fe()},s.default.createElement("svg",{fill:"currentColor",viewBox:i.LASSO_VIEW_BOX,stroke:"currentColor"},s.default.createElement("path",{d:i.LASSO_PATH}))),f.map(p=>s.default.createElement("i",{className:p.class,title:p.title,onClick:b=>p.handler(b,p.id)})),ee&&s.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Le()},s.default.createElement("svg",{viewBox:i.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_TO_FIT_PATH}))),te&&s.default.createElement(s.default.Fragment,null,s.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>le()},s.default.createElement("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_IN_PATH}))),s.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>ve()},s.default.createElement("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_OUT_PATH})))),$&&s.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()}),$&&s.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>k()}),s.default.createElement("i",{className:i.CLASS_CONTROLS_RESET_SELECTION,title:t,onClick:()=>ze()},s.default.createElement("svg",{viewBox:i.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.RESET_SELECTION_PATH}))),Ee&&s.default.createElement("i",{className:"vjs-clear-dataset",title:y,onClick:()=>C()},s.default.createElement("svg",{viewBox:i.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.CLEAR_PATH}))),ae.map(p=>s.default.createElement("i",{className:p.class,title:p.title,onClick:b=>p.handler(b,p.id)})))}var P=_(require("react")),L=require("@visuallyjs/browser-ui");function Mt(e){let t=(0,P.useRef)(!1),r=(0,P.useRef)(null),n=(0,P.useContext)(g),o=(0,P.useContext)(w),[u,a]=(0,P.useState)(!0),[d,m]=(0,P.useState)("Export :"),[O,R]=(0,P.useState)(null),[j,c]=(0,P.useState)(null),[y,U]=(0,P.useState)(null),[M,ee]=(0,P.useState)(!0),[F,te]=(0,P.useState)(!0),[A,$]=(0,P.useState)(!0);function X(v){r.current=v,e.label&&m(d),e.showLabel!=null&&a(e.showLabel),e.margins&&R(e.margins);let ae=e.svgOptions||{};c(ae);let xe=e.imageOptions||{};U(xe),e.allowJpgExport!=null&&$(e.allowJpgExport),e.allowPngExport!=null&&te(e.allowPngExport),e.allowSvgExport!=null&&ee(e.allowSvgExport)}function Ee(){new L.SvgExportUI(r.current).export(j)}function ge(){new L.ImageExportUI(r.current).export(y)}function f(){new L.ImageExportUI(r.current).export(Object.assign(y||{},{type:"image/jpeg"}))}return(0,P.useEffect)(()=>{t.current===!1&&(t.current=!0,e.surfaceId!=null?Pe(e.surfaceId,v=>X(v.getSurface())):n!=null?n.listen(X):o!=null?o.listen(v=>{v.$ui instanceof L.Surface&&X(v.$ui)}):(0,L.log)("WARN: export controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),P.default.createElement("div",{className:`${L.CLASS_CONTROLS} ${L.CLASS_EXPORT_CONTROLS}`},u&&P.default.createElement("span",null,d),M&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>Ee()},"SVG")),F&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>ge()},"PNG")),A&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>f()},"JPG")))}var z=_(require("react")),be=require("@visuallyjs/browser-ui"),It=(0,z.forwardRef)((e,t)=>{let r=(0,z.useRef)(!1),n=(0,z.useRef)(null),o=(0,z.useContext)(g),u=(0,z.useRef)(null),a=e.className||"";function d(m){m.getShapeLibrary()!=null?u.current=new be.ShapePalette(m,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):(0,be.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,z.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(m=>d(m)):e.surface!=null?d(e.surface):(0,be.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),z.default.createElement("div",{ref:n,className:a})});var pe=_(require("react")),fe=require("@visuallyjs/browser-ui"),ut=120,dt=90;function Vt(e){let t=(0,pe.useRef)(null);function r(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function u(){return e.ctx.obj.data.width||ut}function a(){return e.ctx.obj.data.height||dt}function d(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function m(){return e.labelProperty||"label"}return(0,pe.useEffect)(()=>{let O=e.ctx.obj.data,R=e.ctx.ui.getShapeLibrary(),j=R.renderCompiledShape(O);if(t.current.replaceChildren(j),e.showLabels){let c=R.renderShapeLabel(O,m(),e.labelStrokeWidth,null,d(),d(),e.font);t.current.appendChild(c),e.multilineLabels!=!1&&(0,fe.convertToMultilineText)(c,O[m()]||"",u()*(e.labelFillRatio||fe.DEFAULT_LABEL_FILL_RATIO))}}),pe.default.createElement("svg",{className:fe.CLASS_SHAPE,ref:t,strokeWidth:r(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+u()+" "+a()})}var H=_(require("react")),Ce=require("@visuallyjs/browser-ui"),Bt=(0,H.forwardRef)((e,t)=>{let r=(0,H.useRef)(!1),n=(0,H.useRef)(null),o=(0,H.useContext)(g),u=(0,H.useRef)(null),a=e.className||"";function d(m){let O={selector:e.selector,source:n.current,dataGenerator:R=>e.dataGenerator?e.dataGenerator(R):(0,Ce.defaultDataGenerator)(R),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,typeGenerator:e.typeGenerator,groupIdentifier:e.groupIdentifier,dragSize:e.dragSize,canvasDropFilter:e.canvasDropFilter,mode:e.mode,onVertexAdded:e.onVertexAdded,selectAfterAdd:e.selectAfterAdd,allowClickToAdd:e.allowClickToAdd,clickToAddOnly:e.clickToAddOnly};u.current=new Ce.Palette(m,O)}return(0,H.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(m=>d(m)):e.surface!=null?d(e.surface):(0,Ce.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),H.default.createElement("div",{className:a,ref:n},e.children)});var W=_(require("react")),N=require("@visuallyjs/browser-ui");function jt(e){let t=e.maxColors||10,r=(0,W.useRef)(null),n=(0,W.useRef)(!1),o=he(),[u,a]=(0,W.useState)(o.ensureContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function d(c){let y=o.ensureContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(c=c.toUpperCase(),!(y.find(M=>M.toUpperCase()===c)!=null)){let M=y.slice();M.unshift(c),M.length>t&&(M.length=t),o.updateContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,M)}}function m(){let c=r.current.value;o.setValue(e.propertyName,c),d(c)}function O(c){o.setValue(e.propertyName,c),r.current.value=c}let R=c=>{c.key===N.INSPECTOR_CONTEXT_RECENT_COLORS&&a(c.value.slice())};function j(){let c=o.getValue(e.propertyName);c!=null&&r.current&&d(c)}return(0,W.useEffect)(()=>(o.bind(N.EVENT_CONTEXT_UPDATE,R),o.bind(N.EVENT_CHANGE,j),n.current||(n.current=!0,r.current.addEventListener(N.EVENT_CHANGE,m)),setTimeout(j),()=>{o.unbind(N.EVENT_CONTEXT_UPDATE,R),o.unbind(N.EVENT_CHANGE,j)})),W.default.createElement("div",{className:N.CLASS_COLOR_PICKER},W.default.createElement("input",{type:"color",ref:r,"vjs-att":e.propertyName}),W.default.createElement("div",{className:N.CLASS_COLOR_PICKER_SWATCHES},u.map(c=>W.default.createElement("div",{key:c,title:c,className:N.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:c},"data-color":c,onClick:()=>O(c)}))))}var J=_(require("react")),ke=require("@visuallyjs/browser-ui"),kt=(0,J.forwardRef)((e,t)=>{let r=(0,J.useRef)(!1),n=(0,J.useRef)(null),o=(0,J.useContext)(w),u=(0,J.useRef)(null),a=e.className||"";function d(O){u.current=new ke.DiagramPalette(n.current,O,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}(0,J.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(O=>d(O)):e.diagram!=null?d(e.diagram):(0,ke.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let m=e.style||{};return J.default.createElement("div",{ref:n,className:a,style:m})});var I=_(require("react")),D=require("@visuallyjs/browser-ui");function Z(e){let t=(0,I.useRef)(null),r=(0,I.useRef)(!1),n=(0,I.useRef)(!1),o=(0,I.useRef)(null),u=e.style||{},a=(0,I.useContext)(g),d=(0,I.useContext)(w);return(0,I.useEffect)(()=>{if(!r.current)if(r.current=!0,a!=null)a.listen(m=>{let O=Object.assign({dataSource:m.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,O),n.current=!0});else if(d!=null)d.listen(m=>{let O=Object.assign({dataSource:m.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,O),n.current=!0});else{let m=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,m),e.data?o.current.load({data:e.data},()=>n.current=!0):e.url?o.current.load({url:e.url},()=>n.current=!0):n.current=!0}}),e.reactive!==!1&&((0,I.useEffect)(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),(0,I.useEffect)(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),(0,I.useEffect)(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),(0,I.useEffect)(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),I.default.createElement("div",{ref:t,style:u,className:`${e.className||""}`})}function Gt(e){let t=Object.assign({createChart:(r,n)=>new D.ColumnChart(r,n)},e);return Z(t)}function Ut(e){let t=Object.assign({createChart:(r,n)=>new D.BarChart(r,n)},e);return Z(t)}function Lt(e){let t=Object.assign({createChart:(r,n)=>new D.CategoryValueChart(r,n)},e);return Z(t)}function Ft(e){let t=Object.assign({createChart:(r,n)=>new D.LineChart(r,n)},e);return Z(t)}function zt(e){let t=Object.assign({createChart:(r,n)=>new D.AreaChart(r,n)},e);return Z(t)}function Ht(e){let t=Object.assign({createChart:(r,n)=>new D.PieChart(r,n)},e);return Z(t)}function Wt(e){let t=Object.assign({createChart:(r,n)=>new D.ScatterChart(r,n)},e);return Z(t)}function Jt(e){let t=Object.assign({createChart:(r,n)=>new D.BubbleChart(r,n)},e);return Z(t)}function $t(e){let t=Object.assign({createChart:(r,n)=>new D.GaugeChart(r,n)},e);return Z(t)}function Xt(e){let t=Object.assign({createChart:(r,n)=>new D.SankeyChart(r,n)},e);return e.interactive!=null&&(t.options.interactive=e.interactive),e.pivot!=null&&(t.options.pivot=e.pivot),e.csvData&&(t.options.csvData=e.csvData),e.jsonData&&(t.options.jsonData=e.jsonData),Z(t)}var mt=require("@visuallyjs/browser-ui"),q=_(require("react"));function Qe(e){let t=(0,q.useRef)(!1),r=(0,q.useRef)(null),n=(0,q.useContext)(g),o=e.position||{x:0,y:0};function u(a){e.placement==="fixed"?a.fixElement(r.current,o,e.constraints):a.floatElement(r.current,o)}return(0,q.useEffect)(()=>{t.current||(t.current=!0,n!=null?n.listen(a=>u(a)):(0,mt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),q.default.createElement("div",{ref:r},e.children)}var Y=require("@visuallyjs/browser-ui"),De=_(require("react"));function Ge(e){let t=(0,De.useRef)(!1);function r(n){if(!t.current){t.current=!0;try{n&&n.addPlugin({type:Y.BackgroundPlugin.type,options:e})}catch(o){(0,Y.log)(`WARN: BackgroundComponent could not mount background ${o}`)}}}return Ze().then(r),De.default.createElement(De.default.Fragment,null)}function Zt(e){return Ge(Object.assign({type:Y.GeneratedGridBackground.type},e))}function Yt(e){return Ge(Object.assign({type:Y.SimpleBackground.type},e))}function qt(e){return Ge(Object.assign({type:Y.TiledBackground.type},e))}var Ue=require("react"),et=require("@visuallyjs/browser-ui");function Kt(e){let[t,r]=(0,Ue.useState)(()=>e.getZoom());return(0,Ue.useEffect)(()=>{let n=o=>{r(o.zoom)};return e.bind(et.EVENT_ZOOM,n),r(e.getZoom()),()=>{e.unbind(et.EVENT_ZOOM,n)}},[e]),t}
1
+ var ft=Object.create;var Te=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Et=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,xt=Object.prototype.hasOwnProperty;var Ot=(e,t)=>{for(var r in t)Te(e,r,{get:t[r],enumerable:!0})},tt=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Et(t))!xt.call(e,o)&&o!==r&&Te(e,o,{get:()=>t[o],enumerable:!(n=Ct(t,o))||n.enumerable});return e};var v=(e,t,r)=>(r=e!=null?ft(gt(e)):{},tt(t||!e||!e.__esModule?Te(r,"default",{value:e,enumerable:!0}):r,e)),St=e=>tt(Te({},"__esModule",{value:!0}),e);var Qt={};Ot(Qt,{ATTRIBUTE_CAN_REDO:()=>ct,ATTRIBUTE_CAN_UNDO:()=>st,AreaChartComponent:()=>zt,BackgroundComponent:()=>Ue,BarChartComponent:()=>Gt,BrowserUIReactModel:()=>ce,BubbleChartComponent:()=>Jt,CLASS_REACT_GROUP:()=>Ae,CLASS_REACT_NODE:()=>Ne,CLASS_REACT_OVERLAY:()=>$e,CLASS_SELECTED_MODE:()=>je,ColorPickerComponent:()=>jt,ColumnChartComponent:()=>Ut,ControlsComponent:()=>wt,DEFAULT_SHAPE_HEIGHT:()=>dt,DEFAULT_SHAPE_WIDTH:()=>ut,DecoratorComponent:()=>Qe,DiagramComponent:()=>Tt,DiagramContext:()=>w,DiagramPaletteComponent:()=>kt,DiagramProvider:()=>_t,EdgeTypePickerComponent:()=>ht,ExportControlsComponent:()=>Mt,GaugeChartComponent:()=>$t,GridBackgroundComponent:()=>Yt,ImageBackgroundComponent:()=>Zt,InspectorComponent:()=>At,InspectorContext:()=>Re,JSXWrapper:()=>we,LineChartComponent:()=>Ft,MiniviewComponent:()=>Nt,PaletteComponent:()=>Bt,PieChartComponent:()=>Ht,SankeyChartComponent:()=>Xt,ScatterChartComponent:()=>Wt,ShapeComponent:()=>Vt,ShapePaletteComponent:()=>It,SurfaceComponent:()=>Dt,SurfaceContext:()=>g,SurfaceProvider:()=>Rt,TiledImageBackgroundComponent:()=>qt,VisuallyJsContext:()=>ye,VisuallyJsProvider:()=>yt,XYChartComponent:()=>Lt,createDiagramRef:()=>Ke,createInspectorRef:()=>Ze,createRefHandler:()=>de,createSurfaceRef:()=>ue,getSurfaceComponent:()=>Pe,newInstance:()=>Xe,registerSurface:()=>Je,useDiagram:()=>vt,useInspector:()=>he,useSurface:()=>Ye,useVisuallyJsModel:()=>bt,useZoom:()=>Kt});module.exports=St(Qt);var We=require("@visuallyjs/browser-ui"),rt=new Map,Se={};function Je(e,t){rt.set(e,t),Pt(e,t)}function Pt(e,t){(Se[e]||[]).forEach(n=>{try{n(t)}catch(o){(0,We.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Se[e]}function Pe(e,t){let r=rt.get(e);if(r)try{t(r)}catch(n){(0,We.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Se[e]=Se[e]||[],Se[e].push(t)}var Ne="vjs-react-node",Ae="vjs-react-group",$e="vjs-react-overlay";var oe=v(require("react"));function we(e){let t=(0,oe.useRef)(!1);return(0,oe.useEffect)(()=>{t.current||(t.current=!0,e.cb(e.ns))}),oe.default.createElement(oe.default.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}var Me=require("@visuallyjs/browser-ui"),ce=class extends Me.BrowserUIModel{render(t,r){return(0,Me.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Xe(e){return e=e||{},new ce(e)}var K=v(require("react")),g=(0,K.createContext)(null);function Rt(e){let t=(0,K.useRef)(null),r=ue(t);return K.default.createElement(g.Provider,{value:r},e.children||[])}function ue(e){return de(e)}function de(e){let t=[];return{set:r=>{e.current=r,t.forEach(n=>n(r))},listen:r=>{e.current==null?t.push(r):r(e.current)},Ri:()=>e}}function Ye(){let e=(0,K.useContext)(g);return new Promise((t,r)=>{e!=null?e.listen(n=>t(n)):r()})}var Ie=require("react"),Re=(0,Ie.createContext)(null);function Ze(e){return de(e)}function he(){let e=(0,Ie.useContext)(Re);return e==null?null:e.Ri().current}var Q=v(require("react")),Ve=require("@visuallyjs/browser-ui");function ht(e){let t=(0,Q.useRef)(!1),r=(0,Q.useRef)(null),n=(0,Q.useRef)(null),o=he(),{propertyName:u}=e,a=()=>o.getFromContext(Ve.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||o.$ui.$getEdgePropertyMappings();return(0,Q.useEffect)(()=>{t.current||(t.current=!0,n.current=new Ve.EdgeTypePicker(o.$ui,r.current,a(),o.getValue(u),(d,m)=>{o.setValue(u,m)}),n.current.render(u,o.qe),o.onChange(()=>{n.current.select(u,o.getValue(u))}))}),Q.default.createElement("div",{ref:r})}var ne=v(require("react")),ye=(0,ne.createContext)(void 0);function yt(e){let t=Xe(e.modelOptions||{});return ne.default.createElement(ye.Provider,{value:t},e.children||[])}function bt(){let e=(0,ne.useContext)(ye);return new Promise((t,r)=>{if(e==null){let n=(0,ne.useContext)(g);n!=null?n.listen(o=>t(o.model)):r()}else t(e)})}var x=v(require("react")),qe=v(require("react-dom")),l=require("@visuallyjs/browser-ui"),Dt=(0,x.forwardRef)((e,t)=>{let r=(0,x.useRef)(!1),n=(0,x.useContext)(ye),o=(0,x.useRef)(null),u=(0,x.useRef)(null),a=(0,x.useRef)(null),d,m=(0,x.useContext)(g);m==null?(d=(0,x.useRef)(null),m=ue(d)):d=m.Ri();let[O,R]=(0,x.useState)([]),[j,c]=(0,x.useState)([]),y=[],G=[];function M(f){return x.default.createElement(we,{ns:f,model:a.current,ui:d.current,childProps:e.childProps,cb:_=>{ee(_)}})}function ee(f){if(f.hydrated!==!0){let _=(0,l.isGroup)(f.obj)?Ae:Ne;f.domElement.firstElementChild&&((0,l.addClass)(f.domElement.firstElementChild,_),f.domElement.firstElementChild.getAttribute(l.ATTRIBUTE_NOT_DRAGGABLE)===l.TRUE&&f.domElement.setAttribute(l.ATTRIBUTE_NOT_DRAGGABLE,l.TRUE)),d.current.$vertexRendered(f.obj,f.domElement,f.def,f.payload.eventInfo),f.hydrated=!0}else d.current.$revalidateElement(f.domElement)}function F(){R(y.slice())}function te(f){return x.default.createElement(we,{ns:f,model:a.current,ui:d.current,childProps:e.childProps,cb:_=>{A(_)}})}function A(f){if(f.hydrated!==!0){let _=(0,l.isGroup)(f.obj)?Ae:Ne;f.domElement.firstElementChild&&(0,l.addClass)(f.domElement.firstElementChild,_),f.hydrated=!0}else d.current.$revalidateElement(f.domElement)}function $(){c(G.slice())}let X={getSurface:()=>d.current,getModel:()=>a.current};(0,x.useImperativeHandle)(t,()=>X),(0,x.useEffect)(()=>{var f;if(!r.current){r.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new ce(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(u.current=document.createElement("div"),u.current.style.position="fixed",u.current.style.left="10000px",u.current.style.top="10000px",u.current.style.width="100px",u.current.style.height="100px",u.current.style.opacity="0",o.current.appendChild(u.current));let _=(C,E,k,V,T,p,b,re)=>{let[Oe,B]=p.component||p.jsx?[p,null]:(0,l.isGroup)(b)?[Object.assign(Object.assign({},p),{jsx:He=>x.default.createElement(x.default.Fragment,null,He.obj.data.label)}),l.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},p),{jsx:He=>x.default.createElement(x.default.Fragment,null,He.obj.data.label)}),l.CLASS_DEFAULT_NODE],se=T.containerType===l.ElementTypes.HTML?document.createElement(l.ELEMENT_DIV):(0,l.$svgNode)(l.ELEMENT_SVG);u.current.appendChild(se),B!=null&&T.$addClassToElement(se,B);let pt={data:E,model:k,surface:T,componentId:b.getFullId(),obj:b,props:e.childProps,element:se,eventInfo:re};y.push({data:E,def:Oe,payload:pt,domElement:se,key:b.id,obj:b,hydrated:!1}),F()},ae=(C,E)=>{E.parentNode&&E.parentNode.removeChild(E)},xe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(C,E,k,V)=>{},render:_,rerender:(C,E,k,V,T,p,b,re,Oe)=>{let B=(0,l.partition)(y,se=>se.obj!==b);y=B.left,F(),_(C,E,k,V,T,p,b,re),B.right.length>0&&setTimeout(()=>{ae(null,B.right[0].domElement)})},cleanupVertex:ae,cleanupPort:(C,E)=>{}},ie=((f=e.viewOptions)==null?void 0:f.edges)||{};for(let C in ie){let E=ie[C];E.overlays!=null&&(E.overlays=E.overlays.map(k=>{if(k.jsx!=null){let V=(0,l.uuid)();return{type:l.OVERLAY_TYPE_CUSTOM,options:{create:p=>{let b=document.createElement(l.ELEMENT_DIV);b.className=$e;let re={data:p.edge.data,model:a.current,surface:le,componentId:p.edge.getFullId(),obj:p.edge,props:e.childProps,element:b};return G.push({def:{jsx:k.jsx},data:p.edge.data,obj:p.edge,payload:re,domElement:b,key:V,hydrated:!1}),$(),b}}}}else return k}))}let Le=Object.assign(e.renderOptions||{},{view:e.viewOptions}),le=(0,l.renderSurface)(a.current,o.current,xe,Le);m.set(le),e.surfaceId!=null&&Je(e.surfaceId,X);let _e=(C,E)=>{let k=()=>{let T={};return(E.originalData||E.updates)&&(T=(0,l.extend)(E.originalData,E.updates)),T},V=y.find(T=>T.key===C);V!=null&&(V.data=k(),F())},ve=C=>{y=y.filter(E=>E.payload.componentId!==C),F()},Fe=(C,E)=>{let k=()=>{let T={};return(E.originalData||E.updates)&&(T=(0,l.extend)(E.originalData,E.updates)),T},V=G.find(T=>T.obj.id===C);V!=null&&(V.data=k(),$())},ze=C=>{G=G.filter(E=>E.payload.obj.id!==C),$()};a.current.bind(l.EVENT_NODE_UPDATED,C=>{_e(C.vertex.getFullId(),C)}),a.current.bind(l.EVENT_GROUP_UPDATED,C=>{_e(C.vertex.getFullId(),C)}),a.current.bind(l.EVENT_NODE_REMOVED,C=>{ve(C.node.id)}),a.current.bind(l.EVENT_GROUP_REMOVED,C=>{ve(C.group.id)}),a.current.bind(l.EVENT_EDGE_REMOVED,C=>{ze(C.edge.id)}),a.current.bind(l.EVENT_EDGE_UPDATED,C=>{Fe(C.edge.id,C)}),a.current.bind(l.EVENT_GRAPH_CLEARED,()=>{y=[],F(),G=[],$()}),e.data?a.current.load({data:e.data,onload:()=>setTimeout(()=>le.repaintEverything(),250)}):e.url&&a.current.load({url:e.url,onload:()=>setTimeout(()=>le.repaintEverything(),250)})}});let Ee=`${e.className||""} vjs-react-surface`,ge=e.style||{};return x.default.createElement("div",{ref:o,className:Ee,style:ge},O.map(f=>qe.createPortal(M(f),f.domElement,f.key)),j.map(f=>qe.createPortal(te(f),f.domElement,f.key)),x.default.createElement(g.Provider,{value:m},e.children))});var h=v(require("react")),ot=require("@visuallyjs/browser-ui"),w=(0,h.createContext)(null);function Ke(e){return de(e)}function _t(e){let t=(0,h.useRef)(null),r=Ke(t);return h.default.createElement(w.Provider,{value:r},e.children||[])}function vt(){let e=(0,h.useContext)(w);return new Promise((t,r)=>{e!=null?e.listen(n=>t(n)):r()})}var Tt=(0,h.forwardRef)((e,t)=>{let r=(0,h.useRef)(null),n=(0,h.useRef)(!1),o,u,a=(0,h.useContext)(w);a==null?(o=(0,h.useRef)(null),a=Ke(o)):o=a.Ri();let d=(0,h.useContext)(g);d==null?(u=(0,h.useRef)(null),d=ue(u)):u=d.Ri();let m={getDiagram:()=>o.current};(0,h.useImperativeHandle)(t,()=>m),(0,h.useEffect)(()=>{n.current||(n.current=!0,o.current=(0,ot.createDiagram)(r.current,e.options,e.modelOptions),u.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),a.set(o.current),d.set(u.current))});let O=`${e.className||""} vjs-react-diagram`,R=e.style||{};return h.default.createElement("div",{ref:r,className:O,style:R},h.default.createElement(g.Provider,{value:d},h.default.createElement(w.Provider,{value:a},e.children)))});var Be=require("@visuallyjs/browser-ui"),U=v(require("react")),Nt=(0,U.forwardRef)((e,t)=>{let r=(0,U.useContext)(g),n=(0,U.useContext)(w),o=(0,U.useRef)(!1),u=(0,U.useRef)(null),a;(0,U.useImperativeHandle)(t,()=>({toggleCollapsed:()=>a==null?void 0:a.toggleCollapsed()}));function d(m){m.addPlugin({type:Be.MiniviewPlugin.type,options:{container:u.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter}})}return(0,U.useEffect)(()=>{o.current||(o.current=!0,r!=null?r.listen(d):n!=null&&n.listen(m=>{m.$ui instanceof Be.Surface&&d(m.$ui)}))}),U.default.createElement("div",{ref:u,className:`${e.className||""}`})});var me=require("@visuallyjs/browser-ui"),S=v(require("react")),At=(0,S.forwardRef)((e,t)=>{let r=(0,S.useContext)(g),n=(0,S.useContext)(w),o,u=(0,S.useContext)(Re);u==null&&(o=(0,S.useRef)(null),u=Ze(o));let[a,d]=(0,S.useState)(null),[m,O]=(0,S.useState)(0),[R,j]=(0,S.useState)(null),c=(0,S.useRef)(!1),y=(0,S.useRef)(null),G=e.className||"";(0,S.useEffect)(()=>{var A;(A=o==null?void 0:o.current)==null||A.$refresh()},[m]);let M=e.onSelectionCleared||(()=>d(null)),ee=(A,$)=>{d(A),e.refresh&&e.refresh(A),O(X=>X+1)};function F(A){o.current=new me.Inspector({container:y.current,ui:A,renderEmptyContainer:M,refresh:ee,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(A):null}),j(o.current)}let te={getInspector:()=>R};return(0,S.useImperativeHandle)(t,()=>te),(0,S.useEffect)(()=>{c.current||(c.current=!0,r!=null?r.listen(F):n!=null?n.listen(A=>{A.$ui instanceof me.Surface&&F(A.$ui)}):(0,me.log)("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),S.default.createElement("div",{ref:y,className:G},S.default.createElement(Re.Provider,{value:u},a!=null&&S.default.createElement(S.default.Fragment,null,typeof e.children=="function"?e.children(a,o.current.$ui.model):e.children||[]),a==null&&S.default.createElement(S.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var In="group:added",Vn="group:member:added",Bn="group:member:removed",jn="group:removed",kn="dataLoadStart",Un="dataAppendStart",Gn="dataLoadEnd",Ln="dataAppendEnd",Fn="dataUpdated",zn="graphClearStart",Hn="graphCleared",Wn="graphChanged",Jn="group:updated",$n="node:updated",Xn="port:updated",Yn="edge:updated",Zn="edge:added",qn="node:added",Kn="edge:removed",Qn="node:removed",ea="port:added",ta="port:removed",ra="edge:target",oa="edge:source",nt="select",at="deselect",it="selection:cleared",na="edge:geometry",aa="edge:pathEdited",ia="edge:typeChanged",la="node:typeChanged",sa="port:typeChanged",ca="group:typeChanged",ua="group:move:start",da="group:move",ma="group:move:end",pa="internal:group:sizeChanged",fa="internal:group:sizeChangedRedo",Ca="internal:group:sizeChangedUndo",Ea="renderer:added",ga="node:move:start",xa="node:move",Oa="node:move:end",Sa="node:move:abort",Pa="undoredo:update",Ra="undo",ha="redo",ya="destroy";var s=v(require("react")),i=require("@visuallyjs/browser-ui"),st="can-undo",ct="can-redo",je="vjs-selected-mode",lt="vjs-controls-has-selection";function wt(e){let t="Clear selection",[r,n]=(0,s.useState)("row"),[o,u]=(0,s.useState)(!1),[a,d]=(0,s.useState)(!1),m=(0,s.useContext)(g),O=(0,s.useContext)(w),R=(0,s.useRef)(null),j=(0,s.useRef)(!1),c=(0,s.useRef)(null),[y,G]=(0,s.useState)("Clear dataset?"),M=(0,s.useRef)(null),[ee,F]=(0,s.useState)(!0),[te,A]=(0,s.useState)(!1),[$,X]=(0,s.useState)(!0),[Ee,ge]=(0,s.useState)(!0),[f,_]=(0,s.useState)([]),[ae,xe]=(0,s.useState)([]);function ie(p){c.current=p,e.clearMessage&&G(e.clearMessage),e.onMaybeClear&&(M.current=e.onMaybeClear),e.orientation&&n(e.orientation),e.undoRedo===!1&&X(!1),e.zoomToExtents===!1&&F(!1),e.zoomButtons===!0&&A(!0),e.clear===!1&&ge(!1);let b=(e.buttons||[]).filter(B=>B.mode!=null);_(b);let re=(e.buttons||[]).filter(B=>B.mode==null);xe(re),p.bind(i.EVENT_SURFACE_MODE_CHANGED,B=>{p.removeClass(p.$getSelector(R.current,"[data-mode]"),je),p.addClass(p.$getSelector(R.current,"[data-mode='"+B+"']"),je)}),p.model.bind(i.EVENT_UNDOREDO_UPDATE,B=>{R.current.setAttribute(st,B.undoCount>0?i.TRUE:i.FALSE),R.current.setAttribute(ct,B.redoCount>0?i.TRUE:i.FALSE)}),p.model.bind(nt,V),p.model.bind(at,V),p.model.bind(it,V);let Oe=p.getPlugin(i.LassoPlugin.type);u(Oe!=null),d(Oe!=null||b.length>0)}function Le(){c.current.model.clearSelection(),c.current.zoomToFit()}function le(){c.current.zoomIn()}function _e(){c.current.zoomOut()}function ve(){c.current.setMode(i.SURFACE_MODE_PAN)}function Fe(){c.current.setMode(i.SURFACE_MODE_SELECT)}function ze(){c.current.model.clearSelection(),(0,i.supportsPathEditing)(c.current)&&c.current.stopEditingPath()}function C(){M.current!=null?M.current(()=>c.current.model.clear()):window.confirm(y)&&c.current.model.clear()}function E(){c.current.model.undo()}function k(){c.current.model.redo()}let V=()=>{c.current.model.getSelection().isEmpty()?R.current.removeAttribute(lt):R.current.setAttribute(lt,"true")};(0,s.useEffect)(()=>{j.current===!1&&(j.current=!0,e.surfaceId!=null?Pe(e.surfaceId,p=>ie(p.getSurface())):m!=null?m.listen(ie):O!=null?O.listen(p=>{p.$ui instanceof i.Surface&&ie(p.$ui)}):(0,i.log)("WARN: controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))});let T=e.style||{};return s.default.createElement("div",{style:T,ref:R,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":r},a&&s.default.createElement("i",{className:"vjs-pan-mode "+je,"data-mode":i.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>ve()},s.default.createElement("svg",{fill:"none",viewBox:i.PAN_VIEW_BOX,stroke:"currentColor"},s.default.createElement("path",{d:i.PAN_PATH}))),o&&s.default.createElement("i",{className:"vjs-select-mode","data-mode":i.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>Fe()},s.default.createElement("svg",{fill:"currentColor",viewBox:i.LASSO_VIEW_BOX,stroke:"currentColor"},s.default.createElement("path",{d:i.LASSO_PATH}))),f.map(p=>s.default.createElement("i",{className:p.class,title:p.title,onClick:b=>p.handler(b,p.id)})),ee&&s.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Le()},s.default.createElement("svg",{viewBox:i.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_TO_FIT_PATH}))),te&&s.default.createElement(s.default.Fragment,null,s.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>le()},s.default.createElement("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_IN_PATH}))),s.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>_e()},s.default.createElement("svg",{viewBox:i.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.ZOOM_OUT_PATH})))),$&&s.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()}),$&&s.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>k()}),s.default.createElement("i",{className:i.CLASS_CONTROLS_RESET_SELECTION,title:t,onClick:()=>ze()},s.default.createElement("svg",{viewBox:i.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.RESET_SELECTION_PATH}))),Ee&&s.default.createElement("i",{className:"vjs-clear-dataset",title:y,onClick:()=>C()},s.default.createElement("svg",{viewBox:i.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},s.default.createElement("path",{d:i.CLEAR_PATH}))),ae.map(p=>s.default.createElement("i",{className:p.class,title:p.title,onClick:b=>p.handler(b,p.id)})))}var P=v(require("react")),L=require("@visuallyjs/browser-ui");function Mt(e){let t=(0,P.useRef)(!1),r=(0,P.useRef)(null),n=(0,P.useContext)(g),o=(0,P.useContext)(w),[u,a]=(0,P.useState)(!0),[d,m]=(0,P.useState)("Export :"),[O,R]=(0,P.useState)(null),[j,c]=(0,P.useState)(null),[y,G]=(0,P.useState)(null),[M,ee]=(0,P.useState)(!0),[F,te]=(0,P.useState)(!0),[A,$]=(0,P.useState)(!0);function X(_){r.current=_,e.label&&m(d),e.showLabel!=null&&a(e.showLabel),e.margins&&R(e.margins);let ae=e.svgOptions||{};c(ae);let xe=e.imageOptions||{};G(xe),e.allowJpgExport!=null&&$(e.allowJpgExport),e.allowPngExport!=null&&te(e.allowPngExport),e.allowSvgExport!=null&&ee(e.allowSvgExport)}function Ee(){new L.SvgExportUI(r.current).export(j)}function ge(){new L.ImageExportUI(r.current).export(y)}function f(){new L.ImageExportUI(r.current).export(Object.assign(y||{},{type:"image/jpeg"}))}return(0,P.useEffect)(()=>{t.current===!1&&(t.current=!0,e.surfaceId!=null?Pe(e.surfaceId,_=>X(_.getSurface())):n!=null?n.listen(X):o!=null?o.listen(_=>{_.$ui instanceof L.Surface&&X(_.$ui)}):(0,L.log)("WARN: export controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),P.default.createElement("div",{className:`${L.CLASS_CONTROLS} ${L.CLASS_EXPORT_CONTROLS}`},u&&P.default.createElement("span",null,d),M&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>Ee()},"SVG")),F&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>ge()},"PNG")),A&&P.default.createElement("i",null,P.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>f()},"JPG")))}var z=v(require("react")),be=require("@visuallyjs/browser-ui"),It=(0,z.forwardRef)((e,t)=>{let r=(0,z.useRef)(!1),n=(0,z.useRef)(null),o=(0,z.useContext)(g),u=(0,z.useRef)(null),a=e.className||"";function d(m){m.getShapeLibrary()!=null?u.current=new be.ShapePalette(m,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):(0,be.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,z.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(m=>d(m)):e.surface!=null?d(e.surface):(0,be.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),z.default.createElement("div",{ref:n,className:a})});var pe=v(require("react")),fe=require("@visuallyjs/browser-ui"),ut=120,dt=90;function Vt(e){let t=(0,pe.useRef)(null);function r(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function u(){return e.ctx.obj.data.width||ut}function a(){return e.ctx.obj.data.height||dt}function d(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function m(){return e.labelProperty||"label"}return(0,pe.useEffect)(()=>{let O=e.ctx.obj.data,R=e.ctx.ui.getShapeLibrary(),j=R.renderCompiledShape(O);if(t.current.replaceChildren(j),e.showLabels){let c=R.renderShapeLabel(O,m(),e.labelStrokeWidth,null,d(),d(),e.font);t.current.appendChild(c),e.multilineLabels!=!1&&(0,fe.convertToMultilineText)(c,O[m()]||"",u()*(e.labelFillRatio||fe.DEFAULT_LABEL_FILL_RATIO))}}),pe.default.createElement("svg",{className:fe.CLASS_SHAPE,ref:t,strokeWidth:r(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+u()+" "+a()})}var H=v(require("react")),Ce=require("@visuallyjs/browser-ui"),Bt=(0,H.forwardRef)((e,t)=>{let r=(0,H.useRef)(!1),n=(0,H.useRef)(null),o=(0,H.useContext)(g),u=(0,H.useRef)(null),a=e.className||"";function d(m){let O={selector:e.selector,source:n.current,dataGenerator:R=>e.dataGenerator?e.dataGenerator(R):(0,Ce.defaultDataGenerator)(R),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,typeGenerator:e.typeGenerator,groupIdentifier:e.groupIdentifier,dragSize:e.dragSize,canvasDropFilter:e.canvasDropFilter,mode:e.mode,onVertexAdded:e.onVertexAdded,selectAfterAdd:e.selectAfterAdd,allowClickToAdd:e.allowClickToAdd,clickToAddOnly:e.clickToAddOnly};u.current=new Ce.Palette(m,O)}return(0,H.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(m=>d(m)):e.surface!=null?d(e.surface):(0,Ce.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),H.default.createElement("div",{className:a,ref:n},e.children)});var W=v(require("react")),N=require("@visuallyjs/browser-ui");function jt(e){let t=e.maxColors||10,r=(0,W.useRef)(null),n=(0,W.useRef)(!1),o=he(),[u,a]=(0,W.useState)(o.ensureContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function d(c){let y=o.ensureContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(c=c.toUpperCase(),!(y.find(M=>M.toUpperCase()===c)!=null)){let M=y.slice();M.unshift(c),M.length>t&&(M.length=t),o.updateContext(N.INSPECTOR_CONTEXT_RECENT_COLORS,M)}}function m(){let c=r.current.value;o.setValue(e.propertyName,c),d(c)}function O(c){o.setValue(e.propertyName,c),r.current.value=c}let R=c=>{c.key===N.INSPECTOR_CONTEXT_RECENT_COLORS&&a(c.value.slice())};function j(){let c=o.getValue(e.propertyName);c!=null&&r.current&&d(c)}return(0,W.useEffect)(()=>(o.bind(N.EVENT_CONTEXT_UPDATE,R),o.bind(N.EVENT_CHANGE,j),n.current||(n.current=!0,r.current.addEventListener(N.EVENT_CHANGE,m)),setTimeout(j),()=>{o.unbind(N.EVENT_CONTEXT_UPDATE,R),o.unbind(N.EVENT_CHANGE,j)})),W.default.createElement("div",{className:N.CLASS_COLOR_PICKER},W.default.createElement("input",{type:"color",ref:r,"vjs-att":e.propertyName}),W.default.createElement("div",{className:N.CLASS_COLOR_PICKER_SWATCHES},u.map(c=>W.default.createElement("div",{key:c,title:c,className:N.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:c},"data-color":c,onClick:()=>O(c)}))))}var J=v(require("react")),ke=require("@visuallyjs/browser-ui"),kt=(0,J.forwardRef)((e,t)=>{let r=(0,J.useRef)(!1),n=(0,J.useRef)(null),o=(0,J.useContext)(w),u=(0,J.useRef)(null),a=e.className||"";function d(O){u.current=new ke.DiagramPalette(n.current,O,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}(0,J.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(O=>d(O)):e.diagram!=null?d(e.diagram):(0,ke.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let m=e.style||{};return J.default.createElement("div",{ref:n,className:a,style:m})});var I=v(require("react")),D=require("@visuallyjs/browser-ui");function Y(e){let t=(0,I.useRef)(null),r=(0,I.useRef)(!1),n=(0,I.useRef)(!1),o=(0,I.useRef)(null),u=e.style||{},a=(0,I.useContext)(g),d=(0,I.useContext)(w);return(0,I.useEffect)(()=>{if(!r.current)if(r.current=!0,a!=null)a.listen(m=>{let O=Object.assign({dataSource:m.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,O),n.current=!0});else if(d!=null)d.listen(m=>{let O=Object.assign({dataSource:m.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,O),n.current=!0});else{let m=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(t.current,m),e.data?o.current.load({data:e.data},()=>n.current=!0):e.url?o.current.load({url:e.url},()=>n.current=!0):n.current=!0}}),e.reactive!==!1&&((0,I.useEffect)(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),(0,I.useEffect)(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),(0,I.useEffect)(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),(0,I.useEffect)(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),I.default.createElement("div",{ref:t,style:u,className:`${e.className||""}`})}function Ut(e){let t=Object.assign({createChart:(r,n)=>new D.ColumnChart(r,n)},e);return Y(t)}function Gt(e){let t=Object.assign({createChart:(r,n)=>new D.BarChart(r,n)},e);return Y(t)}function Lt(e){let t=Object.assign({createChart:(r,n)=>new D.CategoryValueChart(r,n)},e);return Y(t)}function Ft(e){let t=Object.assign({createChart:(r,n)=>new D.LineChart(r,n)},e);return Y(t)}function zt(e){let t=Object.assign({createChart:(r,n)=>new D.AreaChart(r,n)},e);return Y(t)}function Ht(e){let t=Object.assign({createChart:(r,n)=>new D.PieChart(r,n)},e);return Y(t)}function Wt(e){let t=Object.assign({createChart:(r,n)=>new D.ScatterChart(r,n)},e);return Y(t)}function Jt(e){let t=Object.assign({createChart:(r,n)=>new D.BubbleChart(r,n)},e);return Y(t)}function $t(e){let t=Object.assign({createChart:(r,n)=>new D.GaugeChart(r,n)},e);return Y(t)}function Xt(e){let t=Object.assign({createChart:(r,n)=>new D.SankeyChart(r,n)},e);return e.interactive!=null&&(t.options.interactive=e.interactive),e.pivot!=null&&(t.options.pivot=e.pivot),e.csvData&&(t.options.csvData=e.csvData),e.jsonData&&(t.options.jsonData=e.jsonData),Y(t)}var mt=require("@visuallyjs/browser-ui"),q=v(require("react"));function Qe(e){let t=(0,q.useRef)(!1),r=(0,q.useRef)(null),n=(0,q.useContext)(g),o=e.position||{x:0,y:0};function u(a){e.placement==="fixed"?a.fixElement(r.current,o,e.constraints):a.floatElement(r.current,o)}return(0,q.useEffect)(()=>{t.current||(t.current=!0,n!=null?n.listen(a=>u(a)):(0,mt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),q.default.createElement("div",{ref:r},e.children)}var Z=require("@visuallyjs/browser-ui"),De=v(require("react"));function Ue(e){let t=(0,De.useRef)(!1);function r(n){if(!t.current){t.current=!0;try{n&&n.addPlugin({type:Z.BackgroundPlugin.type,options:e})}catch(o){(0,Z.log)(`WARN: BackgroundComponent could not mount background ${o}`)}}}return Ye().then(r),De.default.createElement(De.default.Fragment,null)}function Yt(e){return Ue(Object.assign({type:Z.GeneratedGridBackground.type},e))}function Zt(e){return Ue(Object.assign({type:Z.SimpleBackground.type},e))}function qt(e){return Ue(Object.assign({type:Z.TiledBackground.type},e))}var Ge=require("react"),et=require("@visuallyjs/browser-ui");function Kt(e){let[t,r]=(0,Ge.useState)(()=>e.getZoom());return(0,Ge.useEffect)(()=>{let n=o=>{r(o.zoom)};return e.bind(et.EVENT_ZOOM,n),r(e.getZoom()),()=>{e.unbind(et.EVENT_ZOOM,n)}},[e]),t}
package/visuallyjs.browser-ui-react.es.js CHANGED
@@ -1 +1 @@
1
- import{log as Ie}from"@visuallyjs/browser-ui";var Ve=new Map,Y={};function Be(e,r){Ve.set(e,r),Rt(e,r)}function Rt(e,r){(Y[e]||[]).forEach(n=>{try{n(r)}catch(o){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Y[e]}function ae(e,r){let t=Ve.get(e);if(t)try{r(t)}catch(n){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Y[e]=Y[e]||[],Y[e].push(r)}var xe="vjs-react-node",Oe="vjs-react-group",je="vjs-react-overlay";import ke,{useEffect as ht,useRef as yt}from"react";function Se(e){let r=yt(!1);return ht(()=>{r.current||(r.current=!0,e.cb(e.ns))}),ke.createElement(ke.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}import{BrowserUIModel as bt,log as Dt}from"@visuallyjs/browser-ui";var q=class extends bt{render(r,t){return Dt("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Ge(e){return e=e||{},new q(e)}import{createContext as vt,default as _t,useRef as Tt,useContext as Nt}from"react";var E=vt(null);function ta(e){let r=Tt(null),t=K(r);return _t.createElement(E.Provider,{value:t},e.children||[])}function K(e){return Q(e)}function Q(e){let r=[];return{set:t=>{e.current=t,r.forEach(n=>n(t))},listen:t=>{e.current==null?r.push(t):t(e.current)},Ri:()=>e}}function Ue(){let e=Nt(E);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}import{createContext as At,useContext as wt}from"react";var ie=At(null);function Le(e){return Q(e)}function le(){let e=wt(ie);return e==null?null:e.Ri().current}import Mt,{useRef as Pe,useEffect as It}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Vt,EdgeTypePicker as Bt}from"@visuallyjs/browser-ui";function xa(e){let r=Pe(!1),t=Pe(null),n=Pe(null),o=le(),{propertyName:l}=e,a=()=>o.getFromContext(Vt)||o.$ui.$getEdgePropertyMappings();return It(()=>{r.current||(r.current=!0,n.current=new Bt(o.$ui,t.current,a(),o.getValue(l),(s,c)=>{o.setValue(l,c)}),n.current.render(l,o.qe),o.onChange(()=>{n.current.select(l,o.getValue(l))}))}),Mt.createElement("div",{ref:t})}import jt,{createContext as kt,useContext as Fe}from"react";var se=kt(void 0);function Ta(e){let r=Ge(e.modelOptions||{});return jt.createElement(se.Provider,{value:r},e.children||[])}function Na(){let e=Fe(se);return new Promise((r,t)=>{if(e==null){let n=Fe(E);n!=null?n.listen(o=>r(o.model)):t()}else r(e)})}import V,{forwardRef as Gt,useContext as ze,useEffect as Ut,useImperativeHandle as Lt,useRef as ee,useState as He}from"react";import*as he from"react-dom";import{addClass as We,ELEMENT_DIV as Je,ELEMENT_SVG as Ft,ElementTypes as zt,EVENT_GRAPH_CLEARED as Ht,EVENT_GROUP_REMOVED as Wt,EVENT_GROUP_UPDATED as Jt,EVENT_NODE_REMOVED as $t,EVENT_NODE_UPDATED as Xt,extend as $e,isGroup as Re,renderSurface as Zt,CLASS_DEFAULT_NODE as Yt,CLASS_DEFAULT_GROUP as qt,CustomOverlay as Kt,EVENT_EDGE_REMOVED as Qt,EVENT_EDGE_UPDATED as er,uuid as tr,partition as rr,$svgNode as or,ATTRIBUTE_NOT_DRAGGABLE as Xe,TRUE as Ze}from"@visuallyjs/browser-ui";var ci=Gt((e,r)=>{let t=ee(!1),n=ze(se),o=ee(null),l=ee(null),a=ee(null),s,c=ze(E);c==null?(s=ee(null),c=K(s)):s=c.Ri();let[C,g]=He([]),[v,i]=He([]),x=[],T=[];function h(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{k(S)}})}function k(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&(We(d.domElement.firstElementChild,S),d.domElement.firstElementChild.getAttribute(Xe)===Ze&&d.domElement.setAttribute(Xe,Ze)),s.current.$vertexRendered(d.obj,d.domElement,d.def,d.payload.eventInfo),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function N(){g(x.slice())}function G(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{R(S)}})}function R(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&We(d.domElement.firstElementChild,S),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function A(){i(T.slice())}let w={getSurface:()=>s.current,getModel:()=>a.current};Lt(r,()=>w),Ut(()=>{var d;if(!t.current){t.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new q(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(l.current=document.createElement("div"),l.current.style.position="fixed",l.current.style.left="10000px",l.current.style.top="10000px",l.current.style.width="100px",l.current.style.height="100px",l.current.style.opacity="0",o.current.appendChild(l.current));let S=(m,p,_,b,P,u,O,U)=>{let[Z,D]=u.component||u.jsx?[u,null]:Re(O)?[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),qt]:[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),Yt],H=P.containerType===zt.HTML?document.createElement(Je):or(Ft);l.current.appendChild(H),D!=null&&P.$addClassToElement(H,D);let Pt={data:p,model:_,surface:P,componentId:O.getFullId(),obj:O,props:e.childProps,element:H,eventInfo:U};x.push({data:p,def:Z,payload:Pt,domElement:H,key:O.id,obj:O,hydrated:!1}),N()},L=(m,p)=>{p.parentNode&&p.parentNode.removeChild(p)},X={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(m,p,_,b)=>{},render:S,rerender:(m,p,_,b,P,u,O,U,Z)=>{let D=rr(x,H=>H.obj!==O);x=D.left,N(),S(m,p,_,b,P,u,O,U),D.right.length>0&&setTimeout(()=>{L(null,D.right[0].domElement)})},cleanupVertex:L,cleanupPort:(m,p)=>{}},F=((d=e.viewOptions)==null?void 0:d.edges)||{};for(let m in F){let p=F[m];p.overlays!=null&&(p.overlays=p.overlays.map(_=>{if(_.jsx!=null){let b=tr();return{type:Kt.type,options:{create:u=>{let O=document.createElement(Je);O.className=je;let U={data:u.edge.data,model:a.current,surface:z,componentId:u.edge.getFullId(),obj:u.edge,props:e.childProps,element:O};return T.push({def:{jsx:_.jsx},data:u.edge.data,obj:u.edge,payload:U,domElement:O,key:b,hydrated:!1}),A(),O}}}}else return _}))}let fe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),z=Zt(a.current,o.current,X,fe);c.set(z),e.surfaceId!=null&&Be(e.surfaceId,w);let oe=(m,p)=>{let _=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=x.find(P=>P.key===m);b!=null&&(b.data=_(),N())},ne=m=>{x=x.filter(p=>p.payload.componentId!==m),N()},Ce=(m,p)=>{let _=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=T.find(P=>P.obj.id===m);b!=null&&(b.data=_(),A())},Ee=m=>{T=T.filter(p=>p.payload.obj.id!==m),A()};a.current.bind(Xt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind(Jt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind($t,m=>{ne(m.node.id)}),a.current.bind(Wt,m=>{ne(m.group.id)}),a.current.bind(Qt,m=>{Ee(m.edge.id)}),a.current.bind(er,m=>{Ce(m.edge.id,m)}),a.current.bind(Ht,()=>{x=[],N(),T=[],A()}),e.data?a.current.load({data:e.data,onload:()=>setTimeout(()=>z.repaintEverything(),250)}):e.url&&a.current.load({url:e.url,onload:()=>setTimeout(()=>z.repaintEverything(),250)})}});let J=`${e.className||""} vjs-react-surface`,$=e.style||{};return V.createElement("div",{ref:o,className:J,style:$},C.map(d=>he.createPortal(h(d),d.domElement,d.key)),v.map(d=>he.createPortal(G(d),d.domElement,d.key)),V.createElement(E.Provider,{value:c},e.children))});import ce,{createContext as nr,forwardRef as ar,useContext as ye,useEffect as ir,useImperativeHandle as lr,useRef as te}from"react";import{createDiagram as sr}from"@visuallyjs/browser-ui";var y=nr(null);function Ye(e){return Q(e)}function Di(e){let r=te(null),t=Ye(r);return ce.createElement(y.Provider,{value:t},e.children||[])}function vi(){let e=ye(y);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}var _i=ar((e,r)=>{let t=te(null),n=te(!1),o,l,a=ye(y);a==null?(o=te(null),a=Ye(o)):o=a.Ri();let s=ye(E);s==null?(l=te(null),s=K(l)):l=s.Ri();let c={getDiagram:()=>o.current};lr(r,()=>c),ir(()=>{n.current||(n.current=!0,o.current=sr(t.current,e.options,e.modelOptions),l.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),a.set(o.current),s.set(l.current))});let C=`${e.className||""} vjs-react-diagram`,g=e.style||{};return ce.createElement("div",{ref:t,className:C,style:g},ce.createElement(E.Provider,{value:s},ce.createElement(y.Provider,{value:a},e.children)))});import{MiniviewPlugin as cr,Surface as ur}from"@visuallyjs/browser-ui";import dr,{forwardRef as mr,useContext as qe,useEffect as pr,useImperativeHandle as fr,useRef as Ke}from"react";var ki=mr((e,r)=>{let t=qe(E),n=qe(y),o=Ke(!1),l=Ke(null),a;fr(r,()=>({toggleCollapsed:()=>a==null?void 0:a.toggleCollapsed()}));function s(c){c.addPlugin({type:cr.type,options:{container:l.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter}})}return pr(()=>{o.current||(o.current=!0,t!=null?t.listen(s):n!=null&&n.listen(c=>{c.$ui instanceof ur&&s(c.$ui)}))}),dr.createElement("div",{ref:l,className:`${e.className||""}`})});import{Inspector as Cr,log as Er,Surface as gr}from"@visuallyjs/browser-ui";import W,{forwardRef as xr,useContext as be,useEffect as Qe,useImperativeHandle as Or,useRef as De,useState as ve}from"react";var qi=xr((e,r)=>{let t=be(E),n=be(y),o,l=be(ie);l==null&&(o=De(null),l=Le(o));let[a,s]=ve(null),[c,C]=ve(0),[g,v]=ve(null),i=De(!1),x=De(null),T=e.className||"";Qe(()=>{var R;(R=o==null?void 0:o.current)==null||R.$refresh()},[c]);let h=e.onSelectionCleared||(()=>s(null)),k=(R,A)=>{s(R),e.refresh&&e.refresh(R),C(w=>w+1)};function N(R){o.current=new Cr({container:x.current,ui:R,renderEmptyContainer:h,refresh:k,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(R):null}),v(o.current)}let G={getInspector:()=>g};return Or(r,()=>G),Qe(()=>{i.current||(i.current=!0,t!=null?t.listen(N):n!=null?n.listen(R=>{R.$ui instanceof gr&&N(R.$ui)}):Er("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),W.createElement("div",{ref:x,className:T},W.createElement(ie.Provider,{value:l},a!=null&&W.createElement(W.Fragment,null,typeof e.children=="function"?e.children(a,o.current.$ui.model):e.children||[]),a==null&&W.createElement(W.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Qi="group:added",el="group:member:added",tl="group:member:removed",rl="group:removed",ol="dataLoadStart",nl="dataAppendStart",al="dataLoadEnd",il="dataAppendEnd",ll="dataUpdated",sl="graphClearStart",cl="graphCleared",ul="graphChanged",dl="group:updated",ml="node:updated",pl="port:updated",fl="edge:updated",Cl="edge:added",El="node:added",gl="edge:removed",xl="node:removed",Ol="port:added",Sl="port:removed",Pl="edge:target",Rl="edge:source",et="select",tt="deselect",rt="selection:cleared",hl="edge:geometry",yl="edge:pathEdited",bl="edge:typeChanged",Dl="node:typeChanged",vl="port:typeChanged",_l="group:typeChanged",Tl="group:move:start",Nl="group:move",Al="group:move:end",wl="internal:group:sizeChanged",Ml="internal:group:sizeChangedRedo",Il="internal:group:sizeChangedUndo",Vl="renderer:added",Bl="node:move:start",jl="node:move",kl="node:move:end",Gl="node:move:abort",Ul="undoredo:update",Ll="undo",Fl="redo",zl="destroy";import f,{useContext as ot,useEffect as Sr,useRef as ue,useState as M}from"react";import{EVENT_UNDOREDO_UPDATE as Pr,FALSE as nt,LASSO_PATH as Rr,LASSO_VIEW_BOX as hr,LassoPlugin as yr,log as br,PAN_PATH as Dr,PAN_VIEW_BOX as vr,Surface as _r,SURFACE_MODE_PAN as at,SURFACE_MODE_SELECT as it,TRUE as lt,ZOOM_TO_FIT_PATH as Tr,ZOOM_TO_FIT_VIEW_BOX as Nr,EVENT_SURFACE_MODE_CHANGED as Ar,ZOOM_IN_OUT_VIEW_BOX as st,ZOOM_IN_PATH as wr,ZOOM_OUT_PATH as Mr,RESET_SELECTION_PATH as Ir,RESET_SELECTION_VIEW_BOX as Vr,CLEAR_PATH as Br,CLEAR_VIEW_BOX as jr,CLASS_CONTROLS_RESET_SELECTION as kr,supportsPathEditing as Gr}from"@visuallyjs/browser-ui";var Ur="can-undo",Lr="can-redo",_e="vjs-selected-mode",ct="vjs-controls-has-selection";function rs(e){let r="Clear selection",[t,n]=M("row"),[o,l]=M(!1),[a,s]=M(!1),c=ot(E),C=ot(y),g=ue(null),v=ue(!1),i=ue(null),[x,T]=M("Clear dataset?"),h=ue(null),[k,N]=M(!0),[G,R]=M(!1),[A,w]=M(!0),[J,$]=M(!0),[d,S]=M([]),[L,X]=M([]);function F(u){i.current=u,e.clearMessage&&T(e.clearMessage),e.onMaybeClear&&(h.current=e.onMaybeClear),e.orientation&&n(e.orientation),e.undoRedo===!1&&w(!1),e.zoomToExtents===!1&&N(!1),e.zoomButtons===!0&&R(!0),e.clear===!1&&$(!1);let O=(e.buttons||[]).filter(D=>D.mode!=null);S(O);let U=(e.buttons||[]).filter(D=>D.mode==null);X(U),u.bind(Ar,D=>{u.removeClass(u.$getSelector(g.current,"[data-mode]"),_e),u.addClass(u.$getSelector(g.current,"[data-mode='"+D+"']"),_e)}),u.model.bind(Pr,D=>{g.current.setAttribute(Ur,D.undoCount>0?lt:nt),g.current.setAttribute(Lr,D.redoCount>0?lt:nt)}),u.model.bind(et,b),u.model.bind(tt,b),u.model.bind(rt,b);let Z=u.getPlugin(yr.type);l(Z!=null),s(Z!=null||O.length>0)}function fe(){i.current.model.clearSelection(),i.current.zoomToFit()}function z(){i.current.zoomIn()}function oe(){i.current.zoomOut()}function ne(){i.current.setMode(at)}function Ce(){i.current.setMode(it)}function Ee(){i.current.model.clearSelection(),Gr(i.current)&&i.current.stopEditingPath()}function m(){h.current!=null?h.current(()=>i.current.model.clear()):window.confirm(x)&&i.current.model.clear()}function p(){i.current.model.undo()}function _(){i.current.model.redo()}let b=()=>{i.current.model.getSelection().isEmpty()?g.current.removeAttribute(ct):g.current.setAttribute(ct,"true")};Sr(()=>{v.current===!1&&(v.current=!0,e.surfaceId!=null?ae(e.surfaceId,u=>F(u.getSurface())):c!=null?c.listen(F):C!=null?C.listen(u=>{u.$ui instanceof _r&&F(u.$ui)}):br("WARN: controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))});let P=e.style||{};return f.createElement("div",{style:P,ref:g,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":t},a&&f.createElement("i",{className:"vjs-pan-mode "+_e,"data-mode":at,title:"Pan Mode",onClick:()=>ne()},f.createElement("svg",{fill:"none",viewBox:vr,stroke:"currentColor"},f.createElement("path",{d:Dr}))),o&&f.createElement("i",{className:"vjs-select-mode","data-mode":it,title:"Select Mode",onClick:()=>Ce()},f.createElement("svg",{fill:"currentColor",viewBox:hr,stroke:"currentColor"},f.createElement("path",{d:Rr}))),d.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})),k&&f.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>fe()},f.createElement("svg",{viewBox:Nr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Tr}))),G&&f.createElement(f.Fragment,null,f.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>z()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:wr}))),f.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>oe()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Mr})))),A&&f.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>p()}),A&&f.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>_()}),f.createElement("i",{className:kr,title:r,onClick:()=>Ee()},f.createElement("svg",{viewBox:Vr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Ir}))),J&&f.createElement("i",{className:"vjs-clear-dataset",title:x,onClick:()=>m()},f.createElement("svg",{viewBox:jr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Br}))),L.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})))}import B,{useContext as ut,useEffect as Fr,useRef as dt,useState as j}from"react";import{SvgExportUI as zr,ImageExportUI as mt,Surface as Hr,CLASS_CONTROLS as Wr,CLASS_EXPORT_CONTROLS as Jr,log as $r}from"@visuallyjs/browser-ui";function Cs(e){let r=dt(!1),t=dt(null),n=ut(E),o=ut(y),[l,a]=j(!0),[s,c]=j("Export :"),[C,g]=j(null),[v,i]=j(null),[x,T]=j(null),[h,k]=j(!0),[N,G]=j(!0),[R,A]=j(!0);function w(S){t.current=S,e.label&&c(s),e.showLabel!=null&&a(e.showLabel),e.margins&&g(e.margins);let L=e.svgOptions||{};i(L);let X=e.imageOptions||{};T(X),e.allowJpgExport!=null&&A(e.allowJpgExport),e.allowPngExport!=null&&G(e.allowPngExport),e.allowSvgExport!=null&&k(e.allowSvgExport)}function J(){new zr(t.current).export(v)}function $(){new mt(t.current).export(x)}function d(){new mt(t.current).export(Object.assign(x||{},{type:"image/jpeg"}))}return Fr(()=>{r.current===!1&&(r.current=!0,e.surfaceId!=null?ae(e.surfaceId,S=>w(S.getSurface())):n!=null?n.listen(w):o!=null?o.listen(S=>{S.$ui instanceof Hr&&w(S.$ui)}):$r("WARN: export controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),B.createElement("div",{className:`${Wr} ${Jr}`},l&&B.createElement("span",null,s),h&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportSvg",onClick:()=>J()},"SVG")),N&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportPng",onClick:()=>$()},"PNG")),R&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportJpg",onClick:()=>d()},"JPG")))}import Xr,{forwardRef as Zr,useContext as Yr,useEffect as qr,useRef as Te}from"react";import{log as pt,ShapePalette as Kr}from"@visuallyjs/browser-ui";var Ds=Zr((e,r)=>{let t=Te(!1),n=Te(null),o=Yr(E),l=Te(null),a=e.className||"";function s(c){c.getShapeLibrary()!=null?l.current=new Kr(c,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):pt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return qr(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):pt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Xr.createElement("div",{ref:n,className:a})});import Qr,{useEffect as eo,useRef as to}from"react";import{CLASS_SHAPE as ro,convertToMultilineText as oo,DEFAULT_LABEL_FILL_RATIO as no}from"@visuallyjs/browser-ui";var ao=120,io=90;function Is(e){let r=to(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function l(){return e.ctx.obj.data.width||ao}function a(){return e.ctx.obj.data.height||io}function s(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function c(){return e.labelProperty||"label"}return eo(()=>{let C=e.ctx.obj.data,g=e.ctx.ui.getShapeLibrary(),v=g.renderCompiledShape(C);if(r.current.replaceChildren(v),e.showLabels){let i=g.renderShapeLabel(C,c(),e.labelStrokeWidth,null,s(),s(),e.font);r.current.appendChild(i),e.multilineLabels!=!1&&oo(i,C[c()]||"",l()*(e.labelFillRatio||no))}}),Qr.createElement("svg",{className:ro,ref:r,strokeWidth:t(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+l()+" "+a()})}import lo,{forwardRef as so,useContext as co,useEffect as uo,useRef as Ne}from"react";import{log as mo,Palette as po,defaultDataGenerator as fo}from"@visuallyjs/browser-ui";var Ys=so((e,r)=>{let t=Ne(!1),n=Ne(null),o=co(E),l=Ne(null),a=e.className||"";function s(c){let C={selector:e.selector,source:n.current,dataGenerator:g=>e.dataGenerator?e.dataGenerator(g):fo(g),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,typeGenerator:e.typeGenerator,groupIdentifier:e.groupIdentifier,dragSize:e.dragSize,canvasDropFilter:e.canvasDropFilter,mode:e.mode,onVertexAdded:e.onVertexAdded,selectAfterAdd:e.selectAfterAdd,allowClickToAdd:e.allowClickToAdd,clickToAddOnly:e.clickToAddOnly};l.current=new po(c,C)}return uo(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):mo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),lo.createElement("div",{className:a,ref:n},e.children)});import de,{useEffect as Co,useState as Eo,useRef as ft}from"react";import{CLASS_COLOR_PICKER as go,CLASS_COLOR_PICKER_SWATCH as xo,CLASS_COLOR_PICKER_SWATCHES as Oo,EVENT_CONTEXT_UPDATE as Ct,EVENT_CHANGE as Ae,INSPECTOR_CONTEXT_RECENT_COLORS as me}from"@visuallyjs/browser-ui";function tc(e){let r=e.maxColors||10,t=ft(null),n=ft(!1),o=le(),[l,a]=Eo(o.ensureContext(me,()=>[]));function s(i){let x=o.ensureContext(me,()=>[]);if(i=i.toUpperCase(),!(x.find(h=>h.toUpperCase()===i)!=null)){let h=x.slice();h.unshift(i),h.length>r&&(h.length=r),o.updateContext(me,h)}}function c(){let i=t.current.value;o.setValue(e.propertyName,i),s(i)}function C(i){o.setValue(e.propertyName,i),t.current.value=i}let g=i=>{i.key===me&&a(i.value.slice())};function v(){let i=o.getValue(e.propertyName);i!=null&&t.current&&s(i)}return Co(()=>(o.bind(Ct,g),o.bind(Ae,v),n.current||(n.current=!0,t.current.addEventListener(Ae,c)),setTimeout(v),()=>{o.unbind(Ct,g),o.unbind(Ae,v)})),de.createElement("div",{className:go},de.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),de.createElement("div",{className:Oo},l.map(i=>de.createElement("div",{key:i,title:i,className:xo,style:{backgroundColor:i},"data-color":i,onClick:()=>C(i)}))))}import So,{forwardRef as Po,useContext as Ro,useEffect as ho,useRef as we}from"react";import{log as yo,DiagramPalette as bo}from"@visuallyjs/browser-ui";var pc=Po((e,r)=>{let t=we(!1),n=we(null),o=Ro(y),l=we(null),a=e.className||"";function s(C){l.current=new bo(n.current,C,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}ho(()=>{t.current||(t.current=!0,o!=null?o.listen(C=>s(C)):e.diagram!=null?s(e.diagram):yo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let c=e.style||{};return So.createElement("div",{ref:n,className:a,style:c})});import Do,{useContext as Et,useEffect as re,useRef as pe}from"react";import{ColumnChart as vo,BarChart as _o,CategoryValueChart as To,LineChart as No,AreaChart as Ao,PieChart as wo,ScatterChart as Mo,BubbleChart as Io,GaugeChart as Vo,SankeyChart as Bo}from"@visuallyjs/browser-ui";function I(e){let r=pe(null),t=pe(!1),n=pe(!1),o=pe(null),l=e.style||{},a=Et(E),s=Et(y);return re(()=>{if(!t.current)if(t.current=!0,a!=null)a.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),n.current=!0});else if(s!=null)s.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),n.current=!0});else{let c=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,c),e.data?o.current.load({data:e.data},()=>n.current=!0):e.url?o.current.load({url:e.url},()=>n.current=!0):n.current=!0}}),e.reactive!==!1&&(re(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),re(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),re(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),re(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),Do.createElement("div",{ref:r,style:l,className:`${e.className||""}`})}function Vc(e){let r=Object.assign({createChart:(t,n)=>new vo(t,n)},e);return I(r)}function Bc(e){let r=Object.assign({createChart:(t,n)=>new _o(t,n)},e);return I(r)}function jc(e){let r=Object.assign({createChart:(t,n)=>new To(t,n)},e);return I(r)}function kc(e){let r=Object.assign({createChart:(t,n)=>new No(t,n)},e);return I(r)}function Gc(e){let r=Object.assign({createChart:(t,n)=>new Ao(t,n)},e);return I(r)}function Uc(e){let r=Object.assign({createChart:(t,n)=>new wo(t,n)},e);return I(r)}function Lc(e){let r=Object.assign({createChart:(t,n)=>new Mo(t,n)},e);return I(r)}function Fc(e){let r=Object.assign({createChart:(t,n)=>new Io(t,n)},e);return I(r)}function zc(e){let r=Object.assign({createChart:(t,n)=>new Vo(t,n)},e);return I(r)}function Hc(e){let r=Object.assign({createChart:(t,n)=>new Bo(t,n)},e);return e.interactive!=null&&(r.options.interactive=e.interactive),e.pivot!=null&&(r.options.pivot=e.pivot),e.csvData&&(r.options.csvData=e.csvData),e.jsonData&&(r.options.jsonData=e.jsonData),I(r)}import{log as jo}from"@visuallyjs/browser-ui";import ko,{useContext as Go,useEffect as Uo,useRef as gt}from"react";function xt(e){let r=gt(!1),t=gt(null),n=Go(E),o=e.position||{x:0,y:0};function l(a){e.placement==="fixed"?a.fixElement(t.current,o,e.constraints):a.floatElement(t.current,o)}return Uo(()=>{r.current||(r.current=!0,n!=null?n.listen(a=>l(a)):jo("Decorator cannot mount: no SurfaceContext from a provider found"))}),ko.createElement("div",{ref:t},e.children)}import{log as Lo,BackgroundPlugin as Fo,GeneratedGridBackground as zo,TiledBackground as Ho,SimpleBackground as Wo}from"@visuallyjs/browser-ui";import Ot,{useRef as Jo}from"react";function Me(e){let r=Jo(!1);function t(n){if(!r.current){r.current=!0;try{n&&n.addPlugin({type:Fo.type,options:e})}catch(o){Lo(`WARN: BackgroundComponent could not mount background ${o}`)}}}return Ue().then(t),Ot.createElement(Ot.Fragment,null)}function au(e){return Me(Object.assign({type:zo.type},e))}function iu(e){return Me(Object.assign({type:Wo.type},e))}function lu(e){return Me(Object.assign({type:Ho.type},e))}import{useState as $o,useEffect as Xo}from"react";import{EVENT_ZOOM as St}from"@visuallyjs/browser-ui";function mu(e){let[r,t]=$o(()=>e.getZoom());return Xo(()=>{let n=o=>{t(o.zoom)};return e.bind(St,n),t(e.getZoom()),()=>{e.unbind(St,n)}},[e]),r}export{Lr as ATTRIBUTE_CAN_REDO,Ur as ATTRIBUTE_CAN_UNDO,Gc as AreaChartComponent,Me as BackgroundComponent,Bc as BarChartComponent,q as BrowserUIReactModel,Fc as BubbleChartComponent,Oe as CLASS_REACT_GROUP,xe as CLASS_REACT_NODE,je as CLASS_REACT_OVERLAY,_e as CLASS_SELECTED_MODE,tc as ColorPickerComponent,Vc as ColumnChartComponent,rs as ControlsComponent,io as DEFAULT_SHAPE_HEIGHT,ao as DEFAULT_SHAPE_WIDTH,xt as DecoratorComponent,_i as DiagramComponent,y as DiagramContext,pc as DiagramPaletteComponent,Di as DiagramProvider,xa as EdgeTypePickerComponent,Cs as ExportControlsComponent,zc as GaugeChartComponent,au as GridBackgroundComponent,iu as ImageBackgroundComponent,qi as InspectorComponent,ie as InspectorContext,Se as JSXWrapper,kc as LineChartComponent,ki as MiniviewComponent,Ys as PaletteComponent,Uc as PieChartComponent,Hc as SankeyChartComponent,Lc as ScatterChartComponent,Is as ShapeComponent,Ds as ShapePaletteComponent,ci as SurfaceComponent,E as SurfaceContext,ta as SurfaceProvider,lu as TiledImageBackgroundComponent,se as VisuallyJsContext,Ta as VisuallyJsProvider,jc as XYChartComponent,Ye as createDiagramRef,Le as createInspectorRef,Q as createRefHandler,K as createSurfaceRef,ae as getSurfaceComponent,Ge as newInstance,Be as registerSurface,vi as useDiagram,le as useInspector,Ue as useSurface,Na as useVisuallyJsModel,mu as useZoom};
1
+ import{log as Ie}from"@visuallyjs/browser-ui";var Ve=new Map,Z={};function Be(e,r){Ve.set(e,r),Rt(e,r)}function Rt(e,r){(Z[e]||[]).forEach(n=>{try{n(r)}catch(o){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Z[e]}function ae(e,r){let t=Ve.get(e);if(t)try{r(t)}catch(n){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Z[e]=Z[e]||[],Z[e].push(r)}var xe="vjs-react-node",Oe="vjs-react-group",je="vjs-react-overlay";import ke,{useEffect as ht,useRef as yt}from"react";function Se(e){let r=yt(!1);return ht(()=>{r.current||(r.current=!0,e.cb(e.ns))}),ke.createElement(ke.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}import{BrowserUIModel as bt,log as Dt}from"@visuallyjs/browser-ui";var q=class extends bt{render(r,t){return Dt("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Ue(e){return e=e||{},new q(e)}import{createContext as _t,default as vt,useRef as Tt,useContext as Nt}from"react";var E=_t(null);function ta(e){let r=Tt(null),t=K(r);return vt.createElement(E.Provider,{value:t},e.children||[])}function K(e){return Q(e)}function Q(e){let r=[];return{set:t=>{e.current=t,r.forEach(n=>n(t))},listen:t=>{e.current==null?r.push(t):t(e.current)},Ri:()=>e}}function Ge(){let e=Nt(E);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}import{createContext as At,useContext as wt}from"react";var ie=At(null);function Le(e){return Q(e)}function le(){let e=wt(ie);return e==null?null:e.Ri().current}import Mt,{useRef as Pe,useEffect as It}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Vt,EdgeTypePicker as Bt}from"@visuallyjs/browser-ui";function xa(e){let r=Pe(!1),t=Pe(null),n=Pe(null),o=le(),{propertyName:l}=e,a=()=>o.getFromContext(Vt)||o.$ui.$getEdgePropertyMappings();return It(()=>{r.current||(r.current=!0,n.current=new Bt(o.$ui,t.current,a(),o.getValue(l),(s,c)=>{o.setValue(l,c)}),n.current.render(l,o.qe),o.onChange(()=>{n.current.select(l,o.getValue(l))}))}),Mt.createElement("div",{ref:t})}import jt,{createContext as kt,useContext as Fe}from"react";var se=kt(void 0);function Ta(e){let r=Ue(e.modelOptions||{});return jt.createElement(se.Provider,{value:r},e.children||[])}function Na(){let e=Fe(se);return new Promise((r,t)=>{if(e==null){let n=Fe(E);n!=null?n.listen(o=>r(o.model)):t()}else r(e)})}import V,{forwardRef as Ut,useContext as ze,useEffect as Gt,useImperativeHandle as Lt,useRef as ee,useState as He}from"react";import*as he from"react-dom";import{addClass as We,ELEMENT_DIV as Je,ELEMENT_SVG as Ft,ElementTypes as zt,EVENT_GRAPH_CLEARED as Ht,EVENT_GROUP_REMOVED as Wt,EVENT_GROUP_UPDATED as Jt,EVENT_NODE_REMOVED as $t,EVENT_NODE_UPDATED as Xt,extend as $e,isGroup as Re,renderSurface as Yt,CLASS_DEFAULT_NODE as Zt,CLASS_DEFAULT_GROUP as qt,OVERLAY_TYPE_CUSTOM as Kt,EVENT_EDGE_REMOVED as Qt,EVENT_EDGE_UPDATED as er,uuid as tr,partition as rr,$svgNode as or,ATTRIBUTE_NOT_DRAGGABLE as Xe,TRUE as Ye}from"@visuallyjs/browser-ui";var ci=Ut((e,r)=>{let t=ee(!1),n=ze(se),o=ee(null),l=ee(null),a=ee(null),s,c=ze(E);c==null?(s=ee(null),c=K(s)):s=c.Ri();let[C,g]=He([]),[_,i]=He([]),x=[],T=[];function h(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{k(S)}})}function k(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&(We(d.domElement.firstElementChild,S),d.domElement.firstElementChild.getAttribute(Xe)===Ye&&d.domElement.setAttribute(Xe,Ye)),s.current.$vertexRendered(d.obj,d.domElement,d.def,d.payload.eventInfo),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function N(){g(x.slice())}function U(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{R(S)}})}function R(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&We(d.domElement.firstElementChild,S),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function A(){i(T.slice())}let w={getSurface:()=>s.current,getModel:()=>a.current};Lt(r,()=>w),Gt(()=>{var d;if(!t.current){t.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new q(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(l.current=document.createElement("div"),l.current.style.position="fixed",l.current.style.left="10000px",l.current.style.top="10000px",l.current.style.width="100px",l.current.style.height="100px",l.current.style.opacity="0",o.current.appendChild(l.current));let S=(m,p,v,b,P,u,O,G)=>{let[Y,D]=u.component||u.jsx?[u,null]:Re(O)?[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),qt]:[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),Zt],H=P.containerType===zt.HTML?document.createElement(Je):or(Ft);l.current.appendChild(H),D!=null&&P.$addClassToElement(H,D);let Pt={data:p,model:v,surface:P,componentId:O.getFullId(),obj:O,props:e.childProps,element:H,eventInfo:G};x.push({data:p,def:Y,payload:Pt,domElement:H,key:O.id,obj:O,hydrated:!1}),N()},L=(m,p)=>{p.parentNode&&p.parentNode.removeChild(p)},X={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(m,p,v,b)=>{},render:S,rerender:(m,p,v,b,P,u,O,G,Y)=>{let D=rr(x,H=>H.obj!==O);x=D.left,N(),S(m,p,v,b,P,u,O,G),D.right.length>0&&setTimeout(()=>{L(null,D.right[0].domElement)})},cleanupVertex:L,cleanupPort:(m,p)=>{}},F=((d=e.viewOptions)==null?void 0:d.edges)||{};for(let m in F){let p=F[m];p.overlays!=null&&(p.overlays=p.overlays.map(v=>{if(v.jsx!=null){let b=tr();return{type:Kt,options:{create:u=>{let O=document.createElement(Je);O.className=je;let G={data:u.edge.data,model:a.current,surface:z,componentId:u.edge.getFullId(),obj:u.edge,props:e.childProps,element:O};return T.push({def:{jsx:v.jsx},data:u.edge.data,obj:u.edge,payload:G,domElement:O,key:b,hydrated:!1}),A(),O}}}}else return v}))}let fe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),z=Yt(a.current,o.current,X,fe);c.set(z),e.surfaceId!=null&&Be(e.surfaceId,w);let oe=(m,p)=>{let v=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=x.find(P=>P.key===m);b!=null&&(b.data=v(),N())},ne=m=>{x=x.filter(p=>p.payload.componentId!==m),N()},Ce=(m,p)=>{let v=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=T.find(P=>P.obj.id===m);b!=null&&(b.data=v(),A())},Ee=m=>{T=T.filter(p=>p.payload.obj.id!==m),A()};a.current.bind(Xt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind(Jt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind($t,m=>{ne(m.node.id)}),a.current.bind(Wt,m=>{ne(m.group.id)}),a.current.bind(Qt,m=>{Ee(m.edge.id)}),a.current.bind(er,m=>{Ce(m.edge.id,m)}),a.current.bind(Ht,()=>{x=[],N(),T=[],A()}),e.data?a.current.load({data:e.data,onload:()=>setTimeout(()=>z.repaintEverything(),250)}):e.url&&a.current.load({url:e.url,onload:()=>setTimeout(()=>z.repaintEverything(),250)})}});let J=`${e.className||""} vjs-react-surface`,$=e.style||{};return V.createElement("div",{ref:o,className:J,style:$},C.map(d=>he.createPortal(h(d),d.domElement,d.key)),_.map(d=>he.createPortal(U(d),d.domElement,d.key)),V.createElement(E.Provider,{value:c},e.children))});import ce,{createContext as nr,forwardRef as ar,useContext as ye,useEffect as ir,useImperativeHandle as lr,useRef as te}from"react";import{createDiagram as sr}from"@visuallyjs/browser-ui";var y=nr(null);function Ze(e){return Q(e)}function Di(e){let r=te(null),t=Ze(r);return ce.createElement(y.Provider,{value:t},e.children||[])}function _i(){let e=ye(y);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}var vi=ar((e,r)=>{let t=te(null),n=te(!1),o,l,a=ye(y);a==null?(o=te(null),a=Ze(o)):o=a.Ri();let s=ye(E);s==null?(l=te(null),s=K(l)):l=s.Ri();let c={getDiagram:()=>o.current};lr(r,()=>c),ir(()=>{n.current||(n.current=!0,o.current=sr(t.current,e.options,e.modelOptions),l.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),a.set(o.current),s.set(l.current))});let C=`${e.className||""} vjs-react-diagram`,g=e.style||{};return ce.createElement("div",{ref:t,className:C,style:g},ce.createElement(E.Provider,{value:s},ce.createElement(y.Provider,{value:a},e.children)))});import{MiniviewPlugin as cr,Surface as ur}from"@visuallyjs/browser-ui";import dr,{forwardRef as mr,useContext as qe,useEffect as pr,useImperativeHandle as fr,useRef as Ke}from"react";var ki=mr((e,r)=>{let t=qe(E),n=qe(y),o=Ke(!1),l=Ke(null),a;fr(r,()=>({toggleCollapsed:()=>a==null?void 0:a.toggleCollapsed()}));function s(c){c.addPlugin({type:cr.type,options:{container:l.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter}})}return pr(()=>{o.current||(o.current=!0,t!=null?t.listen(s):n!=null&&n.listen(c=>{c.$ui instanceof ur&&s(c.$ui)}))}),dr.createElement("div",{ref:l,className:`${e.className||""}`})});import{Inspector as Cr,log as Er,Surface as gr}from"@visuallyjs/browser-ui";import W,{forwardRef as xr,useContext as be,useEffect as Qe,useImperativeHandle as Or,useRef as De,useState as _e}from"react";var qi=xr((e,r)=>{let t=be(E),n=be(y),o,l=be(ie);l==null&&(o=De(null),l=Le(o));let[a,s]=_e(null),[c,C]=_e(0),[g,_]=_e(null),i=De(!1),x=De(null),T=e.className||"";Qe(()=>{var R;(R=o==null?void 0:o.current)==null||R.$refresh()},[c]);let h=e.onSelectionCleared||(()=>s(null)),k=(R,A)=>{s(R),e.refresh&&e.refresh(R),C(w=>w+1)};function N(R){o.current=new Cr({container:x.current,ui:R,renderEmptyContainer:h,refresh:k,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(R):null}),_(o.current)}let U={getInspector:()=>g};return Or(r,()=>U),Qe(()=>{i.current||(i.current=!0,t!=null?t.listen(N):n!=null?n.listen(R=>{R.$ui instanceof gr&&N(R.$ui)}):Er("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),W.createElement("div",{ref:x,className:T},W.createElement(ie.Provider,{value:l},a!=null&&W.createElement(W.Fragment,null,typeof e.children=="function"?e.children(a,o.current.$ui.model):e.children||[]),a==null&&W.createElement(W.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Qi="group:added",el="group:member:added",tl="group:member:removed",rl="group:removed",ol="dataLoadStart",nl="dataAppendStart",al="dataLoadEnd",il="dataAppendEnd",ll="dataUpdated",sl="graphClearStart",cl="graphCleared",ul="graphChanged",dl="group:updated",ml="node:updated",pl="port:updated",fl="edge:updated",Cl="edge:added",El="node:added",gl="edge:removed",xl="node:removed",Ol="port:added",Sl="port:removed",Pl="edge:target",Rl="edge:source",et="select",tt="deselect",rt="selection:cleared",hl="edge:geometry",yl="edge:pathEdited",bl="edge:typeChanged",Dl="node:typeChanged",_l="port:typeChanged",vl="group:typeChanged",Tl="group:move:start",Nl="group:move",Al="group:move:end",wl="internal:group:sizeChanged",Ml="internal:group:sizeChangedRedo",Il="internal:group:sizeChangedUndo",Vl="renderer:added",Bl="node:move:start",jl="node:move",kl="node:move:end",Ul="node:move:abort",Gl="undoredo:update",Ll="undo",Fl="redo",zl="destroy";import f,{useContext as ot,useEffect as Sr,useRef as ue,useState as M}from"react";import{EVENT_UNDOREDO_UPDATE as Pr,FALSE as nt,LASSO_PATH as Rr,LASSO_VIEW_BOX as hr,LassoPlugin as yr,log as br,PAN_PATH as Dr,PAN_VIEW_BOX as _r,Surface as vr,SURFACE_MODE_PAN as at,SURFACE_MODE_SELECT as it,TRUE as lt,ZOOM_TO_FIT_PATH as Tr,ZOOM_TO_FIT_VIEW_BOX as Nr,EVENT_SURFACE_MODE_CHANGED as Ar,ZOOM_IN_OUT_VIEW_BOX as st,ZOOM_IN_PATH as wr,ZOOM_OUT_PATH as Mr,RESET_SELECTION_PATH as Ir,RESET_SELECTION_VIEW_BOX as Vr,CLEAR_PATH as Br,CLEAR_VIEW_BOX as jr,CLASS_CONTROLS_RESET_SELECTION as kr,supportsPathEditing as Ur}from"@visuallyjs/browser-ui";var Gr="can-undo",Lr="can-redo",ve="vjs-selected-mode",ct="vjs-controls-has-selection";function rs(e){let r="Clear selection",[t,n]=M("row"),[o,l]=M(!1),[a,s]=M(!1),c=ot(E),C=ot(y),g=ue(null),_=ue(!1),i=ue(null),[x,T]=M("Clear dataset?"),h=ue(null),[k,N]=M(!0),[U,R]=M(!1),[A,w]=M(!0),[J,$]=M(!0),[d,S]=M([]),[L,X]=M([]);function F(u){i.current=u,e.clearMessage&&T(e.clearMessage),e.onMaybeClear&&(h.current=e.onMaybeClear),e.orientation&&n(e.orientation),e.undoRedo===!1&&w(!1),e.zoomToExtents===!1&&N(!1),e.zoomButtons===!0&&R(!0),e.clear===!1&&$(!1);let O=(e.buttons||[]).filter(D=>D.mode!=null);S(O);let G=(e.buttons||[]).filter(D=>D.mode==null);X(G),u.bind(Ar,D=>{u.removeClass(u.$getSelector(g.current,"[data-mode]"),ve),u.addClass(u.$getSelector(g.current,"[data-mode='"+D+"']"),ve)}),u.model.bind(Pr,D=>{g.current.setAttribute(Gr,D.undoCount>0?lt:nt),g.current.setAttribute(Lr,D.redoCount>0?lt:nt)}),u.model.bind(et,b),u.model.bind(tt,b),u.model.bind(rt,b);let Y=u.getPlugin(yr.type);l(Y!=null),s(Y!=null||O.length>0)}function fe(){i.current.model.clearSelection(),i.current.zoomToFit()}function z(){i.current.zoomIn()}function oe(){i.current.zoomOut()}function ne(){i.current.setMode(at)}function Ce(){i.current.setMode(it)}function Ee(){i.current.model.clearSelection(),Ur(i.current)&&i.current.stopEditingPath()}function m(){h.current!=null?h.current(()=>i.current.model.clear()):window.confirm(x)&&i.current.model.clear()}function p(){i.current.model.undo()}function v(){i.current.model.redo()}let b=()=>{i.current.model.getSelection().isEmpty()?g.current.removeAttribute(ct):g.current.setAttribute(ct,"true")};Sr(()=>{_.current===!1&&(_.current=!0,e.surfaceId!=null?ae(e.surfaceId,u=>F(u.getSurface())):c!=null?c.listen(F):C!=null?C.listen(u=>{u.$ui instanceof vr&&F(u.$ui)}):br("WARN: controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))});let P=e.style||{};return f.createElement("div",{style:P,ref:g,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":t},a&&f.createElement("i",{className:"vjs-pan-mode "+ve,"data-mode":at,title:"Pan Mode",onClick:()=>ne()},f.createElement("svg",{fill:"none",viewBox:_r,stroke:"currentColor"},f.createElement("path",{d:Dr}))),o&&f.createElement("i",{className:"vjs-select-mode","data-mode":it,title:"Select Mode",onClick:()=>Ce()},f.createElement("svg",{fill:"currentColor",viewBox:hr,stroke:"currentColor"},f.createElement("path",{d:Rr}))),d.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})),k&&f.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>fe()},f.createElement("svg",{viewBox:Nr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Tr}))),U&&f.createElement(f.Fragment,null,f.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>z()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:wr}))),f.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>oe()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Mr})))),A&&f.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>p()}),A&&f.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>v()}),f.createElement("i",{className:kr,title:r,onClick:()=>Ee()},f.createElement("svg",{viewBox:Vr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Ir}))),J&&f.createElement("i",{className:"vjs-clear-dataset",title:x,onClick:()=>m()},f.createElement("svg",{viewBox:jr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Br}))),L.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})))}import B,{useContext as ut,useEffect as Fr,useRef as dt,useState as j}from"react";import{SvgExportUI as zr,ImageExportUI as mt,Surface as Hr,CLASS_CONTROLS as Wr,CLASS_EXPORT_CONTROLS as Jr,log as $r}from"@visuallyjs/browser-ui";function Cs(e){let r=dt(!1),t=dt(null),n=ut(E),o=ut(y),[l,a]=j(!0),[s,c]=j("Export :"),[C,g]=j(null),[_,i]=j(null),[x,T]=j(null),[h,k]=j(!0),[N,U]=j(!0),[R,A]=j(!0);function w(S){t.current=S,e.label&&c(s),e.showLabel!=null&&a(e.showLabel),e.margins&&g(e.margins);let L=e.svgOptions||{};i(L);let X=e.imageOptions||{};T(X),e.allowJpgExport!=null&&A(e.allowJpgExport),e.allowPngExport!=null&&U(e.allowPngExport),e.allowSvgExport!=null&&k(e.allowSvgExport)}function J(){new zr(t.current).export(_)}function $(){new mt(t.current).export(x)}function d(){new mt(t.current).export(Object.assign(x||{},{type:"image/jpeg"}))}return Fr(()=>{r.current===!1&&(r.current=!0,e.surfaceId!=null?ae(e.surfaceId,S=>w(S.getSurface())):n!=null?n.listen(w):o!=null?o.listen(S=>{S.$ui instanceof Hr&&w(S.$ui)}):$r("WARN: export controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),B.createElement("div",{className:`${Wr} ${Jr}`},l&&B.createElement("span",null,s),h&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportSvg",onClick:()=>J()},"SVG")),N&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportPng",onClick:()=>$()},"PNG")),R&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportJpg",onClick:()=>d()},"JPG")))}import Xr,{forwardRef as Yr,useContext as Zr,useEffect as qr,useRef as Te}from"react";import{log as pt,ShapePalette as Kr}from"@visuallyjs/browser-ui";var Ds=Yr((e,r)=>{let t=Te(!1),n=Te(null),o=Zr(E),l=Te(null),a=e.className||"";function s(c){c.getShapeLibrary()!=null?l.current=new Kr(c,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):pt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return qr(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):pt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Xr.createElement("div",{ref:n,className:a})});import Qr,{useEffect as eo,useRef as to}from"react";import{CLASS_SHAPE as ro,convertToMultilineText as oo,DEFAULT_LABEL_FILL_RATIO as no}from"@visuallyjs/browser-ui";var ao=120,io=90;function Is(e){let r=to(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function l(){return e.ctx.obj.data.width||ao}function a(){return e.ctx.obj.data.height||io}function s(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function c(){return e.labelProperty||"label"}return eo(()=>{let C=e.ctx.obj.data,g=e.ctx.ui.getShapeLibrary(),_=g.renderCompiledShape(C);if(r.current.replaceChildren(_),e.showLabels){let i=g.renderShapeLabel(C,c(),e.labelStrokeWidth,null,s(),s(),e.font);r.current.appendChild(i),e.multilineLabels!=!1&&oo(i,C[c()]||"",l()*(e.labelFillRatio||no))}}),Qr.createElement("svg",{className:ro,ref:r,strokeWidth:t(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+l()+" "+a()})}import lo,{forwardRef as so,useContext as co,useEffect as uo,useRef as Ne}from"react";import{log as mo,Palette as po,defaultDataGenerator as fo}from"@visuallyjs/browser-ui";var Zs=so((e,r)=>{let t=Ne(!1),n=Ne(null),o=co(E),l=Ne(null),a=e.className||"";function s(c){let C={selector:e.selector,source:n.current,dataGenerator:g=>e.dataGenerator?e.dataGenerator(g):fo(g),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,typeGenerator:e.typeGenerator,groupIdentifier:e.groupIdentifier,dragSize:e.dragSize,canvasDropFilter:e.canvasDropFilter,mode:e.mode,onVertexAdded:e.onVertexAdded,selectAfterAdd:e.selectAfterAdd,allowClickToAdd:e.allowClickToAdd,clickToAddOnly:e.clickToAddOnly};l.current=new po(c,C)}return uo(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):mo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),lo.createElement("div",{className:a,ref:n},e.children)});import de,{useEffect as Co,useState as Eo,useRef as ft}from"react";import{CLASS_COLOR_PICKER as go,CLASS_COLOR_PICKER_SWATCH as xo,CLASS_COLOR_PICKER_SWATCHES as Oo,EVENT_CONTEXT_UPDATE as Ct,EVENT_CHANGE as Ae,INSPECTOR_CONTEXT_RECENT_COLORS as me}from"@visuallyjs/browser-ui";function tc(e){let r=e.maxColors||10,t=ft(null),n=ft(!1),o=le(),[l,a]=Eo(o.ensureContext(me,()=>[]));function s(i){let x=o.ensureContext(me,()=>[]);if(i=i.toUpperCase(),!(x.find(h=>h.toUpperCase()===i)!=null)){let h=x.slice();h.unshift(i),h.length>r&&(h.length=r),o.updateContext(me,h)}}function c(){let i=t.current.value;o.setValue(e.propertyName,i),s(i)}function C(i){o.setValue(e.propertyName,i),t.current.value=i}let g=i=>{i.key===me&&a(i.value.slice())};function _(){let i=o.getValue(e.propertyName);i!=null&&t.current&&s(i)}return Co(()=>(o.bind(Ct,g),o.bind(Ae,_),n.current||(n.current=!0,t.current.addEventListener(Ae,c)),setTimeout(_),()=>{o.unbind(Ct,g),o.unbind(Ae,_)})),de.createElement("div",{className:go},de.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),de.createElement("div",{className:Oo},l.map(i=>de.createElement("div",{key:i,title:i,className:xo,style:{backgroundColor:i},"data-color":i,onClick:()=>C(i)}))))}import So,{forwardRef as Po,useContext as Ro,useEffect as ho,useRef as we}from"react";import{log as yo,DiagramPalette as bo}from"@visuallyjs/browser-ui";var pc=Po((e,r)=>{let t=we(!1),n=we(null),o=Ro(y),l=we(null),a=e.className||"";function s(C){l.current=new bo(n.current,C,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}ho(()=>{t.current||(t.current=!0,o!=null?o.listen(C=>s(C)):e.diagram!=null?s(e.diagram):yo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let c=e.style||{};return So.createElement("div",{ref:n,className:a,style:c})});import Do,{useContext as Et,useEffect as re,useRef as pe}from"react";import{ColumnChart as _o,BarChart as vo,CategoryValueChart as To,LineChart as No,AreaChart as Ao,PieChart as wo,ScatterChart as Mo,BubbleChart as Io,GaugeChart as Vo,SankeyChart as Bo}from"@visuallyjs/browser-ui";function I(e){let r=pe(null),t=pe(!1),n=pe(!1),o=pe(null),l=e.style||{},a=Et(E),s=Et(y);return re(()=>{if(!t.current)if(t.current=!0,a!=null)a.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),n.current=!0});else if(s!=null)s.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),n.current=!0});else{let c=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,c),e.data?o.current.load({data:e.data},()=>n.current=!0):e.url?o.current.load({url:e.url},()=>n.current=!0):n.current=!0}}),e.reactive!==!1&&(re(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),re(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),re(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),re(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),Do.createElement("div",{ref:r,style:l,className:`${e.className||""}`})}function Vc(e){let r=Object.assign({createChart:(t,n)=>new _o(t,n)},e);return I(r)}function Bc(e){let r=Object.assign({createChart:(t,n)=>new vo(t,n)},e);return I(r)}function jc(e){let r=Object.assign({createChart:(t,n)=>new To(t,n)},e);return I(r)}function kc(e){let r=Object.assign({createChart:(t,n)=>new No(t,n)},e);return I(r)}function Uc(e){let r=Object.assign({createChart:(t,n)=>new Ao(t,n)},e);return I(r)}function Gc(e){let r=Object.assign({createChart:(t,n)=>new wo(t,n)},e);return I(r)}function Lc(e){let r=Object.assign({createChart:(t,n)=>new Mo(t,n)},e);return I(r)}function Fc(e){let r=Object.assign({createChart:(t,n)=>new Io(t,n)},e);return I(r)}function zc(e){let r=Object.assign({createChart:(t,n)=>new Vo(t,n)},e);return I(r)}function Hc(e){let r=Object.assign({createChart:(t,n)=>new Bo(t,n)},e);return e.interactive!=null&&(r.options.interactive=e.interactive),e.pivot!=null&&(r.options.pivot=e.pivot),e.csvData&&(r.options.csvData=e.csvData),e.jsonData&&(r.options.jsonData=e.jsonData),I(r)}import{log as jo}from"@visuallyjs/browser-ui";import ko,{useContext as Uo,useEffect as Go,useRef as gt}from"react";function xt(e){let r=gt(!1),t=gt(null),n=Uo(E),o=e.position||{x:0,y:0};function l(a){e.placement==="fixed"?a.fixElement(t.current,o,e.constraints):a.floatElement(t.current,o)}return Go(()=>{r.current||(r.current=!0,n!=null?n.listen(a=>l(a)):jo("Decorator cannot mount: no SurfaceContext from a provider found"))}),ko.createElement("div",{ref:t},e.children)}import{log as Lo,BackgroundPlugin as Fo,GeneratedGridBackground as zo,TiledBackground as Ho,SimpleBackground as Wo}from"@visuallyjs/browser-ui";import Ot,{useRef as Jo}from"react";function Me(e){let r=Jo(!1);function t(n){if(!r.current){r.current=!0;try{n&&n.addPlugin({type:Fo.type,options:e})}catch(o){Lo(`WARN: BackgroundComponent could not mount background ${o}`)}}}return Ge().then(t),Ot.createElement(Ot.Fragment,null)}function au(e){return Me(Object.assign({type:zo.type},e))}function iu(e){return Me(Object.assign({type:Wo.type},e))}function lu(e){return Me(Object.assign({type:Ho.type},e))}import{useState as $o,useEffect as Xo}from"react";import{EVENT_ZOOM as St}from"@visuallyjs/browser-ui";function mu(e){let[r,t]=$o(()=>e.getZoom());return Xo(()=>{let n=o=>{t(o.zoom)};return e.bind(St,n),t(e.getZoom()),()=>{e.unbind(St,n)}},[e]),r}export{Lr as ATTRIBUTE_CAN_REDO,Gr as ATTRIBUTE_CAN_UNDO,Uc as AreaChartComponent,Me as BackgroundComponent,Bc as BarChartComponent,q as BrowserUIReactModel,Fc as BubbleChartComponent,Oe as CLASS_REACT_GROUP,xe as CLASS_REACT_NODE,je as CLASS_REACT_OVERLAY,ve as CLASS_SELECTED_MODE,tc as ColorPickerComponent,Vc as ColumnChartComponent,rs as ControlsComponent,io as DEFAULT_SHAPE_HEIGHT,ao as DEFAULT_SHAPE_WIDTH,xt as DecoratorComponent,vi as DiagramComponent,y as DiagramContext,pc as DiagramPaletteComponent,Di as DiagramProvider,xa as EdgeTypePickerComponent,Cs as ExportControlsComponent,zc as GaugeChartComponent,au as GridBackgroundComponent,iu as ImageBackgroundComponent,qi as InspectorComponent,ie as InspectorContext,Se as JSXWrapper,kc as LineChartComponent,ki as MiniviewComponent,Zs as PaletteComponent,Gc as PieChartComponent,Hc as SankeyChartComponent,Lc as ScatterChartComponent,Is as ShapeComponent,Ds as ShapePaletteComponent,ci as SurfaceComponent,E as SurfaceContext,ta as SurfaceProvider,lu as TiledImageBackgroundComponent,se as VisuallyJsContext,Ta as VisuallyJsProvider,jc as XYChartComponent,Ze as createDiagramRef,Le as createInspectorRef,Q as createRefHandler,K as createSurfaceRef,ae as getSurfaceComponent,Ue as newInstance,Be as registerSurface,_i as useDiagram,le as useInspector,Ge as useSurface,Na as useVisuallyJsModel,mu as useZoom};