@visuallyjs/browser-ui-react 1.1.4 → 1.2.1

package/SurfacePopup.d.ts

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

package/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,19 @@
-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.
  */
@@ -49,10 +55,10 @@ export interface ReactOverlaySpec {
  * Edge mappings for a view.
  */
 export interface ReactEdgeMapping extends Omit<EdgeMapping, "overlays"> {
-    overlays: Array<OverlaySpec | ReactOverlaySpec>;
+    overlays?: Array<OverlaySpec | ReactOverlaySpec>;
 }
 /**
- * Options for the view in the react 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 +78,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 +142,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 +163,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 +414,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,8 @@ export * from './jsx-wrapper';
 export * from './browser-ui-react';
 export * from './edge-type-picker';
 export * from './surface-component';
+export * from './SurfacePopup';
+export * from './paper-component';
 export * from './miniview-component';
 export * from './inspector-component';
 export * from './controls-component';
@@ -21,10 +23,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/inspector-component.d.ts

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

package/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

@@ -52,8 +52,7 @@ export interface MiniviewComponentProps {
     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.4","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.4"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-react","version":"1.2.1","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.1"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/paper-component.d.ts

@@ -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 automatically adjusts the zoom level and the pan of the canvas so that it fits into the component's parent.
+ *
+ * ```jsx
+ * <PaperComponent renderOptions={...} modelOptions={...} viewOptions={...}/>
+ * ```
+ *
+ * @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

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

package/utils.d.ts

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

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

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