vue-konva
Version:
Vue binding to canvas element via Konva framework
254 lines (253 loc) • 6.89 kB
JavaScript
import { defineComponent as S, getCurrentInstance as A, reactive as C, ref as g, onMounted as E, onUpdated as T, onBeforeUnmount as x, watch as N, h as L, onUnmounted as K } from "vue";
import u from "konva";
function m(a) {
if (!u.autoDrawEnabled) {
const o = a.getLayer() || a.getStage();
o && o.batchDraw();
}
}
const w = { key: !0, style: !0, elm: !0, isRootInsert: !0 }, y = ".vue-konva-event";
function P(a, o, t, i) {
const e = a.__konvaNode, d = {};
let n = !1;
for (let r in t) {
if (w.hasOwnProperty(r))
continue;
const c = r.slice(0, 2) === "on", f = t[r] !== o[r];
if (c && f) {
let s = r.slice(2).toLowerCase();
s.slice(0, 7) === "content" && (s = "content" + s.slice(7, 1).toUpperCase() + s.slice(8)), e == null || e.off(s + y, t[r]);
}
!o.hasOwnProperty(r) && (e == null || e.setAttr(r, void 0));
}
for (let r in o) {
if (w.hasOwnProperty(r))
continue;
let c = r.slice(0, 2) === "on";
const f = t[r] !== o[r];
if (c && f) {
let l = r.slice(2).toLowerCase();
l.slice(0, 7) === "content" && (l = "content" + l.slice(7, 1).toUpperCase() + l.slice(8)), o[r] && (e == null || e.off(l + y), e == null || e.on(l + y, o[r]));
}
!c && (o[r] !== t[r] || i && o[r] !== (e == null ? void 0 : e.getAttr(r))) && (n = !0, d[r] = o[r]);
}
n && e && (e.setAttrs(d), m(e));
}
const R = "v";
function I(a) {
function o(t) {
return t != null && t.__konvaNode ? t : t != null && t.parent ? o(t.parent) : (console.error("vue-konva error: Can not find parent node"), null);
}
return o(a.parent);
}
function b(a) {
return a.component ? a.component.__konvaNode || b(a.component.subTree) : null;
}
function M(a) {
const { el: o, component: t } = a, i = b(a);
if (o != null && o.tagName && t && !i) {
const e = o.tagName.toLowerCase();
return console.error(
`vue-konva error: You are trying to render "${e}" inside your component tree. Looks like it is not a Konva node. You can render only Konva components inside the Stage.`
), null;
}
return i;
}
function U(a) {
const o = (e) => !!(e != null && e.hasOwnProperty("component")), t = (e) => Array.isArray(e), i = (e) => o(e) ? [e, ...i(e.children)] : t(e) ? e.flatMap(i) : [];
return i(a.children);
}
function O(a, o) {
const t = U(a), i = [];
t.forEach((d) => {
const n = M(d);
n && i.push(n);
});
let e = !1;
i.forEach((d, n) => {
d.getZIndex() !== n && (d.setZIndex(n), e = !0);
}), e && m(o);
}
const j = S({
name: "Stage",
props: {
config: {
type: Object,
default: function() {
return {};
}
},
__useStrictMode: {
type: Boolean
}
},
inheritAttrs: !1,
setup(a, { attrs: o, slots: t, expose: i }) {
const e = A();
if (!e) return;
const d = C({}), n = g(null), r = new u.Stage({
width: a.config.width,
height: a.config.height,
container: document.createElement("div")
// Fake container. Will be replaced
});
e.__konvaNode = r, l();
function c() {
return e == null ? void 0 : e.__konvaNode;
}
function f() {
return e == null ? void 0 : e.__konvaNode;
}
function l() {
if (!e) return;
const s = d || {}, p = {
...o,
...a.config
};
P(e, p, s, a.__useStrictMode), Object.assign(d, p);
}
return E(() => {
n.value && (n.value.innerHTML = "", r.container(n.value)), l();
}), T(() => {
l(), O(e.subTree, r);
}), x(() => {
r.destroy();
}), N(() => a.config, l, { deep: !0 }), i({
getStage: f,
getNode: c
}), () => {
var s;
return L("div", { ref: n, style: o == null ? void 0 : o.style }, (s = t.default) == null ? void 0 : s.call(t));
};
}
}), V = ".vue-konva-event", F = {
Group: !0,
Layer: !0,
FastLayer: !0,
Label: !0
};
function G(a, o) {
return S({
name: a,
props: {
config: {
type: Object,
default: function() {
return {};
}
},
__useStrictMode: {
type: Boolean
}
},
setup(t, { attrs: i, slots: e, expose: d }) {
const n = A();
if (!n) return;
const r = C({}), c = new o();
n.__konvaNode = c, n.vnode.__konvaNode = c, s();
function f() {
return n == null ? void 0 : n.__konvaNode;
}
function l() {
return n == null ? void 0 : n.__konvaNode;
}
function s() {
if (!n) return;
const v = {};
for (const h in n == null ? void 0 : n.vnode.props)
h.slice(0, 2) === "on" && (v[h] = n.vnode.props[h]);
const _ = r || {}, k = {
...i,
...t.config,
...v
};
P(n, k, _, t.__useStrictMode), Object.assign(r, k);
}
E(() => {
var _;
const v = (_ = I(n)) == null ? void 0 : _.__konvaNode;
v && "add" in v && v.add(c), m(c);
}), K(() => {
m(c), c.destroy(), c.off(V);
}), T(() => {
s(), O(n.subTree, c);
}), N(() => t.config, s, { deep: !0 }), d({
getStage: l,
getNode: f
});
const p = F.hasOwnProperty(a);
return () => {
var v;
return p ? L("template", {}, (v = e.default) == null ? void 0 : v.call(e)) : null;
};
}
});
}
function D(a, o, t) {
const i = g(null), e = g("loading"), d = (n, r, c) => {
e.value = "loading";
const f = new Image();
r && (f.crossOrigin = r), c && (f.referrerPolicy = c), f.onload = () => {
i.value = f, e.value = "loaded";
}, f.onerror = () => {
i.value = null, e.value = "error";
}, f.src = n;
};
return N(
[
typeof a == "string" ? g(a) : a,
o ? typeof o == "string" ? g(o) : o : g(void 0),
t ? typeof t == "string" ? g(t) : t : g(void 0)
],
([n, r, c]) => {
n && d(
n,
r,
c
);
},
{ immediate: !0 }
), [i, e];
}
typeof window < "u" && !window.Konva && require("konva");
const W = {
install: (a, o) => {
const t = (o == null ? void 0 : o.prefix) || R, i = {
Arc: u.Arc,
Arrow: u.Arrow,
Circle: u.Circle,
Ellipse: u.Ellipse,
FastLayer: u.FastLayer,
Group: u.Group,
Image: u.Image,
Label: u.Label,
Layer: u.Layer,
Line: u.Line,
Path: u.Path,
Rect: u.Rect,
RegularPolygon: u.RegularPolygon,
Ring: u.Ring,
Shape: u.Shape,
Sprite: u.Sprite,
Star: u.Star,
Tag: u.Tag,
Text: u.Text,
TextPath: u.TextPath,
Transformer: u.Transformer,
Wedge: u.Wedge,
...o == null ? void 0 : o.customNodes
};
[
j,
...Object.entries(i).map(
([d, n]) => G(d, n)
)
].forEach((d) => {
a.component(`${t}${d.name}`, d);
});
}
};
export {
W as default,
D as useImage
};