@visuallyjs/browser-ui-react 1.2.7 → 1.2.8

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.
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@visuallyjs/browser-ui-react","version":"1.2.7","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.2.7"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
1
+ {"name":"@visuallyjs/browser-ui-react","version":"1.2.8","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.2.8"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
@@ -1 +1 @@
1
- var Yt=Object.create;var Ge=Object.defineProperty;var Zt=Object.getOwnPropertyDescriptor;var Kt=Object.getOwnPropertyNames,ht=Object.getOwnPropertySymbols,qt=Object.getPrototypeOf,Rt=Object.prototype.hasOwnProperty,Qt=Object.prototype.propertyIsEnumerable;var bt=(e,r,t)=>r in e?Ge(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,it=(e,r)=>{for(var t in r||(r={}))Rt.call(r,t)&&bt(e,t,r[t]);if(ht)for(var t of ht(r))Qt.call(r,t)&&bt(e,t,r[t]);return e};var er=(e,r)=>{for(var t in r)Ge(e,t,{get:r[t],enumerable:!0})},vt=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Kt(r))!Rt.call(e,a)&&a!==t&&Ge(e,a,{get:()=>r[a],enumerable:!(n=Zt(r,a))||n.enumerable});return e};var A=(e,r,t)=>(t=e!=null?Yt(qt(e)):{},vt(r||!e||!e.__esModule?Ge(t,"default",{value:e,enumerable:!0}):t,e)),tr=e=>vt(Ge({},"__esModule",{value:!0}),e);var Lr={};er(Lr,{ATTRIBUTE_CAN_REDO:()=>Pt,ATTRIBUTE_CAN_UNDO:()=>yt,AreaChartComponent:()=>Nr,BackgroundComponent:()=>at,BarChartComponent:()=>Dr,BrowserUIReactModel:()=>Ce,BubbleChartComponent:()=>Vr,CLASS_REACT_GROUP:()=>Je,CLASS_REACT_NODE:()=>We,CLASS_REACT_OVERLAY:()=>Le,CLASS_SELECTED_MODE:()=>ot,ColorPickerComponent:()=>br,ColumnChartComponent:()=>vr,ControlsComponent:()=>yr,DEFAULT_SHAPE_HEIGHT:()=>Bt,DEFAULT_SHAPE_WIDTH:()=>It,DecoratorComponent:()=>Ot,DiagramComponent:()=>lr,DiagramContext:()=>X,DiagramPaletteComponent:()=>Rr,DiagramProvider:()=>ir,EdgePropertyMappingsInspector:()=>pr,EdgeTypePickerComponent:()=>dt,ExportControlsComponent:()=>Pr,GaugeChartComponent:()=>Mr,GridBackgroundComponent:()=>Br,ImageBackgroundComponent:()=>jr,InspectorComponent:()=>xr,InspectorContext:()=>Fe,JSXWrapper:()=>$e,LineChartComponent:()=>_r,MiniviewComponent:()=>Cr,PaletteComponent:()=>hr,PaperComponent:()=>gr,PaperContext:()=>le,PaperProvider:()=>ar,PieChartComponent:()=>Ar,SankeyChartComponent:()=>Ir,ScatterChartComponent:()=>wr,ShapeComponent:()=>Sr,ShapePaletteComponent:()=>Or,ShapePropertiesInspector:()=>Er,SurfaceComponent:()=>dr,SurfaceContext:()=>B,SurfacePopup:()=>_t,SurfaceProvider:()=>nr,TiledImageBackgroundComponent:()=>Ur,VisuallyJsContext:()=>Re,VisuallyJsProvider:()=>sr,XYChartComponent:()=>Tr,createDiagramRef:()=>mt,createInspectorRef:()=>ut,createPaperRef:()=>Ke,createRefHandler:()=>xe,createSurfaceRef:()=>Te,getSurfaceComponent:()=>or,newInstance:()=>ct,registerSurface:()=>st,useDiagram:()=>be,useInspector:()=>fe,usePaper:()=>pt,useSurface:()=>$,useVisuallyJsModel:()=>ft,useVisuallyJsUpdate:()=>Gr,useZoom:()=>kr});module.exports=tr(Lr);var lt=require("@visuallyjs/browser-ui"),Dt=new Map,ke={};function st(e,r){Dt.set(e,r),rr(e,r)}function rr(e,r){(ke[e]||[]).forEach(n=>{try{n(r)}catch(a){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete ke[e]}function or(e,r){let t=Dt.get(e);if(t)try{r(t)}catch(n){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else ke[e]=ke[e]||[],ke[e].push(r)}var We="vjs-react-node",Je="vjs-react-group",Le="vjs-react-overlay";var he=A(require("react"));function $e(e){let r=(0,he.useRef)(!1);return(0,he.useEffect)(()=>{r.current||(r.current=!0,e.cb(e.ns))}),he.default.createElement(he.default.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,vertex:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}var Xe=require("@visuallyjs/browser-ui"),Ce=class extends Xe.BrowserUIModel{render(r,t){return(0,Xe.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function ct(e){return e=e||{},new Ce(e)}var K=A(require("react")),B=(0,K.createContext)(null);function nr(e){let r=(0,K.useRef)(null),t=Te(r);return K.default.createElement(B.Provider,{value:t},e.children||[])}function Te(e){return xe(e)}function xe(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)},ref:()=>e}}function $(){let e=(0,K.useContext)(B),[r,t]=(0,K.useState)(null);return(0,K.useEffect)(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var Ye=require("react"),Fe=(0,Ye.createContext)(null);function ut(e){return xe(e)}function fe(){let e=(0,Ye.useContext)(Fe);return e==null?null:e.ref().current}var ye=A(require("react")),Ze=require("@visuallyjs/browser-ui");function dt(e){let r=(0,ye.useRef)(!1),t=(0,ye.useRef)(null),n=(0,ye.useRef)(null),a=fe(),{propertyName:i}=e,l=()=>a.getFromContext(Ze.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||a.$ui.$getEdgePropertyMappings();return(0,ye.useEffect)(()=>{r.current||(r.current=!0,n.current=new Ze.EdgeTypePicker(a.$ui,t.current,l(),a.getValue(i),(o,s)=>{a.setValue(i,s,null)}),n.current.render(i,a.rt),a.onChange(()=>{n.current.reset(),n.current.select(i,a.getValue(i))}))}),ye.default.createElement("div",{ref:t})}var q=A(require("react")),le=(0,q.createContext)(null);function ar(e){let r=(0,q.useRef)(null),t=Ke(r);return q.default.createElement(le.Provider,{value:t},e.children||[])}function Ke(e){return xe(e)}function pt(){let e=(0,q.useContext)(le),[r,t]=(0,q.useState)(null);return(0,q.useEffect)(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var w=A(require("react")),Tt=require("@visuallyjs/browser-ui"),X=(0,w.createContext)(null);function mt(e){return xe(e)}function ir(e){let r=(0,w.useRef)(null),t=mt(r);return w.default.createElement(X.Provider,{value:t},e.children||[])}function be(){let e=(0,w.useContext)(X),[r,t]=(0,w.useState)(null);return(0,w.useEffect)(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var lr=(0,w.forwardRef)((e,r)=>{let t=(0,w.useRef)(null),n=(0,w.useRef)(!1),a,i,l=(0,w.useContext)(X);l==null?(a=(0,w.useRef)(null),l=mt(a)):a=l.ref();let o=(0,w.useContext)(B);o==null?(i=(0,w.useRef)(null),o=Te(i)):i=o.ref();let s={getDiagram:()=>a.current};(0,w.useImperativeHandle)(r,()=>s),(0,w.useEffect)(()=>{n.current||(n.current=!0,a.current=(0,Tt.createDiagram)(t.current,e.options,e.modelOptions),i.current=a.current.$ui,e.data?a.current.load({data:e.data}):e.url&&a.current.load({url:e.url}),l.set(a.current),o.set(i.current))});let m=`${e.className||""} vjs-react-diagram`,y=e.style||{};return w.default.createElement("div",{ref:t,className:m,style:y},w.default.createElement(B.Provider,{value:o},w.default.createElement(X.Provider,{value:l},e.children)))});var H=A(require("react")),Re=(0,H.createContext)(void 0);function sr(e){let r=(0,H.useMemo)(()=>ct(e.modelOptions||{}),[]);function t(a,i){r.clear(),r.load({data:a,dataType:i})}function n(a,i){r.clear(),r.load({url:a,dataType:i})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),(0,H.useEffect)(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),(0,H.useEffect)(()=>{e.url!=null&&n(e.url,e.dataType)},[e.url]),H.default.createElement(Re.Provider,{value:r},e.children||[])}function ft(){let e=(0,H.useContext)(Re),r=(0,H.useContext)(B),t=(0,H.useContext)(le),n=(0,H.useContext)(X),[a,i]=(0,H.useState)(e);return(0,H.useEffect)(()=>{if(e){i(e);return}let l;r!=null&&(r.ref().current?i(r.ref().current.model):(l=m=>{i(m.model)},r.listen(l)));let o;t!=null&&(t.ref().current?a==null&&i(t.ref().current.model):(o=m=>{a==null&&i(m.model)},t.listen(o)));let s;n!=null&&(n.ref().current?a==null&&i(n.ref().current.model):(s=m=>{a==null&&i(m.model)},n.listen(s)))}),a}var Et=A(require("react")),Q=require("@visuallyjs/browser-ui");function cr(e,r){if(e.hydrated!==!0){let t=(0,Q.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Q.addClass)(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function qe(e,r,t,n){return Et.default.createElement($e,{ns:e,model:r,ui:t.current,childProps:n,cb:a=>{cr(a,t)}})}function Qe(e,r,t,n){return Et.default.createElement($e,{ns:e,model:r,ui:t.current,childProps:n,cb:a=>{ur(a,t)}})}function ur(e,r){if(e.hydrated!==!0){let t=(0,Q.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&((0,Q.addClass)(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(Q.ATTRIBUTE_NOT_DRAGGABLE)===Q.TRUE&&e.domElement.setAttribute(Q.ATTRIBUTE_NOT_DRAGGABLE,Q.TRUE)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}var T=A(require("react")),gt=A(require("react-dom")),g=require("@visuallyjs/browser-ui"),dr=(0,T.forwardRef)((e,r)=>{let t=(0,T.useRef)(!1),n=(0,T.useRef)(!1),a=(0,T.useContext)(Re),i=(0,T.useRef)(null),l=(0,T.useRef)(null),o=(0,T.useRef)(a),s,m=(0,T.useContext)(B);m==null?(s=(0,T.useRef)(null),m=Te(s)):s=m.ref();let[y,x]=(0,T.useState)([]),[p,h]=(0,T.useState)([]),O=[],S=[];function F(){x(O.slice())}function W(){h(S.slice())}let Z={getSurface:()=>s.current,getModel:()=>o.current};(0,T.useImperativeHandle)(r,()=>Z),(0,T.useEffect)(()=>{var b;if(!n.current){n.current=!0,e.model!=null?o.current=e.model:a==null?o.current=new Ce(e.modelOptions||{}):o.current=a,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",i.current.appendChild(l.current));let ne=(c,d,R,M,E,v,V,me)=>{let[D,U]=v.component||v.jsx?[v,null]:(0,g.isGroup)(V)?[Object.assign(Object.assign({},v),{jsx:z=>T.default.createElement(T.default.Fragment,null,z.obj.data.label)}),g.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},v),{jsx:z=>T.default.createElement(T.default.Fragment,null,z.obj.data.label)}),g.CLASS_DEFAULT_NODE],J=E.containerType===g.ElementTypes.HTML?document.createElement(g.ELEMENT_DIV):(0,g.$svgNode)(g.ELEMENT_SVG);l.current.appendChild(J),U!=null&&E.$addClassToElement(J,U);let De={data:d,model:R,ui:E,componentId:V.getFullId(),obj:V,props:e.childProps,element:J,eventInfo:me};O.push({data:d,def:D,payload:De,domElement:J,key:V.id,obj:V,hydrated:!1}),F()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},Pe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,R,M)=>{},render:ne,rerender:(c,d,R,M,E,v,V,me,D)=>{let U=(0,g.partition)(O,J=>J.obj!==V);O=U.left,F(),ne(c,d,R,M,E,v,V,me),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(R=>R.jsx!=null?{type:g.OVERLAY_TYPE_CUSTOM,options:{create:E=>{let v=document.createElement(g.ELEMENT_DIV);v.className=Le;let V={data:E.edge.data,model:o.current,ui:pe,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:v};return S.push({def:{jsx:R.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:v,key:(0,g.uuid)(),hydrated:!1}),W(),v}}}:R))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),pe=(0,g.renderSurface)(o.current,i.current,Pe,Oe);m.set(pe),e.surfaceId!=null&&st(e.surfaceId,Z);let ge=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,g.extend)(d.originalData,d.updates)),E},M=O.find(E=>E.key===c);M!=null&&(M.data=R(),F())},Se=c=>{O=O.filter(d=>d.payload.componentId!==c),F()},je=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,g.extend)(d.originalData,d.updates)),E},M=S.find(E=>E.obj.id===c);M!=null&&(M.data=R(),W())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),W()};o.current.bind(g.EVENT_NODE_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),o.current.bind(g.EVENT_GROUP_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),o.current.bind(g.EVENT_NODE_REMOVED,c=>{Se(c.node.id)}),o.current.bind(g.EVENT_GROUP_REMOVED,c=>{Se(c.group.id)}),o.current.bind(g.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),o.current.bind(g.EVENT_EDGE_UPDATED,c=>{je(c.edge.id,c)}),o.current.bind(g.EVENT_GRAPH_CLEARED,()=>{O=[],F(),S=[],W()})}}),(0,T.useEffect)(()=>{n.current&&o.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,o.current.clear(),o.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-surface`,j=e.style||{};return T.default.createElement("div",{ref:i,className:ce,style:j},y.map(b=>gt.createPortal(Qe(b,o.current,s,e.childProps),b.domElement,b.key)),p.map(b=>gt.createPortal(qe(b,o.current,s,e.childProps),b.domElement,b.key)),T.default.createElement(B.Provider,{value:m},e.children))});var Y=A(require("react")),et=require("@visuallyjs/browser-ui");function _t(e){let r=$(),t=(0,Y.useRef)(null),n=(0,Y.useRef)(!1),a=(0,Y.useRef)(null),[i,l]=(0,Y.useState)(null),[o,s]=(0,Y.useState)(0),m=(0,Y.useMemo)(()=>i==null?"none":"block",[i]);function y(p){l(p),s(h=>h+1)}(0,Y.useEffect)(()=>{!n.current&&r&&(n.current=!0,a.current=new et.PopupHandler(e.selector,t.current,r,p=>y(p),e.anchor))});function x(){a.current&&a.current.$hide()}return Y.default.createElement("div",{ref:t,className:et.CLASS_SURFACE_POPUP,style:{display:m,position:"absolute"}},i!=null&&e.children(i,r.model,r,()=>x()))}var _e=A(require("react")),Nt=require("@visuallyjs/browser-ui");function pr(e){let r=fe(),t=e.cssClass||"vjs-inspector-section",n=()=>e.mappings?e.mappings:r.getFromContext(Nt.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||r.$ui.$getEdgePropertyMappings();function a(o){let s=o.property;return Array.isArray(s)?s:[s]}function i(o){return a(o).join(" ")}function l(o){return e.getPropertyName?e.getPropertyName(o):o.name||i(o)}return _e.default.createElement(_e.default.Fragment,null,n().map(o=>{let s=i(o),m=l(o);return _e.default.createElement("div",{className:t,key:s},e.showName!==!1&&_e.default.createElement("div",null,m),_e.default.createElement(dt,{propertyName:s}))}))}var P=A(require("react")),He=require("@visuallyjs/browser-ui"),mr=7,fr=["True","False"];function tt(e,r){return(e.booleanLabels||fr)[r?0:1]}function Ne(e){return(0,He.isString)(e)?e:e.label}function Ct(e){return(0,He.isString)(e)?e:e.value}function Er({vertex:e,maxRadios:r}){if(!e||!(0,He.isNode)(e))return null;let{type:t,category:n}=e.data;if(!t||!n)return null;r=r==null?mr:r;let a=fe();function i(){if(a==null)return null;let s=a.$ui.getShapeLibrary().getShapeSet(n);return s?s.shapes.find(m=>m.type===t):null}let l=i();return!l||!l.properties?null:P.default.createElement(P.default.Fragment,null,l.properties.map(o=>{let s=o.type==="boolean",m=o.values&&o.values.length>0,y=m&&o.editor!=="select"&&o.values.length<=r;return P.default.createElement("div",{key:o.id,className:"vjs-inspector-field"},(!s||o.editor==="select"||o.editor==="radio")&&P.default.createElement("label",{className:"vjs-inspector-property-label"},o.label||o.id),o.type==="string"&&(m?y?P.default.createElement("div",{className:"vjs-radio-group"},o.values.map(x=>P.default.createElement("label",{key:Ne(x)},P.default.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,value:Ct(x)})," ",Ne(x)))):P.default.createElement("select",{"vjs-att":o.id},o.values.map(x=>P.default.createElement("option",{key:x.value,value:x.value},x.label))):P.default.createElement("input",{type:"text","vjs-att":o.id,placeholder:o.description})),o.type==="number"&&(m?y?P.default.createElement("div",{className:"vjs-radio-group"},o.values.map(x=>P.default.createElement("label",{key:Ne(x)},P.default.createElement("input",{type:"radio","vjs-att":o.id,value:Ct(x)})," ",Ne(x)))):P.default.createElement("select",{"vjs-att":o.id},o.values.map(x=>P.default.createElement("option",{key:Ne(x),value:Ct(x)},Ne(x)))):P.default.createElement("input",{type:"number","vjs-att":o.id,placeholder:o.description,min:o.min,max:o.max})),s&&(o.editor==="select"?P.default.createElement("select",{"vjs-att":o.id,"vjs-datatype":"boolean"},P.default.createElement("option",{value:""}),P.default.createElement("option",{value:"true"},tt(o,!0)),P.default.createElement("option",{value:"false"},tt(o,!1))):o.editor==="radio"?P.default.createElement("div",{className:"vjs-radio-group"},P.default.createElement("label",null,P.default.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,"vjs-datatype":"boolean",value:"true"}),P.default.createElement("span",null,tt(o,!0))),P.default.createElement("label",null,P.default.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,"vjs-datatype":"boolean",value:"false"}),P.default.createElement("span",null,tt(o,!1)))):P.default.createElement("label",null,P.default.createElement("input",{type:"checkbox","vjs-datatype":"boolean","vjs-att":o.id})," ",o.label||o.id)),["string","number","boolean"].indexOf(o.type)===-1&&P.default.createElement("input",{type:"text","vjs-att":o.id,placeholder:o.description}),o.description&&P.default.createElement("div",{className:"vjs-field-desc"},o.description))}))}var _=A(require("react")),xt=A(require("react-dom")),C=require("@visuallyjs/browser-ui"),gr=(0,_.forwardRef)((e,r)=>{let t=(0,_.useRef)(!1),n=(0,_.useRef)(!1),a=(0,_.useContext)(Re),i=(0,_.useRef)(null),l=(0,_.useRef)(null),o=(0,_.useRef)(null),s,m=(0,_.useContext)(le);m==null?(s=(0,_.useRef)(null),m=Ke(s)):s=m.ref();let[y,x]=(0,_.useState)([]),[p,h]=(0,_.useState)([]),O=[],S=[];function F(){x(O.slice())}function W(){h(S.slice())}let Z={getPaper:()=>s.current,getModel:()=>o.current};(0,_.useImperativeHandle)(r,()=>Z),(0,_.useEffect)(()=>{var b;if(!n.current){n.current=!0,e.model!=null?o.current=e.model:a==null?o.current=new Ce(e.modelOptions||{}):o.current=a,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",i.current.appendChild(l.current));let ne=(c,d,R,M,E,v,V,me)=>{let[D,U]=v.component||v.jsx?[v,null]:(0,C.isGroup)(V)?[Object.assign(Object.assign({},v),{jsx:z=>_.default.createElement(_.default.Fragment,null,z.obj.data.label)}),C.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},v),{jsx:z=>_.default.createElement(_.default.Fragment,null,z.obj.data.label)}),C.CLASS_DEFAULT_NODE],J=E.containerType===C.ElementTypes.HTML?document.createElement(C.ELEMENT_DIV):(0,C.$svgNode)(C.ELEMENT_SVG);l.current.appendChild(J),U!=null&&E.$addClassToElement(J,U);let De={data:d,model:R,ui:E,componentId:V.getFullId(),obj:V,props:e.childProps,element:J,eventInfo:me};O.push({data:d,def:D,payload:De,domElement:J,key:V.id,obj:V,hydrated:!1}),F()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},Pe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,R,M)=>{},render:ne,rerender:(c,d,R,M,E,v,V,me,D)=>{let U=(0,C.partition)(O,J=>J.obj!==V);O=U.left,F(),ne(c,d,R,M,E,v,V,me),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(R=>R.jsx!=null?{type:C.OVERLAY_TYPE_CUSTOM,options:{create:E=>{let v=document.createElement(C.ELEMENT_DIV);v.className=Le;let V={data:E.edge.data,model:o.current,ui:pe,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:v};return S.push({def:{jsx:R.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:v,key:(0,C.uuid)(),hydrated:!1}),W(),v}}}:R))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),pe=(0,C.renderPaper)(o.current,i.current,Pe,Oe);m.set(pe);let ge=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,C.extend)(d.originalData,d.updates)),E},M=O.find(E=>E.key===c);M!=null&&(M.data=R(),F())},Se=c=>{O=O.filter(d=>d.payload.componentId!==c),F()},je=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,C.extend)(d.originalData,d.updates)),E},M=S.find(E=>E.obj.id===c);M!=null&&(M.data=R(),W())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),W()};o.current.bind(C.EVENT_NODE_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),o.current.bind(C.EVENT_GROUP_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),o.current.bind(C.EVENT_NODE_REMOVED,c=>{Se(c.node.id)}),o.current.bind(C.EVENT_GROUP_REMOVED,c=>{Se(c.group.id)}),o.current.bind(C.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),o.current.bind(C.EVENT_EDGE_UPDATED,c=>{je(c.edge.id,c)}),o.current.bind(C.EVENT_GRAPH_CLEARED,()=>{O=[],F(),S=[],W()})}}),(0,_.useEffect)(()=>{n.current&&o.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,o.current.clear(),o.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-paper`,j=e.style||{};return _.default.createElement("div",{ref:i,className:ce,style:j},y.map(b=>xt.createPortal(Qe(b,o.current,s,e.childProps),b.domElement,b.key)),p.map(b=>xt.createPortal(qe(b,o.current,s,e.childProps),b.domElement,b.key)),_.default.createElement(le.Provider,{value:m},e.children))});var rt=require("@visuallyjs/browser-ui"),ae=A(require("react")),Cr=(0,ae.forwardRef)((e,r)=>{let t=$(),n=be(),a=(0,ae.useRef)(!1),i=(0,ae.useRef)(null),l;(0,ae.useImperativeHandle)(r,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function o(s){s.addPlugin({type:rt.MiniviewPlugin.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return(0,ae.useEffect)(()=>{a.current||(t!=null?(a.current=!0,o(t)):n!=null&&n.$ui instanceof rt.Surface&&(a.current=!0,o(n.$ui)))},[t,n]),ae.default.createElement("div",{ref:i,className:`${e.className||""}`})});var Ae=require("@visuallyjs/browser-ui"),N=A(require("react")),xr=(0,N.forwardRef)((e,r)=>{let t=(0,N.useContext)(B),n=(0,N.useContext)(X),a=(0,N.useContext)(le),i,l=(0,N.useContext)(Fe);l==null&&(i=(0,N.useRef)(null),l=ut(i));let[o,s]=(0,N.useState)(null),[m,y]=(0,N.useState)(0),[x,p]=(0,N.useState)(null),h=(0,N.useRef)(!1),O=(0,N.useRef)(null),S=e.className||"";(0,N.useEffect)(()=>{var j;(j=i==null?void 0:i.current)==null||j.$refresh()},[m]);let F=e.onSelectionCleared||(()=>s(null)),W=(j,b)=>{s(j),e.refresh&&e.refresh(j),y(ne=>ne+1)};function Z(j){i.current=new Ae.Inspector({container:O.current,ui:j,renderEmptyContainer:F,refresh:W,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(j):null}),p(i.current)}let ce={getInspector:()=>x};return(0,N.useImperativeHandle)(r,()=>ce),(0,N.useEffect)(()=>{h.current||(h.current=!0,t!=null?t.listen(Z):a!=null?a.listen(Z):n!=null?n.listen(j=>{j.$ui instanceof Ae.Surface&&Z(j.$ui)}):(0,Ae.log)("WARN: InspectorComponent cannot resolve a ui to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),N.default.createElement("div",{ref:O,className:S},N.default.createElement(Fe.Provider,{value:l},o!=null&&N.default.createElement(N.default.Fragment,null,typeof e.children=="function"?e.children(o,i.current.$ui.model):e.children||[]),o==null&&N.default.createElement(N.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var ll="group:added",sl="group:member:added",cl="group:member:removed",ul="group:removed",dl="dataLoadStart",pl="dataAppendStart",ml="dataLoadEnd",fl="dataAppendEnd",El="dataUpdated",gl="graphClearStart",Cl="graphCleared",xl="graphChanged",yl="group:updated",Pl="node:updated",Ol="port:updated",Sl="edge:updated",hl="edge:added",bl="node:added",Rl="edge:removed",vl="node:removed",Dl="port:added",Tl="port:removed",_l="edge:target",Nl="edge:source",At="select",wt="deselect",Vt="selection:cleared",Al="edge:geometry",wl="edge:pathEdited",Vl="edge:dragStart",Ml="edge:drag",Il="edge:dragEnd",Bl="edge:dragAbort",jl="edge:typeChanged",Ul="node:typeChanged",Gl="port:typeChanged",kl="group:typeChanged",Ll="group:move:start",Fl="group:move",Hl="group:move:end",zl="internal:group:sizeChanged",Wl="internal:group:sizeChangedRedo",Jl="internal:group:sizeChangedUndo",$l="internal:edge:redraw",Xl="renderer:added",Yl="node:move:start",Zl="node:move",Kl="node:move:end",ql="node:move:abort",Ql="undoredo:update",es="undo",ts="redo",rs="destroy";var f=A(require("react")),u=require("@visuallyjs/browser-ui"),yt="can-undo",Pt="can-redo",ot="vjs-selected-mode",Mt="vjs-controls-has-selection";function yr(e){let r="Clear selection",t=$(),n=be(),[a,i]=(0,f.useState)("row"),[l,o]=(0,f.useState)(!1),[s,m]=(0,f.useState)(!1),y=(0,f.useRef)(null),x=(0,f.useRef)(!1),p=(0,f.useRef)(null),[h,O]=(0,f.useState)("Clear dataset?"),S=(0,f.useRef)(null),[F,W]=(0,f.useState)(!0),[Z,ce]=(0,f.useState)(!1),[j,b]=(0,f.useState)(!0),[ne,ue]=(0,f.useState)(!0),[Pe,de]=(0,f.useState)([]),[Oe,pe]=(0,f.useState)([]);function ge(D){p.current=D,e.clearMessage&&O(e.clearMessage),e.onMaybeClear&&(S.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&b(!1),e.zoomToExtents===!1&&W(!1),e.zoomButtons===!0&&ce(!0),e.clear===!1&&ue(!1);let U=(e.buttons||[]).filter(z=>z.mode!=null);de(U);let J=(e.buttons||[]).filter(z=>z.mode==null);pe(J),D.bind(u.EVENT_SURFACE_MODE_CHANGED,z=>{D.removeClass(D.$getSelector(y.current,"[data-mode]"),ot),D.addClass(D.$getSelector(y.current,"[data-mode='"+z+"']"),ot)}),D.model.bind(u.EVENT_UNDOREDO_UPDATE,z=>{y.current.setAttribute(yt,z.undoCount>0?u.TRUE:u.FALSE),y.current.setAttribute(Pt,z.redoCount>0?u.TRUE:u.FALSE)}),D.model.bind(At,V),D.model.bind(wt,V),D.model.bind(Vt,V);let De=D.getPlugin(u.LassoPlugin.type);o(De!=null),m(De!=null||U.length>0),y.current.setAttribute(yt,u.FALSE),y.current.setAttribute(Pt,u.FALSE)}function Se(){p.current.model.clearSelection(),p.current.zoomToFit()}function je(){p.current.zoomIn()}function Ue(){p.current.zoomOut()}function c(){p.current.setMode(u.SURFACE_MODE_PAN)}function d(){p.current.setMode(u.SURFACE_MODE_SELECT)}function R(){p.current.model.clearSelection(),(0,u.supportsPathEditing)(p.current)&&p.current.stopEditingPath()}function M(){S.current!=null?S.current(()=>p.current.model.clear()):window.confirm(h)&&p.current.model.clear()}function E(){p.current.model.undo()}function v(){p.current.model.redo()}let V=()=>{p.current.model.getSelection().isEmpty()?y.current.removeAttribute(Mt):y.current.setAttribute(Mt,"true")};(0,f.useEffect)(()=>{x.current===!1&&(t!=null?(x.current=!0,ge(t)):n!=null&&n.$ui instanceof u.Surface&&(x.current=!0,ge(n.$ui)))},[t,n]);let me=e.style||{};return f.default.createElement("div",{style:me,ref:y,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&f.default.createElement("i",{className:"vjs-pan-mode "+ot,"data-mode":u.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>c()},f.default.createElement("svg",{fill:"none",viewBox:u.PAN_VIEW_BOX,stroke:"currentColor"},f.default.createElement("path",{d:u.PAN_PATH}))),l&&f.default.createElement("i",{className:"vjs-select-mode","data-mode":u.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>d()},f.default.createElement("svg",{fill:"currentColor",viewBox:u.LASSO_VIEW_BOX,stroke:"currentColor"},f.default.createElement("path",{d:u.LASSO_PATH}))),Pe.map(D=>f.default.createElement("i",{className:D.class,title:D.title,onClick:U=>D.handler(U,D.id)})),F&&f.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Se()},f.default.createElement("svg",{viewBox:u.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_TO_FIT_PATH}))),Z&&f.default.createElement(f.default.Fragment,null,f.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>je()},f.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_IN_PATH}))),f.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>Ue()},f.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_OUT_PATH})))),j&&f.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()},f.default.createElement("svg",{viewBox:u.UNDO_VIEW_BOX,stroke:"currentColor",fill:"none"},f.default.createElement("path",{d:u.UNDO_PATH,strokeWidth:"2"}))),j&&f.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>v()},f.default.createElement("svg",{viewBox:u.REDO_VIEW_BOX,stroke:"currentColor",fill:"none"},f.default.createElement("path",{d:u.REDO_PATH,strokeWidth:"2"}))),f.default.createElement("i",{className:u.CLASS_CONTROLS_RESET_SELECTION,title:r,onClick:()=>R()},f.default.createElement("svg",{viewBox:u.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.RESET_SELECTION_PATH}))),ne&&f.default.createElement("i",{className:"vjs-clear-dataset",title:h,onClick:()=>M()},f.default.createElement("svg",{viewBox:u.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.CLEAR_PATH}))),Oe.map(D=>f.default.createElement("i",{className:D.class,title:D.title,onClick:U=>D.handler(U,D.id)})))}var I=A(require("react")),ie=require("@visuallyjs/browser-ui");function Pr(e){let r=(0,I.useRef)(!1),t=(0,I.useRef)(null),n=$(),a=be(),[i,l]=(0,I.useState)(!0),[o,s]=(0,I.useState)("Export :"),[m,y]=(0,I.useState)(null),[x,p]=(0,I.useState)(null),[h,O]=(0,I.useState)(null),[S,F]=(0,I.useState)(!0),[W,Z]=(0,I.useState)(!0),[ce,j]=(0,I.useState)(!0);function b(de){t.current=de,e.label&&s(o),e.showLabel!=null&&l(e.showLabel),e.margins&&y(e.margins);let Oe=e.svgOptions||{};p(Oe);let pe=e.imageOptions||{};O(pe),e.allowJpgExport!=null&&j(e.allowJpgExport),e.allowPngExport!=null&&Z(e.allowPngExport),e.allowSvgExport!=null&&F(e.allowSvgExport)}function ne(){new ie.SvgExportUI(t.current).export(x)}function ue(){new ie.ImageExportUI(t.current).export(h)}function Pe(){new ie.ImageExportUI(t.current).export(Object.assign(h||{},{type:"image/jpeg"}))}return(0,I.useEffect)(()=>{r.current===!1&&(n!=null?(r.current=!0,b(n)):a!=null&&a.$ui instanceof ie.Surface&&(r.current=!0,b(a.$ui)))},[n,a]),I.default.createElement("div",{className:`${ie.CLASS_CONTROLS} ${ie.CLASS_EXPORT_CONTROLS}`},i&&I.default.createElement("span",null,o),S&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>ne()},"SVG")),W&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>ue()},"PNG")),ce&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Pe()},"JPG")))}var ee=A(require("react")),ze=require("@visuallyjs/browser-ui"),Or=(0,ee.forwardRef)((e,r)=>{let t=(0,ee.useRef)(!1),n=(0,ee.useRef)(null),a=(0,ee.useContext)(B),i=(0,ee.useRef)(null),l=e.className||"";function o(s){s.getShapeLibrary()!=null?i.current=new ze.ShapePalette(s,{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,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap,preparedShapes:e.preparedShapes,allowDropOnEdge:e.allowDropOnEdge,showGroups:e.showGroups!==!1}):(0,ze.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,ee.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>o(s)):e.surface!=null?o(e.surface):(0,ze.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),ee.default.createElement("div",{ref:n,className:l})});var we=A(require("react")),Ve=require("@visuallyjs/browser-ui"),It=120,Bt=90;function Sr(e){let r=(0,we.useRef)(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function a(){return e.ctx.obj.data.outline||"#000000"}function i(){return e.ctx.obj.data.width||It}function l(){return e.ctx.obj.data.height||Bt}function o(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return(0,we.useEffect)(()=>{let m=e.ctx.obj.data,y=e.ctx.ui.getShapeLibrary(),x=y.renderCompiledShape(m);if(r.current.replaceChildren(x),e.showLabels){let p=y.renderShapeLabel(m,s(),e.labelStrokeWidth,null,o(),o(),e.font);r.current.appendChild(p),e.multilineLabels!=!1&&(0,Ve.convertToMultilineText)(p,m[s()]||"",i()*(e.labelFillRatio||Ve.DEFAULT_LABEL_FILL_RATIO),e.labelPosition)}}),we.default.createElement("svg",{className:Ve.CLASS_SHAPE,ref:r,strokeWidth:t(),fill:n(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}var te=A(require("react")),Me=require("@visuallyjs/browser-ui"),hr=(0,te.forwardRef)((e,r)=>{let t=(0,te.useRef)(!1),n=(0,te.useRef)(null),a=(0,te.useContext)(B),i=(0,te.useRef)(null),l=e.className||"";function o(s){let m={selector:e.selector,source:n.current,dataGenerator:y=>e.dataGenerator?e.dataGenerator(y):(0,Me.defaultDataGenerator)(y),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};i.current=new Me.Palette(s,m)}return(0,te.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>o(s)):e.surface!=null?o(e.surface):(0,Me.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),te.default.createElement("div",{className:l,ref:n},e.children)});var re=A(require("react")),L=require("@visuallyjs/browser-ui");function br(e){let r=e.maxColors||10,t=(0,re.useRef)(null),n=(0,re.useRef)(!1),a=fe(),[i,l]=(0,re.useState)(a.ensureContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function o(p){let h=a.ensureContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(p=p.toUpperCase(),!(h.find(S=>S.toUpperCase()===p)!=null)){let S=h.slice();S.unshift(p),S.length>r&&(S.length=r),a.updateContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,S)}}function s(){let p=t.current.value;a.setValue(e.propertyName,p,null),o(p)}function m(p){a.setValue(e.propertyName,p,null),t.current.value=p}let y=p=>{p.key===L.INSPECTOR_CONTEXT_RECENT_COLORS&&l(p.value.slice())};function x(){let p=a.getValue(e.propertyName);p!=null&&t.current&&o(p)}return(0,re.useEffect)(()=>(a.bind(L.EVENT_CONTEXT_UPDATE,y),a.bind(L.EVENT_CHANGE,x),n.current||(n.current=!0,t.current.addEventListener(L.EVENT_CHANGE,s)),setTimeout(x),()=>{a.unbind(L.EVENT_CONTEXT_UPDATE,y),a.unbind(L.EVENT_CHANGE,x)})),re.default.createElement("div",{className:L.CLASS_COLOR_PICKER},re.default.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),re.default.createElement("div",{className:L.CLASS_COLOR_PICKER_SWATCHES},i.map(p=>re.default.createElement("div",{key:p,title:p,className:L.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:p},"data-color":p,onClick:()=>m(p)}))))}var oe=A(require("react")),nt=require("@visuallyjs/browser-ui"),Rr=(0,oe.forwardRef)((e,r)=>{let t=(0,oe.useRef)(!1),n=(0,oe.useRef)(null),a=(0,oe.useContext)(X),i=(0,oe.useRef)(null),l=e.className||"";function o(m){i.current=new nt.DiagramPalette(n.current,m,{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,allowDropOnEdge:e.allowDropOnEdge,autoEdgeConnect:e.autoEdgeConnect,showGroups:e.showGroups!==!1,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap})}(0,oe.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(m=>o(m)):e.diagram!=null?o(e.diagram):(0,nt.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return oe.default.createElement("div",{ref:n,className:l,style:s})});var G=A(require("react"));function k(e){let r=(0,G.useRef)(null),t=(0,G.useRef)(!1),n=(0,G.useRef)(!1),a=(0,G.useRef)(null),i=(0,G.useRef)(null),l=(0,G.useRef)(e);(0,G.useEffect)(()=>{l.current=e});let o=e.style||{},s=(0,G.useContext)(B),m=(0,G.useContext)(X);function y(h){let O=l.current;return Object.assign({dataSource:h,dataSourceFilter:e.dataSourceFilter},e.options)}function x(h){var S;(S=a.current)==null||S.destroy(),i.current=h;let O=y(h);a.current=l.current.createChart(r.current,O),n.current=!0}function p(){var O;(O=a.current)==null||O.destroy(),i.current=null;let h=y();a.current=l.current.createChart(r.current,h),l.current.data?a.current.load({data:l.current.data},()=>{n.current=!0}):l.current.url?a.current.load({url:l.current.url},()=>{n.current=!0}):n.current=!0}return(0,G.useEffect)(()=>{t.current||(t.current=!0,s!=null?s.listen(h=>{x(h.model)}):m!=null?m.listen(h=>{x(h.model)}):p())}),e.reactive!==!1&&((0,G.useEffect)(()=>{n.current&&e.data!=null&&a.current&&a.current.load({data:e.data})},[e.data]),(0,G.useEffect)(()=>{n.current&&e.url!=null&&a.current&&a.current.load({url:e.url})},[e.url]),(0,G.useEffect)(()=>{n.current&&e.pivot!=null&&a.current&&a.current.pivot&&a.current.pivot(e.pivot)},[e.pivot]),(0,G.useEffect)(()=>{n.current&&e.dataSourceFilter!=null&&a.current&&a.current.setDataSourceFilter&&a.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter]),(0,G.useEffect)(()=>{n.current&&(i.current?x(i.current):s==null&&m==null&&p())},[e.options])),G.default.createElement("div",{ref:r,style:o,className:`${e.className||""}`})}var jt=require("@visuallyjs/browser-ui");function vr(e){let r=Object.assign({createChart:(t,n)=>new jt.ColumnChart(t,n)},e);return k(r)}var Ut=require("@visuallyjs/browser-ui");function Dr(e){let r=Object.assign({createChart:(t,n)=>new Ut.BarChart(t,n)},e);return k(r)}var Gt=require("@visuallyjs/browser-ui");function Tr(e){let r=Object.assign({createChart:(t,n)=>new Gt.CategoryValueChart(t,n)},e);return k(r)}var kt=require("@visuallyjs/browser-ui");function _r(e){let r=Object.assign({createChart:(t,n)=>new kt.LineChart(t,n)},e);return k(r)}var Lt=require("@visuallyjs/browser-ui");function Nr(e){let r=Object.assign({createChart:(t,n)=>new Lt.AreaChart(t,n)},e);return k(r)}var Ft=require("@visuallyjs/browser-ui");function Ar(e){let r=Object.assign({createChart:(t,n)=>new Ft.PieChart(t,n)},e);return k(r)}var Ht=require("@visuallyjs/browser-ui");function wr(e){let r=Object.assign({createChart:(t,n)=>new Ht.ScatterChart(t,n)},e);return k(r)}var zt=require("@visuallyjs/browser-ui");function Vr(e){let r=Object.assign({createChart:(t,n)=>new zt.BubbleChart(t,n)},e);return k(r)}var Wt=require("@visuallyjs/browser-ui");function Mr(e){let r=Object.assign({createChart:(t,n)=>new Wt.GaugeChart(t,n)},e);return k(r)}var Jt=require("@visuallyjs/browser-ui");function Ir(e){let r=Object.assign({createChart:(t,n)=>new Jt.SankeyChart(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),k(r)}var $t=require("@visuallyjs/browser-ui"),Ee=A(require("react"));function Ot(e){let r=(0,Ee.useRef)(!1),t=(0,Ee.useRef)(null),n=(0,Ee.useContext)(B),a=e.position||{x:0,y:0};function i(l){e.placement==="fixed"?l.fixElement(t.current,a,e.constraints):l.floatElement(t.current,a)}return(0,Ee.useEffect)(()=>{r.current||(r.current=!0,n!=null?n.listen(l=>i(l)):(0,$t.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),Ee.default.createElement("div",{ref:t},e.children)}var se=require("@visuallyjs/browser-ui"),ve=A(require("react"));function at(e){let r=(0,ve.useRef)(!1),t=$();return(0,ve.useEffect)(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:se.BackgroundPlugin.type,options:e})}catch(n){(0,se.log)(`WARN: BackgroundComponent could not mount background ${n}`)}}},[t]),ve.default.createElement(ve.default.Fragment,null)}function Br(e){return at(it({type:se.GeneratedGridBackground.type},e))}function jr(e){return at({type:se.SimpleBackground.type,url:e.url})}function Ur(e){return at(it({type:se.TiledBackground.type},e))}var Xt=require("react"),Ie=require("@visuallyjs/browser-ui");function Gr(e){let r=ft();(0,Xt.useEffect)(()=>{if(r!=null){let t=()=>e(r);return r.bind(Ie.EVENT_DATA_UPDATED,t),r.bind(Ie.EVENT_GRAPH_CLEARED,t),t(),()=>{r.unbind(Ie.EVENT_DATA_UPDATED,t),r.unbind(Ie.EVENT_GRAPH_CLEARED,t)}}},[r])}var Be=require("react"),St=require("@visuallyjs/browser-ui");function kr(e){let r=$(),t=pt(),[n,a]=(0,Be.useState)(e),[i,l]=(0,Be.useState)(()=>(n==null?void 0:n.getZoom())||1);return(0,Be.useEffect)(()=>{if(n!=null){let o=s=>{l(s.zoom)};return n.bind(St.EVENT_ZOOM,o),l(n.getZoom()),()=>{n.unbind(St.EVENT_ZOOM,o)}}},[n]),(0,Be.useEffect)(()=>{r!=null&&a(r),t!=null&&a(t)},[r,t]),i}
1
+ var Zt=Object.create;var Ge=Object.defineProperty;var Kt=Object.getOwnPropertyDescriptor;var qt=Object.getOwnPropertyNames,bt=Object.getOwnPropertySymbols,Qt=Object.getPrototypeOf,vt=Object.prototype.hasOwnProperty,er=Object.prototype.propertyIsEnumerable;var Rt=(e,r,t)=>r in e?Ge(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,it=(e,r)=>{for(var t in r||(r={}))vt.call(r,t)&&Rt(e,t,r[t]);if(bt)for(var t of bt(r))er.call(r,t)&&Rt(e,t,r[t]);return e};var tr=(e,r)=>{for(var t in r)Ge(e,t,{get:r[t],enumerable:!0})},Dt=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of qt(r))!vt.call(e,a)&&a!==t&&Ge(e,a,{get:()=>r[a],enumerable:!(o=Kt(r,a))||o.enumerable});return e};var A=(e,r,t)=>(t=e!=null?Zt(Qt(e)):{},Dt(r||!e||!e.__esModule?Ge(t,"default",{value:e,enumerable:!0}):t,e)),rr=e=>Dt(Ge({},"__esModule",{value:!0}),e);var Fr={};tr(Fr,{ATTRIBUTE_CAN_REDO:()=>Ot,ATTRIBUTE_CAN_UNDO:()=>Pt,AreaChartComponent:()=>Ar,BackgroundComponent:()=>at,BarChartComponent:()=>Tr,BrowserUIReactModel:()=>Ce,BubbleChartComponent:()=>Mr,CLASS_REACT_GROUP:()=>Je,CLASS_REACT_NODE:()=>We,CLASS_REACT_OVERLAY:()=>Le,CLASS_SELECTED_MODE:()=>nt,ColorPickerComponent:()=>Ct,ColumnChartComponent:()=>Dr,ControlsComponent:()=>Or,DEFAULT_SHAPE_HEIGHT:()=>jt,DEFAULT_SHAPE_WIDTH:()=>Bt,DecoratorComponent:()=>St,DiagramComponent:()=>sr,DiagramContext:()=>X,DiagramPaletteComponent:()=>vr,DiagramProvider:()=>lr,EdgePropertyMappingsInspector:()=>mr,EdgeTypePickerComponent:()=>dt,ExportControlsComponent:()=>Sr,GaugeChartComponent:()=>Ir,GridBackgroundComponent:()=>jr,ImageBackgroundComponent:()=>Ur,InspectorComponent:()=>Pr,InspectorContext:()=>Fe,JSXWrapper:()=>$e,LineChartComponent:()=>Nr,MiniviewComponent:()=>yr,PaletteComponent:()=>Rr,PaperComponent:()=>xr,PaperContext:()=>le,PaperProvider:()=>ir,PieChartComponent:()=>wr,SankeyChartComponent:()=>Br,ScatterChartComponent:()=>Vr,ShapeComponent:()=>br,ShapePaletteComponent:()=>hr,ShapePropertiesInspector:()=>Cr,SurfaceComponent:()=>pr,SurfaceContext:()=>B,SurfacePopup:()=>Nt,SurfaceProvider:()=>ar,TiledImageBackgroundComponent:()=>Gr,VisuallyJsContext:()=>Re,VisuallyJsProvider:()=>cr,XYChartComponent:()=>_r,createDiagramRef:()=>mt,createInspectorRef:()=>ut,createPaperRef:()=>Ke,createRefHandler:()=>xe,createSurfaceRef:()=>Te,getSurfaceComponent:()=>or,newInstance:()=>ct,registerSurface:()=>st,useDiagram:()=>be,useInspector:()=>fe,usePaper:()=>pt,useSurface:()=>$,useVisuallyJsModel:()=>ft,useVisuallyJsUpdate:()=>kr,useZoom:()=>Lr});module.exports=rr(Fr);var lt=require("@visuallyjs/browser-ui"),Tt=new Map,ke={};function st(e,r){Tt.set(e,r),nr(e,r)}function nr(e,r){(ke[e]||[]).forEach(o=>{try{o(r)}catch(a){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete ke[e]}function or(e,r){let t=Tt.get(e);if(t)try{r(t)}catch(o){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}else ke[e]=ke[e]||[],ke[e].push(r)}var We="vjs-react-node",Je="vjs-react-group",Le="vjs-react-overlay";var he=A(require("react"));function $e(e){let r=(0,he.useRef)(!1);return(0,he.useEffect)(()=>{r.current||(r.current=!0,e.cb(e.ns))}),he.default.createElement(he.default.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,vertex:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}var Xe=require("@visuallyjs/browser-ui"),Ce=class extends Xe.BrowserUIModel{render(r,t){return(0,Xe.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function ct(e){return e=e||{},new Ce(e)}var K=A(require("react")),B=(0,K.createContext)(null);function ar(e){let r=(0,K.useRef)(null),t=Te(r);return K.default.createElement(B.Provider,{value:t},e.children||[])}function Te(e){return xe(e)}function xe(e){let r=[];return{set:t=>{e.current=t,r.forEach(o=>o(t))},listen:t=>{e.current==null?r.push(t):t(e.current)},ref:()=>e}}function $(){let e=(0,K.useContext)(B),[r,t]=(0,K.useState)(null);return(0,K.useEffect)(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var Ye=require("react"),Fe=(0,Ye.createContext)(null);function ut(e){return xe(e)}function fe(){let e=(0,Ye.useContext)(Fe);return e==null?null:e.ref().current}var ye=A(require("react")),Ze=require("@visuallyjs/browser-ui");function dt(e){let r=(0,ye.useRef)(!1),t=(0,ye.useRef)(null),o=(0,ye.useRef)(null),a=fe(),{propertyName:i}=e,l=()=>a.getFromContext(Ze.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||a.$ui.$getEdgePropertyMappings();return(0,ye.useEffect)(()=>{r.current||(r.current=!0,o.current=new Ze.EdgeTypePicker(a.$ui,t.current,l(),a.getValue(i),(n,s)=>{a.setValue(i,s,null)}),o.current.render(i,a.rt),a.onChange(()=>{o.current.reset(),o.current.select(i,a.getValue(i))}))}),ye.default.createElement("div",{ref:t})}var q=A(require("react")),le=(0,q.createContext)(null);function ir(e){let r=(0,q.useRef)(null),t=Ke(r);return q.default.createElement(le.Provider,{value:t},e.children||[])}function Ke(e){return xe(e)}function pt(){let e=(0,q.useContext)(le),[r,t]=(0,q.useState)(null);return(0,q.useEffect)(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var w=A(require("react")),_t=require("@visuallyjs/browser-ui"),X=(0,w.createContext)(null);function mt(e){return xe(e)}function lr(e){let r=(0,w.useRef)(null),t=mt(r);return w.default.createElement(X.Provider,{value:t},e.children||[])}function be(){let e=(0,w.useContext)(X),[r,t]=(0,w.useState)(null);return(0,w.useEffect)(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var sr=(0,w.forwardRef)((e,r)=>{let t=(0,w.useRef)(null),o=(0,w.useRef)(!1),a,i,l=(0,w.useContext)(X);l==null?(a=(0,w.useRef)(null),l=mt(a)):a=l.ref();let n=(0,w.useContext)(B);n==null?(i=(0,w.useRef)(null),n=Te(i)):i=n.ref();let s={getDiagram:()=>a.current};(0,w.useImperativeHandle)(r,()=>s),(0,w.useEffect)(()=>{o.current||(o.current=!0,a.current=(0,_t.createDiagram)(t.current,e.options,e.modelOptions),i.current=a.current.$ui,e.data?a.current.load({data:e.data}):e.url&&a.current.load({url:e.url}),l.set(a.current),n.set(i.current))});let m=`${e.className||""} vjs-react-diagram`,y=e.style||{};return w.default.createElement("div",{ref:t,className:m,style:y},w.default.createElement(B.Provider,{value:n},w.default.createElement(X.Provider,{value:l},e.children)))});var H=A(require("react")),Re=(0,H.createContext)(void 0);function cr(e){let r=(0,H.useMemo)(()=>ct(e.modelOptions||{}),[]);function t(a,i){r.clear(),r.load({data:a,dataType:i})}function o(a,i){r.clear(),r.load({url:a,dataType:i})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),(0,H.useEffect)(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),(0,H.useEffect)(()=>{e.url!=null&&o(e.url,e.dataType)},[e.url]),H.default.createElement(Re.Provider,{value:r},e.children||[])}function ft(){let e=(0,H.useContext)(Re),r=(0,H.useContext)(B),t=(0,H.useContext)(le),o=(0,H.useContext)(X),[a,i]=(0,H.useState)(e);return(0,H.useEffect)(()=>{if(e){i(e);return}let l;r!=null&&(r.ref().current?i(r.ref().current.model):(l=m=>{i(m.model)},r.listen(l)));let n;t!=null&&(t.ref().current?a==null&&i(t.ref().current.model):(n=m=>{a==null&&i(m.model)},t.listen(n)));let s;o!=null&&(o.ref().current?a==null&&i(o.ref().current.model):(s=m=>{a==null&&i(m.model)},o.listen(s)))}),a}var Et=A(require("react")),Q=require("@visuallyjs/browser-ui");function ur(e,r){if(e.hydrated!==!0){let t=(0,Q.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Q.addClass)(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function qe(e,r,t,o){return Et.default.createElement($e,{ns:e,model:r,ui:t.current,childProps:o,cb:a=>{ur(a,t)}})}function Qe(e,r,t,o){return Et.default.createElement($e,{ns:e,model:r,ui:t.current,childProps:o,cb:a=>{dr(a,t)}})}function dr(e,r){if(e.hydrated!==!0){let t=(0,Q.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&((0,Q.addClass)(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(Q.ATTRIBUTE_NOT_DRAGGABLE)===Q.TRUE&&e.domElement.setAttribute(Q.ATTRIBUTE_NOT_DRAGGABLE,Q.TRUE)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}var T=A(require("react")),gt=A(require("react-dom")),g=require("@visuallyjs/browser-ui"),pr=(0,T.forwardRef)((e,r)=>{let t=(0,T.useRef)(!1),o=(0,T.useRef)(!1),a=(0,T.useContext)(Re),i=(0,T.useRef)(null),l=(0,T.useRef)(null),n=(0,T.useRef)(a),s,m=(0,T.useContext)(B);m==null?(s=(0,T.useRef)(null),m=Te(s)):s=m.ref();let[y,x]=(0,T.useState)([]),[p,h]=(0,T.useState)([]),O=[],S=[];function F(){x(O.slice())}function W(){h(S.slice())}let Z={getSurface:()=>s.current,getModel:()=>n.current};(0,T.useImperativeHandle)(r,()=>Z),(0,T.useEffect)(()=>{var b;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new Ce(e.modelOptions||{}):n.current=a,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",i.current.appendChild(l.current));let oe=(c,d,R,M,E,v,V,me)=>{let[D,U]=v.component||v.jsx?[v,null]:(0,g.isGroup)(V)?[Object.assign(Object.assign({},v),{jsx:z=>T.default.createElement(T.default.Fragment,null,z.obj.data.label)}),g.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},v),{jsx:z=>T.default.createElement(T.default.Fragment,null,z.obj.data.label)}),g.CLASS_DEFAULT_NODE],J=E.containerType===g.ElementTypes.HTML?document.createElement(g.ELEMENT_DIV):(0,g.$svgNode)(g.ELEMENT_SVG);l.current.appendChild(J),U!=null&&E.$addClassToElement(J,U);let De={data:d,model:R,ui:E,componentId:V.getFullId(),obj:V,props:e.childProps,element:J,eventInfo:me};O.push({data:d,def:D,payload:De,domElement:J,key:V.id,obj:V,hydrated:!1}),F()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},Pe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,R,M)=>{},render:oe,rerender:(c,d,R,M,E,v,V,me,D)=>{let U=(0,g.partition)(O,J=>J.obj!==V);O=U.left,F(),oe(c,d,R,M,E,v,V,me),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(R=>R.jsx!=null?{type:g.OVERLAY_TYPE_CUSTOM,options:{create:E=>{let v=document.createElement(g.ELEMENT_DIV);v.className=Le;let V={data:E.edge.data,model:n.current,ui:pe,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:v};return S.push({def:{jsx:R.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:v,key:(0,g.uuid)(),hydrated:!1}),W(),v}}}:R))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),pe=(0,g.renderSurface)(n.current,i.current,Pe,Oe);m.set(pe),e.surfaceId!=null&&st(e.surfaceId,Z);let ge=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,g.extend)(d.originalData,d.updates)),E},M=O.find(E=>E.key===c);M!=null&&(M.data=R(),F())},Se=c=>{O=O.filter(d=>d.payload.componentId!==c),F()},je=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,g.extend)(d.originalData,d.updates)),E},M=S.find(E=>E.obj.id===c);M!=null&&(M.data=R(),W())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),W()};n.current.bind(g.EVENT_NODE_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_GROUP_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_NODE_REMOVED,c=>{Se(c.node.id)}),n.current.bind(g.EVENT_GROUP_REMOVED,c=>{Se(c.group.id)}),n.current.bind(g.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),n.current.bind(g.EVENT_EDGE_UPDATED,c=>{je(c.edge.id,c)}),n.current.bind(g.EVENT_GRAPH_CLEARED,()=>{O=[],F(),S=[],W()})}}),(0,T.useEffect)(()=>{o.current&&n.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,n.current.clear(),n.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-surface`,j=e.style||{};return T.default.createElement("div",{ref:i,className:ce,style:j},y.map(b=>gt.createPortal(Qe(b,n.current,s,e.childProps),b.domElement,b.key)),p.map(b=>gt.createPortal(qe(b,n.current,s,e.childProps),b.domElement,b.key)),T.default.createElement(B.Provider,{value:m},e.children))});var Y=A(require("react")),et=require("@visuallyjs/browser-ui");function Nt(e){let r=$(),t=(0,Y.useRef)(null),o=(0,Y.useRef)(!1),a=(0,Y.useRef)(null),[i,l]=(0,Y.useState)(null),[n,s]=(0,Y.useState)(0),m=(0,Y.useMemo)(()=>i==null?"none":"block",[i]);function y(p){l(p),s(h=>h+1)}(0,Y.useEffect)(()=>{!o.current&&r&&(o.current=!0,a.current=new et.PopupHandler(e.selector,t.current,r,p=>y(p),e.anchor))});function x(){a.current&&a.current.$hide()}return Y.default.createElement("div",{ref:t,className:et.CLASS_SURFACE_POPUP,style:{display:m,position:"absolute"}},i!=null&&e.children(i,r.model,r,()=>x()))}var _e=A(require("react")),At=require("@visuallyjs/browser-ui");function mr(e){let r=fe(),t=e.cssClass||"vjs-inspector-section",o=()=>e.mappings?e.mappings:r.getFromContext(At.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||r.$ui.$getEdgePropertyMappings();function a(n){let s=n.property;return Array.isArray(s)?s:[s]}function i(n){return a(n).join(" ")}function l(n){return e.getPropertyName?e.getPropertyName(n):n.name||i(n)}return _e.default.createElement(_e.default.Fragment,null,o().map(n=>{let s=i(n),m=l(n);return _e.default.createElement("div",{className:t,key:s},e.showName!==!1&&_e.default.createElement("div",null,m),_e.default.createElement(dt,{propertyName:s}))}))}var ee=A(require("react")),L=require("@visuallyjs/browser-ui");function Ct(e){let r=e.maxColors||10,t=(0,ee.useRef)(null),o=(0,ee.useRef)(!1),a=fe(),[i,l]=(0,ee.useState)(a.ensureContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function n(p){let h=a.ensureContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(p=p.toUpperCase(),!(h.find(S=>S.toUpperCase()===p)!=null)){let S=h.slice();S.unshift(p),S.length>r&&(S.length=r),a.updateContext(L.INSPECTOR_CONTEXT_RECENT_COLORS,S)}}function s(){let p=t.current.value;a.setValue(e.propertyName,p,null),n(p)}function m(p){a.setValue(e.propertyName,p,null),t.current.value=p}let y=p=>{p.key===L.INSPECTOR_CONTEXT_RECENT_COLORS&&l(p.value.slice())};function x(){let p=a.getValue(e.propertyName);p!=null&&t.current&&n(p)}return(0,ee.useEffect)(()=>(a.bind(L.EVENT_CONTEXT_UPDATE,y),a.bind(L.EVENT_CHANGE,x),o.current||(o.current=!0,t.current.addEventListener(L.EVENT_CHANGE,s)),setTimeout(x),()=>{a.unbind(L.EVENT_CONTEXT_UPDATE,y),a.unbind(L.EVENT_CHANGE,x)})),ee.default.createElement("div",{className:L.CLASS_COLOR_PICKER},ee.default.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),ee.default.createElement("div",{className:L.CLASS_COLOR_PICKER_SWATCHES},i.map(p=>ee.default.createElement("div",{key:p,title:p,className:L.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:p},"data-color":p,onClick:()=>m(p)}))))}var P=A(require("react")),He=require("@visuallyjs/browser-ui"),fr=7,Er=["True","False"];function tt(e,r){return(e.booleanLabels||Er)[r?0:1]}function Ne(e){return(0,He.isString)(e)?e:e.label}function xt(e){return(0,He.isString)(e)?e:e.value}function gr(e,r,t){let o=t==null?void 0:t.getValue(e.id);return o==null&&(o=e.id.split(".").reduce((a,i)=>a==null?a:a[i],r.data)),o==null&&(o=e.defaultValue),o==null?"":typeof o=="object"?JSON.stringify(o)||"":String(o)}function Cr({vertex:e,maxRadios:r}){if(!e||!(0,He.isNode)(e))return null;let{type:t,category:o}=e.data;if(!t||!o)return null;r=r==null?fr:r;let a=fe();function i(){if(a==null)return null;let s=a.$ui.getShapeLibrary().getShapeSet(o);return s?s.shapes.find(m=>m.type===t):null}let l=i();return!l||!l.properties?null:P.default.createElement(P.default.Fragment,null,l.properties.map(n=>{let s=n.type==="boolean",m=n.values&&n.values.length>0,y=m&&n.editor!=="select"&&n.values.length<=r;return P.default.createElement("div",{key:n.id,className:"vjs-inspector-field"},(n.readOnly||!s||n.editor==="select"||n.editor==="radio")&&P.default.createElement("label",{className:"vjs-inspector-property-label"},n.label||n.id),n.readOnly?P.default.createElement("output",{className:"vjs-inspector-property-value"},gr(n,e,a)):null,!n.readOnly&&n.type==="string"&&(m?y?P.default.createElement("div",{className:"vjs-radio-group"},n.values.map(x=>P.default.createElement("label",{key:Ne(x)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(x)})," ",Ne(x)))):P.default.createElement("select",{"vjs-att":n.id},n.values.map(x=>P.default.createElement("option",{key:x.value,value:x.value},x.label))):P.default.createElement("input",{type:"text","vjs-att":n.id,placeholder:n.description})),!n.readOnly&&n.type==="number"&&(m?y?P.default.createElement("div",{className:"vjs-radio-group"},n.values.map(x=>P.default.createElement("label",{key:Ne(x)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(x)})," ",Ne(x)))):P.default.createElement("select",{"vjs-att":n.id},n.values.map(x=>P.default.createElement("option",{key:Ne(x),value:xt(x)},Ne(x)))):P.default.createElement("input",{type:"number","vjs-att":n.id,placeholder:n.description,min:n.min,max:n.max})),!n.readOnly&&n.type==="text"&&P.default.createElement("textarea",{rows:5,"vjs-att":n.id,placeholder:n.description}),!n.readOnly&&n.type==="color"&&P.default.createElement(Ct,{propertyName:n.id}),!n.readOnly&&s&&(n.editor==="select"?P.default.createElement("select",{"vjs-att":n.id,"vjs-datatype":"boolean"},P.default.createElement("option",{value:""}),P.default.createElement("option",{value:"true"},tt(n,!0)),P.default.createElement("option",{value:"false"},tt(n,!1))):n.editor==="radio"?P.default.createElement("div",{className:"vjs-radio-group"},P.default.createElement("label",null,P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,"vjs-datatype":"boolean",value:"true"}),P.default.createElement("span",null,tt(n,!0))),P.default.createElement("label",null,P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,"vjs-datatype":"boolean",value:"false"}),P.default.createElement("span",null,tt(n,!1)))):P.default.createElement("label",null,P.default.createElement("input",{type:"checkbox","vjs-datatype":"boolean","vjs-att":n.id})," ",n.label||n.id)),n.description&&P.default.createElement("div",{className:"vjs-field-desc"},n.description))}))}var _=A(require("react")),yt=A(require("react-dom")),C=require("@visuallyjs/browser-ui"),xr=(0,_.forwardRef)((e,r)=>{let t=(0,_.useRef)(!1),o=(0,_.useRef)(!1),a=(0,_.useContext)(Re),i=(0,_.useRef)(null),l=(0,_.useRef)(null),n=(0,_.useRef)(null),s,m=(0,_.useContext)(le);m==null?(s=(0,_.useRef)(null),m=Ke(s)):s=m.ref();let[y,x]=(0,_.useState)([]),[p,h]=(0,_.useState)([]),O=[],S=[];function F(){x(O.slice())}function W(){h(S.slice())}let Z={getPaper:()=>s.current,getModel:()=>n.current};(0,_.useImperativeHandle)(r,()=>Z),(0,_.useEffect)(()=>{var b;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new Ce(e.modelOptions||{}):n.current=a,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",i.current.appendChild(l.current));let oe=(c,d,R,M,E,v,V,me)=>{let[D,U]=v.component||v.jsx?[v,null]:(0,C.isGroup)(V)?[Object.assign(Object.assign({},v),{jsx:z=>_.default.createElement(_.default.Fragment,null,z.obj.data.label)}),C.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},v),{jsx:z=>_.default.createElement(_.default.Fragment,null,z.obj.data.label)}),C.CLASS_DEFAULT_NODE],J=E.containerType===C.ElementTypes.HTML?document.createElement(C.ELEMENT_DIV):(0,C.$svgNode)(C.ELEMENT_SVG);l.current.appendChild(J),U!=null&&E.$addClassToElement(J,U);let De={data:d,model:R,ui:E,componentId:V.getFullId(),obj:V,props:e.childProps,element:J,eventInfo:me};O.push({data:d,def:D,payload:De,domElement:J,key:V.id,obj:V,hydrated:!1}),F()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},Pe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,R,M)=>{},render:oe,rerender:(c,d,R,M,E,v,V,me,D)=>{let U=(0,C.partition)(O,J=>J.obj!==V);O=U.left,F(),oe(c,d,R,M,E,v,V,me),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(R=>R.jsx!=null?{type:C.OVERLAY_TYPE_CUSTOM,options:{create:E=>{let v=document.createElement(C.ELEMENT_DIV);v.className=Le;let V={data:E.edge.data,model:n.current,ui:pe,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:v};return S.push({def:{jsx:R.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:v,key:(0,C.uuid)(),hydrated:!1}),W(),v}}}:R))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),pe=(0,C.renderPaper)(n.current,i.current,Pe,Oe);m.set(pe);let ge=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,C.extend)(d.originalData,d.updates)),E},M=O.find(E=>E.key===c);M!=null&&(M.data=R(),F())},Se=c=>{O=O.filter(d=>d.payload.componentId!==c),F()},je=(c,d)=>{let R=()=>{let E={};return(d.originalData||d.updates)&&(E=(0,C.extend)(d.originalData,d.updates)),E},M=S.find(E=>E.obj.id===c);M!=null&&(M.data=R(),W())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),W()};n.current.bind(C.EVENT_NODE_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),n.current.bind(C.EVENT_GROUP_UPDATED,c=>{ge(c.vertex.getFullId(),c)}),n.current.bind(C.EVENT_NODE_REMOVED,c=>{Se(c.node.id)}),n.current.bind(C.EVENT_GROUP_REMOVED,c=>{Se(c.group.id)}),n.current.bind(C.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),n.current.bind(C.EVENT_EDGE_UPDATED,c=>{je(c.edge.id,c)}),n.current.bind(C.EVENT_GRAPH_CLEARED,()=>{O=[],F(),S=[],W()})}}),(0,_.useEffect)(()=>{o.current&&n.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,n.current.clear(),n.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-paper`,j=e.style||{};return _.default.createElement("div",{ref:i,className:ce,style:j},y.map(b=>yt.createPortal(Qe(b,n.current,s,e.childProps),b.domElement,b.key)),p.map(b=>yt.createPortal(qe(b,n.current,s,e.childProps),b.domElement,b.key)),_.default.createElement(le.Provider,{value:m},e.children))});var rt=require("@visuallyjs/browser-ui"),ae=A(require("react")),yr=(0,ae.forwardRef)((e,r)=>{let t=$(),o=be(),a=(0,ae.useRef)(!1),i=(0,ae.useRef)(null),l;(0,ae.useImperativeHandle)(r,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function n(s){s.addPlugin({type:rt.MiniviewPlugin.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return(0,ae.useEffect)(()=>{a.current||(t!=null?(a.current=!0,n(t)):o!=null&&o.$ui instanceof rt.Surface&&(a.current=!0,n(o.$ui)))},[t,o]),ae.default.createElement("div",{ref:i,className:`${e.className||""}`})});var Ae=require("@visuallyjs/browser-ui"),N=A(require("react")),Pr=(0,N.forwardRef)((e,r)=>{let t=(0,N.useContext)(B),o=(0,N.useContext)(X),a=(0,N.useContext)(le),i,l=(0,N.useContext)(Fe);l==null&&(i=(0,N.useRef)(null),l=ut(i));let[n,s]=(0,N.useState)(null),[m,y]=(0,N.useState)(0),[x,p]=(0,N.useState)(null),h=(0,N.useRef)(!1),O=(0,N.useRef)(null),S=e.className||"";(0,N.useEffect)(()=>{var j;(j=i==null?void 0:i.current)==null||j.$refresh()},[m]);let F=e.onSelectionCleared||(()=>s(null)),W=(j,b)=>{s(j),e.refresh&&e.refresh(j),y(oe=>oe+1)};function Z(j){i.current=new Ae.Inspector({container:O.current,ui:j,renderEmptyContainer:F,refresh:W,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(j):null}),p(i.current)}let ce={getInspector:()=>x};return(0,N.useImperativeHandle)(r,()=>ce),(0,N.useEffect)(()=>{h.current||(h.current=!0,t!=null?t.listen(Z):a!=null?a.listen(Z):o!=null?o.listen(j=>{j.$ui instanceof Ae.Surface&&Z(j.$ui)}):(0,Ae.log)("WARN: InspectorComponent cannot resolve a ui to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),N.default.createElement("div",{ref:O,className:S},N.default.createElement(Fe.Provider,{value:l},n!=null&&N.default.createElement(N.default.Fragment,null,typeof e.children=="function"?e.children(n,i.current.$ui.model):e.children||[]),n==null&&N.default.createElement(N.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var pl="group:added",ml="group:member:added",fl="group:member:removed",El="group:removed",gl="dataLoadStart",Cl="dataAppendStart",xl="dataLoadEnd",yl="dataAppendEnd",Pl="dataUpdated",Ol="graphClearStart",Sl="graphCleared",hl="graphChanged",bl="group:updated",Rl="node:updated",vl="port:updated",Dl="edge:updated",Tl="edge:added",_l="node:added",Nl="edge:removed",Al="node:removed",wl="port:added",Vl="port:removed",Ml="edge:target",Il="edge:source",wt="select",Vt="deselect",Mt="selection:cleared",Bl="edge:geometry",jl="edge:pathEdited",Ul="edge:dragStart",Gl="edge:drag",kl="edge:dragEnd",Ll="edge:dragAbort",Fl="edge:typeChanged",Hl="node:typeChanged",zl="port:typeChanged",Wl="group:typeChanged",Jl="group:move:start",$l="group:move",Xl="group:move:end",Yl="internal:group:sizeChanged",Zl="internal:group:sizeChangedRedo",Kl="internal:group:sizeChangedUndo",ql="internal:edge:redraw",Ql="renderer:added",es="node:move:start",ts="node:move",rs="node:move:end",ns="node:move:abort",os="undoredo:update",as="undo",is="redo",ls="destroy";var f=A(require("react")),u=require("@visuallyjs/browser-ui"),Pt="can-undo",Ot="can-redo",nt="vjs-selected-mode",It="vjs-controls-has-selection";function Or(e){let r="Clear selection",t=$(),o=be(),[a,i]=(0,f.useState)("row"),[l,n]=(0,f.useState)(!1),[s,m]=(0,f.useState)(!1),y=(0,f.useRef)(null),x=(0,f.useRef)(!1),p=(0,f.useRef)(null),[h,O]=(0,f.useState)("Clear dataset?"),S=(0,f.useRef)(null),[F,W]=(0,f.useState)(!0),[Z,ce]=(0,f.useState)(!1),[j,b]=(0,f.useState)(!0),[oe,ue]=(0,f.useState)(!0),[Pe,de]=(0,f.useState)([]),[Oe,pe]=(0,f.useState)([]);function ge(D){p.current=D,e.clearMessage&&O(e.clearMessage),e.onMaybeClear&&(S.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&b(!1),e.zoomToExtents===!1&&W(!1),e.zoomButtons===!0&&ce(!0),e.clear===!1&&ue(!1);let U=(e.buttons||[]).filter(z=>z.mode!=null);de(U);let J=(e.buttons||[]).filter(z=>z.mode==null);pe(J),D.bind(u.EVENT_SURFACE_MODE_CHANGED,z=>{D.removeClass(D.$getSelector(y.current,"[data-mode]"),nt),D.addClass(D.$getSelector(y.current,"[data-mode='"+z+"']"),nt)}),D.model.bind(u.EVENT_UNDOREDO_UPDATE,z=>{y.current.setAttribute(Pt,z.undoCount>0?u.TRUE:u.FALSE),y.current.setAttribute(Ot,z.redoCount>0?u.TRUE:u.FALSE)}),D.model.bind(wt,V),D.model.bind(Vt,V),D.model.bind(Mt,V);let De=D.getPlugin(u.LassoPlugin.type);n(De!=null),m(De!=null||U.length>0),y.current.setAttribute(Pt,u.FALSE),y.current.setAttribute(Ot,u.FALSE)}function Se(){p.current.model.clearSelection(),p.current.zoomToFit()}function je(){p.current.zoomIn()}function Ue(){p.current.zoomOut()}function c(){p.current.setMode(u.SURFACE_MODE_PAN)}function d(){p.current.setMode(u.SURFACE_MODE_SELECT)}function R(){p.current.model.clearSelection(),(0,u.supportsPathEditing)(p.current)&&p.current.stopEditingPath()}function M(){S.current!=null?S.current(()=>p.current.model.clear()):window.confirm(h)&&p.current.model.clear()}function E(){p.current.model.undo()}function v(){p.current.model.redo()}let V=()=>{p.current.model.getSelection().isEmpty()?y.current.removeAttribute(It):y.current.setAttribute(It,"true")};(0,f.useEffect)(()=>{x.current===!1&&(t!=null?(x.current=!0,ge(t)):o!=null&&o.$ui instanceof u.Surface&&(x.current=!0,ge(o.$ui)))},[t,o]);let me=e.style||{};return f.default.createElement("div",{style:me,ref:y,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&f.default.createElement("i",{className:"vjs-pan-mode "+nt,"data-mode":u.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>c()},f.default.createElement("svg",{fill:"none",viewBox:u.PAN_VIEW_BOX,stroke:"currentColor"},f.default.createElement("path",{d:u.PAN_PATH}))),l&&f.default.createElement("i",{className:"vjs-select-mode","data-mode":u.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>d()},f.default.createElement("svg",{fill:"currentColor",viewBox:u.LASSO_VIEW_BOX,stroke:"currentColor"},f.default.createElement("path",{d:u.LASSO_PATH}))),Pe.map(D=>f.default.createElement("i",{className:D.class,title:D.title,onClick:U=>D.handler(U,D.id)})),F&&f.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Se()},f.default.createElement("svg",{viewBox:u.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_TO_FIT_PATH}))),Z&&f.default.createElement(f.default.Fragment,null,f.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>je()},f.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_IN_PATH}))),f.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>Ue()},f.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.ZOOM_OUT_PATH})))),j&&f.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()},f.default.createElement("svg",{viewBox:u.UNDO_VIEW_BOX,stroke:"currentColor",fill:"none"},f.default.createElement("path",{d:u.UNDO_PATH,strokeWidth:"2"}))),j&&f.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>v()},f.default.createElement("svg",{viewBox:u.REDO_VIEW_BOX,stroke:"currentColor",fill:"none"},f.default.createElement("path",{d:u.REDO_PATH,strokeWidth:"2"}))),f.default.createElement("i",{className:u.CLASS_CONTROLS_RESET_SELECTION,title:r,onClick:()=>R()},f.default.createElement("svg",{viewBox:u.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.RESET_SELECTION_PATH}))),oe&&f.default.createElement("i",{className:"vjs-clear-dataset",title:h,onClick:()=>M()},f.default.createElement("svg",{viewBox:u.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.CLEAR_PATH}))),Oe.map(D=>f.default.createElement("i",{className:D.class,title:D.title,onClick:U=>D.handler(U,D.id)})))}var I=A(require("react")),ie=require("@visuallyjs/browser-ui");function Sr(e){let r=(0,I.useRef)(!1),t=(0,I.useRef)(null),o=$(),a=be(),[i,l]=(0,I.useState)(!0),[n,s]=(0,I.useState)("Export :"),[m,y]=(0,I.useState)(null),[x,p]=(0,I.useState)(null),[h,O]=(0,I.useState)(null),[S,F]=(0,I.useState)(!0),[W,Z]=(0,I.useState)(!0),[ce,j]=(0,I.useState)(!0);function b(de){t.current=de,e.label&&s(n),e.showLabel!=null&&l(e.showLabel),e.margins&&y(e.margins);let Oe=e.svgOptions||{};p(Oe);let pe=e.imageOptions||{};O(pe),e.allowJpgExport!=null&&j(e.allowJpgExport),e.allowPngExport!=null&&Z(e.allowPngExport),e.allowSvgExport!=null&&F(e.allowSvgExport)}function oe(){new ie.SvgExportUI(t.current).export(x)}function ue(){new ie.ImageExportUI(t.current).export(h)}function Pe(){new ie.ImageExportUI(t.current).export(Object.assign(h||{},{type:"image/jpeg"}))}return(0,I.useEffect)(()=>{r.current===!1&&(o!=null?(r.current=!0,b(o)):a!=null&&a.$ui instanceof ie.Surface&&(r.current=!0,b(a.$ui)))},[o,a]),I.default.createElement("div",{className:`${ie.CLASS_CONTROLS} ${ie.CLASS_EXPORT_CONTROLS}`},i&&I.default.createElement("span",null,n),S&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>oe()},"SVG")),W&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>ue()},"PNG")),ce&&I.default.createElement("i",null,I.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Pe()},"JPG")))}var te=A(require("react")),ze=require("@visuallyjs/browser-ui"),hr=(0,te.forwardRef)((e,r)=>{let t=(0,te.useRef)(!1),o=(0,te.useRef)(null),a=(0,te.useContext)(B),i=(0,te.useRef)(null),l=e.className||"";function n(s){s.getShapeLibrary()!=null?i.current=new ze.ShapePalette(s,{container:o.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,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap,preparedShapes:e.preparedShapes,allowDropOnEdge:e.allowDropOnEdge,showGroups:e.showGroups!==!1}):(0,ze.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,te.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>n(s)):e.surface!=null?n(e.surface):(0,ze.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),te.default.createElement("div",{ref:o,className:l})});var we=A(require("react")),Ve=require("@visuallyjs/browser-ui"),Bt=120,jt=90;function br(e){let r=(0,we.useRef)(null);function t(){return e.ctx.obj.data.outlineWidth||2}function o(){return e.ctx.obj.data.fill||"#FFFFFF"}function a(){return e.ctx.obj.data.outline||"#000000"}function i(){return e.ctx.obj.data.width||Bt}function l(){return e.ctx.obj.data.height||jt}function n(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return(0,we.useEffect)(()=>{let m=e.ctx.obj.data,y=e.ctx.ui.getShapeLibrary(),x=y.renderCompiledShape(m);if(r.current.replaceChildren(x),e.showLabels){let p=y.renderShapeLabel(m,s(),e.labelStrokeWidth,null,n(),n(),e.font);r.current.appendChild(p),e.multilineLabels!=!1&&(0,Ve.convertToMultilineText)(p,m[s()]||"",i()*(e.labelFillRatio||Ve.DEFAULT_LABEL_FILL_RATIO),e.labelPosition)}}),we.default.createElement("svg",{className:Ve.CLASS_SHAPE,ref:r,strokeWidth:t(),fill:o(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}var re=A(require("react")),Me=require("@visuallyjs/browser-ui"),Rr=(0,re.forwardRef)((e,r)=>{let t=(0,re.useRef)(!1),o=(0,re.useRef)(null),a=(0,re.useContext)(B),i=(0,re.useRef)(null),l=e.className||"";function n(s){let m={selector:e.selector,source:o.current,dataGenerator:y=>e.dataGenerator?e.dataGenerator(y):(0,Me.defaultDataGenerator)(y),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};i.current=new Me.Palette(s,m)}return(0,re.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>n(s)):e.surface!=null?n(e.surface):(0,Me.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),re.default.createElement("div",{className:l,ref:o},e.children)});var ne=A(require("react")),ot=require("@visuallyjs/browser-ui"),vr=(0,ne.forwardRef)((e,r)=>{let t=(0,ne.useRef)(!1),o=(0,ne.useRef)(null),a=(0,ne.useContext)(X),i=(0,ne.useRef)(null),l=e.className||"";function n(m){i.current=new ot.DiagramPalette(o.current,m,{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,allowDropOnEdge:e.allowDropOnEdge,autoEdgeConnect:e.autoEdgeConnect,showGroups:e.showGroups!==!1,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap})}(0,ne.useEffect)(()=>{t.current||(t.current=!0,a!=null?a.listen(m=>n(m)):e.diagram!=null?n(e.diagram):(0,ot.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return ne.default.createElement("div",{ref:o,className:l,style:s})});var G=A(require("react"));function k(e){let r=(0,G.useRef)(null),t=(0,G.useRef)(!1),o=(0,G.useRef)(!1),a=(0,G.useRef)(null),i=(0,G.useRef)(null),l=(0,G.useRef)(e);(0,G.useEffect)(()=>{l.current=e});let n=e.style||{},s=(0,G.useContext)(B),m=(0,G.useContext)(X);function y(h){let O=l.current;return Object.assign({dataSource:h,dataSourceFilter:e.dataSourceFilter},e.options)}function x(h){var S;(S=a.current)==null||S.destroy(),i.current=h;let O=y(h);a.current=l.current.createChart(r.current,O),o.current=!0}function p(){var O;(O=a.current)==null||O.destroy(),i.current=null;let h=y();a.current=l.current.createChart(r.current,h),l.current.data?a.current.load({data:l.current.data},()=>{o.current=!0}):l.current.url?a.current.load({url:l.current.url},()=>{o.current=!0}):o.current=!0}return(0,G.useEffect)(()=>{t.current||(t.current=!0,e.data==null&&e.url==null&&s!=null?s.listen(h=>{x(h.model)}):e.data==null&&e.url==null&&m!=null?m.listen(h=>{x(h.model)}):p())}),e.reactive!==!1&&((0,G.useEffect)(()=>{o.current&&e.data!=null&&a.current&&a.current.load({data:e.data})},[e.data]),(0,G.useEffect)(()=>{o.current&&e.url!=null&&a.current&&a.current.load({url:e.url})},[e.url]),(0,G.useEffect)(()=>{o.current&&e.pivot!=null&&a.current&&a.current.pivot&&a.current.pivot(e.pivot)},[e.pivot]),(0,G.useEffect)(()=>{o.current&&e.dataSourceFilter!=null&&a.current&&a.current.setDataSourceFilter&&a.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter]),(0,G.useEffect)(()=>{o.current&&(i.current?x(i.current):s==null&&m==null&&p())},[e.options])),G.default.createElement("div",{ref:r,style:n,className:`${e.className||""}`})}var Ut=require("@visuallyjs/browser-ui");function Dr(e){let r=Object.assign({createChart:(t,o)=>new Ut.ColumnChart(t,o)},e);return k(r)}var Gt=require("@visuallyjs/browser-ui");function Tr(e){let r=Object.assign({createChart:(t,o)=>new Gt.BarChart(t,o)},e);return k(r)}var kt=require("@visuallyjs/browser-ui");function _r(e){let r=Object.assign({createChart:(t,o)=>new kt.CategoryValueChart(t,o)},e);return k(r)}var Lt=require("@visuallyjs/browser-ui");function Nr(e){let r=Object.assign({createChart:(t,o)=>new Lt.LineChart(t,o)},e);return k(r)}var Ft=require("@visuallyjs/browser-ui");function Ar(e){let r=Object.assign({createChart:(t,o)=>new Ft.AreaChart(t,o)},e);return k(r)}var Ht=require("@visuallyjs/browser-ui");function wr(e){let r=Object.assign({createChart:(t,o)=>new Ht.PieChart(t,o)},e);return k(r)}var zt=require("@visuallyjs/browser-ui");function Vr(e){let r=Object.assign({createChart:(t,o)=>new zt.ScatterChart(t,o)},e);return k(r)}var Wt=require("@visuallyjs/browser-ui");function Mr(e){let r=Object.assign({createChart:(t,o)=>new Wt.BubbleChart(t,o)},e);return k(r)}var Jt=require("@visuallyjs/browser-ui");function Ir(e){let r=Object.assign({createChart:(t,o)=>new Jt.GaugeChart(t,o)},e);return k(r)}var $t=require("@visuallyjs/browser-ui");function Br(e){let r=Object.assign({createChart:(t,o)=>new $t.SankeyChart(t,o)},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),k(r)}var Xt=require("@visuallyjs/browser-ui"),Ee=A(require("react"));function St(e){let r=(0,Ee.useRef)(!1),t=(0,Ee.useRef)(null),o=(0,Ee.useContext)(B),a=e.position||{x:0,y:0};function i(l){e.placement==="fixed"?l.fixElement(t.current,a,e.constraints):l.floatElement(t.current,a)}return(0,Ee.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(l=>i(l)):(0,Xt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),Ee.default.createElement("div",{ref:t},e.children)}var se=require("@visuallyjs/browser-ui"),ve=A(require("react"));function at(e){let r=(0,ve.useRef)(!1),t=$();return(0,ve.useEffect)(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:se.BackgroundPlugin.type,options:e})}catch(o){(0,se.log)(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),ve.default.createElement(ve.default.Fragment,null)}function jr(e){return at(it({type:se.GeneratedGridBackground.type},e))}function Ur(e){return at({type:se.SimpleBackground.type,url:e.url})}function Gr(e){return at(it({type:se.TiledBackground.type},e))}var Yt=require("react"),Ie=require("@visuallyjs/browser-ui");function kr(e){let r=ft();(0,Yt.useEffect)(()=>{if(r!=null){let t=()=>e(r);return r.bind(Ie.EVENT_DATA_UPDATED,t),r.bind(Ie.EVENT_GRAPH_CLEARED,t),t(),()=>{r.unbind(Ie.EVENT_DATA_UPDATED,t),r.unbind(Ie.EVENT_GRAPH_CLEARED,t)}}},[r])}var Be=require("react"),ht=require("@visuallyjs/browser-ui");function Lr(e){let r=$(),t=pt(),[o,a]=(0,Be.useState)(e),[i,l]=(0,Be.useState)(()=>(o==null?void 0:o.getZoom())||1);return(0,Be.useEffect)(()=>{if(o!=null){let n=s=>{l(s.zoom)};return o.bind(ht.EVENT_ZOOM,n),l(o.getZoom()),()=>{o.unbind(ht.EVENT_ZOOM,n)}}},[o]),(0,Be.useEffect)(()=>{r!=null&&a(r),t!=null&&a(t)},[r,t]),i}
@@ -1 +1 @@
1
- var qt=Object.defineProperty;var Ze=Object.getOwnPropertySymbols;var Qt=Object.prototype.hasOwnProperty,er=Object.prototype.propertyIsEnumerable;var Ke=(e,r,t)=>r in e?qt(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,Ne=(e,r)=>{for(var t in r||(r={}))Qt.call(r,t)&&Ke(e,t,r[t]);if(Ze)for(var t of Ze(r))er.call(r,t)&&Ke(e,t,r[t]);return e};import{log as qe}from"@visuallyjs/browser-ui";var Qe=new Map,fe={};function et(e,r){Qe.set(e,r),tr(e,r)}function tr(e,r){(fe[e]||[]).forEach(n=>{try{n(r)}catch(a){qe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete fe[e]}function Pa(e,r){let t=Qe.get(e);if(t)try{r(t)}catch(n){qe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else fe[e]=fe[e]||[],fe[e].push(r)}var Ae="vjs-react-node",we="vjs-react-group",xe="vjs-react-overlay";import tt,{useEffect as rr,useRef as or}from"react";function Ve(e){let r=or(!1);return rr(()=>{r.current||(r.current=!0,e.cb(e.ns))}),tt.createElement(tt.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,vertex:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}import{BrowserUIModel as nr,log as ar}from"@visuallyjs/browser-ui";var Q=class extends nr{render(r,t){return ar("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function rt(e){return e=e||{},new Q(e)}import{createContext as ir,default as lr,useRef as sr,useContext as cr,useState as ur,useEffect as dr}from"react";var _=ir(null);function Vi(e){let r=sr(null),t=Ee(r);return lr.createElement(_.Provider,{value:t},e.children||[])}function Ee(e){return ee(e)}function ee(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)},ref:()=>e}}function B(){let e=cr(_),[r,t]=ur(null);return dr(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}import{createContext as pr,useContext as mr}from"react";var ye=pr(null);function ot(e){return ee(e)}function $(){let e=mr(ye);return e==null?null:e.ref().current}import fr,{useRef as Me,useEffect as Er}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as gr,EdgeTypePicker as Cr}from"@visuallyjs/browser-ui";function nt(e){let r=Me(!1),t=Me(null),n=Me(null),a=$(),{propertyName:i}=e,l=()=>a.getFromContext(gr)||a.$ui.$getEdgePropertyMappings();return Er(()=>{r.current||(r.current=!0,n.current=new Cr(a.$ui,t.current,l(),a.getValue(i),(o,s)=>{a.setValue(i,s,null)}),n.current.render(i,a.rt),a.onChange(()=>{n.current.reset(),n.current.select(i,a.getValue(i))}))}),fr.createElement("div",{ref:t})}import{createContext as xr,default as yr,useRef as Pr,useContext as Or,useState as Sr,useEffect as hr}from"react";var W=xr(null);function ll(e){let r=Pr(null),t=Ie(r);return yr.createElement(W.Provider,{value:t},e.children||[])}function Ie(e){return ee(e)}function at(){let e=Or(W),[r,t]=Sr(null);return hr(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}import Pe,{createContext as br,forwardRef as Rr,useContext as Be,useEffect as it,useImperativeHandle as vr,useRef as ge,useState as Dr}from"react";import{createDiagram as Tr}from"@visuallyjs/browser-ui";var j=br(null);function lt(e){return ee(e)}function bl(e){let r=ge(null),t=lt(r);return Pe.createElement(j.Provider,{value:t},e.children||[])}function oe(){let e=Be(j),[r,t]=Dr(null);return it(()=>{if(e){let n=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var Rl=Rr((e,r)=>{let t=ge(null),n=ge(!1),a,i,l=Be(j);l==null?(a=ge(null),l=lt(a)):a=l.ref();let o=Be(_);o==null?(i=ge(null),o=Ee(i)):i=o.ref();let s={getDiagram:()=>a.current};vr(r,()=>s),it(()=>{n.current||(n.current=!0,a.current=Tr(t.current,e.options,e.modelOptions),i.current=a.current.$ui,e.data?a.current.load({data:e.data}):e.url&&a.current.load({url:e.url}),l.set(a.current),o.set(i.current))});let p=`${e.className||""} vjs-react-diagram`,E=e.style||{};return Pe.createElement("div",{ref:t,className:p,style:E},Pe.createElement(_.Provider,{value:o},Pe.createElement(j.Provider,{value:l},e.children)))});import _r,{createContext as Nr,useContext as Oe,useEffect as je,useMemo as Ar,useState as wr}from"react";var ne=Nr(void 0);function Fl(e){let r=Ar(()=>rt(e.modelOptions||{}),[]);function t(a,i){r.clear(),r.load({data:a,dataType:i})}function n(a,i){r.clear(),r.load({url:a,dataType:i})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),je(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),je(()=>{e.url!=null&&n(e.url,e.dataType)},[e.url]),_r.createElement(ne.Provider,{value:r},e.children||[])}function st(){let e=Oe(ne),r=Oe(_),t=Oe(W),n=Oe(j),[a,i]=wr(e);return je(()=>{if(e){i(e);return}let l;r!=null&&(r.ref().current?i(r.ref().current.model):(l=p=>{i(p.model)},r.listen(l)));let o;t!=null&&(t.ref().current?a==null&&i(t.ref().current.model):(o=p=>{a==null&&i(p.model)},t.listen(o)));let s;n!=null&&(n.ref().current?a==null&&i(n.ref().current.model):(s=p=>{a==null&&i(p.model)},n.listen(s)))}),a}import ct from"react";import{addClass as ut,isGroup as dt,ATTRIBUTE_NOT_DRAGGABLE as pt,TRUE as mt}from"@visuallyjs/browser-ui";function Vr(e,r){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&ut(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function Se(e,r,t,n){return ct.createElement(Ve,{ns:e,model:r,ui:t.current,childProps:n,cb:a=>{Vr(a,t)}})}function he(e,r,t,n){return ct.createElement(Ve,{ns:e,model:r,ui:t.current,childProps:n,cb:a=>{Mr(a,t)}})}function Mr(e,r){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&(ut(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(pt)===mt&&e.domElement.setAttribute(pt,mt)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}import ae,{forwardRef as Ir,useContext as ft,useEffect as Et,useImperativeHandle as Br,useRef as ie,useState as gt}from"react";import*as Ue from"react-dom";import{ELEMENT_DIV as Ct,ELEMENT_SVG as jr,ElementTypes as Ur,EVENT_GRAPH_CLEARED as Gr,EVENT_GROUP_REMOVED as kr,EVENT_GROUP_UPDATED as Lr,EVENT_NODE_REMOVED as Fr,EVENT_NODE_UPDATED as Hr,extend as xt,isGroup as zr,renderSurface as Wr,CLASS_DEFAULT_NODE as Jr,CLASS_DEFAULT_GROUP as $r,OVERLAY_TYPE_CUSTOM as Xr,EVENT_EDGE_REMOVED as Yr,EVENT_EDGE_UPDATED as Zr,uuid as Kr,partition as qr,$svgNode as Qr}from"@visuallyjs/browser-ui";var Gs=Ir((e,r)=>{let t=ie(!1),n=ie(!1),a=ft(ne),i=ie(null),l=ie(null),o=ie(a),s,p=ft(_);p==null?(s=ie(null),p=Ee(s)):s=p.ref();let[E,f]=gt([]),[d,P]=gt([]),C=[],x=[];function A(){f(C.slice())}function V(){P(x.slice())}let I={getSurface:()=>s.current,getModel:()=>o.current};Br(r,()=>I),Et(()=>{var O;if(!n.current){n.current=!0,e.model!=null?o.current=e.model:a==null?o.current=new Q(e.modelOptions||{}):o.current=a,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",i.current.appendChild(l.current));let U=(c,u,S,v,m,h,R,z)=>{let[b,T]=h.component||h.jsx?[h,null]:zr(R)?[Object.assign(Object.assign({},h),{jsx:w=>ae.createElement(ae.Fragment,null,w.obj.data.label)}),$r]:[Object.assign(Object.assign({},h),{jsx:w=>ae.createElement(ae.Fragment,null,w.obj.data.label)}),Jr],M=m.containerType===Ur.HTML?document.createElement(Ct):Qr(jr);l.current.appendChild(M),T!=null&&m.$addClassToElement(M,T);let re={data:u,model:S,ui:m,componentId:R.getFullId(),obj:R,props:e.childProps,element:M,eventInfo:z};C.push({data:u,def:b,payload:re,domElement:M,key:R.id,obj:R,hydrated:!1}),A()},L=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Z={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,S,v)=>{},render:U,rerender:(c,u,S,v,m,h,R,z,b)=>{let T=qr(C,M=>M.obj!==R);C=T.left,A(),U(c,u,S,v,m,h,R,z),T.right.length>0&&setTimeout(()=>{L(null,T.right[0].domElement)})},cleanupVertex:L,cleanupPort:(c,u)=>{}},F=((O=e.viewOptions)==null?void 0:O.edges)||{};for(let c in F){let u=F[c];u.overlays!=null&&(u.overlays=u.overlays.map(S=>S.jsx!=null?{type:Xr,options:{create:m=>{let h=document.createElement(Ct);h.className=xe;let R={data:m.edge.data,model:o.current,ui:H,componentId:m.edge.getFullId(),obj:m.edge,props:e.childProps,element:h};return x.push({def:{jsx:S.jsx},data:m.edge.data,obj:m.edge,payload:R,domElement:h,key:Kr(),hydrated:!1}),V(),h}}}:S))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),H=Wr(o.current,i.current,Z,K);p.set(H),e.surfaceId!=null&&et(e.surfaceId,I);let J=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=xt(u.originalData,u.updates)),m},v=C.find(m=>m.key===c);v!=null&&(v.data=S(),A())},q=c=>{C=C.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=xt(u.originalData,u.updates)),m},v=x.find(m=>m.obj.id===c);v!=null&&(v.data=S(),V())},me=c=>{x=x.filter(u=>u.payload.obj.id!==c),V()};o.current.bind(Hr,c=>{J(c.vertex.getFullId(),c)}),o.current.bind(Lr,c=>{J(c.vertex.getFullId(),c)}),o.current.bind(Fr,c=>{q(c.node.id)}),o.current.bind(kr,c=>{q(c.group.id)}),o.current.bind(Yr,c=>{me(c.edge.id)}),o.current.bind(Zr,c=>{pe(c.edge.id,c)}),o.current.bind(Gr,()=>{C=[],A(),x=[],V()})}}),Et(()=>{n.current&&o.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,o.current.clear(),o.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-surface`,D=e.style||{};return ae.createElement("div",{ref:i,className:k,style:D},E.map(O=>Ue.createPortal(he(O,o.current,s,e.childProps),O.domElement,O.key)),d.map(O=>Ue.createPortal(Se(O,o.current,s,e.childProps),O.domElement,O.key)),ae.createElement(_.Provider,{value:p},e.children))});import eo,{useEffect as to,useMemo as ro,useRef as Ge,useState as yt}from"react";import{PopupHandler as oo,CLASS_SURFACE_POPUP as no}from"@visuallyjs/browser-ui";function ao(e){let r=B(),t=Ge(null),n=Ge(!1),a=Ge(null),[i,l]=yt(null),[o,s]=yt(0),p=ro(()=>i==null?"none":"block",[i]);function E(d){l(d),s(P=>P+1)}to(()=>{!n.current&&r&&(n.current=!0,a.current=new oo(e.selector,t.current,r,d=>E(d),e.anchor))});function f(){a.current&&a.current.$hide()}return eo.createElement("div",{ref:t,className:no,style:{display:p,position:"absolute"}},i!=null&&e.children(i,r.model,r,()=>f()))}import Ce from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as io}from"@visuallyjs/browser-ui";function tc(e){let r=$(),t=e.cssClass||"vjs-inspector-section",n=()=>e.mappings?e.mappings:r.getFromContext(io)||r.$ui.$getEdgePropertyMappings();function a(o){let s=o.property;return Array.isArray(s)?s:[s]}function i(o){return a(o).join(" ")}function l(o){return e.getPropertyName?e.getPropertyName(o):o.name||i(o)}return Ce.createElement(Ce.Fragment,null,n().map(o=>{let s=i(o),p=l(o);return Ce.createElement("div",{className:t,key:s},e.showName!==!1&&Ce.createElement("div",null,p),Ce.createElement(nt,{propertyName:s}))}))}import y from"react";import{isNode as lo,isString as Pt}from"@visuallyjs/browser-ui";var so=7,co=["True","False"];function be(e,r){return(e.booleanLabels||co)[r?0:1]}function le(e){return Pt(e)?e:e.label}function ke(e){return Pt(e)?e:e.value}function sc({vertex:e,maxRadios:r}){if(!e||!lo(e))return null;let{type:t,category:n}=e.data;if(!t||!n)return null;r=r==null?so:r;let a=$();function i(){if(a==null)return null;let s=a.$ui.getShapeLibrary().getShapeSet(n);return s?s.shapes.find(p=>p.type===t):null}let l=i();return!l||!l.properties?null:y.createElement(y.Fragment,null,l.properties.map(o=>{let s=o.type==="boolean",p=o.values&&o.values.length>0,E=p&&o.editor!=="select"&&o.values.length<=r;return y.createElement("div",{key:o.id,className:"vjs-inspector-field"},(!s||o.editor==="select"||o.editor==="radio")&&y.createElement("label",{className:"vjs-inspector-property-label"},o.label||o.id),o.type==="string"&&(p?E?y.createElement("div",{className:"vjs-radio-group"},o.values.map(f=>y.createElement("label",{key:le(f)},y.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,value:ke(f)})," ",le(f)))):y.createElement("select",{"vjs-att":o.id},o.values.map(f=>y.createElement("option",{key:f.value,value:f.value},f.label))):y.createElement("input",{type:"text","vjs-att":o.id,placeholder:o.description})),o.type==="number"&&(p?E?y.createElement("div",{className:"vjs-radio-group"},o.values.map(f=>y.createElement("label",{key:le(f)},y.createElement("input",{type:"radio","vjs-att":o.id,value:ke(f)})," ",le(f)))):y.createElement("select",{"vjs-att":o.id},o.values.map(f=>y.createElement("option",{key:le(f),value:ke(f)},le(f)))):y.createElement("input",{type:"number","vjs-att":o.id,placeholder:o.description,min:o.min,max:o.max})),s&&(o.editor==="select"?y.createElement("select",{"vjs-att":o.id,"vjs-datatype":"boolean"},y.createElement("option",{value:""}),y.createElement("option",{value:"true"},be(o,!0)),y.createElement("option",{value:"false"},be(o,!1))):o.editor==="radio"?y.createElement("div",{className:"vjs-radio-group"},y.createElement("label",null,y.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,"vjs-datatype":"boolean",value:"true"}),y.createElement("span",null,be(o,!0))),y.createElement("label",null,y.createElement("input",{type:"radio",name:o.id,"vjs-att":o.id,"vjs-datatype":"boolean",value:"false"}),y.createElement("span",null,be(o,!1)))):y.createElement("label",null,y.createElement("input",{type:"checkbox","vjs-datatype":"boolean","vjs-att":o.id})," ",o.label||o.id)),["string","number","boolean"].indexOf(o.type)===-1&&y.createElement("input",{type:"text","vjs-att":o.id,placeholder:o.description}),o.description&&y.createElement("div",{className:"vjs-field-desc"},o.description))}))}import se,{forwardRef as uo,useContext as Ot,useEffect as St,useImperativeHandle as po,useRef as ce,useState as ht}from"react";import*as Le from"react-dom";import{ELEMENT_DIV as bt,ELEMENT_SVG as mo,ElementTypes as fo,EVENT_GRAPH_CLEARED as Eo,EVENT_GROUP_REMOVED as go,EVENT_GROUP_UPDATED as Co,EVENT_NODE_REMOVED as xo,EVENT_NODE_UPDATED as yo,extend as Rt,isGroup as Po,renderPaper as Oo,CLASS_DEFAULT_NODE as So,CLASS_DEFAULT_GROUP as ho,OVERLAY_TYPE_CUSTOM as bo,EVENT_EDGE_REMOVED as Ro,EVENT_EDGE_UPDATED as vo,uuid as Do,partition as To,$svgNode as _o}from"@visuallyjs/browser-ui";var Jc=uo((e,r)=>{let t=ce(!1),n=ce(!1),a=Ot(ne),i=ce(null),l=ce(null),o=ce(null),s,p=Ot(W);p==null?(s=ce(null),p=Ie(s)):s=p.ref();let[E,f]=ht([]),[d,P]=ht([]),C=[],x=[];function A(){f(C.slice())}function V(){P(x.slice())}let I={getPaper:()=>s.current,getModel:()=>o.current};po(r,()=>I),St(()=>{var O;if(!n.current){n.current=!0,e.model!=null?o.current=e.model:a==null?o.current=new Q(e.modelOptions||{}):o.current=a,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",i.current.appendChild(l.current));let U=(c,u,S,v,m,h,R,z)=>{let[b,T]=h.component||h.jsx?[h,null]:Po(R)?[Object.assign(Object.assign({},h),{jsx:w=>se.createElement(se.Fragment,null,w.obj.data.label)}),ho]:[Object.assign(Object.assign({},h),{jsx:w=>se.createElement(se.Fragment,null,w.obj.data.label)}),So],M=m.containerType===fo.HTML?document.createElement(bt):_o(mo);l.current.appendChild(M),T!=null&&m.$addClassToElement(M,T);let re={data:u,model:S,ui:m,componentId:R.getFullId(),obj:R,props:e.childProps,element:M,eventInfo:z};C.push({data:u,def:b,payload:re,domElement:M,key:R.id,obj:R,hydrated:!1}),A()},L=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Z={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,S,v)=>{},render:U,rerender:(c,u,S,v,m,h,R,z,b)=>{let T=To(C,M=>M.obj!==R);C=T.left,A(),U(c,u,S,v,m,h,R,z),T.right.length>0&&setTimeout(()=>{L(null,T.right[0].domElement)})},cleanupVertex:L,cleanupPort:(c,u)=>{}},F=((O=e.viewOptions)==null?void 0:O.edges)||{};for(let c in F){let u=F[c];u.overlays!=null&&(u.overlays=u.overlays.map(S=>S.jsx!=null?{type:bo,options:{create:m=>{let h=document.createElement(bt);h.className=xe;let R={data:m.edge.data,model:o.current,ui:H,componentId:m.edge.getFullId(),obj:m.edge,props:e.childProps,element:h};return x.push({def:{jsx:S.jsx},data:m.edge.data,obj:m.edge,payload:R,domElement:h,key:Do(),hydrated:!1}),V(),h}}}:S))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions}),H=Oo(o.current,i.current,Z,K);p.set(H);let J=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=Rt(u.originalData,u.updates)),m},v=C.find(m=>m.key===c);v!=null&&(v.data=S(),A())},q=c=>{C=C.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=Rt(u.originalData,u.updates)),m},v=x.find(m=>m.obj.id===c);v!=null&&(v.data=S(),V())},me=c=>{x=x.filter(u=>u.payload.obj.id!==c),V()};o.current.bind(yo,c=>{J(c.vertex.getFullId(),c)}),o.current.bind(Co,c=>{J(c.vertex.getFullId(),c)}),o.current.bind(xo,c=>{q(c.node.id)}),o.current.bind(go,c=>{q(c.group.id)}),o.current.bind(Ro,c=>{me(c.edge.id)}),o.current.bind(vo,c=>{pe(c.edge.id,c)}),o.current.bind(Eo,()=>{C=[],A(),x=[],V()})}}),St(()=>{n.current&&o.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,o.current.clear(),o.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-paper`,D=e.style||{};return se.createElement("div",{ref:i,className:k,style:D},E.map(O=>Le.createPortal(he(O,o.current,s,e.childProps),O.domElement,O.key)),d.map(O=>Le.createPortal(Se(O,o.current,s,e.childProps),O.domElement,O.key)),se.createElement(W.Provider,{value:p},e.children))});import{MiniviewPlugin as No,Surface as Ao}from"@visuallyjs/browser-ui";import wo,{forwardRef as Vo,useEffect as Mo,useImperativeHandle as Io,useRef as vt}from"react";var tu=Vo((e,r)=>{let t=B(),n=oe(),a=vt(!1),i=vt(null),l;Io(r,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function o(s){s.addPlugin({type:No.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return Mo(()=>{a.current||(t!=null?(a.current=!0,o(t)):n!=null&&n.$ui instanceof Ao&&(a.current=!0,o(n.$ui)))},[t,n]),wo.createElement("div",{ref:i,className:`${e.className||""}`})});import{Inspector as Bo,log as jo,Surface as Uo}from"@visuallyjs/browser-ui";import ue,{forwardRef as Go,useContext as Re,useEffect as Dt,useImperativeHandle as ko,useRef as Fe,useState as He}from"react";var gu=Go((e,r)=>{let t=Re(_),n=Re(j),a=Re(W),i,l=Re(ye);l==null&&(i=Fe(null),l=ot(i));let[o,s]=He(null),[p,E]=He(0),[f,d]=He(null),P=Fe(!1),C=Fe(null),x=e.className||"";Dt(()=>{var D;(D=i==null?void 0:i.current)==null||D.$refresh()},[p]);let A=e.onSelectionCleared||(()=>s(null)),V=(D,O)=>{s(D),e.refresh&&e.refresh(D),E(U=>U+1)};function I(D){i.current=new Bo({container:C.current,ui:D,renderEmptyContainer:A,refresh:V,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(D):null}),d(i.current)}let k={getInspector:()=>f};return ko(r,()=>k),Dt(()=>{P.current||(P.current=!0,t!=null?t.listen(I):a!=null?a.listen(I):n!=null?n.listen(D=>{D.$ui instanceof Uo&&I(D.$ui)}):jo("WARN: InspectorComponent cannot resolve a ui to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),ue.createElement("div",{ref:C,className:x},ue.createElement(ye.Provider,{value:l},o!=null&&ue.createElement(ue.Fragment,null,typeof e.children=="function"?e.children(o,i.current.$ui.model):e.children||[]),o==null&&ue.createElement(ue.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var xu="group:added",yu="group:member:added",Pu="group:member:removed",Ou="group:removed",Su="dataLoadStart",hu="dataAppendStart",bu="dataLoadEnd",Ru="dataAppendEnd",vu="dataUpdated",Du="graphClearStart",Tu="graphCleared",_u="graphChanged",Nu="group:updated",Au="node:updated",wu="port:updated",Vu="edge:updated",Mu="edge:added",Iu="node:added",Bu="edge:removed",ju="node:removed",Uu="port:added",Gu="port:removed",ku="edge:target",Lu="edge:source",Tt="select",_t="deselect",Nt="selection:cleared",Fu="edge:geometry",Hu="edge:pathEdited",zu="edge:dragStart",Wu="edge:drag",Ju="edge:dragEnd",$u="edge:dragAbort",Xu="edge:typeChanged",Yu="node:typeChanged",Zu="port:typeChanged",Ku="group:typeChanged",qu="group:move:start",Qu="group:move",ed="group:move:end",td="internal:group:sizeChanged",rd="internal:group:sizeChangedRedo",od="internal:group:sizeChangedUndo",nd="internal:edge:redraw",ad="renderer:added",id="node:move:start",ld="node:move",sd="node:move:end",cd="node:move:abort",ud="undoredo:update",dd="undo",pd="redo",md="destroy";import g,{useEffect as Lo,useRef as ve,useState as G}from"react";import{EVENT_UNDOREDO_UPDATE as Fo,FALSE as De,LASSO_PATH as Ho,LASSO_VIEW_BOX as zo,LassoPlugin as Wo,PAN_PATH as Jo,PAN_VIEW_BOX as $o,Surface as Xo,SURFACE_MODE_PAN as At,SURFACE_MODE_SELECT as wt,TRUE as Vt,UNDO_PATH as Yo,UNDO_VIEW_BOX as Zo,REDO_PATH as Ko,REDO_VIEW_BOX as qo,ZOOM_TO_FIT_PATH as Qo,ZOOM_TO_FIT_VIEW_BOX as en,EVENT_SURFACE_MODE_CHANGED as tn,ZOOM_IN_OUT_VIEW_BOX as Mt,ZOOM_IN_PATH as rn,ZOOM_OUT_PATH as on,RESET_SELECTION_PATH as nn,RESET_SELECTION_VIEW_BOX as an,CLEAR_PATH as ln,CLEAR_VIEW_BOX as sn,CLASS_CONTROLS_RESET_SELECTION as cn,supportsPathEditing as un}from"@visuallyjs/browser-ui";var It="can-undo",Bt="can-redo",ze="vjs-selected-mode",jt="vjs-controls-has-selection";function Dd(e){let r="Clear selection",t=B(),n=oe(),[a,i]=G("row"),[l,o]=G(!1),[s,p]=G(!1),E=ve(null),f=ve(!1),d=ve(null),[P,C]=G("Clear dataset?"),x=ve(null),[A,V]=G(!0),[I,k]=G(!1),[D,O]=G(!0),[U,L]=G(!0),[Z,F]=G([]),[K,H]=G([]);function J(b){d.current=b,e.clearMessage&&C(e.clearMessage),e.onMaybeClear&&(x.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&O(!1),e.zoomToExtents===!1&&V(!1),e.zoomButtons===!0&&k(!0),e.clear===!1&&L(!1);let T=(e.buttons||[]).filter(w=>w.mode!=null);F(T);let M=(e.buttons||[]).filter(w=>w.mode==null);H(M),b.bind(tn,w=>{b.removeClass(b.$getSelector(E.current,"[data-mode]"),ze),b.addClass(b.$getSelector(E.current,"[data-mode='"+w+"']"),ze)}),b.model.bind(Fo,w=>{E.current.setAttribute(It,w.undoCount>0?Vt:De),E.current.setAttribute(Bt,w.redoCount>0?Vt:De)}),b.model.bind(Tt,R),b.model.bind(_t,R),b.model.bind(Nt,R);let re=b.getPlugin(Wo.type);o(re!=null),p(re!=null||T.length>0),E.current.setAttribute(It,De),E.current.setAttribute(Bt,De)}function q(){d.current.model.clearSelection(),d.current.zoomToFit()}function pe(){d.current.zoomIn()}function me(){d.current.zoomOut()}function c(){d.current.setMode(At)}function u(){d.current.setMode(wt)}function S(){d.current.model.clearSelection(),un(d.current)&&d.current.stopEditingPath()}function v(){x.current!=null?x.current(()=>d.current.model.clear()):window.confirm(P)&&d.current.model.clear()}function m(){d.current.model.undo()}function h(){d.current.model.redo()}let R=()=>{d.current.model.getSelection().isEmpty()?E.current.removeAttribute(jt):E.current.setAttribute(jt,"true")};Lo(()=>{f.current===!1&&(t!=null?(f.current=!0,J(t)):n!=null&&n.$ui instanceof Xo&&(f.current=!0,J(n.$ui)))},[t,n]);let z=e.style||{};return g.createElement("div",{style:z,ref:E,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&g.createElement("i",{className:"vjs-pan-mode "+ze,"data-mode":At,title:"Pan Mode",onClick:()=>c()},g.createElement("svg",{fill:"none",viewBox:$o,stroke:"currentColor"},g.createElement("path",{d:Jo}))),l&&g.createElement("i",{className:"vjs-select-mode","data-mode":wt,title:"Select Mode",onClick:()=>u()},g.createElement("svg",{fill:"currentColor",viewBox:zo,stroke:"currentColor"},g.createElement("path",{d:Ho}))),Z.map(b=>g.createElement("i",{className:b.class,title:b.title,onClick:T=>b.handler(T,b.id)})),A&&g.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>q()},g.createElement("svg",{viewBox:en,stroke:"currentColor",fill:"currentColor"},g.createElement("path",{d:Qo}))),I&&g.createElement(g.Fragment,null,g.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>pe()},g.createElement("svg",{viewBox:Mt,stroke:"currentColor",fill:"currentColor"},g.createElement("path",{d:rn}))),g.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>me()},g.createElement("svg",{viewBox:Mt,stroke:"currentColor",fill:"currentColor"},g.createElement("path",{d:on})))),D&&g.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>m()},g.createElement("svg",{viewBox:Zo,stroke:"currentColor",fill:"none"},g.createElement("path",{d:Yo,strokeWidth:"2"}))),D&&g.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>h()},g.createElement("svg",{viewBox:qo,stroke:"currentColor",fill:"none"},g.createElement("path",{d:Ko,strokeWidth:"2"}))),g.createElement("i",{className:cn,title:r,onClick:()=>S()},g.createElement("svg",{viewBox:an,stroke:"currentColor",fill:"currentColor"},g.createElement("path",{d:nn}))),U&&g.createElement("i",{className:"vjs-clear-dataset",title:P,onClick:()=>v()},g.createElement("svg",{viewBox:sn,stroke:"currentColor",fill:"currentColor"},g.createElement("path",{d:ln}))),K.map(b=>g.createElement("i",{className:b.class,title:b.title,onClick:T=>b.handler(T,b.id)})))}import X,{useEffect as dn,useRef as Ut,useState as Y}from"react";import{SvgExportUI as pn,ImageExportUI as Gt,Surface as mn,CLASS_CONTROLS as fn,CLASS_EXPORT_CONTROLS as En}from"@visuallyjs/browser-ui";function Wd(e){let r=Ut(!1),t=Ut(null),n=B(),a=oe(),[i,l]=Y(!0),[o,s]=Y("Export :"),[p,E]=Y(null),[f,d]=Y(null),[P,C]=Y(null),[x,A]=Y(!0),[V,I]=Y(!0),[k,D]=Y(!0);function O(F){t.current=F,e.label&&s(o),e.showLabel!=null&&l(e.showLabel),e.margins&&E(e.margins);let K=e.svgOptions||{};d(K);let H=e.imageOptions||{};C(H),e.allowJpgExport!=null&&D(e.allowJpgExport),e.allowPngExport!=null&&I(e.allowPngExport),e.allowSvgExport!=null&&A(e.allowSvgExport)}function U(){new pn(t.current).export(f)}function L(){new Gt(t.current).export(P)}function Z(){new Gt(t.current).export(Object.assign(P||{},{type:"image/jpeg"}))}return dn(()=>{r.current===!1&&(n!=null?(r.current=!0,O(n)):a!=null&&a.$ui instanceof mn&&(r.current=!0,O(a.$ui)))},[n,a]),X.createElement("div",{className:`${fn} ${En}`},i&&X.createElement("span",null,o),x&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportSvg",onClick:()=>U()},"SVG")),V&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportPng",onClick:()=>L()},"PNG")),k&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Z()},"JPG")))}import gn,{forwardRef as Cn,useContext as xn,useEffect as yn,useRef as We}from"react";import{log as kt,ShapePalette as Pn}from"@visuallyjs/browser-ui";var rp=Cn((e,r)=>{let t=We(!1),n=We(null),a=xn(_),i=We(null),l=e.className||"";function o(s){s.getShapeLibrary()!=null?i.current=new Pn(s,{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,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap,preparedShapes:e.preparedShapes,allowDropOnEdge:e.allowDropOnEdge,showGroups:e.showGroups!==!1}):kt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return yn(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>o(s)):e.surface!=null?o(e.surface):kt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),gn.createElement("div",{ref:n,className:l})});import On,{useEffect as Sn,useRef as hn}from"react";import{CLASS_SHAPE as bn,convertToMultilineText as Rn,DEFAULT_LABEL_FILL_RATIO as vn}from"@visuallyjs/browser-ui";var Dn=120,Tn=90;function dp(e){let r=hn(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function a(){return e.ctx.obj.data.outline||"#000000"}function i(){return e.ctx.obj.data.width||Dn}function l(){return e.ctx.obj.data.height||Tn}function o(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return Sn(()=>{let p=e.ctx.obj.data,E=e.ctx.ui.getShapeLibrary(),f=E.renderCompiledShape(p);if(r.current.replaceChildren(f),e.showLabels){let d=E.renderShapeLabel(p,s(),e.labelStrokeWidth,null,o(),o(),e.font);r.current.appendChild(d),e.multilineLabels!=!1&&Rn(d,p[s()]||"",i()*(e.labelFillRatio||vn),e.labelPosition)}}),On.createElement("svg",{className:bn,ref:r,strokeWidth:t(),fill:n(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}import _n,{forwardRef as Nn,useContext as An,useEffect as wn,useRef as Je}from"react";import{log as Vn,Palette as Mn,defaultDataGenerator as In}from"@visuallyjs/browser-ui";var Dp=Nn((e,r)=>{let t=Je(!1),n=Je(null),a=An(_),i=Je(null),l=e.className||"";function o(s){let p={selector:e.selector,source:n.current,dataGenerator:E=>e.dataGenerator?e.dataGenerator(E):In(E),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};i.current=new Mn(s,p)}return wn(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>o(s)):e.surface!=null?o(e.surface):Vn("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),_n.createElement("div",{className:l,ref:n},e.children)});import Te,{useEffect as Bn,useState as jn,useRef as Lt}from"react";import{CLASS_COLOR_PICKER as Un,CLASS_COLOR_PICKER_SWATCH as Gn,CLASS_COLOR_PICKER_SWATCHES as kn,EVENT_CONTEXT_UPDATE as Ft,EVENT_CHANGE as $e,INSPECTOR_CONTEXT_RECENT_COLORS as _e}from"@visuallyjs/browser-ui";function wp(e){let r=e.maxColors||10,t=Lt(null),n=Lt(!1),a=$(),[i,l]=jn(a.ensureContext(_e,()=>[]));function o(d){let P=a.ensureContext(_e,()=>[]);if(d=d.toUpperCase(),!(P.find(x=>x.toUpperCase()===d)!=null)){let x=P.slice();x.unshift(d),x.length>r&&(x.length=r),a.updateContext(_e,x)}}function s(){let d=t.current.value;a.setValue(e.propertyName,d,null),o(d)}function p(d){a.setValue(e.propertyName,d,null),t.current.value=d}let E=d=>{d.key===_e&&l(d.value.slice())};function f(){let d=a.getValue(e.propertyName);d!=null&&t.current&&o(d)}return Bn(()=>(a.bind(Ft,E),a.bind($e,f),n.current||(n.current=!0,t.current.addEventListener($e,s)),setTimeout(f),()=>{a.unbind(Ft,E),a.unbind($e,f)})),Te.createElement("div",{className:Un},Te.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),Te.createElement("div",{className:kn},i.map(d=>Te.createElement("div",{key:d,title:d,className:Gn,style:{backgroundColor:d},"data-color":d,onClick:()=>p(d)}))))}import Ln,{forwardRef as Fn,useContext as Hn,useEffect as zn,useRef as Xe}from"react";import{log as Wn,DiagramPalette as Jn}from"@visuallyjs/browser-ui";var Jp=Fn((e,r)=>{let t=Xe(!1),n=Xe(null),a=Hn(j),i=Xe(null),l=e.className||"";function o(p){i.current=new Jn(n.current,p,{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,allowDropOnEdge:e.allowDropOnEdge,autoEdgeConnect:e.autoEdgeConnect,showGroups:e.showGroups!==!1,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap})}zn(()=>{t.current||(t.current=!0,a!=null?a.listen(p=>o(p)):e.diagram!=null?o(e.diagram):Wn("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return Ln.createElement("div",{ref:n,className:l,style:s})});import $n,{useContext as Ht,useEffect as te,useRef as de}from"react";function N(e){let r=de(null),t=de(!1),n=de(!1),a=de(null),i=de(null),l=de(e);te(()=>{l.current=e});let o=e.style||{},s=Ht(_),p=Ht(j);function E(P){let C=l.current;return Object.assign({dataSource:P,dataSourceFilter:e.dataSourceFilter},e.options)}function f(P){var x;(x=a.current)==null||x.destroy(),i.current=P;let C=E(P);a.current=l.current.createChart(r.current,C),n.current=!0}function d(){var C;(C=a.current)==null||C.destroy(),i.current=null;let P=E();a.current=l.current.createChart(r.current,P),l.current.data?a.current.load({data:l.current.data},()=>{n.current=!0}):l.current.url?a.current.load({url:l.current.url},()=>{n.current=!0}):n.current=!0}return te(()=>{t.current||(t.current=!0,s!=null?s.listen(P=>{f(P.model)}):p!=null?p.listen(P=>{f(P.model)}):d())}),e.reactive!==!1&&(te(()=>{n.current&&e.data!=null&&a.current&&a.current.load({data:e.data})},[e.data]),te(()=>{n.current&&e.url!=null&&a.current&&a.current.load({url:e.url})},[e.url]),te(()=>{n.current&&e.pivot!=null&&a.current&&a.current.pivot&&a.current.pivot(e.pivot)},[e.pivot]),te(()=>{n.current&&e.dataSourceFilter!=null&&a.current&&a.current.setDataSourceFilter&&a.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter]),te(()=>{n.current&&(i.current?f(i.current):s==null&&p==null&&d())},[e.options])),$n.createElement("div",{ref:r,style:o,className:`${e.className||""}`})}import{ColumnChart as Xn}from"@visuallyjs/browser-ui";function um(e){let r=Object.assign({createChart:(t,n)=>new Xn(t,n)},e);return N(r)}import{BarChart as Yn}from"@visuallyjs/browser-ui";function xm(e){let r=Object.assign({createChart:(t,n)=>new Yn(t,n)},e);return N(r)}import{CategoryValueChart as Zn}from"@visuallyjs/browser-ui";function vm(e){let r=Object.assign({createChart:(t,n)=>new Zn(t,n)},e);return N(r)}import{LineChart as Kn}from"@visuallyjs/browser-ui";function Mm(e){let r=Object.assign({createChart:(t,n)=>new Kn(t,n)},e);return N(r)}import{AreaChart as qn}from"@visuallyjs/browser-ui";function Fm(e){let r=Object.assign({createChart:(t,n)=>new qn(t,n)},e);return N(r)}import{PieChart as Qn}from"@visuallyjs/browser-ui";function Zm(e){let r=Object.assign({createChart:(t,n)=>new Qn(t,n)},e);return N(r)}import{ScatterChart as ea}from"@visuallyjs/browser-ui";function nf(e){let r=Object.assign({createChart:(t,n)=>new ea(t,n)},e);return N(r)}import{BubbleChart as ta}from"@visuallyjs/browser-ui";function mf(e){let r=Object.assign({createChart:(t,n)=>new ta(t,n)},e);return N(r)}import{GaugeChart as ra}from"@visuallyjs/browser-ui";function Of(e){let r=Object.assign({createChart:(t,n)=>new ra(t,n)},e);return N(r)}import{SankeyChart as oa}from"@visuallyjs/browser-ui";function Nf(e){let r=Object.assign({createChart:(t,n)=>new oa(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),N(r)}import{log as na}from"@visuallyjs/browser-ui";import aa,{useContext as ia,useEffect as la,useRef as zt}from"react";function Wt(e){let r=zt(!1),t=zt(null),n=ia(_),a=e.position||{x:0,y:0};function i(l){e.placement==="fixed"?l.fixElement(t.current,a,e.constraints):l.floatElement(t.current,a)}return la(()=>{r.current||(r.current=!0,n!=null?n.listen(l=>i(l)):na("Decorator cannot mount: no SurfaceContext from a provider found"))}),aa.createElement("div",{ref:t},e.children)}import{log as sa,BackgroundPlugin as ca,GeneratedGridBackground as ua,TiledBackground as da,SimpleBackground as pa}from"@visuallyjs/browser-ui";import Jt,{useEffect as ma,useRef as fa}from"react";function Ye(e){let r=fa(!1),t=B();return ma(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:ca.type,options:e})}catch(n){sa(`WARN: BackgroundComponent could not mount background ${n}`)}}},[t]),Jt.createElement(Jt.Fragment,null)}function lE(e){return Ye(Ne({type:ua.type},e))}function sE(e){return Ye({type:pa.type,url:e.url})}function cE(e){return Ye(Ne({type:da.type},e))}import{useEffect as Ea}from"react";import{EVENT_DATA_UPDATED as $t,EVENT_GRAPH_CLEARED as Xt}from"@visuallyjs/browser-ui";function CE(e){let r=st();Ea(()=>{if(r!=null){let t=()=>e(r);return r.bind($t,t),r.bind(Xt,t),t(),()=>{r.unbind($t,t),r.unbind(Xt,t)}}},[r])}import{useState as Yt,useEffect as Zt}from"react";import{EVENT_ZOOM as Kt}from"@visuallyjs/browser-ui";function RE(e){let r=B(),t=at(),[n,a]=Yt(e),[i,l]=Yt(()=>(n==null?void 0:n.getZoom())||1);return Zt(()=>{if(n!=null){let o=s=>{l(s.zoom)};return n.bind(Kt,o),l(n.getZoom()),()=>{n.unbind(Kt,o)}}},[n]),Zt(()=>{r!=null&&a(r),t!=null&&a(t)},[r,t]),i}export{Bt as ATTRIBUTE_CAN_REDO,It as ATTRIBUTE_CAN_UNDO,Fm as AreaChartComponent,Ye as BackgroundComponent,xm as BarChartComponent,Q as BrowserUIReactModel,mf as BubbleChartComponent,we as CLASS_REACT_GROUP,Ae as CLASS_REACT_NODE,xe as CLASS_REACT_OVERLAY,ze as CLASS_SELECTED_MODE,wp as ColorPickerComponent,um as ColumnChartComponent,Dd as ControlsComponent,Tn as DEFAULT_SHAPE_HEIGHT,Dn as DEFAULT_SHAPE_WIDTH,Wt as DecoratorComponent,Rl as DiagramComponent,j as DiagramContext,Jp as DiagramPaletteComponent,bl as DiagramProvider,tc as EdgePropertyMappingsInspector,nt as EdgeTypePickerComponent,Wd as ExportControlsComponent,Of as GaugeChartComponent,lE as GridBackgroundComponent,sE as ImageBackgroundComponent,gu as InspectorComponent,ye as InspectorContext,Ve as JSXWrapper,Mm as LineChartComponent,tu as MiniviewComponent,Dp as PaletteComponent,Jc as PaperComponent,W as PaperContext,ll as PaperProvider,Zm as PieChartComponent,Nf as SankeyChartComponent,nf as ScatterChartComponent,dp as ShapeComponent,rp as ShapePaletteComponent,sc as ShapePropertiesInspector,Gs as SurfaceComponent,_ as SurfaceContext,ao as SurfacePopup,Vi as SurfaceProvider,cE as TiledImageBackgroundComponent,ne as VisuallyJsContext,Fl as VisuallyJsProvider,vm as XYChartComponent,lt as createDiagramRef,ot as createInspectorRef,Ie as createPaperRef,ee as createRefHandler,Ee as createSurfaceRef,Pa as getSurfaceComponent,rt as newInstance,et as registerSurface,oe as useDiagram,$ as useInspector,at as usePaper,B as useSurface,st as useVisuallyJsModel,CE as useVisuallyJsUpdate,RE as useZoom};
1
+ var Qt=Object.defineProperty;var Ze=Object.getOwnPropertySymbols;var er=Object.prototype.hasOwnProperty,tr=Object.prototype.propertyIsEnumerable;var Ke=(e,n,t)=>n in e?Qt(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,Ne=(e,n)=>{for(var t in n||(n={}))er.call(n,t)&&Ke(e,t,n[t]);if(Ze)for(var t of Ze(n))tr.call(n,t)&&Ke(e,t,n[t]);return e};import{log as qe}from"@visuallyjs/browser-ui";var Qe=new Map,fe={};function et(e,n){Qe.set(e,n),rr(e,n)}function rr(e,n){(fe[e]||[]).forEach(o=>{try{o(n)}catch(a){qe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete fe[e]}function Sa(e,n){let t=Qe.get(e);if(t)try{n(t)}catch(o){qe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}else fe[e]=fe[e]||[],fe[e].push(n)}var Ae="vjs-react-node",we="vjs-react-group",xe="vjs-react-overlay";import tt,{useEffect as nr,useRef as or}from"react";function Ve(e){let n=or(!1);return nr(()=>{n.current||(n.current=!0,e.cb(e.ns))}),tt.createElement(tt.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,vertex:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}import{BrowserUIModel as ar,log as ir}from"@visuallyjs/browser-ui";var Q=class extends ar{render(n,t){return ir("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function rt(e){return e=e||{},new Q(e)}import{createContext as lr,default as sr,useRef as cr,useContext as ur,useState as dr,useEffect as pr}from"react";var _=lr(null);function Ii(e){let n=cr(null),t=Ee(n);return sr.createElement(_.Provider,{value:t},e.children||[])}function Ee(e){return ee(e)}function ee(e){let n=[];return{set:t=>{e.current=t,n.forEach(o=>o(t))},listen:t=>{e.current==null?n.push(t):t(e.current)},ref:()=>e}}function B(){let e=ur(_),[n,t]=dr(null);return pr(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import{createContext as mr,useContext as fr}from"react";var ye=mr(null);function nt(e){return ee(e)}function $(){let e=fr(ye);return e==null?null:e.ref().current}import Er,{useRef as Me,useEffect as gr}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Cr,EdgeTypePicker as xr}from"@visuallyjs/browser-ui";function ot(e){let n=Me(!1),t=Me(null),o=Me(null),a=$(),{propertyName:i}=e,l=()=>a.getFromContext(Cr)||a.$ui.$getEdgePropertyMappings();return gr(()=>{n.current||(n.current=!0,o.current=new xr(a.$ui,t.current,l(),a.getValue(i),(r,s)=>{a.setValue(i,s,null)}),o.current.render(i,a.rt),a.onChange(()=>{o.current.reset(),o.current.select(i,a.getValue(i))}))}),Er.createElement("div",{ref:t})}import{createContext as yr,default as Pr,useRef as Or,useContext as Sr,useState as hr,useEffect as br}from"react";var W=yr(null);function cl(e){let n=Or(null),t=Ie(n);return Pr.createElement(W.Provider,{value:t},e.children||[])}function Ie(e){return ee(e)}function at(){let e=Sr(W),[n,t]=hr(null);return br(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import Pe,{createContext as Rr,forwardRef as vr,useContext as Be,useEffect as it,useImperativeHandle as Dr,useRef as ge,useState as Tr}from"react";import{createDiagram as _r}from"@visuallyjs/browser-ui";var j=Rr(null);function lt(e){return ee(e)}function vl(e){let n=ge(null),t=lt(n);return Pe.createElement(j.Provider,{value:t},e.children||[])}function ne(){let e=Be(j),[n,t]=Tr(null);return it(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}var Dl=vr((e,n)=>{let t=ge(null),o=ge(!1),a,i,l=Be(j);l==null?(a=ge(null),l=lt(a)):a=l.ref();let r=Be(_);r==null?(i=ge(null),r=Ee(i)):i=r.ref();let s={getDiagram:()=>a.current};Dr(n,()=>s),it(()=>{o.current||(o.current=!0,a.current=_r(t.current,e.options,e.modelOptions),i.current=a.current.$ui,e.data?a.current.load({data:e.data}):e.url&&a.current.load({url:e.url}),l.set(a.current),r.set(i.current))});let p=`${e.className||""} vjs-react-diagram`,E=e.style||{};return Pe.createElement("div",{ref:t,className:p,style:E},Pe.createElement(_.Provider,{value:r},Pe.createElement(j.Provider,{value:l},e.children)))});import Nr,{createContext as Ar,useContext as Oe,useEffect as je,useMemo as wr,useState as Vr}from"react";var oe=Ar(void 0);function zl(e){let n=wr(()=>rt(e.modelOptions||{}),[]);function t(a,i){n.clear(),n.load({data:a,dataType:i})}function o(a,i){n.clear(),n.load({url:a,dataType:i})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),je(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),je(()=>{e.url!=null&&o(e.url,e.dataType)},[e.url]),Nr.createElement(oe.Provider,{value:n},e.children||[])}function st(){let e=Oe(oe),n=Oe(_),t=Oe(W),o=Oe(j),[a,i]=Vr(e);return je(()=>{if(e){i(e);return}let l;n!=null&&(n.ref().current?i(n.ref().current.model):(l=p=>{i(p.model)},n.listen(l)));let r;t!=null&&(t.ref().current?a==null&&i(t.ref().current.model):(r=p=>{a==null&&i(p.model)},t.listen(r)));let s;o!=null&&(o.ref().current?a==null&&i(o.ref().current.model):(s=p=>{a==null&&i(p.model)},o.listen(s)))}),a}import ct from"react";import{addClass as ut,isGroup as dt,ATTRIBUTE_NOT_DRAGGABLE as pt,TRUE as mt}from"@visuallyjs/browser-ui";function Mr(e,n){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&ut(e.domElement.firstElementChild,t),e.hydrated=!0}else n.current.$revalidateElement(e.domElement)}function Se(e,n,t,o){return ct.createElement(Ve,{ns:e,model:n,ui:t.current,childProps:o,cb:a=>{Mr(a,t)}})}function he(e,n,t,o){return ct.createElement(Ve,{ns:e,model:n,ui:t.current,childProps:o,cb:a=>{Ir(a,t)}})}function Ir(e,n){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&(ut(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(pt)===mt&&e.domElement.setAttribute(pt,mt)),n.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else n.current.$revalidateElement(e.domElement)}import ae,{forwardRef as Br,useContext as ft,useEffect as Et,useImperativeHandle as jr,useRef as ie,useState as gt}from"react";import*as Ue from"react-dom";import{ELEMENT_DIV as Ct,ELEMENT_SVG as Ur,ElementTypes as Gr,EVENT_GRAPH_CLEARED as kr,EVENT_GROUP_REMOVED as Lr,EVENT_GROUP_UPDATED as Fr,EVENT_NODE_REMOVED as Hr,EVENT_NODE_UPDATED as zr,extend as xt,isGroup as Wr,renderSurface as Jr,CLASS_DEFAULT_NODE as $r,CLASS_DEFAULT_GROUP as Xr,OVERLAY_TYPE_CUSTOM as Yr,EVENT_EDGE_REMOVED as Zr,EVENT_EDGE_UPDATED as Kr,uuid as qr,partition as Qr,$svgNode as en}from"@visuallyjs/browser-ui";var Ls=Br((e,n)=>{let t=ie(!1),o=ie(!1),a=ft(oe),i=ie(null),l=ie(null),r=ie(a),s,p=ft(_);p==null?(s=ie(null),p=Ee(s)):s=p.ref();let[E,f]=gt([]),[d,P]=gt([]),x=[],y=[];function A(){f(x.slice())}function V(){P(y.slice())}let I={getSurface:()=>s.current,getModel:()=>r.current};jr(n,()=>I),Et(()=>{var O;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,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",i.current.appendChild(l.current));let U=(c,u,S,v,m,h,R,z)=>{let[b,T]=h.component||h.jsx?[h,null]:Wr(R)?[Object.assign(Object.assign({},h),{jsx:w=>ae.createElement(ae.Fragment,null,w.obj.data.label)}),Xr]:[Object.assign(Object.assign({},h),{jsx:w=>ae.createElement(ae.Fragment,null,w.obj.data.label)}),$r],M=m.containerType===Gr.HTML?document.createElement(Ct):en(Ur);l.current.appendChild(M),T!=null&&m.$addClassToElement(M,T);let re={data:u,model:S,ui:m,componentId:R.getFullId(),obj:R,props:e.childProps,element:M,eventInfo:z};x.push({data:u,def:b,payload:re,domElement:M,key:R.id,obj:R,hydrated:!1}),A()},L=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Z={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,S,v)=>{},render:U,rerender:(c,u,S,v,m,h,R,z,b)=>{let T=Qr(x,M=>M.obj!==R);x=T.left,A(),U(c,u,S,v,m,h,R,z),T.right.length>0&&setTimeout(()=>{L(null,T.right[0].domElement)})},cleanupVertex:L,cleanupPort:(c,u)=>{}},F=((O=e.viewOptions)==null?void 0:O.edges)||{};for(let c in F){let u=F[c];u.overlays!=null&&(u.overlays=u.overlays.map(S=>S.jsx!=null?{type:Yr,options:{create:m=>{let h=document.createElement(Ct);h.className=xe;let R={data:m.edge.data,model:r.current,ui:H,componentId:m.edge.getFullId(),obj:m.edge,props:e.childProps,element:h};return y.push({def:{jsx:S.jsx},data:m.edge.data,obj:m.edge,payload:R,domElement:h,key:qr(),hydrated:!1}),V(),h}}}:S))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),H=Jr(r.current,i.current,Z,K);p.set(H),e.surfaceId!=null&&et(e.surfaceId,I);let J=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=xt(u.originalData,u.updates)),m},v=x.find(m=>m.key===c);v!=null&&(v.data=S(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=xt(u.originalData,u.updates)),m},v=y.find(m=>m.obj.id===c);v!=null&&(v.data=S(),V())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),V()};r.current.bind(zr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(Fr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(Hr,c=>{q(c.node.id)}),r.current.bind(Lr,c=>{q(c.group.id)}),r.current.bind(Zr,c=>{me(c.edge.id)}),r.current.bind(Kr,c=>{pe(c.edge.id,c)}),r.current.bind(kr,()=>{x=[],A(),y=[],V()})}}),Et(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,r.current.clear(),r.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-surface`,D=e.style||{};return ae.createElement("div",{ref:i,className:k,style:D},E.map(O=>Ue.createPortal(he(O,r.current,s,e.childProps),O.domElement,O.key)),d.map(O=>Ue.createPortal(Se(O,r.current,s,e.childProps),O.domElement,O.key)),ae.createElement(_.Provider,{value:p},e.children))});import tn,{useEffect as rn,useMemo as nn,useRef as Ge,useState as yt}from"react";import{PopupHandler as on,CLASS_SURFACE_POPUP as an}from"@visuallyjs/browser-ui";function ln(e){let n=B(),t=Ge(null),o=Ge(!1),a=Ge(null),[i,l]=yt(null),[r,s]=yt(0),p=nn(()=>i==null?"none":"block",[i]);function E(d){l(d),s(P=>P+1)}rn(()=>{!o.current&&n&&(o.current=!0,a.current=new on(e.selector,t.current,n,d=>E(d),e.anchor))});function f(){a.current&&a.current.$hide()}return tn.createElement("div",{ref:t,className:an,style:{display:p,position:"absolute"}},i!=null&&e.children(i,n.model,n,()=>f()))}import Ce from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as sn}from"@visuallyjs/browser-ui";function nc(e){let n=$(),t=e.cssClass||"vjs-inspector-section",o=()=>e.mappings?e.mappings:n.getFromContext(sn)||n.$ui.$getEdgePropertyMappings();function a(r){let s=r.property;return Array.isArray(s)?s:[s]}function i(r){return a(r).join(" ")}function l(r){return e.getPropertyName?e.getPropertyName(r):r.name||i(r)}return Ce.createElement(Ce.Fragment,null,o().map(r=>{let s=i(r),p=l(r);return Ce.createElement("div",{className:t,key:s},e.showName!==!1&&Ce.createElement("div",null,p),Ce.createElement(ot,{propertyName:s}))}))}import be,{useEffect as cn,useState as un,useRef as Pt}from"react";import{CLASS_COLOR_PICKER as dn,CLASS_COLOR_PICKER_SWATCH as pn,CLASS_COLOR_PICKER_SWATCHES as mn,EVENT_CONTEXT_UPDATE as Ot,EVENT_CHANGE as ke,INSPECTOR_CONTEXT_RECENT_COLORS as Re}from"@visuallyjs/browser-ui";function St(e){let n=e.maxColors||10,t=Pt(null),o=Pt(!1),a=$(),[i,l]=un(a.ensureContext(Re,()=>[]));function r(d){let P=a.ensureContext(Re,()=>[]);if(d=d.toUpperCase(),!(P.find(y=>y.toUpperCase()===d)!=null)){let y=P.slice();y.unshift(d),y.length>n&&(y.length=n),a.updateContext(Re,y)}}function s(){let d=t.current.value;a.setValue(e.propertyName,d,null),r(d)}function p(d){a.setValue(e.propertyName,d,null),t.current.value=d}let E=d=>{d.key===Re&&l(d.value.slice())};function f(){let d=a.getValue(e.propertyName);d!=null&&t.current&&r(d)}return cn(()=>(a.bind(Ot,E),a.bind(ke,f),o.current||(o.current=!0,t.current.addEventListener(ke,s)),setTimeout(f),()=>{a.unbind(Ot,E),a.unbind(ke,f)})),be.createElement("div",{className:dn},be.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),be.createElement("div",{className:mn},i.map(d=>be.createElement("div",{key:d,title:d,className:pn,style:{backgroundColor:d},"data-color":d,onClick:()=>p(d)}))))}import g from"react";import{isNode as fn,isString as ht}from"@visuallyjs/browser-ui";var En=7,gn=["True","False"];function ve(e,n){return(e.booleanLabels||gn)[n?0:1]}function le(e){return ht(e)?e:e.label}function Le(e){return ht(e)?e:e.value}function Cn(e,n,t){let o=t==null?void 0:t.getValue(e.id);return o==null&&(o=e.id.split(".").reduce((a,i)=>a==null?a:a[i],n.data)),o==null&&(o=e.defaultValue),o==null?"":typeof o=="object"?JSON.stringify(o)||"":String(o)}function gc({vertex:e,maxRadios:n}){if(!e||!fn(e))return null;let{type:t,category:o}=e.data;if(!t||!o)return null;n=n==null?En:n;let a=$();function i(){if(a==null)return null;let s=a.$ui.getShapeLibrary().getShapeSet(o);return s?s.shapes.find(p=>p.type===t):null}let l=i();return!l||!l.properties?null:g.createElement(g.Fragment,null,l.properties.map(r=>{let s=r.type==="boolean",p=r.values&&r.values.length>0,E=p&&r.editor!=="select"&&r.values.length<=n;return g.createElement("div",{key:r.id,className:"vjs-inspector-field"},(r.readOnly||!s||r.editor==="select"||r.editor==="radio")&&g.createElement("label",{className:"vjs-inspector-property-label"},r.label||r.id),r.readOnly?g.createElement("output",{className:"vjs-inspector-property-value"},Cn(r,e,a)):null,!r.readOnly&&r.type==="string"&&(p?E?g.createElement("div",{className:"vjs-radio-group"},r.values.map(f=>g.createElement("label",{key:le(f)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:Le(f)})," ",le(f)))):g.createElement("select",{"vjs-att":r.id},r.values.map(f=>g.createElement("option",{key:f.value,value:f.value},f.label))):g.createElement("input",{type:"text","vjs-att":r.id,placeholder:r.description})),!r.readOnly&&r.type==="number"&&(p?E?g.createElement("div",{className:"vjs-radio-group"},r.values.map(f=>g.createElement("label",{key:le(f)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:Le(f)})," ",le(f)))):g.createElement("select",{"vjs-att":r.id},r.values.map(f=>g.createElement("option",{key:le(f),value:Le(f)},le(f)))):g.createElement("input",{type:"number","vjs-att":r.id,placeholder:r.description,min:r.min,max:r.max})),!r.readOnly&&r.type==="text"&&g.createElement("textarea",{rows:5,"vjs-att":r.id,placeholder:r.description}),!r.readOnly&&r.type==="color"&&g.createElement(St,{propertyName:r.id}),!r.readOnly&&s&&(r.editor==="select"?g.createElement("select",{"vjs-att":r.id,"vjs-datatype":"boolean"},g.createElement("option",{value:""}),g.createElement("option",{value:"true"},ve(r,!0)),g.createElement("option",{value:"false"},ve(r,!1))):r.editor==="radio"?g.createElement("div",{className:"vjs-radio-group"},g.createElement("label",null,g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,"vjs-datatype":"boolean",value:"true"}),g.createElement("span",null,ve(r,!0))),g.createElement("label",null,g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,"vjs-datatype":"boolean",value:"false"}),g.createElement("span",null,ve(r,!1)))):g.createElement("label",null,g.createElement("input",{type:"checkbox","vjs-datatype":"boolean","vjs-att":r.id})," ",r.label||r.id)),r.description&&g.createElement("div",{className:"vjs-field-desc"},r.description))}))}import se,{forwardRef as xn,useContext as bt,useEffect as Rt,useImperativeHandle as yn,useRef as ce,useState as vt}from"react";import*as Fe from"react-dom";import{ELEMENT_DIV as Dt,ELEMENT_SVG as Pn,ElementTypes as On,EVENT_GRAPH_CLEARED as Sn,EVENT_GROUP_REMOVED as hn,EVENT_GROUP_UPDATED as bn,EVENT_NODE_REMOVED as Rn,EVENT_NODE_UPDATED as vn,extend as Tt,isGroup as Dn,renderPaper as Tn,CLASS_DEFAULT_NODE as _n,CLASS_DEFAULT_GROUP as Nn,OVERLAY_TYPE_CUSTOM as An,EVENT_EDGE_REMOVED as wn,EVENT_EDGE_UPDATED as Vn,uuid as Mn,partition as In,$svgNode as Bn}from"@visuallyjs/browser-ui";var eu=xn((e,n)=>{let t=ce(!1),o=ce(!1),a=bt(oe),i=ce(null),l=ce(null),r=ce(null),s,p=bt(W);p==null?(s=ce(null),p=Ie(s)):s=p.ref();let[E,f]=vt([]),[d,P]=vt([]),x=[],y=[];function A(){f(x.slice())}function V(){P(y.slice())}let I={getPaper:()=>s.current,getModel:()=>r.current};yn(n,()=>I),Rt(()=>{var O;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,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",i.current.appendChild(l.current));let U=(c,u,S,v,m,h,R,z)=>{let[b,T]=h.component||h.jsx?[h,null]:Dn(R)?[Object.assign(Object.assign({},h),{jsx:w=>se.createElement(se.Fragment,null,w.obj.data.label)}),Nn]:[Object.assign(Object.assign({},h),{jsx:w=>se.createElement(se.Fragment,null,w.obj.data.label)}),_n],M=m.containerType===On.HTML?document.createElement(Dt):Bn(Pn);l.current.appendChild(M),T!=null&&m.$addClassToElement(M,T);let re={data:u,model:S,ui:m,componentId:R.getFullId(),obj:R,props:e.childProps,element:M,eventInfo:z};x.push({data:u,def:b,payload:re,domElement:M,key:R.id,obj:R,hydrated:!1}),A()},L=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Z={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,S,v)=>{},render:U,rerender:(c,u,S,v,m,h,R,z,b)=>{let T=In(x,M=>M.obj!==R);x=T.left,A(),U(c,u,S,v,m,h,R,z),T.right.length>0&&setTimeout(()=>{L(null,T.right[0].domElement)})},cleanupVertex:L,cleanupPort:(c,u)=>{}},F=((O=e.viewOptions)==null?void 0:O.edges)||{};for(let c in F){let u=F[c];u.overlays!=null&&(u.overlays=u.overlays.map(S=>S.jsx!=null?{type:An,options:{create:m=>{let h=document.createElement(Dt);h.className=xe;let R={data:m.edge.data,model:r.current,ui:H,componentId:m.edge.getFullId(),obj:m.edge,props:e.childProps,element:h};return y.push({def:{jsx:S.jsx},data:m.edge.data,obj:m.edge,payload:R,domElement:h,key:Mn(),hydrated:!1}),V(),h}}}:S))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions}),H=Tn(r.current,i.current,Z,K);p.set(H);let J=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=Tt(u.originalData,u.updates)),m},v=x.find(m=>m.key===c);v!=null&&(v.data=S(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let S=()=>{let m={};return(u.originalData||u.updates)&&(m=Tt(u.originalData,u.updates)),m},v=y.find(m=>m.obj.id===c);v!=null&&(v.data=S(),V())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),V()};r.current.bind(vn,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(bn,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(Rn,c=>{q(c.node.id)}),r.current.bind(hn,c=>{q(c.group.id)}),r.current.bind(wn,c=>{me(c.edge.id)}),r.current.bind(Vn,c=>{pe(c.edge.id,c)}),r.current.bind(Sn,()=>{x=[],A(),y=[],V()})}}),Rt(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,r.current.clear(),r.current.load({dataType:e.dataType,data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>s.current.repaintEverything(),250)}}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-paper`,D=e.style||{};return se.createElement("div",{ref:i,className:k,style:D},E.map(O=>Fe.createPortal(he(O,r.current,s,e.childProps),O.domElement,O.key)),d.map(O=>Fe.createPortal(Se(O,r.current,s,e.childProps),O.domElement,O.key)),se.createElement(W.Provider,{value:p},e.children))});import{MiniviewPlugin as jn,Surface as Un}from"@visuallyjs/browser-ui";import Gn,{forwardRef as kn,useEffect as Ln,useImperativeHandle as Fn,useRef as _t}from"react";var cu=kn((e,n)=>{let t=B(),o=ne(),a=_t(!1),i=_t(null),l;Fn(n,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function r(s){s.addPlugin({type:jn.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return Ln(()=>{a.current||(t!=null?(a.current=!0,r(t)):o!=null&&o.$ui instanceof Un&&(a.current=!0,r(o.$ui)))},[t,o]),Gn.createElement("div",{ref:i,className:`${e.className||""}`})});import{Inspector as Hn,log as zn,Surface as Wn}from"@visuallyjs/browser-ui";import ue,{forwardRef as Jn,useContext as De,useEffect as Nt,useImperativeHandle as $n,useRef as He,useState as ze}from"react";var bu=Jn((e,n)=>{let t=De(_),o=De(j),a=De(W),i,l=De(ye);l==null&&(i=He(null),l=nt(i));let[r,s]=ze(null),[p,E]=ze(0),[f,d]=ze(null),P=He(!1),x=He(null),y=e.className||"";Nt(()=>{var D;(D=i==null?void 0:i.current)==null||D.$refresh()},[p]);let A=e.onSelectionCleared||(()=>s(null)),V=(D,O)=>{s(D),e.refresh&&e.refresh(D),E(U=>U+1)};function I(D){i.current=new Hn({container:x.current,ui:D,renderEmptyContainer:A,refresh:V,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(D):null}),d(i.current)}let k={getInspector:()=>f};return $n(n,()=>k),Nt(()=>{P.current||(P.current=!0,t!=null?t.listen(I):a!=null?a.listen(I):o!=null?o.listen(D=>{D.$ui instanceof Wn&&I(D.$ui)}):zn("WARN: InspectorComponent cannot resolve a ui to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),ue.createElement("div",{ref:x,className:y},ue.createElement(ye.Provider,{value:l},r!=null&&ue.createElement(ue.Fragment,null,typeof e.children=="function"?e.children(r,i.current.$ui.model):e.children||[]),r==null&&ue.createElement(ue.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var vu="group:added",Du="group:member:added",Tu="group:member:removed",_u="group:removed",Nu="dataLoadStart",Au="dataAppendStart",wu="dataLoadEnd",Vu="dataAppendEnd",Mu="dataUpdated",Iu="graphClearStart",Bu="graphCleared",ju="graphChanged",Uu="group:updated",Gu="node:updated",ku="port:updated",Lu="edge:updated",Fu="edge:added",Hu="node:added",zu="edge:removed",Wu="node:removed",Ju="port:added",$u="port:removed",Xu="edge:target",Yu="edge:source",At="select",wt="deselect",Vt="selection:cleared",Zu="edge:geometry",Ku="edge:pathEdited",qu="edge:dragStart",Qu="edge:drag",ed="edge:dragEnd",td="edge:dragAbort",rd="edge:typeChanged",nd="node:typeChanged",od="port:typeChanged",ad="group:typeChanged",id="group:move:start",ld="group:move",sd="group:move:end",cd="internal:group:sizeChanged",ud="internal:group:sizeChangedRedo",dd="internal:group:sizeChangedUndo",pd="internal:edge:redraw",md="renderer:added",fd="node:move:start",Ed="node:move",gd="node:move:end",Cd="node:move:abort",xd="undoredo:update",yd="undo",Pd="redo",Od="destroy";import C,{useEffect as Xn,useRef as Te,useState as G}from"react";import{EVENT_UNDOREDO_UPDATE as Yn,FALSE as _e,LASSO_PATH as Zn,LASSO_VIEW_BOX as Kn,LassoPlugin as qn,PAN_PATH as Qn,PAN_VIEW_BOX as eo,Surface as to,SURFACE_MODE_PAN as Mt,SURFACE_MODE_SELECT as It,TRUE as Bt,UNDO_PATH as ro,UNDO_VIEW_BOX as no,REDO_PATH as oo,REDO_VIEW_BOX as ao,ZOOM_TO_FIT_PATH as io,ZOOM_TO_FIT_VIEW_BOX as lo,EVENT_SURFACE_MODE_CHANGED as so,ZOOM_IN_OUT_VIEW_BOX as jt,ZOOM_IN_PATH as co,ZOOM_OUT_PATH as uo,RESET_SELECTION_PATH as po,RESET_SELECTION_VIEW_BOX as mo,CLEAR_PATH as fo,CLEAR_VIEW_BOX as Eo,CLASS_CONTROLS_RESET_SELECTION as go,supportsPathEditing as Co}from"@visuallyjs/browser-ui";var Ut="can-undo",Gt="can-redo",We="vjs-selected-mode",kt="vjs-controls-has-selection";function Id(e){let n="Clear selection",t=B(),o=ne(),[a,i]=G("row"),[l,r]=G(!1),[s,p]=G(!1),E=Te(null),f=Te(!1),d=Te(null),[P,x]=G("Clear dataset?"),y=Te(null),[A,V]=G(!0),[I,k]=G(!1),[D,O]=G(!0),[U,L]=G(!0),[Z,F]=G([]),[K,H]=G([]);function J(b){d.current=b,e.clearMessage&&x(e.clearMessage),e.onMaybeClear&&(y.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&O(!1),e.zoomToExtents===!1&&V(!1),e.zoomButtons===!0&&k(!0),e.clear===!1&&L(!1);let T=(e.buttons||[]).filter(w=>w.mode!=null);F(T);let M=(e.buttons||[]).filter(w=>w.mode==null);H(M),b.bind(so,w=>{b.removeClass(b.$getSelector(E.current,"[data-mode]"),We),b.addClass(b.$getSelector(E.current,"[data-mode='"+w+"']"),We)}),b.model.bind(Yn,w=>{E.current.setAttribute(Ut,w.undoCount>0?Bt:_e),E.current.setAttribute(Gt,w.redoCount>0?Bt:_e)}),b.model.bind(At,R),b.model.bind(wt,R),b.model.bind(Vt,R);let re=b.getPlugin(qn.type);r(re!=null),p(re!=null||T.length>0),E.current.setAttribute(Ut,_e),E.current.setAttribute(Gt,_e)}function q(){d.current.model.clearSelection(),d.current.zoomToFit()}function pe(){d.current.zoomIn()}function me(){d.current.zoomOut()}function c(){d.current.setMode(Mt)}function u(){d.current.setMode(It)}function S(){d.current.model.clearSelection(),Co(d.current)&&d.current.stopEditingPath()}function v(){y.current!=null?y.current(()=>d.current.model.clear()):window.confirm(P)&&d.current.model.clear()}function m(){d.current.model.undo()}function h(){d.current.model.redo()}let R=()=>{d.current.model.getSelection().isEmpty()?E.current.removeAttribute(kt):E.current.setAttribute(kt,"true")};Xn(()=>{f.current===!1&&(t!=null?(f.current=!0,J(t)):o!=null&&o.$ui instanceof to&&(f.current=!0,J(o.$ui)))},[t,o]);let z=e.style||{};return C.createElement("div",{style:z,ref:E,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&C.createElement("i",{className:"vjs-pan-mode "+We,"data-mode":Mt,title:"Pan Mode",onClick:()=>c()},C.createElement("svg",{fill:"none",viewBox:eo,stroke:"currentColor"},C.createElement("path",{d:Qn}))),l&&C.createElement("i",{className:"vjs-select-mode","data-mode":It,title:"Select Mode",onClick:()=>u()},C.createElement("svg",{fill:"currentColor",viewBox:Kn,stroke:"currentColor"},C.createElement("path",{d:Zn}))),Z.map(b=>C.createElement("i",{className:b.class,title:b.title,onClick:T=>b.handler(T,b.id)})),A&&C.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>q()},C.createElement("svg",{viewBox:lo,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:io}))),I&&C.createElement(C.Fragment,null,C.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>pe()},C.createElement("svg",{viewBox:jt,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:co}))),C.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>me()},C.createElement("svg",{viewBox:jt,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:uo})))),D&&C.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>m()},C.createElement("svg",{viewBox:no,stroke:"currentColor",fill:"none"},C.createElement("path",{d:ro,strokeWidth:"2"}))),D&&C.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>h()},C.createElement("svg",{viewBox:ao,stroke:"currentColor",fill:"none"},C.createElement("path",{d:oo,strokeWidth:"2"}))),C.createElement("i",{className:go,title:n,onClick:()=>S()},C.createElement("svg",{viewBox:mo,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:po}))),U&&C.createElement("i",{className:"vjs-clear-dataset",title:P,onClick:()=>v()},C.createElement("svg",{viewBox:Eo,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:fo}))),K.map(b=>C.createElement("i",{className:b.class,title:b.title,onClick:T=>b.handler(T,b.id)})))}import X,{useEffect as xo,useRef as Lt,useState as Y}from"react";import{SvgExportUI as yo,ImageExportUI as Ft,Surface as Po,CLASS_CONTROLS as Oo,CLASS_EXPORT_CONTROLS as So}from"@visuallyjs/browser-ui";function Qd(e){let n=Lt(!1),t=Lt(null),o=B(),a=ne(),[i,l]=Y(!0),[r,s]=Y("Export :"),[p,E]=Y(null),[f,d]=Y(null),[P,x]=Y(null),[y,A]=Y(!0),[V,I]=Y(!0),[k,D]=Y(!0);function O(F){t.current=F,e.label&&s(r),e.showLabel!=null&&l(e.showLabel),e.margins&&E(e.margins);let K=e.svgOptions||{};d(K);let H=e.imageOptions||{};x(H),e.allowJpgExport!=null&&D(e.allowJpgExport),e.allowPngExport!=null&&I(e.allowPngExport),e.allowSvgExport!=null&&A(e.allowSvgExport)}function U(){new yo(t.current).export(f)}function L(){new Ft(t.current).export(P)}function Z(){new Ft(t.current).export(Object.assign(P||{},{type:"image/jpeg"}))}return xo(()=>{n.current===!1&&(o!=null?(n.current=!0,O(o)):a!=null&&a.$ui instanceof Po&&(n.current=!0,O(a.$ui)))},[o,a]),X.createElement("div",{className:`${Oo} ${So}`},i&&X.createElement("span",null,r),y&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportSvg",onClick:()=>U()},"SVG")),V&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportPng",onClick:()=>L()},"PNG")),k&&X.createElement("i",null,X.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Z()},"JPG")))}import ho,{forwardRef as bo,useContext as Ro,useEffect as vo,useRef as Je}from"react";import{log as Ht,ShapePalette as Do}from"@visuallyjs/browser-ui";var up=bo((e,n)=>{let t=Je(!1),o=Je(null),a=Ro(_),i=Je(null),l=e.className||"";function r(s){s.getShapeLibrary()!=null?i.current=new Do(s,{container:o.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,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap,preparedShapes:e.preparedShapes,allowDropOnEdge:e.allowDropOnEdge,showGroups:e.showGroups!==!1}):Ht("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return vo(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):Ht("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),ho.createElement("div",{ref:o,className:l})});import To,{useEffect as _o,useRef as No}from"react";import{CLASS_SHAPE as Ao,convertToMultilineText as wo,DEFAULT_LABEL_FILL_RATIO as Vo}from"@visuallyjs/browser-ui";var Mo=120,Io=90;function yp(e){let n=No(null);function t(){return e.ctx.obj.data.outlineWidth||2}function o(){return e.ctx.obj.data.fill||"#FFFFFF"}function a(){return e.ctx.obj.data.outline||"#000000"}function i(){return e.ctx.obj.data.width||Mo}function l(){return e.ctx.obj.data.height||Io}function r(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return _o(()=>{let p=e.ctx.obj.data,E=e.ctx.ui.getShapeLibrary(),f=E.renderCompiledShape(p);if(n.current.replaceChildren(f),e.showLabels){let d=E.renderShapeLabel(p,s(),e.labelStrokeWidth,null,r(),r(),e.font);n.current.appendChild(d),e.multilineLabels!=!1&&wo(d,p[s()]||"",i()*(e.labelFillRatio||Vo),e.labelPosition)}}),To.createElement("svg",{className:Ao,ref:n,strokeWidth:t(),fill:o(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}import Bo,{forwardRef as jo,useContext as Uo,useEffect as Go,useRef as $e}from"react";import{log as ko,Palette as Lo,defaultDataGenerator as Fo}from"@visuallyjs/browser-ui";var Ip=jo((e,n)=>{let t=$e(!1),o=$e(null),a=Uo(_),i=$e(null),l=e.className||"";function r(s){let p={selector:e.selector,source:o.current,dataGenerator:E=>e.dataGenerator?e.dataGenerator(E):Fo(E),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};i.current=new Lo(s,p)}return Go(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):ko("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Bo.createElement("div",{className:l,ref:o},e.children)});import Ho,{forwardRef as zo,useContext as Wo,useEffect as Jo,useRef as Xe}from"react";import{log as $o,DiagramPalette as Xo}from"@visuallyjs/browser-ui";var Yp=zo((e,n)=>{let t=Xe(!1),o=Xe(null),a=Wo(j),i=Xe(null),l=e.className||"";function r(p){i.current=new Xo(o.current,p,{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,allowDropOnEdge:e.allowDropOnEdge,autoEdgeConnect:e.autoEdgeConnect,showGroups:e.showGroups!==!1,updateTypeOnPaletteTap:e.updateTypeOnPaletteTap})}Jo(()=>{t.current||(t.current=!0,a!=null?a.listen(p=>r(p)):e.diagram!=null?r(e.diagram):$o("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return Ho.createElement("div",{ref:o,className:l,style:s})});import Yo,{useContext as zt,useEffect as te,useRef as de}from"react";function N(e){let n=de(null),t=de(!1),o=de(!1),a=de(null),i=de(null),l=de(e);te(()=>{l.current=e});let r=e.style||{},s=zt(_),p=zt(j);function E(P){let x=l.current;return Object.assign({dataSource:P,dataSourceFilter:e.dataSourceFilter},e.options)}function f(P){var y;(y=a.current)==null||y.destroy(),i.current=P;let x=E(P);a.current=l.current.createChart(n.current,x),o.current=!0}function d(){var x;(x=a.current)==null||x.destroy(),i.current=null;let P=E();a.current=l.current.createChart(n.current,P),l.current.data?a.current.load({data:l.current.data},()=>{o.current=!0}):l.current.url?a.current.load({url:l.current.url},()=>{o.current=!0}):o.current=!0}return te(()=>{t.current||(t.current=!0,e.data==null&&e.url==null&&s!=null?s.listen(P=>{f(P.model)}):e.data==null&&e.url==null&&p!=null?p.listen(P=>{f(P.model)}):d())}),e.reactive!==!1&&(te(()=>{o.current&&e.data!=null&&a.current&&a.current.load({data:e.data})},[e.data]),te(()=>{o.current&&e.url!=null&&a.current&&a.current.load({url:e.url})},[e.url]),te(()=>{o.current&&e.pivot!=null&&a.current&&a.current.pivot&&a.current.pivot(e.pivot)},[e.pivot]),te(()=>{o.current&&e.dataSourceFilter!=null&&a.current&&a.current.setDataSourceFilter&&a.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter]),te(()=>{o.current&&(i.current?f(i.current):s==null&&p==null&&d())},[e.options])),Yo.createElement("div",{ref:n,style:r,className:`${e.className||""}`})}import{ColumnChart as Zo}from"@visuallyjs/browser-ui";function mm(e){let n=Object.assign({createChart:(t,o)=>new Zo(t,o)},e);return N(n)}import{BarChart as Ko}from"@visuallyjs/browser-ui";function Om(e){let n=Object.assign({createChart:(t,o)=>new Ko(t,o)},e);return N(n)}import{CategoryValueChart as qo}from"@visuallyjs/browser-ui";function _m(e){let n=Object.assign({createChart:(t,o)=>new qo(t,o)},e);return N(n)}import{LineChart as Qo}from"@visuallyjs/browser-ui";function jm(e){let n=Object.assign({createChart:(t,o)=>new Qo(t,o)},e);return N(n)}import{AreaChart as ea}from"@visuallyjs/browser-ui";function Wm(e){let n=Object.assign({createChart:(t,o)=>new ea(t,o)},e);return N(n)}import{PieChart as ta}from"@visuallyjs/browser-ui";function Qm(e){let n=Object.assign({createChart:(t,o)=>new ta(t,o)},e);return N(n)}import{ScatterChart as ra}from"@visuallyjs/browser-ui";function sf(e){let n=Object.assign({createChart:(t,o)=>new ra(t,o)},e);return N(n)}import{BubbleChart as na}from"@visuallyjs/browser-ui";function gf(e){let n=Object.assign({createChart:(t,o)=>new na(t,o)},e);return N(n)}import{GaugeChart as oa}from"@visuallyjs/browser-ui";function bf(e){let n=Object.assign({createChart:(t,o)=>new oa(t,o)},e);return N(n)}import{SankeyChart as aa}from"@visuallyjs/browser-ui";function Vf(e){let n=Object.assign({createChart:(t,o)=>new aa(t,o)},e);return e.interactive!=null&&(n.options.interactive=e.interactive),e.pivot!=null&&(n.options.pivot=e.pivot),e.csvData&&(n.options.csvData=e.csvData),e.jsonData&&(n.options.jsonData=e.jsonData),N(n)}import{log as ia}from"@visuallyjs/browser-ui";import la,{useContext as sa,useEffect as ca,useRef as Wt}from"react";function Jt(e){let n=Wt(!1),t=Wt(null),o=sa(_),a=e.position||{x:0,y:0};function i(l){e.placement==="fixed"?l.fixElement(t.current,a,e.constraints):l.floatElement(t.current,a)}return ca(()=>{n.current||(n.current=!0,o!=null?o.listen(l=>i(l)):ia("Decorator cannot mount: no SurfaceContext from a provider found"))}),la.createElement("div",{ref:t},e.children)}import{log as ua,BackgroundPlugin as da,GeneratedGridBackground as pa,TiledBackground as ma,SimpleBackground as fa}from"@visuallyjs/browser-ui";import $t,{useEffect as Ea,useRef as ga}from"react";function Ye(e){let n=ga(!1),t=B();return Ea(()=>{if(t!=null&&!n.current){n.current=!0;try{t.addPlugin({type:da.type,options:e})}catch(o){ua(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),$t.createElement($t.Fragment,null)}function uE(e){return Ye(Ne({type:pa.type},e))}function dE(e){return Ye({type:fa.type,url:e.url})}function pE(e){return Ye(Ne({type:ma.type},e))}import{useEffect as Ca}from"react";import{EVENT_DATA_UPDATED as Xt,EVENT_GRAPH_CLEARED as Yt}from"@visuallyjs/browser-ui";function PE(e){let n=st();Ca(()=>{if(n!=null){let t=()=>e(n);return n.bind(Xt,t),n.bind(Yt,t),t(),()=>{n.unbind(Xt,t),n.unbind(Yt,t)}}},[n])}import{useState as Zt,useEffect as Kt}from"react";import{EVENT_ZOOM as qt}from"@visuallyjs/browser-ui";function TE(e){let n=B(),t=at(),[o,a]=Zt(e),[i,l]=Zt(()=>(o==null?void 0:o.getZoom())||1);return Kt(()=>{if(o!=null){let r=s=>{l(s.zoom)};return o.bind(qt,r),l(o.getZoom()),()=>{o.unbind(qt,r)}}},[o]),Kt(()=>{n!=null&&a(n),t!=null&&a(t)},[n,t]),i}export{Gt as ATTRIBUTE_CAN_REDO,Ut as ATTRIBUTE_CAN_UNDO,Wm as AreaChartComponent,Ye as BackgroundComponent,Om as BarChartComponent,Q as BrowserUIReactModel,gf as BubbleChartComponent,we as CLASS_REACT_GROUP,Ae as CLASS_REACT_NODE,xe as CLASS_REACT_OVERLAY,We as CLASS_SELECTED_MODE,St as ColorPickerComponent,mm as ColumnChartComponent,Id as ControlsComponent,Io as DEFAULT_SHAPE_HEIGHT,Mo as DEFAULT_SHAPE_WIDTH,Jt as DecoratorComponent,Dl as DiagramComponent,j as DiagramContext,Yp as DiagramPaletteComponent,vl as DiagramProvider,nc as EdgePropertyMappingsInspector,ot as EdgeTypePickerComponent,Qd as ExportControlsComponent,bf as GaugeChartComponent,uE as GridBackgroundComponent,dE as ImageBackgroundComponent,bu as InspectorComponent,ye as InspectorContext,Ve as JSXWrapper,jm as LineChartComponent,cu as MiniviewComponent,Ip as PaletteComponent,eu as PaperComponent,W as PaperContext,cl as PaperProvider,Qm as PieChartComponent,Vf as SankeyChartComponent,sf as ScatterChartComponent,yp as ShapeComponent,up as ShapePaletteComponent,gc as ShapePropertiesInspector,Ls as SurfaceComponent,_ as SurfaceContext,ln as SurfacePopup,Ii as SurfaceProvider,pE as TiledImageBackgroundComponent,oe as VisuallyJsContext,zl as VisuallyJsProvider,_m as XYChartComponent,lt as createDiagramRef,nt as createInspectorRef,Ie as createPaperRef,ee as createRefHandler,Ee as createSurfaceRef,Sa as getSurfaceComponent,rt as newInstance,et as registerSurface,ne as useDiagram,$ as useInspector,at as usePaper,B as useSurface,st as useVisuallyJsModel,PE as useVisuallyJsUpdate,TE as useZoom};