@visuallyjs/browser-ui-react 1.2.4 → 1.2.5

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 } from "@visuallyjs/browser-ui";
+import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape, DataSource, Paper, PaperOptions, VisuallyJsSelection, BrowserUI, Vertex, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 import { BrowserUIReactModel } from "./browser-ui-react";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { JsxWrapperProps } from "./jsx-wrapper";
@@ -333,13 +333,37 @@ export interface ShapePaletteComponentProps {
      */
     showLabels?: boolean;
     /**
-     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`. This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * 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.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Ref handle for a {@link ShapePaletteComponent}
@@ -364,7 +388,7 @@ export interface PaletteComponentProps {
     /**
      * Whether or not to allow drop on edge. Defaults to false.
      */
-    allowDropOnEdge?: boolean;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
     /**
      * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
      */
@@ -430,6 +454,22 @@ export interface PaletteComponentProps {
      * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
      */
     clickToAddOnly?: boolean;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * 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.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Ref handle for a palette component.

package/diagram-palette-component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, PreparedShape } from "@visuallyjs/browser-ui";
+import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, PreparedShape, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 /**
  * Options for a palette for a diagram.
  * @group Props
@@ -18,9 +18,13 @@ export interface DiagramPaletteComponentProps {
      */
     dragSize?: Size;
     /**
-     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`. This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
      */
@@ -79,6 +83,18 @@ export interface DiagramPaletteComponentProps {
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * 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.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Ref handle for a {@link DiagramPaletteComponent}

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-react","version":"1.2.4","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.4"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-react","version":"1.2.5","description":"VisuallyJs React","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts","README.md"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.5"},"homepage":"https://visuallyjs.com/react","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/palette-component.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
 import { PaletteComponentProps, PaletteComponentRef } from "./definitions";
 /**
- * Provides a palette from which new nodes/groups can be dragged onto a surface/paper canvas.  This component can function
- * inside a {@link SurfaceContext} - whether provided by a {@link SurfaceComponent}, {@link PaperComponent} or a
- * {@link SurfaceProvider}.
+ * Provides a palette from which new nodes/groups can be dragged onto a surface/paper canvas.  This component can function inside a {@link SurfaceContext} - whether provided by a {@link SurfaceComponent}, {@link PaperComponent} or a {@link SurfaceProvider}.
  *
  * @group Components
  *

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

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

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