@visuallyjs/browser-ui-react 1.2.0 → 1.2.2

package/SurfacePopup.d.ts

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

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

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

package/inspector-component.d.ts

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

package/package.json

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

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

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