@visuallyjs/browser-ui-react 1.2.0 → 1.2.1

package/SurfacePopup.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { Vertex, type PopupPosition, BrowserUIModel, Surface } from "@visuallyjs/browser-ui";
+/**
+ * Props for the SurfacePopup component.
+ * @group Props
+ */
+export interface SurfacePopupProps {
+    /**
+     * CSS3 selector identifying elements from which this popup is launched.
+     */
+    selector: string;
+    /**
+     * Optional position to place this popup. Defaults to "bottom", and can also be overridden on a per-launcher basis via a DOM attribute.
+     */
+    anchor?: PopupPosition;
+    /**
+     * @internal
+     */
+    children: ((obj: Vertex, model: BrowserUIModel, ui: Surface, hide: () => any) => Array<ReactNode> | ReactNode);
+}
+/**
+ * Definition of the props to be declared on a component you use as popup content.
+ * @group Props
+ */
+export type PopupContentProps = {
+    vertex: Node;
+    model: BrowserUIModel;
+    ui: Surface;
+    hide: () => any;
+};
+declare function SurfacePopup(props: SurfacePopupProps): JSX.Element;
+export { SurfacePopup };

package/definitions.d.ts

@@ -10,8 +10,7 @@ import { SelectionGenerator } from "../../ts";
 export interface ReactSurfaceRenderOptions extends Omit<SurfaceOptions, "directRender" | "enhancedView" | "view" | "templates"> {
 }
 /**
- * Render options for a PaperComponent. This interface is the same as PaperOptions but with several vanilla-only
- * options removed.
+ * Render options for a PaperComponent. This interface is the same as PaperOptions but with several vanilla-only options removed.
  */
 export interface ReactPaperRenderOptions extends Omit<PaperOptions, "directRender" | "enhancedView" | "view" | "templates"> {
 }
@@ -56,7 +55,7 @@ export interface ReactOverlaySpec {
  * Edge mappings for a view.
  */
 export interface ReactEdgeMapping extends Omit<EdgeMapping, "overlays"> {
-    overlays: Array<OverlaySpec | ReactOverlaySpec>;
+    overlays?: Array<OverlaySpec | ReactOverlaySpec>;
 }
 /**
  * Options for the view in the react SurfaceComponent. Maps node/group/port/edge types to JSX and behaviour.

package/index.d.ts

@@ -11,6 +11,7 @@ export * from './jsx-wrapper';
 export * from './browser-ui-react';
 export * from './edge-type-picker';
 export * from './surface-component';
+export * from './SurfacePopup';
 export * from './paper-component';
 export * from './miniview-component';
 export * from './inspector-component';

package/inspector-component.d.ts

@@ -1,4 +1,4 @@
-import { Base, Inspector, Surface, VisuallyJsModel } from "@visuallyjs/browser-ui";
+import { Base, BrowserUI, Inspector, Surface, VisuallyJsModel } from "@visuallyjs/browser-ui";
 import React, { ReactNode } from "react";
 /**
  * Props for the InspectorComponent
@@ -50,7 +50,7 @@ export interface InspectorComponentProps {
      * Optional function to invoke after an update.
      * @param s
      */
-    afterUpdate?: (s: Surface) => void;
+    afterUpdate?: (s: BrowserUI) => void;
     /**
      * Optional function that returns JSX to use when nothing is selected
      */

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-react","version":"1.2.0","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.0"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-react","version":"1.2.1","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.1"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/paper-component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaperComponentProps, PaperComponentRef } from "./definitions";
 /**
  * Provides a static canvas on which nodes, edges and groups can be drawn, with support for layouts and various plugins.
- * The PaperComponent adjusts the zoom level of the canvas so that it fits into the component's parent.
+ * The PaperComponent automatically adjusts the zoom level and the pan of the canvas so that it fits into the component's parent.
  *
  * ```jsx
  * <PaperComponent renderOptions={...} modelOptions={...} viewOptions={...}/>

package/use-zoom.d.ts

@@ -5,7 +5,7 @@ import { BrowserUI } from '@visuallyjs/browser-ui';
  * ```jsx
  * export default function MyComponent(ctx) {
  *
- *  const zoom = useZoom(ctx.ui)
+ *  const zoom = useZoom(ctx.ui)  // (passing in the ctx.ui is optional but if you have it you can save a few CPU cycles)
  *
  *  return <div>
  *      {zoom > 1 && <h1>Zoom is large</h1>}
@@ -26,8 +26,8 @@ import { BrowserUI } from '@visuallyjs/browser-ui';
  * }
  * ```
  *
- * @param ui The UI instance to observe.
+ * @param ui The UI instance to observe - optional, if not provided the hook will resolve a UI via useSurface or usePaper.
  * @group Hooks
  * @since 1.0.4
  */
-export declare function useZoom(ui: BrowserUI): number;
+export declare function useZoom(ui?: BrowserUI): number;

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

