@visuallyjs/browser-ui-react 1.2.5 → 1.2.7

package/EdgePropertyMappingsInspector.d.ts

@@ -0,0 +1,28 @@
+import { EdgeMapping, EdgePropertyMappings, PropertyMapping } from "@visuallyjs/browser-ui";
+/**
+ * Props for the EdgePropertyMappingsInspector component.
+ * @group Props
+ */
+export interface EdgePropertyMappingsInspectorProps {
+    /**
+     * Optional, you can implement this method to return your own names to use for properties in the inspector.
+     */
+    getPropertyName?: (pm: PropertyMapping<EdgeMapping>) => string;
+    /**
+     * Optional, whether or not to show property names. Defaults to true.
+     */
+    showName?: boolean;
+    /**
+     * Optional class name to use on the wrapper div. Defaults to `vjs-inspector-section`.
+     */
+    cssClass?: string;
+    /**
+     * Optional property mappings to render a form for. The default behaviour is to retrieve the property mappings from the inspector context
+     */
+    mappings?: EdgePropertyMappings;
+}
+/**
+ * A component that provides a form for managing edge properties from the installed edge property mappings.
+ * @group Components
+ */
+export declare function EdgePropertyMappingsInspector(props: EdgePropertyMappingsInspectorProps): JSX.Element;

package/ShapePropertiesInspector.d.ts

@@ -0,0 +1,21 @@
+import { Vertex } from "@visuallyjs/browser-ui";
+/**
+ * Props for the ShapePropertiesInspector
+ * @group Props
+ */
+export interface ShapePropertiesInspectorProps {
+    /**
+     * vertex to inspector
+     */
+    vertex: Vertex | null;
+    /**
+     * The maximum number of radio buttons to show for a value list before switching to a select dropdown. Defaults to 7.
+     */
+    maxRadios?: number;
+}
+/**
+ * Inspector for the properties of a shape. This component will likely be moved into the VisuallyJs React integration in an upcoming release.
+ * @param vertex
+ * @constructor
+ */
+export declare function ShapePropertiesInspector({ vertex, maxRadios }: ShapePropertiesInspectorProps): JSX.Element;

package/definitions.d.ts

