@visuallyjs/browser-ui-react 1.1.3 → 1.2.0

package/background-component.d.ts

@@ -5,6 +5,10 @@ import { type BackgroundOptions, type GeneratedGridBackgroundOptions, type Simpl
  */
 export interface BackgroundComponentProps extends BackgroundOptions {
 }
+/**
+ * Configures a background for the surface it attaches to. Using this component is analogous to configuring a `BackgroundPlugin` in the surface's render options.
+ * @group Components
+ */
 export declare function BackgroundComponent(props: BackgroundComponentProps): JSX.Element;
 /**
  * Props for the grid background component.
@@ -12,6 +16,10 @@ export declare function BackgroundComponent(props: BackgroundComponentProps): JS
  */
 export interface GridBackgroundComponentProps extends Omit<GeneratedGridBackgroundOptions, "type"> {
 }
+/**
+ * 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.
+ * @group Components
+ */
 export declare function GridBackgroundComponent(props: GridBackgroundComponentProps): JSX.Element;
 /**
  * Props for the image background component.
@@ -19,6 +27,10 @@ export declare function GridBackgroundComponent(props: GridBackgroundComponentPr
  */
 export interface ImageBackgroundComponentProps extends Omit<SimpleBackgroundOptions, "type"> {
 }
+/**
+ * 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.
+ * @group Components
+ */
 export declare function ImageBackgroundComponent(props: ImageBackgroundComponentProps): JSX.Element;
 /**
  * Props for the tiled image background component
@@ -26,4 +38,8 @@ export declare function ImageBackgroundComponent(props: ImageBackgroundComponent
  */
 export interface TiledImageBackgroundComponentProps extends Omit<TiledBackgroundOptions, "type"> {
 }
+/**
+ * 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.
+ * @group Components
+ */
 export declare function TiledImageBackgroundComponent(props: TiledImageBackgroundComponentProps): JSX.Element;

package/definitions.d.ts

@@ -1,13 +1,20 @@
-import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape } 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 } from "@visuallyjs/browser-ui";
 import { BrowserUIReactModel } from "./browser-ui-react";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { JsxWrapperProps } from "./jsx-wrapper";
+import { SelectionGenerator } from "../../ts";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only
  * options removed.
  */
 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.
+ */
+export interface ReactPaperRenderOptions extends Omit<PaperOptions, "directRender" | "enhancedView" | "view" | "templates"> {
+}
 /**
  * Definition of a node - its jsx, and behaviour.
  */
@@ -52,7 +59,7 @@ export interface ReactEdgeMapping extends Omit<EdgeMapping, "overlays"> {
     overlays: Array<OverlaySpec | ReactOverlaySpec>;
 }
 /**
- * Options for the view in the react surface component. Maps node/group/port/edge types to JSX and behaviour.
+ * Options for the view in the react SurfaceComponent. Maps node/group/port/edge types to JSX and behaviour.
  */
 export interface ReactSurfaceViewOptions {
     /**
@@ -72,6 +79,11 @@ export interface ReactSurfaceViewOptions {
      */
     edges?: Record<string, ReactEdgeMapping>;
 }
+/**
+ * Options for the view in the react PaperComponent. Maps node/group/port/edge types to JSX and behaviour.
+ */
+export interface ReactPaperViewOptions extends ReactSurfaceViewOptions {
+}
 /**
  * Props for the {@link SurfaceComponent}.
  * @group Props
@@ -131,6 +143,10 @@ export interface SurfaceComponentProps {
      * Optional style object to apply to the container element.
      */
     style?: Record<string, string>;
+    /**
+     * Optional selection (or selection generator) to render, rather than the entire model.
+     */
+    selection?: VisuallyJsSelection | SelectionGenerator;
 }
 /**
  * Reference to a SurfaceComponent. Offers methods to get the underlying surface and VisuallyJs instance.
@@ -148,6 +164,80 @@ export interface SurfaceComponentRef {
      */
     getModel: () => BrowserUIReactModel;
 }
+/**
+ * Props for the {@link PaperComponent}.
+ * @group Props
+ */
+export interface PaperComponentProps {
+    /**
+     * Render options such as layout, drag options etc
+     */
+    renderOptions?: ReactPaperRenderOptions;
+    /**
+     * Mappings of vertex types to components/jsx and edge types.
+     */
+    viewOptions?: ReactPaperViewOptions;
+    /**
+     * Any props to pass to children.
+     *
+     */
+    childProps?: any;
+    /**
+     * You do not pass this prop yourself; React constructs this prop from any elements that are children of the surface
+     * component element in the JSX.
+     * @internal
+     */
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+    /**
+     * Options for the underlying instance.
+     *
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional ID to assign to the Paper that is created.
+     *
+     */
+    paperId?: string;
+    /**
+     * Optional initial data
+     *
+     */
+    data?: any;
+    /**
+     * Optional URL to load initial data from.
+     *
+     */
+    url?: string;
+    /**
+     * Optional instance to render. You mostly wont need to do this; the SurfaceComponent or PaperComponent will create an instance.
+     */
+    model?: BrowserUIReactModel;
+    /**
+     * Optional class name to append to the root element's class list.
+     */
+    className?: string;
+    /**
+     * Optional style object to apply to the container element.
+     */
+    style?: Record<string, string>;
+    dataSource?: DataSource;
+}
+/**
+ * Reference to a PaperComponent. Offers methods to get the underlying surface and VisuallyJs instance.
+ * @group Handles
+ */
+export interface PaperComponentRef {
+    /**
+     * Gets the Paper canvas component.
+     *
+     */
+    getPaper: () => Paper;
+    /**
+     * Gets the underlying model instance, on which you can manage the model.
+     *
+     */
+    getModel: () => BrowserUIReactModel;
+}
 /**
  * Props for the {@link ShapePaletteComponent}
  * @group Props
@@ -325,7 +415,7 @@ export interface PaletteComponentRef {
 export interface RefHandle<T> {
     set: (v: T) => any;
     listen: (l: (v: T) => any) => void;
-    _ref: () => MutableRefObject<T>;
+    ref: () => MutableRefObject<T>;
 }
 /**
  * CSS class set on the root element created by the JSX mapped to some node type when it is rendered, by a {@link SurfaceComponent} or {@link PaperComponent}.

package/diagram-component.d.ts

@@ -35,10 +35,10 @@ export declare function DiagramProvider(props: {
     children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
 }): JSX.Element;
 /**
- * Hook to expose the current Diagram. This hook is asynchronous and returns a Promise.
+ * Hook to expose the current Diagram.
  * @group Hooks
  */
