vue-konva/dist/vue-konva.mjs

Vue binding to canvas element via Konva framework

import { defineComponent as L, getCurrentInstance as b, reactive as w, ref as S, onMounted as A, onUpdated as C, onBeforeUnmount as M, watch as k, h as E, onUnmounted as K, computed as j, toValue as h } from "vue";
import p from "konva";
function y(o) {
  if (!p.autoDrawEnabled) {
    const t = o.getLayer() || o.getStage();
    t && t.batchDraw();
  }
}
const T = { key: !0, style: !0, elm: !0, isRootInsert: !0 }, N = ".vue-konva-event";
function O(o, t, a, i) {
  const e = o.__konvaNode, d = {};
  let r = !1;
  for (let n in a) {
    if (T.hasOwnProperty(n))
      continue;
    const l = n.slice(0, 2) === "on", f = a[n] !== t[n];
    if (l && f) {
      let g = n.slice(2).toLowerCase();
      g.slice(0, 7) === "content" && (g = "content" + g.slice(7, 1).toUpperCase() + g.slice(8)), e?.off(g + N, a[n]);
    }
    !t.hasOwnProperty(n) && e?.setAttr(n, void 0);
  }
  for (let n in t) {
    if (T.hasOwnProperty(n))
      continue;
    let l = n.slice(0, 2) === "on";
    const f = a[n] !== t[n];
    if (l && f) {
      let u = n.slice(2).toLowerCase();
      u.slice(0, 7) === "content" && (u = "content" + u.slice(7, 1).toUpperCase() + u.slice(8)), t[n] && (e?.off(u + N), e?.on(u + N, t[n]));
    }
    !l && (t[n] !== a[n] || i && t[n] !== e?.getAttr(n)) && (r = !0, d[n] = t[n]);
  }
  r && e && (e.setAttrs(d), y(e));
}
const U = "V";
function V(o) {
  function t(a) {
    return a?.__konvaNode ? a : a?.parent ? t(a.parent) : (console.error("vue-konva error: Can not find parent node"), null);
  }
  return t(o.parent);
}
function x(o) {
  return o.component ? o.component.__konvaNode || x(o.component.subTree) : null;
}
function $(o) {
  const { el: t, component: a } = o, i = x(o);
  if (t?.tagName && a && !i) {
    const e = t.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 F(o) {
  const t = (e) => !!e && typeof e == "object" && "component" in e, a = (e) => Array.isArray(e), i = (e) => t(e) ? [e, ...i(e.children)] : a(e) ? e.flatMap(i) : [];
  return i(o.children);
}
function R(o, t) {
  const a = F(o), i = [];
  a.forEach((d) => {
    const r = $(d);
    r && i.push(r);
  });
  let e = !1;
  i.forEach((d, r) => {
    d.getZIndex() !== r && (d.setZIndex(r), e = !0);
  }), e && y(t);
}
const G = p.default?.Stage || p.Stage, W = L({
  name: "Stage",
  props: {
    config: {
      type: Object,
      default: function() {
        return {};
      }
    },
    __useStrictMode: {
      type: Boolean
    }
  },
  inheritAttrs: !1,
  setup(o, { attrs: t, slots: a, expose: i }) {
    const e = b();
    if (!e) return;
    const d = w({}), r = S(null), n = new G({
      width: o.config.width,
      height: o.config.height,
      container: document.createElement("div")
      // Fake container. Will be replaced
    });
    e.__konvaNode = n, u();
    function l() {
      return e?.__konvaNode;
    }
    function f() {
      return e?.__konvaNode;
    }
    function u() {
      if (!e) return;
      const g = d || {}, m = {
        ...t,
        ...o.config
      };
      O(e, m, g, o.__useStrictMode), Object.assign(d, m);
    }
    return A(() => {
      r.value && (r.value.innerHTML = "", n.container(r.value)), u();
    }), C(() => {
      u(), R(e.subTree, n);
    }), M(() => {
      n.destroy();
    }), k(() => o.config, u, { deep: !0 }), i({
      getStage: f,
      getNode: l
    }), () => E("div", { ref: r, style: t?.style }, a.default?.());
  }
}), B = ".vue-konva-event", D = {
  Group: !0,
  Layer: !0,
  FastLayer: !0,
  Label: !0
};
function c(o, t) {
  return L({
    name: o,
    props: {
      config: {
        type: Object,
        default: function() {
          return {};
        }
      },
      __useStrictMode: {
        type: Boolean
      }
    },
    setup(a, { attrs: i, slots: e, expose: d }) {
      const r = b();
      if (!r) return;
      const n = w({}), l = new t();
      r.__konvaNode = l, r.vnode.__konvaNode = l, g();
      function f() {
        return r?.__konvaNode;
      }
      function u() {
        return r?.__konvaNode;
      }
      function g() {
        if (!r) return;
        const v = {};
        for (const _ in r?.vnode.props)
          _.slice(0, 2) === "on" && (v[_] = r.vnode.props[_]);
        const I = n || {}, P = {
          ...i,
          ...a.config,
          ...v
        };
        O(r, P, I, a.__useStrictMode), Object.assign(n, P);
      }
      A(() => {
        const v = V(r)?.__konvaNode;
        v && "add" in v && v.add(l), y(l);
      }), K(() => {
        y(l), l.destroy(), l.off(B);
      }), C(() => {
        g(), R(r.subTree, l);
      }), k(() => a.config, g, { deep: !0 }), d({
        getStage: u,
        getNode: f
      });
      const m = D.hasOwnProperty(o);
      return () => m ? E("template", {}, e.default?.()) : null;
    }
  });
}
function ye(o, t, a) {
  const i = S(null), e = S("loading"), d = (n, l, f) => {
    e.value = "loading";
    const u = new Image();
    l && (u.crossOrigin = l), f && (u.referrerPolicy = f), u.onload = () => {
      i.value = u, e.value = "loaded";
    }, u.onerror = () => {
      i.value = null, e.value = "error";
    }, u.src = n;
  }, r = j(() => ({
    url: h(o),
    crossorigin: h(t),
    referrerPolicy: h(a)
  }));
  return k(
    r,
    ({ url: n, crossorigin: l, referrerPolicy: f }) => {
      n && d(n, l, f);
    },
    { immediate: !0 }
  ), [i, e];
}
const s = p.default || p, Y = c("Arc", s.Arc), Z = c("Arrow", s.Arrow), z = c("Circle", s.Circle), H = c("Ellipse", s.Ellipse), q = c("FastLayer", s.FastLayer), J = c("Group", s.Group), Q = c("Image", s.Image), X = c("Label", s.Label), ee = c("Layer", s.Layer), ne = c("Line", s.Line), te = c("Path", s.Path), oe = c("Rect", s.Rect), re = c("RegularPolygon", s.RegularPolygon), ae = c("Ring", s.Ring), ce = c("Shape", s.Shape), se = c("Sprite", s.Sprite), ie = c("Star", s.Star), ue = c("Tag", s.Tag), le = c("Text", s.Text), de = c("TextPath", s.TextPath), fe = c("Transformer", s.Transformer), ge = c("Wedge", s.Wedge), ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Arc: Y,
  Arrow: Z,
  Circle: z,
  Ellipse: H,
  FastLayer: q,
  Group: J,
  Image: Q,
  Label: X,
  Layer: ee,
  Line: ne,
  Path: te,
  Rect: oe,
  RegularPolygon: re,
  Ring: ae,
  Shape: ce,
  Sprite: se,
  Star: ie,
  Tag: ue,
  Text: le,
  TextPath: de,
  Transformer: fe,
  Wedge: ge
}, Symbol.toStringTag, { value: "Module" })), _e = {
  install: (o, t) => {
    const a = t?.prefix || U, i = t?.customNodes ? Object.entries(t.customNodes).map(
      ([d, r]) => c(d, r)
    ) : [];
    [
      W,
      ...Object.values(ve),
      ...i
    ].forEach((d) => {
      o.component(`${a}${d.name}`, d);
    });
  }
};
export {
  Y as Arc,
  Z as Arrow,
  z as Circle,
  H as Ellipse,
  q as FastLayer,
  J as Group,
  Q as Image,
  X as Label,
  ee as Layer,
  ne as Line,
  te as Path,
  oe as Rect,
  re as RegularPolygon,
  ae as Ring,
  ce as Shape,
  se as Sprite,
  W as Stage,
  ie as Star,
  ue as Tag,
  le as Text,
  de as TextPath,
  fe as Transformer,
  ge as Wedge,
  _e as default,
  ye as useImage
};