@visuallyjs/browser-ui-react 1.2.9 → 1.2.10

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
@@ -40,6 +41,7 @@ export interface ComponentFacade<T extends Base> {
         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.9","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.9"},"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 Yt=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 V=(e,r,t)=>(t=e!=null?Yt(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:()=>ge,BubbleChartComponent:()=>Mr,CLASS_REACT_GROUP:()=>Je,CLASS_REACT_NODE:()=>We,CLASS_REACT_OVERLAY:()=>ke,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:()=>be,VisuallyJsProvider:()=>cr,XYChartComponent:()=>_r,createDiagramRef:()=>mt,createInspectorRef:()=>ut,createPaperRef:()=>Ke,createRefHandler:()=>Ce,createSurfaceRef:()=>De,getSurfaceComponent:()=>or,newInstance:()=>ct,registerSurface:()=>st,useDiagram:()=>he,useInspector:()=>me,usePaper:()=>pt,useSurface:()=>Z,useVisuallyJsModel:()=>ft,useVisuallyJsUpdate:()=>Lr,useZoom:()=>kr});module.exports=rr(Fr);var lt=require("@visuallyjs/browser-ui"),Tt=new Map,Le={};function st(e,r){Tt.set(e,r),nr(e,r)}function nr(e,r){(Le[e]||[]).forEach(o=>{try{o(r)}catch(a){(0,lt.log)("WARN: an error was reported invoking a SurfaceComponentRefCallback "+a)}}),delete Le[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 Le[e]=Le[e]||[],Le[e].push(r)}var We="vjs-react-node",Je="vjs-react-group",ke="vjs-react-overlay";var Se=V(require("react"));function $e(e){let r=(0,Se.useRef)(!1);return(0,Se.useEffect)(()=>{r.current||(r.current=!0,e.cb(e.ns))}),Se.default.createElement(Se.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 Ze=require("@visuallyjs/browser-ui"),ge=class extends Ze.BrowserUIModel{render(r,t){return(0,Ze.log)("render called directly on BrowserUIReactModel class: should not happen. UI components should use internal render."),null}};function ct(e){return e=e||{},new ge(e)}var q=V(require("react")),B=(0,q.createContext)(null);function ar(e){let r=(0,q.useRef)(null),t=De(r);return q.default.createElement(B.Provider,{value:t},e.children||[])}function De(e){return Ce(e)}function Ce(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 Z(){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 Xe=require("react"),Fe=(0,Xe.createContext)(null);function ut(e){return Ce(e)}function me(){let e=(0,Xe.useContext)(Fe);return e==null?null:e.ref().current}var xe=V(require("react")),Ye=require("@visuallyjs/browser-ui");function dt(e){let r=(0,xe.useRef)(!1),t=(0,xe.useRef)(null),o=(0,xe.useRef)(null),a=me(),{propertyName:i}=e,l=()=>a.getFromContext(Ye.INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)||a.$ui.$getEdgePropertyMappings();return(0,xe.useEffect)(()=>{r.current||(r.current=!0,o.current=new Ye.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))}))}),xe.default.createElement("div",{ref:t})}var Q=V(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 Ce(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 M=V(require("react")),_t=require("@visuallyjs/browser-ui"),X=(0,M.createContext)(null);function mt(e){return Ce(e)}function lr(e){let r=(0,M.useRef)(null),t=mt(r);return M.default.createElement(X.Provider,{value:t},e.children||[])}function he(){let e=(0,M.useContext)(X),[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 sr=(0,M.forwardRef)((e,r)=>{let t=(0,M.useRef)(null),o=(0,M.useRef)(!1),a,i,l=(0,M.useContext)(X);l==null?(a=(0,M.useRef)(null),l=mt(a)):a=l.ref();let n=(0,M.useContext)(B);n==null?(i=(0,M.useRef)(null),n=De(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,_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`,x=e.style||{};return M.default.createElement("div",{ref:t,className:m,style:x},M.default.createElement(B.Provider,{value:n},M.default.createElement(X.Provider,{value:l},e.children)))});var z=V(require("react")),be=(0,z.createContext)(void 0);function cr(e){let r=(0,z.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,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 ft(){let e=(0,z.useContext)(be),r=(0,z.useContext)(B),t=(0,z.useContext)(le),o=(0,z.useContext)(X),[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 Et=V(require("react")),Te=require("@visuallyjs/browser-ui");function ur(e,r){if(e.hydrated!==!0){let t=(0,Te.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Te.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,Te.isGroup)(e.obj)?Je:We;e.domElement.firstElementChild&&(0,Te.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")),gt=V(require("react-dom")),E=require("@visuallyjs/browser-ui"),pr=(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=De(s)):s=m.ref();let[x,C]=(0,N.useState)([]),[p,v]=(0,N.useState)([]),O=[],S=[];function k(){t.current===!1&&C(O.slice())}function H(){t.current===!1&&v(S.slice())}let K={getSurface:()=>s.current,getModel:()=>n.current};(0,N.useImperativeHandle)(r,()=>K),(0,N.useEffect)(()=>{var D;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new ge(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,T,y,R,h,$)=>{let[_,U]=R.component||R.jsx?[R,null]:(0,E.isGroup)(h)?[Object.assign(Object.assign({},R),{jsx:W=>N.default.createElement(N.default.Fragment,null,W.obj.data.label)}),E.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},R),{jsx:W=>N.default.createElement(N.default.Fragment,null,W.obj.data.label)}),E.CLASS_DEFAULT_NODE],J=y.containerType===E.ElementTypes.HTML?document.createElement(E.ELEMENT_DIV):(0,E.$svgNode)(E.ELEMENT_SVG);l.current.appendChild(J),U!=null&&y.$addClassToElement(J,U);let ve={data:d,model:b,ui:y,componentId:h.getFullId(),obj:h,props:e.childProps,element:J,eventInfo:$};O.push({data:d,def:_,payload:ve,domElement:J,key:h.id,obj:h,hydrated:!1}),k()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},ye={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,b,T)=>{},render:oe,rerender:(c,d,b,T,y,R,h,$,_)=>{let U=(0,E.partition)(O,J=>J.obj!==h);O=U.left,k(),oe(c,d,b,T,y,R,h,$),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((D=e.viewOptions)==null?void 0:D.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(b=>{if(b.jsx!=null){let T=b;return{type:E.OVERLAY_TYPE_CUSTOM,options:{minZoom:T.minZoom,maxZoom:T.maxZoom,create:R=>{let h=document.createElement(E.ELEMENT_DIV);h.className=ke;let $={data:R.edge.data,model:n.current,ui:pe,componentId:R.edge.getFullId(),obj:R.edge,props:e.childProps,element:h};return S.push({def:{jsx:b.jsx},data:R.edge.data,obj:R.edge,payload:$,domElement:h,key:(0,E.uuid)(),hydrated:!1}),H(),h}}}}else return b}))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),pe=(0,E.renderSurface)(n.current,i.current,ye,Pe);m.set(pe),e.surfaceId!=null&&st(e.surfaceId,K);let Ee=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,E.extend)(d.originalData,d.updates)),y},T=O.find(y=>y.key===c);T!=null&&(T.data=b(),k())},Oe=c=>{O=O.filter(d=>d.payload.componentId!==c),k()},je=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,E.extend)(d.originalData,d.updates)),y},T=S.find(y=>y.obj.id===c);T!=null&&(T.data=b(),H())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),H()};n.current.bind(E.EVENT_NODE_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(E.EVENT_GROUP_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(E.EVENT_NODE_REMOVED,c=>{Oe(c.node.id)}),n.current.bind(E.EVENT_GROUP_REMOVED,c=>{Oe(c.group.id)}),n.current.bind(E.EVENT_EDGE_REMOVED,c=>{Ue(c.edge.id)}),n.current.bind(E.EVENT_EDGE_UPDATED,c=>{je(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(),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(D=>gt.createPortal(Qe(D,n.current,s,e.childProps),D.domElement,D.key)),p.map(D=>gt.createPortal(qe(D,n.current,s,e.childProps),D.domElement,D.key)),N.default.createElement(B.Provider,{value:m},e.children))});var Y=V(require("react")),et=require("@visuallyjs/browser-ui");function Nt(e){let r=Z(),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 x(p){l(p),s(v=>v+1)}(0,Y.useEffect)(()=>{!o.current&&r&&(o.current=!0,a.current=new et.PopupHandler(e.selector,t.current,r,p=>x(p),e.anchor))});function C(){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,()=>C()))}var _e=V(require("react")),At=require("@visuallyjs/browser-ui");function mr(e){let r=me(),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=V(require("react")),F=require("@visuallyjs/browser-ui");function Ct(e){let r=e.maxColors||10,t=(0,ee.useRef)(null),o=(0,ee.useRef)(!1),a=me(),[i,l]=(0,ee.useState)(a.ensureContext(F.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]));function n(p){let v=a.ensureContext(F.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(p=p.toUpperCase(),!(v.find(S=>S.toUpperCase()===p)!=null)){let S=v.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")),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=me();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"},gr(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:Ne(C)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(C)})," ",Ne(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:Ne(C)},P.default.createElement("input",{type:"radio",name:n.id,"vjs-att":n.id,value:xt(C)})," ",Ne(C)))):P.default.createElement("select",{"vjs-att":n.id},n.values.map(C=>P.default.createElement("option",{key:Ne(C),value:xt(C)},Ne(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(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=V(require("react")),yt=V(require("react-dom")),g=require("@visuallyjs/browser-ui"),xr=(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=Ke(s)):s=m.ref();let[x,C]=(0,A.useState)([]),[p,v]=(0,A.useState)([]),O=[],S=[];function k(){t.current===!1&&C(O.slice())}function H(){t.current===!1&&v(S.slice())}let K={getPaper:()=>s.current,getModel:()=>n.current};(0,A.useImperativeHandle)(r,()=>K),(0,A.useEffect)(()=>{var D;if(!o.current){o.current=!0,e.model!=null?n.current=e.model:a==null?n.current=new ge(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,T,y,R,h,$)=>{let[_,U]=R.component||R.jsx?[R,null]:(0,g.isGroup)(h)?[Object.assign(Object.assign({},R),{jsx:W=>A.default.createElement(A.default.Fragment,null,W.obj.data.label)}),g.CLASS_DEFAULT_GROUP]:[Object.assign(Object.assign({},R),{jsx:W=>A.default.createElement(A.default.Fragment,null,W.obj.data.label)}),g.CLASS_DEFAULT_NODE],J=y.containerType===g.ElementTypes.HTML?document.createElement(g.ELEMENT_DIV):(0,g.$svgNode)(g.ELEMENT_SVG);l.current.appendChild(J),U!=null&&y.$addClassToElement(J,U);let ve={data:d,model:b,ui:y,componentId:h.getFullId(),obj:h,props:e.childProps,element:J,eventInfo:$};O.push({data:d,def:_,payload:ve,domElement:J,key:h.id,obj:h,hydrated:!1}),k()},ue=(c,d)=>{d.parentNode&&d.parentNode.removeChild(d)},ye={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,d,b,T)=>{},render:oe,rerender:(c,d,b,T,y,R,h,$,_)=>{let U=(0,g.partition)(O,J=>J.obj!==h);O=U.left,k(),oe(c,d,b,T,y,R,h,$),U.right.length>0&&setTimeout(()=>{ue(null,U.right[0].domElement)})},cleanupVertex:ue,cleanupPort:(c,d)=>{}},de=((D=e.viewOptions)==null?void 0:D.edges)||{};for(let c in de){let d=de[c];d.overlays!=null&&(d.overlays=d.overlays.map(b=>{if(b.jsx!=null){let T=b;return{minZoom:T.minZoom,maxZoom:T.maxZoom,type:g.OVERLAY_TYPE_CUSTOM,options:{create:R=>{let h=document.createElement(g.ELEMENT_DIV);h.className=ke;let $={data:R.edge.data,model:n.current,ui:pe,componentId:R.edge.getFullId(),obj:R.edge,props:e.childProps,element:h};return S.push({def:{jsx:b.jsx},data:R.edge.data,obj:R.edge,payload:$,domElement:h,key:(0,g.uuid)(),hydrated:!1}),H(),h}}}}else return b}))}let Pe=Object.assign(e.renderOptions||{},{view:e.viewOptions}),pe=(0,g.renderPaper)(n.current,i.current,ye,Pe);m.set(pe);let Ee=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,g.extend)(d.originalData,d.updates)),y},T=O.find(y=>y.key===c);T!=null&&(T.data=b(),k())},Oe=c=>{O=O.filter(d=>d.payload.componentId!==c),k()},je=(c,d)=>{let b=()=>{let y={};return(d.originalData||d.updates)&&(y=(0,g.extend)(d.originalData,d.updates)),y},T=S.find(y=>y.obj.id===c);T!=null&&(T.data=b(),H())},Ue=c=>{S=S.filter(d=>d.payload.obj.id!==c),H()};n.current.bind(g.EVENT_NODE_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_GROUP_UPDATED,c=>{Ee(c.vertex.getFullId(),c)}),n.current.bind(g.EVENT_NODE_REMOVED,c=>{Oe(c.node.id)}),n.current.bind(g.EVENT_GROUP_REMOVED,c=>{Oe(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=[],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(),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(D=>yt.createPortal(Qe(D,n.current,s,e.childProps),D.domElement,D.key)),p.map(D=>yt.createPortal(qe(D,n.current,s,e.childProps),D.domElement,D.key)),A.default.createElement(le.Provider,{value:m},e.children))});var rt=require("@visuallyjs/browser-ui"),ae=V(require("react")),yr=(0,ae.forwardRef)((e,r)=>{let t=Z(),o=he(),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"),w=V(require("react")),Pr=(0,w.forwardRef)((e,r)=>{let t=(0,w.useContext)(B),o=(0,w.useContext)(X),a=(0,w.useContext)(le),i,l=(0,w.useContext)(Fe);l==null&&(i=(0,w.useRef)(null),l=ut(i));let[n,s]=(0,w.useState)(null),[m,x]=(0,w.useState)(0),[C,p]=(0,w.useState)(null),v=(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,D)=>{s(j),e.refresh&&e.refresh(j),x(oe=>oe+1)};function K(j){i.current=new Ae.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)(()=>{v.current||(v.current=!0,t!=null?t.listen(K):a!=null?a.listen(K):o!=null?o.listen(j=>{j.$ui instanceof Ae.Surface&&K(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"))}),w.default.createElement("div",{ref:O,className:S},w.default.createElement(Fe.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 fl="group:added",El="group:member:added",gl="group:member:removed",Cl="group:removed",xl="dataLoadStart",yl="dataAppendStart",Pl="dataLoadEnd",Ol="dataAppendEnd",Sl="dataUpdated",hl="graphClearStart",bl="graphCleared",Rl="graphChanged",vl="group:updated",Dl="node:updated",Tl="port:updated",_l="edge:updated",Nl="edge:added",Al="node:added",wl="edge:removed",Vl="node:removed",Ml="port:added",Il="port:removed",Bl="edge:target",jl="edge:source",wt="select",Vt="deselect",Mt="selection:cleared",Ul="edge:geometry",Gl="edge:pathEdited",Ll="edge:dragStart",kl="edge:drag",Fl="edge:dragEnd",Hl="edge:dragAbort",zl="edge:typeChanged",Wl="node:typeChanged",Jl="port:typeChanged",$l="group:typeChanged",Zl="group:move:start",Xl="group:move",Yl="group:move:end",Kl="internal:group:sizeChanged",ql="internal:group:sizeChangedRedo",Ql="internal:group:sizeChangedUndo",es="internal:edge:redraw",ts="renderer:added",rs="node:move:start",ns="node:move",os="node:move:end",as="node:move:abort",is="undoredo:update",ls="undo",ss="redo",cs="destroy";var f=V(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=Z(),o=he(),[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),[v,O]=(0,f.useState)("Clear dataset?"),S=(0,f.useRef)(null),[k,H]=(0,f.useState)(!0),[K,ce]=(0,f.useState)(!1),[j,D]=(0,f.useState)(!0),[oe,ue]=(0,f.useState)(!0),[ye,de]=(0,f.useState)([]),[Pe,pe]=(0,f.useState)([]);function Ee(_){p.current=_,e.clearMessage&&O(e.clearMessage),e.onMaybeClear&&(S.current=e.onMaybeClear),e.orientation&&i(e.orientation),e.undoRedo===!1&&D(!1),e.zoomToExtents===!1&&H(!1),e.zoomButtons===!0&&ce(!0),e.clear===!1&&ue(!1);let U=(e.buttons||[]).filter(W=>W.mode!=null);de(U);let J=(e.buttons||[]).filter(W=>W.mode==null);pe(J),_.bind(u.EVENT_SURFACE_MODE_CHANGED,W=>{_.removeClass(_.$getSelector(x.current,"[data-mode]"),nt),_.addClass(_.$getSelector(x.current,"[data-mode='"+W+"']"),nt)}),_.model.bind(u.EVENT_UNDOREDO_UPDATE,W=>{x.current.setAttribute(Pt,W.undoCount>0?u.TRUE:u.FALSE),x.current.setAttribute(Ot,W.redoCount>0?u.TRUE:u.FALSE)}),_.model.bind(wt,h),_.model.bind(Vt,h),_.model.bind(Mt,h);let ve=_.getPlugin(u.LassoPlugin.type);n(ve!=null),m(ve!=null||U.length>0),x.current.setAttribute(Pt,u.FALSE),x.current.setAttribute(Ot,u.FALSE)}function Oe(){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 b(){p.current.model.clearSelection(),(0,u.supportsPathEditing)(p.current)&&p.current.stopEditingPath()}function T(){S.current!=null?S.current(()=>p.current.model.clear()):window.confirm(v)&&p.current.model.clear()}function y(){p.current.model.undo()}function R(){p.current.model.redo()}let h=()=>{p.current.model.getSelection().isEmpty()?x.current.removeAttribute(It):x.current.setAttribute(It,"true")};(0,f.useEffect)(()=>{C.current===!1&&(t!=null?(C.current=!0,Ee(t)):o!=null&&o.$ui instanceof u.Surface&&(C.current=!0,Ee(o.$ui)))},[t,o]);let $=e.style||{};return f.default.createElement("div",{style:$,ref:x,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}))),ye.map(_=>f.default.createElement("i",{className:_.class,title:_.title,onClick:U=>_.handler(U,_.id)})),k&&f.default.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>Oe()},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}))),K&&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:()=>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:()=>R()},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:v,onClick:()=>T()},f.default.createElement("svg",{viewBox:u.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},f.default.createElement("path",{d:u.CLEAR_PATH}))),Pe.map(_=>f.default.createElement("i",{className:_.class,title:_.title,onClick:U=>_.handler(U,_.id)})))}var I=V(require("react")),ie=require("@visuallyjs/browser-ui");function Sr(e){let r=(0,I.useRef)(!1),t=(0,I.useRef)(null),o=Z(),a=he(),[i,l]=(0,I.useState)(!0),[n,s]=(0,I.useState)("Export :"),[m,x]=(0,I.useState)(null),[C,p]=(0,I.useState)(null),[v,O]=(0,I.useState)(null),[S,k]=(0,I.useState)(!0),[H,K]=(0,I.useState)(!0),[ce,j]=(0,I.useState)(!0);function D(de){t.current=de,e.label&&s(n),e.showLabel!=null&&l(e.showLabel),e.margins&&x(e.margins);let Pe=e.svgOptions||{};p(Pe);let pe=e.imageOptions||{};O(pe),e.allowJpgExport!=null&&j(e.allowJpgExport),e.allowPngExport!=null&&K(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(v)}function ye(){new ie.ImageExportUI(t.current).export(Object.assign(v||{},{type:"image/jpeg"}))}return(0,I.useEffect)(()=>{r.current===!1&&(o!=null?(r.current=!0,D(o)):a!=null&&a.$ui instanceof ie.Surface&&(r.current=!0,D(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:()=>ye()},"JPG")))}var te=V(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=V(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,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,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=V(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:x=>e.dataGenerator?e.dataGenerator(x):(0,Me.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 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=V(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=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)(X);function x(v){let O=l.current;return Object.assign({dataSource:v,dataSourceFilter:e.dataSourceFilter},e.options)}function C(v){var S;(S=a.current)==null||S.destroy(),i.current=v;let O=x(v);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 v=x();a.current=l.current.createChart(r.current,v),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(v=>{C(v.model)}):e.data==null&&e.url==null&&m!=null?m.listen(v=>{C(v.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 Ut=require("@visuallyjs/browser-ui");function Dr(e){let r=Object.assign({createChart:(t,o)=>new Ut.ColumnChart(t,o)},e);return L(r)}var Gt=require("@visuallyjs/browser-ui");function Tr(e){let r=Object.assign({createChart:(t,o)=>new Gt.BarChart(t,o)},e);return L(r)}var Lt=require("@visuallyjs/browser-ui");function _r(e){let r=Object.assign({createChart:(t,o)=>new Lt.CategoryValueChart(t,o)},e);return L(r)}var kt=require("@visuallyjs/browser-ui");function Nr(e){let r=Object.assign({createChart:(t,o)=>new kt.LineChart(t,o)},e);return L(r)}var Ft=require("@visuallyjs/browser-ui");function Ar(e){let r=Object.assign({createChart:(t,o)=>new Ft.AreaChart(t,o)},e);return L(r)}var Ht=require("@visuallyjs/browser-ui");function wr(e){let r=Object.assign({createChart:(t,o)=>new Ht.PieChart(t,o)},e);return L(r)}var zt=require("@visuallyjs/browser-ui");function Vr(e){let r=Object.assign({createChart:(t,o)=>new zt.ScatterChart(t,o)},e);return L(r)}var Wt=require("@visuallyjs/browser-ui");function Mr(e){let r=Object.assign({createChart:(t,o)=>new Wt.BubbleChart(t,o)},e);return L(r)}var Jt=require("@visuallyjs/browser-ui");function Ir(e){let r=Object.assign({createChart:(t,o)=>new Jt.GaugeChart(t,o)},e);return L(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),L(r)}var Zt=require("@visuallyjs/browser-ui"),fe=V(require("react"));function St(e){let r=(0,fe.useRef)(!1),t=(0,fe.useRef)(null),o=(0,fe.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,fe.useEffect)(()=>{r.current||(r.current=!0,o!=null?o.listen(l=>i(l)):(0,Zt.log)("Decorator cannot mount: no SurfaceContext from a provider found"))}),fe.default.createElement("div",{ref:t},e.children)}var se=require("@visuallyjs/browser-ui"),Re=V(require("react"));function at(e){let r=(0,Re.useRef)(!1),t=Z();return(0,Re.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]),Re.default.createElement(Re.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 Xt=require("react"),Ie=require("@visuallyjs/browser-ui");function Lr(e){let r=ft();(0,Xt.useEffect)(()=>{if(r!=null){let t=()=>e(r);return r.bind(Ie.EVENT_DATA_UPDATED,t),r.bind(Ie.EVENT_GRAPH_CLEARED,t),t(),()=>{r.unbind(Ie.EVENT_DATA_UPDATED,t),r.unbind(Ie.EVENT_GRAPH_CLEARED,t)}}},[r])}var Be=require("react"),ht=require("@visuallyjs/browser-ui");function kr(e){let r=Z(),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 Kt=Object.defineProperty;var Ye=Object.getOwnPropertySymbols;var qt=Object.prototype.hasOwnProperty,Qt=Object.prototype.propertyIsEnumerable;var Ke=(e,n,t)=>n in e?Kt(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,Ne=(e,n)=>{for(var t in n||(n={}))qt.call(n,t)&&Ke(e,t,n[t]);if(Ye)for(var t of Ye(n))Qt.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),er(e,n)}function er(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 ba(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 tr,useRef as rr}from"react";function Ve(e){let n=rr(!1);return tr(()=>{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 nr,log as or}from"@visuallyjs/browser-ui";var Q=class extends nr{render(n,t){return or("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 ar,default as ir,useRef as lr,useContext as sr,useState as cr,useEffect as ur}from"react";var _=ar(null);function ji(e){let n=lr(null),t=Ee(n);return ir.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 j(){let e=sr(_),[n,t]=cr(null);return ur(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import{createContext as dr,useContext as pr}from"react";var ye=dr(null);function nt(e){return ee(e)}function $(){let e=pr(ye);return e==null?null:e.ref().current}import mr,{useRef as Me,useEffect as fr}from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as Er,EdgeTypePicker as gr}from"@visuallyjs/browser-ui";function ot(e){let n=Me(!1),t=Me(null),o=Me(null),a=$(),{propertyName:i}=e,l=()=>a.getFromContext(Er)||a.$ui.$getEdgePropertyMappings();return fr(()=>{n.current||(n.current=!0,o.current=new gr(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))}))}),mr.createElement("div",{ref:t})}import{createContext as Cr,default as xr,useRef as yr,useContext as Pr,useState as Or,useEffect as Sr}from"react";var W=Cr(null);function dl(e){let n=yr(null),t=Ie(n);return xr.createElement(W.Provider,{value:t},e.children||[])}function Ie(e){return ee(e)}function at(){let e=Pr(W),[n,t]=Or(null);return Sr(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}import Pe,{createContext as hr,forwardRef as br,useContext as Be,useEffect as it,useImperativeHandle as Rr,useRef as ge,useState as vr}from"react";import{createDiagram as Dr}from"@visuallyjs/browser-ui";var U=hr(null);function lt(e){return ee(e)}function Tl(e){let n=ge(null),t=lt(n);return Pe.createElement(U.Provider,{value:t},e.children||[])}function ne(){let e=Be(U),[n,t]=vr(null);return it(()=>{if(e){let o=a=>{t(a)};e.ref().current?t(e.ref().current):e.listen(o)}},[e]),n}var _l=br((e,n)=>{let t=ge(null),o=ge(!1),a,i,l=Be(U);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};Rr(n,()=>s),it(()=>{o.current||(o.current=!0,a.current=Dr(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 Pe.createElement("div",{ref:t,className:p,style:f},Pe.createElement(_.Provider,{value:r},Pe.createElement(U.Provider,{value:l},e.children)))});import Tr,{createContext as _r,useContext as Oe,useEffect as je,useMemo as Nr,useState as Ar}from"react";var oe=_r(void 0);function Jl(e){let n=Nr(()=>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]),Tr.createElement(oe.Provider,{value:n},e.children||[])}function st(){let e=Oe(oe),n=Oe(_),t=Oe(W),o=Oe(U),[a,i]=Ar(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}from"@visuallyjs/browser-ui";function wr(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=>{wr(a,t)}})}function he(e,n,t,o){return ct.createElement(Ve,{ns:e,model:n,ui:t.current,childProps:o,cb:a=>{Vr(a,t)}})}function Vr(e,n){if(e.hydrated!==!0){let t=dt(e.obj)?we:Ae;e.domElement.firstElementChild&&ut(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 ae,{forwardRef as Mr,useContext as pt,useEffect as mt,useImperativeHandle as Ir,useRef as ie,useState as ft}from"react";import*as Ue from"react-dom";import{ELEMENT_DIV as Et,ELEMENT_SVG as Br,ElementTypes as jr,EVENT_GRAPH_CLEARED as Ur,EVENT_GROUP_REMOVED as Gr,EVENT_GROUP_UPDATED as Lr,EVENT_NODE_REMOVED as kr,EVENT_NODE_UPDATED as Fr,extend as gt,isGroup as Hr,renderSurface as zr,CLASS_DEFAULT_NODE as Wr,CLASS_DEFAULT_GROUP as Jr,OVERLAY_TYPE_CUSTOM as $r,EVENT_EDGE_REMOVED as Zr,EVENT_EDGE_UPDATED as Xr,uuid as Yr,partition as Kr,$svgNode as qr,EVENT_DATA_LOAD_START as Qr,EVENT_DATA_LOAD_END as en}from"@visuallyjs/browser-ui";var Ws=Mr((e,n)=>{let t=ie(!1),o=ie(!1),a=pt(oe),i=ie(null),l=ie(null),r=ie(a),s,p=pt(_);p==null?(s=ie(null),p=Ee(s)):s=p.ref();let[f,m]=ft([]),[d,h]=ft([]),x=[],y=[];function A(){t.current===!1&&m(x.slice())}function w(){t.current===!1&&h(y.slice())}let B={getSurface:()=>s.current,getModel:()=>r.current};Ir(n,()=>B),mt(()=>{var b;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,r.current.bind(Qr,()=>{t.current=!0}),r.current.bind(en,()=>{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,O,R,E,S,P,I)=>{let[v,T]=S.component||S.jsx?[S,null]:Hr(P)?[Object.assign(Object.assign({},S),{jsx:V=>ae.createElement(ae.Fragment,null,V.obj.data.label)}),Jr]:[Object.assign(Object.assign({},S),{jsx:V=>ae.createElement(ae.Fragment,null,V.obj.data.label)}),Wr],M=E.containerType===jr.HTML?document.createElement(Et):qr(Br);l.current.appendChild(M),T!=null&&E.$addClassToElement(M,T);let re={data:u,model:O,ui:E,componentId:P.getFullId(),obj:P,props:e.childProps,element:M,eventInfo:I};x.push({data:u,def:v,payload:re,domElement:M,key:P.id,obj:P,hydrated:!1}),A()},F=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,O,R)=>{},render:G,rerender:(c,u,O,R,E,S,P,I,v)=>{let T=Kr(x,M=>M.obj!==P);x=T.left,A(),G(c,u,O,R,E,S,P,I),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(O=>{if(O.jsx!=null){let R=O;return{type:$r,options:{minZoom:R.minZoom,maxZoom:R.maxZoom,create:S=>{let P=document.createElement(Et);P.className=xe;let I={data:S.edge.data,model:r.current,ui:z,componentId:S.edge.getFullId(),obj:S.edge,props:e.childProps,element:P};return y.push({def:{jsx:O.jsx},data:S.edge.data,obj:S.edge,payload:I,domElement:P,key:Yr(),hydrated:!1}),w(),P}}}}else return O}))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions,selection:e.selection}),z=zr(r.current,i.current,Y,K);p.set(z),e.surfaceId!=null&&et(e.surfaceId,B);let J=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=gt(u.originalData,u.updates)),E},R=x.find(E=>E.key===c);R!=null&&(R.data=O(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=gt(u.originalData,u.updates)),E},R=y.find(E=>E.obj.id===c);R!=null&&(R.data=O(),w())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),w()};r.current.bind(Fr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(Lr,c=>{J(c.vertex.getFullId(),c)}),r.current.bind(kr,c=>{q(c.node.id)}),r.current.bind(Gr,c=>{q(c.group.id)}),r.current.bind(Zr,c=>{me(c.edge.id)}),r.current.bind(Xr,c=>{pe(c.edge.id,c)}),r.current.bind(Ur,()=>{x=[],A(),y=[],w()})}}),mt(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(r.current.clear(),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 ae.createElement("div",{ref:i,className:k,style:D},f.map(b=>Ue.createPortal(he(b,r.current,s,e.childProps),b.domElement,b.key)),d.map(b=>Ue.createPortal(Se(b,r.current,s,e.childProps),b.domElement,b.key)),ae.createElement(_.Provider,{value:p},e.children))});import tn,{useEffect as rn,useMemo as nn,useRef as Ge,useState as Ct}from"react";import{PopupHandler as on,CLASS_SURFACE_POPUP as an}from"@visuallyjs/browser-ui";function ln(e){let n=j(),t=Ge(null),o=Ge(!1),a=Ge(null),[i,l]=Ct(null),[r,s]=Ct(0),p=nn(()=>i==null?"none":"block",[i]);function f(d){l(d),s(h=>h+1)}rn(()=>{!o.current&&n&&(o.current=!0,a.current=new on(e.selector,t.current,n,d=>f(d),e.anchor))});function m(){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,()=>m()))}import Ce from"react";import{INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS as sn}from"@visuallyjs/browser-ui";function lc(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 xt}from"react";import{CLASS_COLOR_PICKER as dn,CLASS_COLOR_PICKER_SWATCH as pn,CLASS_COLOR_PICKER_SWATCHES as mn,EVENT_CONTEXT_UPDATE as yt,EVENT_CHANGE as Le,INSPECTOR_CONTEXT_RECENT_COLORS as Re}from"@visuallyjs/browser-ui";function Pt(e){let n=e.maxColors||10,t=xt(null),o=xt(!1),a=$(),[i,l]=un(a.ensureContext(Re,()=>[]));function r(d){let h=a.ensureContext(Re,()=>[]);if(d=d.toUpperCase(),!(h.find(y=>y.toUpperCase()===d)!=null)){let y=h.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 f=d=>{d.key===Re&&l(d.value.slice())};function m(){let d=a.getValue(e.propertyName);d!=null&&t.current&&r(d)}return cn(()=>(a.bind(yt,f),a.bind(Le,m),o.current||(o.current=!0,t.current.addEventListener(Le,s)),setTimeout(m),()=>{a.unbind(yt,f),a.unbind(Le,m)})),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 Ot}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 Ot(e)?e:e.label}function ke(e){return Ot(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 Pc({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,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"},Cn(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:le(m)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:ke(m)})," ",le(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:le(m)},g.createElement("input",{type:"radio",name:r.id,"vjs-att":r.id,value:ke(m)})," ",le(m)))):g.createElement("select",{"vjs-att":r.id},r.values.map(m=>g.createElement("option",{key:le(m),value:ke(m)},le(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(Pt,{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 St,useEffect as ht,useImperativeHandle as yn,useRef as ce,useState as bt}from"react";import*as Fe from"react-dom";import{ELEMENT_DIV as Rt,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 vt,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,EVENT_DATA_LOAD_START as jn,EVENT_DATA_LOAD_END as Un}from"@visuallyjs/browser-ui";var ou=xn((e,n)=>{let t=ce(!1),o=ce(!1),a=St(oe),i=ce(null),l=ce(null),r=ce(null),s,p=St(W);p==null?(s=ce(null),p=Ie(s)):s=p.ref();let[f,m]=bt([]),[d,h]=bt([]),x=[],y=[];function A(){t.current===!1&&m(x.slice())}function w(){t.current===!1&&h(y.slice())}let B={getPaper:()=>s.current,getModel:()=>r.current};yn(n,()=>B),ht(()=>{var b;if(!o.current){o.current=!0,e.model!=null?r.current=e.model:a==null?r.current=new Q(e.modelOptions||{}):r.current=a,r.current.bind(jn,()=>{t.current=!0}),r.current.bind(Un,()=>{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,O,R,E,S,P,I)=>{let[v,T]=S.component||S.jsx?[S,null]:Dn(P)?[Object.assign(Object.assign({},S),{jsx:V=>se.createElement(se.Fragment,null,V.obj.data.label)}),Nn]:[Object.assign(Object.assign({},S),{jsx:V=>se.createElement(se.Fragment,null,V.obj.data.label)}),_n],M=E.containerType===On.HTML?document.createElement(Rt):Bn(Pn);l.current.appendChild(M),T!=null&&E.$addClassToElement(M,T);let re={data:u,model:O,ui:E,componentId:P.getFullId(),obj:P,props:e.childProps,element:M,eventInfo:I};x.push({data:u,def:v,payload:re,domElement:M,key:P.id,obj:P,hydrated:!1}),A()},F=(c,u)=>{u.parentNode&&u.parentNode.removeChild(u)},Y={asynchronous:!0,reactive:!0,usesWrapperElement:!0,update:(c,u,O,R)=>{},render:G,rerender:(c,u,O,R,E,S,P,I,v)=>{let T=In(x,M=>M.obj!==P);x=T.left,A(),G(c,u,O,R,E,S,P,I),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(O=>{if(O.jsx!=null){let R=O;return{minZoom:R.minZoom,maxZoom:R.maxZoom,type:An,options:{create:S=>{let P=document.createElement(Rt);P.className=xe;let I={data:S.edge.data,model:r.current,ui:z,componentId:S.edge.getFullId(),obj:S.edge,props:e.childProps,element:P};return y.push({def:{jsx:O.jsx},data:S.edge.data,obj:S.edge,payload:I,domElement:P,key:Mn(),hydrated:!1}),w(),P}}}}else return O}))}let K=Object.assign(e.renderOptions||{},{view:e.viewOptions}),z=Tn(r.current,i.current,Y,K);p.set(z);let J=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=vt(u.originalData,u.updates)),E},R=x.find(E=>E.key===c);R!=null&&(R.data=O(),A())},q=c=>{x=x.filter(u=>u.payload.componentId!==c),A()},pe=(c,u)=>{let O=()=>{let E={};return(u.originalData||u.updates)&&(E=vt(u.originalData,u.updates)),E},R=y.find(E=>E.obj.id===c);R!=null&&(R.data=O(),w())},me=c=>{y=y.filter(u=>u.payload.obj.id!==c),w()};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=[],w()})}}),ht(()=>{o.current&&r.current!=null&&s.current!=null&&t.current===!1&&(e.data!=null||e.url!=null)&&(r.current.clear(),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 se.createElement("div",{ref:i,className:k,style:D},f.map(b=>Fe.createPortal(he(b,r.current,s,e.childProps),b.domElement,b.key)),d.map(b=>Fe.createPortal(Se(b,r.current,s,e.childProps),b.domElement,b.key)),se.createElement(W.Provider,{value:p},e.children))});import{MiniviewPlugin as Gn,Surface as Ln}from"@visuallyjs/browser-ui";import kn,{forwardRef as Fn,useEffect as Hn,useImperativeHandle as zn,useRef as Dt}from"react";var mu=Fn((e,n)=>{let t=j(),o=ne(),a=Dt(!1),i=Dt(null),l;zn(n,()=>({toggleCollapsed:()=>l==null?void 0:l.toggleCollapsed()}));function r(s){s.addPlugin({type:Gn.type,options:{container:i.current,elementFilter:e.elementFilter,typeFunction:e.typeFunction,activeTracking:e.activeTracking,clickToCenter:e.clickToCenter,showLasso:e.showLasso,trackSelection:e.trackSelection}})}return Hn(()=>{a.current||(t!=null?(a.current=!0,r(t)):o!=null&&o.$ui instanceof Ln&&(a.current=!0,r(o.$ui)))},[t,o]),kn.createElement("div",{ref:i,className:`${e.className||""}`})});import{Inspector as Wn,log as Jn,Surface as $n}from"@visuallyjs/browser-ui";import ue,{forwardRef as Zn,useContext as De,useEffect as Tt,useImperativeHandle as Xn,useRef as He,useState as ze}from"react";var Tu=Zn((e,n)=>{let t=De(_),o=De(U),a=De(W),i,l=De(ye);l==null&&(i=He(null),l=nt(i));let[r,s]=ze(null),[p,f]=ze(0),[m,d]=ze(null),h=He(!1),x=He(null),y=e.className||"";Tt(()=>{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 B(D){i.current=new Wn({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 Xn(n,()=>k),Tt(()=>{h.current||(h.current=!0,t!=null?t.listen(B):a!=null?a.listen(B):o!=null?o.listen(D=>{D.$ui instanceof $n&&B(D.$ui)}):Jn("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 Nu="group:added",Au="group:member:added",wu="group:member:removed",Vu="group:removed",Mu="dataLoadStart",Iu="dataAppendStart",Bu="dataLoadEnd",ju="dataAppendEnd",Uu="dataUpdated",Gu="graphClearStart",Lu="graphCleared",ku="graphChanged",Fu="group:updated",Hu="node:updated",zu="port:updated",Wu="edge:updated",Ju="edge:added",$u="node:added",Zu="edge:removed",Xu="node:removed",Yu="port:added",Ku="port:removed",qu="edge:target",Qu="edge:source",_t="select",Nt="deselect",At="selection:cleared",ed="edge:geometry",td="edge:pathEdited",rd="edge:dragStart",nd="edge:drag",od="edge:dragEnd",ad="edge:dragAbort",id="edge:typeChanged",ld="node:typeChanged",sd="port:typeChanged",cd="group:typeChanged",ud="group:move:start",dd="group:move",pd="group:move:end",md="internal:group:sizeChanged",fd="internal:group:sizeChangedRedo",Ed="internal:group:sizeChangedUndo",gd="internal:edge:redraw",Cd="renderer:added",xd="node:move:start",yd="node:move",Pd="node:move:end",Od="node:move:abort",Sd="undoredo:update",hd="undo",bd="redo",Rd="destroy";import C,{useEffect as Yn,useRef as Te,useState as L}from"react";import{EVENT_UNDOREDO_UPDATE as Kn,FALSE as _e,LASSO_PATH as qn,LASSO_VIEW_BOX as Qn,LassoPlugin as eo,PAN_PATH as to,PAN_VIEW_BOX as ro,Surface as no,SURFACE_MODE_PAN as wt,SURFACE_MODE_SELECT as Vt,TRUE as Mt,UNDO_PATH as oo,UNDO_VIEW_BOX as ao,REDO_PATH as io,REDO_VIEW_BOX as lo,ZOOM_TO_FIT_PATH as so,ZOOM_TO_FIT_VIEW_BOX as co,EVENT_SURFACE_MODE_CHANGED as uo,ZOOM_IN_OUT_VIEW_BOX as It,ZOOM_IN_PATH as po,ZOOM_OUT_PATH as mo,RESET_SELECTION_PATH as fo,RESET_SELECTION_VIEW_BOX as Eo,CLEAR_PATH as go,CLEAR_VIEW_BOX as Co,CLASS_CONTROLS_RESET_SELECTION as xo,supportsPathEditing as yo}from"@visuallyjs/browser-ui";var Bt="can-undo",jt="can-redo",We="vjs-selected-mode",Ut="vjs-controls-has-selection";function Gd(e){let n="Clear selection",t=j(),o=ne(),[a,i]=L("row"),[l,r]=L(!1),[s,p]=L(!1),f=Te(null),m=Te(!1),d=Te(null),[h,x]=L("Clear dataset?"),y=Te(null),[A,w]=L(!0),[B,k]=L(!1),[D,b]=L(!0),[G,F]=L(!0),[Y,H]=L([]),[K,z]=L([]);function J(v){d.current=v,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(V=>V.mode!=null);H(T);let M=(e.buttons||[]).filter(V=>V.mode==null);z(M),v.bind(uo,V=>{v.removeClass(v.$getSelector(f.current,"[data-mode]"),We),v.addClass(v.$getSelector(f.current,"[data-mode='"+V+"']"),We)}),v.model.bind(Kn,V=>{f.current.setAttribute(Bt,V.undoCount>0?Mt:_e),f.current.setAttribute(jt,V.redoCount>0?Mt:_e)}),v.model.bind(_t,P),v.model.bind(Nt,P),v.model.bind(At,P);let re=v.getPlugin(eo.type);r(re!=null),p(re!=null||T.length>0),f.current.setAttribute(Bt,_e),f.current.setAttribute(jt,_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(wt)}function u(){d.current.setMode(Vt)}function O(){d.current.model.clearSelection(),yo(d.current)&&d.current.stopEditingPath()}function R(){y.current!=null?y.current(()=>d.current.model.clear()):window.confirm(h)&&d.current.model.clear()}function E(){d.current.model.undo()}function S(){d.current.model.redo()}let P=()=>{d.current.model.getSelection().isEmpty()?f.current.removeAttribute(Ut):f.current.setAttribute(Ut,"true")};Yn(()=>{m.current===!1&&(t!=null?(m.current=!0,J(t)):o!=null&&o.$ui instanceof no&&(m.current=!0,J(o.$ui)))},[t,o]);let I=e.style||{};return C.createElement("div",{style:I,ref:f,className:`vjs-controls ${e.className||""}`,"data-vjs-orientation":a},s&&C.createElement("i",{className:"vjs-pan-mode "+We,"data-mode":wt,title:"Pan Mode",onClick:()=>c()},C.createElement("svg",{fill:"none",viewBox:ro,stroke:"currentColor"},C.createElement("path",{d:to}))),l&&C.createElement("i",{className:"vjs-select-mode","data-mode":Vt,title:"Select Mode",onClick:()=>u()},C.createElement("svg",{fill:"currentColor",viewBox:Qn,stroke:"currentColor"},C.createElement("path",{d:qn}))),Y.map(v=>C.createElement("i",{className:v.class,title:v.title,onClick:T=>v.handler(T,v.id)})),A&&C.createElement("i",{className:"vjs-zoom-to-fit","data-reset":"true",title:"Zoom To Fit",onClick:()=>q()},C.createElement("svg",{viewBox:co,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:so}))),B&&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:It,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:po}))),C.createElement("i",{className:"vjs-zoom-out","data-zoom-out":"true",title:"Zoom Out",onClick:()=>me()},C.createElement("svg",{viewBox:It,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:mo})))),D&&C.createElement("i",{className:"vjs-undo","data-undo":"true",title:"Undo last action",onClick:()=>E()},C.createElement("svg",{viewBox:ao,stroke:"currentColor",fill:"none"},C.createElement("path",{d:oo,strokeWidth:"2"}))),D&&C.createElement("i",{className:"vjs-redo","data-redo":"true",title:"Redo last action",onClick:()=>S()},C.createElement("svg",{viewBox:lo,stroke:"currentColor",fill:"none"},C.createElement("path",{d:io,strokeWidth:"2"}))),C.createElement("i",{className:xo,title:n,onClick:()=>O()},C.createElement("svg",{viewBox:Eo,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:fo}))),G&&C.createElement("i",{className:"vjs-clear-dataset",title:h,onClick:()=>R()},C.createElement("svg",{viewBox:Co,stroke:"currentColor",fill:"currentColor"},C.createElement("path",{d:go}))),K.map(v=>C.createElement("i",{className:v.class,title:v.title,onClick:T=>v.handler(T,v.id)})))}import Z,{useEffect as Po,useRef as Gt,useState as X}from"react";import{SvgExportUI as Oo,ImageExportUI as Lt,Surface as So,CLASS_CONTROLS as ho,CLASS_EXPORT_CONTROLS as bo}from"@visuallyjs/browser-ui";function np(e){let n=Gt(!1),t=Gt(null),o=j(),a=ne(),[i,l]=X(!0),[r,s]=X("Export :"),[p,f]=X(null),[m,d]=X(null),[h,x]=X(null),[y,A]=X(!0),[w,B]=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&&B(e.allowPngExport),e.allowSvgExport!=null&&A(e.allowSvgExport)}function G(){new Oo(t.current).export(m)}function F(){new Lt(t.current).export(h)}function Y(){new Lt(t.current).export(Object.assign(h||{},{type:"image/jpeg"}))}return Po(()=>{n.current===!1&&(o!=null?(n.current=!0,b(o)):a!=null&&a.$ui instanceof So&&(n.current=!0,b(a.$ui)))},[o,a]),Z.createElement("div",{className:`${ho} ${bo}`},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 Ro,{forwardRef as vo,useContext as Do,useEffect as To,useRef as Je}from"react";import{log as kt,ShapePalette as _o}from"@visuallyjs/browser-ui";var fp=vo((e,n)=>{let t=Je(!1),o=Je(null),a=Do(_),i=Je(null),l=e.className||"";function r(s){s.getShapeLibrary()!=null?i.current=new _o(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}):kt("WARN: no shapeLibrary provided in props and UI has no shape library. Cannot instantiate ShapePaletteComponent")}return To(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):kt("ShapePaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Ro.createElement("div",{ref:o,className:l})});import No,{useEffect as Ao,useRef as wo}from"react";import{CLASS_SHAPE as Vo,convertToMultilineText as Mo,DEFAULT_LABEL_FILL_RATIO as Io}from"@visuallyjs/browser-ui";var Bo=120,jo=90;function hp(e){let n=wo(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||Bo}function l(){return e.ctx.obj.data.height||jo}function r(){return e.ctx.obj.data.color||e.ctx.obj.data.outline||"#000000"}function s(){return e.labelProperty||"label"}return Ao(()=>{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&&Mo(d,p[s()]||"",i()*(e.labelFillRatio||Io),e.labelPosition)}}),No.createElement("svg",{className:Vo,ref:n,strokeWidth:t(),fill:o(),stroke:a(),preserveAspectRatio:"none",viewBox:"0 0 "+i()+" "+l()})}import Uo,{forwardRef as Go,useContext as Lo,useEffect as ko,useRef as $e}from"react";import{log as Fo,Palette as Ho,defaultDataGenerator as zo}from"@visuallyjs/browser-ui";var Gp=Go((e,n)=>{let t=$e(!1),o=$e(null),a=Lo(_),i=$e(null),l=e.className||"";function r(s){let p={selector:e.selector,source:o.current,dataGenerator:f=>e.dataGenerator?e.dataGenerator(f):zo(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 Ho(s,p)}return ko(()=>{t.current||(t.current=!0,a!=null?a.listen(s=>r(s)):e.surface!=null?r(e.surface):Fo("PaletteComponent cannot start: no SurfaceContext from a provider found, and no Surface provided in props"))}),Uo.createElement("div",{className:l,ref:o},e.children)});import Wo,{forwardRef as Jo,useContext as $o,useEffect as Zo,useRef as Ze}from"react";import{log as Xo,DiagramPalette as Yo}from"@visuallyjs/browser-ui";var Qp=Jo((e,n)=>{let t=Ze(!1),o=Ze(null),a=$o(U),i=Ze(null),l=e.className||"";function r(p){i.current=new Yo(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})}Zo(()=>{t.current||(t.current=!0,a!=null?a.listen(p=>r(p)):e.diagram!=null?r(e.diagram):Xo("DiagramPaletteComponent cannot start: no DiagramContext from a provider found, and no Diagram provided in props"))});let s=e.style||{};return Wo.createElement("div",{ref:o,className:l,style:s})});import Ko,{useContext as Ft,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=Ft(_),p=Ft(U);function f(h){let x=l.current;return Object.assign({dataSource:h,dataSourceFilter:e.dataSourceFilter},e.options)}function m(h){var y;(y=a.current)==null||y.destroy(),i.current=h;let x=f(h);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 h=f();a.current=l.current.createChart(n.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 te(()=>{t.current||(t.current=!0,e.data==null&&e.url==null&&s!=null?s.listen(h=>{m(h.model)}):e.data==null&&e.url==null&&p!=null?p.listen(h=>{m(h.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?m(i.current):s==null&&p==null&&d())},[e.options])),Ko.createElement("div",{ref:n,style:r,className:`${e.className||""}`})}import{ColumnChart as qo}from"@visuallyjs/browser-ui";function Cm(e){let n=Object.assign({createChart:(t,o)=>new qo(t,o)},e);return N(n)}import{BarChart as Qo}from"@visuallyjs/browser-ui";function Rm(e){let n=Object.assign({createChart:(t,o)=>new Qo(t,o)},e);return N(n)}import{CategoryValueChart as ea}from"@visuallyjs/browser-ui";function Vm(e){let n=Object.assign({createChart:(t,o)=>new ea(t,o)},e);return N(n)}import{LineChart as ta}from"@visuallyjs/browser-ui";function km(e){let n=Object.assign({createChart:(t,o)=>new ta(t,o)},e);return N(n)}import{AreaChart as ra}from"@visuallyjs/browser-ui";function Xm(e){let n=Object.assign({createChart:(t,o)=>new ra(t,o)},e);return N(n)}import{PieChart as na}from"@visuallyjs/browser-ui";function nf(e){let n=Object.assign({createChart:(t,o)=>new na(t,o)},e);return N(n)}import{ScatterChart as oa}from"@visuallyjs/browser-ui";function pf(e){let n=Object.assign({createChart:(t,o)=>new oa(t,o)},e);return N(n)}import{BubbleChart as aa}from"@visuallyjs/browser-ui";function Pf(e){let n=Object.assign({createChart:(t,o)=>new aa(t,o)},e);return N(n)}import{GaugeChart as ia}from"@visuallyjs/browser-ui";function Tf(e){let n=Object.assign({createChart:(t,o)=>new ia(t,o)},e);return N(n)}import{SankeyChart as la}from"@visuallyjs/browser-ui";function jf(e){let n=Object.assign({createChart:(t,o)=>new la(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 sa}from"@visuallyjs/browser-ui";import ca,{useContext as ua,useEffect as da,useRef as Ht}from"react";function zt(e){let n=Ht(!1),t=Ht(null),o=ua(_),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 da(()=>{n.current||(n.current=!0,o!=null?o.listen(l=>i(l)):sa("Decorator cannot mount: no SurfaceContext from a provider found"))}),ca.createElement("div",{ref:t},e.children)}import{log as pa,BackgroundPlugin as ma,GeneratedGridBackground as fa,TiledBackground as Ea,SimpleBackground as ga}from"@visuallyjs/browser-ui";import Wt,{useEffect as Ca,useRef as xa}from"react";function Xe(e){let n=xa(!1),t=j();return Ca(()=>{if(t!=null&&!n.current){n.current=!0;try{t.addPlugin({type:ma.type,options:e})}catch(o){pa(`WARN: BackgroundComponent could not mount background ${o}`)}}},[t]),Wt.createElement(Wt.Fragment,null)}function fE(e){return Xe(Ne({type:fa.type},e))}function EE(e){return Xe({type:ga.type,url:e.url})}function gE(e){return Xe(Ne({type:Ea.type},e))}import{useEffect as ya}from"react";import{EVENT_DATA_UPDATED as Jt,EVENT_GRAPH_CLEARED as $t}from"@visuallyjs/browser-ui";function bE(e){let n=st();ya(()=>{if(n!=null){let t=()=>e(n);return n.bind(Jt,t),n.bind($t,t),t(),()=>{n.unbind(Jt,t),n.unbind($t,t)}}},[n])}import{useState as Zt,useEffect as Xt}from"react";import{EVENT_ZOOM as Yt}from"@visuallyjs/browser-ui";function wE(e){let n=j(),t=at(),[o,a]=Zt(e),[i,l]=Zt(()=>(o==null?void 0:o.getZoom())||1);return Xt(()=>{if(o!=null){let r=s=>{l(s.zoom)};return o.bind(Yt,r),l(o.getZoom()),()=>{o.unbind(Yt,r)}}},[o]),Xt(()=>{n!=null&&a(n),t!=null&&a(t)},[n,t]),i}export{jt as ATTRIBUTE_CAN_REDO,Bt as ATTRIBUTE_CAN_UNDO,Xm as AreaChartComponent,Xe as BackgroundComponent,Rm as BarChartComponent,Q as BrowserUIReactModel,Pf as BubbleChartComponent,we as CLASS_REACT_GROUP,Ae as CLASS_REACT_NODE,xe as CLASS_REACT_OVERLAY,We as CLASS_SELECTED_MODE,Pt as ColorPickerComponent,Cm as ColumnChartComponent,Gd as ControlsComponent,jo as DEFAULT_SHAPE_HEIGHT,Bo as DEFAULT_SHAPE_WIDTH,zt as DecoratorComponent,_l as DiagramComponent,U as DiagramContext,Qp as DiagramPaletteComponent,Tl as DiagramProvider,lc as EdgePropertyMappingsInspector,ot as EdgeTypePickerComponent,np as ExportControlsComponent,Tf as GaugeChartComponent,fE as GridBackgroundComponent,EE as ImageBackgroundComponent,Tu as InspectorComponent,ye as InspectorContext,Ve as JSXWrapper,km as LineChartComponent,mu as MiniviewComponent,Gp as PaletteComponent,ou as PaperComponent,W as PaperContext,dl as PaperProvider,nf as PieChartComponent,jf as SankeyChartComponent,pf as ScatterChartComponent,hp as ShapeComponent,fp as ShapePaletteComponent,Pc as ShapePropertiesInspector,Ws as SurfaceComponent,_ as SurfaceContext,ln as SurfacePopup,ji as SurfaceProvider,gE as TiledImageBackgroundComponent,oe as VisuallyJsContext,Jl as VisuallyJsProvider,Vm as XYChartComponent,lt as createDiagramRef,nt as createInspectorRef,Ie as createPaperRef,ee as createRefHandler,Ee as createSurfaceRef,ba as getSurfaceComponent,rt as newInstance,et as registerSurface,ne as useDiagram,$ as useInspector,at as usePaper,j as useSurface,st as useVisuallyJsModel,bE as useVisuallyJsUpdate,wE 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};