@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.
210 lines (209 loc) • 7.57 kB
JavaScript
import { defineComponent as h, toRef as d } from "vue";
import { Panel as z, useVueFlow as H } from "@vue2-flow/core";
function w(e, t, n, s, a, c, l, _) {
var o = typeof e == "function" ? e.options : e;
t && (o.render = t, o.staticRenderFns = n, o._compiled = !0), s && (o.functional = !0), c && (o._scopeId = "data-v-" + c);
var i;
if (l ? (i = function(r) {
r = r || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !r && typeof __VUE_SSR_CONTEXT__ < "u" && (r = __VUE_SSR_CONTEXT__), a && a.call(this, r), r && r._registeredComponents && r._registeredComponents.add(l);
}, o._ssrRegister = i) : a && (i = _ ? function() {
a.call(
this,
(o.functional ? this.parent : this).$root.$options.shadowRoot
);
} : a), i)
if (o.functional) {
o._injectStyles = i;
var v = o.render;
o.render = function(m, f) {
return i.call(f), v(m, f);
};
} else {
var u = o.beforeCreate;
o.beforeCreate = u ? [].concat(u, i) : [i];
}
return {
exports: e,
options: o
};
}
const I = h({
name: "ControlButton",
emits: ["click"],
setup(e, { emit: t }) {
function n(s) {
t("click", s);
}
return {
onClick: n
};
}
});
var k = 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 = [], B = /* @__PURE__ */ w(
I,
k,
b,
!1,
null,
null,
null,
null
);
const $ = B.exports;
var R = 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 Z = { render: R };
var F = 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 M = { render: F };
var x = 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: x };
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 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: O };
var A = 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 S = { render: A }, T = h({
name: "Controls",
components: {
Panel: z,
ControlButton: $
},
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: s,
elementsSelectable: a,
setInteractive: c,
zoomIn: l,
zoomOut: _,
fitView: o,
viewport: i,
minZoom: v,
maxZoom: u
} = H(), r = d(
() => n.value || s.value || a.value
), m = d(() => i.value.zoom <= v.value), f = d(() => i.value.zoom >= u.value);
function p() {
l(), t("zoomIn");
}
function C() {
_(), t("zoomOut");
}
function g() {
o(e.fitViewParams), t("fitView");
}
function V() {
c(!r.value), t("interactionChange", !r.value);
}
return {
nodesDraggable: n,
nodesConnectable: s,
elementsSelectable: a,
setInteractive: c,
zoomIn: l,
zoomOut: _,
fitView: o,
viewport: i,
minZoom: v,
maxZoom: u,
isInteractive: r,
minZoomReached: m,
maxZoomReached: f,
onZoomInHandler: p,
onZoomOutHandler: C,
onFitViewHandler: g,
onInteractiveChangeHandler: V,
PlusIcon: Z,
MinusIcon: M,
FitView: y,
Lock: P,
Unlock: S
};
}
});
var U = 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);
}, L = [], N = /* @__PURE__ */ w(
T,
U,
L,
!1,
null,
null,
null,
null
);
const E = N.exports;
export {
$ as ControlButton,
E as Controls
};