@visuallyjs/browser-ui-react 1.2.6 → 1.2.8

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

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