@visuallyjs/browser-ui-react 1.0.3 → 1.1.0

package/definitions.d.ts

@@ -11,7 +11,7 @@ export interface ReactSurfaceRenderOptions extends Omit<SurfaceOptions, "directR
 /**
  * Definition of a node - its jsx, and behaviour.
  */
-export interface ReactNodeMapping extends Omit<NodeMapping<any>, "template" | "templateId" | "parameters"> {
+export interface ReactNodeMapping extends Omit<NodeMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * JSX used to render this node type. Optional; if you do not supply it a default template will be used.
      */
@@ -20,7 +20,7 @@ export interface ReactNodeMapping extends Omit<NodeMapping<any>, "template" | "t
 /**
  * Definition of a group - its jsx, and behaviour.
  */
-export interface ReactGroupMapping extends Omit<GroupMapping<any>, "template" | "templateId" | "parameters"> {
+export interface ReactGroupMapping extends Omit<GroupMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * JSX used to render this group type. Optional; if you do not supply it a default template will be used.
      */
@@ -29,7 +29,7 @@ export interface ReactGroupMapping extends Omit<GroupMapping<any>, "template" |
 /**
  * Definition of a port - its jsx, and behaviour. This is for advanced use cases.
  */
-export interface ReactPortMapping extends Omit<PortMapping<any>, "template" | "templateId" | "parameters"> {
+export interface ReactPortMapping extends Omit<PortMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * JSX used to render this port type. Optional; if you do not supply it a default template will be used.
      */

package/diagram-component.d.ts

@@ -20,7 +20,14 @@ export interface DiagramRef extends RefHandle<Diagram> {
  */
 export declare function createDiagramRef(ref: MutableRefObject<Diagram>): DiagramRef;
 /**
- * Provider for a Diagram. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Diagram and where you want to put some other component such as miniview, controls or DiagramPalette . Whenever a `DiagramComponent` is declared as a descendant of this provider, the provider's underlying diagram is set and this is propagated to all the other components using this context. To use this you just declare a DiagramProvider element and put some children inside of it.
+ * Provider for a Diagram. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Diagram and where you want to put some other component such as miniview, controls or DiagramPalette . Whenever a `DiagramComponent` is declared as a descendant of this provider, the provider's underlying diagram is set and this is propagated to all the other components using this context. To use this you just declare a DiagramProvider element and put some children inside of it:
+ *
+ * ```jsx
+ * <DiagramProvider>
+ *     <DiagramComponent options={...}/>
+ *     <DiagramPalette/>
+ * </DiagramProvider>
+ * ```
  *
  * @group Providers
  */

package/index.d.ts

@@ -27,3 +27,4 @@ export * from './diagram-palette-component';
 export * from './chart-component';
 export * from './decorator-component';
 export * from './background-component';
+export * from './use-zoom';

package/package.json

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

package/surface-component.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { SurfaceComponentProps, SurfaceComponentRef } from "./definitions";
 /**
  * Provides a pannable and zoomable canvas on which nodes, edges and groups can be drawn, with support for layouts and various plugins.
+ *
+ * ```jsx
+ * <SurfaceComponent renderOptions={...} modelOptions={...} viewOptions={...}/>
+ * ```
+ *
  * @group Components
  */
 export declare const SurfaceComponent: React.ForwardRefExoticComponent<SurfaceComponentProps & React.RefAttributes<SurfaceComponentRef>>;

package/surface-context.d.ts

@@ -6,7 +6,17 @@ import { RefHandle } from "./definitions";
  */
 export declare const SurfaceContext: Context<SurfaceRef>;
 /**
- * Provider for a Surface. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Surface and where you want to or drag/drop. Whenever a `SurfaceComponent` is declared as a descendant of this provider, the provider's underlying surface is set and this is propagated to all the other components using this context. To use this you just declare a SurfaceProvider element and put some children inside of it
+ * Provider for a Surface. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Surface and where you want put other components that will need to reference it. Whenever a `SurfaceComponent` is declared as a descendant of this provider, the provider's underlying surface is set and this is propagated to all the other components using this context. To use this you just declare a SurfaceProvider element and put some children inside of it:
+ *
+ * ```jsx
+ * <SurfaceProvider>
+ *     <SurfaceComponent renderOptions={...}/>
+ *     <Palette/>
+ *     <div>
+ *         <MiniviewComponent/>
+ *     </div>
+ * </SurfaceProvider>
+ * ```
  *
  * @group Providers
  */

package/use-zoom.d.ts

@@ -0,0 +1,21 @@
+import { BrowserUI } from '@visuallyjs/browser-ui';
+/**
+ * Hook to track the current zoom level of a VisuallyJS UI component. You can use this hook in your templates to conditionally hide/show parts of the UI.
+ *
+ * ```jsx
+ * export default function MyComponent(ctx) {
+ *
+ *  const zoom = useZoom(ctx.ui)
+ *
+ *  return <div>
+ *      {zoom > 1 && <h1>Zoom is large</h1>}
+ *      {zoom <= 1 && <h3>Zoom is small</h3>}
+ *      </div>
+ * }
+ * ```
+ *
+ * @param ui The UI instance from JSXWrapperProps.ui
+ * @group Hooks
+ * @since 1.0.4
+ */
+export declare function useZoom(ui: BrowserUI): number;

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

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

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

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