@visuallyjs/browser-ui-react 1.2.7 → 1.2.9

package/definitions.d.ts

@@ -50,6 +50,14 @@ export interface ReactOverlaySpec {
      * @param ctx
      */
     jsx: (ctx: JsxWrapperProps<Edge>) => any;
+    /**
+     * Minimum zoom this overlay will be visible at
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom this overlay will be visible at
+     */
+    maxZoom?: number;
 }
 /**
  * Edge mappings for a view.

package/jsx-wrapper.d.ts

@@ -37,8 +37,7 @@ export interface JsxWrapperProps<T extends Base> {
  */
 export interface ComponentFacade<T extends Base> {
     def: {
-        jsx?: (p: JsxWrapperProps<any>) => ReactNode;
-        component?: any;
+        jsx: (p: JsxWrapperProps<any>) => ReactNode;
     };
     obj: T;
     payload?: any;

package/package.json

@@ -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"}
+{"name":"@visuallyjs/browser-ui-react","version":"1.2.9","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.9"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/visuallyjs.browser-ui-react.cjs.js

@@ -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}
+var Yt=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 V=(e,r,t)=>(t=e!=null?Yt(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:()=>ge,BubbleChartComponent:()=>Mr,CLASS_REACT_GROUP:()=>Je,CLASS_REACT_NODE:()=>We,CLASS_REACT_OVERLAY:()=>ke,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:()=>be,VisuallyJsProvider:()=>cr,XYChartComponent:()=>_r,createDiagramRef:()=>mt,createInspectorRef:()=>ut,createPaperRef:()=>Ke,createRefHandler:()=>Ce,createSurfaceRef:()=>De,getSurfaceComponent:()=>or,newInstance:()=>ct,registerSurface:()=>st,useDiagram:()=>he,useInspector:()=>me,usePaper:()=>pt,useSurface:()=>Z,useVisuallyJsModel:()=>ft,useVisuallyJsUpdate:()=>Lr,useZoom:()=>kr});module.exports=rr(Fr);var lt=require("@visuallyjs/browser-ui"),Tt=new Map,Le={};function st(e,r){Tt.set(e,r),nr(e,r)}function nr(e,r){(Le[e]||[]).forEach(o=>{try{o(r)}catch(a){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete Le[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 Le[e]=Le[e]||[],Le[e].push(r)}var We="vjs-react-node",Je="vjs-react-group",ke="vjs-react-overlay";var Se=V(require("react"));function $e(e){let r=(0,Se.useRef)(!1);return(0,Se.useEffect)(()=>{r.current||(r.current=!0,e.cb(e.ns))}),Se.default.createElement(Se.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 Ze=require("@visuallyjs/browser-ui"),ge=class extends Ze.BrowserUIModel{render(r,t){return(0,Ze.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function ct(e){return e=e||{},new ge(e)}var q=V(require("react")),B=(0,q.createContext)(null);function ar(e){let r=(0,q.useRef)(null),t=De(r);return q.default.createElement(B.Provider,{value:t},e.children||[])}function De(e){return Ce(e)}function Ce(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 Z(){let e=(0,q.useContext)(B),[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 Xe=require("react"),Fe=(0,Xe.createContext)(null);function ut(e){return Ce(e)}function me(){let e=(0,Xe.useContext)(Fe);return e==null?null:e.ref().current}var xe=V(require("react")),Ye=require("@visuallyjs/browser-ui");function dt(e){let r=(0,xe.useRef)(!1),t=(0,xe.useRef)(null),o=(0,xe.useRef)(null),a=me(),{propertyName:i}=e,l=()=>a.getFromContext(Ye.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||a.$ui.$getEdgePropertyMappings();return(0,xe.useEffect)(()=>{r.current||(r.current=!0,o.current=new Ye.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))}))}),xe.default.createElement("div",{ref:t})}var Q=V(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 Ce(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 M=V(require("react")),_t=require("@visuallyjs/browser-ui"),X=(0,M.createContext)(null);function mt(e){return Ce(e)}function lr(e){let r=(0,M.useRef)(null),t=mt(r);return M.default.createElement(X.Provider,{value:t},e.children||[])}function he(){let e=(0,M.useContext)(X),[r,t]=(0,M.useState)(null);return(0,M.useEffect)(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var sr=(0,M.forwardRef)((e,r)=>{let t=(0,M.useRef)(null),o=(0,M.useRef)(!1),a,i,l=(0,M.useContext)(X);l==null?(a=(0,M.useRef)(null),l=mt(a)):a=l.ref();let n=(0,M.useContext)(B);n==null?(i=(0,M.useRef)(null),n=De(i)):i=n.ref();let s={getDiagram:()=>a.current};(0,M.useImperativeHandle)(r,()=>s),(0,M.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`,x=e.style||{};return M.default.createElement("div",{ref:t,className:m,style:x},M.default.createElement(B.Provider,{value:n},M.default.createElement(X.Provider,{value:l},e.children)))});var z=V(require("react")),be=(0,z.createContext)(void 0);function cr(e){let r=(0,z.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,z.useEffect)(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),(0,z.useEffect)(()=>{e.url!=null&&o(e.url,e.dataType)},[e.url]),z.default.createElement(be.Provider,{value:r},e.children||[])}function ft(){let e=(0,z.useContext)(be),r=(0,z.useContext)(B),t=(0,z.useContext)(le),o=(0,z.useContext)(X),[a,i]=(0,z.useState)(e);return(0,z.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=V(require("react")),Te=require("@visuallyjs/browser-ui");function ur(e,r){if(e.hydrated!==!0){let t=(0,Te.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Te.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,Te.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Te.addClass)(e.domElement.firstElementChild,t),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}var N=V(require("react")),gt=V(require("react-dom")),E=require("@visuallyjs/browser-ui"),pr=(0,N.forwardRef)((e,r)=>{let t=(0,N.useRef)(!1),o=(0,N.useRef)(!1),a=(0,N.useContext)(be),i=(0,N.useRef)(null),l=(0,N.useRef)(null),n=(0,N.useRef)(a),s,m=(0,N.useContext)(B);m==null?(s=(0,N.useRef)(null),m=De(s)):s=m.ref();let[x,C]=(0,N.useState)([]),[p,v]=(0,N.useState)([]),O=[],S=[];function k(){t.current===!1&&C(O.slice())}function H(){t.current===!1&&v(S.slice())}let K={getSurface:()=>s.current,getModel:()=>n.current};(0,N.useImperativeHandle)(r,()=>K),(0,N.useEffect)(()=>{var D;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new ge(e.modelOptions||{}):n.current=a,n.current.bind(E.EVENT_DATA_LOAD_START,()=>{t.current=!0}),n.current.bind(E.EVENT_DATA_LOAD_END,()=>{t.current=!1,k(),H()}),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");let oe=(c,d,b,T,y,R,h,$)=>{let[_,U]=R.component||R.jsx?[R,null]:(0,E.isGroup)(h)?[Object.assign(Object.assign({},R),{jsx:W=>N.default.createElement(N.default.Fragment,null,W.obj.data.label)}),E.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},R),{jsx:W=>N.default.createElement(N.default.Fragment,null,W.obj.data.label)}),E.CLASS_DEFAULT_NODE],J=y.containerType===E.ElementTypes.HTML?document.createElement(E.ELEMENT_DIV):(0,E.$svgNode)(E.ELEMENT_SVG);l.current.appendChild(J),U!=null&&y.$addClassToElement(J,U);let ve={data:d,model:b,ui:y,componentId:h.getFullId(),obj:h,props:e.childProps,element:J,eventInfo:$};O.push({data:d,def:_,payload:ve,domElement:J,key:h.id,obj:h,hydrated:!1}),k()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},ye={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,b,T)=>{},render:oe,rerender:(c,d,b,T,y,R,h,$,_)=>{let U=(0,E.partition)(O,J=>J.obj!==h);O=U.left,k(),oe(c,d,b,T,y,R,h,$),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((D=e.viewOptions)==null?void 0:D.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(b=>{if(b.jsx!=null){let T=b;return{type:E.OVERLAY_TYPE_CUSTOM,options:{minZoom:T.minZoom,maxZoom:T.maxZoom,create:R=>{let h=document.createElement(E.ELEMENT_DIV);h.className=ke;let $={data:R.edge.data,model:n.current,ui:pe,componentId:R.edge.getFullId(),obj:R.edge,props:e.childProps,element:h};return S.push({def:{jsx:b.jsx},data:R.edge.data,obj:R.edge,payload:$,domElement:h,key:(0,E.uuid)(),hydrated:!1}),H(),h}}}}else return b}))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),pe=(0,E.renderSurface)(n.current,i.current,ye,Pe);m.set(pe),e.surfaceId!=null&&st(e.surfaceId,K);let Ee=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,E.extend)(d.originalData,d.updates)),y},T=O.find(y=>y.key===c);T!=null&&(T.data=b(),k())},Oe=c=>{O=O.filter(d=>d.payload.componentId!==c),k()},je=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,E.extend)(d.originalData,d.updates)),y},T=S.find(y=>y.obj.id===c);T!=null&&(T.data=b(),H())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),H()};n.current.bind(E.EVENT_NODE_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(E.EVENT_GROUP_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(E.EVENT_NODE_REMOVED,c=>{Oe(c.node.id)}),n.current.bind(E.EVENT_GROUP_REMOVED,c=>{Oe(c.group.id)}),n.current.bind(E.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),n.current.bind(E.EVENT_EDGE_UPDATED,c=>{je(c.edge.id,c)}),n.current.bind(E.EVENT_GRAPH_CLEARED,()=>{O=[],k(),S=[],H()})}}),(0,N.useEffect)(()=>{o.current&&n.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(n.current.clear(),n.current.load({dataType:e.dataType,data:e.data,url:e.url}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-surface`,j=e.style||{};return N.default.createElement("div",{ref:i,className:ce,style:j},x.map(D=>gt.createPortal(Qe(D,n.current,s,e.childProps),D.domElement,D.key)),p.map(D=>gt.createPortal(qe(D,n.current,s,e.childProps),D.domElement,D.key)),N.default.createElement(B.Provider,{value:m},e.children))});var Y=V(require("react")),et=require("@visuallyjs/browser-ui");function Nt(e){let r=Z(),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 x(p){l(p),s(v=>v+1)}(0,Y.useEffect)(()=>{!o.current&&r&&(o.current=!0,a.current=new et.PopupHandler(e.selector,t.current,r,p=>x(p),e.anchor))});function C(){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,()=>C()))}var _e=V(require("react")),At=require("@visuallyjs/browser-ui");function mr(e){let r=me(),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=V(require("react")),F=require("@visuallyjs/browser-ui");function Ct(e){let r=e.maxColors||10,t=(0,ee.useRef)(null),o=(0,ee.useRef)(!1),a=me(),[i,l]=(0,ee.useState)(a.ensureContext(F.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function n(p){let v=a.ensureContext(F.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(p=p.toUpperCase(),!(v.find(S=>S.toUpperCase()===p)!=null)){let S=v.slice();S.unshift(p),S.length>r&&(S.length=r),a.updateContext(F.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 x=p=>{p.key===F.INSPECTOR_CONTEXT_RECENT_COLORS&&l(p.value.slice())};function C(){let p=a.getValue(e.propertyName);p!=null&&t.current&&n(p)}return(0,ee.useEffect)(()=>(a.bind(F.EVENT_CONTEXT_UPDATE,x),a.bind(F.EVENT_CHANGE,C),o.current||(o.current=!0,t.current.addEventListener(F.EVENT_CHANGE,s)),setTimeout(C),()=>{a.unbind(F.EVENT_CONTEXT_UPDATE,x),a.unbind(F.EVENT_CHANGE,C)})),ee.default.createElement("div",{className:F.CLASS_COLOR_PICKER},ee.default.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),ee.default.createElement("div",{className:F.CLASS_COLOR_PICKER_SWATCHES},i.map(p=>ee.default.createElement("div",{key:p,title:p,className:F.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:p},"data-color":p,onClick:()=>m(p)}))))}var P=V(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=me();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,x=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?x?P.default.createElement("div",{className:"vjs-radio-group"},n.values.map(C=>P.default.createElement("label",{key:Ne(C)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(C)})," ",Ne(C)))):P.default.createElement("select",{"vjs-att":n.id},n.values.map(C=>P.default.createElement("option",{key:C.value,value:C.value},C.label))):P.default.createElement("input",{type:"text","vjs-att":n.id,placeholder:n.description})),!n.readOnly&&n.type==="number"&&(m?x?P.default.createElement("div",{className:"vjs-radio-group"},n.values.map(C=>P.default.createElement("label",{key:Ne(C)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(C)})," ",Ne(C)))):P.default.createElement("select",{"vjs-att":n.id},n.values.map(C=>P.default.createElement("option",{key:Ne(C),value:xt(C)},Ne(C)))):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=V(require("react")),yt=V(require("react-dom")),g=require("@visuallyjs/browser-ui"),xr=(0,A.forwardRef)((e,r)=>{let t=(0,A.useRef)(!1),o=(0,A.useRef)(!1),a=(0,A.useContext)(be),i=(0,A.useRef)(null),l=(0,A.useRef)(null),n=(0,A.useRef)(null),s,m=(0,A.useContext)(le);m==null?(s=(0,A.useRef)(null),m=Ke(s)):s=m.ref();let[x,C]=(0,A.useState)([]),[p,v]=(0,A.useState)([]),O=[],S=[];function k(){t.current===!1&&C(O.slice())}function H(){t.current===!1&&v(S.slice())}let K={getPaper:()=>s.current,getModel:()=>n.current};(0,A.useImperativeHandle)(r,()=>K),(0,A.useEffect)(()=>{var D;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new ge(e.modelOptions||{}):n.current=a,n.current.bind(g.EVENT_DATA_LOAD_START,()=>{t.current=!0}),n.current.bind(g.EVENT_DATA_LOAD_END,()=>{t.current=!1,k(),H()}),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,b,T,y,R,h,$)=>{let[_,U]=R.component||R.jsx?[R,null]:(0,g.isGroup)(h)?[Object.assign(Object.assign({},R),{jsx:W=>A.default.createElement(A.default.Fragment,null,W.obj.data.label)}),g.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},R),{jsx:W=>A.default.createElement(A.default.Fragment,null,W.obj.data.label)}),g.CLASS_DEFAULT_NODE],J=y.containerType===g.ElementTypes.HTML?document.createElement(g.ELEMENT_DIV):(0,g.$svgNode)(g.ELEMENT_SVG);l.current.appendChild(J),U!=null&&y.$addClassToElement(J,U);let ve={data:d,model:b,ui:y,componentId:h.getFullId(),obj:h,props:e.childProps,element:J,eventInfo:$};O.push({data:d,def:_,payload:ve,domElement:J,key:h.id,obj:h,hydrated:!1}),k()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},ye={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,b,T)=>{},render:oe,rerender:(c,d,b,T,y,R,h,$,_)=>{let U=(0,g.partition)(O,J=>J.obj!==h);O=U.left,k(),oe(c,d,b,T,y,R,h,$),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((D=e.viewOptions)==null?void 0:D.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(b=>{if(b.jsx!=null){let T=b;return{minZoom:T.minZoom,maxZoom:T.maxZoom,type:g.OVERLAY_TYPE_CUSTOM,options:{create:R=>{let h=document.createElement(g.ELEMENT_DIV);h.className=ke;let $={data:R.edge.data,model:n.current,ui:pe,componentId:R.edge.getFullId(),obj:R.edge,props:e.childProps,element:h};return S.push({def:{jsx:b.jsx},data:R.edge.data,obj:R.edge,payload:$,domElement:h,key:(0,g.uuid)(),hydrated:!1}),H(),h}}}}else return b}))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),pe=(0,g.renderPaper)(n.current,i.current,ye,Pe);m.set(pe);let Ee=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,g.extend)(d.originalData,d.updates)),y},T=O.find(y=>y.key===c);T!=null&&(T.data=b(),k())},Oe=c=>{O=O.filter(d=>d.payload.componentId!==c),k()},je=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,g.extend)(d.originalData,d.updates)),y},T=S.find(y=>y.obj.id===c);T!=null&&(T.data=b(),H())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),H()};n.current.bind(g.EVENT_NODE_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_GROUP_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_NODE_REMOVED,c=>{Oe(c.node.id)}),n.current.bind(g.EVENT_GROUP_REMOVED,c=>{Oe(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=[],k(),S=[],H()})}}),(0,A.useEffect)(()=>{o.current&&n.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(n.current.clear(),n.current.load({dataType:e.dataType,data:e.data,url:e.url}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-paper`,j=e.style||{};return A.default.createElement("div",{ref:i,className:ce,style:j},x.map(D=>yt.createPortal(Qe(D,n.current,s,e.childProps),D.domElement,D.key)),p.map(D=>yt.createPortal(qe(D,n.current,s,e.childProps),D.domElement,D.key)),A.default.createElement(le.Provider,{value:m},e.children))});var rt=require("@visuallyjs/browser-ui"),ae=V(require("react")),yr=(0,ae.forwardRef)((e,r)=>{let t=Z(),o=he(),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"),w=V(require("react")),Pr=(0,w.forwardRef)((e,r)=>{let t=(0,w.useContext)(B),o=(0,w.useContext)(X),a=(0,w.useContext)(le),i,l=(0,w.useContext)(Fe);l==null&&(i=(0,w.useRef)(null),l=ut(i));let[n,s]=(0,w.useState)(null),[m,x]=(0,w.useState)(0),[C,p]=(0,w.useState)(null),v=(0,w.useRef)(!1),O=(0,w.useRef)(null),S=e.className||"";(0,w.useEffect)(()=>{var j;(j=i==null?void 0:i.current)==null||j.$refresh()},[m]);let k=e.onSelectionCleared||(()=>s(null)),H=(j,D)=>{s(j),e.refresh&&e.refresh(j),x(oe=>oe+1)};function K(j){i.current=new Ae.Inspector({container:O.current,ui:j,renderEmptyContainer:k,refresh:H,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:()=>C};return(0,w.useImperativeHandle)(r,()=>ce),(0,w.useEffect)(()=>{v.current||(v.current=!0,t!=null?t.listen(K):a!=null?a.listen(K):o!=null?o.listen(j=>{j.$ui instanceof Ae.Surface&&K(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"))}),w.default.createElement("div",{ref:O,className:S},w.default.createElement(Fe.Provider,{value:l},n!=null&&w.default.createElement(w.default.Fragment,null,typeof e.children=="function"?e.children(n,i.current.$ui.model):e.children||[]),n==null&&w.default.createElement(w.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var fl="group:added",El="group:member:added",gl="group:member:removed",Cl="group:removed",xl="dataLoadStart",yl="dataAppendStart",Pl="dataLoadEnd",Ol="dataAppendEnd",Sl="dataUpdated",hl="graphClearStart",bl="graphCleared",Rl="graphChanged",vl="group:updated",Dl="node:updated",Tl="port:updated",_l="edge:updated",Nl="edge:added",Al="node:added",wl="edge:removed",Vl="node:removed",Ml="port:added",Il="port:removed",Bl="edge:target",jl="edge:source",wt="select",Vt="deselect",Mt="selection:cleared",Ul="edge:geometry",Gl="edge:pathEdited",Ll="edge:dragStart",kl="edge:drag",Fl="edge:dragEnd",Hl="edge:dragAbort",zl="edge:typeChanged",Wl="node:typeChanged",Jl="port:typeChanged",$l="group:typeChanged",Zl="group:move:start",Xl="group:move",Yl="group:move:end",Kl="internal:group:sizeChanged",ql="internal:group:sizeChangedRedo",Ql="internal:group:sizeChangedUndo",es="internal:edge:redraw",ts="renderer:added",rs="node:move:start",ns="node:move",os="node:move:end",as="node:move:abort",is="undoredo:update",ls="undo",ss="redo",cs="destroy";var f=V(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=Z(),o=he(),[a,i]=(0,f.useState)("row"),[l,n]=(0,f.useState)(!1),[s,m]=(0,f.useState)(!1),x=(0,f.useRef)(null),C=(0,f.useRef)(!1),p=(0,f.useRef)(null),[v,O]=(0,f.useState)("Clear dataset?"),S=(0,f.useRef)(null),[k,H]=(0,f.useState)(!0),[K,ce]=(0,f.useState)(!1),[j,D]=(0,f.useState)(!0),[oe,ue]=(0,f.useState)(!0),[ye,de]=(0,f.useState)([]),[Pe,pe]=(0,f.useState)([]);function Ee(_){p.current=_,e.clearMessage&&O(e.clearMessage),e.onMaybeClear&&(S.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&D(!1),e.zoomToExtents===!1&&H(!1),e.zoomButtons===!0&&ce(!0),e.clear===!1&&ue(!1);let U=(e.buttons||[]).filter(W=>W.mode!=null);de(U);let J=(e.buttons||[]).filter(W=>W.mode==null);pe(J),_.bind(u.EVENT_SURFACE_MODE_CHANGED,W=>{_.removeClass(_.$getSelector(x.current,"[data-mode]"),nt),_.addClass(_.$getSelector(x.current,"[data-mode='"+W+"']"),nt)}),_.model.bind(u.EVENT_UNDOREDO_UPDATE,W=>{x.current.setAttribute(Pt,W.undoCount>0?u.TRUE:u.FALSE),x.current.setAttribute(Ot,W.redoCount>0?u.TRUE:u.FALSE)}),_.model.bind(wt,h),_.model.bind(Vt,h),_.model.bind(Mt,h);let ve=_.getPlugin(u.LassoPlugin.type);n(ve!=null),m(ve!=null||U.length>0),x.current.setAttribute(Pt,u.FALSE),x.current.setAttribute(Ot,u.FALSE)}function Oe(){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 b(){p.current.model.clearSelection(),(0,u.supportsPathEditing)(p.current)&&p.current.stopEditingPath()}function T(){S.current!=null?S.current(()=>p.current.model.clear()):window.confirm(v)&&p.current.model.clear()}function y(){p.current.model.undo()}function R(){p.current.model.redo()}let h=()=>{p.current.model.getSelection().isEmpty()?x.current.removeAttribute(It):x.current.setAttribute(It,"true")};(0,f.useEffect)(()=>{C.current===!1&&(t!=null?(C.current=!0,Ee(t)):o!=null&&o.$ui instanceof u.Surface&&(C.current=!0,Ee(o.$ui)))},[t,o]);let $=e.style||{};return f.default.createElement("div",{style:$,ref:x,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}))),ye.map(_=>f.default.createElement("i",{className:_.class,title:_.title,onClick:U=>_.handler(U,_.id)})),k&&f.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Oe()},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}))),K&&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:()=>y()},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:()=>R()},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:()=>b()},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:v,onClick:()=>T()},f.default.createElement("svg",{viewBox:u.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.CLEAR_PATH}))),Pe.map(_=>f.default.createElement("i",{className:_.class,title:_.title,onClick:U=>_.handler(U,_.id)})))}var I=V(require("react")),ie=require("@visuallyjs/browser-ui");function Sr(e){let r=(0,I.useRef)(!1),t=(0,I.useRef)(null),o=Z(),a=he(),[i,l]=(0,I.useState)(!0),[n,s]=(0,I.useState)("Export :"),[m,x]=(0,I.useState)(null),[C,p]=(0,I.useState)(null),[v,O]=(0,I.useState)(null),[S,k]=(0,I.useState)(!0),[H,K]=(0,I.useState)(!0),[ce,j]=(0,I.useState)(!0);function D(de){t.current=de,e.label&&s(n),e.showLabel!=null&&l(e.showLabel),e.margins&&x(e.margins);let Pe=e.svgOptions||{};p(Pe);let pe=e.imageOptions||{};O(pe),e.allowJpgExport!=null&&j(e.allowJpgExport),e.allowPngExport!=null&&K(e.allowPngExport),e.allowSvgExport!=null&&k(e.allowSvgExport)}function oe(){new ie.SvgExportUI(t.current).export(C)}function ue(){new ie.ImageExportUI(t.current).export(v)}function ye(){new ie.ImageExportUI(t.current).export(Object.assign(v||{},{type:"image/jpeg"}))}return(0,I.useEffect)(()=>{r.current===!1&&(o!=null?(r.current=!0,D(o)):a!=null&&a.$ui instanceof ie.Surface&&(r.current=!0,D(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")),H&&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:()=>ye()},"JPG")))}var te=V(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=V(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,x=e.ctx.ui.getShapeLibrary(),C=x.renderCompiledShape(m);if(r.current.replaceChildren(C),e.showLabels){let p=x.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=V(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:x=>e.dataGenerator?e.dataGenerator(x):(0,Me.defaultDataGenerator)(x),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=V(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=V(require("react"));function L(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 x(v){let O=l.current;return Object.assign({dataSource:v,dataSourceFilter:e.dataSourceFilter},e.options)}function C(v){var S;(S=a.current)==null||S.destroy(),i.current=v;let O=x(v);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 v=x();a.current=l.current.createChart(r.current,v),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(v=>{C(v.model)}):e.data==null&&e.url==null&&m!=null?m.listen(v=>{C(v.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?C(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 L(r)}var Gt=require("@visuallyjs/browser-ui");function Tr(e){let r=Object.assign({createChart:(t,o)=>new Gt.BarChart(t,o)},e);return L(r)}var Lt=require("@visuallyjs/browser-ui");function _r(e){let r=Object.assign({createChart:(t,o)=>new Lt.CategoryValueChart(t,o)},e);return L(r)}var kt=require("@visuallyjs/browser-ui");function Nr(e){let r=Object.assign({createChart:(t,o)=>new kt.LineChart(t,o)},e);return L(r)}var Ft=require("@visuallyjs/browser-ui");function Ar(e){let r=Object.assign({createChart:(t,o)=>new Ft.AreaChart(t,o)},e);return L(r)}var Ht=require("@visuallyjs/browser-ui");function wr(e){let r=Object.assign({createChart:(t,o)=>new Ht.PieChart(t,o)},e);return L(r)}var zt=require("@visuallyjs/browser-ui");function Vr(e){let r=Object.assign({createChart:(t,o)=>new zt.ScatterChart(t,o)},e);return L(r)}var Wt=require("@visuallyjs/browser-ui");function Mr(e){let r=Object.assign({createChart:(t,o)=>new Wt.BubbleChart(t,o)},e);return L(r)}var Jt=require("@visuallyjs/browser-ui");function Ir(e){let r=Object.assign({createChart:(t,o)=>new Jt.GaugeChart(t,o)},e);return L(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),L(r)}var Zt=require("@visuallyjs/browser-ui"),fe=V(require("react"));function St(e){let r=(0,fe.useRef)(!1),t=(0,fe.useRef)(null),o=(0,fe.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,fe.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(l=>i(l)):(0,Zt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),fe.default.createElement("div",{ref:t},e.children)}var se=require("@visuallyjs/browser-ui"),Re=V(require("react"));function at(e){let r=(0,Re.useRef)(!1),t=Z();return(0,Re.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]),Re.default.createElement(Re.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 Xt=require("react"),Ie=require("@visuallyjs/browser-ui");function Lr(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"),ht=require("@visuallyjs/browser-ui");function kr(e){let r=Z(),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}

package/visuallyjs.browser-ui-react.es.js

@@ -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};
+var Kt=Object.defineProperty;var Ye=Object.getOwnPropertySymbols;var qt=Object.prototype.hasOwnProperty,Qt=Object.prototype.propertyIsEnumerable;var Ke=(e,n,t)=>n in e?Kt(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,Ne=(e,n)=>{for(var t in n||(n={}))qt.call(n,t)&&Ke(e,t,n[t]);if(Ye)for(var t of Ye(n))Qt.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),er(e,n)}function er(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 ba(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 tr,useRef as rr}from"react";function Ve(e){let n=rr(!1);return tr(()=>{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 nr,log as or}from"@visuallyjs/browser-ui";var Q=class extends nr{render(n,t){return or("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 ar,default as ir,useRef as lr,useContext as sr,useState as cr,useEffect as ur}from"react";var _=ar(null);function ji(e){let n=lr(null),t=Ee(n);return ir.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 j(){let e=sr(_),[n,t]=cr(null);return ur(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import{createContext as dr,useContext as pr}from"react";var ye=dr(null);function nt(e){return ee(e)}function $(){let e=pr(ye);return e==null?null:e.ref().current}import mr,{useRef as Me,useEffect as fr}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Er,EdgeTypePicker as gr}from"@visuallyjs/browser-ui";function ot(e){let n=Me(!1),t=Me(null),o=Me(null),a=$(),{propertyName:i}=e,l=()=>a.getFromContext(Er)||a.$ui.$getEdgePropertyMappings();return fr(()=>{n.current||(n.current=!0,o.current=new gr(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))}))}),mr.createElement("div",{ref:t})}import{createContext as Cr,default as xr,useRef as yr,useContext as Pr,useState as Or,useEffect as Sr}from"react";var W=Cr(null);function dl(e){let n=yr(null),t=Ie(n);return xr.createElement(W.Provider,{value:t},e.children||[])}function Ie(e){return ee(e)}function at(){let e=Pr(W),[n,t]=Or(null);return Sr(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import Pe,{createContext as hr,forwardRef as br,useContext as Be,useEffect as it,useImperativeHandle as Rr,useRef as ge,useState as vr}from"react";import{createDiagram as Dr}from"@visuallyjs/browser-ui";var U=hr(null);function lt(e){return ee(e)}function Tl(e){let n=ge(null),t=lt(n);return Pe.createElement(U.Provider,{value:t},e.children||[])}function ne(){let e=Be(U),[n,t]=vr(null);return it(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}var _l=br((e,n)=>{let t=ge(null),o=ge(!1),a,i,l=Be(U);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};Rr(n,()=>s),it(()=>{o.current||(o.current=!0,a.current=Dr(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`,f=e.style||{};return Pe.createElement("div",{ref:t,className:p,style:f},Pe.createElement(_.Provider,{value:r},Pe.createElement(U.Provider,{value:l},e.children)))});import Tr,{createContext as _r,useContext as Oe,useEffect as je,useMemo as Nr,useState as Ar}from"react";var oe=_r(void 0);function Jl(e){let n=Nr(()=>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]),Tr.createElement(oe.Provider,{value:n},e.children||[])}function st(){let e=Oe(oe),n=Oe(_),t=Oe(W),o=Oe(U),[a,i]=Ar(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}from"@visuallyjs/browser-ui";function wr(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=>{wr(a,t)}})}function he(e,n,t,o){return ct.createElement(Ve,{ns:e,model:n,ui:t.current,childProps:o,cb:a=>{Vr(a,t)}})}function Vr(e,n){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&ut(e.domElement.firstElementChild,t),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 Mr,useContext as pt,useEffect as mt,useImperativeHandle as Ir,useRef as ie,useState as ft}from"react";import*as Ue from"react-dom";import{ELEMENT_DIV as Et,ELEMENT_SVG as Br,ElementTypes as jr,EVENT_GRAPH_CLEARED as Ur,EVENT_GROUP_REMOVED as Gr,EVENT_GROUP_UPDATED as Lr,EVENT_NODE_REMOVED as kr,EVENT_NODE_UPDATED as Fr,extend as gt,isGroup as Hr,renderSurface as zr,CLASS_DEFAULT_NODE as Wr,CLASS_DEFAULT_GROUP as Jr,OVERLAY_TYPE_CUSTOM as $r,EVENT_EDGE_REMOVED as Zr,EVENT_EDGE_UPDATED as Xr,uuid as Yr,partition as Kr,$svgNode as qr,EVENT_DATA_LOAD_START as Qr,EVENT_DATA_LOAD_END as en}from"@visuallyjs/browser-ui";var Ws=Mr((e,n)=>{let t=ie(!1),o=ie(!1),a=pt(oe),i=ie(null),l=ie(null),r=ie(a),s,p=pt(_);p==null?(s=ie(null),p=Ee(s)):s=p.ref();let[f,m]=ft([]),[d,h]=ft([]),x=[],y=[];function A(){t.current===!1&&m(x.slice())}function w(){t.current===!1&&h(y.slice())}let B={getSurface:()=>s.current,getModel:()=>r.current};Ir(n,()=>B),mt(()=>{var b;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,r.current.bind(Qr,()=>{t.current=!0}),r.current.bind(en,()=>{t.current=!1,A(),w()}),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");let G=(c,u,O,R,E,S,P,I)=>{let[v,T]=S.component||S.jsx?[S,null]:Hr(P)?[Object.assign(Object.assign({},S),{jsx:V=>ae.createElement(ae.Fragment,null,V.obj.data.label)}),Jr]:[Object.assign(Object.assign({},S),{jsx:V=>ae.createElement(ae.Fragment,null,V.obj.data.label)}),Wr],M=E.containerType===jr.HTML?document.createElement(Et):qr(Br);l.current.appendChild(M),T!=null&&E.$addClassToElement(M,T);let re={data:u,model:O,ui:E,componentId:P.getFullId(),obj:P,props:e.childProps,element:M,eventInfo:I};x.push({data:u,def:v,payload:re,domElement:M,key:P.id,obj:P,hydrated:!1}),A()},F=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,O,R)=>{},render:G,rerender:(c,u,O,R,E,S,P,I,v)=>{let T=Kr(x,M=>M.obj!==P);x=T.left,A(),G(c,u,O,R,E,S,P,I),T.right.length>0&&setTimeout(()=>{F(null,T.right[0].domElement)})},cleanupVertex:F,cleanupPort:(c,u)=>{}},H=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in H){let u=H[c];u.overlays!=null&&(u.overlays=u.overlays.map(O=>{if(O.jsx!=null){let R=O;return{type:$r,options:{minZoom:R.minZoom,maxZoom:R.maxZoom,create:S=>{let P=document.createElement(Et);P.className=xe;let I={data:S.edge.data,model:r.current,ui:z,componentId:S.edge.getFullId(),obj:S.edge,props:e.childProps,element:P};return y.push({def:{jsx:O.jsx},data:S.edge.data,obj:S.edge,payload:I,domElement:P,key:Yr(),hydrated:!1}),w(),P}}}}else return O}))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),z=zr(r.current,i.current,Y,K);p.set(z),e.surfaceId!=null&&et(e.surfaceId,B);let J=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=gt(u.originalData,u.updates)),E},R=x.find(E=>E.key===c);R!=null&&(R.data=O(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=gt(u.originalData,u.updates)),E},R=y.find(E=>E.obj.id===c);R!=null&&(R.data=O(),w())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),w()};r.current.bind(Fr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(Lr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(kr,c=>{q(c.node.id)}),r.current.bind(Gr,c=>{q(c.group.id)}),r.current.bind(Zr,c=>{me(c.edge.id)}),r.current.bind(Xr,c=>{pe(c.edge.id,c)}),r.current.bind(Ur,()=>{x=[],A(),y=[],w()})}}),mt(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(r.current.clear(),r.current.load({dataType:e.dataType,data:e.data,url:e.url}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-surface`,D=e.style||{};return ae.createElement("div",{ref:i,className:k,style:D},f.map(b=>Ue.createPortal(he(b,r.current,s,e.childProps),b.domElement,b.key)),d.map(b=>Ue.createPortal(Se(b,r.current,s,e.childProps),b.domElement,b.key)),ae.createElement(_.Provider,{value:p},e.children))});import tn,{useEffect as rn,useMemo as nn,useRef as Ge,useState as Ct}from"react";import{PopupHandler as on,CLASS_SURFACE_POPUP as an}from"@visuallyjs/browser-ui";function ln(e){let n=j(),t=Ge(null),o=Ge(!1),a=Ge(null),[i,l]=Ct(null),[r,s]=Ct(0),p=nn(()=>i==null?"none":"block",[i]);function f(d){l(d),s(h=>h+1)}rn(()=>{!o.current&&n&&(o.current=!0,a.current=new on(e.selector,t.current,n,d=>f(d),e.anchor))});function m(){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,()=>m()))}import Ce from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as sn}from"@visuallyjs/browser-ui";function lc(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 xt}from"react";import{CLASS_COLOR_PICKER as dn,CLASS_COLOR_PICKER_SWATCH as pn,CLASS_COLOR_PICKER_SWATCHES as mn,EVENT_CONTEXT_UPDATE as yt,EVENT_CHANGE as Le,INSPECTOR_CONTEXT_RECENT_COLORS as Re}from"@visuallyjs/browser-ui";function Pt(e){let n=e.maxColors||10,t=xt(null),o=xt(!1),a=$(),[i,l]=un(a.ensureContext(Re,()=>[]));function r(d){let h=a.ensureContext(Re,()=>[]);if(d=d.toUpperCase(),!(h.find(y=>y.toUpperCase()===d)!=null)){let y=h.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 f=d=>{d.key===Re&&l(d.value.slice())};function m(){let d=a.getValue(e.propertyName);d!=null&&t.current&&r(d)}return cn(()=>(a.bind(yt,f),a.bind(Le,m),o.current||(o.current=!0,t.current.addEventListener(Le,s)),setTimeout(m),()=>{a.unbind(yt,f),a.unbind(Le,m)})),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 Ot}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 Ot(e)?e:e.label}function ke(e){return Ot(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 Pc({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,f=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?f?g.createElement("div",{className:"vjs-radio-group"},r.values.map(m=>g.createElement("label",{key:le(m)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:ke(m)})," ",le(m)))):g.createElement("select",{"vjs-att":r.id},r.values.map(m=>g.createElement("option",{key:m.value,value:m.value},m.label))):g.createElement("input",{type:"text","vjs-att":r.id,placeholder:r.description})),!r.readOnly&&r.type==="number"&&(p?f?g.createElement("div",{className:"vjs-radio-group"},r.values.map(m=>g.createElement("label",{key:le(m)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:ke(m)})," ",le(m)))):g.createElement("select",{"vjs-att":r.id},r.values.map(m=>g.createElement("option",{key:le(m),value:ke(m)},le(m)))):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(Pt,{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 St,useEffect as ht,useImperativeHandle as yn,useRef as ce,useState as bt}from"react";import*as Fe from"react-dom";import{ELEMENT_DIV as Rt,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 vt,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,EVENT_DATA_LOAD_START as jn,EVENT_DATA_LOAD_END as Un}from"@visuallyjs/browser-ui";var ou=xn((e,n)=>{let t=ce(!1),o=ce(!1),a=St(oe),i=ce(null),l=ce(null),r=ce(null),s,p=St(W);p==null?(s=ce(null),p=Ie(s)):s=p.ref();let[f,m]=bt([]),[d,h]=bt([]),x=[],y=[];function A(){t.current===!1&&m(x.slice())}function w(){t.current===!1&&h(y.slice())}let B={getPaper:()=>s.current,getModel:()=>r.current};yn(n,()=>B),ht(()=>{var b;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,r.current.bind(jn,()=>{t.current=!0}),r.current.bind(Un,()=>{t.current=!1,A(),w()}),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 G=(c,u,O,R,E,S,P,I)=>{let[v,T]=S.component||S.jsx?[S,null]:Dn(P)?[Object.assign(Object.assign({},S),{jsx:V=>se.createElement(se.Fragment,null,V.obj.data.label)}),Nn]:[Object.assign(Object.assign({},S),{jsx:V=>se.createElement(se.Fragment,null,V.obj.data.label)}),_n],M=E.containerType===On.HTML?document.createElement(Rt):Bn(Pn);l.current.appendChild(M),T!=null&&E.$addClassToElement(M,T);let re={data:u,model:O,ui:E,componentId:P.getFullId(),obj:P,props:e.childProps,element:M,eventInfo:I};x.push({data:u,def:v,payload:re,domElement:M,key:P.id,obj:P,hydrated:!1}),A()},F=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,O,R)=>{},render:G,rerender:(c,u,O,R,E,S,P,I,v)=>{let T=In(x,M=>M.obj!==P);x=T.left,A(),G(c,u,O,R,E,S,P,I),T.right.length>0&&setTimeout(()=>{F(null,T.right[0].domElement)})},cleanupVertex:F,cleanupPort:(c,u)=>{}},H=((b=e.viewOptions)==null?void 0:b.edges)||{};for(let c in H){let u=H[c];u.overlays!=null&&(u.overlays=u.overlays.map(O=>{if(O.jsx!=null){let R=O;return{minZoom:R.minZoom,maxZoom:R.maxZoom,type:An,options:{create:S=>{let P=document.createElement(Rt);P.className=xe;let I={data:S.edge.data,model:r.current,ui:z,componentId:S.edge.getFullId(),obj:S.edge,props:e.childProps,element:P};return y.push({def:{jsx:O.jsx},data:S.edge.data,obj:S.edge,payload:I,domElement:P,key:Mn(),hydrated:!1}),w(),P}}}}else return O}))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions}),z=Tn(r.current,i.current,Y,K);p.set(z);let J=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=vt(u.originalData,u.updates)),E},R=x.find(E=>E.key===c);R!=null&&(R.data=O(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=vt(u.originalData,u.updates)),E},R=y.find(E=>E.obj.id===c);R!=null&&(R.data=O(),w())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),w()};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=[],w()})}}),ht(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(r.current.clear(),r.current.load({dataType:e.dataType,data:e.data,url:e.url}))},[e.data,e.url]);let k=`${e.className||""} vjs-react-paper`,D=e.style||{};return se.createElement("div",{ref:i,className:k,style:D},f.map(b=>Fe.createPortal(he(b,r.current,s,e.childProps),b.domElement,b.key)),d.map(b=>Fe.createPortal(Se(b,r.current,s,e.childProps),b.domElement,b.key)),se.createElement(W.Provider,{value:p},e.children))});import{MiniviewPlugin as Gn,Surface as Ln}from"@visuallyjs/browser-ui";import kn,{forwardRef as Fn,useEffect as Hn,useImperativeHandle as zn,useRef as Dt}from"react";var mu=Fn((e,n)=>{let t=j(),o=ne(),a=Dt(!1),i=Dt(null),l;zn(n,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function r(s){s.addPlugin({type:Gn.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return Hn(()=>{a.current||(t!=null?(a.current=!0,r(t)):o!=null&&o.$ui instanceof Ln&&(a.current=!0,r(o.$ui)))},[t,o]),kn.createElement("div",{ref:i,className:`${e.className||""}`})});import{Inspector as Wn,log as Jn,Surface as $n}from"@visuallyjs/browser-ui";import ue,{forwardRef as Zn,useContext as De,useEffect as Tt,useImperativeHandle as Xn,useRef as He,useState as ze}from"react";var Tu=Zn((e,n)=>{let t=De(_),o=De(U),a=De(W),i,l=De(ye);l==null&&(i=He(null),l=nt(i));let[r,s]=ze(null),[p,f]=ze(0),[m,d]=ze(null),h=He(!1),x=He(null),y=e.className||"";Tt(()=>{var D;(D=i==null?void 0:i.current)==null||D.$refresh()},[p]);let A=e.onSelectionCleared||(()=>s(null)),w=(D,b)=>{s(D),e.refresh&&e.refresh(D),f(G=>G+1)};function B(D){i.current=new Wn({container:x.current,ui:D,renderEmptyContainer:A,refresh:w,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:()=>m};return Xn(n,()=>k),Tt(()=>{h.current||(h.current=!0,t!=null?t.listen(B):a!=null?a.listen(B):o!=null?o.listen(D=>{D.$ui instanceof $n&&B(D.$ui)}):Jn("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 Nu="group:added",Au="group:member:added",wu="group:member:removed",Vu="group:removed",Mu="dataLoadStart",Iu="dataAppendStart",Bu="dataLoadEnd",ju="dataAppendEnd",Uu="dataUpdated",Gu="graphClearStart",Lu="graphCleared",ku="graphChanged",Fu="group:updated",Hu="node:updated",zu="port:updated",Wu="edge:updated",Ju="edge:added",$u="node:added",Zu="edge:removed",Xu="node:removed",Yu="port:added",Ku="port:removed",qu="edge:target",Qu="edge:source",_t="select",Nt="deselect",At="selection:cleared",ed="edge:geometry",td="edge:pathEdited",rd="edge:dragStart",nd="edge:drag",od="edge:dragEnd",ad="edge:dragAbort",id="edge:typeChanged",ld="node:typeChanged",sd="port:typeChanged",cd="group:typeChanged",ud="group:move:start",dd="group:move",pd="group:move:end",md="internal:group:sizeChanged",fd="internal:group:sizeChangedRedo",Ed="internal:group:sizeChangedUndo",gd="internal:edge:redraw",Cd="renderer:added",xd="node:move:start",yd="node:move",Pd="node:move:end",Od="node:move:abort",Sd="undoredo:update",hd="undo",bd="redo",Rd="destroy";import C,{useEffect as Yn,useRef as Te,useState as L}from"react";import{EVENT_UNDOREDO_UPDATE as Kn,FALSE as _e,LASSO_PATH as qn,LASSO_VIEW_BOX as Qn,LassoPlugin as eo,PAN_PATH as to,PAN_VIEW_BOX as ro,Surface as no,SURFACE_MODE_PAN as wt,SURFACE_MODE_SELECT as Vt,TRUE as Mt,UNDO_PATH as oo,UNDO_VIEW_BOX as ao,REDO_PATH as io,REDO_VIEW_BOX as lo,ZOOM_TO_FIT_PATH as so,ZOOM_TO_FIT_VIEW_BOX as co,EVENT_SURFACE_MODE_CHANGED as uo,ZOOM_IN_OUT_VIEW_BOX as It,ZOOM_IN_PATH as po,ZOOM_OUT_PATH as mo,RESET_SELECTION_PATH as fo,RESET_SELECTION_VIEW_BOX as Eo,CLEAR_PATH as go,CLEAR_VIEW_BOX as Co,CLASS_CONTROLS_RESET_SELECTION as xo,supportsPathEditing as yo}from"@visuallyjs/browser-ui";var Bt="can-undo",jt="can-redo",We="vjs-selected-mode",Ut="vjs-controls-has-selection";function Gd(e){let n="Clear selection",t=j(),o=ne(),[a,i]=L("row"),[l,r]=L(!1),[s,p]=L(!1),f=Te(null),m=Te(!1),d=Te(null),[h,x]=L("Clear dataset?"),y=Te(null),[A,w]=L(!0),[B,k]=L(!1),[D,b]=L(!0),[G,F]=L(!0),[Y,H]=L([]),[K,z]=L([]);function J(v){d.current=v,e.clearMessage&&x(e.clearMessage),e.onMaybeClear&&(y.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&b(!1),e.zoomToExtents===!1&&w(!1),e.zoomButtons===!0&&k(!0),e.clear===!1&&F(!1);let T=(e.buttons||[]).filter(V=>V.mode!=null);H(T);let M=(e.buttons||[]).filter(V=>V.mode==null);z(M),v.bind(uo,V=>{v.removeClass(v.$getSelector(f.current,"[data-mode]"),We),v.addClass(v.$getSelector(f.current,"[data-mode='"+V+"']"),We)}),v.model.bind(Kn,V=>{f.current.setAttribute(Bt,V.undoCount>0?Mt:_e),f.current.setAttribute(jt,V.redoCount>0?Mt:_e)}),v.model.bind(_t,P),v.model.bind(Nt,P),v.model.bind(At,P);let re=v.getPlugin(eo.type);r(re!=null),p(re!=null||T.length>0),f.current.setAttribute(Bt,_e),f.current.setAttribute(jt,_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(wt)}function u(){d.current.setMode(Vt)}function O(){d.current.model.clearSelection(),yo(d.current)&&d.current.stopEditingPath()}function R(){y.current!=null?y.current(()=>d.current.model.clear()):window.confirm(h)&&d.current.model.clear()}function E(){d.current.model.undo()}function S(){d.current.model.redo()}let P=()=>{d.current.model.getSelection().isEmpty()?f.current.removeAttribute(Ut):f.current.setAttribute(Ut,"true")};Yn(()=>{m.current===!1&&(t!=null?(m.current=!0,J(t)):o!=null&&o.$ui instanceof no&&(m.current=!0,J(o.$ui)))},[t,o]);let I=e.style||{};return C.createElement("div",{style:I,ref:f,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&C.createElement("i",{className:"vjs-pan-mode "+We,"data-mode":wt,title:"Pan Mode",onClick:()=>c()},C.createElement("svg",{fill:"none",viewBox:ro,stroke:"currentColor"},C.createElement("path",{d:to}))),l&&C.createElement("i",{className:"vjs-select-mode","data-mode":Vt,title:"Select Mode",onClick:()=>u()},C.createElement("svg",{fill:"currentColor",viewBox:Qn,stroke:"currentColor"},C.createElement("path",{d:qn}))),Y.map(v=>C.createElement("i",{className:v.class,title:v.title,onClick:T=>v.handler(T,v.id)})),A&&C.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>q()},C.createElement("svg",{viewBox:co,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:so}))),B&&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:It,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:po}))),C.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>me()},C.createElement("svg",{viewBox:It,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:mo})))),D&&C.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()},C.createElement("svg",{viewBox:ao,stroke:"currentColor",fill:"none"},C.createElement("path",{d:oo,strokeWidth:"2"}))),D&&C.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>S()},C.createElement("svg",{viewBox:lo,stroke:"currentColor",fill:"none"},C.createElement("path",{d:io,strokeWidth:"2"}))),C.createElement("i",{className:xo,title:n,onClick:()=>O()},C.createElement("svg",{viewBox:Eo,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:fo}))),G&&C.createElement("i",{className:"vjs-clear-dataset",title:h,onClick:()=>R()},C.createElement("svg",{viewBox:Co,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:go}))),K.map(v=>C.createElement("i",{className:v.class,title:v.title,onClick:T=>v.handler(T,v.id)})))}import Z,{useEffect as Po,useRef as Gt,useState as X}from"react";import{SvgExportUI as Oo,ImageExportUI as Lt,Surface as So,CLASS_CONTROLS as ho,CLASS_EXPORT_CONTROLS as bo}from"@visuallyjs/browser-ui";function np(e){let n=Gt(!1),t=Gt(null),o=j(),a=ne(),[i,l]=X(!0),[r,s]=X("Export :"),[p,f]=X(null),[m,d]=X(null),[h,x]=X(null),[y,A]=X(!0),[w,B]=X(!0),[k,D]=X(!0);function b(H){t.current=H,e.label&&s(r),e.showLabel!=null&&l(e.showLabel),e.margins&&f(e.margins);let K=e.svgOptions||{};d(K);let z=e.imageOptions||{};x(z),e.allowJpgExport!=null&&D(e.allowJpgExport),e.allowPngExport!=null&&B(e.allowPngExport),e.allowSvgExport!=null&&A(e.allowSvgExport)}function G(){new Oo(t.current).export(m)}function F(){new Lt(t.current).export(h)}function Y(){new Lt(t.current).export(Object.assign(h||{},{type:"image/jpeg"}))}return Po(()=>{n.current===!1&&(o!=null?(n.current=!0,b(o)):a!=null&&a.$ui instanceof So&&(n.current=!0,b(a.$ui)))},[o,a]),Z.createElement("div",{className:`${ho} ${bo}`},i&&Z.createElement("span",null,r),y&&Z.createElement("i",null,Z.createElement("a",{href:"#",id:"exportSvg",onClick:()=>G()},"SVG")),w&&Z.createElement("i",null,Z.createElement("a",{href:"#",id:"exportPng",onClick:()=>F()},"PNG")),k&&Z.createElement("i",null,Z.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Y()},"JPG")))}import Ro,{forwardRef as vo,useContext as Do,useEffect as To,useRef as Je}from"react";import{log as kt,ShapePalette as _o}from"@visuallyjs/browser-ui";var fp=vo((e,n)=>{let t=Je(!1),o=Je(null),a=Do(_),i=Je(null),l=e.className||"";function r(s){s.getShapeLibrary()!=null?i.current=new _o(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}):kt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return To(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):kt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Ro.createElement("div",{ref:o,className:l})});import No,{useEffect as Ao,useRef as wo}from"react";import{CLASS_SHAPE as Vo,convertToMultilineText as Mo,DEFAULT_LABEL_FILL_RATIO as Io}from"@visuallyjs/browser-ui";var Bo=120,jo=90;function hp(e){let n=wo(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||Bo}function l(){return e.ctx.obj.data.height||jo}function r(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return Ao(()=>{let p=e.ctx.obj.data,f=e.ctx.ui.getShapeLibrary(),m=f.renderCompiledShape(p);if(n.current.replaceChildren(m),e.showLabels){let d=f.renderShapeLabel(p,s(),e.labelStrokeWidth,null,r(),r(),e.font);n.current.appendChild(d),e.multilineLabels!=!1&&Mo(d,p[s()]||"",i()*(e.labelFillRatio||Io),e.labelPosition)}}),No.createElement("svg",{className:Vo,ref:n,strokeWidth:t(),fill:o(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}import Uo,{forwardRef as Go,useContext as Lo,useEffect as ko,useRef as $e}from"react";import{log as Fo,Palette as Ho,defaultDataGenerator as zo}from"@visuallyjs/browser-ui";var Gp=Go((e,n)=>{let t=$e(!1),o=$e(null),a=Lo(_),i=$e(null),l=e.className||"";function r(s){let p={selector:e.selector,source:o.current,dataGenerator:f=>e.dataGenerator?e.dataGenerator(f):zo(f),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 Ho(s,p)}return ko(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):Fo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Uo.createElement("div",{className:l,ref:o},e.children)});import Wo,{forwardRef as Jo,useContext as $o,useEffect as Zo,useRef as Ze}from"react";import{log as Xo,DiagramPalette as Yo}from"@visuallyjs/browser-ui";var Qp=Jo((e,n)=>{let t=Ze(!1),o=Ze(null),a=$o(U),i=Ze(null),l=e.className||"";function r(p){i.current=new Yo(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})}Zo(()=>{t.current||(t.current=!0,a!=null?a.listen(p=>r(p)):e.diagram!=null?r(e.diagram):Xo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return Wo.createElement("div",{ref:o,className:l,style:s})});import Ko,{useContext as Ft,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=Ft(_),p=Ft(U);function f(h){let x=l.current;return Object.assign({dataSource:h,dataSourceFilter:e.dataSourceFilter},e.options)}function m(h){var y;(y=a.current)==null||y.destroy(),i.current=h;let x=f(h);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 h=f();a.current=l.current.createChart(n.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 te(()=>{t.current||(t.current=!0,e.data==null&&e.url==null&&s!=null?s.listen(h=>{m(h.model)}):e.data==null&&e.url==null&&p!=null?p.listen(h=>{m(h.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?m(i.current):s==null&&p==null&&d())},[e.options])),Ko.createElement("div",{ref:n,style:r,className:`${e.className||""}`})}import{ColumnChart as qo}from"@visuallyjs/browser-ui";function Cm(e){let n=Object.assign({createChart:(t,o)=>new qo(t,o)},e);return N(n)}import{BarChart as Qo}from"@visuallyjs/browser-ui";function Rm(e){let n=Object.assign({createChart:(t,o)=>new Qo(t,o)},e);return N(n)}import{CategoryValueChart as ea}from"@visuallyjs/browser-ui";function Vm(e){let n=Object.assign({createChart:(t,o)=>new ea(t,o)},e);return N(n)}import{LineChart as ta}from"@visuallyjs/browser-ui";function km(e){let n=Object.assign({createChart:(t,o)=>new ta(t,o)},e);return N(n)}import{AreaChart as ra}from"@visuallyjs/browser-ui";function Xm(e){let n=Object.assign({createChart:(t,o)=>new ra(t,o)},e);return N(n)}import{PieChart as na}from"@visuallyjs/browser-ui";function nf(e){let n=Object.assign({createChart:(t,o)=>new na(t,o)},e);return N(n)}import{ScatterChart as oa}from"@visuallyjs/browser-ui";function pf(e){let n=Object.assign({createChart:(t,o)=>new oa(t,o)},e);return N(n)}import{BubbleChart as aa}from"@visuallyjs/browser-ui";function Pf(e){let n=Object.assign({createChart:(t,o)=>new aa(t,o)},e);return N(n)}import{GaugeChart as ia}from"@visuallyjs/browser-ui";function Tf(e){let n=Object.assign({createChart:(t,o)=>new ia(t,o)},e);return N(n)}import{SankeyChart as la}from"@visuallyjs/browser-ui";function jf(e){let n=Object.assign({createChart:(t,o)=>new la(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 sa}from"@visuallyjs/browser-ui";import ca,{useContext as ua,useEffect as da,useRef as Ht}from"react";function zt(e){let n=Ht(!1),t=Ht(null),o=ua(_),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 da(()=>{n.current||(n.current=!0,o!=null?o.listen(l=>i(l)):sa("Decorator cannot mount: no SurfaceContext from a provider found"))}),ca.createElement("div",{ref:t},e.children)}import{log as pa,BackgroundPlugin as ma,GeneratedGridBackground as fa,TiledBackground as Ea,SimpleBackground as ga}from"@visuallyjs/browser-ui";import Wt,{useEffect as Ca,useRef as xa}from"react";function Xe(e){let n=xa(!1),t=j();return Ca(()=>{if(t!=null&&!n.current){n.current=!0;try{t.addPlugin({type:ma.type,options:e})}catch(o){pa(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),Wt.createElement(Wt.Fragment,null)}function fE(e){return Xe(Ne({type:fa.type},e))}function EE(e){return Xe({type:ga.type,url:e.url})}function gE(e){return Xe(Ne({type:Ea.type},e))}import{useEffect as ya}from"react";import{EVENT_DATA_UPDATED as Jt,EVENT_GRAPH_CLEARED as $t}from"@visuallyjs/browser-ui";function bE(e){let n=st();ya(()=>{if(n!=null){let t=()=>e(n);return n.bind(Jt,t),n.bind($t,t),t(),()=>{n.unbind(Jt,t),n.unbind($t,t)}}},[n])}import{useState as Zt,useEffect as Xt}from"react";import{EVENT_ZOOM as Yt}from"@visuallyjs/browser-ui";function wE(e){let n=j(),t=at(),[o,a]=Zt(e),[i,l]=Zt(()=>(o==null?void 0:o.getZoom())||1);return Xt(()=>{if(o!=null){let r=s=>{l(s.zoom)};return o.bind(Yt,r),l(o.getZoom()),()=>{o.unbind(Yt,r)}}},[o]),Xt(()=>{n!=null&&a(n),t!=null&&a(t)},[n,t]),i}export{jt as ATTRIBUTE_CAN_REDO,Bt as ATTRIBUTE_CAN_UNDO,Xm as AreaChartComponent,Xe as BackgroundComponent,Rm as BarChartComponent,Q as BrowserUIReactModel,Pf as BubbleChartComponent,we as CLASS_REACT_GROUP,Ae as CLASS_REACT_NODE,xe as CLASS_REACT_OVERLAY,We as CLASS_SELECTED_MODE,Pt as ColorPickerComponent,Cm as ColumnChartComponent,Gd as ControlsComponent,jo as DEFAULT_SHAPE_HEIGHT,Bo as DEFAULT_SHAPE_WIDTH,zt as DecoratorComponent,_l as DiagramComponent,U as DiagramContext,Qp as DiagramPaletteComponent,Tl as DiagramProvider,lc as EdgePropertyMappingsInspector,ot as EdgeTypePickerComponent,np as ExportControlsComponent,Tf as GaugeChartComponent,fE as GridBackgroundComponent,EE as ImageBackgroundComponent,Tu as InspectorComponent,ye as InspectorContext,Ve as JSXWrapper,km as LineChartComponent,mu as MiniviewComponent,Gp as PaletteComponent,ou as PaperComponent,W as PaperContext,dl as PaperProvider,nf as PieChartComponent,jf as SankeyChartComponent,pf as ScatterChartComponent,hp as ShapeComponent,fp as ShapePaletteComponent,Pc as ShapePropertiesInspector,Ws as SurfaceComponent,_ as SurfaceContext,ln as SurfacePopup,ji as SurfaceProvider,gE as TiledImageBackgroundComponent,oe as VisuallyJsContext,Jl as VisuallyJsProvider,Vm as XYChartComponent,lt as createDiagramRef,nt as createInspectorRef,Ie as createPaperRef,ee as createRefHandler,Ee as createSurfaceRef,ba as getSurfaceComponent,rt as newInstance,et as registerSurface,ne as useDiagram,$ as useInspector,at as usePaper,j as useSurface,st as useVisuallyJsModel,bE as useVisuallyJsUpdate,wE as useZoom};