@visuallyjs/browser-ui-react 1.2.8 → 1.2.10

package/definitions.d.ts

@@ -50,6 +50,14 @@ export interface ReactOverlaySpec {
      * @param ctx
      */
     jsx: (ctx: JsxWrapperProps<Edge>) => any;
+    /**
+     * Minimum zoom this overlay will be visible at
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom this overlay will be visible at
+     */
+    maxZoom?: number;
 }
 /**
  * Edge mappings for a view.

package/jsx-wrapper.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { Base, BrowserUI, BrowserUIModel, ObjectData } from "@visuallyjs/browser-ui";
+export declare const ChildPropsContext: React.Context<any>;
 /**
  * These are the props that are passed to the `jsx` you provide to map a node, group or overlay component in the `viewOptions` of a {@link SurfaceComponent} or {@link PaperComponent}. VisuallyJs passes in the UI, the model (which you can get from the UI anyway), the object being rendered, the object's data, and any `childProps` that have been configured.
  * @group Props
@@ -37,10 +38,10 @@ export interface JsxWrapperProps<T extends Base> {
  */
 export interface ComponentFacade<T extends Base> {
     def: {
-        jsx?: (p: JsxWrapperProps<any>) => ReactNode;
-        component?: any;
+        jsx: (p: JsxWrapperProps<any>) => ReactNode;
     };
     obj: T;
+    data?: Record<string, any>;
     payload?: any;
 }
 /**

package/package.json

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

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

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

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

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