-export declare function useDiagram(): Promise<Diagram>;
+export declare function useDiagram(): Diagram;
 /**
  * Handle for a DiagramComponent.
  * @group Handles

package/export-controls-component.d.ts

@@ -5,8 +5,7 @@ import { SvgExportUIOptions, ImageExportUIOptions, PointXY } from "@visuallyjs/b
  */
 export interface ExportControlsComponentProps {
     /**
-     * The ID of surface to attach to. Optional. The component is context aware and will try to resolve the Surface/Paper
-     * to attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+     * The ID of surface to attach to. Optional, and likely to be deprecated in a future release. The component is context aware and will try to resolve the Surface/Paper to attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
      */
     surfaceId?: string;
     /**
@@ -43,8 +42,7 @@ export interface ExportControlsComponentProps {
     allowJpgExport?: boolean;
 }
 /**
- * Provides export svg/png/jpg buttons. This component is context aware and by default will locate the surface/paper to
- * attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+ * Provides export svg/png/jpg buttons. This component is context aware and by default will locate the surface/paper to attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
  * @group Components
  */
 export declare function ExportControlsComponent(props: ExportControlsComponentProps): JSX.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 './paper-component';
 export * from './miniview-component';
 export * from './inspector-component';
 export * from './controls-component';
@@ -21,10 +22,12 @@ export * from './palette-component';
 export * from './color-picker-component';
 export * from './visuallyjs-context';
 export * from './surface-context';
+export * from './paper-context';
 export * from './inspector-context';
 export * from './diagram-component';
 export * from './diagram-palette-component';
 export * from './chart-component';
 export * from './decorator-component';
 export * from './background-component';
+export * from './use-visuallyjs-update';
 export * from './use-zoom';

package/jsx-wrapper.d.ts

@@ -7,8 +7,14 @@ import { Base, BrowserUI, BrowserUIModel, ObjectData } from "@visuallyjs/browser
 export interface JsxWrapperProps<T extends Base> {
     /**
      * The object to be rendered - a Node, Group or Edge.
+     * @deprecated Use `vertex` instead from 1.2.0 onwards.
      */
     obj: T;
+    /**
+     * The object to be rendered - a Node, Group or Edge. Use this in preference to `obj` from 1.2.0 onwards
+     * @since 1.2.0
+     */
+    vertex: T;
     /**
      * The UI that is rendering this object.
      */

package/miniview-component.d.ts

@@ -38,14 +38,21 @@ export interface MiniviewComponentProps {
      * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
      */
     clickToCenter?: boolean;
+    /**
+     * Defaults to true - the miniview will display a lasso as the user is using the lasso in the canvas
+     */
+    showLasso?: boolean;
+    /**
+     * Defaults to true - the miniview will add a CSS class to elements whose model object is in the current selection.
+     */
+    trackSelection?: boolean;
     /**
      * Optional class name to append to the root element's class list.
      */
     className?: string;
 }
 /**
- * Provides a miniview attached to some surface. This component is context aware and will locate the surface to attach
- * to when declared either inside a {@link SurfaceProvider} or as a child element of a {@link SurfaceComponent}.
+ * Provides a miniview attached to some surface. This component is context aware and will locate the surface to attach to when declared either inside a {@link SurfaceProvider} or as a child element of a {@link SurfaceComponent}.
  * @group Components
  */
 export declare const MiniviewComponent: React.ForwardRefExoticComponent<MiniviewComponentProps & React.RefAttributes<MiniviewComponentRef>>;

package/package.json

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

package/paper-component.d.ts

@@ -0,0 +1,13 @@
+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.
+ *
+ * ```jsx
+ * <PaperComponent renderOptions={...} modelOptions={...} viewOptions={...}/>
+ * ```
+ *
+ * @group Components
+ */
+export declare const PaperComponent: React.ForwardRefExoticComponent<PaperComponentProps & React.RefAttributes<PaperComponentRef>>;

package/paper-context.d.ts

@@ -0,0 +1,42 @@
+import { Context, MutableRefObject, ReactNode, ReactElement } from "react";
+import { Paper } from "@visuallyjs/browser-ui";
+import { RefHandle } from "./definitions";
+/**
+ * @internal
+ */
+export declare const PaperContext: Context<PaperRef>;
+/**
+ * Provider for a Paper. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Paper and where you want put other components that will need to reference it. Whenever a `PaperComponent` is declared as a descendant of this provider, the provider's underlying surface is set and this is propagated to all the other components using this context. To use this you just declare a PaperProvider element and put some children inside of it:
+ *
+ * ```jsx
+ * <PaperProvider>
+ *     <PaperComponent renderOptions={...}/>
+ *     <Palette/>
+ *     <div>
+ *         <MiniviewComponent/>
+ *     </div>
+ * </PaperProvider>
+ * ```
+ *
+ * @group Providers
+ */
+export declare function PaperProvider(props: {
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+}): JSX.Element;
+/**
+ * Handle for a reference to a mutable ref object which holds a surface. See implementation below.
+ * @internal
+ */
+export interface PaperRef extends RefHandle<Paper> {
+}
+/**
+ * Implementation of the PaperRef handler. The `set` method sets the ref object's value and then propagates the surface to all registered listeners. The `listen` method either queues a listener, if the handle is not yet ready, or calls back the listener immediately, if the handle is already populated with a surface. The `_ref` method provides access to the underlying mutable ref object; the PaperComponent uses this when it is created inside a PaperProvider. None of this code is public facing.
+ * @param ref
+ * @internal
+ */
+export declare function createPaperRef(ref: MutableRefObject<Paper>): PaperRef;
+/**
+ * Hook to expose the current Paper.
+ * @group Hooks
+ */
+export declare function usePaper(): Paper;

package/surface-context.d.ts

@@ -30,25 +30,19 @@ export declare function SurfaceProvider(props: {
 export interface SurfaceRef extends RefHandle<Surface> {
 }
 /**
- * Implementation of the SurfaceRef handler. The `set` method sets the ref object's value and then
- * propagates the surface to all registered listeners. The `listen` method either queues a listener, if the handle is not yet
- * ready, or calls back the listener immediately, if the handle is already populated with a surface. The `_ref` method provides access
- * to the underlying mutable ref object; the SurfaceComponent uses this when it is created inside a SurfaceProvider. None of this
- * code is public facing.
+ * Implementation of the SurfaceRef handler. The `set` method sets the ref object's value and then propagates the surface to all registered listeners. The `listen` method either queues a listener, if the handle is not yet ready, or calls back the listener immediately, if the handle is already populated with a surface. The `_ref` method provides access to the underlying mutable ref object; the SurfaceComponent uses this when it is created inside a SurfaceProvider. None of this code is public facing.
  * @param ref
  * @internal
  */
 export declare function createSurfaceRef(ref: MutableRefObject<Surface>): SurfaceRef;
 /**
- * Generic reference handler create routine. This function creates a `RefHandle` for some given type, which is
- * an object with `set` and `listen` methods that you can use inside a context. Visually Js uses this internally for the
- * Surface but we exposed it for usage in some of our demos.
+ * Generic reference handler create routine. This function creates a `RefHandle` for some given type, which is an object with `set` and `listen` methods that you can use inside a context. VisuallyJs uses this internally.
  * @param ref
  * @internal
  */
 export declare function createRefHandler<T, S = Surface>(ref: MutableRefObject<T | null>): RefHandle<T>;
 /**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * Hook to expose the current Surface.
  * @group Hooks
  */
-export declare function useSurface(): Promise<Surface>;
+export declare function useSurface(): Surface;

package/use-visuallyjs-update.d.ts

@@ -0,0 +1,19 @@
+import { BrowserUIReactModel } from "./browser-ui-react";
+/**
+ * Simple hook that responds to all update events in the model, including when the model is cleared. You pass in a function that takes the model as argument, and that should be invoked when an update/clear event occurs. The function is also invoked when the initial model reference is obtained.
+ *
+ * ```jsx
+ * import { useVisuallyJsUpdate } from "@visuallyjs/browser-ui-react"
+ * import { useState } from "react"
+ *
+ * export default function NodeCount() {
+ *  const [count, setCount] = useState(0)
+ *  useVisuallyJsUpdate((model) => setCount(model.getNodeCount()))
+ *  return <h1>{count}</h1>
+ * }
+ * ```
+ *
+ * @param callback Callback to invoke when an update occurs.
+ * @group Hooks
+ */
+export declare function useVisuallyJsUpdate(callback: (model: BrowserUIReactModel) => any): void;

package/use-zoom.d.ts

@@ -14,7 +14,19 @@ import { BrowserUI } from '@visuallyjs/browser-ui';
  * }
  * ```
  *
- * @param ui The UI instance from JSXWrapperProps.ui
+ * You can also use to in a standalone component, in conjunction with `useSurface`:
+ *
+ * ```jsx
+ * export default function ZoomViewer() {
+ *
+ *  const surface = useSurface()
+ *  const zoom = useZoom(surface)
+ *
+ *  return <h1>{zoom.toFixed(2)}</h1>
+ * }
+ * ```
+ *
+ * @param ui The UI instance to observe.
  * @group Hooks
  * @since 1.0.4
  */

package/utils.d.ts

@@ -0,0 +1,82 @@
+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;
+}
+/**
+ * @internal
+ * @param ns
+ * @param uiRef
+ */
+export declare function _mountOverlayComponent(ns: OverlayRepresentation<Surface>, uiRef: MutableRefObject<BrowserUI>): void;
+/**
+ * @internal
+ * @param ns
+ * @param model
+ * @param uiRef
+ * @param childProps
+ */
+export declare function _generateOverlayComponent(ns: OverlayRepresentation<BrowserUI>, model: BrowserUIModel, uiRef: MutableRefObject<BrowserUI>, childProps?: any): JSX.Element;
+/**
+ * @internal
+ * @param ns
+ * @param model
+ * @param uiRef
+ * @param childProps
+ */
+export declare function _generateComponent(ns: VertexRepresentation<BrowserUI>, model: BrowserUIModel, uiRef: MutableRefObject<BrowserUI>, childProps?: any): JSX.Element;
+/**
+ * @internal
+ * @param ns
+ * @param uiRef
+ */
+export declare function _mountComponent(ns: VertexRepresentation<BrowserUI>, uiRef: MutableRefObject<BrowserUI>): void;

package/visuallyjs-context.d.ts

@@ -6,17 +6,40 @@ import { ModelOptions } from "@visuallyjs/browser-ui";
  * @internal
  */
 export declare const VisuallyJsContext: Context<BrowserUIReactModel>;
+/**
+ * Props for the VisuallyJsProvider.
+ */
+export interface VisuallyJsProviderProps {
+    /**
+     * Options for the model
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * You do not provide this; it's a React internal
+     * @internal
+     */
+    children?: Array<ReactNode> | ReactNode;
+    /**
+     * Optional data to load. Typed `any` because it depends on the dataType.
+     */
+    data?: any;
+    /**
+     * Optional url to load data from.
+     */
+    url?: string;
+    /**
+     * Optional identifier for the data type expected from `data` or what is retrieved from `url`. Defaults to VisuallyJs's default json datatype.
+     */
+    dataType?: string;
+}
 /**
  * Provider for a VisuallyJs model. This component is intended for certain advanced scenarios in which you have a number of UI components that want to share the same model. For instance you may render a model to a pannable and zoomable surface in some part of your UI, and then show a chart in some other part, whose data is the same model that the surface is using.
  *
  * @group Providers
  */
-export declare function VisuallyJsProvider(props: {
-    modelOptions?: ModelOptions;
-    children?: Array<ReactNode> | ReactNode;
-}): JSX.Element;
+export declare function VisuallyJsProvider(props: VisuallyJsProviderProps): JSX.Element;
 /**
- * Provides access to the VisuallyJsModel that is in scope, either as provided by a VisuallyJsContext, or a PaperContext/SurfaceContext. This hook is asynchronous and returns a Promise.
+ * Provides access to the VisuallyJsModel that is in scope, either as provided by a VisuallyJsContext, or a PaperContext/SurfaceContext.
  * @group Hooks
  */
-export declare function useVisuallyJsModel(): Promise<BrowserUIReactModel>;
+export declare function useVisuallyJsModel(): BrowserUIReactModel;

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

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

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

@@ -1 +1 @@
-import{log as Ie}from"@visuallyjs/browser-ui";var Ve=new Map,Z={};function Be(e,r){Ve.set(e,r),Rt(e,r)}function Rt(e,r){(Z[e]||[]).forEach(n=>{try{n(r)}catch(o){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+o)}}),delete Z[e]}function ae(e,r){let t=Ve.get(e);if(t)try{r(t)}catch(n){Ie("WARN: an error was reported invoking a SurfaceComponentRefCallback "+n)}else Z[e]=Z[e]||[],Z[e].push(r)}var xe="vjs-react-node",Oe="vjs-react-group",je="vjs-react-overlay";import ke,{useEffect as ht,useRef as yt}from"react";function Se(e){let r=yt(!1);return ht(()=>{r.current||(r.current=!0,e.cb(e.ns))}),ke.createElement(ke.Fragment,null,e.ns.def.jsx({obj:e.ns.obj,model:e.model,ui:e.ui,data:e.ns.obj.data,props:e.childProps||{}}))}import{BrowserUIModel as bt,log as Dt}from"@visuallyjs/browser-ui";var q=class extends bt{render(r,t){return Dt("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function Ue(e){return e=e||{},new q(e)}import{createContext as _t,default as vt,useRef as Tt,useContext as Nt}from"react";var E=_t(null);function ta(e){let r=Tt(null),t=K(r);return vt.createElement(E.Provider,{value:t},e.children||[])}function K(e){return Q(e)}function Q(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)},Ri:()=>e}}function Ge(){let e=Nt(E);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}import{createContext as At,useContext as wt}from"react";var ie=At(null);function Le(e){return Q(e)}function le(){let e=wt(ie);return e==null?null:e.Ri().current}import Mt,{useRef as Pe,useEffect as It}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Vt,EdgeTypePicker as Bt}from"@visuallyjs/browser-ui";function xa(e){let r=Pe(!1),t=Pe(null),n=Pe(null),o=le(),{propertyName:l}=e,a=()=>o.getFromContext(Vt)||o.$ui.$getEdgePropertyMappings();return It(()=>{r.current||(r.current=!0,n.current=new Bt(o.$ui,t.current,a(),o.getValue(l),(s,c)=>{o.setValue(l,c)}),n.current.render(l,o.qe),o.onChange(()=>{n.current.select(l,o.getValue(l))}))}),Mt.createElement("div",{ref:t})}import jt,{createContext as kt,useContext as Fe}from"react";var se=kt(void 0);function Ta(e){let r=Ue(e.modelOptions||{});return jt.createElement(se.Provider,{value:r},e.children||[])}function Na(){let e=Fe(se);return new Promise((r,t)=>{if(e==null){let n=Fe(E);n!=null?n.listen(o=>r(o.model)):t()}else r(e)})}import V,{forwardRef as Ut,useContext as ze,useEffect as Gt,useImperativeHandle as Lt,useRef as ee,useState as He}from"react";import*as he from"react-dom";import{addClass as We,ELEMENT_DIV as Je,ELEMENT_SVG as Ft,ElementTypes as zt,EVENT_GRAPH_CLEARED as Ht,EVENT_GROUP_REMOVED as Wt,EVENT_GROUP_UPDATED as Jt,EVENT_NODE_REMOVED as $t,EVENT_NODE_UPDATED as Xt,extend as $e,isGroup as Re,renderSurface as Yt,CLASS_DEFAULT_NODE as Zt,CLASS_DEFAULT_GROUP as qt,OVERLAY_TYPE_CUSTOM as Kt,EVENT_EDGE_REMOVED as Qt,EVENT_EDGE_UPDATED as er,uuid as tr,partition as rr,$svgNode as or,ATTRIBUTE_NOT_DRAGGABLE as Xe,TRUE as Ye}from"@visuallyjs/browser-ui";var ci=Ut((e,r)=>{let t=ee(!1),n=ze(se),o=ee(null),l=ee(null),a=ee(null),s,c=ze(E);c==null?(s=ee(null),c=K(s)):s=c.Ri();let[C,g]=He([]),[_,i]=He([]),x=[],T=[];function h(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{k(S)}})}function k(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&(We(d.domElement.firstElementChild,S),d.domElement.firstElementChild.getAttribute(Xe)===Ye&&d.domElement.setAttribute(Xe,Ye)),s.current.$vertexRendered(d.obj,d.domElement,d.def,d.payload.eventInfo),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function N(){g(x.slice())}function U(d){return V.createElement(Se,{ns:d,model:a.current,ui:s.current,childProps:e.childProps,cb:S=>{R(S)}})}function R(d){if(d.hydrated!==!0){let S=Re(d.obj)?Oe:xe;d.domElement.firstElementChild&&We(d.domElement.firstElementChild,S),d.hydrated=!0}else s.current.$revalidateElement(d.domElement)}function A(){i(T.slice())}let w={getSurface:()=>s.current,getModel:()=>a.current};Lt(r,()=>w),Gt(()=>{var d;if(!t.current){t.current=!0,e.model!=null?a.current=e.model:n==null?a.current=new q(e.modelOptions||{}):a.current=n,typeof document!="undefined"&&(l.current=document.createElement("div"),l.current.style.position="fixed",l.current.style.left="10000px",l.current.style.top="10000px",l.current.style.width="100px",l.current.style.height="100px",l.current.style.opacity="0",o.current.appendChild(l.current));let S=(m,p,v,b,P,u,O,G)=>{let[Y,D]=u.component||u.jsx?[u,null]:Re(O)?[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),qt]:[Object.assign(Object.assign({},u),{jsx:ge=>V.createElement(V.Fragment,null,ge.obj.data.label)}),Zt],H=P.containerType===zt.HTML?document.createElement(Je):or(Ft);l.current.appendChild(H),D!=null&&P.$addClassToElement(H,D);let Pt={data:p,model:v,surface:P,componentId:O.getFullId(),obj:O,props:e.childProps,element:H,eventInfo:G};x.push({data:p,def:Y,payload:Pt,domElement:H,key:O.id,obj:O,hydrated:!1}),N()},L=(m,p)=>{p.parentNode&&p.parentNode.removeChild(p)},X={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(m,p,v,b)=>{},render:S,rerender:(m,p,v,b,P,u,O,G,Y)=>{let D=rr(x,H=>H.obj!==O);x=D.left,N(),S(m,p,v,b,P,u,O,G),D.right.length>0&&setTimeout(()=>{L(null,D.right[0].domElement)})},cleanupVertex:L,cleanupPort:(m,p)=>{}},F=((d=e.viewOptions)==null?void 0:d.edges)||{};for(let m in F){let p=F[m];p.overlays!=null&&(p.overlays=p.overlays.map(v=>{if(v.jsx!=null){let b=tr();return{type:Kt,options:{create:u=>{let O=document.createElement(Je);O.className=je;let G={data:u.edge.data,model:a.current,surface:z,componentId:u.edge.getFullId(),obj:u.edge,props:e.childProps,element:O};return T.push({def:{jsx:v.jsx},data:u.edge.data,obj:u.edge,payload:G,domElement:O,key:b,hydrated:!1}),A(),O}}}}else return v}))}let fe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),z=Yt(a.current,o.current,X,fe);c.set(z),e.surfaceId!=null&&Be(e.surfaceId,w);let oe=(m,p)=>{let v=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=x.find(P=>P.key===m);b!=null&&(b.data=v(),N())},ne=m=>{x=x.filter(p=>p.payload.componentId!==m),N()},Ce=(m,p)=>{let v=()=>{let P={};return(p.originalData||p.updates)&&(P=$e(p.originalData,p.updates)),P},b=T.find(P=>P.obj.id===m);b!=null&&(b.data=v(),A())},Ee=m=>{T=T.filter(p=>p.payload.obj.id!==m),A()};a.current.bind(Xt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind(Jt,m=>{oe(m.vertex.getFullId(),m)}),a.current.bind($t,m=>{ne(m.node.id)}),a.current.bind(Wt,m=>{ne(m.group.id)}),a.current.bind(Qt,m=>{Ee(m.edge.id)}),a.current.bind(er,m=>{Ce(m.edge.id,m)}),a.current.bind(Ht,()=>{x=[],N(),T=[],A()}),e.data?a.current.load({data:e.data,onload:()=>setTimeout(()=>z.repaintEverything(),250)}):e.url&&a.current.load({url:e.url,onload:()=>setTimeout(()=>z.repaintEverything(),250)})}});let J=`${e.className||""} vjs-react-surface`,$=e.style||{};return V.createElement("div",{ref:o,className:J,style:$},C.map(d=>he.createPortal(h(d),d.domElement,d.key)),_.map(d=>he.createPortal(U(d),d.domElement,d.key)),V.createElement(E.Provider,{value:c},e.children))});import ce,{createContext as nr,forwardRef as ar,useContext as ye,useEffect as ir,useImperativeHandle as lr,useRef as te}from"react";import{createDiagram as sr}from"@visuallyjs/browser-ui";var y=nr(null);function Ze(e){return Q(e)}function Di(e){let r=te(null),t=Ze(r);return ce.createElement(y.Provider,{value:t},e.children||[])}function _i(){let e=ye(y);return new Promise((r,t)=>{e!=null?e.listen(n=>r(n)):t()})}var vi=ar((e,r)=>{let t=te(null),n=te(!1),o,l,a=ye(y);a==null?(o=te(null),a=Ze(o)):o=a.Ri();let s=ye(E);s==null?(l=te(null),s=K(l)):l=s.Ri();let c={getDiagram:()=>o.current};lr(r,()=>c),ir(()=>{n.current||(n.current=!0,o.current=sr(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}),a.set(o.current),s.set(l.current))});let C=`${e.className||""} vjs-react-diagram`,g=e.style||{};return ce.createElement("div",{ref:t,className:C,style:g},ce.createElement(E.Provider,{value:s},ce.createElement(y.Provider,{value:a},e.children)))});import{MiniviewPlugin as cr,Surface as ur}from"@visuallyjs/browser-ui";import dr,{forwardRef as mr,useContext as qe,useEffect as pr,useImperativeHandle as fr,useRef as Ke}from"react";var ki=mr((e,r)=>{let t=qe(E),n=qe(y),o=Ke(!1),l=Ke(null),a;fr(r,()=>({toggleCollapsed:()=>a==null?void 0:a.toggleCollapsed()}));function s(c){c.addPlugin({type:cr.type,options:{container:l.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter}})}return pr(()=>{o.current||(o.current=!0,t!=null?t.listen(s):n!=null&&n.listen(c=>{c.$ui instanceof ur&&s(c.$ui)}))}),dr.createElement("div",{ref:l,className:`${e.className||""}`})});import{Inspector as Cr,log as Er,Surface as gr}from"@visuallyjs/browser-ui";import W,{forwardRef as xr,useContext as be,useEffect as Qe,useImperativeHandle as Or,useRef as De,useState as _e}from"react";var qi=xr((e,r)=>{let t=be(E),n=be(y),o,l=be(ie);l==null&&(o=De(null),l=Le(o));let[a,s]=_e(null),[c,C]=_e(0),[g,_]=_e(null),i=De(!1),x=De(null),T=e.className||"";Qe(()=>{var R;(R=o==null?void 0:o.current)==null||R.$refresh()},[c]);let h=e.onSelectionCleared||(()=>s(null)),k=(R,A)=>{s(R),e.refresh&&e.refresh(R),C(w=>w+1)};function N(R){o.current=new Cr({container:x.current,ui:R,renderEmptyContainer:h,refresh:k,autoCommit:e.autoCommit,multipleSelections:e.multipleSelections,filter:e.filter,showCloseButton:e.showCloseButton,afterUpdate:()=>e.afterUpdate?e.afterUpdate(R):null}),_(o.current)}let U={getInspector:()=>g};return Or(r,()=>U),Qe(()=>{i.current||(i.current=!0,t!=null?t.listen(N):n!=null?n.listen(R=>{R.$ui instanceof gr&&N(R.$ui)}):Er("WARN: InspectorComponent cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),W.createElement("div",{ref:x,className:T},W.createElement(ie.Provider,{value:l},a!=null&&W.createElement(W.Fragment,null,typeof e.children=="function"?e.children(a,o.current.$ui.model):e.children||[]),a==null&&W.createElement(W.Fragment,null,e.renderEmptyContent&&e.renderEmptyContent())))});var Qi="group:added",el="group:member:added",tl="group:member:removed",rl="group:removed",ol="dataLoadStart",nl="dataAppendStart",al="dataLoadEnd",il="dataAppendEnd",ll="dataUpdated",sl="graphClearStart",cl="graphCleared",ul="graphChanged",dl="group:updated",ml="node:updated",pl="port:updated",fl="edge:updated",Cl="edge:added",El="node:added",gl="edge:removed",xl="node:removed",Ol="port:added",Sl="port:removed",Pl="edge:target",Rl="edge:source",et="select",tt="deselect",rt="selection:cleared",hl="edge:geometry",yl="edge:pathEdited",bl="edge:typeChanged",Dl="node:typeChanged",_l="port:typeChanged",vl="group:typeChanged",Tl="group:move:start",Nl="group:move",Al="group:move:end",wl="internal:group:sizeChanged",Ml="internal:group:sizeChangedRedo",Il="internal:group:sizeChangedUndo",Vl="renderer:added",Bl="node:move:start",jl="node:move",kl="node:move:end",Ul="node:move:abort",Gl="undoredo:update",Ll="undo",Fl="redo",zl="destroy";import f,{useContext as ot,useEffect as Sr,useRef as ue,useState as M}from"react";import{EVENT_UNDOREDO_UPDATE as Pr,FALSE as nt,LASSO_PATH as Rr,LASSO_VIEW_BOX as hr,LassoPlugin as yr,log as br,PAN_PATH as Dr,PAN_VIEW_BOX as _r,Surface as vr,SURFACE_MODE_PAN as at,SURFACE_MODE_SELECT as it,TRUE as lt,ZOOM_TO_FIT_PATH as Tr,ZOOM_TO_FIT_VIEW_BOX as Nr,EVENT_SURFACE_MODE_CHANGED as Ar,ZOOM_IN_OUT_VIEW_BOX as st,ZOOM_IN_PATH as wr,ZOOM_OUT_PATH as Mr,RESET_SELECTION_PATH as Ir,RESET_SELECTION_VIEW_BOX as Vr,CLEAR_PATH as Br,CLEAR_VIEW_BOX as jr,CLASS_CONTROLS_RESET_SELECTION as kr,supportsPathEditing as Ur}from"@visuallyjs/browser-ui";var Gr="can-undo",Lr="can-redo",ve="vjs-selected-mode",ct="vjs-controls-has-selection";function rs(e){let r="Clear selection",[t,n]=M("row"),[o,l]=M(!1),[a,s]=M(!1),c=ot(E),C=ot(y),g=ue(null),_=ue(!1),i=ue(null),[x,T]=M("Clear dataset?"),h=ue(null),[k,N]=M(!0),[U,R]=M(!1),[A,w]=M(!0),[J,$]=M(!0),[d,S]=M([]),[L,X]=M([]);function F(u){i.current=u,e.clearMessage&&T(e.clearMessage),e.onMaybeClear&&(h.current=e.onMaybeClear),e.orientation&&n(e.orientation),e.undoRedo===!1&&w(!1),e.zoomToExtents===!1&&N(!1),e.zoomButtons===!0&&R(!0),e.clear===!1&&$(!1);let O=(e.buttons||[]).filter(D=>D.mode!=null);S(O);let G=(e.buttons||[]).filter(D=>D.mode==null);X(G),u.bind(Ar,D=>{u.removeClass(u.$getSelector(g.current,"[data-mode]"),ve),u.addClass(u.$getSelector(g.current,"[data-mode='"+D+"']"),ve)}),u.model.bind(Pr,D=>{g.current.setAttribute(Gr,D.undoCount>0?lt:nt),g.current.setAttribute(Lr,D.redoCount>0?lt:nt)}),u.model.bind(et,b),u.model.bind(tt,b),u.model.bind(rt,b);let Y=u.getPlugin(yr.type);l(Y!=null),s(Y!=null||O.length>0)}function fe(){i.current.model.clearSelection(),i.current.zoomToFit()}function z(){i.current.zoomIn()}function oe(){i.current.zoomOut()}function ne(){i.current.setMode(at)}function Ce(){i.current.setMode(it)}function Ee(){i.current.model.clearSelection(),Ur(i.current)&&i.current.stopEditingPath()}function m(){h.current!=null?h.current(()=>i.current.model.clear()):window.confirm(x)&&i.current.model.clear()}function p(){i.current.model.undo()}function v(){i.current.model.redo()}let b=()=>{i.current.model.getSelection().isEmpty()?g.current.removeAttribute(ct):g.current.setAttribute(ct,"true")};Sr(()=>{_.current===!1&&(_.current=!0,e.surfaceId!=null?ae(e.surfaceId,u=>F(u.getSurface())):c!=null?c.listen(F):C!=null?C.listen(u=>{u.$ui instanceof vr&&F(u.$ui)}):br("WARN: controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))});let P=e.style||{};return f.createElement("div",{style:P,ref:g,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":t},a&&f.createElement("i",{className:"vjs-pan-mode "+ve,"data-mode":at,title:"Pan Mode",onClick:()=>ne()},f.createElement("svg",{fill:"none",viewBox:_r,stroke:"currentColor"},f.createElement("path",{d:Dr}))),o&&f.createElement("i",{className:"vjs-select-mode","data-mode":it,title:"Select Mode",onClick:()=>Ce()},f.createElement("svg",{fill:"currentColor",viewBox:hr,stroke:"currentColor"},f.createElement("path",{d:Rr}))),d.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})),k&&f.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>fe()},f.createElement("svg",{viewBox:Nr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Tr}))),U&&f.createElement(f.Fragment,null,f.createElement("i",{className:"vjs-zoom-in","data-zoom-in":"true",title:"Zoom In",onClick:()=>z()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:wr}))),f.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>oe()},f.createElement("svg",{viewBox:st,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Mr})))),A&&f.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>p()}),A&&f.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>v()}),f.createElement("i",{className:kr,title:r,onClick:()=>Ee()},f.createElement("svg",{viewBox:Vr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Ir}))),J&&f.createElement("i",{className:"vjs-clear-dataset",title:x,onClick:()=>m()},f.createElement("svg",{viewBox:jr,stroke:"currentColor",fill:"currentColor"},f.createElement("path",{d:Br}))),L.map(u=>f.createElement("i",{className:u.class,title:u.title,onClick:O=>u.handler(O,u.id)})))}import B,{useContext as ut,useEffect as Fr,useRef as dt,useState as j}from"react";import{SvgExportUI as zr,ImageExportUI as mt,Surface as Hr,CLASS_CONTROLS as Wr,CLASS_EXPORT_CONTROLS as Jr,log as $r}from"@visuallyjs/browser-ui";function Cs(e){let r=dt(!1),t=dt(null),n=ut(E),o=ut(y),[l,a]=j(!0),[s,c]=j("Export :"),[C,g]=j(null),[_,i]=j(null),[x,T]=j(null),[h,k]=j(!0),[N,U]=j(!0),[R,A]=j(!0);function w(S){t.current=S,e.label&&c(s),e.showLabel!=null&&a(e.showLabel),e.margins&&g(e.margins);let L=e.svgOptions||{};i(L);let X=e.imageOptions||{};T(X),e.allowJpgExport!=null&&A(e.allowJpgExport),e.allowPngExport!=null&&U(e.allowPngExport),e.allowSvgExport!=null&&k(e.allowSvgExport)}function J(){new zr(t.current).export(_)}function $(){new mt(t.current).export(x)}function d(){new mt(t.current).export(Object.assign(x||{},{type:"image/jpeg"}))}return Fr(()=>{r.current===!1&&(r.current=!0,e.surfaceId!=null?ae(e.surfaceId,S=>w(S.getSurface())):n!=null?n.listen(w):o!=null?o.listen(S=>{S.$ui instanceof Hr&&w(S.$ui)}):$r("WARN: export controls component cannot resolve a surface to attach to. Either provide surfaceId or ensure there is an ancestor SurfaceComponent, DiagramComponent, SurfaceProvider or DiagramProvider"))}),B.createElement("div",{className:`${Wr} ${Jr}`},l&&B.createElement("span",null,s),h&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportSvg",onClick:()=>J()},"SVG")),N&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportPng",onClick:()=>$()},"PNG")),R&&B.createElement("i",null,B.createElement("a",{href:"#",id:"exportJpg",onClick:()=>d()},"JPG")))}import Xr,{forwardRef as Yr,useContext as Zr,useEffect as qr,useRef as Te}from"react";import{log as pt,ShapePalette as Kr}from"@visuallyjs/browser-ui";var Ds=Yr((e,r)=>{let t=Te(!1),n=Te(null),o=Zr(E),l=Te(null),a=e.className||"";function s(c){c.getShapeLibrary()!=null?l.current=new Kr(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}):pt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return qr(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):pt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Xr.createElement("div",{ref:n,className:a})});import Qr,{useEffect as eo,useRef as to}from"react";import{CLASS_SHAPE as ro,convertToMultilineText as oo,DEFAULT_LABEL_FILL_RATIO as no}from"@visuallyjs/browser-ui";var ao=120,io=90;function Is(e){let r=to(null);function t(){return e.ctx.obj.data.outlineWidth||2}function n(){return e.ctx.obj.data.fill||"#FFFFFF"}function o(){return e.ctx.obj.data.outline||"#000000"}function l(){return e.ctx.obj.data.width||ao}function a(){return e.ctx.obj.data.height||io}function s(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function c(){return e.labelProperty||"label"}return eo(()=>{let C=e.ctx.obj.data,g=e.ctx.ui.getShapeLibrary(),_=g.renderCompiledShape(C);if(r.current.replaceChildren(_),e.showLabels){let i=g.renderShapeLabel(C,c(),e.labelStrokeWidth,null,s(),s(),e.font);r.current.appendChild(i),e.multilineLabels!=!1&&oo(i,C[c()]||"",l()*(e.labelFillRatio||no))}}),Qr.createElement("svg",{className:ro,ref:r,strokeWidth:t(),fill:n(),stroke:o(),preserveAspectRatio:"none",viewBox:"0 0 "+l()+" "+a()})}import lo,{forwardRef as so,useContext as co,useEffect as uo,useRef as Ne}from"react";import{log as mo,Palette as po,defaultDataGenerator as fo}from"@visuallyjs/browser-ui";var Zs=so((e,r)=>{let t=Ne(!1),n=Ne(null),o=co(E),l=Ne(null),a=e.className||"";function s(c){let C={selector:e.selector,source:n.current,dataGenerator:g=>e.dataGenerator?e.dataGenerator(g):fo(g),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,C)}return uo(()=>{t.current||(t.current=!0,o!=null?o.listen(c=>s(c)):e.surface!=null?s(e.surface):mo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),lo.createElement("div",{className:a,ref:n},e.children)});import de,{useEffect as Co,useState as Eo,useRef as ft}from"react";import{CLASS_COLOR_PICKER as go,CLASS_COLOR_PICKER_SWATCH as xo,CLASS_COLOR_PICKER_SWATCHES as Oo,EVENT_CONTEXT_UPDATE as Ct,EVENT_CHANGE as Ae,INSPECTOR_CONTEXT_RECENT_COLORS as me}from"@visuallyjs/browser-ui";function tc(e){let r=e.maxColors||10,t=ft(null),n=ft(!1),o=le(),[l,a]=Eo(o.ensureContext(me,()=>[]));function s(i){let x=o.ensureContext(me,()=>[]);if(i=i.toUpperCase(),!(x.find(h=>h.toUpperCase()===i)!=null)){let h=x.slice();h.unshift(i),h.length>r&&(h.length=r),o.updateContext(me,h)}}function c(){let i=t.current.value;o.setValue(e.propertyName,i),s(i)}function C(i){o.setValue(e.propertyName,i),t.current.value=i}let g=i=>{i.key===me&&a(i.value.slice())};function _(){let i=o.getValue(e.propertyName);i!=null&&t.current&&s(i)}return Co(()=>(o.bind(Ct,g),o.bind(Ae,_),n.current||(n.current=!0,t.current.addEventListener(Ae,c)),setTimeout(_),()=>{o.unbind(Ct,g),o.unbind(Ae,_)})),de.createElement("div",{className:go},de.createElement("input",{type:"color",ref:t,"vjs-att":e.propertyName}),de.createElement("div",{className:Oo},l.map(i=>de.createElement("div",{key:i,title:i,className:xo,style:{backgroundColor:i},"data-color":i,onClick:()=>C(i)}))))}import So,{forwardRef as Po,useContext as Ro,useEffect as ho,useRef as we}from"react";import{log as yo,DiagramPalette as bo}from"@visuallyjs/browser-ui";var pc=Po((e,r)=>{let t=we(!1),n=we(null),o=Ro(y),l=we(null),a=e.className||"";function s(C){l.current=new bo(n.current,C,{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})}ho(()=>{t.current||(t.current=!0,o!=null?o.listen(C=>s(C)):e.diagram!=null?s(e.diagram):yo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let c=e.style||{};return So.createElement("div",{ref:n,className:a,style:c})});import Do,{useContext as Et,useEffect as re,useRef as pe}from"react";import{ColumnChart as _o,BarChart as vo,CategoryValueChart as To,LineChart as No,AreaChart as Ao,PieChart as wo,ScatterChart as Mo,BubbleChart as Io,GaugeChart as Vo,SankeyChart as Bo}from"@visuallyjs/browser-ui";function I(e){let r=pe(null),t=pe(!1),n=pe(!1),o=pe(null),l=e.style||{},a=Et(E),s=Et(y);return re(()=>{if(!t.current)if(t.current=!0,a!=null)a.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),n.current=!0});else if(s!=null)s.listen(c=>{let C=Object.assign({dataSource:c.model,dataSourceFilter:e.dataSourceFilter},e.options);o.current=e.createChart(r.current,C),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&&(re(()=>{n.current&&e.data!=null&&o.current&&o.current.load({data:e.data})},[e.data]),re(()=>{n.current&&e.url!=null&&o.current&&o.current.load({url:e.url})},[e.url]),re(()=>{n.current&&e.pivot!=null&&o.current&&o.current.pivot&&o.current.pivot(e.pivot)},[e.pivot]),re(()=>{n.current&&e.dataSourceFilter!=null&&o.current&&o.current.setDataSourceFilter&&o.current.setDataSourceFilter(e.dataSourceFilter)},[e.dataSourceFilter])),Do.createElement("div",{ref:r,style:l,className:`${e.className||""}`})}function Vc(e){let r=Object.assign({createChart:(t,n)=>new _o(t,n)},e);return I(r)}function Bc(e){let r=Object.assign({createChart:(t,n)=>new vo(t,n)},e);return I(r)}function jc(e){let r=Object.assign({createChart:(t,n)=>new To(t,n)},e);return I(r)}function kc(e){let r=Object.assign({createChart:(t,n)=>new No(t,n)},e);return I(r)}function Uc(e){let r=Object.assign({createChart:(t,n)=>new Ao(t,n)},e);return I(r)}function Gc(e){let r=Object.assign({createChart:(t,n)=>new wo(t,n)},e);return I(r)}function Lc(e){let r=Object.assign({createChart:(t,n)=>new Mo(t,n)},e);return I(r)}function Fc(e){let r=Object.assign({createChart:(t,n)=>new Io(t,n)},e);return I(r)}function zc(e){let r=Object.assign({createChart:(t,n)=>new Vo(t,n)},e);return I(r)}function Hc(e){let r=Object.assign({createChart:(t,n)=>new Bo(t,n)},e);return e.interactive!=null&&(r.options.interactive=e.interactive),e.pivot!=null&&(r.options.pivot=e.pivot),e.csvData&&(r.options.csvData=e.csvData),e.jsonData&&(r.options.jsonData=e.jsonData),I(r)}import{log as jo}from"@visuallyjs/browser-ui";import ko,{useContext as Uo,useEffect as Go,useRef as gt}from"react";function xt(e){let r=gt(!1),t=gt(null),n=Uo(E),o=e.position||{x:0,y:0};function l(a){e.placement==="fixed"?a.fixElement(t.current,o,e.constraints):a.floatElement(t.current,o)}return Go(()=>{r.current||(r.current=!0,n!=null?n.listen(a=>l(a)):jo("Decorator cannot mount: no SurfaceContext from a provider found"))}),ko.createElement("div",{ref:t},e.children)}import{log as Lo,BackgroundPlugin as Fo,GeneratedGridBackground as zo,TiledBackground as Ho,SimpleBackground as Wo}from"@visuallyjs/browser-ui";import Ot,{useRef as Jo}from"react";function Me(e){let r=Jo(!1);function t(n){if(!r.current){r.current=!0;try{n&&n.addPlugin({type:Fo.type,options:e})}catch(o){Lo(`WARN: BackgroundComponent could not mount background ${o}`)}}}return Ge().then(t),Ot.createElement(Ot.Fragment,null)}function au(e){return Me(Object.assign({type:zo.type},e))}function iu(e){return Me(Object.assign({type:Wo.type},e))}function lu(e){return Me(Object.assign({type:Ho.type},e))}import{useState as $o,useEffect as Xo}from"react";import{EVENT_ZOOM as St}from"@visuallyjs/browser-ui";function mu(e){let[r,t]=$o(()=>e.getZoom());return Xo(()=>{let n=o=>{t(o.zoom)};return e.bind(St,n),t(e.getZoom()),()=>{e.unbind(St,n)}},[e]),r}export{Lr as ATTRIBUTE_CAN_REDO,Gr as ATTRIBUTE_CAN_UNDO,Uc as AreaChartComponent,Me as BackgroundComponent,Bc as BarChartComponent,q as BrowserUIReactModel,Fc as BubbleChartComponent,Oe as CLASS_REACT_GROUP,xe as CLASS_REACT_NODE,je as CLASS_REACT_OVERLAY,ve as CLASS_SELECTED_MODE,tc as ColorPickerComponent,Vc as ColumnChartComponent,rs as ControlsComponent,io as DEFAULT_SHAPE_HEIGHT,ao as DEFAULT_SHAPE_WIDTH,xt as DecoratorComponent,vi as DiagramComponent,y as DiagramContext,pc as DiagramPaletteComponent,Di as DiagramProvider,xa as EdgeTypePickerComponent,Cs as ExportControlsComponent,zc as GaugeChartComponent,au as GridBackgroundComponent,iu as ImageBackgroundComponent,qi as InspectorComponent,ie as InspectorContext,Se as JSXWrapper,kc as LineChartComponent,ki as MiniviewComponent,Zs as PaletteComponent,Gc as PieChartComponent,Hc as SankeyChartComponent,Lc as ScatterChartComponent,Is as ShapeComponent,Ds as ShapePaletteComponent,ci as SurfaceComponent,E as SurfaceContext,ta as SurfaceProvider,lu as TiledImageBackgroundComponent,se as VisuallyJsContext,Ta as VisuallyJsProvider,jc as XYChartComponent,Ze as createDiagramRef,Le as createInspectorRef,Q as createRefHandler,K as createSurfaceRef,ae as getSurfaceComponent,Ue as newInstance,Be as registerSurface,_i as useDiagram,le as useInspector,Ge as useSurface,Na as useVisuallyJsModel,mu as useZoom};
+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};