@vue2-flow/controls
Version:
This is a control component for Vue Flow. It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.
2 lines (1 loc) • 6.02 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("vue"),h=require("@vue2-flow/core");function w(e,t,n,a,s,c,l,v){var o=typeof e=="function"?e.options:e;t&&(o.render=t,o.staticRenderFns=n,o._compiled=!0),a&&(o.functional=!0),c&&(o._scopeId="data-v-"+c);var i;if(l?(i=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__<"u"&&(r=__VUE_SSR_CONTEXT__),s&&s.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(l)},o._ssrRegister=i):s&&(i=v?function(){s.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:s),i)if(o.functional){o._injectStyles=i;var f=o.render;o.render=function(m,d){return i.call(d),f(m,d)}}else{var u=o.beforeCreate;o.beforeCreate=u?[].concat(u,i):[i]}return{exports:e,options:o}}const H=_.defineComponent({name:"ControlButton",emits:["click"],setup(e,{emit:t}){function n(a){t("click",a)}return{onClick:n}}});var I=function(){var t=this,n=t._self._c;return t._self._setupProxy,n("button",{staticClass:"vue-flow__controls-button",on:{click:t.onClick}},[t._t("default")],2)},b=[],k=w(H,I,b,!1,null,null,null,null);const p=k.exports;var B=function(){var t=this,n=t._self._c;return n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"}},[n("path",{attrs:{d:"M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"}})])};const R={render:B};var $=function(){var t=this,n=t._self._c;return n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 5"}},[n("path",{attrs:{d:"M0 0h32v4.2H0z"}})])};const Z={render:$};var M=function(){var t=this,n=t._self._c;return n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 30"}},[n("path",{attrs:{d:"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0m.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.92.92 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77z"}})])};const y={render:M};var F=function(){var t=this,n=t._self._c;return n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 25 32"}},[n("path",{attrs:{d:"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0S4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047M12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047m4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724z"}})])};const P={render:F};var O=function(){var t=this,n=t._self._c;return n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 25 32"}},[n("path",{attrs:{d:"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438s4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047M12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047"}})])};const x={render:O},S=_.defineComponent({name:"Controls",components:{Panel:h.Panel,ControlButton:p},props:{showZoom:{type:Boolean,default:!0},showFitView:{type:Boolean,default:!0},showInteractive:{type:Boolean,default:!0},fitViewParams:{type:Object,default:void 0},position:{type:String,default:"bottom-left",validator(e){return["top-left","top-right","top-center","bottom-left","bottom-right","bottom-center"].includes(e)}}},emits:["zoomIn","zoomOut","fitView","interactionChange"],setup(e,{emit:t}){const{nodesDraggable:n,nodesConnectable:a,elementsSelectable:s,setInteractive:c,zoomIn:l,zoomOut:v,fitView:o,viewport:i,minZoom:f,maxZoom:u}=h.useVueFlow(),r=_.toRef(()=>n.value||a.value||s.value),m=_.toRef(()=>i.value.zoom<=f.value),d=_.toRef(()=>i.value.zoom>=u.value);function C(){l(),t("zoomIn")}function g(){v(),t("zoomOut")}function V(){o(e.fitViewParams),t("fitView")}function z(){c(!r.value),t("interactionChange",!r.value)}return{nodesDraggable:n,nodesConnectable:a,elementsSelectable:s,setInteractive:c,zoomIn:l,zoomOut:v,fitView:o,viewport:i,minZoom:f,maxZoom:u,isInteractive:r,minZoomReached:m,maxZoomReached:d,onZoomInHandler:C,onZoomOutHandler:g,onFitViewHandler:V,onInteractiveChangeHandler:z,PlusIcon:R,MinusIcon:Z,FitView:y,Lock:P,Unlock:x}}});var A=function(){var t=this,n=t._self._c;return t._self._setupProxy,n("Panel",{staticClass:"vue-flow__controls",attrs:{position:t.position}},[t._t("top"),t.showZoom?[t._t("control-zoom-in",function(){return[n("ControlButton",{staticClass:"vue-flow__controls-zoomin",attrs:{disabled:t.maxZoomReached},on:{click:t.onZoomInHandler}},[t._t("icon-zoom-in",function(){return[n(t.PlusIcon,{tag:"component"})]})],2)]}),t._t("control-zoom-out",function(){return[n("ControlButton",{staticClass:"vue-flow__controls-zoomout",attrs:{disabled:t.minZoomReached},on:{click:t.onZoomOutHandler}},[t._t("icon-zoom-out",function(){return[n(t.MinusIcon,{tag:"component"})]})],2)]})]:t._e(),t.showFitView?[t._t("control-fit-view",function(){return[n("ControlButton",{staticClass:"vue-flow__controls-fitview",on:{click:t.onFitViewHandler}},[t._t("icon-fit-view",function(){return[n(t.FitView,{tag:"component"})]})],2)]})]:t._e(),t.showInteractive?[t._t("control-interactive",function(){return[t.showInteractive?n("ControlButton",{staticClass:"vue-flow__controls-interactive",on:{click:t.onInteractiveChangeHandler}},[t.isInteractive?t._t("icon-unlock",function(){return[n(t.Unlock,{tag:"component"})]}):t._e(),t.isInteractive?t._e():t._t("icon-lock",function(){return[n(t.Lock,{tag:"component"})]})],2):t._e()]})]:t._e(),t._t("default")],2)},T=[],U=w(S,A,T,!1,null,null,null,null);const q=U.exports;exports.ControlButton=p;exports.Controls=q;