@visuallyjs/browser-ui-react 1.2.1 → 1.2.2

package/background-component.d.ts

@@ -1,4 +1,4 @@
-import { type BackgroundOptions, type GeneratedGridBackgroundOptions, type SimpleBackgroundOptions, type TiledBackgroundOptions } from "@visuallyjs/browser-ui";
+import { type BackgroundOptions, Size, TilingStrategy, Grid, GridType } from "@visuallyjs/browser-ui";
 /**
  * Props for the background component. `type` defines the type of background to render, and each background type has its own set of options.
  * @group Props
@@ -14,7 +14,59 @@ export declare function BackgroundComponent(props: BackgroundComponentProps): JS
  * Props for the grid background component.
  * @group Props
  */
-export interface GridBackgroundComponentProps extends Omit<GeneratedGridBackgroundOptions, "type"> {
+export interface GridBackgroundComponentProps {
+    /**
+     * The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
+     */
+    grid?: Grid;
+    /**
+     * Whether or not to show a thick border around the entire background. Defaults to false.
+     */
+    showBorder?: boolean;
+    /**
+     * The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
+     */
+    minWidth?: number;
+    /**
+     * The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
+     */
+    minHeight?: number;
+    /**
+     * Defaults to false. If true, the grid will also draw tick marks between the grid lines.
+     */
+    showTickMarks?: boolean;
+    /**
+     * Number of tick marks to draw per cell. Defaults to 2.
+     */
+    tickMarksPerCell?: number;
+    /**
+     * The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2).  maxWidth takes precedence over minWidth.
+     */
+    maxWidth?: number;
+    /**
+     * The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2).  maxHeight takes precedence over minHeight.
+     */
+    maxHeight?: number;
+    /**
+     * Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
+     */
+    autoShrink?: boolean;
+    /**
+     * Type of grid - lines or dots. Defaults to lines.
+     */
+    gridType?: GridType;
+    /**
+     * The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
+     */
+    dotRadius?: number;
+    /**
+     * The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
+     */
+    tickDotRadius?: number;
+    /**
+     * Whether or not the background is initially visible. Defaults to true.
+     */
+    visible?: boolean;
 }
 /**
  * Configures a grid background for the surface it attaches to. Using this component is analogous to configuring a `BackgroundPlugin` of type "grid" in the surface's render options.
@@ -25,7 +77,11 @@ export declare function GridBackgroundComponent(props: GridBackgroundComponentPr
  * Props for the image background component.
  * @group Props
  */
-export interface ImageBackgroundComponentProps extends Omit<SimpleBackgroundOptions, "type"> {
+export interface ImageBackgroundComponentProps {
+    /**
+     * The URL of the image to load
+     */
+    url: string;
 }
 /**
  * Configures an image background for the surface it attaches to. Using this component is analogous to configuring a `BackgroundPlugin` of type "simple" in the surface's render options.
@@ -36,7 +92,55 @@ export declare function ImageBackgroundComponent(props: ImageBackgroundComponent
  * Props for the tiled image background component
  * @group Props
  */
-export interface TiledImageBackgroundComponentProps extends Omit<TiledBackgroundOptions, "type"> {
+export interface TiledImageBackgroundComponentProps {
+    /**
+     * URL for the background. You can supply this, or you can supply a `urlGenerator` function instead. If you supply `url` and no `urlGenerator`, the url you supply is treated as a template for the url for any given tile, and is expected to contain `{z}`, `{x}` and `{y}` placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y.  For instance:
+     *
+     * http://foo.com/{z}/{x}/{y}
+     * https://bar.com?zoom={z}&x={x}&y={y}
+     *
+     * etc
+     */
+    url?: string;
+    /**
+     * For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
+     * an explanation of the default syntax for urls when using a tiled background.
+     * @param z zoom level
+     * @param x x coordinate of tile
+     * @param y y coordinate of tile
+     */
+    urlGenerator?: (z: number, x: number, y: number) => string;
+    /**
+     * Provides the width and height of tiles. Every tile is assumed to have these dimensions,
+     * even if the tile has whitespace in it. Required.
+     */
+    tileSize: Size;
+    /**
+     * Required. Indicates the width of the full image.
+     */
+    width: number;
+    /**
+     * Required. Indicates the height of the full image.
+     */
+    height: number;
+    /**
+     * Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
+     * increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
+     * meaning two times as many tiles in each direction.
+     */
+    maxZoom: number;
+    /**
+     * Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
+     */
+    tiling?: TilingStrategy;
+    /**
+     * How long to wait after a pan before reloading tiles.
+     */
+    panDebounceTimeout?: number;
+    /**
+     * How long to wait after a zoom before reloading tiles.
+     */
+    zoomDebounceTimeout?: number;
 }
 /**
  * Configures a tiled image background for the surface it attaches to. Using this component is analogous to configuring a `BackgroundPlugin` of type "tiled" in the surface's render options.

package/definitions.d.ts

@@ -1,4 +1,4 @@
-import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape, DataSource, Paper, PaperOptions, VisuallyJsSelection } from "@visuallyjs/browser-ui";
+import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape, DataSource, Paper, PaperOptions, VisuallyJsSelection, BrowserUI, Vertex } from "@visuallyjs/browser-ui";
 import { BrowserUIReactModel } from "./browser-ui-react";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { JsxWrapperProps } from "./jsx-wrapper";
@@ -432,3 +432,54 @@ export declare const CLASS_REACT_GROUP = "vjs-react-group";
  * @group CSS Classes
  */
 export declare const CLASS_REACT_OVERLAY = "vjs-react-overlay";
+/**
+ * Placeholder for a vertex. Contains the model information and the DOM
+ * element to write to, as well as the hydrated state of the vertex.
+ * @internal
+ */
+export interface VertexRepresentation<B extends BrowserUI> {
+    data: Record<string, any>;
+    def: any;
+    payload: VertexRepresentationPayload<B>;
+    domElement: BrowserElement;
+    key: string;
+    obj: Vertex;
+    hydrated: boolean;
+}
+/**
+ * @internal
+ */
+export interface VertexRepresentationPayload<B extends BrowserUI> {
+    data: Record<string, any>;
+    model: DataSource;
+    ui: BrowserUI;
+    componentId: string;
+    obj: Vertex;
+    props: any;
+    element: Element;
+    eventInfo: any;
+}
+/**
+ * @internal
+ */
+export interface OverlayRepresentation<B extends BrowserUI> {
+    data: Record<string, any>;
+    def: any;
+    payload: OverlayRepresentationPayload<B>;
+    domElement: BrowserElement;
+    key: string;
+    obj: Edge;
+    hydrated: boolean;
+}
+/**
+ * @internal
+ */
+export interface OverlayRepresentationPayload<B extends BrowserUI> {
+    data: Record<string, any>;
+    model: BrowserUIReactModel;
+    ui: B;
+    componentId: string;
+    obj: Edge;
+    props: any;
+    element: Element;
+}

package/package.json

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

package/paper-component.d.ts

@@ -1,8 +1,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 automatically adjusts the zoom level and the pan of the canvas so that it fits into the component's parent.
+ * Provides a static canvas on which nodes, edges and groups can be drawn, with support for layouts and various plugins. 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/utils.d.ts

@@ -1,57 +1,6 @@
 import { MutableRefObject } from "react";
-import { BrowserElement, Surface, Vertex, Edge, BrowserUIModel, BrowserUI, DataSource } from "@visuallyjs/browser-ui";
-import { BrowserUIReactModel } from "./browser-ui-react";
-/**
- * Placeholder for a vertex. Contains the model information and the DOM
- * element to write to, as well as the hydrated state of the vertex.
- * @internal
- */
-export interface VertexRepresentation<B extends BrowserUI> {
-    data: Record<string, any>;
-    def: any;
-    payload: VertexRepresentationPayload<B>;
-    domElement: BrowserElement;
-    key: string;
-    obj: Vertex;
-    hydrated: boolean;
-}
-/**
- * @internal
- */
-export interface VertexRepresentationPayload<B extends BrowserUI> {
-    data: Record<string, any>;
-    model: DataSource;
-    ui: BrowserUI;
-    componentId: string;
-    obj: Vertex;
-    props: any;
-    element: Element;
-    eventInfo: any;
-}
-/**
- * @internal
- */
-export interface OverlayRepresentation<B extends BrowserUI> {
-    data: Record<string, any>;
-    def: any;
-    payload: OverlayRepresentationPayload<B>;
-    domElement: BrowserElement;
-    key: string;
-    obj: Edge;
-    hydrated: boolean;
-}
-/**
- * @internal
- */
-export interface OverlayRepresentationPayload<B extends BrowserUI> {
-    data: Record<string, any>;
-    model: BrowserUIReactModel;
-    ui: B;
-    componentId: string;
-    obj: Edge;
-    props: any;
-    element: Element;
-}
+import { Surface, BrowserUIModel, BrowserUI } from "@visuallyjs/browser-ui";
+import { OverlayRepresentation, VertexRepresentation } from "./definitions";
 /**
  * @internal
  * @param ns

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

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