@@ -1 +1 @@
-var ht=Object.create;var Le=Object.defineProperty;var bt=Object.getOwnPropertyDescriptor;var Dt=Object.getOwnPropertyNames;var _t=Object.getPrototypeOf,Tt=Object.prototype.hasOwnProperty;var vt=(e,r)=>{for(var t in r)Le(e,t,{get:r[t],enumerable:!0})},ut=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Dt(r))!Tt.call(e,n)&&n!==t&&Le(e,n,{get:()=>r[n],enumerable:!(o=bt(r,n))||o.enumerable});return e};var A=(e,r,t)=>(t=e!=null?ht(_t(e)):{},ut(r||!e||!e.__esModule?Le(t,"default",{value:e,enumerable:!0}):t,e)),Nt=e=>ut(Le({},"__esModule",{value:!0}),e);var fr={};vt(fr,{ATTRIBUTE_CAN_REDO:()=>Ot,ATTRIBUTE_CAN_UNDO:()=>xt,AreaChartComponent:()=>nr,BackgroundComponent:()=>Qe,BarChartComponent:()=>er,BrowserUIReactModel:()=>fe,BubbleChartComponent:()=>lr,CLASS_REACT_GROUP:()=>Fe,CLASS_REACT_NODE:()=>ke,CLASS_REACT_OVERLAY:()=>Be,CLASS_SELECTED_MODE:()=>qe,ColorPickerComponent:()=>qt,ColumnChartComponent:()=>Qt,ControlsComponent:()=>Jt,DEFAULT_SHAPE_HEIGHT:()=>Pt,DEFAULT_SHAPE_WIDTH:()=>Rt,DecoratorComponent:()=>ct,DiagramComponent:()=>jt,DiagramContext:()=>$,DiagramPaletteComponent:()=>Kt,DiagramProvider:()=>Ut,EdgeTypePickerComponent:()=>Mt,ExportControlsComponent:()=>$t,GaugeChartComponent:()=>ir,GridBackgroundComponent:()=>cr,ImageBackgroundComponent:()=>dr,InspectorComponent:()=>Wt,InspectorContext:()=>Ue,JSXWrapper:()=>He,LineChartComponent:()=>rr,MiniviewComponent:()=>zt,PaletteComponent:()=>Zt,PaperComponent:()=>Ht,PaperContext:()=>ge,PaperProvider:()=>It,PieChartComponent:()=>or,SankeyChartComponent:()=>sr,ScatterChartComponent:()=>ar,ShapeComponent:()=>Xt,ShapePaletteComponent:()=>Yt,SurfaceComponent:()=>Ft,SurfaceContext:()=>V,SurfaceProvider:()=>Vt,TiledImageBackgroundComponent:()=>ur,VisuallyJsContext:()=>ye,VisuallyJsProvider:()=>Gt,XYChartComponent:()=>tr,createDiagramRef:()=>ot,createInspectorRef:()=>nt,createPaperRef:()=>$e,createRefHandler:()=>Ee,createSurfaceRef:()=>De,getSurfaceComponent:()=>wt,newInstance:()=>rt,registerSurface:()=>tt,useDiagram:()=>Se,useInspector:()=>je,usePaper:()=>Bt,useSurface:()=>ue,useVisuallyJsModel:()=>at,useVisuallyJsUpdate:()=>pr,useZoom:()=>mr});module.exports=Nt(fr);var et=require("@visuallyjs/browser-ui"),pt=new Map,Ie={};function tt(e,r){pt.set(e,r),At(e,r)}function At(e,r){(Ie[e]||[]).forEach(o=>{try{o(r)}catch(n){(0,et.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}}),delete Ie[e]}function wt(e,r){let t=pt.get(e);if(t)try{r(t)}catch(o){(0,et.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}else Ie[e]=Ie[e]||[],Ie[e].push(r)}var ke="vjs-react-node",Fe="vjs-react-group",Be="vjs-react-overlay";var Pe=A(require("react"));function He(e){let r=(0,Pe.useRef)(!1);return(0,Pe.useEffect)(()=>{r.current||(r.current=!0,e.cb(e.ns))}),Pe.default.createElement(Pe.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"),fe=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 rt(e){return e=e||{},new fe(e)}var Y=A(require("react")),V=(0,Y.createContext)(null);function Vt(e){let r=(0,Y.useRef)(null),t=De(r);return Y.default.createElement(V.Provider,{value:t},e.children||[])}function De(e){return Ee(e)}function Ee(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 ue(){let e=(0,Y.useContext)(V),[r,t]=(0,Y.useState)(null);return(0,Y.useEffect)(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var We=require("react"),Ue=(0,We.createContext)(null);function nt(e){return Ee(e)}function je(){let e=(0,We.useContext)(Ue);return e==null?null:e.ref().current}var Ce=A(require("react")),Je=require("@visuallyjs/browser-ui");function Mt(e){let r=(0,Ce.useRef)(!1),t=(0,Ce.useRef)(null),o=(0,Ce.useRef)(null),n=je(),{propertyName:s}=e,i=()=>n.getFromContext(Je.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||n.$ui.$getEdgePropertyMappings();return(0,Ce.useEffect)(()=>{r.current||(r.current=!0,o.current=new Je.EdgeTypePicker(n.$ui,t.current,i(),n.getValue(s),(a,d)=>{n.setValue(s,d)}),o.current.render(s,n.Qe),n.onChange(()=>{o.current.select(s,n.getValue(s))}))}),Ce.default.createElement("div",{ref:t})}var X=A(require("react")),ge=(0,X.createContext)(null);function It(e){let r=(0,X.useRef)(null),t=$e(r);return X.default.createElement(ge.Provider,{value:t},e.children||[])}function $e(e){return Ee(e)}function Bt(){let e=(0,X.useContext)(ge),[r,t]=(0,X.useState)(null);return(0,X.useEffect)(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var _=A(require("react")),mt=require("@visuallyjs/browser-ui"),$=(0,_.createContext)(null);function ot(e){return Ee(e)}function Ut(e){let r=(0,_.useRef)(null),t=ot(r);return _.default.createElement($.Provider,{value:t},e.children||[])}function Se(){let e=(0,_.useContext)($),[r,t]=(0,_.useState)(null);return(0,_.useEffect)(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var jt=(0,_.forwardRef)((e,r)=>{let t=(0,_.useRef)(null),o=(0,_.useRef)(!1),n,s,i=(0,_.useContext)($);i==null?(n=(0,_.useRef)(null),i=ot(n)):n=i.ref();let a=(0,_.useContext)(V);a==null?(s=(0,_.useRef)(null),a=De(s)):s=a.ref();let d={getDiagram:()=>n.current};(0,_.useImperativeHandle)(r,()=>d),(0,_.useEffect)(()=>{o.current||(o.current=!0,n.current=(0,mt.createDiagram)(t.current,e.options,e.modelOptions),s.current=n.current.$ui,e.data?n.current.load({data:e.data}):e.url&&n.current.load({url:e.url}),i.set(n.current),a.set(s.current))});let f=`${e.className||""} vjs-react-diagram`,D=e.style||{};return _.default.createElement("div",{ref:t,className:f,style:D},_.default.createElement(V.Provider,{value:a},_.default.createElement($.Provider,{value:i},e.children)))});var L=A(require("react")),ye=(0,L.createContext)(void 0);function Gt(e){let r=(0,L.useMemo)(()=>rt(e.modelOptions||{}),[]);function t(n,s){r.clear(),r.load({data:n,dataType:s})}function o(n,s){r.clear(),r.load({url:n,dataType:s})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),(0,L.useEffect)(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),(0,L.useEffect)(()=>{e.url!=null&&o(e.url,e.dataType)},[e.url]),L.default.createElement(ye.Provider,{value:r},e.children||[])}function at(){let e=(0,L.useContext)(ye),r=(0,L.useContext)(V),t=(0,L.useContext)(ge),o=(0,L.useContext)($),[n,s]=(0,L.useState)(e);return(0,L.useEffect)(()=>{if(e){s(e);return}let i;r!=null&&(r.ref().current?s(r.ref().current.model):(i=f=>{s(f.model)},r.listen(i)));let a;t!=null&&(t.ref().current?n==null&&s(t.ref().current.model):(a=f=>{n==null&&s(f.model)},t.listen(a)));let d;o!=null&&(o.ref().current?n==null&&s(o.ref().current.model):(d=f=>{n==null&&s(f.model)},o.listen(d)))}),n}var lt=A(require("react")),Z=require("@visuallyjs/browser-ui");function Lt(e,r){if(e.hydrated!==!0){let t=(0,Z.isGroup)(e.obj)?Fe:ke;e.domElement.firstElementChild&&(0,Z.addClass)(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function Ye(e,r,t,o){return lt.default.createElement(He,{ns:e,model:r,ui:t.current,childProps:o,cb:n=>{Lt(n,t)}})}function Xe(e,r,t,o){return lt.default.createElement(He,{ns:e,model:r,ui:t.current,childProps:o,cb:n=>{kt(n,t)}})}function kt(e,r){if(e.hydrated!==!0){let t=(0,Z.isGroup)(e.obj)?Fe:ke;e.domElement.firstElementChild&&((0,Z.addClass)(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(Z.ATTRIBUTE_NOT_DRAGGABLE)===Z.TRUE&&e.domElement.setAttribute(Z.ATTRIBUTE_NOT_DRAGGABLE,Z.TRUE)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}var h=A(require("react")),it=A(require("react-dom")),E=require("@visuallyjs/browser-ui"),Ft=(0,h.forwardRef)((e,r)=>{let t=(0,h.useRef)(!1),o=(0,h.useRef)(!1),n=(0,h.useContext)(ye),s=(0,h.useRef)(null),i=(0,h.useRef)(null),a=(0,h.useRef)(n),d,f=(0,h.useContext)(V);f==null?(d=(0,h.useRef)(null),f=De(d)):d=f.ref();let[D,j]=(0,h.useState)([]),[p,z]=(0,h.useState)([]),N=[],R=[];function G(){j(N.slice())}function k(){z(R.slice())}let ne={getSurface:()=>d.current,getModel:()=>a.current};(0,h.useImperativeHandle)(r,()=>ne),(0,h.useEffect)(()=>{var P;if(!o.current){o.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new fe(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",s.current.appendChild(i.current));let ie=(l,c,S,v,g,O,x,J)=>{let[y,M]=O.component||O.jsx?[O,null]:(0,E.isGroup)(x)?[Object.assign(Object.assign({},O),{jsx:F=>h.default.createElement(h.default.Fragment,null,F.obj.data.label)}),E.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},O),{jsx:F=>h.default.createElement(h.default.Fragment,null,F.obj.data.label)}),E.CLASS_DEFAULT_NODE],W=g.containerType===E.ElementTypes.HTML?document.createElement(E.ELEMENT_DIV):(0,E.$svgNode)(E.ELEMENT_SVG);i.current.appendChild(W),M!=null&&g.$addClassToElement(W,M);let be={data:c,model:S,ui:g,componentId:x.getFullId(),obj:x,props:e.childProps,element:W,eventInfo:J};N.push({data:c,def:y,payload:be,domElement:W,key:x.id,obj:x,hydrated:!1}),G()},se=(l,c)=>{c.parentNode&&c.parentNode.removeChild(c)},xe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(l,c,S,v)=>{},render:ie,rerender:(l,c,S,v,g,O,x,J,y)=>{let M=(0,E.partition)(N,W=>W.obj!==x);N=M.left,G(),ie(l,c,S,v,g,O,x,J),M.right.length>0&&setTimeout(()=>{se(null,M.right[0].domElement)})},cleanupVertex:se,cleanupPort:(l,c)=>{}},ce=((P=e.viewOptions)==null?void 0:P.edges)||{};for(let l in ce){let c=ce[l];c.overlays!=null&&(c.overlays=c.overlays.map(S=>{if(S.jsx!=null){let v=(0,E.uuid)();return{type:E.OVERLAY_TYPE_CUSTOM,options:{create:O=>{let x=document.createElement(E.ELEMENT_DIV);x.className=Be;let J={data:O.edge.data,model:a.current,ui:de,componentId:O.edge.getFullId(),obj:O.edge,props:e.childProps,element:x};return R.push({def:{jsx:S.jsx},data:O.edge.data,obj:O.edge,payload:J,domElement:x,key:v,hydrated:!1}),k(),x}}}}else return S}))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),de=(0,E.renderSurface)(a.current,s.current,xe,Oe);f.set(de),e.surfaceId!=null&&tt(e.surfaceId,ne);let me=(l,c)=>{let S=()=>{let g={};return(c.originalData||c.updates)&&(g=(0,E.extend)(c.originalData,c.updates)),g},v=N.find(g=>g.key===l);v!=null&&(v.data=S(),G())},Re=l=>{N=N.filter(c=>c.payload.componentId!==l),G()},Ve=(l,c)=>{let S=()=>{let g={};return(c.originalData||c.updates)&&(g=(0,E.extend)(c.originalData,c.updates)),g},v=R.find(g=>g.obj.id===l);v!=null&&(v.data=S(),k())},Me=l=>{R=R.filter(c=>c.payload.obj.id!==l),k()};a.current.bind(E.EVENT_NODE_UPDATED,l=>{me(l.vertex.getFullId(),l)}),a.current.bind(E.EVENT_GROUP_UPDATED,l=>{me(l.vertex.getFullId(),l)}),a.current.bind(E.EVENT_NODE_REMOVED,l=>{Re(l.node.id)}),a.current.bind(E.EVENT_GROUP_REMOVED,l=>{Re(l.group.id)}),a.current.bind(E.EVENT_EDGE_REMOVED,l=>{Me(l.edge.id)}),a.current.bind(E.EVENT_EDGE_UPDATED,l=>{Ve(l.edge.id,l)}),a.current.bind(E.EVENT_GRAPH_CLEARED,()=>{N=[],G(),R=[],k()})}}),(0,h.useEffect)(()=>{o.current&&a.current!=null&&d.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>d.current.repaintEverything(),250)}}))},[e.data,e.url]);let B=`${e.className||""} vjs-react-surface`,le=e.style||{};return h.default.createElement("div",{ref:s,className:B,style:le},D.map(P=>it.createPortal(Xe(P,a.current,d,e.childProps),P.domElement,P.key)),p.map(P=>it.createPortal(Ye(P,a.current,d,e.childProps),P.domElement,P.key)),h.default.createElement(V.Provider,{value:f},e.children))});var b=A(require("react")),st=A(require("react-dom")),C=require("@visuallyjs/browser-ui"),Ht=(0,b.forwardRef)((e,r)=>{let t=(0,b.useRef)(!1),o=(0,b.useRef)(!1),n=(0,b.useContext)(ye),s=(0,b.useRef)(null),i=(0,b.useRef)(null),a=(0,b.useRef)(null),d,f=(0,b.useContext)(ge);f==null?(d=(0,b.useRef)(null),f=$e(d)):d=f.ref();let[D,j]=(0,b.useState)([]),[p,z]=(0,b.useState)([]),N=[],R=[];function G(){j(N.slice())}function k(){z(R.slice())}let ne={getPaper:()=>d.current,getModel:()=>a.current};(0,b.useImperativeHandle)(r,()=>ne),(0,b.useEffect)(()=>{var P;if(!o.current){o.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new fe(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",s.current.appendChild(i.current));let ie=(l,c,S,v,g,O,x,J)=>{let[y,M]=O.component||O.jsx?[O,null]:(0,C.isGroup)(x)?[Object.assign(Object.assign({},O),{jsx:F=>b.default.createElement(b.default.Fragment,null,F.obj.data.label)}),C.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},O),{jsx:F=>b.default.createElement(b.default.Fragment,null,F.obj.data.label)}),C.CLASS_DEFAULT_NODE],W=g.containerType===C.ElementTypes.HTML?document.createElement(C.ELEMENT_DIV):(0,C.$svgNode)(C.ELEMENT_SVG);i.current.appendChild(W),M!=null&&g.$addClassToElement(W,M);let be={data:c,model:S,ui:g,componentId:x.getFullId(),obj:x,props:e.childProps,element:W,eventInfo:J};N.push({data:c,def:y,payload:be,domElement:W,key:x.id,obj:x,hydrated:!1}),G()},se=(l,c)=>{c.parentNode&&c.parentNode.removeChild(c)},xe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(l,c,S,v)=>{},render:ie,rerender:(l,c,S,v,g,O,x,J,y)=>{let M=(0,C.partition)(N,W=>W.obj!==x);N=M.left,G(),ie(l,c,S,v,g,O,x,J),M.right.length>0&&setTimeout(()=>{se(null,M.right[0].domElement)})},cleanupVertex:se,cleanupPort:(l,c)=>{}},ce=((P=e.viewOptions)==null?void 0:P.edges)||{};for(let l in ce){let c=ce[l];c.overlays!=null&&(c.overlays=c.overlays.map(S=>{if(S.jsx!=null){let v=(0,C.uuid)();return{type:C.OVERLAY_TYPE_CUSTOM,options:{create:O=>{let x=document.createElement(C.ELEMENT_DIV);x.className=Be;let J={data:O.edge.data,model:a.current,ui:de,componentId:O.edge.getFullId(),obj:O.edge,props:e.childProps,element:x};return R.push({def:{jsx:S.jsx},data:O.edge.data,obj:O.edge,payload:J,domElement:x,key:v,hydrated:!1}),k(),x}}}}else return S}))}let Oe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),de=(0,C.renderPaper)(a.current,s.current,xe,Oe);f.set(de);let me=(l,c)=>{let S=()=>{let g={};return(c.originalData||c.updates)&&(g=(0,C.extend)(c.originalData,c.updates)),g},v=N.find(g=>g.key===l);v!=null&&(v.data=S(),G())},Re=l=>{N=N.filter(c=>c.payload.componentId!==l),G()},Ve=(l,c)=>{let S=()=>{let g={};return(c.originalData||c.updates)&&(g=(0,C.extend)(c.originalData,c.updates)),g},v=R.find(g=>g.obj.id===l);v!=null&&(v.data=S(),k())},Me=l=>{R=R.filter(c=>c.payload.obj.id!==l),k()};a.current.bind(C.EVENT_NODE_UPDATED,l=>{me(l.vertex.getFullId(),l)}),a.current.bind(C.EVENT_GROUP_UPDATED,l=>{me(l.vertex.getFullId(),l)}),a.current.bind(C.EVENT_NODE_REMOVED,l=>{Re(l.node.id)}),a.current.bind(C.EVENT_GROUP_REMOVED,l=>{Re(l.group.id)}),a.current.bind(C.EVENT_EDGE_REMOVED,l=>{Me(l.edge.id)}),a.current.bind(C.EVENT_EDGE_UPDATED,l=>{Ve(l.edge.id,l)}),a.current.bind(C.EVENT_GRAPH_CLEARED,()=>{N=[],G(),R=[],k()})}}),(0,b.useEffect)(()=>{o.current&&a.current!=null&&d.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>d.current.repaintEverything(),250)}}))},[e.data,e.url]);let B=`${e.className||""} vjs-react-paper`,le=e.style||{};return b.default.createElement("div",{ref:s,className:B,style:le},D.map(P=>st.createPortal(Xe(P,a.current,d,e.childProps),P.domElement,P.key)),p.map(P=>st.createPortal(Ye(P,a.current,d,e.childProps),P.domElement,P.key)),b.default.createElement(ge.Provider,{value:f},e.children))});var Ze=require("@visuallyjs/browser-ui"),te=A(require("react")),zt=(0,te.forwardRef)((e,r)=>{let t=ue(),o=Se(),n=(0,te.useRef)(!1),s=(0,te.useRef)(null),i;(0,te.useImperativeHandle)(r,()=>({toggleCollapsed:()=>i==null?void 0:i.toggleCollapsed()}));function a(d){d.addPlugin({type:Ze.MiniviewPlugin.type,options:{container:s.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return(0,te.useEffect)(()=>{n.current||(t!=null?(n.current=!0,a(t)):o!=null&&o.$ui instanceof Ze.Surface&&(n.current=!0,a(o.$ui)))},[t,o]),te.default.createElement("div",{ref:s,className:`${e.className||""}`})});var _e=require("@visuallyjs/browser-ui"),T=A(require("react")),Wt=(0,T.forwardRef)((e,r)=>{let t=(0,T.useContext)(V),o=(0,T.useContext)($),n,s=(0,T.useContext)(Ue);s==null&&(n=(0,T.useRef)(null),s=nt(n));let[i,a]=(0,T.useState)(null),[d,f]=(0,T.useState)(0),[D,j]=(0,T.useState)(null),p=(0,T.useRef)(!1),z=(0,T.useRef)(null),N=e.className||"";(0,T.useEffect)(()=>{var B;(B=n==null?void 0:n.current)==null||B.$refresh()},[d]);let R=e.onSelectionCleared||(()=>a(null)),G=(B,le)=>{a(B),e.refresh&&e.refresh(B),f(P=>P+1)};function k(B){n.current=new _e.Inspector({container:z.current,ui:B,renderEmptyContainer:R,refresh:G,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(B):null}),j(n.current)}let ne={getInspector:()=>D};return(0,T.useImperativeHandle)(r,()=>ne),(0,T.useEffect)(()=>{p.current||(p.current=!0,t!=null?t.listen(k):o!=null?o.listen(B=>{B.$ui instanceof _e.Surface&&k(B.$ui)}):(0,_e.log)("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),T.default.createElement("div",{ref:z,className:N},T.default.createElement(Ue.Provider,{value:s},i!=null&&T.default.createElement(T.default.Fragment,null,typeof e.children=="function"?e.children(i,n.current.$ui.model):e.children||[]),i==null&&T.default.createElement(T.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Tl="group:added",vl="group:member:added",Nl="group:member:removed",Al="group:removed",wl="dataLoadStart",Vl="dataAppendStart",Ml="dataLoadEnd",Il="dataAppendEnd",Bl="dataUpdated",Ul="graphClearStart",jl="graphCleared",Gl="graphChanged",Ll="group:updated",kl="node:updated",Fl="port:updated",Hl="edge:updated",zl="edge:added",Wl="node:added",Jl="edge:removed",$l="node:removed",Yl="port:added",Xl="port:removed",Zl="edge:target",ql="edge:source",ft="select",Et="deselect",Ct="selection:cleared",Kl="edge:geometry",Ql="edge:pathEdited",ei="edge:dragStart",ti="edge:drag",ri="edge:dragEnd",ni="edge:dragAbort",oi="edge:typeChanged",ai="node:typeChanged",li="port:typeChanged",ii="group:typeChanged",si="group:move:start",ci="group:move",di="group:move:end",ui="internal:group:sizeChanged",pi="internal:group:sizeChangedRedo",mi="internal:group:sizeChangedUndo",fi="internal:edge:redraw",Ei="renderer:added",Ci="node:move:start",gi="node:move",xi="node:move:end",Oi="node:move:abort",Ri="undoredo:update",Pi="undo",Si="redo",yi="destroy";var m=A(require("react")),u=require("@visuallyjs/browser-ui"),xt="can-undo",Ot="can-redo",qe="vjs-selected-mode",gt="vjs-controls-has-selection";function Jt(e){let r="Clear selection",t=ue(),o=Se(),[n,s]=(0,m.useState)("row"),[i,a]=(0,m.useState)(!1),[d,f]=(0,m.useState)(!1),D=(0,m.useRef)(null),j=(0,m.useRef)(!1),p=(0,m.useRef)(null),[z,N]=(0,m.useState)("Clear dataset?"),R=(0,m.useRef)(null),[G,k]=(0,m.useState)(!0),[ne,B]=(0,m.useState)(!1),[le,P]=(0,m.useState)(!0),[ie,se]=(0,m.useState)(!0),[xe,ce]=(0,m.useState)([]),[Oe,de]=(0,m.useState)([]);function me(y){p.current=y,e.clearMessage&&N(e.clearMessage),e.onMaybeClear&&(R.current=e.onMaybeClear),e.orientation&&s(e.orientation),e.undoRedo===!1&&P(!1),e.zoomToExtents===!1&&k(!1),e.zoomButtons===!0&&B(!0),e.clear===!1&&se(!1);let M=(e.buttons||[]).filter(F=>F.mode!=null);ce(M);let W=(e.buttons||[]).filter(F=>F.mode==null);de(W),y.bind(u.EVENT_SURFACE_MODE_CHANGED,F=>{y.removeClass(y.$getSelector(D.current,"[data-mode]"),qe),y.addClass(y.$getSelector(D.current,"[data-mode='"+F+"']"),qe)}),y.model.bind(u.EVENT_UNDOREDO_UPDATE,F=>{D.current.setAttribute(xt,F.undoCount>0?u.TRUE:u.FALSE),D.current.setAttribute(Ot,F.redoCount>0?u.TRUE:u.FALSE)}),y.model.bind(ft,x),y.model.bind(Et,x),y.model.bind(Ct,x);let be=y.getPlugin(u.LassoPlugin.type);a(be!=null),f(be!=null||M.length>0)}function Re(){p.current.model.clearSelection(),p.current.zoomToFit()}function Ve(){p.current.zoomIn()}function Me(){p.current.zoomOut()}function l(){p.current.setMode(u.SURFACE_MODE_PAN)}function c(){p.current.setMode(u.SURFACE_MODE_SELECT)}function S(){p.current.model.clearSelection(),(0,u.supportsPathEditing)(p.current)&&p.current.stopEditingPath()}function v(){R.current!=null?R.current(()=>p.current.model.clear()):window.confirm(z)&&p.current.model.clear()}function g(){p.current.model.undo()}function O(){p.current.model.redo()}let x=()=>{p.current.model.getSelection().isEmpty()?D.current.removeAttribute(gt):D.current.setAttribute(gt,"true")};(0,m.useEffect)(()=>{j.current===!1&&(t!=null?(j.current=!0,me(t)):o!=null&&o.$ui instanceof u.Surface&&(j.current=!0,me(o.$ui)))},[t,o]);let J=e.style||{};return m.default.createElement("div",{style:J,ref:D,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":n},d&&m.default.createElement("i",{className:"vjs-pan-mode "+qe,"data-mode":u.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>l()},m.default.createElement("svg",{fill:"none",viewBox:u.PAN_VIEW_BOX,stroke:"currentColor"},m.default.createElement("path",{d:u.PAN_PATH}))),i&&m.default.createElement("i",{className:"vjs-select-mode","data-mode":u.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>c()},m.default.createElement("svg",{fill:"currentColor",viewBox:u.LASSO_VIEW_BOX,stroke:"currentColor"},m.default.createElement("path",{d:u.LASSO_PATH}))),xe.map(y=>m.default.createElement("i",{className:y.class,title:y.title,onClick:M=>y.handler(M,y.id)})),G&&m.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Re()},m.default.createElement("svg",{viewBox:u.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:u.ZOOM_TO_FIT_PATH}))),ne&&m.default.createElement(m.default.Fragment,null,m.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>Ve()},m.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:u.ZOOM_IN_PATH}))),m.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>Me()},m.default.createElement("svg",{viewBox:u.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:u.ZOOM_OUT_PATH})))),le&&m.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>g()}),le&&m.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>O()}),m.default.createElement("i",{className:u.CLASS_CONTROLS_RESET_SELECTION,title:r,onClick:()=>S()},m.default.createElement("svg",{viewBox:u.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:u.RESET_SELECTION_PATH}))),ie&&m.default.createElement("i",{className:"vjs-clear-dataset",title:z,onClick:()=>v()},m.default.createElement("svg",{viewBox:u.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:u.CLEAR_PATH}))),Oe.map(y=>m.default.createElement("i",{className:y.class,title:y.title,onClick:M=>y.handler(M,y.id)})))}var w=A(require("react")),re=require("@visuallyjs/browser-ui");function $t(e){let r=(0,w.useRef)(!1),t=(0,w.useRef)(null),o=ue(),n=Se(),[s,i]=(0,w.useState)(!0),[a,d]=(0,w.useState)("Export :"),[f,D]=(0,w.useState)(null),[j,p]=(0,w.useState)(null),[z,N]=(0,w.useState)(null),[R,G]=(0,w.useState)(!0),[k,ne]=(0,w.useState)(!0),[B,le]=(0,w.useState)(!0);function P(ce){t.current=ce,e.label&&d(a),e.showLabel!=null&&i(e.showLabel),e.margins&&D(e.margins);let Oe=e.svgOptions||{};p(Oe);let de=e.imageOptions||{};N(de),e.allowJpgExport!=null&&le(e.allowJpgExport),e.allowPngExport!=null&&ne(e.allowPngExport),e.allowSvgExport!=null&&G(e.allowSvgExport)}function ie(){new re.SvgExportUI(t.current).export(j)}function se(){new re.ImageExportUI(t.current).export(z)}function xe(){new re.ImageExportUI(t.current).export(Object.assign(z||{},{type:"image/jpeg"}))}return(0,w.useEffect)(()=>{r.current===!1&&(o!=null?(r.current=!0,P(o)):n!=null&&n.$ui instanceof re.Surface&&(r.current=!0,P(n.$ui)))},[o,n]),w.default.createElement("div",{className:`${re.CLASS_CONTROLS} ${re.CLASS_EXPORT_CONTROLS}`},s&&w.default.createElement("span",null,a),R&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>ie()},"SVG")),k&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>se()},"PNG")),B&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>xe()},"JPG")))}var q=A(require("react")),Ge=require("@visuallyjs/browser-ui"),Yt=(0,q.forwardRef)((e,r)=>{let t=(0,q.useRef)(!1),o=(0,q.useRef)(null),n=(0,q.useContext)(V),s=(0,q.useRef)(null),i=e.className||"";function a(d){d.getShapeLibrary()!=null?s.current=new Ge.ShapePalette(d,{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,preparedShapes:e.preparedShapes}):(0,Ge.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,q.useEffect)(()=>{t.current||(t.current=!0,n!=null?n.listen(d=>a(d)):e.surface!=null?a(e.surface):(0,Ge.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),q.default.createElement("div",{ref:o,className:i})});var Te=A(require("react")),ve=require("@visuallyjs/browser-ui"),Rt=120,Pt=90;function Xt(e){let r=(0,Te.useRef)(null);function t(){return e.ctx.obj.data.outlineWidth||2}function o(){return e.ctx.obj.data.fill||"#FFFFFF"}function n(){return e.ctx.obj.data.outline||"#000000"}function s(){return e.ctx.obj.data.width||Rt}function i(){return e.ctx.obj.data.height||Pt}function a(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function d(){return e.labelProperty||"label"}return(0,Te.useEffect)(()=>{let f=e.ctx.obj.data,D=e.ctx.ui.getShapeLibrary(),j=D.renderCompiledShape(f);if(r.current.replaceChildren(j),e.showLabels){let p=D.renderShapeLabel(f,d(),e.labelStrokeWidth,null,a(),a(),e.font);r.current.appendChild(p),e.multilineLabels!=!1&&(0,ve.convertToMultilineText)(p,f[d()]||"",s()*(e.labelFillRatio||ve.DEFAULT_LABEL_FILL_RATIO))}}),Te.default.createElement("svg",{className:ve.CLASS_SHAPE,ref:r,strokeWidth:t(),fill:o(),stroke:n(),preserveAspectRatio:"none",viewBox:"0 0 "+s()+" "+i()})}var K=A(require("react")),Ne=require("@visuallyjs/browser-ui"),Zt=(0,K.forwardRef)((e,r)=>{let t=(0,K.useRef)(!1),o=(0,K.useRef)(null),n=(0,K.useContext)(V),s=(0,K.useRef)(null),i=e.className||"";function a(d){let f={selector:e.selector,source:o.current,dataGenerator:D=>e.dataGenerator?e.dataGenerator(D):(0,Ne.defaultDataGenerator)(D),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};s.current=new Ne.Palette(d,f)}return(0,K.useEffect)(()=>{t.current||(t.current=!0,n!=null?n.listen(d=>a(d)):e.surface!=null?a(e.surface):(0,Ne.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),K.default.createElement("div",{className:i,ref:o},e.children)});var Q=A(require("react")),U=require("@visuallyjs/browser-ui");function qt(e){let r=e.maxColors||10,t=(0,Q.useRef)(null),o=(0,Q.useRef)(!1),n=je(),[s,i]=(0,Q.useState)(n.ensureContext(U.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function a(p){let z=n.ensureContext(U.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(p=p.toUpperCase(),!(z.find(R=>R.toUpperCase()===p)!=null)){let R=z.slice();R.unshift(p),R.length>r&&(R.length=r),n.updateContext(U.INSPECTOR_CONTEXT_RECENT_COLORS,R)}}function d(){let p=t.current.value;n.setValue(e.propertyName,p),a(p)}function f(p){n.setValue(e.propertyName,p),t.current.value=p}let D=p=>{p.key===U.INSPECTOR_CONTEXT_RECENT_COLORS&&i(p.value.slice())};function j(){let p=n.getValue(e.propertyName);p!=null&&t.current&&a(p)}return(0,Q.useEffect)(()=>(n.bind(U.EVENT_CONTEXT_UPDATE,D),n.bind(U.EVENT_CHANGE,j),o.current||(o.current=!0,t.current.addEventListener(U.EVENT_CHANGE,d)),setTimeout(j),()=>{n.unbind(U.EVENT_CONTEXT_UPDATE,D),n.unbind(U.EVENT_CHANGE,j)})),Q.default.createElement("div",{className:U.CLASS_COLOR_PICKER},Q.default.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),Q.default.createElement("div",{className:U.CLASS_COLOR_PICKER_SWATCHES},s.map(p=>Q.default.createElement("div",{key:p,title:p,className:U.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:p},"data-color":p,onClick:()=>f(p)}))))}var ee=A(require("react")),Ke=require("@visuallyjs/browser-ui"),Kt=(0,ee.forwardRef)((e,r)=>{let t=(0,ee.useRef)(!1),o=(0,ee.useRef)(null),n=(0,ee.useContext)($),s=(0,ee.useRef)(null),i=e.className||"";function a(f){s.current=new Ke.DiagramPalette(o.current,f,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}(0,ee.useEffect)(()=>{t.current||(t.current=!0,n!=null?n.listen(f=>a(f)):e.diagram!=null?a(e.diagram):(0,Ke.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let d=e.style||{};return ee.default.createElement("div",{ref:o,className:i,style:d})});var H=A(require("react")),I=require("@visuallyjs/browser-ui");function oe(e){let r=(0,H.useRef)(null),t=(0,H.useRef)(!1),o=(0,H.useRef)(!1),n=(0,H.useRef)(null),s=e.style||{},i=(0,H.useContext)(V),a=(0,H.useContext)($);return(0,H.useEffect)(()=>{if(!t.current)if(t.current=!0,i!=null)i.listen(d=>{let f=Object.assign({dataSource:d.model,dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,f),o.current=!0});else if(a!=null)a.listen(d=>{let f=Object.assign({dataSource:d.model,dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,f),o.current=!0});else{let d=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,d),e.data?n.current.load({data:e.data},()=>{o.current=!0}):e.url?n.current.load({url:e.url},()=>{o.current=!0}):o.current=!0}}),e.reactive!==!1&&((0,H.useEffect)(()=>{o.current&&e.data!=null&&n.current&&n.current.load({data:e.data})},[e.data]),(0,H.useEffect)(()=>{o.current&&e.url!=null&&n.current&&n.current.load({url:e.url})},[e.url]),(0,H.useEffect)(()=>{o.current&&e.pivot!=null&&n.current&&n.current.pivot&&n.current.pivot(e.pivot)},[e.pivot]),(0,H.useEffect)(()=>{o.current&&e.dataSourceFilter!=null&&n.current&&n.current.setDataSourceFilter&&n.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),H.default.createElement("div",{ref:r,style:s,className:`${e.className||""}`})}function Qt(e){let r=Object.assign({createChart:(t,o)=>new I.ColumnChart(t,o)},e);return oe(r)}function er(e){let r=Object.assign({createChart:(t,o)=>new I.BarChart(t,o)},e);return oe(r)}function tr(e){let r=Object.assign({createChart:(t,o)=>new I.CategoryValueChart(t,o)},e);return oe(r)}function rr(e){let r=Object.assign({createChart:(t,o)=>new I.LineChart(t,o)},e);return oe(r)}function nr(e){let r=Object.assign({createChart:(t,o)=>new I.AreaChart(t,o)},e);return oe(r)}function or(e){let r=Object.assign({createChart:(t,o)=>new I.PieChart(t,o)},e);return oe(r)}function ar(e){let r=Object.assign({createChart:(t,o)=>new I.ScatterChart(t,o)},e);return oe(r)}function lr(e){let r=Object.assign({createChart:(t,o)=>new I.BubbleChart(t,o)},e);return oe(r)}function ir(e){let r=Object.assign({createChart:(t,o)=>new I.GaugeChart(t,o)},e);return oe(r)}function sr(e){let r=Object.assign({createChart:(t,o)=>new I.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),oe(r)}var St=require("@visuallyjs/browser-ui"),pe=A(require("react"));function ct(e){let r=(0,pe.useRef)(!1),t=(0,pe.useRef)(null),o=(0,pe.useContext)(V),n=e.position||{x:0,y:0};function s(i){e.placement==="fixed"?i.fixElement(t.current,n,e.constraints):i.floatElement(t.current,n)}return(0,pe.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(i=>s(i)):(0,St.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),pe.default.createElement("div",{ref:t},e.children)}var ae=require("@visuallyjs/browser-ui"),he=A(require("react"));function Qe(e){let r=(0,he.useRef)(!1),t=ue();return(0,he.useEffect)(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:ae.BackgroundPlugin.type,options:e})}catch(o){(0,ae.log)(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),he.default.createElement(he.default.Fragment,null)}function cr(e){return Qe(Object.assign({type:ae.GeneratedGridBackground.type},e))}function dr(e){return Qe(Object.assign({type:ae.SimpleBackground.type},e))}function ur(e){return Qe(Object.assign({type:ae.TiledBackground.type},e))}var yt=require("react"),Ae=require("@visuallyjs/browser-ui");function pr(e){let r=at();(0,yt.useEffect)(()=>{if(r!=null){let t=()=>e(r);return r.bind(Ae.EVENT_DATA_UPDATED,t),r.bind(Ae.EVENT_GRAPH_CLEARED,t),t(),()=>{r.unbind(Ae.EVENT_DATA_UPDATED,t),r.unbind(Ae.EVENT_GRAPH_CLEARED,t)}}},[r])}var we=require("react"),dt=require("@visuallyjs/browser-ui");function mr(e){let r=(0,we.useRef)(!1),[t,o]=(0,we.useState)(()=>(e==null?void 0:e.getZoom())||1);return(0,we.useEffect)(()=>{if(e!=null&&!r.current){r.current=!0;let n=s=>{o(s.zoom)};return e.bind(dt.EVENT_ZOOM,n),o(e.getZoom()),()=>{e.unbind(dt.EVENT_ZOOM,n)}}},[e]),t}
+var vt=Object.create;var ke=Object.defineProperty;var Tt=Object.getOwnPropertyDescriptor;var Nt=Object.getOwnPropertyNames;var At=Object.getPrototypeOf,wt=Object.prototype.hasOwnProperty;var Vt=(e,r)=>{for(var t in r)ke(e,t,{get:r[t],enumerable:!0})},ft=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Nt(r))!wt.call(e,o)&&o!==t&&ke(e,o,{get:()=>r[o],enumerable:!(n=Tt(r,o))||n.enumerable});return e};var N=(e,r,t)=>(t=e!=null?vt(At(e)):{},ft(r||!e||!e.__esModule?ke(t,"default",{value:e,enumerable:!0}):t,e)),Mt=e=>ft(ke({},"__esModule",{value:!0}),e);var gr={};Vt(gr,{ATTRIBUTE_CAN_REDO:()=>yt,ATTRIBUTE_CAN_UNDO:()=>St,AreaChartComponent:()=>lr,BackgroundComponent:()=>tt,BarChartComponent:()=>nr,BrowserUIReactModel:()=>Ce,BubbleChartComponent:()=>cr,CLASS_REACT_GROUP:()=>He,CLASS_REACT_NODE:()=>Fe,CLASS_REACT_OVERLAY:()=>Ue,CLASS_SELECTED_MODE:()=>Qe,ColorPickerComponent:()=>er,ColumnChartComponent:()=>rr,ControlsComponent:()=>Xt,DEFAULT_SHAPE_HEIGHT:()=>bt,DEFAULT_SHAPE_WIDTH:()=>ht,DecoratorComponent:()=>pt,DiagramComponent:()=>kt,DiagramContext:()=>$,DiagramPaletteComponent:()=>tr,DiagramProvider:()=>Lt,EdgeTypePickerComponent:()=>jt,ExportControlsComponent:()=>Zt,GaugeChartComponent:()=>ur,GridBackgroundComponent:()=>pr,ImageBackgroundComponent:()=>mr,InspectorComponent:()=>Yt,InspectorContext:()=>je,JSXWrapper:()=>ze,LineChartComponent:()=>ar,MiniviewComponent:()=>$t,PaletteComponent:()=>Qt,PaperComponent:()=>Jt,PaperContext:()=>le,PaperProvider:()=>Gt,PieChartComponent:()=>ir,SankeyChartComponent:()=>dr,ScatterChartComponent:()=>sr,ShapeComponent:()=>Kt,ShapePaletteComponent:()=>qt,SurfaceComponent:()=>Wt,SurfaceContext:()=>V,SurfacePopup:()=>gt,SurfaceProvider:()=>Ut,TiledImageBackgroundComponent:()=>fr,VisuallyJsContext:()=>he,VisuallyJsProvider:()=>Ft,XYChartComponent:()=>or,createDiagramRef:()=>it,createInspectorRef:()=>at,createPaperRef:()=>Ye,createRefHandler:()=>ge,createSurfaceRef:()=>_e,getSurfaceComponent:()=>Bt,newInstance:()=>ot,registerSurface:()=>nt,useDiagram:()=>ye,useInspector:()=>Ge,usePaper:()=>lt,useSurface:()=>J,useVisuallyJsModel:()=>st,useVisuallyJsUpdate:()=>Er,useZoom:()=>Cr});module.exports=Mt(gr);var rt=require("@visuallyjs/browser-ui"),Et=new Map,Be={};function nt(e,r){Et.set(e,r),It(e,r)}function It(e,r){(Be[e]||[]).forEach(n=>{try{n(r)}catch(o){(0,rt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Be[e]}function Bt(e,r){let t=Et.get(e);if(t)try{r(t)}catch(n){(0,rt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Be[e]=Be[e]||[],Be[e].push(r)}var Fe="vjs-react-node",He="vjs-react-group",Ue="vjs-react-overlay";var Se=N(require("react"));function ze(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 We=require("@visuallyjs/browser-ui"),Ce=class extends We.BrowserUIModel{render(r,t){return(0,We.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function ot(e){return e=e||{},new Ce(e)}var Z=N(require("react")),V=(0,Z.createContext)(null);function Ut(e){let r=(0,Z.useRef)(null),t=_e(r);return Z.default.createElement(V.Provider,{value:t},e.children||[])}function _e(e){return ge(e)}function ge(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 J(){let e=(0,Z.useContext)(V),[r,t]=(0,Z.useState)(null);return(0,Z.useEffect)(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var Je=require("react"),je=(0,Je.createContext)(null);function at(e){return ge(e)}function Ge(){let e=(0,Je.useContext)(je);return e==null?null:e.ref().current}var xe=N(require("react")),$e=require("@visuallyjs/browser-ui");function jt(e){let r=(0,xe.useRef)(!1),t=(0,xe.useRef)(null),n=(0,xe.useRef)(null),o=Ge(),{propertyName:l}=e,i=()=>o.getFromContext($e.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||o.$ui.$getEdgePropertyMappings();return(0,xe.useEffect)(()=>{r.current||(r.current=!0,n.current=new $e.EdgeTypePicker(o.$ui,t.current,i(),o.getValue(l),(a,c)=>{o.setValue(l,c,null)}),n.current.render(l,o.Qe),o.onChange(()=>{n.current.select(l,o.getValue(l))}))}),xe.default.createElement("div",{ref:t})}var q=N(require("react")),le=(0,q.createContext)(null);function Gt(e){let r=(0,q.useRef)(null),t=Ye(r);return q.default.createElement(le.Provider,{value:t},e.children||[])}function Ye(e){return ge(e)}function lt(){let e=(0,q.useContext)(le),[r,t]=(0,q.useState)(null);return(0,q.useEffect)(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var _=N(require("react")),Ct=require("@visuallyjs/browser-ui"),$=(0,_.createContext)(null);function it(e){return ge(e)}function Lt(e){let r=(0,_.useRef)(null),t=it(r);return _.default.createElement($.Provider,{value:t},e.children||[])}function ye(){let e=(0,_.useContext)($),[r,t]=(0,_.useState)(null);return(0,_.useEffect)(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var kt=(0,_.forwardRef)((e,r)=>{let t=(0,_.useRef)(null),n=(0,_.useRef)(!1),o,l,i=(0,_.useContext)($);i==null?(o=(0,_.useRef)(null),i=it(o)):o=i.ref();let a=(0,_.useContext)(V);a==null?(l=(0,_.useRef)(null),a=_e(l)):l=a.ref();let c={getDiagram:()=>o.current};(0,_.useImperativeHandle)(r,()=>c),(0,_.useEffect)(()=>{n.current||(n.current=!0,o.current=(0,Ct.createDiagram)(t.current,e.options,e.modelOptions),l.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),i.set(o.current),a.set(l.current))});let E=`${e.className||""} vjs-react-diagram`,x=e.style||{};return _.default.createElement("div",{ref:t,className:E,style:x},_.default.createElement(V.Provider,{value:a},_.default.createElement($.Provider,{value:i},e.children)))});var k=N(require("react")),he=(0,k.createContext)(void 0);function Ft(e){let r=(0,k.useMemo)(()=>ot(e.modelOptions||{}),[]);function t(o,l){r.clear(),r.load({data:o,dataType:l})}function n(o,l){r.clear(),r.load({url:o,dataType:l})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),(0,k.useEffect)(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),(0,k.useEffect)(()=>{e.url!=null&&n(e.url,e.dataType)},[e.url]),k.default.createElement(he.Provider,{value:r},e.children||[])}function st(){let e=(0,k.useContext)(he),r=(0,k.useContext)(V),t=(0,k.useContext)(le),n=(0,k.useContext)($),[o,l]=(0,k.useState)(e);return(0,k.useEffect)(()=>{if(e){l(e);return}let i;r!=null&&(r.ref().current?l(r.ref().current.model):(i=E=>{l(E.model)},r.listen(i)));let a;t!=null&&(t.ref().current?o==null&&l(t.ref().current.model):(a=E=>{o==null&&l(E.model)},t.listen(a)));let c;n!=null&&(n.ref().current?o==null&&l(n.ref().current.model):(c=E=>{o==null&&l(E.model)},n.listen(c)))}),o}var ct=N(require("react")),K=require("@visuallyjs/browser-ui");function Ht(e,r){if(e.hydrated!==!0){let t=(0,K.isGroup)(e.obj)?He:Fe;e.domElement.firstElementChild&&(0,K.addClass)(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function Xe(e,r,t,n){return ct.default.createElement(ze,{ns:e,model:r,ui:t.current,childProps:n,cb:o=>{Ht(o,t)}})}function Ze(e,r,t,n){return ct.default.createElement(ze,{ns:e,model:r,ui:t.current,childProps:n,cb:o=>{zt(o,t)}})}function zt(e,r){if(e.hydrated!==!0){let t=(0,K.isGroup)(e.obj)?He:Fe;e.domElement.firstElementChild&&((0,K.addClass)(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(K.ATTRIBUTE_NOT_DRAGGABLE)===K.TRUE&&e.domElement.setAttribute(K.ATTRIBUTE_NOT_DRAGGABLE,K.TRUE)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}var h=N(require("react")),ut=N(require("react-dom")),C=require("@visuallyjs/browser-ui"),Wt=(0,h.forwardRef)((e,r)=>{let t=(0,h.useRef)(!1),n=(0,h.useRef)(!1),o=(0,h.useContext)(he),l=(0,h.useRef)(null),i=(0,h.useRef)(null),a=(0,h.useRef)(o),c,E=(0,h.useContext)(V);E==null?(c=(0,h.useRef)(null),E=_e(c)):c=E.ref();let[x,U]=(0,h.useState)([]),[d,G]=(0,h.useState)([]),v=[],O=[];function L(){U(v.slice())}function z(){G(O.slice())}let X={getSurface:()=>c.current,getModel:()=>a.current};(0,h.useImperativeHandle)(r,()=>X),(0,h.useEffect)(()=>{var P;if(!n.current){n.current=!0,e.model!=null?a.current=e.model:o==null?a.current=new Ce(e.modelOptions||{}):a.current=o,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",l.current.appendChild(i.current));let ne=(s,u,R,A,f,S,T,me)=>{let[y,I]=S.component||S.jsx?[S,null]:(0,C.isGroup)(T)?[Object.assign(Object.assign({},S),{jsx:F=>h.default.createElement(h.default.Fragment,null,F.obj.data.label)}),C.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},S),{jsx:F=>h.default.createElement(h.default.Fragment,null,F.obj.data.label)}),C.CLASS_DEFAULT_NODE],W=f.containerType===C.ElementTypes.HTML?document.createElement(C.ELEMENT_DIV):(0,C.$svgNode)(C.ELEMENT_SVG);i.current.appendChild(W),I!=null&&f.$addClassToElement(W,I);let De={data:u,model:R,ui:f,componentId:T.getFullId(),obj:T,props:e.childProps,element:W,eventInfo:me};v.push({data:u,def:y,payload:De,domElement:W,key:T.id,obj:T,hydrated:!1}),L()},ue=(s,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Oe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(s,u,R,A)=>{},render:ne,rerender:(s,u,R,A,f,S,T,me,y)=>{let I=(0,C.partition)(v,W=>W.obj!==T);v=I.left,L(),ne(s,u,R,A,f,S,T,me),I.right.length>0&&setTimeout(()=>{ue(null,I.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(s,u)=>{}},de=((P=e.viewOptions)==null?void 0:P.edges)||{};for(let s in de){let u=de[s];u.overlays!=null&&(u.overlays=u.overlays.map(R=>R.jsx!=null?{type:C.OVERLAY_TYPE_CUSTOM,options:{create:f=>{let S=document.createElement(C.ELEMENT_DIV);S.className=Ue;let T={data:f.edge.data,model:a.current,ui:pe,componentId:f.edge.getFullId(),obj:f.edge,props:e.childProps,element:S};return O.push({def:{jsx:R.jsx},data:f.edge.data,obj:f.edge,payload:T,domElement:S,key:(0,C.uuid)(),hydrated:!1}),z(),S}}}:R))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),pe=(0,C.renderSurface)(a.current,l.current,Oe,Pe);E.set(pe),e.surfaceId!=null&&nt(e.surfaceId,X);let Ee=(s,u)=>{let R=()=>{let f={};return(u.originalData||u.updates)&&(f=(0,C.extend)(u.originalData,u.updates)),f},A=v.find(f=>f.key===s);A!=null&&(A.data=R(),L())},Re=s=>{v=v.filter(u=>u.payload.componentId!==s),L()},Me=(s,u)=>{let R=()=>{let f={};return(u.originalData||u.updates)&&(f=(0,C.extend)(u.originalData,u.updates)),f},A=O.find(f=>f.obj.id===s);A!=null&&(A.data=R(),z())},Ie=s=>{O=O.filter(u=>u.payload.obj.id!==s),z()};a.current.bind(C.EVENT_NODE_UPDATED,s=>{Ee(s.vertex.getFullId(),s)}),a.current.bind(C.EVENT_GROUP_UPDATED,s=>{Ee(s.vertex.getFullId(),s)}),a.current.bind(C.EVENT_NODE_REMOVED,s=>{Re(s.node.id)}),a.current.bind(C.EVENT_GROUP_REMOVED,s=>{Re(s.group.id)}),a.current.bind(C.EVENT_EDGE_REMOVED,s=>{Ie(s.edge.id)}),a.current.bind(C.EVENT_EDGE_UPDATED,s=>{Me(s.edge.id,s)}),a.current.bind(C.EVENT_GRAPH_CLEARED,()=>{v=[],L(),O=[],z()})}}),(0,h.useEffect)(()=>{n.current&&a.current!=null&&c.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>c.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-surface`,M=e.style||{};return h.default.createElement("div",{ref:l,className:ce,style:M},x.map(P=>ut.createPortal(Ze(P,a.current,c,e.childProps),P.domElement,P.key)),d.map(P=>ut.createPortal(Xe(P,a.current,c,e.childProps),P.domElement,P.key)),h.default.createElement(V.Provider,{value:E},e.children))});var Y=N(require("react")),qe=require("@visuallyjs/browser-ui");function gt(e){let r=J(),t=(0,Y.useRef)(null),n=(0,Y.useRef)(!1),o=(0,Y.useRef)(null),[l,i]=(0,Y.useState)(null),[a,c]=(0,Y.useState)(0),E=(0,Y.useMemo)(()=>l==null?"none":"block",[l]);function x(d){i(d),c(G=>G+1)}(0,Y.useEffect)(()=>{!n.current&&r&&(n.current=!0,o.current=new qe.PopupHandler(e.selector,t.current,r,d=>x(d),e.anchor))});function U(){o.current&&o.current.$hide()}return Y.default.createElement("div",{ref:t,className:qe.CLASS_SURFACE_POPUP,style:{display:E,position:"absolute"}},l!=null&&e.children(l,r.model,r,()=>U()))}var b=N(require("react")),dt=N(require("react-dom")),g=require("@visuallyjs/browser-ui"),Jt=(0,b.forwardRef)((e,r)=>{let t=(0,b.useRef)(!1),n=(0,b.useRef)(!1),o=(0,b.useContext)(he),l=(0,b.useRef)(null),i=(0,b.useRef)(null),a=(0,b.useRef)(null),c,E=(0,b.useContext)(le);E==null?(c=(0,b.useRef)(null),E=Ye(c)):c=E.ref();let[x,U]=(0,b.useState)([]),[d,G]=(0,b.useState)([]),v=[],O=[];function L(){U(v.slice())}function z(){G(O.slice())}let X={getPaper:()=>c.current,getModel:()=>a.current};(0,b.useImperativeHandle)(r,()=>X),(0,b.useEffect)(()=>{var P;if(!n.current){n.current=!0,e.model!=null?a.current=e.model:o==null?a.current=new Ce(e.modelOptions||{}):a.current=o,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",l.current.appendChild(i.current));let ne=(s,u,R,A,f,S,T,me)=>{let[y,I]=S.component||S.jsx?[S,null]:(0,g.isGroup)(T)?[Object.assign(Object.assign({},S),{jsx:F=>b.default.createElement(b.default.Fragment,null,F.obj.data.label)}),g.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},S),{jsx:F=>b.default.createElement(b.default.Fragment,null,F.obj.data.label)}),g.CLASS_DEFAULT_NODE],W=f.containerType===g.ElementTypes.HTML?document.createElement(g.ELEMENT_DIV):(0,g.$svgNode)(g.ELEMENT_SVG);i.current.appendChild(W),I!=null&&f.$addClassToElement(W,I);let De={data:u,model:R,ui:f,componentId:T.getFullId(),obj:T,props:e.childProps,element:W,eventInfo:me};v.push({data:u,def:y,payload:De,domElement:W,key:T.id,obj:T,hydrated:!1}),L()},ue=(s,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Oe={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(s,u,R,A)=>{},render:ne,rerender:(s,u,R,A,f,S,T,me,y)=>{let I=(0,g.partition)(v,W=>W.obj!==T);v=I.left,L(),ne(s,u,R,A,f,S,T,me),I.right.length>0&&setTimeout(()=>{ue(null,I.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(s,u)=>{}},de=((P=e.viewOptions)==null?void 0:P.edges)||{};for(let s in de){let u=de[s];u.overlays!=null&&(u.overlays=u.overlays.map(R=>R.jsx!=null?{type:g.OVERLAY_TYPE_CUSTOM,options:{create:f=>{let S=document.createElement(g.ELEMENT_DIV);S.className=Ue;let T={data:f.edge.data,model:a.current,ui:pe,componentId:f.edge.getFullId(),obj:f.edge,props:e.childProps,element:S};return O.push({def:{jsx:R.jsx},data:f.edge.data,obj:f.edge,payload:T,domElement:S,key:(0,g.uuid)(),hydrated:!1}),z(),S}}}:R))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),pe=(0,g.renderPaper)(a.current,l.current,Oe,Pe);E.set(pe);let Ee=(s,u)=>{let R=()=>{let f={};return(u.originalData||u.updates)&&(f=(0,g.extend)(u.originalData,u.updates)),f},A=v.find(f=>f.key===s);A!=null&&(A.data=R(),L())},Re=s=>{v=v.filter(u=>u.payload.componentId!==s),L()},Me=(s,u)=>{let R=()=>{let f={};return(u.originalData||u.updates)&&(f=(0,g.extend)(u.originalData,u.updates)),f},A=O.find(f=>f.obj.id===s);A!=null&&(A.data=R(),z())},Ie=s=>{O=O.filter(u=>u.payload.obj.id!==s),z()};a.current.bind(g.EVENT_NODE_UPDATED,s=>{Ee(s.vertex.getFullId(),s)}),a.current.bind(g.EVENT_GROUP_UPDATED,s=>{Ee(s.vertex.getFullId(),s)}),a.current.bind(g.EVENT_NODE_REMOVED,s=>{Re(s.node.id)}),a.current.bind(g.EVENT_GROUP_REMOVED,s=>{Re(s.group.id)}),a.current.bind(g.EVENT_EDGE_REMOVED,s=>{Ie(s.edge.id)}),a.current.bind(g.EVENT_EDGE_UPDATED,s=>{Me(s.edge.id,s)}),a.current.bind(g.EVENT_GRAPH_CLEARED,()=>{v=[],L(),O=[],z()})}}),(0,b.useEffect)(()=>{n.current&&a.current!=null&&c.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>c.current.repaintEverything(),250)}}))},[e.data,e.url]);let ce=`${e.className||""} vjs-react-paper`,M=e.style||{};return b.default.createElement("div",{ref:l,className:ce,style:M},x.map(P=>dt.createPortal(Ze(P,a.current,c,e.childProps),P.domElement,P.key)),d.map(P=>dt.createPortal(Xe(P,a.current,c,e.childProps),P.domElement,P.key)),b.default.createElement(le.Provider,{value:E},e.children))});var Ke=require("@visuallyjs/browser-ui"),oe=N(require("react")),$t=(0,oe.forwardRef)((e,r)=>{let t=J(),n=ye(),o=(0,oe.useRef)(!1),l=(0,oe.useRef)(null),i;(0,oe.useImperativeHandle)(r,()=>({toggleCollapsed:()=>i==null?void 0:i.toggleCollapsed()}));function a(c){c.addPlugin({type:Ke.MiniviewPlugin.type,options:{container:l.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return(0,oe.useEffect)(()=>{o.current||(t!=null?(o.current=!0,a(t)):n!=null&&n.$ui instanceof Ke.Surface&&(o.current=!0,a(n.$ui)))},[t,n]),oe.default.createElement("div",{ref:l,className:`${e.className||""}`})});var ve=require("@visuallyjs/browser-ui"),D=N(require("react")),Yt=(0,D.forwardRef)((e,r)=>{let t=(0,D.useContext)(V),n=(0,D.useContext)($),o=(0,D.useContext)(le),l,i=(0,D.useContext)(je);i==null&&(l=(0,D.useRef)(null),i=at(l));let[a,c]=(0,D.useState)(null),[E,x]=(0,D.useState)(0),[U,d]=(0,D.useState)(null),G=(0,D.useRef)(!1),v=(0,D.useRef)(null),O=e.className||"";(0,D.useEffect)(()=>{var M;(M=l==null?void 0:l.current)==null||M.$refresh()},[E]);let L=e.onSelectionCleared||(()=>c(null)),z=(M,P)=>{c(M),e.refresh&&e.refresh(M),x(ne=>ne+1)};function X(M){l.current=new ve.Inspector({container:v.current,ui:M,renderEmptyContainer:L,refresh:z,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(M):null}),d(l.current)}let ce={getInspector:()=>U};return(0,D.useImperativeHandle)(r,()=>ce),(0,D.useEffect)(()=>{G.current||(G.current=!0,t!=null?t.listen(X):o!=null?o.listen(X):n!=null?n.listen(M=>{M.$ui instanceof ve.Surface&&X(M.$ui)}):(0,ve.log)("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),D.default.createElement("div",{ref:v,className:O},D.default.createElement(je.Provider,{value:i},a!=null&&D.default.createElement(D.default.Fragment,null,typeof e.children=="function"?e.children(a,l.current.$ui.model):e.children||[]),a==null&&D.default.createElement(D.default.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Vl="group:added",Ml="group:member:added",Il="group:member:removed",Bl="group:removed",Ul="dataLoadStart",jl="dataAppendStart",Gl="dataLoadEnd",Ll="dataAppendEnd",kl="dataUpdated",Fl="graphClearStart",Hl="graphCleared",zl="graphChanged",Wl="group:updated",Jl="node:updated",$l="port:updated",Yl="edge:updated",Xl="edge:added",Zl="node:added",ql="edge:removed",Kl="node:removed",Ql="port:added",ei="port:removed",ti="edge:target",ri="edge:source",xt="select",Ot="deselect",Pt="selection:cleared",ni="edge:geometry",oi="edge:pathEdited",ai="edge:dragStart",li="edge:drag",ii="edge:dragEnd",si="edge:dragAbort",ci="edge:typeChanged",ui="node:typeChanged",di="port:typeChanged",pi="group:typeChanged",mi="group:move:start",fi="group:move",Ei="group:move:end",Ci="internal:group:sizeChanged",gi="internal:group:sizeChangedRedo",xi="internal:group:sizeChangedUndo",Oi="internal:edge:redraw",Pi="renderer:added",Ri="node:move:start",Si="node:move",yi="node:move:end",hi="node:move:abort",bi="undoredo:update",Di="undo",_i="redo",vi="destroy";var m=N(require("react")),p=require("@visuallyjs/browser-ui"),St="can-undo",yt="can-redo",Qe="vjs-selected-mode",Rt="vjs-controls-has-selection";function Xt(e){let r="Clear selection",t=J(),n=ye(),[o,l]=(0,m.useState)("row"),[i,a]=(0,m.useState)(!1),[c,E]=(0,m.useState)(!1),x=(0,m.useRef)(null),U=(0,m.useRef)(!1),d=(0,m.useRef)(null),[G,v]=(0,m.useState)("Clear dataset?"),O=(0,m.useRef)(null),[L,z]=(0,m.useState)(!0),[X,ce]=(0,m.useState)(!1),[M,P]=(0,m.useState)(!0),[ne,ue]=(0,m.useState)(!0),[Oe,de]=(0,m.useState)([]),[Pe,pe]=(0,m.useState)([]);function Ee(y){d.current=y,e.clearMessage&&v(e.clearMessage),e.onMaybeClear&&(O.current=e.onMaybeClear),e.orientation&&l(e.orientation),e.undoRedo===!1&&P(!1),e.zoomToExtents===!1&&z(!1),e.zoomButtons===!0&&ce(!0),e.clear===!1&&ue(!1);let I=(e.buttons||[]).filter(F=>F.mode!=null);de(I);let W=(e.buttons||[]).filter(F=>F.mode==null);pe(W),y.bind(p.EVENT_SURFACE_MODE_CHANGED,F=>{y.removeClass(y.$getSelector(x.current,"[data-mode]"),Qe),y.addClass(y.$getSelector(x.current,"[data-mode='"+F+"']"),Qe)}),y.model.bind(p.EVENT_UNDOREDO_UPDATE,F=>{x.current.setAttribute(St,F.undoCount>0?p.TRUE:p.FALSE),x.current.setAttribute(yt,F.redoCount>0?p.TRUE:p.FALSE)}),y.model.bind(xt,T),y.model.bind(Ot,T),y.model.bind(Pt,T);let De=y.getPlugin(p.LassoPlugin.type);a(De!=null),E(De!=null||I.length>0)}function Re(){d.current.model.clearSelection(),d.current.zoomToFit()}function Me(){d.current.zoomIn()}function Ie(){d.current.zoomOut()}function s(){d.current.setMode(p.SURFACE_MODE_PAN)}function u(){d.current.setMode(p.SURFACE_MODE_SELECT)}function R(){d.current.model.clearSelection(),(0,p.supportsPathEditing)(d.current)&&d.current.stopEditingPath()}function A(){O.current!=null?O.current(()=>d.current.model.clear()):window.confirm(G)&&d.current.model.clear()}function f(){d.current.model.undo()}function S(){d.current.model.redo()}let T=()=>{d.current.model.getSelection().isEmpty()?x.current.removeAttribute(Rt):x.current.setAttribute(Rt,"true")};(0,m.useEffect)(()=>{U.current===!1&&(t!=null?(U.current=!0,Ee(t)):n!=null&&n.$ui instanceof p.Surface&&(U.current=!0,Ee(n.$ui)))},[t,n]);let me=e.style||{};return m.default.createElement("div",{style:me,ref:x,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":o},c&&m.default.createElement("i",{className:"vjs-pan-mode "+Qe,"data-mode":p.SURFACE_MODE_PAN,title:"Pan Mode",onClick:()=>s()},m.default.createElement("svg",{fill:"none",viewBox:p.PAN_VIEW_BOX,stroke:"currentColor"},m.default.createElement("path",{d:p.PAN_PATH}))),i&&m.default.createElement("i",{className:"vjs-select-mode","data-mode":p.SURFACE_MODE_SELECT,title:"Select Mode",onClick:()=>u()},m.default.createElement("svg",{fill:"currentColor",viewBox:p.LASSO_VIEW_BOX,stroke:"currentColor"},m.default.createElement("path",{d:p.LASSO_PATH}))),Oe.map(y=>m.default.createElement("i",{className:y.class,title:y.title,onClick:I=>y.handler(I,y.id)})),L&&m.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Re()},m.default.createElement("svg",{viewBox:p.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:p.ZOOM_TO_FIT_PATH}))),X&&m.default.createElement(m.default.Fragment,null,m.default.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>Me()},m.default.createElement("svg",{viewBox:p.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:p.ZOOM_IN_PATH}))),m.default.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>Ie()},m.default.createElement("svg",{viewBox:p.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:p.ZOOM_OUT_PATH})))),M&&m.default.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>f()}),M&&m.default.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>S()}),m.default.createElement("i",{className:p.CLASS_CONTROLS_RESET_SELECTION,title:r,onClick:()=>R()},m.default.createElement("svg",{viewBox:p.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:p.RESET_SELECTION_PATH}))),ne&&m.default.createElement("i",{className:"vjs-clear-dataset",title:G,onClick:()=>A()},m.default.createElement("svg",{viewBox:p.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},m.default.createElement("path",{d:p.CLEAR_PATH}))),Pe.map(y=>m.default.createElement("i",{className:y.class,title:y.title,onClick:I=>y.handler(I,y.id)})))}var w=N(require("react")),ae=require("@visuallyjs/browser-ui");function Zt(e){let r=(0,w.useRef)(!1),t=(0,w.useRef)(null),n=J(),o=ye(),[l,i]=(0,w.useState)(!0),[a,c]=(0,w.useState)("Export :"),[E,x]=(0,w.useState)(null),[U,d]=(0,w.useState)(null),[G,v]=(0,w.useState)(null),[O,L]=(0,w.useState)(!0),[z,X]=(0,w.useState)(!0),[ce,M]=(0,w.useState)(!0);function P(de){t.current=de,e.label&&c(a),e.showLabel!=null&&i(e.showLabel),e.margins&&x(e.margins);let Pe=e.svgOptions||{};d(Pe);let pe=e.imageOptions||{};v(pe),e.allowJpgExport!=null&&M(e.allowJpgExport),e.allowPngExport!=null&&X(e.allowPngExport),e.allowSvgExport!=null&&L(e.allowSvgExport)}function ne(){new ae.SvgExportUI(t.current).export(U)}function ue(){new ae.ImageExportUI(t.current).export(G)}function Oe(){new ae.ImageExportUI(t.current).export(Object.assign(G||{},{type:"image/jpeg"}))}return(0,w.useEffect)(()=>{r.current===!1&&(n!=null?(r.current=!0,P(n)):o!=null&&o.$ui instanceof ae.Surface&&(r.current=!0,P(o.$ui)))},[n,o]),w.default.createElement("div",{className:`${ae.CLASS_CONTROLS} ${ae.CLASS_EXPORT_CONTROLS}`},l&&w.default.createElement("span",null,a),O&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportSvg",onClick:()=>ne()},"SVG")),z&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportPng",onClick:()=>ue()},"PNG")),ce&&w.default.createElement("i",null,w.default.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Oe()},"JPG")))}var Q=N(require("react")),Le=require("@visuallyjs/browser-ui"),qt=(0,Q.forwardRef)((e,r)=>{let t=(0,Q.useRef)(!1),n=(0,Q.useRef)(null),o=(0,Q.useContext)(V),l=(0,Q.useRef)(null),i=e.className||"";function a(c){c.getShapeLibrary()!=null?l.current=new Le.ShapePalette(c,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):(0,Le.log)("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return(0,Q.useEffect)(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>a(c)):e.surface!=null?a(e.surface):(0,Le.log)("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Q.default.createElement("div",{ref:n,className:i})});var Te=N(require("react")),Ne=require("@visuallyjs/browser-ui"),ht=120,bt=90;function Kt(e){let r=(0,Te.useRef)(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function l(){return e.ctx.obj.data.width||ht}function i(){return e.ctx.obj.data.height||bt}function a(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function c(){return e.labelProperty||"label"}return(0,Te.useEffect)(()=>{let E=e.ctx.obj.data,x=e.ctx.ui.getShapeLibrary(),U=x.renderCompiledShape(E);if(r.current.replaceChildren(U),e.showLabels){let d=x.renderShapeLabel(E,c(),e.labelStrokeWidth,null,a(),a(),e.font);r.current.appendChild(d),e.multilineLabels!=!1&&(0,Ne.convertToMultilineText)(d,E[c()]||"",l()*(e.labelFillRatio||Ne.DEFAULT_LABEL_FILL_RATIO))}}),Te.default.createElement("svg",{className:Ne.CLASS_SHAPE,ref:r,strokeWidth:t(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+l()+" "+i()})}var ee=N(require("react")),Ae=require("@visuallyjs/browser-ui"),Qt=(0,ee.forwardRef)((e,r)=>{let t=(0,ee.useRef)(!1),n=(0,ee.useRef)(null),o=(0,ee.useContext)(V),l=(0,ee.useRef)(null),i=e.className||"";function a(c){let E={selector:e.selector,source:n.current,dataGenerator:x=>e.dataGenerator?e.dataGenerator(x):(0,Ae.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};l.current=new Ae.Palette(c,E)}return(0,ee.useEffect)(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>a(c)):e.surface!=null?a(e.surface):(0,Ae.log)("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),ee.default.createElement("div",{className:i,ref:n},e.children)});var te=N(require("react")),j=require("@visuallyjs/browser-ui");function er(e){let r=e.maxColors||10,t=(0,te.useRef)(null),n=(0,te.useRef)(!1),o=Ge(),[l,i]=(0,te.useState)(o.ensureContext(j.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function a(d){let G=o.ensureContext(j.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(d=d.toUpperCase(),!(G.find(O=>O.toUpperCase()===d)!=null)){let O=G.slice();O.unshift(d),O.length>r&&(O.length=r),o.updateContext(j.INSPECTOR_CONTEXT_RECENT_COLORS,O)}}function c(){let d=t.current.value;o.setValue(e.propertyName,d,null),a(d)}function E(d){o.setValue(e.propertyName,d,null),t.current.value=d}let x=d=>{d.key===j.INSPECTOR_CONTEXT_RECENT_COLORS&&i(d.value.slice())};function U(){let d=o.getValue(e.propertyName);d!=null&&t.current&&a(d)}return(0,te.useEffect)(()=>(o.bind(j.EVENT_CONTEXT_UPDATE,x),o.bind(j.EVENT_CHANGE,U),n.current||(n.current=!0,t.current.addEventListener(j.EVENT_CHANGE,c)),setTimeout(U),()=>{o.unbind(j.EVENT_CONTEXT_UPDATE,x),o.unbind(j.EVENT_CHANGE,U)})),te.default.createElement("div",{className:j.CLASS_COLOR_PICKER},te.default.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),te.default.createElement("div",{className:j.CLASS_COLOR_PICKER_SWATCHES},l.map(d=>te.default.createElement("div",{key:d,title:d,className:j.CLASS_COLOR_PICKER_SWATCH,style:{backgroundColor:d},"data-color":d,onClick:()=>E(d)}))))}var re=N(require("react")),et=require("@visuallyjs/browser-ui"),tr=(0,re.forwardRef)((e,r)=>{let t=(0,re.useRef)(!1),n=(0,re.useRef)(null),o=(0,re.useContext)($),l=(0,re.useRef)(null),i=e.className||"";function a(E){l.current=new et.DiagramPalette(n.current,E,{fill:e.fill,outline:e.outline,dragSize:e.dragSize,inspector:e.inspector,iconSize:e.iconSize,showLabels:e.showLabels,paletteStrokeWidth:e.paletteStrokeWidth,showAllMessage:e.showAllMessage,onCellAdded:e.onCellAdded,mode:e.mode,allowClickToAdd:e.allowClickToAdd,autoExitDrawMode:e.autoExitDrawMode,selectAfterAdd:e.selectAfterAdd,onVertexAdded:e.onVertexAdded,preparedShapes:e.preparedShapes})}(0,re.useEffect)(()=>{t.current||(t.current=!0,o!=null?o.listen(E=>a(E)):e.diagram!=null?a(e.diagram):(0,et.log)("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let c=e.style||{};return re.default.createElement("div",{ref:n,className:i,style:c})});var H=N(require("react")),B=require("@visuallyjs/browser-ui");function ie(e){let r=(0,H.useRef)(null),t=(0,H.useRef)(!1),n=(0,H.useRef)(!1),o=(0,H.useRef)(null),l=e.style||{},i=(0,H.useContext)(V),a=(0,H.useContext)($);return(0,H.useEffect)(()=>{if(!t.current)if(t.current=!0,i!=null)i.listen(c=>{let E=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,E),n.current=!0});else if(a!=null)a.listen(c=>{let E=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,E),n.current=!0});else{let c=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,c),e.data?o.current.load({data:e.data},()=>{n.current=!0}):e.url?o.current.load({url:e.url},()=>{n.current=!0}):n.current=!0}}),e.reactive!==!1&&((0,H.useEffect)(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),(0,H.useEffect)(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),(0,H.useEffect)(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),(0,H.useEffect)(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),H.default.createElement("div",{ref:r,style:l,className:`${e.className||""}`})}function rr(e){let r=Object.assign({createChart:(t,n)=>new B.ColumnChart(t,n)},e);return ie(r)}function nr(e){let r=Object.assign({createChart:(t,n)=>new B.BarChart(t,n)},e);return ie(r)}function or(e){let r=Object.assign({createChart:(t,n)=>new B.CategoryValueChart(t,n)},e);return ie(r)}function ar(e){let r=Object.assign({createChart:(t,n)=>new B.LineChart(t,n)},e);return ie(r)}function lr(e){let r=Object.assign({createChart:(t,n)=>new B.AreaChart(t,n)},e);return ie(r)}function ir(e){let r=Object.assign({createChart:(t,n)=>new B.PieChart(t,n)},e);return ie(r)}function sr(e){let r=Object.assign({createChart:(t,n)=>new B.ScatterChart(t,n)},e);return ie(r)}function cr(e){let r=Object.assign({createChart:(t,n)=>new B.BubbleChart(t,n)},e);return ie(r)}function ur(e){let r=Object.assign({createChart:(t,n)=>new B.GaugeChart(t,n)},e);return ie(r)}function dr(e){let r=Object.assign({createChart:(t,n)=>new B.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),ie(r)}var Dt=require("@visuallyjs/browser-ui"),fe=N(require("react"));function pt(e){let r=(0,fe.useRef)(!1),t=(0,fe.useRef)(null),n=(0,fe.useContext)(V),o=e.position||{x:0,y:0};function l(i){e.placement==="fixed"?i.fixElement(t.current,o,e.constraints):i.floatElement(t.current,o)}return(0,fe.useEffect)(()=>{r.current||(r.current=!0,n!=null?n.listen(i=>l(i)):(0,Dt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),fe.default.createElement("div",{ref:t},e.children)}var se=require("@visuallyjs/browser-ui"),be=N(require("react"));function tt(e){let r=(0,be.useRef)(!1),t=J();return(0,be.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]),be.default.createElement(be.default.Fragment,null)}function pr(e){return tt(Object.assign({type:se.GeneratedGridBackground.type},e))}function mr(e){return tt(Object.assign({type:se.SimpleBackground.type},e))}function fr(e){return tt(Object.assign({type:se.TiledBackground.type},e))}var _t=require("react"),we=require("@visuallyjs/browser-ui");function Er(e){let r=st();(0,_t.useEffect)(()=>{if(r!=null){let t=()=>e(r);return r.bind(we.EVENT_DATA_UPDATED,t),r.bind(we.EVENT_GRAPH_CLEARED,t),t(),()=>{r.unbind(we.EVENT_DATA_UPDATED,t),r.unbind(we.EVENT_GRAPH_CLEARED,t)}}},[r])}var Ve=require("react"),mt=require("@visuallyjs/browser-ui");function Cr(e){let r=J(),t=lt(),[n,o]=(0,Ve.useState)(e),[l,i]=(0,Ve.useState)(()=>(n==null?void 0:n.getZoom())||1);return(0,Ve.useEffect)(()=>{if(n!=null){let a=c=>{i(c.zoom)};return n.bind(mt.EVENT_ZOOM,a),i(n.getZoom()),()=>{n.unbind(mt.EVENT_ZOOM,a)}}},[n]),(0,Ve.useEffect)(()=>{r!=null&&o(r),t!=null&&o(t)},[r,t]),l}

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

@@ -1 +1 @@
-import{log as Fe}from"@visuallyjs/browser-ui";var He=new Map,ce={};function ze(e,r){He.set(e,r),It(e,r)}function It(e,r){(ce[e]||[]).forEach(o=>{try{o(r)}catch(n){Fe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}}),delete ce[e]}function zo(e,r){let t=He.get(e);if(t)try{r(t)}catch(o){Fe("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}else ce[e]=ce[e]||[],ce[e].push(r)}var he="vjs-react-node",be="vjs-react-group",me="vjs-react-overlay";import We,{useEffect as Bt,useRef as Ut}from"react";function De(e){let r=Ut(!1);return Bt(()=>{r.current||(r.current=!0,e.cb(e.ns))}),We.createElement(We.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 jt,log as Gt}from"@visuallyjs/browser-ui";var Z=class extends jt{render(r,t){return Gt("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Je(e){return e=e||{},new Z(e)}import{createContext as Lt,default as kt,useRef as Ft,useContext as Ht,useState as zt,useEffect as Wt}from"react";var b=Lt(null);function Ka(e){let r=Ft(null),t=de(r);return kt.createElement(b.Provider,{value:t},e.children||[])}function de(e){return q(e)}function q(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=Ht(b),[r,t]=zt(null);return Wt(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}import{createContext as Jt,useContext as $t}from"react";var fe=Jt(null);function $e(e){return q(e)}function Ee(){let e=$t(fe);return e==null?null:e.ref().current}import Yt,{useRef as _e,useEffect as Xt}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Zt,EdgeTypePicker as qt}from"@visuallyjs/browser-ui";function El(e){let r=_e(!1),t=_e(null),o=_e(null),n=Ee(),{propertyName:s}=e,i=()=>n.getFromContext(Zt)||n.$ui.$getEdgePropertyMappings();return Xt(()=>{r.current||(r.current=!0,o.current=new qt(n.$ui,t.current,i(),n.getValue(s),(a,d)=>{n.setValue(s,d)}),o.current.render(s,n.Qe),n.onChange(()=>{o.current.select(s,n.getValue(s))}))}),Yt.createElement("div",{ref:t})}import{createContext as Kt,default as Qt,useRef as er,useContext as tr,useState as rr,useEffect as nr}from"react";var K=Kt(null);function _l(e){let r=er(null),t=Te(r);return Qt.createElement(K.Provider,{value:t},e.children||[])}function Te(e){return q(e)}function Tl(){let e=tr(K),[r,t]=rr(null);return nr(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}import Ce,{createContext as or,forwardRef as ar,useContext as ve,useEffect as Ye,useImperativeHandle as lr,useRef as ue,useState as ir}from"react";import{createDiagram as sr}from"@visuallyjs/browser-ui";var M=or(null);function Xe(e){return q(e)}function Wl(e){let r=ue(null),t=Xe(r);return Ce.createElement(M.Provider,{value:t},e.children||[])}function ee(){let e=ve(M),[r,t]=ir(null);return Ye(()=>{if(e){let o=n=>{t(n)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),r}var Jl=ar((e,r)=>{let t=ue(null),o=ue(!1),n,s,i=ve(M);i==null?(n=ue(null),i=Xe(n)):n=i.ref();let a=ve(b);a==null?(s=ue(null),a=de(s)):s=a.ref();let d={getDiagram:()=>n.current};lr(r,()=>d),Ye(()=>{o.current||(o.current=!0,n.current=sr(t.current,e.options,e.modelOptions),s.current=n.current.$ui,e.data?n.current.load({data:e.data}):e.url&&n.current.load({url:e.url}),i.set(n.current),a.set(s.current))});let p=`${e.className||""} vjs-react-diagram`,P=e.style||{};return Ce.createElement("div",{ref:t,className:p,style:P},Ce.createElement(b.Provider,{value:a},Ce.createElement(M.Provider,{value:i},e.children)))});import cr,{createContext as dr,useContext as ge,useEffect as Ne,useMemo as ur,useState as pr}from"react";var te=dr(void 0);function ci(e){let r=ur(()=>Je(e.modelOptions||{}),[]);function t(n,s){r.clear(),r.load({data:n,dataType:s})}function o(n,s){r.clear(),r.load({url:n,dataType:s})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),Ne(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),Ne(()=>{e.url!=null&&o(e.url,e.dataType)},[e.url]),cr.createElement(te.Provider,{value:r},e.children||[])}function Ze(){let e=ge(te),r=ge(b),t=ge(K),o=ge(M),[n,s]=pr(e);return Ne(()=>{if(e){s(e);return}let i;r!=null&&(r.ref().current?s(r.ref().current.model):(i=p=>{s(p.model)},r.listen(i)));let a;t!=null&&(t.ref().current?n==null&&s(t.ref().current.model):(a=p=>{n==null&&s(p.model)},t.listen(a)));let d;o!=null&&(o.ref().current?n==null&&s(o.ref().current.model):(d=p=>{n==null&&s(p.model)},o.listen(d)))}),n}import qe from"react";import{addClass as Ke,isGroup as Qe,ATTRIBUTE_NOT_DRAGGABLE as et,TRUE as tt}from"@visuallyjs/browser-ui";function mr(e,r){if(e.hydrated!==!0){let t=Qe(e.obj)?be:he;e.domElement.firstElementChild&&Ke(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function xe(e,r,t,o){return qe.createElement(De,{ns:e,model:r,ui:t.current,childProps:o,cb:n=>{mr(n,t)}})}function Oe(e,r,t,o){return qe.createElement(De,{ns:e,model:r,ui:t.current,childProps:o,cb:n=>{fr(n,t)}})}function fr(e,r){if(e.hydrated!==!0){let t=Qe(e.obj)?be:he;e.domElement.firstElementChild&&(Ke(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(et)===tt&&e.domElement.setAttribute(et,tt)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}import re,{forwardRef as Er,useContext as rt,useEffect as nt,useImperativeHandle as Cr,useRef as ne,useState as ot}from"react";import*as Ae from"react-dom";import{ELEMENT_DIV as at,ELEMENT_SVG as gr,ElementTypes as xr,EVENT_GRAPH_CLEARED as Or,EVENT_GROUP_REMOVED as Rr,EVENT_GROUP_UPDATED as Pr,EVENT_NODE_REMOVED as Sr,EVENT_NODE_UPDATED as yr,extend as lt,isGroup as hr,renderSurface as br,CLASS_DEFAULT_NODE as Dr,CLASS_DEFAULT_GROUP as _r,OVERLAY_TYPE_CUSTOM as Tr,EVENT_EDGE_REMOVED as vr,EVENT_EDGE_UPDATED as Nr,uuid as Ar,partition as wr,$svgNode as Vr}from"@visuallyjs/browser-ui";var gs=Er((e,r)=>{let t=ne(!1),o=ne(!1),n=rt(te),s=ne(null),i=ne(null),a=ne(n),d,p=rt(b);p==null?(d=ne(null),p=de(d)):d=p.ref();let[P,_]=ot([]),[u,A]=ot([]),y=[],C=[];function T(){_(y.slice())}function v(){A(C.slice())}let I={getSurface:()=>d.current,getModel:()=>a.current};Cr(r,()=>I),nt(()=>{var g;if(!o.current){o.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new Z(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",s.current.appendChild(i.current));let G=(l,c,O,S,m,E,f,V)=>{let[R,h]=E.component||E.jsx?[E,null]:hr(f)?[Object.assign(Object.assign({},E),{jsx:N=>re.createElement(re.Fragment,null,N.obj.data.label)}),_r]:[Object.assign(Object.assign({},E),{jsx:N=>re.createElement(re.Fragment,null,N.obj.data.label)}),Dr],w=m.containerType===xr.HTML?document.createElement(at):Vr(gr);i.current.appendChild(w),h!=null&&m.$addClassToElement(w,h);let Q={data:c,model:O,ui:m,componentId:f.getFullId(),obj:f,props:e.childProps,element:w,eventInfo:V};y.push({data:c,def:R,payload:Q,domElement:w,key:f.id,obj:f,hydrated:!1}),T()},L=(l,c)=>{c.parentNode&&c.parentNode.removeChild(c)},$={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(l,c,O,S)=>{},render:G,rerender:(l,c,O,S,m,E,f,V,R)=>{let h=wr(y,w=>w.obj!==f);y=h.left,T(),G(l,c,O,S,m,E,f,V),h.right.length>0&&setTimeout(()=>{L(null,h.right[0].domElement)})},cleanupVertex:L,cleanupPort:(l,c)=>{}},k=((g=e.viewOptions)==null?void 0:g.edges)||{};for(let l in k){let c=k[l];c.overlays!=null&&(c.overlays=c.overlays.map(O=>{if(O.jsx!=null){let S=Ar();return{type:Tr,options:{create:E=>{let f=document.createElement(at);f.className=me;let V={data:E.edge.data,model:a.current,ui:F,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:f};return C.push({def:{jsx:O.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:f,key:S,hydrated:!1}),v(),f}}}}else return O}))}let Y=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),F=br(a.current,s.current,$,Y);p.set(F),e.surfaceId!=null&&ze(e.surfaceId,I);let H=(l,c)=>{let O=()=>{let m={};return(c.originalData||c.updates)&&(m=lt(c.originalData,c.updates)),m},S=y.find(m=>m.key===l);S!=null&&(S.data=O(),T())},X=l=>{y=y.filter(c=>c.payload.componentId!==l),T()},ie=(l,c)=>{let O=()=>{let m={};return(c.originalData||c.updates)&&(m=lt(c.originalData,c.updates)),m},S=C.find(m=>m.obj.id===l);S!=null&&(S.data=O(),v())},se=l=>{C=C.filter(c=>c.payload.obj.id!==l),v()};a.current.bind(yr,l=>{H(l.vertex.getFullId(),l)}),a.current.bind(Pr,l=>{H(l.vertex.getFullId(),l)}),a.current.bind(Sr,l=>{X(l.node.id)}),a.current.bind(Rr,l=>{X(l.group.id)}),a.current.bind(vr,l=>{se(l.edge.id)}),a.current.bind(Nr,l=>{ie(l.edge.id,l)}),a.current.bind(Or,()=>{y=[],T(),C=[],v()})}}),nt(()=>{o.current&&a.current!=null&&d.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>d.current.repaintEverything(),250)}}))},[e.data,e.url]);let D=`${e.className||""} vjs-react-surface`,j=e.style||{};return re.createElement("div",{ref:s,className:D,style:j},P.map(g=>Ae.createPortal(Oe(g,a.current,d,e.childProps),g.domElement,g.key)),u.map(g=>Ae.createPortal(xe(g,a.current,d,e.childProps),g.domElement,g.key)),re.createElement(b.Provider,{value:p},e.children))});import oe,{forwardRef as Mr,useContext as it,useEffect as st,useImperativeHandle as Ir,useRef as ae,useState as ct}from"react";import*as we from"react-dom";import{ELEMENT_DIV as dt,ELEMENT_SVG as Br,ElementTypes as Ur,EVENT_GRAPH_CLEARED as jr,EVENT_GROUP_REMOVED as Gr,EVENT_GROUP_UPDATED as Lr,EVENT_NODE_REMOVED as kr,EVENT_NODE_UPDATED as Fr,extend as ut,isGroup as Hr,renderPaper as zr,CLASS_DEFAULT_NODE as Wr,CLASS_DEFAULT_GROUP as Jr,OVERLAY_TYPE_CUSTOM as $r,EVENT_EDGE_REMOVED as Yr,EVENT_EDGE_UPDATED as Xr,uuid as Zr,partition as qr,$svgNode as Kr}from"@visuallyjs/browser-ui";var lc=Mr((e,r)=>{let t=ae(!1),o=ae(!1),n=it(te),s=ae(null),i=ae(null),a=ae(null),d,p=it(K);p==null?(d=ae(null),p=Te(d)):d=p.ref();let[P,_]=ct([]),[u,A]=ct([]),y=[],C=[];function T(){_(y.slice())}function v(){A(C.slice())}let I={getPaper:()=>d.current,getModel:()=>a.current};Ir(r,()=>I),st(()=>{var g;if(!o.current){o.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new Z(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",s.current.appendChild(i.current));let G=(l,c,O,S,m,E,f,V)=>{let[R,h]=E.component||E.jsx?[E,null]:Hr(f)?[Object.assign(Object.assign({},E),{jsx:N=>oe.createElement(oe.Fragment,null,N.obj.data.label)}),Jr]:[Object.assign(Object.assign({},E),{jsx:N=>oe.createElement(oe.Fragment,null,N.obj.data.label)}),Wr],w=m.containerType===Ur.HTML?document.createElement(dt):Kr(Br);i.current.appendChild(w),h!=null&&m.$addClassToElement(w,h);let Q={data:c,model:O,ui:m,componentId:f.getFullId(),obj:f,props:e.childProps,element:w,eventInfo:V};y.push({data:c,def:R,payload:Q,domElement:w,key:f.id,obj:f,hydrated:!1}),T()},L=(l,c)=>{c.parentNode&&c.parentNode.removeChild(c)},$={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(l,c,O,S)=>{},render:G,rerender:(l,c,O,S,m,E,f,V,R)=>{let h=qr(y,w=>w.obj!==f);y=h.left,T(),G(l,c,O,S,m,E,f,V),h.right.length>0&&setTimeout(()=>{L(null,h.right[0].domElement)})},cleanupVertex:L,cleanupPort:(l,c)=>{}},k=((g=e.viewOptions)==null?void 0:g.edges)||{};for(let l in k){let c=k[l];c.overlays!=null&&(c.overlays=c.overlays.map(O=>{if(O.jsx!=null){let S=Zr();return{type:$r,options:{create:E=>{let f=document.createElement(dt);f.className=me;let V={data:E.edge.data,model:a.current,ui:F,componentId:E.edge.getFullId(),obj:E.edge,props:e.childProps,element:f};return C.push({def:{jsx:O.jsx},data:E.edge.data,obj:E.edge,payload:V,domElement:f,key:S,hydrated:!1}),v(),f}}}}else return O}))}let Y=Object.assign(e.renderOptions||{},{view:e.viewOptions}),F=zr(a.current,s.current,$,Y);p.set(F);let H=(l,c)=>{let O=()=>{let m={};return(c.originalData||c.updates)&&(m=ut(c.originalData,c.updates)),m},S=y.find(m=>m.key===l);S!=null&&(S.data=O(),T())},X=l=>{y=y.filter(c=>c.payload.componentId!==l),T()},ie=(l,c)=>{let O=()=>{let m={};return(c.originalData||c.updates)&&(m=ut(c.originalData,c.updates)),m},S=C.find(m=>m.obj.id===l);S!=null&&(S.data=O(),v())},se=l=>{C=C.filter(c=>c.payload.obj.id!==l),v()};a.current.bind(Fr,l=>{H(l.vertex.getFullId(),l)}),a.current.bind(Lr,l=>{H(l.vertex.getFullId(),l)}),a.current.bind(kr,l=>{X(l.node.id)}),a.current.bind(Gr,l=>{X(l.group.id)}),a.current.bind(Yr,l=>{se(l.edge.id)}),a.current.bind(Xr,l=>{ie(l.edge.id,l)}),a.current.bind(jr,()=>{y=[],T(),C=[],v()})}}),st(()=>{o.current&&a.current!=null&&d.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>d.current.repaintEverything(),250)}}))},[e.data,e.url]);let D=`${e.className||""} vjs-react-paper`,j=e.style||{};return oe.createElement("div",{ref:s,className:D,style:j},P.map(g=>we.createPortal(Oe(g,a.current,d,e.childProps),g.domElement,g.key)),u.map(g=>we.createPortal(xe(g,a.current,d,e.childProps),g.domElement,g.key)),oe.createElement(K.Provider,{value:p},e.children))});import{MiniviewPlugin as Qr,Surface as en}from"@visuallyjs/browser-ui";import tn,{forwardRef as rn,useEffect as nn,useImperativeHandle as on,useRef as pt}from"react";var Ec=rn((e,r)=>{let t=z(),o=ee(),n=pt(!1),s=pt(null),i;on(r,()=>({toggleCollapsed:()=>i==null?void 0:i.toggleCollapsed()}));function a(d){d.addPlugin({type:Qr.type,options:{container:s.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return nn(()=>{n.current||(t!=null?(n.current=!0,a(t)):o!=null&&o.$ui instanceof en&&(n.current=!0,a(o.$ui)))},[t,o]),tn.createElement("div",{ref:s,className:`${e.className||""}`})});import{Inspector as an,log as ln,Surface as sn}from"@visuallyjs/browser-ui";import le,{forwardRef as cn,useContext as Ve,useEffect as mt,useImperativeHandle as dn,useRef as Me,useState as Ie}from"react";var Tc=cn((e,r)=>{let t=Ve(b),o=Ve(M),n,s=Ve(fe);s==null&&(n=Me(null),s=$e(n));let[i,a]=Ie(null),[d,p]=Ie(0),[P,_]=Ie(null),u=Me(!1),A=Me(null),y=e.className||"";mt(()=>{var D;(D=n==null?void 0:n.current)==null||D.$refresh()},[d]);let C=e.onSelectionCleared||(()=>a(null)),T=(D,j)=>{a(D),e.refresh&&e.refresh(D),p(g=>g+1)};function v(D){n.current=new an({container:A.current,ui:D,renderEmptyContainer:C,refresh:T,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(D):null}),_(n.current)}let I={getInspector:()=>P};return dn(r,()=>I),mt(()=>{u.current||(u.current=!0,t!=null?t.listen(v):o!=null?o.listen(D=>{D.$ui instanceof sn&&v(D.$ui)}):ln("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),le.createElement("div",{ref:A,className:y},le.createElement(fe.Provider,{value:s},i!=null&&le.createElement(le.Fragment,null,typeof e.children=="function"?e.children(i,n.current.$ui.model):e.children||[]),i==null&&le.createElement(le.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Nc="group:added",Ac="group:member:added",wc="group:member:removed",Vc="group:removed",Mc="dataLoadStart",Ic="dataAppendStart",Bc="dataLoadEnd",Uc="dataAppendEnd",jc="dataUpdated",Gc="graphClearStart",Lc="graphCleared",kc="graphChanged",Fc="group:updated",Hc="node:updated",zc="port:updated",Wc="edge:updated",Jc="edge:added",$c="node:added",Yc="edge:removed",Xc="node:removed",Zc="port:added",qc="port:removed",Kc="edge:target",Qc="edge:source",ft="select",Et="deselect",Ct="selection:cleared",ed="edge:geometry",td="edge:pathEdited",rd="edge:dragStart",nd="edge:drag",od="edge:dragEnd",ad="edge:dragAbort",ld="edge:typeChanged",id="node:typeChanged",sd="port:typeChanged",cd="group:typeChanged",dd="group:move:start",ud="group:move",pd="group:move:end",md="internal:group:sizeChanged",fd="internal:group:sizeChangedRedo",Ed="internal:group:sizeChangedUndo",Cd="internal:edge:redraw",gd="renderer:added",xd="node:move:start",Od="node:move",Rd="node:move:end",Pd="node:move:abort",Sd="undoredo:update",yd="undo",hd="redo",bd="destroy";import x,{useEffect as un,useRef as Re,useState as B}from"react";import{EVENT_UNDOREDO_UPDATE as pn,FALSE as gt,LASSO_PATH as mn,LASSO_VIEW_BOX as fn,LassoPlugin as En,PAN_PATH as Cn,PAN_VIEW_BOX as gn,Surface as xn,SURFACE_MODE_PAN as xt,SURFACE_MODE_SELECT as Ot,TRUE as Rt,ZOOM_TO_FIT_PATH as On,ZOOM_TO_FIT_VIEW_BOX as Rn,EVENT_SURFACE_MODE_CHANGED as Pn,ZOOM_IN_OUT_VIEW_BOX as Pt,ZOOM_IN_PATH as Sn,ZOOM_OUT_PATH as yn,RESET_SELECTION_PATH as hn,RESET_SELECTION_VIEW_BOX as bn,CLEAR_PATH as Dn,CLEAR_VIEW_BOX as _n,CLASS_CONTROLS_RESET_SELECTION as Tn,supportsPathEditing as vn}from"@visuallyjs/browser-ui";var Nn="can-undo",An="can-redo",Be="vjs-selected-mode",St="vjs-controls-has-selection";function Gd(e){let r="Clear selection",t=z(),o=ee(),[n,s]=B("row"),[i,a]=B(!1),[d,p]=B(!1),P=Re(null),_=Re(!1),u=Re(null),[A,y]=B("Clear dataset?"),C=Re(null),[T,v]=B(!0),[I,D]=B(!1),[j,g]=B(!0),[G,L]=B(!0),[$,k]=B([]),[Y,F]=B([]);function H(R){u.current=R,e.clearMessage&&y(e.clearMessage),e.onMaybeClear&&(C.current=e.onMaybeClear),e.orientation&&s(e.orientation),e.undoRedo===!1&&g(!1),e.zoomToExtents===!1&&v(!1),e.zoomButtons===!0&&D(!0),e.clear===!1&&L(!1);let h=(e.buttons||[]).filter(N=>N.mode!=null);k(h);let w=(e.buttons||[]).filter(N=>N.mode==null);F(w),R.bind(Pn,N=>{R.removeClass(R.$getSelector(P.current,"[data-mode]"),Be),R.addClass(R.$getSelector(P.current,"[data-mode='"+N+"']"),Be)}),R.model.bind(pn,N=>{P.current.setAttribute(Nn,N.undoCount>0?Rt:gt),P.current.setAttribute(An,N.redoCount>0?Rt:gt)}),R.model.bind(ft,f),R.model.bind(Et,f),R.model.bind(Ct,f);let Q=R.getPlugin(En.type);a(Q!=null),p(Q!=null||h.length>0)}function X(){u.current.model.clearSelection(),u.current.zoomToFit()}function ie(){u.current.zoomIn()}function se(){u.current.zoomOut()}function l(){u.current.setMode(xt)}function c(){u.current.setMode(Ot)}function O(){u.current.model.clearSelection(),vn(u.current)&&u.current.stopEditingPath()}function S(){C.current!=null?C.current(()=>u.current.model.clear()):window.confirm(A)&&u.current.model.clear()}function m(){u.current.model.undo()}function E(){u.current.model.redo()}let f=()=>{u.current.model.getSelection().isEmpty()?P.current.removeAttribute(St):P.current.setAttribute(St,"true")};un(()=>{_.current===!1&&(t!=null?(_.current=!0,H(t)):o!=null&&o.$ui instanceof xn&&(_.current=!0,H(o.$ui)))},[t,o]);let V=e.style||{};return x.createElement("div",{style:V,ref:P,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":n},d&&x.createElement("i",{className:"vjs-pan-mode "+Be,"data-mode":xt,title:"Pan Mode",onClick:()=>l()},x.createElement("svg",{fill:"none",viewBox:gn,stroke:"currentColor"},x.createElement("path",{d:Cn}))),i&&x.createElement("i",{className:"vjs-select-mode","data-mode":Ot,title:"Select Mode",onClick:()=>c()},x.createElement("svg",{fill:"currentColor",viewBox:fn,stroke:"currentColor"},x.createElement("path",{d:mn}))),$.map(R=>x.createElement("i",{className:R.class,title:R.title,onClick:h=>R.handler(h,R.id)})),T&&x.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>X()},x.createElement("svg",{viewBox:Rn,stroke:"currentColor",fill:"currentColor"},x.createElement("path",{d:On}))),I&&x.createElement(x.Fragment,null,x.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>ie()},x.createElement("svg",{viewBox:Pt,stroke:"currentColor",fill:"currentColor"},x.createElement("path",{d:Sn}))),x.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>se()},x.createElement("svg",{viewBox:Pt,stroke:"currentColor",fill:"currentColor"},x.createElement("path",{d:yn})))),j&&x.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>m()}),j&&x.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>E()}),x.createElement("i",{className:Tn,title:r,onClick:()=>O()},x.createElement("svg",{viewBox:bn,stroke:"currentColor",fill:"currentColor"},x.createElement("path",{d:hn}))),G&&x.createElement("i",{className:"vjs-clear-dataset",title:A,onClick:()=>S()},x.createElement("svg",{viewBox:_n,stroke:"currentColor",fill:"currentColor"},x.createElement("path",{d:Dn}))),Y.map(R=>x.createElement("i",{className:R.class,title:R.title,onClick:h=>R.handler(h,R.id)})))}import W,{useEffect as wn,useRef as yt,useState as J}from"react";import{SvgExportUI as Vn,ImageExportUI as ht,Surface as Mn,CLASS_CONTROLS as In,CLASS_EXPORT_CONTROLS as Bn}from"@visuallyjs/browser-ui";function nu(e){let r=yt(!1),t=yt(null),o=z(),n=ee(),[s,i]=J(!0),[a,d]=J("Export :"),[p,P]=J(null),[_,u]=J(null),[A,y]=J(null),[C,T]=J(!0),[v,I]=J(!0),[D,j]=J(!0);function g(k){t.current=k,e.label&&d(a),e.showLabel!=null&&i(e.showLabel),e.margins&&P(e.margins);let Y=e.svgOptions||{};u(Y);let F=e.imageOptions||{};y(F),e.allowJpgExport!=null&&j(e.allowJpgExport),e.allowPngExport!=null&&I(e.allowPngExport),e.allowSvgExport!=null&&T(e.allowSvgExport)}function G(){new Vn(t.current).export(_)}function L(){new ht(t.current).export(A)}function $(){new ht(t.current).export(Object.assign(A||{},{type:"image/jpeg"}))}return wn(()=>{r.current===!1&&(o!=null?(r.current=!0,g(o)):n!=null&&n.$ui instanceof Mn&&(r.current=!0,g(n.$ui)))},[o,n]),W.createElement("div",{className:`${In} ${Bn}`},s&&W.createElement("span",null,a),C&&W.createElement("i",null,W.createElement("a",{href:"#",id:"exportSvg",onClick:()=>G()},"SVG")),v&&W.createElement("i",null,W.createElement("a",{href:"#",id:"exportPng",onClick:()=>L()},"PNG")),D&&W.createElement("i",null,W.createElement("a",{href:"#",id:"exportJpg",onClick:()=>$()},"JPG")))}import Un,{forwardRef as jn,useContext as Gn,useEffect as Ln,useRef as Ue}from"react";import{log as bt,ShapePalette as kn}from"@visuallyjs/browser-ui";var fu=jn((e,r)=>{let t=Ue(!1),o=Ue(null),n=Gn(b),s=Ue(null),i=e.className||"";function a(d){d.getShapeLibrary()!=null?s.current=new kn(d,{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,preparedShapes:e.preparedShapes}):bt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return Ln(()=>{t.current||(t.current=!0,n!=null?n.listen(d=>a(d)):e.surface!=null?a(e.surface):bt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Un.createElement("div",{ref:o,className:i})});import Fn,{useEffect as Hn,useRef as zn}from"react";import{CLASS_SHAPE as Wn,convertToMultilineText as Jn,DEFAULT_LABEL_FILL_RATIO as $n}from"@visuallyjs/browser-ui";var Yn=120,Xn=90;function Su(e){let r=zn(null);function t(){return e.ctx.obj.data.outlineWidth||2}function o(){return e.ctx.obj.data.fill||"#FFFFFF"}function n(){return e.ctx.obj.data.outline||"#000000"}function s(){return e.ctx.obj.data.width||Yn}function i(){return e.ctx.obj.data.height||Xn}function a(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function d(){return e.labelProperty||"label"}return Hn(()=>{let p=e.ctx.obj.data,P=e.ctx.ui.getShapeLibrary(),_=P.renderCompiledShape(p);if(r.current.replaceChildren(_),e.showLabels){let u=P.renderShapeLabel(p,d(),e.labelStrokeWidth,null,a(),a(),e.font);r.current.appendChild(u),e.multilineLabels!=!1&&Jn(u,p[d()]||"",s()*(e.labelFillRatio||$n))}}),Fn.createElement("svg",{className:Wn,ref:r,strokeWidth:t(),fill:o(),stroke:n(),preserveAspectRatio:"none",viewBox:"0 0 "+s()+" "+i()})}import Zn,{forwardRef as qn,useContext as Kn,useEffect as Qn,useRef as je}from"react";import{log as eo,Palette as to,defaultDataGenerator as ro}from"@visuallyjs/browser-ui";var ju=qn((e,r)=>{let t=je(!1),o=je(null),n=Kn(b),s=je(null),i=e.className||"";function a(d){let p={selector:e.selector,source:o.current,dataGenerator:P=>e.dataGenerator?e.dataGenerator(P):ro(P),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};s.current=new to(d,p)}return Qn(()=>{t.current||(t.current=!0,n!=null?n.listen(d=>a(d)):e.surface!=null?a(e.surface):eo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Zn.createElement("div",{className:i,ref:o},e.children)});import Pe,{useEffect as no,useState as oo,useRef as Dt}from"react";import{CLASS_COLOR_PICKER as ao,CLASS_COLOR_PICKER_SWATCH as lo,CLASS_COLOR_PICKER_SWATCHES as io,EVENT_CONTEXT_UPDATE as _t,EVENT_CHANGE as Ge,INSPECTOR_CONTEXT_RECENT_COLORS as Se}from"@visuallyjs/browser-ui";function Hu(e){let r=e.maxColors||10,t=Dt(null),o=Dt(!1),n=Ee(),[s,i]=oo(n.ensureContext(Se,()=>[]));function a(u){let A=n.ensureContext(Se,()=>[]);if(u=u.toUpperCase(),!(A.find(C=>C.toUpperCase()===u)!=null)){let C=A.slice();C.unshift(u),C.length>r&&(C.length=r),n.updateContext(Se,C)}}function d(){let u=t.current.value;n.setValue(e.propertyName,u),a(u)}function p(u){n.setValue(e.propertyName,u),t.current.value=u}let P=u=>{u.key===Se&&i(u.value.slice())};function _(){let u=n.getValue(e.propertyName);u!=null&&t.current&&a(u)}return no(()=>(n.bind(_t,P),n.bind(Ge,_),o.current||(o.current=!0,t.current.addEventListener(Ge,d)),setTimeout(_),()=>{n.unbind(_t,P),n.unbind(Ge,_)})),Pe.createElement("div",{className:ao},Pe.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),Pe.createElement("div",{className:io},s.map(u=>Pe.createElement("div",{key:u,title:u,className:lo,style:{backgroundColor:u},"data-color":u,onClick:()=>p(u)}))))}import so,{forwardRef as co,useContext as uo,useEffect as po,useRef as Le}from"react";import{log as mo,DiagramPalette as fo}from"@visuallyjs/browser-ui";var tp=co((e,r)=>{let t=Le(!1),o=Le(null),n=uo(M),s=Le(null),i=e.className||"";function a(p){s.current=new fo(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})}po(()=>{t.current||(t.current=!0,n!=null?n.listen(p=>a(p)):e.diagram!=null?a(e.diagram):mo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let d=e.style||{};return so.createElement("div",{ref:o,className:i,style:d})});import Eo,{useContext as Tt,useEffect as pe,useRef as ye}from"react";import{ColumnChart as Co,BarChart as go,CategoryValueChart as xo,LineChart as Oo,AreaChart as Ro,PieChart as Po,ScatterChart as So,BubbleChart as yo,GaugeChart as ho,SankeyChart as bo}from"@visuallyjs/browser-ui";function U(e){let r=ye(null),t=ye(!1),o=ye(!1),n=ye(null),s=e.style||{},i=Tt(b),a=Tt(M);return pe(()=>{if(!t.current)if(t.current=!0,i!=null)i.listen(d=>{let p=Object.assign({dataSource:d.model,dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,p),o.current=!0});else if(a!=null)a.listen(d=>{let p=Object.assign({dataSource:d.model,dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,p),o.current=!0});else{let d=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);n.current=e.createChart(r.current,d),e.data?n.current.load({data:e.data},()=>{o.current=!0}):e.url?n.current.load({url:e.url},()=>{o.current=!0}):o.current=!0}}),e.reactive!==!1&&(pe(()=>{o.current&&e.data!=null&&n.current&&n.current.load({data:e.data})},[e.data]),pe(()=>{o.current&&e.url!=null&&n.current&&n.current.load({url:e.url})},[e.url]),pe(()=>{o.current&&e.pivot!=null&&n.current&&n.current.pivot&&n.current.pivot(e.pivot)},[e.pivot]),pe(()=>{o.current&&e.dataSourceFilter!=null&&n.current&&n.current.setDataSourceFilter&&n.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),Eo.createElement("div",{ref:r,style:s,className:`${e.className||""}`})}function Sp(e){let r=Object.assign({createChart:(t,o)=>new Co(t,o)},e);return U(r)}function yp(e){let r=Object.assign({createChart:(t,o)=>new go(t,o)},e);return U(r)}function hp(e){let r=Object.assign({createChart:(t,o)=>new xo(t,o)},e);return U(r)}function bp(e){let r=Object.assign({createChart:(t,o)=>new Oo(t,o)},e);return U(r)}function Dp(e){let r=Object.assign({createChart:(t,o)=>new Ro(t,o)},e);return U(r)}function _p(e){let r=Object.assign({createChart:(t,o)=>new Po(t,o)},e);return U(r)}function Tp(e){let r=Object.assign({createChart:(t,o)=>new So(t,o)},e);return U(r)}function vp(e){let r=Object.assign({createChart:(t,o)=>new yo(t,o)},e);return U(r)}function Np(e){let r=Object.assign({createChart:(t,o)=>new ho(t,o)},e);return U(r)}function Ap(e){let r=Object.assign({createChart:(t,o)=>new bo(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),U(r)}import{log as Do}from"@visuallyjs/browser-ui";import _o,{useContext as To,useEffect as vo,useRef as vt}from"react";function Nt(e){let r=vt(!1),t=vt(null),o=To(b),n=e.position||{x:0,y:0};function s(i){e.placement==="fixed"?i.fixElement(t.current,n,e.constraints):i.floatElement(t.current,n)}return vo(()=>{r.current||(r.current=!0,o!=null?o.listen(i=>s(i)):Do("Decorator cannot mount: no SurfaceContext from a provider found"))}),_o.createElement("div",{ref:t},e.children)}import{log as No,BackgroundPlugin as Ao,GeneratedGridBackground as wo,TiledBackground as Vo,SimpleBackground as Mo}from"@visuallyjs/browser-ui";import At,{useEffect as Io,useRef as Bo}from"react";function ke(e){let r=Bo(!1),t=z();return Io(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:Ao.type,options:e})}catch(o){No(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),At.createElement(At.Fragment,null)}function Jp(e){return ke(Object.assign({type:wo.type},e))}function $p(e){return ke(Object.assign({type:Mo.type},e))}function Yp(e){return ke(Object.assign({type:Vo.type},e))}import{useEffect as Uo}from"react";import{EVENT_DATA_UPDATED as wt,EVENT_GRAPH_CLEARED as Vt}from"@visuallyjs/browser-ui";function tm(e){let r=Ze();Uo(()=>{if(r!=null){let t=()=>e(r);return r.bind(wt,t),r.bind(Vt,t),t(),()=>{r.unbind(wt,t),r.unbind(Vt,t)}}},[r])}import{useState as jo,useEffect as Go,useRef as Lo}from"react";import{EVENT_ZOOM as Mt}from"@visuallyjs/browser-ui";function lm(e){let r=Lo(!1),[t,o]=jo(()=>(e==null?void 0:e.getZoom())||1);return Go(()=>{if(e!=null&&!r.current){r.current=!0;let n=s=>{o(s.zoom)};return e.bind(Mt,n),o(e.getZoom()),()=>{e.unbind(Mt,n)}}},[e]),t}export{An as ATTRIBUTE_CAN_REDO,Nn as ATTRIBUTE_CAN_UNDO,Dp as AreaChartComponent,ke as BackgroundComponent,yp as BarChartComponent,Z as BrowserUIReactModel,vp as BubbleChartComponent,be as CLASS_REACT_GROUP,he as CLASS_REACT_NODE,me as CLASS_REACT_OVERLAY,Be as CLASS_SELECTED_MODE,Hu as ColorPickerComponent,Sp as ColumnChartComponent,Gd as ControlsComponent,Xn as DEFAULT_SHAPE_HEIGHT,Yn as DEFAULT_SHAPE_WIDTH,Nt as DecoratorComponent,Jl as DiagramComponent,M as DiagramContext,tp as DiagramPaletteComponent,Wl as DiagramProvider,El as EdgeTypePickerComponent,nu as ExportControlsComponent,Np as GaugeChartComponent,Jp as GridBackgroundComponent,$p as ImageBackgroundComponent,Tc as InspectorComponent,fe as InspectorContext,De as JSXWrapper,bp as LineChartComponent,Ec as MiniviewComponent,ju as PaletteComponent,lc as PaperComponent,K as PaperContext,_l as PaperProvider,_p as PieChartComponent,Ap as SankeyChartComponent,Tp as ScatterChartComponent,Su as ShapeComponent,fu as ShapePaletteComponent,gs as SurfaceComponent,b as SurfaceContext,Ka as SurfaceProvider,Yp as TiledImageBackgroundComponent,te as VisuallyJsContext,ci as VisuallyJsProvider,hp as XYChartComponent,Xe as createDiagramRef,$e as createInspectorRef,Te as createPaperRef,q as createRefHandler,de as createSurfaceRef,zo as getSurfaceComponent,Je as newInstance,ze as registerSurface,ee as useDiagram,Ee as useInspector,Tl as usePaper,z as useSurface,Ze as useVisuallyJsModel,tm as useVisuallyJsUpdate,lm as useZoom};
+import{log as He}from"@visuallyjs/browser-ui";var ze=new Map,ce={};function We(e,r){ze.set(e,r),Lt(e,r)}function Lt(e,r){(ce[e]||[]).forEach(n=>{try{n(r)}catch(o){He("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete ce[e]}function Ko(e,r){let t=ze.get(e);if(t)try{r(t)}catch(n){He("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else ce[e]=ce[e]||[],ce[e].push(r)}var be="vjs-react-node",De="vjs-react-group",me="vjs-react-overlay";import Je,{useEffect as kt,useRef as Ft}from"react";function _e(e){let r=Ft(!1);return kt(()=>{r.current||(r.current=!0,e.cb(e.ns))}),Je.createElement(Je.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 Ht,log as zt}from"@visuallyjs/browser-ui";var q=class extends Ht{render(r,t){return zt("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function $e(e){return e=e||{},new q(e)}import{createContext as Wt,default as Jt,useRef as $t,useContext as Yt,useState as Xt,useEffect as Zt}from"react";var D=Wt(null);function ll(e){let r=$t(null),t=ue(r);return Jt.createElement(D.Provider,{value:t},e.children||[])}function ue(e){return K(e)}function K(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 M(){let e=Yt(D),[r,t]=Xt(null);return Zt(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}import{createContext as qt,useContext as Kt}from"react";var fe=qt(null);function Ye(e){return K(e)}function Ee(){let e=Kt(fe);return e==null?null:e.ref().current}import Qt,{useRef as ve,useEffect as er}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as tr,EdgeTypePicker as rr}from"@visuallyjs/browser-ui";function yl(e){let r=ve(!1),t=ve(null),n=ve(null),o=Ee(),{propertyName:l}=e,i=()=>o.getFromContext(tr)||o.$ui.$getEdgePropertyMappings();return er(()=>{r.current||(r.current=!0,n.current=new rr(o.$ui,t.current,i(),o.getValue(l),(a,c)=>{o.setValue(l,c,null)}),n.current.render(l,o.Qe),o.onChange(()=>{n.current.select(l,o.getValue(l))}))}),Qt.createElement("div",{ref:t})}import{createContext as nr,default as or,useRef as ar,useContext as lr,useState as ir,useEffect as sr}from"react";var z=nr(null);function Il(e){let r=ar(null),t=Te(r);return or.createElement(z.Provider,{value:t},e.children||[])}function Te(e){return K(e)}function Xe(){let e=lr(z),[r,t]=ir(null);return sr(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}import Ce,{createContext as cr,forwardRef as ur,useContext as Ne,useEffect as Ze,useImperativeHandle as dr,useRef as de,useState as pr}from"react";import{createDiagram as mr}from"@visuallyjs/browser-ui";var I=cr(null);function qe(e){return K(e)}function Kl(e){let r=de(null),t=qe(r);return Ce.createElement(I.Provider,{value:t},e.children||[])}function ee(){let e=Ne(I),[r,t]=pr(null);return Ze(()=>{if(e){let n=o=>{t(o)};e.ref().current?t(e.ref().current):e.listen(n)}},[e]),r}var Ql=ur((e,r)=>{let t=de(null),n=de(!1),o,l,i=Ne(I);i==null?(o=de(null),i=qe(o)):o=i.ref();let a=Ne(D);a==null?(l=de(null),a=ue(l)):l=a.ref();let c={getDiagram:()=>o.current};dr(r,()=>c),Ze(()=>{n.current||(n.current=!0,o.current=mr(t.current,e.options,e.modelOptions),l.current=o.current.$ui,e.data?o.current.load({data:e.data}):e.url&&o.current.load({url:e.url}),i.set(o.current),a.set(l.current))});let m=`${e.className||""} vjs-react-diagram`,f=e.style||{};return Ce.createElement("div",{ref:t,className:m,style:f},Ce.createElement(D.Provider,{value:a},Ce.createElement(I.Provider,{value:i},e.children)))});import fr,{createContext as Er,useContext as ge,useEffect as Ae,useMemo as Cr,useState as gr}from"react";var te=Er(void 0);function Ci(e){let r=Cr(()=>$e(e.modelOptions||{}),[]);function t(o,l){r.clear(),r.load({data:o,dataType:l})}function n(o,l){r.clear(),r.load({url:o,dataType:l})}return e.data!=null&&t(e.data,e.dataType),e.url!=null&&t(e.url,e.dataType),Ae(()=>{e.data!=null&&t(e.data,e.dataType)},[e.data]),Ae(()=>{e.url!=null&&n(e.url,e.dataType)},[e.url]),fr.createElement(te.Provider,{value:r},e.children||[])}function Ke(){let e=ge(te),r=ge(D),t=ge(z),n=ge(I),[o,l]=gr(e);return Ae(()=>{if(e){l(e);return}let i;r!=null&&(r.ref().current?l(r.ref().current.model):(i=m=>{l(m.model)},r.listen(i)));let a;t!=null&&(t.ref().current?o==null&&l(t.ref().current.model):(a=m=>{o==null&&l(m.model)},t.listen(a)));let c;n!=null&&(n.ref().current?o==null&&l(n.ref().current.model):(c=m=>{o==null&&l(m.model)},n.listen(c)))}),o}import Qe from"react";import{addClass as et,isGroup as tt,ATTRIBUTE_NOT_DRAGGABLE as rt,TRUE as nt}from"@visuallyjs/browser-ui";function xr(e,r){if(e.hydrated!==!0){let t=tt(e.obj)?De:be;e.domElement.firstElementChild&&et(e.domElement.firstElementChild,t),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}function xe(e,r,t,n){return Qe.createElement(_e,{ns:e,model:r,ui:t.current,childProps:n,cb:o=>{xr(o,t)}})}function Oe(e,r,t,n){return Qe.createElement(_e,{ns:e,model:r,ui:t.current,childProps:n,cb:o=>{Or(o,t)}})}function Or(e,r){if(e.hydrated!==!0){let t=tt(e.obj)?De:be;e.domElement.firstElementChild&&(et(e.domElement.firstElementChild,t),e.domElement.firstElementChild.getAttribute(rt)===nt&&e.domElement.setAttribute(rt,nt)),r.current.$vertexRendered(e.obj,e.domElement,e.def,e.payload.eventInfo),e.hydrated=!0}else r.current.$revalidateElement(e.domElement)}import re,{forwardRef as Pr,useContext as ot,useEffect as at,useImperativeHandle as Rr,useRef as ne,useState as lt}from"react";import*as we from"react-dom";import{ELEMENT_DIV as it,ELEMENT_SVG as Sr,ElementTypes as yr,EVENT_GRAPH_CLEARED as hr,EVENT_GROUP_REMOVED as br,EVENT_GROUP_UPDATED as Dr,EVENT_NODE_REMOVED as _r,EVENT_NODE_UPDATED as vr,extend as st,isGroup as Tr,renderSurface as Nr,CLASS_DEFAULT_NODE as Ar,CLASS_DEFAULT_GROUP as wr,OVERLAY_TYPE_CUSTOM as Vr,EVENT_EDGE_REMOVED as Mr,EVENT_EDGE_UPDATED as Ir,uuid as Br,partition as Ur,$svgNode as jr}from"@visuallyjs/browser-ui";var hs=Pr((e,r)=>{let t=ne(!1),n=ne(!1),o=ot(te),l=ne(null),i=ne(null),a=ne(o),c,m=ot(D);m==null?(c=ne(null),m=ue(c)):c=m.ref();let[f,_]=lt([]),[d,v]=lt([]),R=[],E=[];function T(){_(R.slice())}function A(){v(E.slice())}let V={getSurface:()=>c.current,getModel:()=>a.current};Rr(r,()=>V),at(()=>{var g;if(!n.current){n.current=!0,e.model!=null?a.current=e.model:o==null?a.current=new q(e.modelOptions||{}):a.current=o,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",l.current.appendChild(i.current));let B=(s,u,x,y,p,O,S,H)=>{let[P,b]=O.component||O.jsx?[O,null]:Tr(S)?[Object.assign(Object.assign({},O),{jsx:N=>re.createElement(re.Fragment,null,N.obj.data.label)}),wr]:[Object.assign(Object.assign({},O),{jsx:N=>re.createElement(re.Fragment,null,N.obj.data.label)}),Ar],w=p.containerType===yr.HTML?document.createElement(it):jr(Sr);i.current.appendChild(w),b!=null&&p.$addClassToElement(w,b);let Q={data:u,model:x,ui:p,componentId:S.getFullId(),obj:S,props:e.childProps,element:w,eventInfo:H};R.push({data:u,def:P,payload:Q,domElement:w,key:S.id,obj:S,hydrated:!1}),T()},L=(s,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(s,u,x,y)=>{},render:B,rerender:(s,u,x,y,p,O,S,H,P)=>{let b=Ur(R,w=>w.obj!==S);R=b.left,T(),B(s,u,x,y,p,O,S,H),b.right.length>0&&setTimeout(()=>{L(null,b.right[0].domElement)})},cleanupVertex:L,cleanupPort:(s,u)=>{}},k=((g=e.viewOptions)==null?void 0:g.edges)||{};for(let s in k){let u=k[s];u.overlays!=null&&(u.overlays=u.overlays.map(x=>x.jsx!=null?{type:Vr,options:{create:p=>{let O=document.createElement(it);O.className=me;let S={data:p.edge.data,model:a.current,ui:F,componentId:p.edge.getFullId(),obj:p.edge,props:e.childProps,element:O};return E.push({def:{jsx:x.jsx},data:p.edge.data,obj:p.edge,payload:S,domElement:O,key:Br(),hydrated:!1}),A(),O}}}:x))}let X=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),F=Nr(a.current,l.current,Y,X);m.set(F),e.surfaceId!=null&&We(e.surfaceId,V);let W=(s,u)=>{let x=()=>{let p={};return(u.originalData||u.updates)&&(p=st(u.originalData,u.updates)),p},y=R.find(p=>p.key===s);y!=null&&(y.data=x(),T())},Z=s=>{R=R.filter(u=>u.payload.componentId!==s),T()},ie=(s,u)=>{let x=()=>{let p={};return(u.originalData||u.updates)&&(p=st(u.originalData,u.updates)),p},y=E.find(p=>p.obj.id===s);y!=null&&(y.data=x(),A())},se=s=>{E=E.filter(u=>u.payload.obj.id!==s),A()};a.current.bind(vr,s=>{W(s.vertex.getFullId(),s)}),a.current.bind(Dr,s=>{W(s.vertex.getFullId(),s)}),a.current.bind(_r,s=>{Z(s.node.id)}),a.current.bind(br,s=>{Z(s.group.id)}),a.current.bind(Mr,s=>{se(s.edge.id)}),a.current.bind(Ir,s=>{ie(s.edge.id,s)}),a.current.bind(hr,()=>{R=[],T(),E=[],A()})}}),at(()=>{n.current&&a.current!=null&&c.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>c.current.repaintEverything(),250)}}))},[e.data,e.url]);let G=`${e.className||""} vjs-react-surface`,h=e.style||{};return re.createElement("div",{ref:l,className:G,style:h},f.map(g=>we.createPortal(Oe(g,a.current,c,e.childProps),g.domElement,g.key)),d.map(g=>we.createPortal(xe(g,a.current,c,e.childProps),g.domElement,g.key)),re.createElement(D.Provider,{value:m},e.children))});import Gr,{useEffect as Lr,useMemo as kr,useRef as Ve,useState as ct}from"react";import{PopupHandler as Fr,CLASS_SURFACE_POPUP as Hr}from"@visuallyjs/browser-ui";function zr(e){let r=M(),t=Ve(null),n=Ve(!1),o=Ve(null),[l,i]=ct(null),[a,c]=ct(0),m=kr(()=>l==null?"none":"block",[l]);function f(d){i(d),c(v=>v+1)}Lr(()=>{!n.current&&r&&(n.current=!0,o.current=new Fr(e.selector,t.current,r,d=>f(d),e.anchor))});function _(){o.current&&o.current.$hide()}return Gr.createElement("div",{ref:t,className:Hr,style:{display:m,position:"absolute"}},l!=null&&e.children(l,r.model,r,()=>_()))}import oe,{forwardRef as Wr,useContext as ut,useEffect as dt,useImperativeHandle as Jr,useRef as ae,useState as pt}from"react";import*as Me from"react-dom";import{ELEMENT_DIV as mt,ELEMENT_SVG as $r,ElementTypes as Yr,EVENT_GRAPH_CLEARED as Xr,EVENT_GROUP_REMOVED as Zr,EVENT_GROUP_UPDATED as qr,EVENT_NODE_REMOVED as Kr,EVENT_NODE_UPDATED as Qr,extend as ft,isGroup as en,renderPaper as tn,CLASS_DEFAULT_NODE as rn,CLASS_DEFAULT_GROUP as nn,OVERLAY_TYPE_CUSTOM as on,EVENT_EDGE_REMOVED as an,EVENT_EDGE_UPDATED as ln,uuid as sn,partition as cn,$svgNode as un}from"@visuallyjs/browser-ui";var Ec=Wr((e,r)=>{let t=ae(!1),n=ae(!1),o=ut(te),l=ae(null),i=ae(null),a=ae(null),c,m=ut(z);m==null?(c=ae(null),m=Te(c)):c=m.ref();let[f,_]=pt([]),[d,v]=pt([]),R=[],E=[];function T(){_(R.slice())}function A(){v(E.slice())}let V={getPaper:()=>c.current,getModel:()=>a.current};Jr(r,()=>V),dt(()=>{var g;if(!n.current){n.current=!0,e.model!=null?a.current=e.model:o==null?a.current=new q(e.modelOptions||{}):a.current=o,typeof document!="undefined"&&(i.current=document.createElement("div"),i.current.style.position="fixed",i.current.style.left="10000px",i.current.style.top="10000px",i.current.style.width="100px",i.current.style.height="100px",i.current.style.opacity="0",l.current.appendChild(i.current));let B=(s,u,x,y,p,O,S,H)=>{let[P,b]=O.component||O.jsx?[O,null]:en(S)?[Object.assign(Object.assign({},O),{jsx:N=>oe.createElement(oe.Fragment,null,N.obj.data.label)}),nn]:[Object.assign(Object.assign({},O),{jsx:N=>oe.createElement(oe.Fragment,null,N.obj.data.label)}),rn],w=p.containerType===Yr.HTML?document.createElement(mt):un($r);i.current.appendChild(w),b!=null&&p.$addClassToElement(w,b);let Q={data:u,model:x,ui:p,componentId:S.getFullId(),obj:S,props:e.childProps,element:w,eventInfo:H};R.push({data:u,def:P,payload:Q,domElement:w,key:S.id,obj:S,hydrated:!1}),T()},L=(s,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(s,u,x,y)=>{},render:B,rerender:(s,u,x,y,p,O,S,H,P)=>{let b=cn(R,w=>w.obj!==S);R=b.left,T(),B(s,u,x,y,p,O,S,H),b.right.length>0&&setTimeout(()=>{L(null,b.right[0].domElement)})},cleanupVertex:L,cleanupPort:(s,u)=>{}},k=((g=e.viewOptions)==null?void 0:g.edges)||{};for(let s in k){let u=k[s];u.overlays!=null&&(u.overlays=u.overlays.map(x=>x.jsx!=null?{type:on,options:{create:p=>{let O=document.createElement(mt);O.className=me;let S={data:p.edge.data,model:a.current,ui:F,componentId:p.edge.getFullId(),obj:p.edge,props:e.childProps,element:O};return E.push({def:{jsx:x.jsx},data:p.edge.data,obj:p.edge,payload:S,domElement:O,key:sn(),hydrated:!1}),A(),O}}}:x))}let X=Object.assign(e.renderOptions||{},{view:e.viewOptions}),F=tn(a.current,l.current,Y,X);m.set(F);let W=(s,u)=>{let x=()=>{let p={};return(u.originalData||u.updates)&&(p=ft(u.originalData,u.updates)),p},y=R.find(p=>p.key===s);y!=null&&(y.data=x(),T())},Z=s=>{R=R.filter(u=>u.payload.componentId!==s),T()},ie=(s,u)=>{let x=()=>{let p={};return(u.originalData||u.updates)&&(p=ft(u.originalData,u.updates)),p},y=E.find(p=>p.obj.id===s);y!=null&&(y.data=x(),A())},se=s=>{E=E.filter(u=>u.payload.obj.id!==s),A()};a.current.bind(Qr,s=>{W(s.vertex.getFullId(),s)}),a.current.bind(qr,s=>{W(s.vertex.getFullId(),s)}),a.current.bind(Kr,s=>{Z(s.node.id)}),a.current.bind(Zr,s=>{Z(s.group.id)}),a.current.bind(an,s=>{se(s.edge.id)}),a.current.bind(ln,s=>{ie(s.edge.id,s)}),a.current.bind(Xr,()=>{R=[],T(),E=[],A()})}}),dt(()=>{n.current&&a.current!=null&&c.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(t.current=!0,a.current.clear(),a.current.load({data:e.data,url:e.url,onload:()=>{t.current=!1,setTimeout(()=>c.current.repaintEverything(),250)}}))},[e.data,e.url]);let G=`${e.className||""} vjs-react-paper`,h=e.style||{};return oe.createElement("div",{ref:l,className:G,style:h},f.map(g=>Me.createPortal(Oe(g,a.current,c,e.childProps),g.domElement,g.key)),d.map(g=>Me.createPortal(xe(g,a.current,c,e.childProps),g.domElement,g.key)),oe.createElement(z.Provider,{value:m},e.children))});import{MiniviewPlugin as dn,Surface as pn}from"@visuallyjs/browser-ui";import mn,{forwardRef as fn,useEffect as En,useImperativeHandle as Cn,useRef as Et}from"react";var hc=fn((e,r)=>{let t=M(),n=ee(),o=Et(!1),l=Et(null),i;Cn(r,()=>({toggleCollapsed:()=>i==null?void 0:i.toggleCollapsed()}));function a(c){c.addPlugin({type:dn.type,options:{container:l.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return En(()=>{o.current||(t!=null?(o.current=!0,a(t)):n!=null&&n.$ui instanceof pn&&(o.current=!0,a(n.$ui)))},[t,n]),mn.createElement("div",{ref:l,className:`${e.className||""}`})});import{Inspector as gn,log as xn,Surface as On}from"@visuallyjs/browser-ui";import le,{forwardRef as Pn,useContext as Pe,useEffect as Ct,useImperativeHandle as Rn,useRef as Ie,useState as Be}from"react";var Gc=Pn((e,r)=>{let t=Pe(D),n=Pe(I),o=Pe(z),l,i=Pe(fe);i==null&&(l=Ie(null),i=Ye(l));let[a,c]=Be(null),[m,f]=Be(0),[_,d]=Be(null),v=Ie(!1),R=Ie(null),E=e.className||"";Ct(()=>{var h;(h=l==null?void 0:l.current)==null||h.$refresh()},[m]);let T=e.onSelectionCleared||(()=>c(null)),A=(h,g)=>{c(h),e.refresh&&e.refresh(h),f(B=>B+1)};function V(h){l.current=new gn({container:R.current,ui:h,renderEmptyContainer:T,refresh:A,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(h):null}),d(l.current)}let G={getInspector:()=>_};return Rn(r,()=>G),Ct(()=>{v.current||(v.current=!0,t!=null?t.listen(V):o!=null?o.listen(V):n!=null?n.listen(h=>{h.$ui instanceof On&&V(h.$ui)}):xn("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),le.createElement("div",{ref:R,className:E},le.createElement(fe.Provider,{value:i},a!=null&&le.createElement(le.Fragment,null,typeof e.children=="function"?e.children(a,l.current.$ui.model):e.children||[]),a==null&&le.createElement(le.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var kc="group:added",Fc="group:member:added",Hc="group:member:removed",zc="group:removed",Wc="dataLoadStart",Jc="dataAppendStart",$c="dataLoadEnd",Yc="dataAppendEnd",Xc="dataUpdated",Zc="graphClearStart",qc="graphCleared",Kc="graphChanged",Qc="group:updated",eu="node:updated",tu="port:updated",ru="edge:updated",nu="edge:added",ou="node:added",au="edge:removed",lu="node:removed",iu="port:added",su="port:removed",cu="edge:target",uu="edge:source",gt="select",xt="deselect",Ot="selection:cleared",du="edge:geometry",pu="edge:pathEdited",mu="edge:dragStart",fu="edge:drag",Eu="edge:dragEnd",Cu="edge:dragAbort",gu="edge:typeChanged",xu="node:typeChanged",Ou="port:typeChanged",Pu="group:typeChanged",Ru="group:move:start",Su="group:move",yu="group:move:end",hu="internal:group:sizeChanged",bu="internal:group:sizeChangedRedo",Du="internal:group:sizeChangedUndo",_u="internal:edge:redraw",vu="renderer:added",Tu="node:move:start",Nu="node:move",Au="node:move:end",wu="node:move:abort",Vu="undoredo:update",Mu="undo",Iu="redo",Bu="destroy";import C,{useEffect as Sn,useRef as Re,useState as U}from"react";import{EVENT_UNDOREDO_UPDATE as yn,FALSE as Pt,LASSO_PATH as hn,LASSO_VIEW_BOX as bn,LassoPlugin as Dn,PAN_PATH as _n,PAN_VIEW_BOX as vn,Surface as Tn,SURFACE_MODE_PAN as Rt,SURFACE_MODE_SELECT as St,TRUE as yt,ZOOM_TO_FIT_PATH as Nn,ZOOM_TO_FIT_VIEW_BOX as An,EVENT_SURFACE_MODE_CHANGED as wn,ZOOM_IN_OUT_VIEW_BOX as ht,ZOOM_IN_PATH as Vn,ZOOM_OUT_PATH as Mn,RESET_SELECTION_PATH as In,RESET_SELECTION_VIEW_BOX as Bn,CLEAR_PATH as Un,CLEAR_VIEW_BOX as jn,CLASS_CONTROLS_RESET_SELECTION as Gn,supportsPathEditing as Ln}from"@visuallyjs/browser-ui";var kn="can-undo",Fn="can-redo",Ue="vjs-selected-mode",bt="vjs-controls-has-selection";function Zu(e){let r="Clear selection",t=M(),n=ee(),[o,l]=U("row"),[i,a]=U(!1),[c,m]=U(!1),f=Re(null),_=Re(!1),d=Re(null),[v,R]=U("Clear dataset?"),E=Re(null),[T,A]=U(!0),[V,G]=U(!1),[h,g]=U(!0),[B,L]=U(!0),[Y,k]=U([]),[X,F]=U([]);function W(P){d.current=P,e.clearMessage&&R(e.clearMessage),e.onMaybeClear&&(E.current=e.onMaybeClear),e.orientation&&l(e.orientation),e.undoRedo===!1&&g(!1),e.zoomToExtents===!1&&A(!1),e.zoomButtons===!0&&G(!0),e.clear===!1&&L(!1);let b=(e.buttons||[]).filter(N=>N.mode!=null);k(b);let w=(e.buttons||[]).filter(N=>N.mode==null);F(w),P.bind(wn,N=>{P.removeClass(P.$getSelector(f.current,"[data-mode]"),Ue),P.addClass(P.$getSelector(f.current,"[data-mode='"+N+"']"),Ue)}),P.model.bind(yn,N=>{f.current.setAttribute(kn,N.undoCount>0?yt:Pt),f.current.setAttribute(Fn,N.redoCount>0?yt:Pt)}),P.model.bind(gt,S),P.model.bind(xt,S),P.model.bind(Ot,S);let Q=P.getPlugin(Dn.type);a(Q!=null),m(Q!=null||b.length>0)}function Z(){d.current.model.clearSelection(),d.current.zoomToFit()}function ie(){d.current.zoomIn()}function se(){d.current.zoomOut()}function s(){d.current.setMode(Rt)}function u(){d.current.setMode(St)}function x(){d.current.model.clearSelection(),Ln(d.current)&&d.current.stopEditingPath()}function y(){E.current!=null?E.current(()=>d.current.model.clear()):window.confirm(v)&&d.current.model.clear()}function p(){d.current.model.undo()}function O(){d.current.model.redo()}let S=()=>{d.current.model.getSelection().isEmpty()?f.current.removeAttribute(bt):f.current.setAttribute(bt,"true")};Sn(()=>{_.current===!1&&(t!=null?(_.current=!0,W(t)):n!=null&&n.$ui instanceof Tn&&(_.current=!0,W(n.$ui)))},[t,n]);let H=e.style||{};return C.createElement("div",{style:H,ref:f,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":o},c&&C.createElement("i",{className:"vjs-pan-mode "+Ue,"data-mode":Rt,title:"Pan Mode",onClick:()=>s()},C.createElement("svg",{fill:"none",viewBox:vn,stroke:"currentColor"},C.createElement("path",{d:_n}))),i&&C.createElement("i",{className:"vjs-select-mode","data-mode":St,title:"Select Mode",onClick:()=>u()},C.createElement("svg",{fill:"currentColor",viewBox:bn,stroke:"currentColor"},C.createElement("path",{d:hn}))),Y.map(P=>C.createElement("i",{className:P.class,title:P.title,onClick:b=>P.handler(b,P.id)})),T&&C.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Z()},C.createElement("svg",{viewBox:An,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:Nn}))),V&&C.createElement(C.Fragment,null,C.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>ie()},C.createElement("svg",{viewBox:ht,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:Vn}))),C.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>se()},C.createElement("svg",{viewBox:ht,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:Mn})))),h&&C.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>p()}),h&&C.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>O()}),C.createElement("i",{className:Gn,title:r,onClick:()=>x()},C.createElement("svg",{viewBox:Bn,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:In}))),B&&C.createElement("i",{className:"vjs-clear-dataset",title:v,onClick:()=>y()},C.createElement("svg",{viewBox:jn,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:Un}))),X.map(P=>C.createElement("i",{className:P.class,title:P.title,onClick:b=>P.handler(b,P.id)})))}import J,{useEffect as Hn,useRef as Dt,useState as $}from"react";import{SvgExportUI as zn,ImageExportUI as _t,Surface as Wn,CLASS_CONTROLS as Jn,CLASS_EXPORT_CONTROLS as $n}from"@visuallyjs/browser-ui";function fd(e){let r=Dt(!1),t=Dt(null),n=M(),o=ee(),[l,i]=$(!0),[a,c]=$("Export :"),[m,f]=$(null),[_,d]=$(null),[v,R]=$(null),[E,T]=$(!0),[A,V]=$(!0),[G,h]=$(!0);function g(k){t.current=k,e.label&&c(a),e.showLabel!=null&&i(e.showLabel),e.margins&&f(e.margins);let X=e.svgOptions||{};d(X);let F=e.imageOptions||{};R(F),e.allowJpgExport!=null&&h(e.allowJpgExport),e.allowPngExport!=null&&V(e.allowPngExport),e.allowSvgExport!=null&&T(e.allowSvgExport)}function B(){new zn(t.current).export(_)}function L(){new _t(t.current).export(v)}function Y(){new _t(t.current).export(Object.assign(v||{},{type:"image/jpeg"}))}return Hn(()=>{r.current===!1&&(n!=null?(r.current=!0,g(n)):o!=null&&o.$ui instanceof Wn&&(r.current=!0,g(o.$ui)))},[n,o]),J.createElement("div",{className:`${Jn} ${$n}`},l&&J.createElement("span",null,a),E&&J.createElement("i",null,J.createElement("a",{href:"#",id:"exportSvg",onClick:()=>B()},"SVG")),A&&J.createElement("i",null,J.createElement("a",{href:"#",id:"exportPng",onClick:()=>L()},"PNG")),G&&J.createElement("i",null,J.createElement("a",{href:"#",id:"exportJpg",onClick:()=>Y()},"JPG")))}import Yn,{forwardRef as Xn,useContext as Zn,useEffect as qn,useRef as je}from"react";import{log as vt,ShapePalette as Kn}from"@visuallyjs/browser-ui";var bd=Xn((e,r)=>{let t=je(!1),n=je(null),o=Zn(D),l=je(null),i=e.className||"";function a(c){c.getShapeLibrary()!=null?l.current=new Kn(c,{container:n.current,dataGenerator:e.dataGenerator,dragSize:e.dragSize,iconSize:e.iconSize,fill:e.fill,outline:e.outline,showAllMessage:e.showAllMessage,selectAfterDrop:e.selectAfterDrop,paletteStrokeWidth:e.paletteStrokeWidth,initialSet:e.initialSet,mode:e.mode,allowClickToAdd:e.allowClickToAdd,onVertexAdded:e.onVertexAdded,showLabels:e.showLabels,inspector:e.inspector!==!1,preparedShapes:e.preparedShapes}):vt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return qn(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>a(c)):e.surface!=null?a(e.surface):vt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Yn.createElement("div",{ref:n,className:i})});import Qn,{useEffect as eo,useRef as to}from"react";import{CLASS_SHAPE as ro,convertToMultilineText as no,DEFAULT_LABEL_FILL_RATIO as oo}from"@visuallyjs/browser-ui";var ao=120,lo=90;function Vd(e){let r=to(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function l(){return e.ctx.obj.data.width||ao}function i(){return e.ctx.obj.data.height||lo}function a(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function c(){return e.labelProperty||"label"}return eo(()=>{let m=e.ctx.obj.data,f=e.ctx.ui.getShapeLibrary(),_=f.renderCompiledShape(m);if(r.current.replaceChildren(_),e.showLabels){let d=f.renderShapeLabel(m,c(),e.labelStrokeWidth,null,a(),a(),e.font);r.current.appendChild(d),e.multilineLabels!=!1&&no(d,m[c()]||"",l()*(e.labelFillRatio||oo))}}),Qn.createElement("svg",{className:ro,ref:r,strokeWidth:t(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+l()+" "+i()})}import io,{forwardRef as so,useContext as co,useEffect as uo,useRef as Ge}from"react";import{log as po,Palette as mo,defaultDataGenerator as fo}from"@visuallyjs/browser-ui";var Xd=so((e,r)=>{let t=Ge(!1),n=Ge(null),o=co(D),l=Ge(null),i=e.className||"";function a(c){let m={selector:e.selector,source:n.current,dataGenerator:f=>e.dataGenerator?e.dataGenerator(f):fo(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};l.current=new mo(c,m)}return uo(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>a(c)):e.surface!=null?a(e.surface):po("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),io.createElement("div",{className:i,ref:n},e.children)});import Se,{useEffect as Eo,useState as Co,useRef as Tt}from"react";import{CLASS_COLOR_PICKER as go,CLASS_COLOR_PICKER_SWATCH as xo,CLASS_COLOR_PICKER_SWATCHES as Oo,EVENT_CONTEXT_UPDATE as Nt,EVENT_CHANGE as Le,INSPECTOR_CONTEXT_RECENT_COLORS as ye}from"@visuallyjs/browser-ui";function ep(e){let r=e.maxColors||10,t=Tt(null),n=Tt(!1),o=Ee(),[l,i]=Co(o.ensureContext(ye,()=>[]));function a(d){let v=o.ensureContext(ye,()=>[]);if(d=d.toUpperCase(),!(v.find(E=>E.toUpperCase()===d)!=null)){let E=v.slice();E.unshift(d),E.length>r&&(E.length=r),o.updateContext(ye,E)}}function c(){let d=t.current.value;o.setValue(e.propertyName,d,null),a(d)}function m(d){o.setValue(e.propertyName,d,null),t.current.value=d}let f=d=>{d.key===ye&&i(d.value.slice())};function _(){let d=o.getValue(e.propertyName);d!=null&&t.current&&a(d)}return Eo(()=>(o.bind(Nt,f),o.bind(Le,_),n.current||(n.current=!0,t.current.addEventListener(Le,c)),setTimeout(_),()=>{o.unbind(Nt,f),o.unbind(Le,_)})),Se.createElement("div",{className:go},Se.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),Se.createElement("div",{className:Oo},l.map(d=>Se.createElement("div",{key:d,title:d,className:xo,style:{backgroundColor:d},"data-color":d,onClick:()=>m(d)}))))}import Po,{forwardRef as Ro,useContext as So,useEffect as yo,useRef as ke}from"react";import{log as ho,DiagramPalette as bo}from"@visuallyjs/browser-ui";var pp=Ro((e,r)=>{let t=ke(!1),n=ke(null),o=So(I),l=ke(null),i=e.className||"";function a(m){l.current=new bo(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})}yo(()=>{t.current||(t.current=!0,o!=null?o.listen(m=>a(m)):e.diagram!=null?a(e.diagram):ho("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let c=e.style||{};return Po.createElement("div",{ref:n,className:i,style:c})});import Do,{useContext as At,useEffect as pe,useRef as he}from"react";import{ColumnChart as _o,BarChart as vo,CategoryValueChart as To,LineChart as No,AreaChart as Ao,PieChart as wo,ScatterChart as Vo,BubbleChart as Mo,GaugeChart as Io,SankeyChart as Bo}from"@visuallyjs/browser-ui";function j(e){let r=he(null),t=he(!1),n=he(!1),o=he(null),l=e.style||{},i=At(D),a=At(I);return pe(()=>{if(!t.current)if(t.current=!0,i!=null)i.listen(c=>{let m=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,m),n.current=!0});else if(a!=null)a.listen(c=>{let m=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,m),n.current=!0});else{let c=Object.assign({dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,c),e.data?o.current.load({data:e.data},()=>{n.current=!0}):e.url?o.current.load({url:e.url},()=>{n.current=!0}):n.current=!0}}),e.reactive!==!1&&(pe(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),pe(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),pe(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),pe(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),Do.createElement("div",{ref:r,style:l,className:`${e.className||""}`})}function Vp(e){let r=Object.assign({createChart:(t,n)=>new _o(t,n)},e);return j(r)}function Mp(e){let r=Object.assign({createChart:(t,n)=>new vo(t,n)},e);return j(r)}function Ip(e){let r=Object.assign({createChart:(t,n)=>new To(t,n)},e);return j(r)}function Bp(e){let r=Object.assign({createChart:(t,n)=>new No(t,n)},e);return j(r)}function Up(e){let r=Object.assign({createChart:(t,n)=>new Ao(t,n)},e);return j(r)}function jp(e){let r=Object.assign({createChart:(t,n)=>new wo(t,n)},e);return j(r)}function Gp(e){let r=Object.assign({createChart:(t,n)=>new Vo(t,n)},e);return j(r)}function Lp(e){let r=Object.assign({createChart:(t,n)=>new Mo(t,n)},e);return j(r)}function kp(e){let r=Object.assign({createChart:(t,n)=>new Io(t,n)},e);return j(r)}function Fp(e){let r=Object.assign({createChart:(t,n)=>new Bo(t,n)},e);return e.interactive!=null&&(r.options.interactive=e.interactive),e.pivot!=null&&(r.options.pivot=e.pivot),e.csvData&&(r.options.csvData=e.csvData),e.jsonData&&(r.options.jsonData=e.jsonData),j(r)}import{log as Uo}from"@visuallyjs/browser-ui";import jo,{useContext as Go,useEffect as Lo,useRef as wt}from"react";function Vt(e){let r=wt(!1),t=wt(null),n=Go(D),o=e.position||{x:0,y:0};function l(i){e.placement==="fixed"?i.fixElement(t.current,o,e.constraints):i.floatElement(t.current,o)}return Lo(()=>{r.current||(r.current=!0,n!=null?n.listen(i=>l(i)):Uo("Decorator cannot mount: no SurfaceContext from a provider found"))}),jo.createElement("div",{ref:t},e.children)}import{log as ko,BackgroundPlugin as Fo,GeneratedGridBackground as Ho,TiledBackground as zo,SimpleBackground as Wo}from"@visuallyjs/browser-ui";import Mt,{useEffect as Jo,useRef as $o}from"react";function Fe(e){let r=$o(!1),t=M();return Jo(()=>{if(t!=null&&!r.current){r.current=!0;try{t.addPlugin({type:Fo.type,options:e})}catch(n){ko(`WARN: BackgroundComponent could not mount background ${n}`)}}},[t]),Mt.createElement(Mt.Fragment,null)}function nm(e){return Fe(Object.assign({type:Ho.type},e))}function om(e){return Fe(Object.assign({type:Wo.type},e))}function am(e){return Fe(Object.assign({type:zo.type},e))}import{useEffect as Yo}from"react";import{EVENT_DATA_UPDATED as It,EVENT_GRAPH_CLEARED as Bt}from"@visuallyjs/browser-ui";function pm(e){let r=Ke();Yo(()=>{if(r!=null){let t=()=>e(r);return r.bind(It,t),r.bind(Bt,t),t(),()=>{r.unbind(It,t),r.unbind(Bt,t)}}},[r])}import{useState as Ut,useEffect as jt}from"react";import{EVENT_ZOOM as Gt}from"@visuallyjs/browser-ui";function Pm(e){let r=M(),t=Xe(),[n,o]=Ut(e),[l,i]=Ut(()=>(n==null?void 0:n.getZoom())||1);return jt(()=>{if(n!=null){let a=c=>{i(c.zoom)};return n.bind(Gt,a),i(n.getZoom()),()=>{n.unbind(Gt,a)}}},[n]),jt(()=>{r!=null&&o(r),t!=null&&o(t)},[r,t]),l}export{Fn as ATTRIBUTE_CAN_REDO,kn as ATTRIBUTE_CAN_UNDO,Up as AreaChartComponent,Fe as BackgroundComponent,Mp as BarChartComponent,q as BrowserUIReactModel,Lp as BubbleChartComponent,De as CLASS_REACT_GROUP,be as CLASS_REACT_NODE,me as CLASS_REACT_OVERLAY,Ue as CLASS_SELECTED_MODE,ep as ColorPickerComponent,Vp as ColumnChartComponent,Zu as ControlsComponent,lo as DEFAULT_SHAPE_HEIGHT,ao as DEFAULT_SHAPE_WIDTH,Vt as DecoratorComponent,Ql as DiagramComponent,I as DiagramContext,pp as DiagramPaletteComponent,Kl as DiagramProvider,yl as EdgeTypePickerComponent,fd as ExportControlsComponent,kp as GaugeChartComponent,nm as GridBackgroundComponent,om as ImageBackgroundComponent,Gc as InspectorComponent,fe as InspectorContext,_e as JSXWrapper,Bp as LineChartComponent,hc as MiniviewComponent,Xd as PaletteComponent,Ec as PaperComponent,z as PaperContext,Il as PaperProvider,jp as PieChartComponent,Fp as SankeyChartComponent,Gp as ScatterChartComponent,Vd as ShapeComponent,bd as ShapePaletteComponent,hs as SurfaceComponent,D as SurfaceContext,zr as SurfacePopup,ll as SurfaceProvider,am as TiledImageBackgroundComponent,te as VisuallyJsContext,Ci as VisuallyJsProvider,Ip as XYChartComponent,qe as createDiagramRef,Ye as createInspectorRef,Te as createPaperRef,K as createRefHandler,ue as createSurfaceRef,Ko as getSurfaceComponent,$e as newInstance,We as registerSurface,ee as useDiagram,Ee as useInspector,Xe as usePaper,M as useSurface,Ke as useVisuallyJsModel,pm as useVisuallyJsUpdate,Pm as useZoom};