@visuallyjs/browser-ui-vue 1.0.3 → 1.1.1

package/chart.d.ts

@@ -8,6 +8,7 @@ export declare const ColumnChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -24,6 +25,7 @@ export declare const BarChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -40,6 +42,7 @@ export declare const XYChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -56,6 +59,7 @@ export declare const PieChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -72,6 +76,7 @@ export declare const LineChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -88,6 +93,7 @@ export declare const AreaChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -104,6 +110,7 @@ export declare const ScatterChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -120,6 +127,7 @@ export declare const BubbleChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;
@@ -136,6 +144,7 @@ export declare const GaugeChartComponent: {
     name: string;
     props: any;
     watch: any;
+    /** @internal */
     mounted(): void;
     setup(): {
         service: unknown;

package/definitions.d.ts

@@ -64,7 +64,7 @@ export interface RenderOptions extends Pick<SurfaceOptions, Exclude<keyof Surfac
 /**
  * Definition of a node in the view. If you provide a `component` here, VisuallyJs will use that component to render nodes of the given type. Otherwise a default component will be used.
  */
-export interface VueNodeMapping extends Omit<NodeMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+export interface VueNodeMapping extends Omit<NodeMapping<BrowserElement>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * Component used to render this node type. If you do not supply this a default component will be used.
      */
@@ -73,7 +73,7 @@ export interface VueNodeMapping extends Omit<NodeMapping<BrowserElement>, "templ
 /**
  * Definition of a group in the view. If you provide a `component` here, VisuallyJs will use that component to render groups of the given type. Otherwise a default component will be used.
  */
-export interface VueGroupMapping extends Omit<GroupMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+export interface VueGroupMapping extends Omit<GroupMapping<BrowserElement>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * Component used to render this group type. If you do not supply this a default component will be used.
      */
@@ -82,7 +82,7 @@ export interface VueGroupMapping extends Omit<GroupMapping<BrowserElement>, "tem
 /**
  * Definition of a port in the view. This is for advanced use cases. If you provide a `component` here, VisuallyJs will use that component to render ports of the given type. Otherwise a default component will be used.
  */
-export interface VuePortMapping extends Omit<PortMapping<BrowserElement>, "template" | "templateId" | "parameters"> {
+export interface VuePortMapping extends Omit<PortMapping<BrowserElement>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * Component used to render this port type.
      *

package/index.d.ts

@@ -25,3 +25,4 @@ export * from "./surface-provider";
 export * from "./vue-wrapper";
 export * from './decorator-component';
 export * from './visuallyjs-service';
+export * from './use-zoom';

package/package.json

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

package/use-zoom.d.ts

@@ -0,0 +1,7 @@
+import { BrowserUI } from '@visuallyjs/browser-ui';
+/**
+ * Composable to track the current zoom level of a VisuallyJS UI in Vue.
+ * @param ui The UI instance provided to the component via props.
+ * @group Hooks
+ */
+export declare function useZoom(ui: BrowserUI): import("vue").Ref<number>;

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

@@ -1 +1 @@
-var Ee=Object.defineProperty,uo=Object.defineProperties,mo=Object.getOwnPropertyDescriptor,ho=Object.getOwnPropertyDescriptors,fo=Object.getOwnPropertyNames,Wt=Object.getOwnPropertySymbols;var Kt=Object.prototype.hasOwnProperty,Oo=Object.prototype.propertyIsEnumerable;var zt=(e,t,o)=>t in e?Ee(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,W=(e,t)=>{for(var o in t||(t={}))Kt.call(t,o)&&zt(e,o,t[o]);if(Wt)for(var o of Wt(t))Oo.call(t,o)&&zt(e,o,t[o]);return e},z=(e,t)=>uo(e,ho(t));var Po=(e,t)=>{for(var o in t)Ee(e,o,{get:t[o],enumerable:!0})},Co=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of fo(t))!Kt.call(e,i)&&i!==o&&Ee(e,i,{get:()=>t[i],enumerable:!(n=mo(t,i))||n.enumerable});return e};var Eo=e=>Co(Ee({},"__esModule",{value:!0}),e);var Vo={};Po(Vo,{AreaChartComponent:()=>Me,BarChartComponent:()=>xe,BaseGroupComponent:()=>Qt,BaseNodeComponent:()=>qt,BrowserUIVueModel:()=>R,BubbleChartComponent:()=>Ve,CLASS_VUE_GROUP:()=>xt,CLASS_VUE_NODE:()=>Rt,COMPONENT_AREA_CHART:()=>pe,COMPONENT_BAR_CHART:()=>ie,COMPONENT_BUBBLE_CHART:()=>de,COMPONENT_COLUMN_CHART:()=>ne,COMPONENT_CONTROLS:()=>ee,COMPONENT_DIAGRAM:()=>oe,COMPONENT_DIAGRAM_PALETTE:()=>re,COMPONENT_DIAGRAM_PROVIDER:()=>It,COMPONENT_EXPORT_CONTROLS:()=>te,COMPONENT_GAUGE_CHART:()=>ue,COMPONENT_INSPECTOR:()=>he,COMPONENT_LINE_CHART:()=>ae,COMPONENT_MINIVIEW:()=>Z,COMPONENT_PALETTE:()=>Q,COMPONENT_PIE_CHART:()=>le,COMPONENT_SANKEY_CHART:()=>me,COMPONENT_SCATTER_CHART:()=>ce,COMPONENT_SURFACE:()=>q,COMPONENT_SURFACE_PROVIDER:()=>Dt,COMPONENT_XY_CHART:()=>se,ColorPickerComponent:()=>Ht,ColumnChartComponent:()=>Re,ControlsComponent:()=>Ut,DEFAULT_SHAPE_HEIGHT:()=>Nt,DEFAULT_SHAPE_WIDTH:()=>At,DEFAULT_VUE_SURFACE_ID:()=>Ze,DecoratorComponent:()=>Ke,DiagramComponent:()=>jt,DiagramProvider:()=>Je,EVENT_VERTEX_UPDATED:()=>Zt,EVENT_VERTICES_RENDERED:()=>Xt,EdgeTypePickerComponent:()=>ze,ExportControlsComponent:()=>Gt,GaugeChartComponent:()=>we,InspectorComponent:()=>$e,InspectorGetterSymbol:()=>j,InspectorSetterSymbol:()=>ao,LineChartComponent:()=>ve,MiniviewComponent:()=>Ft,PROP_ACTIVE_TRACKING:()=>et,PROP_ALLOW_CLICK_TO_ADD:()=>Tt,PROP_ALLOW_DROP_ON_CANVAS:()=>ht,PROP_ALLOW_DROP_ON_EDGE:()=>mt,PROP_ALLOW_DROP_ON_GROUP:()=>ft,PROP_ALLOW_DROP_ON_NODE:()=>Ot,PROP_CANVAS_DROP_FILTER:()=>gt,PROP_CLASS_NAME:()=>M,PROP_CLICK_TO_ADD_ONLY:()=>_t,PROP_CLICK_TO_CENTER:()=>Qe,PROP_CSV_DATA:()=>st,PROP_DATA:()=>b,PROP_DATA_GENERATOR:()=>ct,PROP_DATA_SOURCE_FILTER:()=>Te,PROP_DRAG_SIZE:()=>St,PROP_GROUP_IDENTIFIER:()=>ut,PROP_ID:()=>To,PROP_IGNORE_DROP_ON_NODE:()=>Pt,PROP_INTERACTIVE:()=>nt,PROP_JSON_DATA:()=>at,PROP_MODE:()=>tt,PROP_MODEL_OPTIONS:()=>K,PROP_ON_VERTEX_ADDED:()=>Ct,PROP_OPTIONS:()=>B,PROP_PIVOT:()=>it,PROP_RENDER_OPTIONS:()=>ot,PROP_SELECTOR:()=>lt,PROP_SELECT_AFTER_ADD:()=>Et,PROP_SURFACE_ID:()=>g,PROP_TYPE_FUNCTION:()=>qe,PROP_TYPE_GENERATOR:()=>dt,PROP_URL:()=>V,PROP_USE_MODEL:()=>pt,PROP_VIEW_OPTIONS:()=>rt,PaletteComponent:()=>kt,PieChartComponent:()=>Ie,SankeyChartComponent:()=>Le,ScatterChartComponent:()=>be,ShapeComponent:()=>Fe,ShapePaletteComponent:()=>He,SurfaceComponent:()=>Lt,SurfaceProvider:()=>Ue,TAG_COLOR_PICKER:()=>yt,TAG_DECORATOR:()=>vt,TAG_EDGE_TYPE_PICKER:()=>X,TAG_SHAPE:()=>J,TAG_SHAPE_PALETTE:()=>Y,VisuallyJsPlugin:()=>bo,VisuallyJsService:()=>A,VisuallyJsServiceKey:()=>s,XYChartComponent:()=>De,addSurface:()=>wt,bindToDevLifecycle:()=>No,doProvideInspector:()=>po,newInstance:()=>_o});module.exports=Eo(Vo);var _e=require("@visuallyjs/browser-ui"),R=class extends _e.BrowserUIModel{render(t,o){return(0,_e.log)("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function _o(e){return e=e||{},new R(e)}var Ze="surfaceId",qe="typeFunction",Qe="clickToCenter",et="activeTracking",g="surfaceId",M="className",b="data",tt="mode",B="options",ot="renderOptions",K="modelOptions",rt="viewOptions",V="url",nt="interactive",it="pivot",Te="dataSourceFilter",st="csvData",at="jsonData",pt="useModel",To="id",lt="selector",ct="dataGenerator",dt="typeGenerator",ut="groupIdentifier",mt="allowDropOnEdge",ht="allowDropOnCanvas",ft="allowDropOnGroup",Ot="allowDropOnNode",Pt="ignoreDropOnNode",Ct="onVertexAdded",Et="selectAfterAdd",_t="clickToAddOnly",Tt="allowClickToAdd",St="dragSize",gt="canvasDropFilter",J="Shape",Y="ShapePalette",At=120,Nt=90,X="EdgeTypePickerComponent",yt="ColorPickerComponent",Rt="vjs-vue-node",xt="vjs-vue-group",Z="MiniviewComponent",q="SurfaceComponent",Dt="SurfaceProvider",It="DiagramProvider",Q="PaletteComponent",ee="ControlsComponent",te="ExportControlsComponent",oe="DiagramComponent",re="DiagramPaletteComponent",ne="ColumnChartComponent",ie="BarChartComponent",se="XYChartComponent",ae="LineChartComponent",pe="AreaChartComponent",le="PieChartComponent",ce="ScatterChartComponent",de="BubbleChartComponent",ue="GaugeChartComponent",me="SankeyChartComponent",he="InspectorComponent",vt="Decorator";var U=require("vue"),c=require("@visuallyjs/browser-ui"),Mt=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new c.OptimisticEventGenerator}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(Xt)}vertexHasUpdated(t){this.eventManager.fire(Zt,t)}},Xt="vertices:rendered",Zt="vertex:updated",bt=new Map;function Se(e){return bt.has(e)||bt.set(e,new Mt),bt.get(e)}function So(e,t){Se(e).vertexHasRendered(t)}function go(e,t){Se(e).vertexHasUpdated(t)}function Ao(e,t){Se(e).vertexWillRender(t)}function No(e,t,o){Se(e).eventManager.bind(t,o)}var Jt={props:{data:Object,model:R,obj:c.Vertex,ui:c.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=(0,c.isGroup)(e.obj)?xt:Rt;e.el.firstElementChild&&(0,c.addClass)(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),So(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),go(this.ui.id,this.obj)}},qt={mixins:[Jt],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},Qt={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Jt]},Vt=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Yt=(e,t,o,n,i,a,l,f,P)=>{let O=l.component!=null,D=(0,c.isGroup)(f),I=[];O||I.push(D?c.CLASS_DEFAULT_GROUP:c.CLASS_DEFAULT_NODE);let T=O?l.component:{render(S){return S.data.label||""}};if(T){let S=document.createElement(c.ELEMENT_DIV);(0,c.updateClasses)(S,I),T.mixins==null&&(T.mixins=[]);let v=D?Qt:qt;T.mixins.find(Ce=>Ce===v)||T.mixins.push(v),Ao(a.id,f);let Pe={data:o,model:(0,U.markRaw)(n),ui:(0,U.markRaw)(a),obj:f,el:S,def:(0,U.markRaw)(l),eventInfo:P==null?null:(0,U.markRaw)(P)};if(l.inject)for(let Ce in l.inject){let Xe=l.inject[Ce],co=typeof Xe=="function"?Xe(f,n):Xe;Pe[Ce]=co}e.push({component:(0,U.markRaw)(T),el:S,o:f.getFullId(),props:Pe})}};function wt(e,t,o,n,i,a){let l={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(P,O,D,I)=>{},render:(P,O,D,I,T,S,v,Oe)=>Yt(n,P,O,D,I,T,S,v,Oe),cleanupVertex:Vt,cleanupPort:Vt,rerender:(P,O,D,I,T,S,v,Oe,Pe)=>{Vt(v.id,Pe),Yt(n,P,O,D,I,T,S,v,Oe)}},f=(0,c.extend)(i||{},{view:a||{},id:t});return(0,c.renderSurface)(e,o,l,f)}var w=require("@visuallyjs/browser-ui"),s=Symbol.for("visuallyjs-service"),A=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.p=[]}getSurface(t){this.e(this.s,t,this.l)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.p,t,this.u)}getModel(t){this.e(this.i,t,this.r)}getModelDirect(){return this.r}e(t,o,n){if(n!=null)try{o(n)}catch(i){(0,w.log)(`WARN: could not dispatch ${i}`)}else t.push(o)}setSurface(t){this.l=t,this.n(t.model),this.t(this.s,t)}setDiagram(t){this.c=t,this.n(t.model),t.$ui instanceof w.Surface?this.setSurface(t.$ui):t.$ui instanceof w.Paper&&this.setPaper(t.$ui),this.t(this.a,t)}setPaper(t){this.u=t,this.n(t.model),this.t(this.p,t)}n(t){this.r=t,this.t(this.i,t)}t(t,o){t.forEach(n=>{try{n(o)}catch(i){(0,w.log)(`WARN: could not flush all queue entries ${i}`)}})}};var x=require("vue"),h=require("@visuallyjs/browser-ui"),Lt={setup(e){return{service:(0,x.inject)(s),surfaceId:e.surfaceId||Ze}},name:q,props:{[b]:{type:Object},[ot]:{type:Object},[K]:{type:Object},[rt]:{type:Object},[V]:{type:String},[g]:{type:String}},data:function(){return{vertices:[]}},mounted(){let e=this,t=new R(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data}),this.model=t,this.surface=wt(t,this.surfaceId,o,this.vertices,(0,h.clone)(this.renderOptions||{}),(0,h.clone)(this.viewOptions||{})),this.service.setSurface(this.surface);let n=(a,l)=>{let f=()=>{let O={};return l.originalData||l.updates?O=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(O,l.newData),O},P=this.vertices.find(O=>O.o===a);P!=null&&(P.props.data=f())},i=a=>{let l=this.vertices.findIndex(f=>f.o===a);l!==-1&&this.vertices.splice(l,1)};this.model.bind(h.EVENT_NODE_UPDATED,a=>{n(a.vertex.getFullId(),a)}),this.model.bind(h.EVENT_GROUP_UPDATED,a=>{n(a.vertex.getFullId(),a)}),this.model.bind(h.EVENT_NODE_REMOVED,a=>{i(a.node.id)}),this.model.bind(h.EVENT_GROUP_REMOVED,a=>{i(a.group.id)}),this.surface.bind(h.EVENT_RENDER_END,()=>setTimeout(()=>this.surface.router.$redrawEveryConnection()))},render:function(){return(0,x.h)(h.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>(0,x.h)(x.Teleport,{to:e.el,key:e.o},[(0,x.h)(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var p=require("vue"),r=require("@visuallyjs/browser-ui"),yo="Clear dataset?",Bt="vjs-selected-mode",eo="can-undo",to="can-redo",Ro="data-undo",xo="data-redo",oo="data-mode",Do="data-reset",Io="data-clear",vo="data-zoom-in",Mo="data-zoom-out",ro="vjs-controls-has-selection",Ut={setup(e){return{service:(0,p.inject)(s)}},name:ee,props:{clear:{type:Boolean,default:!0},[g]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:yo},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){this.service.getSurface(e=>e.setMode(r.SURFACE_MODE_PAN))},selectMode:function(){this.service.getSurface(e=>e.setMode(r.SURFACE_MODE_SELECT))},zoomToFit:function(){this.service.getSurface(e=>e.zoomToFit())},doClear:function(){this.service.getSurface(e=>{this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear()})},undo:function(){this.service.getModel(e=>e.undo())},redo:function(){this.service.getModel(e=>e.redo())},zoomIn:function(){this.service.getSurface(e=>e.zoomIn())},zoomOut:function(){this.service.getSurface(e=>e.zoomOut())},resetSelection(){this.service.getSurface(e=>{e.model.clearSelection(),(0,r.supportsPathEditing)(e)&&e.stopEditingPath()})},updateSelectionState:function(){this.service.getSurface(e=>{e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(ro):this.$refs.root.setAttribute(ro,"true")})}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push((0,p.h)("i",{class:`vjs-pan-mode ${Bt}`,[oo]:r.SURFACE_MODE_PAN,onClick:()=>this.panMode(),title:"Pan mode"},[(0,p.h)("svg",{viewBox:r.PAN_VIEW_BOX,stroke:"currentColor",fill:"none"},[(0,p.h)("path",{d:r.PAN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-select-mode",[oo]:r.SURFACE_MODE_SELECT,onClick:()=>this.selectMode(),title:"Select mode"},[(0,p.h)("svg",{viewBox:r.LASSO_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.LASSO_PATH})])]))),this.undoRedo&&(e.push((0,p.h)("i",{class:"vjs-undo",[Ro]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push((0,p.h)("i",{class:"vjs-redo",[xo]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push((0,p.h)("i",{class:"vjs-zoom-to-fit",[Do]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[(0,p.h)("svg",{viewBox:r.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_TO_FIT_PATH})])])),this.zoomButtons&&(e.push((0,p.h)("i",{class:"vjs-zoom-in",[vo]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_IN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-zoom-out",[Mo]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_OUT_PATH})])]))),e.push((0,p.h)("i",{class:r.CLASS_CONTROLS_RESET_SELECTION,[r.ATTRIBUTE_RESET_SELECTION]:"true",onClick:()=>{this.resetSelection()}},[(0,p.h)("svg",{viewBox:r.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.RESET_SELECTION_PATH})])])),this.clear&&e.push((0,p.h)("i",{class:"vjs-clear-dataset",[Io]:"true",onClick:()=>{this.doClear()}},[(0,p.h)("svg",{viewBox:r.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.CLEAR_PATH})])])),(0,p.h)(r.ELEMENT_DIV,{class:`vjs-controls ${this.className}`,ref:"root",[eo]:!1,[to]:!1,[r.ATTRIBUTE_CONTROLS_ORIENTATION]:this.orientation},e)}else return(0,p.h)(r.ELEMENT_DIV,{ref:"root"})},mounted(){this.service.getSurface(e=>{let t=e.getPlugin(r.LassoPlugin.type);this.showPan=t!=null,e.bind(r.EVENT_SURFACE_MODE_CHANGED,o=>{e.removeClass(e.$getSelector(this.$refs.root,"[data-mode]"),Bt),e.addClass(e.$getSelector(this.$refs.root,"[data-mode='"+o+"']"),Bt)}),e.model.bind(r.EVENT_UNDOREDO_UPDATE,o=>{this.$refs.root.setAttribute(eo,o.undoCount>0?r.TRUE:r.FALSE),this.$refs.root.setAttribute(to,o.redoCount>0?r.TRUE:r.FALSE)}),e.model.bind(r.EVENT_SELECT,()=>this.m()),e.model.bind(r.EVENT_DESELECT,()=>this.m()),e.model.bind(r.EVENT_SELECTION_CLEARED,()=>this.m()),this.ready=!0})}};var C=require("vue"),m=require("@visuallyjs/browser-ui"),Gt={name:te,setup(e){return{service:(0,C.inject)(s)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){this.service.getSurface(e)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new m.SvgExportUI(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new m.ImageExportUI(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new m.ImageExportUI(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,i=[];return t&&i.push((0,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_SVG,onClick:()=>this.exportSVG()},"SVG")])),o&&i.push((0,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_PNG,onClick:()=>this.exportPNG()},"PNG")])),n&&i.push((0,C.h)("i",{},[(0,C.h)("a",{href:"#","data-type":m.TYPE_JPG,onClick:()=>this.exportJPG()},"JPG")])),e&&i.unshift((0,C.h)("span",{},[this.label])),(0,C.h)(m.ELEMENT_DIV,{class:`${m.CLASS_CONTROLS} ${m.CLASS_EXPORT_CONTROLS}`},i)}};var ge=require("vue"),Ae=require("@visuallyjs/browser-ui"),Ft={setup(e){return{service:(0,ge.inject)(s)}},name:Z,props:{[g]:{type:String},[M]:{type:String,default:""},[et]:{type:Boolean,default:!0},[Qe]:{type:Boolean,default:!0},[qe]:{type:Function}},mounted:function(){this.service.getSurface(e=>{e.addPlugin({type:Ae.MiniviewPlugin.type,options:{container:this.$el,activeTracking:this.PROP_ACTIVE_TRACKING,clickToCenter:this.PROP_CLICK_TO_CENTER,typeFunction:this.PROP_TYPE_FUNCTION}})})},render:function(e){return(0,ge.h)(Ae.ELEMENT_DIV,{ref:"root",class:e.className})}};var Ne=require("vue"),ye=require("@visuallyjs/browser-ui"),jt={setup(e){return{service:(0,Ne.inject)(s)}},name:oe,props:{[b]:{type:Object},[V]:{type:String},[K]:{type:Object},[B]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=(0,ye.createDiagram)(e,this.options,this.modelOptions),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return(0,Ne.h)(ye.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var fe=require("vue"),d=require("@visuallyjs/browser-ui"),no={[M]:{type:String},[b]:{type:Object},[V]:{type:String},[pt]:{type:Boolean,default:!1}},io={setup(){return{service:(0,fe.inject)(s)}},render:function(){return(0,fe.h)(d.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}};function N(e,t,o=!0){let n=z(W({},no),{[B]:{type:Object}}),i={};return o&&(n[Te]={type:Function},i[Te]=function(a){this.chart.setDataSourceFilter(a)}),z(W({},io),{name:e,props:n,watch:i,mounted(){let a=this.$refs.root,l=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(l.data=this.data),this.url&&(l.url=this.url);let f=()=>{this.chart=new t(a,l)};this.useModel?this.service.getModel(P=>{l.dataSource=P,f()}):f()}})}var Re=N(ne,d.ColumnChart),xe=N(ie,d.BarChart),De=N(se,d.CategoryValueChart,!1),Ie=N(le,d.PieChart),ve=N(ae,d.LineChart),Me=N(pe,d.AreaChart),be=N(ce,d.ScatterChart),Ve=N(de,d.BubbleChart),we=N(ue,d.GaugeChart,!1),Le=z(W({},io),{name:me,props:z(W({},no),{[st]:{type:String},[at]:{type:Object},[nt]:{type:Boolean},[it]:{type:String},[B]:{type:Object}}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.chart=new d.SankeyChart(e,t)};this.useModel?this.service.getModel(n=>{t.dataSource=n,o()}):o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return(0,fe.h)(d.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}});var Be=require("vue"),G=require("@visuallyjs/browser-ui"),kt={setup(e){return{service:(0,Be.inject)(s)}},name:Q,props:{[g]:{type:String},[lt]:{type:String},[ct]:{type:Function},[dt]:{type:Function},[ut]:{type:Function},[mt]:{type:Boolean,default:!1},[ht]:{type:Boolean,default:!0},[ft]:{type:Boolean,default:!0},[Ot]:{type:Boolean,default:!1},[Pt]:{type:Boolean,default:!1},[St]:Object,[Ct]:Function,[gt]:Function,[M]:String,[tt]:String,[Et]:{type:Boolean,default:!1},[Tt]:{type:Boolean,default:!1},[_t]:{type:Boolean,default:!1}},mounted:function(){let e=this;this.service.getSurface(t=>{let o={source:this.$refs.root,selector:e.selector,dataGenerator:n=>e.dataGenerator?e.dataGenerator(n):(0,G.defaultDataGenerator)(n),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,canvasDropFilter:e.canvasDropFilter,onVertexAdded:e.onVertexAdded,dragSize:e.dragSize,mode:e.mode};e.groupIdentifier!=null&&(o.groupIdentifier=e.groupIdentifier),e.typeGenerator!=null&&(o.typeGenerator=e.typeGenerator),this.palette=new G.Palette(t,o)})},render:function(){return(0,Be.h)(G.ELEMENT_DIV,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var so=require("vue"),Ue={setup(){(0,so.provide)(s,new A("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var Ge=require("vue"),E=require("@visuallyjs/browser-ui"),Fe={name:J,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:E.DEFAULT_LABEL_FILL_RATIO},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:(0,Ge.inject)(s)}},mounted(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,E.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||E.DEFAULT_LABEL_FILL_RATIO))}})},updated(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,E.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||E.DEFAULT_LABEL_FILL_RATIO))}})},render:function(){return(0,Ge.h)(E.ELEMENT_SVG,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:E.CLASS_SHAPE})},methods:{getWidth:function(){return this.data.width||At},getHeight:function(){return this.data.height||Nt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};var je=require("vue"),ke=require("@visuallyjs/browser-ui"),He={name:Y,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:(0,je.inject)(s)}},mounted(){this.service.getSurface(e=>{new ke.ShapePalette(e,{container:this.$refs.container,shapeLibrary:e.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes})})},render:function(){return(0,je.h)(ke.ELEMENT_DIV,{ref:"container"})}};var y=require("vue"),F=require("@visuallyjs/browser-ui"),j=Symbol.for("VueInspectorGetter"),ao=Symbol.for("VueInspectorSetter");function po(){let e=[],t=null;function o(a){try{a(t)}catch(l){(0,F.log)("WARN: inspector listener threw an exception",l)}}let n={listen:a=>{t!=null?o(a):e.push(a)}},i={inspector:a=>{t=a,e.forEach(o)}};return(0,y.provide)(ao,i),(0,y.provide)(j,(0,y.readonly)(n)),i}var $e={name:he,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function},setup(e){let t=po();return{service:(0,y.inject)(s),inspectorProvider:t}},mounted(){this.service.getSurface(e=>{let t=new F.Inspector({container:this.$refs.root,ui:e,renderEmptyContainer:this.renderEmptyContainer||(()=>console.log("rendering empty")),refresh:(o,n)=>{this.refresh&&this.refresh(o),setTimeout(n)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(e):null});this.inspectorProvider.inspector(t)})},render(){return(0,y.h)(F.ELEMENT_DIV,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var We=require("vue"),k=require("@visuallyjs/browser-ui"),ze={name:X,props:{propertyName:String},setup(){return{inspectorProvider:(0,We.inject)(j)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new k.EdgeTypePicker(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n)});t.render(this.propertyName,e.h),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):(0,k.log)("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return(0,We.h)(k.ELEMENT_DIV,{ref:"container"})}};var L=require("vue"),u=require("@visuallyjs/browser-ui"),Ht={render(){let e=this.swatches.map(t=>(0,L.h)(u.ELEMENT_DIV,{title:t,class:u.CLASS_COLOR_PICKER_SWATCH,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return(0,L.h)(u.ELEMENT_DIV,{class:`${u.CLASS_COLOR_PICKER}`},[(0,L.h)("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),(0,L.h)(u.ELEMENT_DIV,{class:u.CLASS_COLOR_PICKER_SWATCHES},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:u.CLASS_COLOR_PICKER,CLASS_COLOR_PICKER_SWATCHES:u.CLASS_COLOR_PICKER_SWATCHES,CLASS_COLOR_PICKER_SWATCH:u.CLASS_COLOR_PICKER_SWATCH,colorInput:null,swatches:[]}),mounted(){let e=(0,L.inject)(j);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(u.EVENT_CONTEXT_UPDATE,o=>{o.key===u.INSPECTOR_CONTEXT_RECENT_COLORS&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,i=t.slice();i.unshift(e),i.length>n&&(i.length=n),this.inspector.updateContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,i)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};var _=require("vue"),H=require("@visuallyjs/browser-ui"),Ke={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({mounted:!1,surface:null}),setup(e){return{service:(0,_.inject)(s)}},mounted(){this.service.getSurface(e=>{this.surface=e,this.mounted=!0;let t=this.position||{x:0,y:0};(0,_.nextTick)().then(()=>{this.placement==="floating"?e.floatElement(this.$refs.root,t):e.fixElement(this.$refs.fixedEl,t,this.constraints)})})},render(){return(0,_.h)(H.ELEMENT_DIV,{ref:"root"},this.mounted?this.placement==="floating"?(0,_.h)(H.ELEMENT_DIV,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):(0,_.h)(_.Teleport,{to:this.surface.vertexLayer,key:(0,H.uuid)()},(0,_.h)(H.ELEMENT_DIV,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};var lo=require("vue"),Je={setup(){(0,lo.provide)(s,new A("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var Ye=require("vue"),$=require("@visuallyjs/browser-ui"),$t={name:re,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:(0,Ye.inject)(s)}},mounted(){if(this.service==null&&this.diagram==null)(0,$.log)("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{new $.DiagramPalette(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes})};this.diagram?e(this.diagram):this.service.getDiagram(e)}},render:function(){return(0,Ye.h)($.ELEMENT_DIV,{ref:"container"})}};var bo={install:function(e,t){e.component(Dt,Ue),e.component(It,Je),e.component(q,Lt),e.component(oe,jt),e.component(Z,Ft),e.component(ee,Ut),e.component(te,Gt),e.component(Q,kt),e.component(re,$t),e.component(ie,xe),e.component(ne,Re),e.component(se,De),e.component(ae,ve),e.component(pe,Me),e.component(le,Ie),e.component(me,Le),e.component(ue,we),e.component(de,Ve),e.component(ce,be),e.component(J,Fe),e.component(Y,He),e.component(X,ze),e.component(yt,Ht),e.component(he,$e),e.component(vt,Ke),e.provide(s,new A("root"))}};
+var _e=Object.defineProperty,ho=Object.defineProperties,fo=Object.getOwnPropertyDescriptor,Oo=Object.getOwnPropertyDescriptors,Po=Object.getOwnPropertyNames,Kt=Object.getOwnPropertySymbols;var Yt=Object.prototype.hasOwnProperty,Eo=Object.prototype.propertyIsEnumerable;var Jt=(e,t,o)=>t in e?_e(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,W=(e,t)=>{for(var o in t||(t={}))Yt.call(t,o)&&Jt(e,o,t[o]);if(Kt)for(var o of Kt(t))Eo.call(t,o)&&Jt(e,o,t[o]);return e},K=(e,t)=>ho(e,Oo(t));var Co=(e,t)=>{for(var o in t)_e(e,o,{get:t[o],enumerable:!0})},_o=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Po(t))!Yt.call(e,i)&&i!==o&&_e(e,i,{get:()=>t[i],enumerable:!(n=fo(t,i))||n.enumerable});return e};var To=e=>_o(_e({},"__esModule",{value:!0}),e);var Bo={};Co(Bo,{AreaChartComponent:()=>be,BarChartComponent:()=>Ie,BaseGroupComponent:()=>to,BaseNodeComponent:()=>eo,BrowserUIVueModel:()=>R,BubbleChartComponent:()=>Ve,CLASS_VUE_GROUP:()=>It,CLASS_VUE_NODE:()=>xt,COMPONENT_AREA_CHART:()=>le,COMPONENT_BAR_CHART:()=>se,COMPONENT_BUBBLE_CHART:()=>ue,COMPONENT_COLUMN_CHART:()=>ie,COMPONENT_CONTROLS:()=>te,COMPONENT_DIAGRAM:()=>re,COMPONENT_DIAGRAM_PALETTE:()=>ne,COMPONENT_DIAGRAM_PROVIDER:()=>vt,COMPONENT_EXPORT_CONTROLS:()=>oe,COMPONENT_GAUGE_CHART:()=>me,COMPONENT_INSPECTOR:()=>fe,COMPONENT_LINE_CHART:()=>pe,COMPONENT_MINIVIEW:()=>q,COMPONENT_PALETTE:()=>ee,COMPONENT_PIE_CHART:()=>ce,COMPONENT_SANKEY_CHART:()=>he,COMPONENT_SCATTER_CHART:()=>de,COMPONENT_SURFACE:()=>Q,COMPONENT_SURFACE_PROVIDER:()=>Dt,COMPONENT_XY_CHART:()=>ae,ColorPickerComponent:()=>$t,ColumnChartComponent:()=>xe,ControlsComponent:()=>Gt,DEFAULT_SHAPE_HEIGHT:()=>yt,DEFAULT_SHAPE_WIDTH:()=>Nt,DEFAULT_VUE_SURFACE_ID:()=>qe,DecoratorComponent:()=>Je,DiagramComponent:()=>kt,DiagramProvider:()=>Ye,EVENT_VERTEX_UPDATED:()=>Qt,EVENT_VERTICES_RENDERED:()=>qt,EdgeTypePickerComponent:()=>Ke,ExportControlsComponent:()=>Ft,GaugeChartComponent:()=>Le,InspectorComponent:()=>ze,InspectorGetterSymbol:()=>j,InspectorSetterSymbol:()=>lo,LineChartComponent:()=>Me,MiniviewComponent:()=>jt,PROP_ACTIVE_TRACKING:()=>tt,PROP_ALLOW_CLICK_TO_ADD:()=>St,PROP_ALLOW_DROP_ON_CANVAS:()=>ft,PROP_ALLOW_DROP_ON_EDGE:()=>ht,PROP_ALLOW_DROP_ON_GROUP:()=>Ot,PROP_ALLOW_DROP_ON_NODE:()=>Pt,PROP_CANVAS_DROP_FILTER:()=>At,PROP_CLASS_NAME:()=>M,PROP_CLICK_TO_ADD_ONLY:()=>Tt,PROP_CLICK_TO_CENTER:()=>et,PROP_CSV_DATA:()=>at,PROP_DATA:()=>b,PROP_DATA_GENERATOR:()=>dt,PROP_DATA_SOURCE_FILTER:()=>Se,PROP_DRAG_SIZE:()=>gt,PROP_GROUP_IDENTIFIER:()=>mt,PROP_ID:()=>go,PROP_IGNORE_DROP_ON_NODE:()=>Et,PROP_INTERACTIVE:()=>it,PROP_JSON_DATA:()=>pt,PROP_MODE:()=>ot,PROP_MODEL_OPTIONS:()=>J,PROP_ON_VERTEX_ADDED:()=>Ct,PROP_OPTIONS:()=>B,PROP_PIVOT:()=>st,PROP_RENDER_OPTIONS:()=>rt,PROP_SELECTOR:()=>ct,PROP_SELECT_AFTER_ADD:()=>_t,PROP_SURFACE_ID:()=>g,PROP_TYPE_FUNCTION:()=>Qe,PROP_TYPE_GENERATOR:()=>ut,PROP_URL:()=>w,PROP_USE_MODEL:()=>lt,PROP_VIEW_OPTIONS:()=>nt,PaletteComponent:()=>Ht,PieChartComponent:()=>ve,SankeyChartComponent:()=>Be,ScatterChartComponent:()=>we,ShapeComponent:()=>je,ShapePaletteComponent:()=>$e,SurfaceComponent:()=>Bt,SurfaceProvider:()=>Ge,TAG_COLOR_PICKER:()=>Rt,TAG_DECORATOR:()=>Mt,TAG_EDGE_TYPE_PICKER:()=>Z,TAG_SHAPE:()=>Y,TAG_SHAPE_PALETTE:()=>X,VisuallyJsPlugin:()=>Vo,VisuallyJsService:()=>A,VisuallyJsServiceKey:()=>s,XYChartComponent:()=>De,addSurface:()=>Lt,bindToDevLifecycle:()=>Ro,doProvideInspector:()=>co,newInstance:()=>So,useZoom:()=>Lo});module.exports=To(Bo);var Te=require("@visuallyjs/browser-ui"),R=class extends Te.BrowserUIModel{render(t,o){return(0,Te.log)("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function So(e){return e=e||{},new R(e)}var qe="surfaceId",Qe="typeFunction",et="clickToCenter",tt="activeTracking",g="surfaceId",M="className",b="data",ot="mode",B="options",rt="renderOptions",J="modelOptions",nt="viewOptions",w="url",it="interactive",st="pivot",Se="dataSourceFilter",at="csvData",pt="jsonData",lt="useModel",go="id",ct="selector",dt="dataGenerator",ut="typeGenerator",mt="groupIdentifier",ht="allowDropOnEdge",ft="allowDropOnCanvas",Ot="allowDropOnGroup",Pt="allowDropOnNode",Et="ignoreDropOnNode",Ct="onVertexAdded",_t="selectAfterAdd",Tt="clickToAddOnly",St="allowClickToAdd",gt="dragSize",At="canvasDropFilter",Y="Shape",X="ShapePalette",Nt=120,yt=90,Z="EdgeTypePickerComponent",Rt="ColorPickerComponent",xt="vjs-vue-node",It="vjs-vue-group",q="MiniviewComponent",Q="SurfaceComponent",Dt="SurfaceProvider",vt="DiagramProvider",ee="PaletteComponent",te="ControlsComponent",oe="ExportControlsComponent",re="DiagramComponent",ne="DiagramPaletteComponent",ie="ColumnChartComponent",se="BarChartComponent",ae="XYChartComponent",pe="LineChartComponent",le="AreaChartComponent",ce="PieChartComponent",de="ScatterChartComponent",ue="BubbleChartComponent",me="GaugeChartComponent",he="SankeyChartComponent",fe="InspectorComponent",Mt="Decorator";var U=require("vue"),c=require("@visuallyjs/browser-ui"),bt=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new c.OptimisticEventGenerator}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(qt)}vertexHasUpdated(t){this.eventManager.fire(Qt,t)}},qt="vertices:rendered",Qt="vertex:updated",wt=new Map;function ge(e){return wt.has(e)||wt.set(e,new bt),wt.get(e)}function Ao(e,t){ge(e).vertexHasRendered(t)}function No(e,t){ge(e).vertexHasUpdated(t)}function yo(e,t){ge(e).vertexWillRender(t)}function Ro(e,t,o){ge(e).eventManager.bind(t,o)}var Xt={props:{data:Object,model:R,obj:c.Vertex,ui:c.BrowserUI,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=(0,c.isGroup)(e.obj)?It:xt;e.el.firstElementChild&&(0,c.addClass)(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Ao(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),No(this.ui.id,this.obj)}},eo={mixins:[Xt],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},to={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Xt]},Vt=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Zt=(e,t,o,n,i,a,l,f,P)=>{let O=l.component!=null,I=(0,c.isGroup)(f),D=[];O||D.push(I?c.CLASS_DEFAULT_GROUP:c.CLASS_DEFAULT_NODE);let T=O?l.component:{render(S){return S.data.label||""}};if(T){let S=document.createElement(c.ELEMENT_DIV);(0,c.updateClasses)(S,D),T.mixins==null&&(T.mixins=[]);let v=I?to:eo;T.mixins.find(Ce=>Ce===v)||T.mixins.push(v),yo(a.id,f);let Ee={data:o,model:(0,U.markRaw)(n),ui:(0,U.markRaw)(a),obj:f,el:S,def:(0,U.markRaw)(l),eventInfo:P==null?null:(0,U.markRaw)(P)};if(l.inject)for(let Ce in l.inject){let Ze=l.inject[Ce],mo=typeof Ze=="function"?Ze(f,n):Ze;Ee[Ce]=mo}e.push({component:(0,U.markRaw)(T),el:S,o:f.getFullId(),props:Ee})}};function Lt(e,t,o,n,i,a){let l={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(P,O,I,D)=>{},render:(P,O,I,D,T,S,v,Pe)=>Zt(n,P,O,I,D,T,S,v,Pe),cleanupVertex:Vt,cleanupPort:Vt,rerender:(P,O,I,D,T,S,v,Pe,Ee)=>{Vt(v.id,Ee),Zt(n,P,O,I,D,T,S,v,Pe)}},f=(0,c.extend)(i||{},{view:a||{},id:t});return(0,c.renderSurface)(e,o,l,f)}var V=require("@visuallyjs/browser-ui"),s=Symbol.for("visuallyjs-service"),A=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.p=[]}getSurface(t){this.e(this.s,t,this.l)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.p,t,this.u)}getModel(t){this.e(this.i,t,this.r)}getModelDirect(){return this.r}e(t,o,n){if(n!=null)try{o(n)}catch(i){(0,V.log)(`WARN: could not dispatch ${i}`)}else t.push(o)}setSurface(t){this.l=t,this.n(t.model),this.t(this.s,t)}setDiagram(t){this.c=t,this.n(t.model),t.$ui instanceof V.Surface?this.setSurface(t.$ui):t.$ui instanceof V.Paper&&this.setPaper(t.$ui),this.t(this.a,t)}setPaper(t){this.u=t,this.n(t.model),this.t(this.p,t)}n(t){this.r=t,this.t(this.i,t)}t(t,o){t.forEach(n=>{try{n(o)}catch(i){(0,V.log)(`WARN: could not flush all queue entries ${i}`)}})}};var x=require("vue"),h=require("@visuallyjs/browser-ui"),Bt={setup(e){return{service:(0,x.inject)(s),surfaceId:e.surfaceId||qe}},name:Q,props:{[b]:{type:Object},[rt]:{type:Object},[J]:{type:Object},[nt]:{type:Object},[w]:{type:String},[g]:{type:String}},data:function(){return{vertices:[]}},mounted(){let e=this,t=new R(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data}),this.model=t,this.surface=Lt(t,this.surfaceId,o,this.vertices,(0,h.clone)(this.renderOptions||{}),(0,h.clone)(this.viewOptions||{})),this.service.setSurface(this.surface);let n=(a,l)=>{let f=()=>{let O={};return l.originalData||l.updates?O=Object.assign(l.originalData,l.updates):l.newData&&Object.assign(O,l.newData),O},P=this.vertices.find(O=>O.o===a);P!=null&&(P.props.data=f())},i=a=>{let l=this.vertices.findIndex(f=>f.o===a);l!==-1&&this.vertices.splice(l,1)};this.model.bind(h.EVENT_NODE_UPDATED,a=>{n(a.vertex.getFullId(),a)}),this.model.bind(h.EVENT_GROUP_UPDATED,a=>{n(a.vertex.getFullId(),a)}),this.model.bind(h.EVENT_NODE_REMOVED,a=>{i(a.node.id)}),this.model.bind(h.EVENT_GROUP_REMOVED,a=>{i(a.group.id)}),this.surface.bind(h.EVENT_RENDER_END,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){return(0,x.h)(h.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>(0,x.h)(x.Teleport,{to:e.el,key:e.o},[(0,x.h)(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};var p=require("vue"),r=require("@visuallyjs/browser-ui"),xo="Clear dataset?",Ut="vjs-selected-mode",oo="can-undo",ro="can-redo",Io="data-undo",Do="data-redo",no="data-mode",vo="data-reset",Mo="data-clear",bo="data-zoom-in",wo="data-zoom-out",io="vjs-controls-has-selection",Gt={setup(e){return{service:(0,p.inject)(s)}},name:te,props:{clear:{type:Boolean,default:!0},[g]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:xo},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){this.service.getSurface(e=>e.setMode(r.SURFACE_MODE_PAN))},selectMode:function(){this.service.getSurface(e=>e.setMode(r.SURFACE_MODE_SELECT))},zoomToFit:function(){this.service.getSurface(e=>e.zoomToFit())},doClear:function(){this.service.getSurface(e=>{this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear()})},undo:function(){this.service.getModel(e=>e.undo())},redo:function(){this.service.getModel(e=>e.redo())},zoomIn:function(){this.service.getSurface(e=>e.zoomIn())},zoomOut:function(){this.service.getSurface(e=>e.zoomOut())},resetSelection(){this.service.getSurface(e=>{e.model.clearSelection(),(0,r.supportsPathEditing)(e)&&e.stopEditingPath()})},updateSelectionState:function(){this.service.getSurface(e=>{e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(io):this.$refs.root.setAttribute(io,"true")})}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push((0,p.h)("i",{class:`vjs-pan-mode ${Ut}`,[no]:r.SURFACE_MODE_PAN,onClick:()=>this.panMode(),title:"Pan mode"},[(0,p.h)("svg",{viewBox:r.PAN_VIEW_BOX,stroke:"currentColor",fill:"none"},[(0,p.h)("path",{d:r.PAN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-select-mode",[no]:r.SURFACE_MODE_SELECT,onClick:()=>this.selectMode(),title:"Select mode"},[(0,p.h)("svg",{viewBox:r.LASSO_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.LASSO_PATH})])]))),this.undoRedo&&(e.push((0,p.h)("i",{class:"vjs-undo",[Io]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push((0,p.h)("i",{class:"vjs-redo",[Do]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push((0,p.h)("i",{class:"vjs-zoom-to-fit",[vo]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[(0,p.h)("svg",{viewBox:r.ZOOM_TO_FIT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_TO_FIT_PATH})])])),this.zoomButtons&&(e.push((0,p.h)("i",{class:"vjs-zoom-in",[bo]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_IN_PATH})])])),e.push((0,p.h)("i",{class:"vjs-zoom-out",[wo]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[(0,p.h)("svg",{viewBox:r.ZOOM_IN_OUT_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.ZOOM_OUT_PATH})])]))),e.push((0,p.h)("i",{class:r.CLASS_CONTROLS_RESET_SELECTION,[r.ATTRIBUTE_RESET_SELECTION]:"true",onClick:()=>{this.resetSelection()}},[(0,p.h)("svg",{viewBox:r.RESET_SELECTION_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.RESET_SELECTION_PATH})])])),this.clear&&e.push((0,p.h)("i",{class:"vjs-clear-dataset",[Mo]:"true",onClick:()=>{this.doClear()}},[(0,p.h)("svg",{viewBox:r.CLEAR_VIEW_BOX,stroke:"currentColor",fill:"currentColor"},[(0,p.h)("path",{d:r.CLEAR_PATH})])])),(0,p.h)(r.ELEMENT_DIV,{class:`vjs-controls ${this.className}`,ref:"root",[oo]:!1,[ro]:!1,[r.ATTRIBUTE_CONTROLS_ORIENTATION]:this.orientation},e)}else return(0,p.h)(r.ELEMENT_DIV,{ref:"root"})},mounted(){this.service.getSurface(e=>{let t=e.getPlugin(r.LassoPlugin.type);this.showPan=t!=null,e.bind(r.EVENT_SURFACE_MODE_CHANGED,o=>{e.removeClass(e.$getSelector(this.$refs.root,"[data-mode]"),Ut),e.addClass(e.$getSelector(this.$refs.root,"[data-mode='"+o+"']"),Ut)}),e.model.bind(r.EVENT_UNDOREDO_UPDATE,o=>{this.$refs.root.setAttribute(oo,o.undoCount>0?r.TRUE:r.FALSE),this.$refs.root.setAttribute(ro,o.redoCount>0?r.TRUE:r.FALSE)}),e.model.bind(r.EVENT_SELECT,()=>this.updateSelectionState()),e.model.bind(r.EVENT_DESELECT,()=>this.updateSelectionState()),e.model.bind(r.EVENT_SELECTION_CLEARED,()=>this.updateSelectionState()),this.ready=!0})}};var E=require("vue"),m=require("@visuallyjs/browser-ui"),Ft={name:oe,setup(e){return{service:(0,E.inject)(s)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){this.service.getSurface(e)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new m.SvgExportUI(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new m.ImageExportUI(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new m.ImageExportUI(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,n=this.allowJpgExport!==!1,i=[];return t&&i.push((0,E.h)("i",{},[(0,E.h)("a",{href:"#","data-type":m.TYPE_SVG,onClick:()=>this.exportSVG()},"SVG")])),o&&i.push((0,E.h)("i",{},[(0,E.h)("a",{href:"#","data-type":m.TYPE_PNG,onClick:()=>this.exportPNG()},"PNG")])),n&&i.push((0,E.h)("i",{},[(0,E.h)("a",{href:"#","data-type":m.TYPE_JPG,onClick:()=>this.exportJPG()},"JPG")])),e&&i.unshift((0,E.h)("span",{},[this.label])),(0,E.h)(m.ELEMENT_DIV,{class:`${m.CLASS_CONTROLS} ${m.CLASS_EXPORT_CONTROLS}`},i)}};var Ae=require("vue"),Ne=require("@visuallyjs/browser-ui"),jt={setup(e){return{service:(0,Ae.inject)(s)}},name:q,props:{[g]:{type:String},[M]:{type:String,default:""},[tt]:{type:Boolean,default:!0},[et]:{type:Boolean,default:!0},[Qe]:{type:Function}},mounted:function(){this.service.getSurface(e=>{e.addPlugin({type:Ne.MiniviewPlugin.type,options:{container:this.$el,activeTracking:this.PROP_ACTIVE_TRACKING,clickToCenter:this.PROP_CLICK_TO_CENTER,typeFunction:this.PROP_TYPE_FUNCTION}})})},render:function(e){return(0,Ae.h)(Ne.ELEMENT_DIV,{ref:"root",class:e.className})}};var ye=require("vue"),Re=require("@visuallyjs/browser-ui"),kt={setup(e){return{service:(0,ye.inject)(s)}},name:re,props:{[b]:{type:Object},[w]:{type:String},[J]:{type:Object},[B]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=(0,Re.createDiagram)(e,this.options,this.modelOptions),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return(0,ye.h)(Re.ELEMENT_DIV,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var Oe=require("vue"),d=require("@visuallyjs/browser-ui"),so={[M]:{type:String},[b]:{type:Object},[w]:{type:String},[lt]:{type:Boolean,default:!1}},ao={setup(){return{service:(0,Oe.inject)(s)}},render:function(){return(0,Oe.h)(d.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}};function N(e,t,o=!0){let n=K(W({},so),{[B]:{type:Object}}),i={};return o&&(n[Se]={type:Function},i[Se]=function(a){this.chart.setDataSourceFilter(a)}),K(W({},ao),{name:e,props:n,watch:i,mounted(){let a=this.$refs.root,l=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(l.data=this.data),this.url&&(l.url=this.url);let f=()=>{this.chart=new t(a,l)};this.useModel?this.service.getModel(P=>{l.dataSource=P,f()}):f()}})}var xe=N(ie,d.ColumnChart),Ie=N(se,d.BarChart),De=N(ae,d.CategoryValueChart,!1),ve=N(ce,d.PieChart),Me=N(pe,d.LineChart),be=N(le,d.AreaChart),we=N(de,d.ScatterChart),Ve=N(ue,d.BubbleChart),Le=N(me,d.GaugeChart,!1),Be=K(W({},ao),{name:he,props:K(W({},so),{[at]:{type:String},[pt]:{type:Object},[it]:{type:Boolean},[st]:{type:String},[B]:{type:Object}}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.chart=new d.SankeyChart(e,t)};this.useModel?this.service.getModel(n=>{t.dataSource=n,o()}):o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return(0,Oe.h)(d.ELEMENT_DIV,{class:`${this.className}`,ref:"root"})}});var Ue=require("vue"),G=require("@visuallyjs/browser-ui"),Ht={setup(e){return{service:(0,Ue.inject)(s)}},name:ee,props:{[g]:{type:String},[ct]:{type:String},[dt]:{type:Function},[ut]:{type:Function},[mt]:{type:Function},[ht]:{type:Boolean,default:!1},[ft]:{type:Boolean,default:!0},[Ot]:{type:Boolean,default:!0},[Pt]:{type:Boolean,default:!1},[Et]:{type:Boolean,default:!1},[gt]:Object,[Ct]:Function,[At]:Function,[M]:String,[ot]:String,[_t]:{type:Boolean,default:!1},[St]:{type:Boolean,default:!1},[Tt]:{type:Boolean,default:!1}},mounted:function(){let e=this;this.service.getSurface(t=>{let o={source:this.$refs.root,selector:e.selector,dataGenerator:n=>e.dataGenerator?e.dataGenerator(n):(0,G.defaultDataGenerator)(n),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,canvasDropFilter:e.canvasDropFilter,onVertexAdded:e.onVertexAdded,dragSize:e.dragSize,mode:e.mode};e.groupIdentifier!=null&&(o.groupIdentifier=e.groupIdentifier),e.typeGenerator!=null&&(o.typeGenerator=e.typeGenerator),this.palette=new G.Palette(t,o)})},render:function(){return(0,Ue.h)(G.ELEMENT_DIV,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var po=require("vue"),Ge={setup(){(0,po.provide)(s,new A("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var Fe=require("vue"),C=require("@visuallyjs/browser-ui"),je={name:Y,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:C.DEFAULT_LABEL_FILL_RATIO},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:(0,Fe.inject)(s)}},mounted(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,C.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||C.DEFAULT_LABEL_FILL_RATIO))}})},updated(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let n=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(n),this.multilineLabels!=!1&&(0,C.convertToMultilineText)(n,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||C.DEFAULT_LABEL_FILL_RATIO))}})},render:function(){return(0,Fe.h)(C.ELEMENT_SVG,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:C.CLASS_SHAPE})},methods:{getWidth:function(){return this.data.width||Nt},getHeight:function(){return this.data.height||yt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};var ke=require("vue"),He=require("@visuallyjs/browser-ui"),$e={name:X,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:(0,ke.inject)(s)}},mounted(){this.service.getSurface(e=>{new He.ShapePalette(e,{container:this.$refs.container,shapeLibrary:e.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes})})},render:function(){return(0,ke.h)(He.ELEMENT_DIV,{ref:"container"})}};var y=require("vue"),F=require("@visuallyjs/browser-ui"),j=Symbol.for("VueInspectorGetter"),lo=Symbol.for("VueInspectorSetter");function co(){let e=[],t=null;function o(a){try{a(t)}catch(l){(0,F.log)("WARN: inspector listener threw an exception",l)}}let n={listen:a=>{t!=null?o(a):e.push(a)}},i={inspector:a=>{t=a,e.forEach(o)}};return(0,y.provide)(lo,i),(0,y.provide)(j,(0,y.readonly)(n)),i}var ze={name:fe,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function},setup(e){let t=co();return{service:(0,y.inject)(s),inspectorProvider:t}},mounted(){this.service.getSurface(e=>{let t=new F.Inspector({container:this.$refs.root,ui:e,renderEmptyContainer:this.renderEmptyContainer||(()=>console.log("rendering empty")),refresh:(o,n)=>{this.refresh&&this.refresh(o),setTimeout(n)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(e):null});this.inspectorProvider.inspector(t)})},render(){return(0,y.h)(F.ELEMENT_DIV,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};var We=require("vue"),k=require("@visuallyjs/browser-ui"),Ke={name:Z,props:{propertyName:String},setup(){return{inspectorProvider:(0,We.inject)(j)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new k.EdgeTypePicker(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,n)=>{e.setValue(this.propertyName,n)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):(0,k.log)("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return(0,We.h)(k.ELEMENT_DIV,{ref:"container"})}};var L=require("vue"),u=require("@visuallyjs/browser-ui"),$t={render(){let e=this.swatches.map(t=>(0,L.h)(u.ELEMENT_DIV,{title:t,class:u.CLASS_COLOR_PICKER_SWATCH,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return(0,L.h)(u.ELEMENT_DIV,{class:`${u.CLASS_COLOR_PICKER}`},[(0,L.h)("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),(0,L.h)(u.ELEMENT_DIV,{class:u.CLASS_COLOR_PICKER_SWATCHES},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:u.CLASS_COLOR_PICKER,CLASS_COLOR_PICKER_SWATCHES:u.CLASS_COLOR_PICKER_SWATCHES,CLASS_COLOR_PICKER_SWATCH:u.CLASS_COLOR_PICKER_SWATCH,colorInput:null,swatches:[]}),mounted(){let e=(0,L.inject)(j);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(u.EVENT_CONTEXT_UPDATE,o=>{o.key===u.INSPECTOR_CONTEXT_RECENT_COLORS&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,()=>[]);if(e=e.toUpperCase(),!(t.find(n=>n.toUpperCase()===e)!=null)){let n=this.maxColors||10,i=t.slice();i.unshift(e),i.length>n&&(i.length=n),this.inspector.updateContext(u.INSPECTOR_CONTEXT_RECENT_COLORS,i)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};var _=require("vue"),H=require("@visuallyjs/browser-ui"),Je={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({mounted:!1,surface:null}),setup(e){return{service:(0,_.inject)(s)}},mounted(){this.service.getSurface(e=>{this.surface=e,this.mounted=!0;let t=this.position||{x:0,y:0};(0,_.nextTick)().then(()=>{this.placement==="floating"?e.floatElement(this.$refs.root,t):e.fixElement(this.$refs.fixedEl,t,this.constraints)})})},render(){return(0,_.h)(H.ELEMENT_DIV,{ref:"root"},this.mounted?this.placement==="floating"?(0,_.h)(H.ELEMENT_DIV,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):(0,_.h)(_.Teleport,{to:this.surface.vertexLayer,key:(0,H.uuid)()},(0,_.h)(H.ELEMENT_DIV,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};var uo=require("vue"),Ye={setup(){(0,uo.provide)(s,new A("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};var Xe=require("vue"),$=require("@visuallyjs/browser-ui"),zt={name:ne,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:(0,Xe.inject)(s)}},mounted(){if(this.service==null&&this.diagram==null)(0,$.log)("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{new $.DiagramPalette(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes})};this.diagram?e(this.diagram):this.service.getDiagram(e)}},render:function(){return(0,Xe.h)($.ELEMENT_DIV,{ref:"container"})}};var Vo={install:function(e,t){e.component(Dt,Ge),e.component(vt,Ye),e.component(Q,Bt),e.component(re,kt),e.component(q,jt),e.component(te,Gt),e.component(oe,Ft),e.component(ee,Ht),e.component(ne,zt),e.component(se,Ie),e.component(ie,xe),e.component(ae,De),e.component(pe,Me),e.component(le,be),e.component(ce,ve),e.component(he,Be),e.component(me,Le),e.component(ue,Ve),e.component(de,we),e.component(Y,je),e.component(X,$e),e.component(Z,Ke),e.component(Rt,$t),e.component(fe,ze),e.component(Mt,Je),e.provide(s,new A("root"))}};var z=require("vue"),Wt=require("@visuallyjs/browser-ui");function Lo(e){let t=(0,z.ref)(e.getZoom()),o=n=>{t.value=n.zoom};return(0,z.onMounted)(()=>{e.bind(Wt.EVENT_ZOOM,o),t.value=e.getZoom()}),(0,z.onUnmounted)(()=>{e.unbind(Wt.EVENT_ZOOM,o)}),t}

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

@@ -1 +1 @@
-var Xt=Object.defineProperty,Zt=Object.defineProperties;var qt=Object.getOwnPropertyDescriptors;var be=Object.getOwnPropertySymbols;var Qt=Object.prototype.hasOwnProperty,eo=Object.prototype.propertyIsEnumerable;var Ve=(e,t,o)=>t in e?Xt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,N=(e,t)=>{for(var o in t||(t={}))Qt.call(t,o)&&Ve(e,o,t[o]);if(be)for(var o of be(t))eo.call(t,o)&&Ve(e,o,t[o]);return e},y=(e,t)=>Zt(e,qt(t));import{log as to,BrowserUIModel as oo}from"@visuallyjs/browser-ui";var T=class extends oo{render(t,o){return to("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function Nn(e){return e=e||{},new T(e)}var we="surfaceId",Le="typeFunction",Be="clickToCenter",Ue="activeTracking",f="surfaceId",S="className",g="data",Ge="mode",R="options",Fe="renderOptions",b="modelOptions",je="viewOptions",A="url",ke="interactive",He="pivot",se="dataSourceFilter",$e="csvData",We="jsonData",ze="useModel",Zn="id",Ke="selector",Je="dataGenerator",Ye="typeGenerator",Xe="groupIdentifier",Ze="allowDropOnEdge",qe="allowDropOnCanvas",Qe="allowDropOnGroup",et="allowDropOnNode",tt="ignoreDropOnNode",ot="onVertexAdded",rt="selectAfterAdd",nt="clickToAddOnly",it="allowClickToAdd",st="dragSize",at="canvasDropFilter",V="Shape",w="ShapePalette",pt=120,lt=90,L="EdgeTypePickerComponent",ct="ColorPickerComponent",dt="vjs-vue-node",ut="vjs-vue-group",B="MiniviewComponent",U="SurfaceComponent",mt="SurfaceProvider",ht="DiagramProvider",G="PaletteComponent",F="ControlsComponent",j="ExportControlsComponent",k="DiagramComponent",H="DiagramPaletteComponent",$="ColumnChartComponent",W="BarChartComponent",z="XYChartComponent",K="LineChartComponent",J="AreaChartComponent",Y="PieChartComponent",X="ScatterChartComponent",Z="BubbleChartComponent",q="GaugeChartComponent",Q="SankeyChartComponent",ee="InspectorComponent",ft="Decorator";import{markRaw as x}from"vue";import{addClass as ro,BrowserUI as no,CLASS_DEFAULT_GROUP as io,CLASS_DEFAULT_NODE as so,ELEMENT_DIV as ao,extend as po,isGroup as Ot,OptimisticEventGenerator as lo,renderSurface as co,updateClasses as uo,Vertex as mo}from"@visuallyjs/browser-ui";var ae=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new lo}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(ho)}vertexHasUpdated(t){this.eventManager.fire(fo,t)}},ho="vertices:rendered",fo="vertex:updated",pe=new Map;function te(e){return pe.has(e)||pe.set(e,new ae),pe.get(e)}function Oo(e,t){te(e).vertexHasRendered(t)}function Po(e,t){te(e).vertexHasUpdated(t)}function Co(e,t){te(e).vertexWillRender(t)}function ui(e,t,o){te(e).eventManager.bind(t,o)}var Pt={props:{data:Object,model:T,obj:mo,ui:no,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=Ot(e.obj)?ut:dt;e.el.firstElementChild&&ro(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Oo(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),Po(this.ui.id,this.obj)}},Eo={mixins:[Pt],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},_o={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Pt]},le=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Ct=(e,t,o,r,s,i,a,l,d)=>{let c=a.component!=null,C=Ot(l),E=[];c||E.push(C?io:so);let u=c?a.component:{render(m){return m.data.label||""}};if(u){let m=document.createElement(ao);uo(m,E),u.mixins==null&&(u.mixins=[]);let _=C?_o:Eo;u.mixins.find(M=>M===_)||u.mixins.push(_),Co(i.id,l);let v={data:o,model:x(r),ui:x(i),obj:l,el:m,def:x(a),eventInfo:d==null?null:x(d)};if(a.inject)for(let M in a.inject){let ie=a.inject[M],Yt=typeof ie=="function"?ie(l,r):ie;v[M]=Yt}e.push({component:x(u),el:m,o:l.getFullId(),props:v})}};function Et(e,t,o,r,s,i){let a={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(d,c,C,E)=>{},render:(d,c,C,E,u,m,_,I)=>Ct(r,d,c,C,E,u,m,_,I),cleanupVertex:le,cleanupPort:le,rerender:(d,c,C,E,u,m,_,I,v)=>{le(_.id,v),Ct(r,d,c,C,E,u,m,_,I)}},l=po(s||{},{view:i||{},id:t});return co(e,o,a,l)}import{log as _t,Paper as To,Surface as So}from"@visuallyjs/browser-ui";var n=Symbol.for("visuallyjs-service"),O=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.p=[]}getSurface(t){this.e(this.s,t,this.l)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.p,t,this.u)}getModel(t){this.e(this.i,t,this.r)}getModelDirect(){return this.r}e(t,o,r){if(r!=null)try{o(r)}catch(s){_t(`WARN: could not dispatch ${s}`)}else t.push(o)}setSurface(t){this.l=t,this.n(t.model),this.t(this.s,t)}setDiagram(t){this.c=t,this.n(t.model),t.$ui instanceof So?this.setSurface(t.$ui):t.$ui instanceof To&&this.setPaper(t.$ui),this.t(this.a,t)}setPaper(t){this.u=t,this.n(t.model),this.t(this.p,t)}n(t){this.r=t,this.t(this.i,t)}t(t,o){t.forEach(r=>{try{r(o)}catch(s){_t(`WARN: could not flush all queue entries ${s}`)}})}};import{h as ce,inject as go,Teleport as Ao}from"vue";import{ELEMENT_DIV as No,EVENT_GROUP_REMOVED as yo,EVENT_GROUP_UPDATED as Ro,EVENT_NODE_REMOVED as xo,EVENT_NODE_UPDATED as Do,EVENT_RENDER_END as Io,clone as Tt}from"@visuallyjs/browser-ui";var St={setup(e){return{service:go(n),surfaceId:e.surfaceId||we}},name:U,props:{[g]:{type:Object},[Fe]:{type:Object},[b]:{type:Object},[je]:{type:Object},[A]:{type:String},[f]:{type:String}},data:function(){return{vertices:[]}},mounted(){let e=this,t=new T(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data}),this.model=t,this.surface=Et(t,this.surfaceId,o,this.vertices,Tt(this.renderOptions||{}),Tt(this.viewOptions||{})),this.service.setSurface(this.surface);let r=(i,a)=>{let l=()=>{let c={};return a.originalData||a.updates?c=Object.assign(a.originalData,a.updates):a.newData&&Object.assign(c,a.newData),c},d=this.vertices.find(c=>c.o===i);d!=null&&(d.props.data=l())},s=i=>{let a=this.vertices.findIndex(l=>l.o===i);a!==-1&&this.vertices.splice(a,1)};this.model.bind(Do,i=>{r(i.vertex.getFullId(),i)}),this.model.bind(Ro,i=>{r(i.vertex.getFullId(),i)}),this.model.bind(xo,i=>{s(i.node.id)}),this.model.bind(yo,i=>{s(i.group.id)}),this.surface.bind(Io,()=>setTimeout(()=>this.surface.router.$redrawEveryConnection()))},render:function(){return ce(No,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>ce(Ao,{to:e.el,key:e.o},[ce(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as p,inject as vo}from"vue";import{LassoPlugin as Mo,SURFACE_MODE_SELECT as gt,SURFACE_MODE_PAN as At,PAN_PATH as bo,PAN_VIEW_BOX as Vo,LASSO_PATH as wo,LASSO_VIEW_BOX as Lo,ZOOM_TO_FIT_PATH as Bo,ZOOM_TO_FIT_VIEW_BOX as Uo,EVENT_UNDOREDO_UPDATE as Go,TRUE as Nt,FALSE as yt,EVENT_SURFACE_MODE_CHANGED as Fo,ELEMENT_DIV as Rt,ATTRIBUTE_CONTROLS_ORIENTATION as jo,ZOOM_IN_OUT_VIEW_BOX as xt,ZOOM_IN_PATH as ko,ZOOM_OUT_PATH as Ho,RESET_SELECTION_PATH as $o,RESET_SELECTION_VIEW_BOX as Wo,CLEAR_PATH as zo,CLEAR_VIEW_BOX as Ko,ATTRIBUTE_RESET_SELECTION as Jo,CLASS_CONTROLS_RESET_SELECTION as Yo,EVENT_SELECT as Xo,EVENT_DESELECT as Zo,EVENT_SELECTION_CLEARED as qo,supportsPathEditing as Qo}from"@visuallyjs/browser-ui";var er="Clear dataset?",de="vjs-selected-mode",Dt="can-undo",It="can-redo",tr="data-undo",or="data-redo",vt="data-mode",rr="data-reset",nr="data-clear",ir="data-zoom-in",sr="data-zoom-out",Mt="vjs-controls-has-selection",bt={setup(e){return{service:vo(n)}},name:F,props:{clear:{type:Boolean,default:!0},[f]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:er},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){this.service.getSurface(e=>e.setMode(At))},selectMode:function(){this.service.getSurface(e=>e.setMode(gt))},zoomToFit:function(){this.service.getSurface(e=>e.zoomToFit())},doClear:function(){this.service.getSurface(e=>{this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear()})},undo:function(){this.service.getModel(e=>e.undo())},redo:function(){this.service.getModel(e=>e.redo())},zoomIn:function(){this.service.getSurface(e=>e.zoomIn())},zoomOut:function(){this.service.getSurface(e=>e.zoomOut())},resetSelection(){this.service.getSurface(e=>{e.model.clearSelection(),Qo(e)&&e.stopEditingPath()})},updateSelectionState:function(){this.service.getSurface(e=>{e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(Mt):this.$refs.root.setAttribute(Mt,"true")})}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push(p("i",{class:`vjs-pan-mode ${de}`,[vt]:At,onClick:()=>this.panMode(),title:"Pan mode"},[p("svg",{viewBox:Vo,stroke:"currentColor",fill:"none"},[p("path",{d:bo})])])),e.push(p("i",{class:"vjs-select-mode",[vt]:gt,onClick:()=>this.selectMode(),title:"Select mode"},[p("svg",{viewBox:Lo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:wo})])]))),this.undoRedo&&(e.push(p("i",{class:"vjs-undo",[tr]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push(p("i",{class:"vjs-redo",[or]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push(p("i",{class:"vjs-zoom-to-fit",[rr]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[p("svg",{viewBox:Uo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Bo})])])),this.zoomButtons&&(e.push(p("i",{class:"vjs-zoom-in",[ir]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[p("svg",{viewBox:xt,stroke:"currentColor",fill:"currentColor"},[p("path",{d:ko})])])),e.push(p("i",{class:"vjs-zoom-out",[sr]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[p("svg",{viewBox:xt,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Ho})])]))),e.push(p("i",{class:Yo,[Jo]:"true",onClick:()=>{this.resetSelection()}},[p("svg",{viewBox:Wo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:$o})])])),this.clear&&e.push(p("i",{class:"vjs-clear-dataset",[nr]:"true",onClick:()=>{this.doClear()}},[p("svg",{viewBox:Ko,stroke:"currentColor",fill:"currentColor"},[p("path",{d:zo})])])),p(Rt,{class:`vjs-controls ${this.className}`,ref:"root",[Dt]:!1,[It]:!1,[jo]:this.orientation},e)}else return p(Rt,{ref:"root"})},mounted(){this.service.getSurface(e=>{let t=e.getPlugin(Mo.type);this.showPan=t!=null,e.bind(Fo,o=>{e.removeClass(e.$getSelector(this.$refs.root,"[data-mode]"),de),e.addClass(e.$getSelector(this.$refs.root,"[data-mode='"+o+"']"),de)}),e.model.bind(Go,o=>{this.$refs.root.setAttribute(Dt,o.undoCount>0?Nt:yt),this.$refs.root.setAttribute(It,o.redoCount>0?Nt:yt)}),e.model.bind(Xo,()=>this.m()),e.model.bind(Zo,()=>this.m()),e.model.bind(qo,()=>this.m()),this.ready=!0})}};import{h as P,inject as ar}from"vue";import{CLASS_CONTROLS as pr,CLASS_EXPORT_CONTROLS as lr,ELEMENT_DIV as cr,ImageExportUI as Vt,SvgExportUI as dr,TYPE_JPG as ur,TYPE_PNG as mr,TYPE_SVG as hr}from"@visuallyjs/browser-ui";var wt={name:j,setup(e){return{service:ar(n)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){this.service.getSurface(e)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new dr(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new Vt(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new Vt(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,r=this.allowJpgExport!==!1,s=[];return t&&s.push(P("i",{},[P("a",{href:"#","data-type":hr,onClick:()=>this.exportSVG()},"SVG")])),o&&s.push(P("i",{},[P("a",{href:"#","data-type":mr,onClick:()=>this.exportPNG()},"PNG")])),r&&s.push(P("i",{},[P("a",{href:"#","data-type":ur,onClick:()=>this.exportJPG()},"JPG")])),e&&s.unshift(P("span",{},[this.label])),P(cr,{class:`${pr} ${lr}`},s)}};import{h as fr,inject as Or}from"vue";import{ELEMENT_DIV as Pr,MiniviewPlugin as Cr}from"@visuallyjs/browser-ui";var Lt={setup(e){return{service:Or(n)}},name:B,props:{[f]:{type:String},[S]:{type:String,default:""},[Ue]:{type:Boolean,default:!0},[Be]:{type:Boolean,default:!0},[Le]:{type:Function}},mounted:function(){this.service.getSurface(e=>{e.addPlugin({type:Cr.type,options:{container:this.$el,activeTracking:this.PROP_ACTIVE_TRACKING,clickToCenter:this.PROP_CLICK_TO_CENTER,typeFunction:this.PROP_TYPE_FUNCTION}})})},render:function(e){return fr(Pr,{ref:"root",class:e.className})}};import{h as Er,inject as _r}from"vue";import{createDiagram as Tr,ELEMENT_DIV as Sr}from"@visuallyjs/browser-ui";var Bt={setup(e){return{service:_r(n)}},name:k,props:{[g]:{type:Object},[A]:{type:String},[b]:{type:Object},[R]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=Tr(e,this.options,this.modelOptions),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return Er(Sr,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as Ut,inject as gr}from"vue";import{ColumnChart as Ar,BarChart as Nr,CategoryValueChart as yr,ELEMENT_DIV as Gt,LineChart as Rr,AreaChart as xr,PieChart as Dr,ScatterChart as Ir,BubbleChart as vr,GaugeChart as Mr,SankeyChart as br}from"@visuallyjs/browser-ui";var Ft={[S]:{type:String},[g]:{type:Object},[A]:{type:String},[ze]:{type:Boolean,default:!1}},jt={setup(){return{service:gr(n)}},render:function(){return Ut(Gt,{class:`${this.className}`,ref:"root"})}};function h(e,t,o=!0){let r=y(N({},Ft),{[R]:{type:Object}}),s={};return o&&(r[se]={type:Function},s[se]=function(i){this.chart.setDataSourceFilter(i)}),y(N({},jt),{name:e,props:r,watch:s,mounted(){let i=this.$refs.root,a=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(a.data=this.data),this.url&&(a.url=this.url);let l=()=>{this.chart=new t(i,a)};this.useModel?this.service.getModel(d=>{a.dataSource=d,l()}):l()}})}var ue=h($,Ar),me=h(W,Nr),he=h(z,yr,!1),fe=h(Y,Dr),Oe=h(K,Rr),Pe=h(J,xr),Ce=h(X,Ir),Ee=h(Z,vr),_e=h(q,Mr,!1),Te=y(N({},jt),{name:Q,props:y(N({},Ft),{[$e]:{type:String},[We]:{type:Object},[ke]:{type:Boolean},[He]:{type:String},[R]:{type:Object}}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.chart=new br(e,t)};this.useModel?this.service.getModel(r=>{t.dataSource=r,o()}):o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return Ut(Gt,{class:`${this.className}`,ref:"root"})}});import{h as Vr,inject as wr}from"vue";import{defaultDataGenerator as Lr,ELEMENT_DIV as Br,Palette as Ur}from"@visuallyjs/browser-ui";var kt={setup(e){return{service:wr(n)}},name:G,props:{[f]:{type:String},[Ke]:{type:String},[Je]:{type:Function},[Ye]:{type:Function},[Xe]:{type:Function},[Ze]:{type:Boolean,default:!1},[qe]:{type:Boolean,default:!0},[Qe]:{type:Boolean,default:!0},[et]:{type:Boolean,default:!1},[tt]:{type:Boolean,default:!1},[st]:Object,[ot]:Function,[at]:Function,[S]:String,[Ge]:String,[rt]:{type:Boolean,default:!1},[it]:{type:Boolean,default:!1},[nt]:{type:Boolean,default:!1}},mounted:function(){let e=this;this.service.getSurface(t=>{let o={source:this.$refs.root,selector:e.selector,dataGenerator:r=>e.dataGenerator?e.dataGenerator(r):Lr(r),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,canvasDropFilter:e.canvasDropFilter,onVertexAdded:e.onVertexAdded,dragSize:e.dragSize,mode:e.mode};e.groupIdentifier!=null&&(o.groupIdentifier=e.groupIdentifier),e.typeGenerator!=null&&(o.typeGenerator=e.typeGenerator),this.palette=new Ur(t,o)})},render:function(){return Vr(Br,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{provide as Gr}from"vue";var Se={setup(){Gr(n,new O("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as Fr,inject as jr}from"vue";import{CLASS_SHAPE as kr,convertToMultilineText as Ht,DEFAULT_LABEL_FILL_RATIO as ge,ELEMENT_SVG as Hr}from"@visuallyjs/browser-ui";var Ae={name:V,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:ge},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:jr(n)}},mounted(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(o),this.showLabels){let r=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(r),this.multilineLabels!=!1&&Ht(r,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ge))}})},updated(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let r=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(r),this.multilineLabels!=!1&&Ht(r,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ge))}})},render:function(){return Fr(Hr,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:kr})},methods:{getWidth:function(){return this.data.width||pt},getHeight:function(){return this.data.height||lt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};import{h as $r,inject as Wr}from"vue";import{ELEMENT_DIV as zr,ShapePalette as Kr}from"@visuallyjs/browser-ui";var Ne={name:w,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:Wr(n)}},mounted(){this.service.getSurface(e=>{new Kr(e,{container:this.$refs.container,shapeLibrary:e.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes})})},render:function(){return $r(zr,{ref:"container"})}};import{provide as $t,readonly as Jr,inject as Yr,h as Xr}from"vue";import{ELEMENT_DIV as Zr,Inspector as qr,log as Qr}from"@visuallyjs/browser-ui";var D=Symbol.for("VueInspectorGetter"),en=Symbol.for("VueInspectorSetter");function tn(){let e=[],t=null;function o(i){try{i(t)}catch(a){Qr("WARN: inspector listener threw an exception",a)}}let r={listen:i=>{t!=null?o(i):e.push(i)}},s={inspector:i=>{t=i,e.forEach(o)}};return $t(en,s),$t(D,Jr(r)),s}var ye={name:ee,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function},setup(e){let t=tn();return{service:Yr(n),inspectorProvider:t}},mounted(){this.service.getSurface(e=>{let t=new qr({container:this.$refs.root,ui:e,renderEmptyContainer:this.renderEmptyContainer||(()=>console.log("rendering empty")),refresh:(o,r)=>{this.refresh&&this.refresh(o),setTimeout(r)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(e):null});this.inspectorProvider.inspector(t)})},render(){return Xr(Zr,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as on,inject as rn}from"vue";import{EdgeTypePicker as nn,ELEMENT_DIV as sn,log as an}from"@visuallyjs/browser-ui";var Re={name:L,props:{propertyName:String},setup(){return{inspectorProvider:rn(D)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new nn(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,r)=>{e.setValue(this.propertyName,r)});t.render(this.propertyName,e.h),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):an("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return on(sn,{ref:"container"})}};import{h as oe,inject as pn}from"vue";import{CLASS_COLOR_PICKER as Wt,CLASS_COLOR_PICKER_SWATCH as zt,CLASS_COLOR_PICKER_SWATCHES as Kt,EVENT_CONTEXT_UPDATE as ln,ELEMENT_DIV as xe,INSPECTOR_CONTEXT_RECENT_COLORS as re}from"@visuallyjs/browser-ui";var Jt={render(){let e=this.swatches.map(t=>oe(xe,{title:t,class:zt,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return oe(xe,{class:`${Wt}`},[oe("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),oe(xe,{class:Kt},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:Wt,CLASS_COLOR_PICKER_SWATCHES:Kt,CLASS_COLOR_PICKER_SWATCH:zt,colorInput:null,swatches:[]}),mounted(){let e=pn(D);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(re,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(ln,o=>{o.key===re&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(re,()=>[]);if(e=e.toUpperCase(),!(t.find(r=>r.toUpperCase()===e)!=null)){let r=this.maxColors||10,s=t.slice();s.unshift(e),s.length>r&&(s.length=r),this.inspector.updateContext(re,s)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};import{h as ne,inject as cn,nextTick as dn,Teleport as un}from"vue";import{ELEMENT_DIV as De,uuid as mn}from"@visuallyjs/browser-ui";var Ie={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({mounted:!1,surface:null}),setup(e){return{service:cn(n)}},mounted(){this.service.getSurface(e=>{this.surface=e,this.mounted=!0;let t=this.position||{x:0,y:0};dn().then(()=>{this.placement==="floating"?e.floatElement(this.$refs.root,t):e.fixElement(this.$refs.fixedEl,t,this.constraints)})})},render(){return ne(De,{ref:"root"},this.mounted?this.placement==="floating"?ne(De,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):ne(un,{to:this.surface.vertexLayer,key:mn()},ne(De,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};import{provide as hn}from"vue";var ve={setup(){hn(n,new O("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as fn,inject as On}from"vue";import{DiagramPalette as Pn,ELEMENT_DIV as Cn,log as En}from"@visuallyjs/browser-ui";var Me={name:H,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:On(n)}},mounted(){if(this.service==null&&this.diagram==null)En("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{new Pn(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes})};this.diagram?e(this.diagram):this.service.getDiagram(e)}},render:function(){return fn(Cn,{ref:"container"})}};var Ip={install:function(e,t){e.component(mt,Se),e.component(ht,ve),e.component(U,St),e.component(k,Bt),e.component(B,Lt),e.component(F,bt),e.component(j,wt),e.component(G,kt),e.component(H,Me),e.component(W,me),e.component($,ue),e.component(z,he),e.component(K,Oe),e.component(J,Pe),e.component(Y,fe),e.component(Q,Te),e.component(q,_e),e.component(Z,Ee),e.component(X,Ce),e.component(V,Ae),e.component(w,Ne),e.component(L,Re),e.component(ct,Jt),e.component(ee,ye),e.component(ft,Ie),e.provide(n,new O("root"))}};export{Pe as AreaChartComponent,me as BarChartComponent,_o as BaseGroupComponent,Eo as BaseNodeComponent,T as BrowserUIVueModel,Ee as BubbleChartComponent,ut as CLASS_VUE_GROUP,dt as CLASS_VUE_NODE,J as COMPONENT_AREA_CHART,W as COMPONENT_BAR_CHART,Z as COMPONENT_BUBBLE_CHART,$ as COMPONENT_COLUMN_CHART,F as COMPONENT_CONTROLS,k as COMPONENT_DIAGRAM,H as COMPONENT_DIAGRAM_PALETTE,ht as COMPONENT_DIAGRAM_PROVIDER,j as COMPONENT_EXPORT_CONTROLS,q as COMPONENT_GAUGE_CHART,ee as COMPONENT_INSPECTOR,K as COMPONENT_LINE_CHART,B as COMPONENT_MINIVIEW,G as COMPONENT_PALETTE,Y as COMPONENT_PIE_CHART,Q as COMPONENT_SANKEY_CHART,X as COMPONENT_SCATTER_CHART,U as COMPONENT_SURFACE,mt as COMPONENT_SURFACE_PROVIDER,z as COMPONENT_XY_CHART,Jt as ColorPickerComponent,ue as ColumnChartComponent,bt as ControlsComponent,lt as DEFAULT_SHAPE_HEIGHT,pt as DEFAULT_SHAPE_WIDTH,we as DEFAULT_VUE_SURFACE_ID,Ie as DecoratorComponent,Bt as DiagramComponent,ve as DiagramProvider,fo as EVENT_VERTEX_UPDATED,ho as EVENT_VERTICES_RENDERED,Re as EdgeTypePickerComponent,wt as ExportControlsComponent,_e as GaugeChartComponent,ye as InspectorComponent,D as InspectorGetterSymbol,en as InspectorSetterSymbol,Oe as LineChartComponent,Lt as MiniviewComponent,Ue as PROP_ACTIVE_TRACKING,it as PROP_ALLOW_CLICK_TO_ADD,qe as PROP_ALLOW_DROP_ON_CANVAS,Ze as PROP_ALLOW_DROP_ON_EDGE,Qe as PROP_ALLOW_DROP_ON_GROUP,et as PROP_ALLOW_DROP_ON_NODE,at as PROP_CANVAS_DROP_FILTER,S as PROP_CLASS_NAME,nt as PROP_CLICK_TO_ADD_ONLY,Be as PROP_CLICK_TO_CENTER,$e as PROP_CSV_DATA,g as PROP_DATA,Je as PROP_DATA_GENERATOR,se as PROP_DATA_SOURCE_FILTER,st as PROP_DRAG_SIZE,Xe as PROP_GROUP_IDENTIFIER,Zn as PROP_ID,tt as PROP_IGNORE_DROP_ON_NODE,ke as PROP_INTERACTIVE,We as PROP_JSON_DATA,Ge as PROP_MODE,b as PROP_MODEL_OPTIONS,ot as PROP_ON_VERTEX_ADDED,R as PROP_OPTIONS,He as PROP_PIVOT,Fe as PROP_RENDER_OPTIONS,Ke as PROP_SELECTOR,rt as PROP_SELECT_AFTER_ADD,f as PROP_SURFACE_ID,Le as PROP_TYPE_FUNCTION,Ye as PROP_TYPE_GENERATOR,A as PROP_URL,ze as PROP_USE_MODEL,je as PROP_VIEW_OPTIONS,kt as PaletteComponent,fe as PieChartComponent,Te as SankeyChartComponent,Ce as ScatterChartComponent,Ae as ShapeComponent,Ne as ShapePaletteComponent,St as SurfaceComponent,Se as SurfaceProvider,ct as TAG_COLOR_PICKER,ft as TAG_DECORATOR,L as TAG_EDGE_TYPE_PICKER,V as TAG_SHAPE,w as TAG_SHAPE_PALETTE,Ip as VisuallyJsPlugin,O as VisuallyJsService,n as VisuallyJsServiceKey,he as XYChartComponent,Et as addSurface,ui as bindToDevLifecycle,tn as doProvideInspector,Nn as newInstance};
+var Zt=Object.defineProperty,qt=Object.defineProperties;var Qt=Object.getOwnPropertyDescriptors;var be=Object.getOwnPropertySymbols;var eo=Object.prototype.hasOwnProperty,to=Object.prototype.propertyIsEnumerable;var we=(e,t,o)=>t in e?Zt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,N=(e,t)=>{for(var o in t||(t={}))eo.call(t,o)&&we(e,o,t[o]);if(be)for(var o of be(t))to.call(t,o)&&we(e,o,t[o]);return e},y=(e,t)=>qt(e,Qt(t));import{log as oo,BrowserUIModel as ro}from"@visuallyjs/browser-ui";var T=class extends ro{render(t,o){return oo("render called directly on BrowserUiVue class: should not happen. Surface component should use internal render."),null}};function In(e){return e=e||{},new T(e)}var Ve="surfaceId",Le="typeFunction",Be="clickToCenter",Ue="activeTracking",f="surfaceId",S="className",g="data",Ge="mode",R="options",Fe="renderOptions",b="modelOptions",je="viewOptions",A="url",ke="interactive",He="pivot",se="dataSourceFilter",$e="csvData",ze="jsonData",We="useModel",ti="id",Ke="selector",Je="dataGenerator",Ye="typeGenerator",Xe="groupIdentifier",Ze="allowDropOnEdge",qe="allowDropOnCanvas",Qe="allowDropOnGroup",et="allowDropOnNode",tt="ignoreDropOnNode",ot="onVertexAdded",rt="selectAfterAdd",nt="clickToAddOnly",it="allowClickToAdd",st="dragSize",at="canvasDropFilter",w="Shape",V="ShapePalette",pt=120,lt=90,L="EdgeTypePickerComponent",ct="ColorPickerComponent",dt="vjs-vue-node",ut="vjs-vue-group",B="MiniviewComponent",U="SurfaceComponent",mt="SurfaceProvider",ht="DiagramProvider",G="PaletteComponent",F="ControlsComponent",j="ExportControlsComponent",k="DiagramComponent",H="DiagramPaletteComponent",$="ColumnChartComponent",z="BarChartComponent",W="XYChartComponent",K="LineChartComponent",J="AreaChartComponent",Y="PieChartComponent",X="ScatterChartComponent",Z="BubbleChartComponent",q="GaugeChartComponent",Q="SankeyChartComponent",ee="InspectorComponent",ft="Decorator";import{markRaw as x}from"vue";import{addClass as no,BrowserUI as io,CLASS_DEFAULT_GROUP as so,CLASS_DEFAULT_NODE as ao,ELEMENT_DIV as po,extend as lo,isGroup as Ot,OptimisticEventGenerator as co,renderSurface as uo,updateClasses as mo,Vertex as ho}from"@visuallyjs/browser-ui";var ae=class{constructor(){this.unrenderedVertices=new Map;this.eventManager=new co}vertexWillRender(t){this.unrenderedVertices.set(t.id,t)}vertexHasRendered(t){this.unrenderedVertices.delete(t.id),this.unrenderedVertices.size===0&&this.eventManager.fire(fo)}vertexHasUpdated(t){this.eventManager.fire(Oo,t)}},fo="vertices:rendered",Oo="vertex:updated",pe=new Map;function te(e){return pe.has(e)||pe.set(e,new ae),pe.get(e)}function Po(e,t){te(e).vertexHasRendered(t)}function Eo(e,t){te(e).vertexHasUpdated(t)}function Co(e,t){te(e).vertexWillRender(t)}function Oi(e,t,o){te(e).eventManager.bind(t,o)}var Pt={props:{data:Object,model:T,obj:ho,ui:io,el:Element,def:Object,eventInfo:Object},mounted(){let e=this,t=Ot(e.obj)?ut:dt;e.el.firstElementChild&&no(e.el.firstElementChild,t),e.ui.$vertexRendered(e.obj,e.el,e.def,e.eventInfo),Po(e.ui.id,e.obj)},methods:{getModel:function(){return this.model},removeVertex:function(){this.model.remove(this.obj)}},updated(){this.ui.$revalidateElement(this.el),Eo(this.ui.id,this.obj)}},_o={mixins:[Pt],methods:{getNode:function(){return this.obj},removeNode:function(){this.model.removeNode(this.getNode())},updateNode:function(e){this.model.updateNode(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}}},To={methods:{getGroup:function(){return this.obj},removeGroup:function(e){this.model.removeGroup(this.obj,e)},updateGroup:function(e){this.model.updateGroup(this.obj,e);let t=this.ui.getRenderedElement(this.obj.getFullId());this.ui.$revalidateElement(t)}},mixins:[Pt]},le=(e,t)=>{t.parentNode&&t.parentNode.removeChild(t)},Et=(e,t,o,r,s,i,a,l,d)=>{let c=a.component!=null,E=Ot(l),C=[];c||C.push(E?so:ao);let u=c?a.component:{render(m){return m.data.label||""}};if(u){let m=document.createElement(po);mo(m,C),u.mixins==null&&(u.mixins=[]);let _=E?To:_o;u.mixins.find(M=>M===_)||u.mixins.push(_),Co(i.id,l);let v={data:o,model:x(r),ui:x(i),obj:l,el:m,def:x(a),eventInfo:d==null?null:x(d)};if(a.inject)for(let M in a.inject){let ie=a.inject[M],Xt=typeof ie=="function"?ie(l,r):ie;v[M]=Xt}e.push({component:x(u),el:m,o:l.getFullId(),props:v})}};function Ct(e,t,o,r,s,i){let a={reactive:!0,asynchronous:!0,usesWrapperElement:!1,update:(d,c,E,C)=>{},render:(d,c,E,C,u,m,_,D)=>Et(r,d,c,E,C,u,m,_,D),cleanupVertex:le,cleanupPort:le,rerender:(d,c,E,C,u,m,_,D,v)=>{le(_.id,v),Et(r,d,c,E,C,u,m,_,D)}},l=lo(s||{},{view:i||{},id:t});return uo(e,o,a,l)}import{log as _t,Paper as So,Surface as go}from"@visuallyjs/browser-ui";var n=Symbol.for("visuallyjs-service"),O=class{constructor(t){this.context=t;this.i=[];this.s=[];this.a=[];this.p=[]}getSurface(t){this.e(this.s,t,this.l)}getDiagram(t){this.e(this.a,t,this.c)}getPaper(t){this.e(this.p,t,this.u)}getModel(t){this.e(this.i,t,this.r)}getModelDirect(){return this.r}e(t,o,r){if(r!=null)try{o(r)}catch(s){_t(`WARN: could not dispatch ${s}`)}else t.push(o)}setSurface(t){this.l=t,this.n(t.model),this.t(this.s,t)}setDiagram(t){this.c=t,this.n(t.model),t.$ui instanceof go?this.setSurface(t.$ui):t.$ui instanceof So&&this.setPaper(t.$ui),this.t(this.a,t)}setPaper(t){this.u=t,this.n(t.model),this.t(this.p,t)}n(t){this.r=t,this.t(this.i,t)}t(t,o){t.forEach(r=>{try{r(o)}catch(s){_t(`WARN: could not flush all queue entries ${s}`)}})}};import{h as ce,inject as Ao,Teleport as No}from"vue";import{ELEMENT_DIV as yo,EVENT_GROUP_REMOVED as Ro,EVENT_GROUP_UPDATED as xo,EVENT_NODE_REMOVED as Io,EVENT_NODE_UPDATED as Do,EVENT_RENDER_END as vo,clone as Tt}from"@visuallyjs/browser-ui";var St={setup(e){return{service:Ao(n),surfaceId:e.surfaceId||Ve}},name:U,props:{[g]:{type:Object},[Fe]:{type:Object},[b]:{type:Object},[je]:{type:Object},[A]:{type:String},[f]:{type:String}},data:function(){return{vertices:[]}},mounted(){let e=this,t=new T(this.modelOptions||{}),o=this.$refs.root;e.url?t.load({url:e.url}):e.data&&t.load({data:e.data}),this.model=t,this.surface=Ct(t,this.surfaceId,o,this.vertices,Tt(this.renderOptions||{}),Tt(this.viewOptions||{})),this.service.setSurface(this.surface);let r=(i,a)=>{let l=()=>{let c={};return a.originalData||a.updates?c=Object.assign(a.originalData,a.updates):a.newData&&Object.assign(c,a.newData),c},d=this.vertices.find(c=>c.o===i);d!=null&&(d.props.data=l())},s=i=>{let a=this.vertices.findIndex(l=>l.o===i);a!==-1&&this.vertices.splice(a,1)};this.model.bind(Do,i=>{r(i.vertex.getFullId(),i)}),this.model.bind(xo,i=>{r(i.vertex.getFullId(),i)}),this.model.bind(Io,i=>{s(i.node.id)}),this.model.bind(Ro,i=>{s(i.group.id)}),this.surface.bind(vo,()=>setTimeout(()=>this.surface.$redrawEveryConnection()))},render:function(){return ce(yo,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.vertices.map(e=>ce(No,{to:e.el,key:e.o},[ce(e.component,e.props)])).concat(this.$slots.hasOwnProperty("default")?this.$slots.default():[]))}};import{h as p,inject as Mo}from"vue";import{LassoPlugin as bo,SURFACE_MODE_SELECT as gt,SURFACE_MODE_PAN as At,PAN_PATH as wo,PAN_VIEW_BOX as Vo,LASSO_PATH as Lo,LASSO_VIEW_BOX as Bo,ZOOM_TO_FIT_PATH as Uo,ZOOM_TO_FIT_VIEW_BOX as Go,EVENT_UNDOREDO_UPDATE as Fo,TRUE as Nt,FALSE as yt,EVENT_SURFACE_MODE_CHANGED as jo,ELEMENT_DIV as Rt,ATTRIBUTE_CONTROLS_ORIENTATION as ko,ZOOM_IN_OUT_VIEW_BOX as xt,ZOOM_IN_PATH as Ho,ZOOM_OUT_PATH as $o,RESET_SELECTION_PATH as zo,RESET_SELECTION_VIEW_BOX as Wo,CLEAR_PATH as Ko,CLEAR_VIEW_BOX as Jo,ATTRIBUTE_RESET_SELECTION as Yo,CLASS_CONTROLS_RESET_SELECTION as Xo,EVENT_SELECT as Zo,EVENT_DESELECT as qo,EVENT_SELECTION_CLEARED as Qo,supportsPathEditing as er}from"@visuallyjs/browser-ui";var tr="Clear dataset?",de="vjs-selected-mode",It="can-undo",Dt="can-redo",or="data-undo",rr="data-redo",vt="data-mode",nr="data-reset",ir="data-clear",sr="data-zoom-in",ar="data-zoom-out",Mt="vjs-controls-has-selection",bt={setup(e){return{service:Mo(n)}},name:F,props:{clear:{type:Boolean,default:!0},[f]:{type:String},undoRedo:{type:Boolean,default:!0},orientation:{type:String,default:"row"},zoomToExtents:{type:Boolean,default:!0},zoomButtons:{type:Boolean,default:!1},clearMessage:{type:String,default:tr},onMaybeClear:{type:Function},className:{type:String,default:""}},methods:{panMode:function(){this.service.getSurface(e=>e.setMode(At))},selectMode:function(){this.service.getSurface(e=>e.setMode(gt))},zoomToFit:function(){this.service.getSurface(e=>e.zoomToFit())},doClear:function(){this.service.getSurface(e=>{this.onMaybeClear!=null?this.onMaybeClear(()=>e.model.clear()):window.confirm(this.clearMessage)&&e.model.clear()})},undo:function(){this.service.getModel(e=>e.undo())},redo:function(){this.service.getModel(e=>e.redo())},zoomIn:function(){this.service.getSurface(e=>e.zoomIn())},zoomOut:function(){this.service.getSurface(e=>e.zoomOut())},resetSelection(){this.service.getSurface(e=>{e.model.clearSelection(),er(e)&&e.stopEditingPath()})},updateSelectionState:function(){this.service.getSurface(e=>{e.model.getSelection().isEmpty()?this.$refs.root.removeAttribute(Mt):this.$refs.root.setAttribute(Mt,"true")})}},data:function(){return{ready:!1,hasLasso:!1}},render(){if(this.ready){let e=[];return this.showPan&&(e.push(p("i",{class:`vjs-pan-mode ${de}`,[vt]:At,onClick:()=>this.panMode(),title:"Pan mode"},[p("svg",{viewBox:Vo,stroke:"currentColor",fill:"none"},[p("path",{d:wo})])])),e.push(p("i",{class:"vjs-select-mode",[vt]:gt,onClick:()=>this.selectMode(),title:"Select mode"},[p("svg",{viewBox:Bo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Lo})])]))),this.undoRedo&&(e.push(p("i",{class:"vjs-undo",[or]:!0,title:"Undo last action",onClick:()=>this.undo()})),e.push(p("i",{class:"vjs-redo",[rr]:!0,title:"Redo last action",onClick:()=>this.redo()}))),this.zoomToExtents&&e.push(p("i",{class:"vjs-zoom-to-fit",[nr]:"true",onClick:()=>this.zoomToFit(),title:"Zoom to Fit"},[p("svg",{viewBox:Go,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Uo})])])),this.zoomButtons&&(e.push(p("i",{class:"vjs-zoom-in",[sr]:"true",onClick:()=>this.zoomIn(),title:"Zoom In"},[p("svg",{viewBox:xt,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Ho})])])),e.push(p("i",{class:"vjs-zoom-out",[ar]:"true",onClick:()=>this.zoomOut(),title:"Zoom Out"},[p("svg",{viewBox:xt,stroke:"currentColor",fill:"currentColor"},[p("path",{d:$o})])]))),e.push(p("i",{class:Xo,[Yo]:"true",onClick:()=>{this.resetSelection()}},[p("svg",{viewBox:Wo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:zo})])])),this.clear&&e.push(p("i",{class:"vjs-clear-dataset",[ir]:"true",onClick:()=>{this.doClear()}},[p("svg",{viewBox:Jo,stroke:"currentColor",fill:"currentColor"},[p("path",{d:Ko})])])),p(Rt,{class:`vjs-controls ${this.className}`,ref:"root",[It]:!1,[Dt]:!1,[ko]:this.orientation},e)}else return p(Rt,{ref:"root"})},mounted(){this.service.getSurface(e=>{let t=e.getPlugin(bo.type);this.showPan=t!=null,e.bind(jo,o=>{e.removeClass(e.$getSelector(this.$refs.root,"[data-mode]"),de),e.addClass(e.$getSelector(this.$refs.root,"[data-mode='"+o+"']"),de)}),e.model.bind(Fo,o=>{this.$refs.root.setAttribute(It,o.undoCount>0?Nt:yt),this.$refs.root.setAttribute(Dt,o.redoCount>0?Nt:yt)}),e.model.bind(Zo,()=>this.updateSelectionState()),e.model.bind(qo,()=>this.updateSelectionState()),e.model.bind(Qo,()=>this.updateSelectionState()),this.ready=!0})}};import{h as P,inject as pr}from"vue";import{CLASS_CONTROLS as lr,CLASS_EXPORT_CONTROLS as cr,ELEMENT_DIV as dr,ImageExportUI as wt,SvgExportUI as ur,TYPE_JPG as mr,TYPE_PNG as hr,TYPE_SVG as fr}from"@visuallyjs/browser-ui";var Vt={name:j,setup(e){return{service:pr(n)}},props:{surfaceId:{type:String},showLabel:{type:Boolean,default:!0},label:{type:String,default:"Export :"},margins:{type:Object},svgOptions:{type:Object},imageOptions:{type:Object},allowSvgExport:{type:Boolean,default:!0},allowPngExport:{type:Boolean,default:!0},allowJpgExport:{type:Boolean,default:!0}},methods:{loadSurface:function(e){this.service.getSurface(e)},exportSVG:function(){this.loadSurface(e=>{let t=this.svgOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new ur(e).export(t)})},exportJPG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),t.type="image/jpeg",new wt(e).export(t)})},exportPNG:function(){this.loadSurface(e=>{let t=this.imageOptions||{};this.margins!=null&&t.margins==null&&Object.assign(t,this.margins),new wt(e).export(t)})}},render(){let e=this.showLabel!==!1,t=this.allowSvgExport!==!1,o=this.allowPngExport!==!1,r=this.allowJpgExport!==!1,s=[];return t&&s.push(P("i",{},[P("a",{href:"#","data-type":fr,onClick:()=>this.exportSVG()},"SVG")])),o&&s.push(P("i",{},[P("a",{href:"#","data-type":hr,onClick:()=>this.exportPNG()},"PNG")])),r&&s.push(P("i",{},[P("a",{href:"#","data-type":mr,onClick:()=>this.exportJPG()},"JPG")])),e&&s.unshift(P("span",{},[this.label])),P(dr,{class:`${lr} ${cr}`},s)}};import{h as Or,inject as Pr}from"vue";import{ELEMENT_DIV as Er,MiniviewPlugin as Cr}from"@visuallyjs/browser-ui";var Lt={setup(e){return{service:Pr(n)}},name:B,props:{[f]:{type:String},[S]:{type:String,default:""},[Ue]:{type:Boolean,default:!0},[Be]:{type:Boolean,default:!0},[Le]:{type:Function}},mounted:function(){this.service.getSurface(e=>{e.addPlugin({type:Cr.type,options:{container:this.$el,activeTracking:this.PROP_ACTIVE_TRACKING,clickToCenter:this.PROP_CLICK_TO_CENTER,typeFunction:this.PROP_TYPE_FUNCTION}})})},render:function(e){return Or(Er,{ref:"root",class:e.className})}};import{h as _r,inject as Tr}from"vue";import{createDiagram as Sr,ELEMENT_DIV as gr}from"@visuallyjs/browser-ui";var Bt={setup(e){return{service:Tr(n)}},name:k,props:{[g]:{type:Object},[A]:{type:String},[b]:{type:Object},[R]:{type:Object}},mounted(){let e=this.$refs.root;this.diagram=Sr(e,this.options,this.modelOptions),this.service.setDiagram(this.diagram),this.data?this.diagram.load({data:this.data}):this.url&&this.diagram.load({url:this.url})},render:function(){return _r(gr,{ref:"root",class:"vjs-vue-surface",style:{width:"100%",height:"100%"}},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as Ut,inject as Ar}from"vue";import{ColumnChart as Nr,BarChart as yr,CategoryValueChart as Rr,ELEMENT_DIV as Gt,LineChart as xr,AreaChart as Ir,PieChart as Dr,ScatterChart as vr,BubbleChart as Mr,GaugeChart as br,SankeyChart as wr}from"@visuallyjs/browser-ui";var Ft={[S]:{type:String},[g]:{type:Object},[A]:{type:String},[We]:{type:Boolean,default:!1}},jt={setup(){return{service:Ar(n)}},render:function(){return Ut(Gt,{class:`${this.className}`,ref:"root"})}};function h(e,t,o=!0){let r=y(N({},Ft),{[R]:{type:Object}}),s={};return o&&(r[se]={type:Function},s[se]=function(i){this.chart.setDataSourceFilter(i)}),y(N({},jt),{name:e,props:r,watch:s,mounted(){let i=this.$refs.root,a=o?Object.assign({dataSourceFilter:this.dataSourceFilter},this.options):this.options;this.data&&(a.data=this.data),this.url&&(a.url=this.url);let l=()=>{this.chart=new t(i,a)};this.useModel?this.service.getModel(d=>{a.dataSource=d,l()}):l()}})}var ue=h($,Nr),me=h(z,yr),he=h(W,Rr,!1),fe=h(Y,Dr),Oe=h(K,xr),Pe=h(J,Ir),Ee=h(X,vr),Ce=h(Z,Mr),_e=h(q,br,!1),Te=y(N({},jt),{name:Q,props:y(N({},Ft),{[$e]:{type:String},[ze]:{type:Object},[ke]:{type:Boolean},[He]:{type:String},[R]:{type:Object}}),mounted(){let e=this.$refs.root,t=Object.assign({},this.options);this.interactive!=null&&(t.interactive=this.interactive),this.pivot!=null&&(t.pivot=this.pivot),this.csvData&&(t.csvData=this.csvData),this.jsonData&&(t.jsonData=this.jsonData),this.url&&(t.url=this.url);let o=()=>{this.chart=new wr(e,t)};this.useModel?this.service.getModel(r=>{t.dataSource=r,o()}):o()},watch:{pivot(e){this.chart&&this.chart.pivot(e)}},render:function(){return Ut(Gt,{class:`${this.className}`,ref:"root"})}});import{h as Vr,inject as Lr}from"vue";import{defaultDataGenerator as Br,ELEMENT_DIV as Ur,Palette as Gr}from"@visuallyjs/browser-ui";var kt={setup(e){return{service:Lr(n)}},name:G,props:{[f]:{type:String},[Ke]:{type:String},[Je]:{type:Function},[Ye]:{type:Function},[Xe]:{type:Function},[Ze]:{type:Boolean,default:!1},[qe]:{type:Boolean,default:!0},[Qe]:{type:Boolean,default:!0},[et]:{type:Boolean,default:!1},[tt]:{type:Boolean,default:!1},[st]:Object,[ot]:Function,[at]:Function,[S]:String,[Ge]:String,[rt]:{type:Boolean,default:!1},[it]:{type:Boolean,default:!1},[nt]:{type:Boolean,default:!1}},mounted:function(){let e=this;this.service.getSurface(t=>{let o={source:this.$refs.root,selector:e.selector,dataGenerator:r=>e.dataGenerator?e.dataGenerator(r):Br(r),allowDropOnEdge:e.allowDropOnEdge===!0,allowDropOnGroup:e.allowDropOnGroup!==!1,allowDropOnCanvas:e.allowDropOnCanvas!==!1,allowDropOnNode:e.allowDropOnNode===!0,ignoreDropOnNode:e.ignoreDropOnNode===!0,canvasDropFilter:e.canvasDropFilter,onVertexAdded:e.onVertexAdded,dragSize:e.dragSize,mode:e.mode};e.groupIdentifier!=null&&(o.groupIdentifier=e.groupIdentifier),e.typeGenerator!=null&&(o.typeGenerator=e.typeGenerator),this.palette=new Gr(t,o)})},render:function(){return Vr(Ur,{ref:"root",class:this.className||""},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{provide as Fr}from"vue";var Se={setup(){Fr(n,new O("SurfaceProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as jr,inject as kr}from"vue";import{CLASS_SHAPE as Hr,convertToMultilineText as Ht,DEFAULT_LABEL_FILL_RATIO as ge,ELEMENT_SVG as $r}from"@visuallyjs/browser-ui";var Ae={name:w,props:{data:{type:Object},showLabels:{type:Boolean,default:!1},labelProperty:{type:String,default:"label"},labelStrokeWidth:{type:Number},multilineLabels:{type:Boolean,default:!0},labelFillRatio:{type:Number,default:ge},labelColor:{type:String,default:"#000000"},font:{type:Object}},setup(){return{service:kr(n)}},mounted(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.appendChild(o),this.showLabels){let r=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(r),this.multilineLabels!=!1&&Ht(r,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ge))}})},updated(){this.service.getSurface(e=>{let t=e.getShapeLibrary(),o=t.renderCompiledShape(Object.assign({sw:this.getOutlineWidth()},this.data));if(this.$refs.container.replaceChildren(o),this.showLabels){let r=t.renderShapeLabel(this.data,this.labelProperty,this.labelStrokeWidth,null,this.labelColor,this.labelColor,this.font);this.$refs.container.appendChild(r),this.multilineLabels!=!1&&Ht(r,this.data[this.labelProperty]||"",this.getWidth()*(this.labelFillRatio||ge))}})},render:function(){return jr($r,{ref:"container",preserveAspectRatio:"none",fill:this.getFill(),stroke:this.getOutline(),"stroke-width":this.getOutlineWidth(),viewBox:"0 0 "+this.getWidth()+" "+this.getHeight(),class:Hr})},methods:{getWidth:function(){return this.data.width||pt},getHeight:function(){return this.data.height||lt},getFill:function(){return this.data.fill||"#FFFFFF"},getOutline:function(){return this.data.outline||"#000000"},getOutlineWidth(){return this.data.outlineWidth||2}}};import{h as zr,inject as Wr}from"vue";import{ELEMENT_DIV as Kr,ShapePalette as Jr}from"@visuallyjs/browser-ui";var Ne={name:V,props:{surfaceId:{type:String},dragSize:Object,iconSize:Object,fill:String,outline:String,showAllMessage:String,selectAfterDrop:Boolean,paletteStrokeWidth:Number,dataGenerator:Function,initialSet:String,mode:String,allowClickToAdd:Boolean,onVertexAdded:Function,showLabels:Boolean,inspector:{type:Boolean,default:!0},preparedShapes:Array},setup(e){return{service:Wr(n)}},mounted(){this.service.getSurface(e=>{new Jr(e,{container:this.$refs.container,shapeLibrary:e.getShapeLibrary(),dragSize:this.dragSize,iconSize:this.iconSize,fill:this.fill,outline:this.outline,showAllMessage:this.showAllMessage,selectAfterDrop:this.selectAfterDrop,paletteStrokeWidth:this.paletteStrokeWidth,dataGenerator:this.dataGenerator,initialSet:this.initialSet,mode:this.mode,allowClickToAdd:this.allowClickToAdd,onVertexAdded:this.onVertexAdded,showLabels:this.showLabels,inspector:this.inspector,preparedShapes:this.preparedShapes})})},render:function(){return zr(Kr,{ref:"container"})}};import{provide as $t,readonly as Yr,inject as Xr,h as Zr}from"vue";import{ELEMENT_DIV as qr,Inspector as Qr,log as en}from"@visuallyjs/browser-ui";var I=Symbol.for("VueInspectorGetter"),tn=Symbol.for("VueInspectorSetter");function on(){let e=[],t=null;function o(i){try{i(t)}catch(a){en("WARN: inspector listener threw an exception",a)}}let r={listen:i=>{t!=null?o(i):e.push(i)}},s={inspector:i=>{t=i,e.forEach(o)}};return $t(tn,s),$t(I,Yr(r)),s}var ye={name:ee,props:{autoCommit:{type:Boolean,default:!0},multipleSelections:{type:Boolean,default:!0},filter:Function,renderEmptyContainer:Function,refresh:Function,className:String,showCloseButton:Boolean,afterUpdate:Function},setup(e){let t=on();return{service:Xr(n),inspectorProvider:t}},mounted(){this.service.getSurface(e=>{let t=new Qr({container:this.$refs.root,ui:e,renderEmptyContainer:this.renderEmptyContainer||(()=>console.log("rendering empty")),refresh:(o,r)=>{this.refresh&&this.refresh(o),setTimeout(r)},autoCommit:this.autoCommit,multipleSelections:this.multipleSelections,filter:this.filter,showCloseButton:this.showCloseButton,afterUpdate:()=>this.afterUpdate?this.afterUpdate(e):null});this.inspectorProvider.inspector(t)})},render(){return Zr(qr,{ref:"root"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])}};import{h as rn,inject as nn}from"vue";import{EdgeTypePicker as sn,ELEMENT_DIV as an,log as pn}from"@visuallyjs/browser-ui";var Re={name:L,props:{propertyName:String},setup(){return{inspectorProvider:nn(I)}},mounted(){this.inspectorProvider?this.inspectorProvider.listen(e=>{let t=new sn(e.$ui,this.$refs.container,e.$ui.$getEdgePropertyMappings(),e.getValue(this.propertyName),(o,r)=>{e.setValue(this.propertyName,r)});t.render(this.propertyName,e.m),e.onChange(()=>{t.select(this.propertyName,e.getValue(this.propertyName))})}):pn("WARN: EdgeTypePicker not instantiated inside an InspectorComponent. Cannot mount.")},render:function(){return rn(an,{ref:"container"})}};import{h as oe,inject as ln}from"vue";import{CLASS_COLOR_PICKER as zt,CLASS_COLOR_PICKER_SWATCH as Wt,CLASS_COLOR_PICKER_SWATCHES as Kt,EVENT_CONTEXT_UPDATE as cn,ELEMENT_DIV as xe,INSPECTOR_CONTEXT_RECENT_COLORS as re}from"@visuallyjs/browser-ui";var Jt={render(){let e=this.swatches.map(t=>oe(xe,{title:t,class:Wt,style:`background-color:${t}`,"data-color":t,onClick:()=>this.selectSwatch(t)}));return oe(xe,{class:`${zt}`},[oe("input",{type:"color","vjs-att":this.propertyName,ref:"colorInput"}),oe(xe,{class:Kt},e)])},props:{propertyName:String,maxColors:{type:Number,default:10}},data:()=>({CLASS_COLOR_PICKER:zt,CLASS_COLOR_PICKER_SWATCHES:Kt,CLASS_COLOR_PICKER_SWATCH:Wt,colorInput:null,swatches:[]}),mounted(){let e=ln(I);e&&e.listen(t=>{this.inspector=t,this.swatches=t.ensureContext(re,()=>[]),this.colorInput=this.$refs.colorInput,this.colorInput.addEventListener("change",this.colorPicked),t.bind(cn,o=>{o.key===re&&(this.swatches=o.value.slice())}),t.bind("change",this.setCurrentColor),this.setCurrentColor()})},methods:{addColor:function(e){let t=this.inspector.ensureContext(re,()=>[]);if(e=e.toUpperCase(),!(t.find(r=>r.toUpperCase()===e)!=null)){let r=this.maxColors||10,s=t.slice();s.unshift(e),s.length>r&&(s.length=r),this.inspector.updateContext(re,s)}},colorPicked:function(){let e=this.colorInput.value;this.inspector.setValue(this.propertyName,e),this.addColor(e)},selectSwatch:function(e){this.inspector.setValue(this.propertyName,e),this.colorInput.value=e},setCurrentColor:function(){let e=this.inspector.getValue(this.propertyName);e!=null&&(this.colorInput.value=e,this.addColor(e))}}};import{h as ne,inject as dn,nextTick as un,Teleport as mn}from"vue";import{ELEMENT_DIV as Ie,uuid as hn}from"@visuallyjs/browser-ui";var De={props:{placement:{type:String,default:"floating"},position:{type:Object},constraints:{type:Object}},data:()=>({mounted:!1,surface:null}),setup(e){return{service:dn(n)}},mounted(){this.service.getSurface(e=>{this.surface=e,this.mounted=!0;let t=this.position||{x:0,y:0};un().then(()=>{this.placement==="floating"?e.floatElement(this.$refs.root,t):e.fixElement(this.$refs.fixedEl,t,this.constraints)})})},render(){return ne(Ie,{ref:"root"},this.mounted?this.placement==="floating"?ne(Ie,{},this.$slots.hasOwnProperty("default")?this.$slots.default():[]):ne(mn,{to:this.surface.vertexLayer,key:hn()},ne(Ie,{ref:"fixedEl"},this.$slots.hasOwnProperty("default")?this.$slots.default():[])):[])}};import{provide as fn}from"vue";var ve={setup(){fn(n,new O("DiagramProvider"))},render(){return this.$slots.hasOwnProperty("default")?this.$slots.default():[]}};import{h as On,inject as Pn}from"vue";import{DiagramPalette as En,ELEMENT_DIV as Cn,log as _n}from"@visuallyjs/browser-ui";var Me={name:H,props:{fill:String,outline:String,dragSize:Object,inspector:{type:Boolean,default:!0},iconSize:Object,showLabels:Boolean,paletteStrokeWidth:Number,showAllMessage:String,onCellAdded:Function,mode:String,allowClickToAdd:Boolean,autoExitDrawMode:Boolean,selectAfterAdd:{type:Boolean,default:!0},className:String,diagram:{type:Object},onVertexAdded:Function,preparedShapes:Array},setup(e){return{service:Pn(n)}},mounted(){if(this.service==null&&this.diagram==null)_n("Cannot mount DiagramPalette - no service found and Diagram not passed in as a prop");else{let e=t=>{new En(this.$refs.container,t,{fill:this.fill,outline:this.outline,dragSize:this.dragSize,inspector:this.inspector,iconSize:this.iconSize,showLabels:this.showLabels,paletteStrokeWidth:this.paletteStrokeWidth,showAllMessage:this.showAllMessage,onCellAdded:this.onCellAdded,mode:this.mode,allowClickToAdd:this.allowClickToAdd,autoExitDrawMode:this.autoExitDrawMode,selectAfterAdd:this.selectAfterAdd,onVertexAdded:this.onVertexAdded,preparedShapes:this.preparedShapes})};this.diagram?e(this.diagram):this.service.getDiagram(e)}},render:function(){return On(Cn,{ref:"container"})}};var wp={install:function(e,t){e.component(mt,Se),e.component(ht,ve),e.component(U,St),e.component(k,Bt),e.component(B,Lt),e.component(F,bt),e.component(j,Vt),e.component(G,kt),e.component(H,Me),e.component(z,me),e.component($,ue),e.component(W,he),e.component(K,Oe),e.component(J,Pe),e.component(Y,fe),e.component(Q,Te),e.component(q,_e),e.component(Z,Ce),e.component(X,Ee),e.component(w,Ae),e.component(V,Ne),e.component(L,Re),e.component(ct,Jt),e.component(ee,ye),e.component(ft,De),e.provide(n,new O("root"))}};import{ref as Tn,onMounted as Sn,onUnmounted as gn}from"vue";import{EVENT_ZOOM as Yt}from"@visuallyjs/browser-ui";function Fp(e){let t=Tn(e.getZoom()),o=r=>{t.value=r.zoom};return Sn(()=>{e.bind(Yt,o),t.value=e.getZoom()}),gn(()=>{e.unbind(Yt,o)}),t}export{Pe as AreaChartComponent,me as BarChartComponent,To as BaseGroupComponent,_o as BaseNodeComponent,T as BrowserUIVueModel,Ce as BubbleChartComponent,ut as CLASS_VUE_GROUP,dt as CLASS_VUE_NODE,J as COMPONENT_AREA_CHART,z as COMPONENT_BAR_CHART,Z as COMPONENT_BUBBLE_CHART,$ as COMPONENT_COLUMN_CHART,F as COMPONENT_CONTROLS,k as COMPONENT_DIAGRAM,H as COMPONENT_DIAGRAM_PALETTE,ht as COMPONENT_DIAGRAM_PROVIDER,j as COMPONENT_EXPORT_CONTROLS,q as COMPONENT_GAUGE_CHART,ee as COMPONENT_INSPECTOR,K as COMPONENT_LINE_CHART,B as COMPONENT_MINIVIEW,G as COMPONENT_PALETTE,Y as COMPONENT_PIE_CHART,Q as COMPONENT_SANKEY_CHART,X as COMPONENT_SCATTER_CHART,U as COMPONENT_SURFACE,mt as COMPONENT_SURFACE_PROVIDER,W as COMPONENT_XY_CHART,Jt as ColorPickerComponent,ue as ColumnChartComponent,bt as ControlsComponent,lt as DEFAULT_SHAPE_HEIGHT,pt as DEFAULT_SHAPE_WIDTH,Ve as DEFAULT_VUE_SURFACE_ID,De as DecoratorComponent,Bt as DiagramComponent,ve as DiagramProvider,Oo as EVENT_VERTEX_UPDATED,fo as EVENT_VERTICES_RENDERED,Re as EdgeTypePickerComponent,Vt as ExportControlsComponent,_e as GaugeChartComponent,ye as InspectorComponent,I as InspectorGetterSymbol,tn as InspectorSetterSymbol,Oe as LineChartComponent,Lt as MiniviewComponent,Ue as PROP_ACTIVE_TRACKING,it as PROP_ALLOW_CLICK_TO_ADD,qe as PROP_ALLOW_DROP_ON_CANVAS,Ze as PROP_ALLOW_DROP_ON_EDGE,Qe as PROP_ALLOW_DROP_ON_GROUP,et as PROP_ALLOW_DROP_ON_NODE,at as PROP_CANVAS_DROP_FILTER,S as PROP_CLASS_NAME,nt as PROP_CLICK_TO_ADD_ONLY,Be as PROP_CLICK_TO_CENTER,$e as PROP_CSV_DATA,g as PROP_DATA,Je as PROP_DATA_GENERATOR,se as PROP_DATA_SOURCE_FILTER,st as PROP_DRAG_SIZE,Xe as PROP_GROUP_IDENTIFIER,ti as PROP_ID,tt as PROP_IGNORE_DROP_ON_NODE,ke as PROP_INTERACTIVE,ze as PROP_JSON_DATA,Ge as PROP_MODE,b as PROP_MODEL_OPTIONS,ot as PROP_ON_VERTEX_ADDED,R as PROP_OPTIONS,He as PROP_PIVOT,Fe as PROP_RENDER_OPTIONS,Ke as PROP_SELECTOR,rt as PROP_SELECT_AFTER_ADD,f as PROP_SURFACE_ID,Le as PROP_TYPE_FUNCTION,Ye as PROP_TYPE_GENERATOR,A as PROP_URL,We as PROP_USE_MODEL,je as PROP_VIEW_OPTIONS,kt as PaletteComponent,fe as PieChartComponent,Te as SankeyChartComponent,Ee as ScatterChartComponent,Ae as ShapeComponent,Ne as ShapePaletteComponent,St as SurfaceComponent,Se as SurfaceProvider,ct as TAG_COLOR_PICKER,ft as TAG_DECORATOR,L as TAG_EDGE_TYPE_PICKER,w as TAG_SHAPE,V as TAG_SHAPE_PALETTE,wp as VisuallyJsPlugin,O as VisuallyJsService,n as VisuallyJsServiceKey,he as XYChartComponent,Ct as addSurface,Oi as bindToDevLifecycle,on as doProvideInspector,In as newInstance,Fp as useZoom};