@@ -1,4 +1,4 @@
-import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape, DataSource, Paper, PaperOptions, VisuallyJsSelection, BrowserUI, Vertex, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
+import { Group, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape, DataSource, Paper, PaperOptions, VisuallyJsSelection, BrowserUI, Vertex, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 import { BrowserUIReactModel } from "./browser-ui-react";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { JsxWrapperProps } from "./jsx-wrapper";
@@ -275,7 +275,7 @@ export interface ShapePaletteComponentProps {
     /**
      * Optional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's `type` with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
      */
-    dataGenerator?: DataGeneratorFunction<ObjectData>;
+    dataGenerator?: DataGeneratorFunction;
     /**
      * Optional size to use for dragged elements.
      */
@@ -347,7 +347,7 @@ export interface ShapePaletteComponentProps {
     /**
      * Whether or not to allow drop on edge. Defaults to false.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**
      * Whether or not to allow rotation of elements being dragged. Defaults to true.
      */
@@ -388,7 +388,7 @@ export interface PaletteComponentProps {
     /**
      * Whether or not to allow drop on edge. Defaults to false.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**
      * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
      */
@@ -408,15 +408,15 @@ export interface PaletteComponentProps {
     /**
      * Function to use to get a dataset for an item that is being dragged or has been tapped. If omitted, Visually JS will use a default data generator that extracts data values from any `data-vjs-***` attribute on the element being dragged.
      */
-    dataGenerator?: DataGeneratorFunction<BrowserElement>;
+    dataGenerator?: DataGeneratorFunction;
     /**
      * Function to use to get the type of an item that is being dragged or has been tapped.
      */
-    typeGenerator?: TypeGeneratorFunction<BrowserElement>;
+    typeGenerator?: TypeGeneratorFunction;
     /**
      * Function to use to determine whether an item that is being dragged or has been tapped represents a group.
      */
-    groupIdentifier?: GroupIdentifierFunction<BrowserElement>;
+    groupIdentifier?: GroupIdentifierFunction;
     /**
      * Optional extra css classes to set on the element
      */
@@ -437,7 +437,7 @@ export interface PaletteComponentProps {
     /**
      * Optional filter to test if objects may be dropped on the canvas.
      */
-    canvasDropFilter?: CanvasDropFilter<BrowserElement>;
+    canvasDropFilter?: CanvasDropFilter;
     /**
      * The surface to attach to. Optional: this component can derive a surface from a SurfaceProvider or SurfaceComponent. You'll only need this in certain advanced scenarios.
      */

package/diagram-palette-component.d.ts

@@ -86,7 +86,7 @@ export interface DiagramPaletteComponentProps {
     /**
      * Whether or not to allow drop on edge. Defaults to false.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**
      * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
      */

package/edge-type-picker.d.ts

@@ -9,7 +9,7 @@ export interface EdgeTypePickerComponentProps {
     propertyName: string;
 }
 /**
- * A component that provides a picker for edge types.
+ * A component that provides a picker for edge types. You provide the property name to use, and the picker resolves an Inspector from the context, then retrieves the mappings configured for that property.
  * @group Components
  */
 export declare function EdgeTypePickerComponent(props: EdgeTypePickerComponentProps): JSX.Element;

package/index.d.ts

@@ -12,6 +12,8 @@ export * from './browser-ui-react';
 export * from './edge-type-picker';
 export * from './surface-component';
 export * from './SurfacePopup';
+export * from './EdgePropertyMappingsInspector';
+export * from './ShapePropertiesInspector';
 export * from './paper-component';
 export * from './miniview-component';
 export * from './inspector-component';
@@ -27,7 +29,7 @@ export * from './paper-context';
 export * from './inspector-context';
 export * from './diagram-component';
 export * from './diagram-palette-component';
-export * from './chart-component';
+export * from './charts';
 export * from './decorator-component';
 export * from './background-component';
 export * from './use-visuallyjs-update';

package/package.json

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

package/shape-component.d.ts

@@ -1,5 +1,5 @@
 import { JsxWrapperProps } from "./jsx-wrapper";
-import { FontSpec, Vertex } from "@visuallyjs/browser-ui";
+import { FontSpec, LabelPosition, Vertex } from "@visuallyjs/browser-ui";
 export declare const DEFAULT_SHAPE_WIDTH = 120;
 export declare const DEFAULT_SHAPE_HEIGHT = 90;
 /**
@@ -24,6 +24,10 @@ export interface ShapeComponentProps<T extends Vertex> {
      * For multiline labels, the proportion of the width of the shape that the longest line can take up.
      */
     labelFillRatio?: number;
+    /**
+     * Defaults to "center". Use "top" or "bottom" to set the label above or below the shape.
+     */
+    labelPosition?: LabelPosition;
     /**
      * Defaults to true - word wrap shape labels so they fit into their shapes
      */

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

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

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

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

package/chart-component.d.ts

@@ -1,197 +0,0 @@
-import { ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, LineChartOptions, AreaChartOptions, ObjectData, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, VisuallyJsDefaultJSON, ChartModelFilter } from "@visuallyjs/browser-ui";
-/**
- * Base interface for chart props
- * @group Props
- */
-export interface BaseChartProps {
-    /**
-     * Optional class name to set on the chart's root element.
-     */
-    className?: string;
-    /**
-     * Data to load
-     */
-    data?: Array<ObjectData>;
-    /**
-     * URL to load data from
-     */
-    url?: string;
-    /**
-     * Whether the chart is interactive.
-     */
-    interactive?: boolean;
-    /**
-     * Optional style object
-     */
-    style?: Record<string, any>;
-    /**
-     * Whether or not to respond to changes in the `url` or `data` prop. Defaults to true.
-     */
-    reactive?: boolean;
-    /**
-     * Optional filter to apply to the chart's data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * {@link ColumnChartComponent} props
- * @group Props
- */
-export interface ColumnChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the column chart.
-     */
-    options: Omit<ColumnChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a column chart
- * @group Components
- */
-export declare function ColumnChartComponent(props: ColumnChartComponentProps): JSX.Element;
-/**
- * {@link BarChartComponent} props
- * @group Props
- */
-export interface BarChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the bar chart
-     */
-    options: Omit<BarChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a bar chart
- * @group Components
- */
-export declare function BarChartComponent(props: BarChartComponentProps): JSX.Element;
-/**
- * {@link XYChartComponent} props
- * @group Props
- */
-export interface XYChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the XY chart
-     */
-    options: Omit<CategoryValueChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays an XY chart - a chart containing an X and a Y axis, one of which displays chart categories and the other values. If you want a dual value axis chart (and you dont want to use Scatter or Bubble) you can use the DualValueChartComponent
- * @group Components
- */
-export declare function XYChartComponent(props: XYChartComponentProps): JSX.Element;
-/**
- * {@link LineChartComponent} props
- * @group Props
- */
-export interface LineChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the line chart.
-     */
-    options: Omit<LineChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a line chart
- * @group Components
- */
-export declare function LineChartComponent(props: LineChartComponentProps): JSX.Element;
-/**
- * {@link AreaChartComponent} props
- * @group Props
- */
-export interface AreaChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the area chart.
-     */
-    options: Omit<AreaChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays an area chart
- * @group Components
- */
-export declare function AreaChartComponent(props: AreaChartComponentProps): JSX.Element;
-/**
- * {@link PieChartComponent} props
- * @group Props
- */
-export interface PieChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the pie chart.
-     */
-    options: Omit<PieChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a pie chart
- * @group Components
- */
-export declare function PieChartComponent(props: PieChartComponentProps): JSX.Element;
-/**
- * {@link ScatterChartComponent} props
- * @group Props
- */
-export interface ScatterChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the scatter chart.
-     */
-    options: Omit<ScatterChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a scatter chart
- * @group Components
- */
-export declare function ScatterChartComponent(props: ScatterChartComponentProps): JSX.Element;
-/**
- * {@link BubbleChartComponent} props
- * @group Props
- */
-export interface BubbleChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the bubble chart.
-     */
-    options: Omit<BubbleChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a bubble chart
- * @group Components
- */
-export declare function BubbleChartComponent(props: BubbleChartComponentProps): JSX.Element;
-/**
- * {@link GaugeChartComponent} props
- * @group Props
- */
-export interface GaugeChartComponentProps extends BaseChartProps {
-    /**
-     * Options for the gauge chart
-     */
-    options: Omit<GaugeChartOptions, "data" | "url" | "model">;
-}
-/**
- * Provides a component that displays a gauge chart
- * @group Components
- */
-export declare function GaugeChartComponent(props: GaugeChartComponentProps): JSX.Element;
-/**
- * {@link SankeyChartComponent} props
- * @group Props
- */
-export interface SankeyChartComponentProps extends Omit<BaseChartProps, "data"> {
-    /**
-     * Options for the sankey chart
-     */
-    options: Omit<SankeyOptions, "data" | "url" | "model">;
-    /**
-     * Optional property to pivot the sankey chart on.
-     */
-    pivot?: string;
-    /**
-     * Optional data to load into the chart (in CSV format)
-     */
-    csvData?: string;
-    /**
-     * Optional data to load into the chart (in VisuallyJs default json format)
-     */
-    jsonData?: VisuallyJsDefaultJSON;
-}
-/**
- * Provides a component that displays a sankey chart
- * @group Components
- */
-export declare function SankeyChartComponent(props: SankeyChartComponentProps): JSX.Element;