vue-paint - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

dist/composables/useDraw.d.ts

@@ -9,4 +9,4 @@ import { MaybeElement } from '@vueuse/core';
     onDrawEnd?: () => void;
-    width: number;
-    height: number;
+    width: Ref<number>;
+    height: Ref<number>;
     snapAngles?: Ref<number[] | undefined>;
@@ -25,4 +25,4 @@ }
     right: any;
-    width: number;
-    height: number;
+    width: Ref<number>;
+    height: Ref<number>;
     posStart: any;
@@ -29,0 +29,0 @@ posEnd: any;

dist/composables/useEditor.d.ts

@@ -9,4 +9,4 @@ import { ImageHistory, Settings, Tool, ToolType } from '../types';
     settings: Ref<Settings>;
-    width: number;
-    height: number;
+    width: Ref<number>;
+    height: Ref<number>;
     emit?: Function;
@@ -13,0 +13,0 @@ }

dist/types.d.ts

@@ -167,5 +167,5 @@ import { Freehand } from './composables/tools/useFreehand/useFreehand';
     /** The width of the image in pixels. Note that it might be scaled down by the browser, but this is the base all other values will relate to. */
-    width: number;
+    width: Ref<number>;
     /** The height of the image in pixels. Note that it might be scaled down by the browser, but this is the base all other values will relate to. */
-    height: number;
+    height: Ref<number>;
     /** The X position of the pointer/cursor relative to the image left edge. */
@@ -172,0 +172,0 @@ x: number;

dist/vue-paint.js

@@ -135,9 +135,9 @@ import { defineComponent as be, mergeModels as he, useModel as me, openBlock as P, createElementBlock as K, renderSlot as I, createElementVNode as z, Fragment as le, renderList as ce, normalizeClass as Ve, withDirectives as He, vModelText as ze, computed as M, ref as k, unref as H, toRefs as fe, createBlock as re, resolveDynamicComponent as ae, createCommentVNode as tt, toDisplayString as ot, isRef as nt, customRef as it, onMounted as xe, nextTick as st, watch as ee, getCurrentScope as rt, onScopeDispose as at, getCurrentInstance as Ue, reactive as ne, watchEffect as lt, toRef as de, createVNode as Oe, h as B } from "vue";
       () => o.tools.filter((n) => n.ToolSvgComponent && (n.ToolSvgComponent.layer ?? 0) <= 0).sort((n, f) => {
-        var h, d;
-        return (((h = n.ToolSvgComponent) == null ? void 0 : h.layer) ?? 0) - (((d = f.ToolSvgComponent) == null ? void 0 : d.layer) ?? 0);
+        var h, v;
+        return (((h = n.ToolSvgComponent) == null ? void 0 : h.layer) ?? 0) - (((v = f.ToolSvgComponent) == null ? void 0 : v.layer) ?? 0);
       })
     ), u = M(
       () => o.tools.filter((n) => n.ToolSvgComponent && (n.ToolSvgComponent.layer ?? 0) > 0).sort((n, f) => {
-        var h, d;
-        return (((h = n.ToolSvgComponent) == null ? void 0 : h.layer) ?? 0) - (((d = f.ToolSvgComponent) == null ? void 0 : d.layer) ?? 0);
+        var h, v;
+        return (((h = n.ToolSvgComponent) == null ? void 0 : h.layer) ?? 0) - (((v = f.ToolSvgComponent) == null ? void 0 : v.layer) ?? 0);
       })
@@ -155,4 +155,4 @@ );
       }, [
-        (P(!0), K(le, null, ce(a.value, (d) => (P(), re(ae(d.ToolSvgComponent), {
-          key: d.type,
+        (P(!0), K(le, null, ce(a.value, (v) => (P(), re(ae(v.ToolSvgComponent), {
+          key: v.type,
           history: n.history,
@@ -164,8 +164,8 @@ tools: n.tools,
         }, null, 8, ["history", "tools", "activeShape", "width", "height"]))), 128)),
-        (P(!0), K(le, null, ce(H(c), (d) => {
-          var v, g, p;
-          return P(), re(ae((v = s(d.type)) == null ? void 0 : v.ShapeSvgComponent), {
-            key: d.id + d.id === ((g = n.activeShape) == null ? void 0 : g.id),
-            id: d.id,
-            shape: d,
+        (P(!0), K(le, null, ce(H(c), (v) => {
+          var d, p, g;
+          return P(), re(ae((d = s(v.type)) == null ? void 0 : d.ShapeSvgComponent), {
+            key: v.id + v.id === ((p = n.activeShape) == null ? void 0 : p.id),
+            id: v.id,
+            shape: v,
             history: n.history,
@@ -175,3 +175,3 @@ tools: n.tools,
             height: n.height,
-            "is-active": d.id === ((p = n.activeShape) == null ? void 0 : p.id)
+            "is-active": v.id === ((g = n.activeShape) == null ? void 0 : g.id)
           }, null, 8, ["id", "shape", "history", "tools", "width", "height", "is-active"]);
@@ -189,4 +189,4 @@ }), 128)),
         }, null, 8, ["id", "shape", "history", "tools", "width", "height"])) : tt("", !0),
-        (P(!0), K(le, null, ce(u.value, (d) => (P(), re(ae(d.ToolSvgComponent), {
-          key: d.type,
+        (P(!0), K(le, null, ce(u.value, (v) => (P(), re(ae(v.ToolSvgComponent), {
+          key: v.type,
           history: n.history,
@@ -217,3 +217,3 @@ tools: n.tools,
 }
-function je({ snapAngles: e, posStart: t, x: o, y: i }) {
+function Re({ snapAngles: e, posStart: t, x: o, y: i }) {
   if (!(e != null && e.value))
@@ -238,3 +238,3 @@ return { x: o, y: i };
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const zt = (e) => e != null, Ot = Object.prototype.toString, Bt = (e) => Ot.call(e) === "[object Object]", Re = () => {
+const zt = (e) => e != null, Ot = Object.prototype.toString, Bt = (e) => Ot.call(e) === "[object Object]", je = () => {
 };
@@ -293,10 +293,10 @@ function Dt(e, t, o = !1) {
 const te = Ht ? window : void 0;
-function j(...e) {
+function R(...e) {
   let t, o, i, l;
   if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([o, i, l] = e, t = te) : [t, o, i, l] = e, !t)
-    return Re;
+    return je;
   Array.isArray(o) || (o = [o]), Array.isArray(i) || (i = [i]);
   const s = [], r = () => {
     s.forEach((n) => n()), s.length = 0;
-  }, c = (n, f, h, d) => (n.addEventListener(f, h, d), () => n.removeEventListener(f, h, d)), a = ee(
+  }, c = (n, f, h, v) => (n.addEventListener(f, h, v), () => n.removeEventListener(f, h, v)), a = ee(
     () => [Z(t), Y(l)],
@@ -308,3 +308,3 @@ ([n, f]) => {
       s.push(
-        ...o.flatMap((d) => i.map((v) => c(n, d, v, h)))
+        ...o.flatMap((v) => i.map((d) => c(n, v, d, h)))
       );
@@ -334,8 +334,8 @@ },
   }, a = M(() => {
-    const h = Y(e), d = (Array.isArray(h) ? h : [h]).map(Z).filter(zt);
-    return new Set(d);
+    const h = Y(e), v = (Array.isArray(h) ? h : [h]).map(Z).filter(zt);
+    return new Set(v);
   }), u = ee(
     () => a.value,
     (h) => {
-      c(), r.value && h.size && (s = new MutationObserver(t), h.forEach((d) => s.observe(d, l)));
+      c(), r.value && h.size && (s = new MutationObserver(t), h.forEach((v) => s.observe(v, l)));
     },
@@ -368,5 +368,5 @@ { immediate: !0, flush: "post" }
   };
-  return o && (j(o, "blur", (u) => {
+  return o && (R(o, "blur", (u) => {
     u.relatedTarget === null && a();
-  }, !0), j(o, "focus", a, !0)), l && qe(s, (u) => {
+  }, !0), R(o, "focus", a, !0)), l && qe(s, (u) => {
     u.filter((n) => n.removedNodes.length).map((n) => Array.from(n.removedNodes)).flat().forEach((n) => {
@@ -380,3 +380,3 @@ n === c.value && a();
 }
-function jt(e, t, o = {}) {
+function Rt(e, t, o = {}) {
   const { window: i = te, ...l } = o;
@@ -404,3 +404,3 @@ let s;
 }
-function Rt(e, t = {}) {
+function jt(e, t = {}) {
   const {
@@ -411,16 +411,16 @@ reset: o = !0,
     immediate: s = !0
-  } = t, r = k(0), c = k(0), a = k(0), u = k(0), n = k(0), f = k(0), h = k(0), d = k(0);
-  function v() {
-    const g = Z(e);
-    if (!g) {
-      o && (r.value = 0, c.value = 0, a.value = 0, u.value = 0, n.value = 0, f.value = 0, h.value = 0, d.value = 0);
+  } = t, r = k(0), c = k(0), a = k(0), u = k(0), n = k(0), f = k(0), h = k(0), v = k(0);
+  function d() {
+    const p = Z(e);
+    if (!p) {
+      o && (r.value = 0, c.value = 0, a.value = 0, u.value = 0, n.value = 0, f.value = 0, h.value = 0, v.value = 0);
       return;
     }
-    const p = g.getBoundingClientRect();
-    r.value = p.height, c.value = p.bottom, a.value = p.left, u.value = p.right, n.value = p.top, f.value = p.width, h.value = p.x, d.value = p.y;
+    const g = p.getBoundingClientRect();
+    r.value = g.height, c.value = g.bottom, a.value = g.left, u.value = g.right, n.value = g.top, f.value = g.width, h.value = g.x, v.value = g.y;
   }
-  return jt(e, v), ee(() => Z(e), (g) => !g && v()), qe(e, v, {
+  return Rt(e, d), ee(() => Z(e), (p) => !p && d()), qe(e, d, {
     attributeFilter: ["style", "class"]
-  }), l && j("scroll", v, { capture: !0, passive: !0 }), i && j("resize", v, { passive: !0 }), Pt(() => {
-    s && v();
+  }), l && R("scroll", d, { capture: !0, passive: !0 }), i && R("resize", d, { passive: !0 }), Pt(() => {
+    s && d();
   }), {
@@ -434,4 +434,4 @@ height: r,
     x: h,
-    y: d,
-    update: v
+    y: v,
+    update: d
   };
@@ -455,3 +455,3 @@ }
     passive: l = !0,
-    onEventFired: s = Re
+    onEventFired: s = je
   } = e, r = ne(/* @__PURE__ */ new Set()), c = {
@@ -463,34 +463,34 @@ toJSON() {
   }, a = t ? ne(c) : c, u = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
-  function f(g, p) {
-    g in a && (t ? a[g] = p : a[g].value = p);
+  function f(p, g) {
+    p in a && (t ? a[p] = g : a[p].value = g);
   }
   function h() {
     r.clear();
-    for (const g of n)
-      f(g, !1);
+    for (const p of n)
+      f(p, !1);
   }
-  function d(g, p) {
+  function v(p, g) {
     var y, w;
-    const m = (y = g.key) == null ? void 0 : y.toLowerCase(), S = [(w = g.code) == null ? void 0 : w.toLowerCase(), m].filter(Boolean);
-    m && (p ? r.add(m) : r.delete(m));
+    const m = (y = p.key) == null ? void 0 : y.toLowerCase(), S = [(w = p.code) == null ? void 0 : w.toLowerCase(), m].filter(Boolean);
+    m && (g ? r.add(m) : r.delete(m));
     for (const x of S)
-      n.add(x), f(x, p);
-    m === "meta" && !p ? (u.forEach((x) => {
+      n.add(x), f(x, g);
+    m === "meta" && !g ? (u.forEach((x) => {
       r.delete(x), f(x, !1);
-    }), u.clear()) : typeof g.getModifierState == "function" && g.getModifierState("Meta") && p && [...r, ...S].forEach((x) => u.add(x));
+    }), u.clear()) : typeof p.getModifierState == "function" && p.getModifierState("Meta") && g && [...r, ...S].forEach((x) => u.add(x));
   }
-  j(o, "keydown", (g) => (d(g, !0), s(g)), { passive: l }), j(o, "keyup", (g) => (d(g, !1), s(g)), { passive: l }), j("blur", h, { passive: !0 }), j("focus", h, { passive: !0 });
-  const v = new Proxy(
+  R(o, "keydown", (p) => (v(p, !0), s(p)), { passive: l }), R(o, "keyup", (p) => (v(p, !1), s(p)), { passive: l }), R("blur", h, { passive: !0 }), R("focus", h, { passive: !0 });
+  const d = new Proxy(
     a,
     {
-      get(g, p, y) {
-        if (typeof p != "string")
-          return Reflect.get(g, p, y);
-        if (p = p.toLowerCase(), p in i && (p = i[p]), !(p in a))
-          if (/[+_-]/.test(p)) {
-            const m = p.split(/[+_-]/g).map((b) => b.trim());
-            a[p] = M(() => m.every((b) => Y(v[b])));
+      get(p, g, y) {
+        if (typeof g != "string")
+          return Reflect.get(p, g, y);
+        if (g = g.toLowerCase(), g in i && (g = i[g]), !(g in a))
+          if (/[+_-]/.test(g)) {
+            const m = g.split(/[+_-]/g).map((b) => b.trim());
+            a[g] = M(() => m.every((b) => Y(d[b])));
           } else
-            a[p] = k(!1);
-        const w = Reflect.get(g, p, y);
+            a[g] = k(!1);
+        const w = Reflect.get(p, g, y);
         return t ? Y(w) : w;
@@ -500,3 +500,3 @@ }
   );
-  return v;
+  return d;
 }
@@ -515,3 +515,3 @@ const Xe = {
 }, Xt = /* @__PURE__ */ Object.keys(Xe);
-function Wt(e = {}) {
+function _t(e = {}) {
   const {
@@ -526,3 +526,3 @@ target: t = te
     const s = { passive: !0 };
-    j(t, ["pointerdown", "pointermove", "pointerup"], l, s), j(t, "pointerleave", () => o.value = !1, s);
+    R(t, ["pointerdown", "pointermove", "pointerup"], l, s), R(t, "pointerleave", () => o.value = !1, s);
   }
@@ -535,3 +535,3 @@ return {
 let ye = !1;
-function _t({
+function Wt({
   target: e,
@@ -545,11 +545,11 @@ onDrawStart: t,
 }) {
-  const { x: c, y: a, pressure: u } = Wt(), {
+  const { x: c, y: a, pressure: u } = _t(), {
     top: n,
     left: f,
     right: h,
-    bottom: d,
-    width: v,
-    height: g,
-    update: p
-  } = Rt(e), y = k(!1), w = ne({ x: 0, y: 0 }), m = ne({ x: 0, y: 0 }), b = ne({
+    bottom: v,
+    width: d,
+    height: p,
+    update: g
+  } = jt(e), y = k(!1), w = ne({ x: 0, y: 0 }), m = ne({ x: 0, y: 0 }), b = ne({
     x: 0,
@@ -559,9 +559,9 @@ y: 0,
     top: 0
-  }), S = M(() => je({
+  }), S = M(() => Re({
     snapAngles: r,
     posStart: w,
-    x: Math.round((c.value - f.value) * l / v.value),
-    y: Math.round((a.value - n.value) * s / g.value)
-  })), x = M(() => S.value.x), A = M(() => S.value.y), D = M(() => Math.max(0, Math.min(w.x, x.value))), O = M(() => Math.max(0, Math.min(w.y, A.value))), $ = M(() => Math.min(l, Math.max(w.x, x.value))), L = M(() => Math.min(s, Math.max(w.y, A.value))), R = M(
-    () => c.value >= f.value && c.value <= h.value && a.value >= n.value && a.value <= d.value
+    x: Math.round((c.value - f.value) * l.value / d.value),
+    y: Math.round((a.value - n.value) * s.value / p.value)
+  })), x = M(() => S.value.x), A = M(() => S.value.y), D = M(() => Math.max(0, Math.min(w.x, x.value))), O = M(() => Math.max(0, Math.min(w.y, A.value))), $ = M(() => Math.min(l.value, Math.max(w.x, x.value))), L = M(() => Math.min(s.value, Math.max(w.y, A.value))), j = M(
+    () => c.value >= f.value && c.value <= h.value && a.value >= n.value && a.value <= v.value
   ), F = M(
@@ -572,3 +572,3 @@ () => Math.floor(c.value) !== b.x || Math.floor(a.value) !== b.y
     const G = !y.value && c.value === b.x && a.value === b.y && (f.value !== b.left || n.value !== b.top);
-    u.value && !y.value && R.value && F.value && !ye && !G ? (p(), y.value = !0, ye = !0, w.x = x.value, w.y = A.value, m.x = x.value, m.y = A.value, t == null || t()) : u.value && y.value ? (m.x = x.value, m.y = A.value, o == null || o()) : !u.value && y.value && (y.value = !1, ye = !1, i == null || i()), b.x = Math.floor(c.value), b.y = Math.floor(a.value), b.left = Math.floor(f.value), b.top = Math.floor(n.value);
+    u.value && !y.value && j.value && F.value && !ye && !G ? (g(), y.value = !0, ye = !0, w.x = x.value, w.y = A.value, m.x = x.value, m.y = A.value, t == null || t()) : u.value && y.value ? (m.x = x.value, m.y = A.value, o == null || o()) : !u.value && y.value && (y.value = !1, ye = !1, i == null || i()), b.x = Math.floor(c.value), b.y = Math.floor(a.value), b.left = Math.floor(f.value), b.top = Math.floor(n.value);
   }), {
@@ -583,3 +583,3 @@ x,
     left: f,
-    bottom: d,
+    bottom: v,
     right: h,
@@ -591,3 +591,3 @@ width: l,
     isDrawing: y,
-    isInside: R,
+    isInside: j,
     absoluteX: c,
@@ -599,3 +599,3 @@ absoluteY: a,
 let Be;
-function We() {
+function _e() {
   function e(o) {
@@ -636,7 +636,7 @@ Be = o;
       height: s,
-      x: d.value,
-      y: v.value,
-      minX: g.value,
+      x: v.value,
+      y: d.value,
+      minX: p.value,
       maxX: y.value,
-      minY: p.value,
+      minY: g.value,
       maxY: w.value,
@@ -647,6 +647,6 @@ absoluteX: $.value,
   }), {
-    x: d,
-    y: v,
-    minX: g,
-    minY: p,
+    x: v,
+    y: d,
+    minX: p,
+    minY: g,
     maxX: y,
@@ -663,3 +663,3 @@ maxY: w,
     absoluteY: L
-  } = _t({
+  } = Wt({
     target: e,
@@ -682,3 +682,3 @@ width: l,
   });
-  function R(C) {
+  function j(C) {
     i.value.tool = C, q(U);
@@ -711,3 +711,3 @@ }
     activeShape: a,
-    setTool: R,
+    setTool: j,
     undo: F,
@@ -717,6 +717,6 @@ redo: G,
     reset: Qe,
-    x: d,
-    y: v,
-    minX: g,
-    minY: p,
+    x: v,
+    y: d,
+    minX: p,
+    minY: g,
     maxX: y,
@@ -733,3 +733,3 @@ maxY: w,
     absoluteY: L
-  }, { setActiveEditor: q } = We();
+  }, { setActiveEditor: q } = _e();
   return q(U), U;
@@ -753,15 +753,15 @@ }
   setup(e, { emit: t }) {
-    const o = t, i = me(e, "settings"), l = e, s = me(e, "history"), r = k(), { activeShape: c, setTool: a, undo: u, redo: n, save: f, reset: h } = Kt({
-      vpImage: r,
+    const o = t, i = me(e, "settings"), l = e, s = k(l.width), r = k(l.height), c = me(e, "history"), a = k(), { activeShape: u, setTool: n, undo: f, redo: h, save: v, reset: d } = Kt({
+      vpImage: a,
       tools: l.tools,
-      history: de(s),
+      history: de(c),
       settings: de(i),
-      width: l.width,
-      height: l.height,
+      width: s,
+      height: r,
       emit: o
     });
     return xe(() => {
-      var d;
-      (d = s.value) != null && d.length || h();
-    }), (d, v) => (P(), K("div", {
+      var p;
+      (p = c.value) != null && p.length || d();
+    }), (p, g) => (P(), K("div", {
       class: Ve(["vue-paint vp-editor", `active-tool-${i.value.tool}`])
@@ -771,14 +771,14 @@ }, [
         ref_key: "vpImage",
-        ref: r,
-        tools: d.tools,
-        activeShape: H(c),
-        history: s.value,
-        width: d.width,
-        height: d.height
+        ref: a,
+        tools: p.tools,
+        activeShape: H(u),
+        history: c.value,
+        width: s.value,
+        height: r.value
       }, null, 8, ["tools", "activeShape", "history", "width", "height"]),
-      I(d.$slots, "toolbar", {
-        setTool: H(a),
-        undo: H(u),
-        save: H(f),
-        reset: H(h),
+      I(p.$slots, "toolbar", {
+        setTool: H(n),
+        undo: H(f),
+        save: H(v),
+        reset: H(d),
         settings: i.value
@@ -788,9 +788,9 @@ }, () => [
           settings: i.value,
-          "onUpdate:settings": v[0] || (v[0] = (g) => i.value = g),
-          onSetTool: H(a),
-          onUndo: H(u),
-          onRedo: H(n),
-          onSave: H(f),
-          onReset: H(h),
-          tools: d.tools
+          "onUpdate:settings": g[0] || (g[0] = (y) => i.value = y),
+          onSetTool: H(n),
+          onUndo: H(f),
+          onRedo: H(h),
+          onSave: H(v),
+          onReset: H(d),
+          tools: p.tools
         }, null, 8, ["settings", "onSetTool", "onUndo", "onRedo", "onSave", "onReset", "tools"])
@@ -809,3 +809,3 @@ ])
 }
-const Yt = 1e-12, De = 112e-18, Jt = (e) => e >= -De && e <= De, _e = (e, t) => Math.sqrt(e * e + t * t), Q = (e, t) => ({ x: e, y: t }), Gt = (e) => _e(e.x, e.y), Zt = (e) => Q(-e.x, -e.y), ie = (e, t) => Q(e.x + t.x, e.y + t.y), V = (e, t) => Q(e.x - t.x, e.y - t.y), J = (e, t) => Q(e.x * t, e.y * t), N = (e, t) => e.x * t.x + e.y * t.y, Ce = (e, t) => _e(e.x - t.x, e.y - t.y), _ = (e, t = 1) => J(e, t / (Gt(e) || 1 / 0)), Ke = (e, t) => ({ p: e, i: t }), Qt = (e, t, o) => {
+const Yt = 1e-12, De = 112e-18, Jt = (e) => e >= -De && e <= De, We = (e, t) => Math.sqrt(e * e + t * t), Q = (e, t) => ({ x: e, y: t }), Gt = (e) => We(e.x, e.y), Zt = (e) => Q(-e.x, -e.y), ie = (e, t) => Q(e.x + t.x, e.y + t.y), V = (e, t) => Q(e.x - t.x, e.y - t.y), J = (e, t) => Q(e.x * t, e.y * t), N = (e, t) => e.x * t.x + e.y * t.y, Ce = (e, t) => We(e.x - t.x, e.y - t.y), W = (e, t = 1) => J(e, t / (Gt(e) || 1 / 0)), Ke = (e, t) => ({ p: e, i: t }), Qt = (e, t, o) => {
   t && (e.unshift(e[e.length - 1]), e.push(e[1]));
@@ -829,4 +829,4 @@ const i = e.length;
   if (l - i === 1) {
-    const h = e[i], d = e[l], v = Ce(h, d) / 3;
-    Le(t, [h, ie(h, _(s, v)), ie(d, _(r, v)), d]);
+    const h = e[i], v = e[l], d = Ce(h, v) / 3;
+    Le(t, [h, ie(h, W(s, d)), ie(v, W(r, d)), v]);
     return;
@@ -837,10 +837,10 @@ }
   for (let h = 0; h <= 4; h++) {
-    const d = eo(e, i, l, c, s, r), v = io(e, i, l, d, c);
-    if (v.error < o && n) {
-      Le(t, d);
+    const v = eo(e, i, l, c, s, r), d = io(e, i, l, v, c);
+    if (d.error < o && n) {
+      Le(t, v);
       return;
     }
-    if (u = v.index, v.error >= a)
+    if (u = d.index, d.error >= a)
       break;
-    n = to(e, i, l, c, d), a = v.error;
+    n = to(e, i, l, c, v), a = d.error;
   }
@@ -861,23 +861,23 @@ const f = V(e[u - 1], e[u + 1]);
   for (let m = 0, b = o - t + 1; m < b; m++) {
-    const S = i[m], x = 1 - S, A = 3 * S * x, D = x * x * x, O = A * x, $ = A * S, L = S * S * S, R = _(l, O), F = _(s, $), G = V(V(e[t + m], J(a, D + O)), J(u, $ + L));
-    n[0][0] += N(R, R), n[0][1] += N(R, F), n[1][0] = n[0][1], n[1][1] += N(F, F), f[0] += N(R, G), f[1] += N(F, G);
+    const S = i[m], x = 1 - S, A = 3 * S * x, D = x * x * x, O = A * x, $ = A * S, L = S * S * S, j = W(l, O), F = W(s, $), G = V(V(e[t + m], J(a, D + O)), J(u, $ + L));
+    n[0][0] += N(j, j), n[0][1] += N(j, F), n[1][0] = n[0][1], n[1][1] += N(F, F), f[0] += N(j, G), f[1] += N(F, G);
   }
   const h = n[0][0] * n[1][1] - n[1][0] * n[0][1];
-  let d, v;
+  let v, d;
   if (c(h) > r) {
     const m = n[0][0] * f[1] - n[1][0] * f[0];
-    d = (f[0] * n[1][1] - f[1] * n[0][1]) / h, v = m / h;
+    v = (f[0] * n[1][1] - f[1] * n[0][1]) / h, d = m / h;
   } else {
     const m = n[0][0] + n[0][1], b = n[1][0] + n[1][1];
-    d = v = c(m) > r ? f[0] / m : c(b) > r ? f[1] / b : 0;
+    v = d = c(m) > r ? f[0] / m : c(b) > r ? f[1] / b : 0;
   }
-  const g = Ce(u, a), p = r * g;
+  const p = Ce(u, a), g = r * p;
   let y, w;
-  if (d < p || v < p)
-    d = v = g / 3;
+  if (v < g || d < g)
+    v = d = p / 3;
   else {
     const m = V(u, a);
-    y = _(l, d), w = _(s, v), N(y, m) - N(w, m) > g * g && (d = v = g / 3, y = w = null);
+    y = W(l, v), w = W(s, d), N(y, m) - N(w, m) > p * p && (v = d = p / 3, y = w = null);
   }
-  return [a, ie(a, y || _(l, d)), ie(u, w || _(s, v)), u];
+  return [a, ie(a, y || W(l, v)), ie(u, w || W(s, d)), u];
 }, to = (e, t, o, i, l) => {
@@ -922,35 +922,35 @@ for (let s = t; s <= o; s++)
 }, so = (e, t, o) => {
-  const i = e.length, l = 10 ** o, s = o < 16 ? (v) => Math.round(v * l) / l : (v) => v, r = (v, g) => s(v) + "," + s(g);
+  const i = e.length, l = 10 ** o, s = o < 16 ? (d) => Math.round(d * l) / l : (d) => d, r = (d, p) => s(d) + "," + s(p);
   let c = !0, a, u, n, f;
-  const h = [], d = (v, g) => {
+  const h = [], v = (d, p) => {
     var w, m, b, S;
-    const p = v.p.x, y = v.p.y;
+    const g = d.p.x, y = d.p.y;
     if (c)
-      h.push("M" + r(p, y)), c = !1;
+      h.push("M" + r(g, y)), c = !1;
     else {
-      const x = p + (((w = v.i) == null ? void 0 : w.x) ?? 0), A = y + (((m = v.i) == null ? void 0 : m.y) ?? 0);
-      if (x === p && A === y && n === a && f === u) {
-        if (!g) {
-          const D = p - a, O = y - u;
+      const x = g + (((w = d.i) == null ? void 0 : w.x) ?? 0), A = y + (((m = d.i) == null ? void 0 : m.y) ?? 0);
+      if (x === g && A === y && n === a && f === u) {
+        if (!p) {
+          const D = g - a, O = y - u;
           h.push(D === 0 ? "v" + s(O) : O === 0 ? "h" + s(D) : "l" + r(D, O));
         }
       } else
-        h.push("c" + r(n - a, f - u) + " " + r(x - a, A - u) + " " + r(p - a, y - u));
+        h.push("c" + r(n - a, f - u) + " " + r(x - a, A - u) + " " + r(g - a, y - u));
     }
-    a = p, u = y, n = p + (((b = v.o) == null ? void 0 : b.x) ?? 0), f = y + (((S = v.o) == null ? void 0 : S.y) ?? 0);
+    a = g, u = y, n = g + (((b = d.o) == null ? void 0 : b.x) ?? 0), f = y + (((S = d.o) == null ? void 0 : S.y) ?? 0);
   };
   if (!i)
     return "";
-  for (let v = 0; v < i; v++)
-    d(e[v]);
-  return t && i > 0 && (d(e[0], !0), h.push("z")), h.join("");
+  for (let d = 0; d < i; d++)
+    v(e[d]);
+  return t && i > 0 && (v(e[0], !0), h.push("z")), h.join("");
 }, Ie = (e, t = {}) => e.length === 0 ? "" : so(Qt(e.map(typeof e[0].x == "number" ? (o) => Q(o.x, o.y) : (o) => Q(o[0], o[1])), t.closed, t.tolerance ?? 2.5), t.closed, t.precision ?? 5);
 function ro() {
   const e = "freehand", t = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M8.61 2.66c-.227-.198-.817-.365-1.602.129c-2.508 1.58-4.693 4.43-5.432 5.463a.75.75 0 1 1-1.22-.873c.75-1.047 3.078-4.112 5.853-5.86C7.41.763 8.75.795 9.594 1.527c.421.365.684.89.688 1.486c.004.591-.246 1.177-.702 1.698c-1.427 1.632-3.312 3.845-4.104 4.925c-.104.142-.111.25-.102.312c.01.07.047.136.11.183a.411.411 0 0 0 .299.067c.14-.017.36-.094.628-.339c.226-.208.461-.43.703-.657c.745-.701 1.55-1.46 2.356-2.053c.838-.616 1.818-.787 2.561-.333c.371.227.632.59.723 1.024c.09.43.004.878-.213 1.29c-.232.442-.434.76-.615 1.046l-.014.023a10.6 10.6 0 0 0-.485.819a.506.506 0 0 0-.024.415c.024.06.047.089.06.101c.092.007.172-.016.299-.114c.178-.139.377-.374.676-.766a.75.75 0 0 1 1.192.911c-.285.373-.594.764-.948 1.04c-.392.304-.867.489-1.444.413c-.633-.082-1.048-.57-1.231-1.037a2.007 2.007 0 0 1 .09-1.658c.19-.364.37-.647.541-.916l.021-.034c.177-.279.352-.556.555-.942c.085-.162.077-.255.071-.284a.068.068 0 0 0-.036-.051c-.043-.027-.347-.138-.89.262c-.726.533-1.433 1.2-2.16 1.884c-.255.24-.513.483-.775.723c-.923.846-2.047.959-2.838.367c-.77-.576-.981-1.68-.32-2.582c.837-1.142 2.767-3.405 4.185-5.026l.513.448l-.513-.448c.271-.31.332-.555.331-.702a.468.468 0 0 0-.171-.362Zm2.863 8.883l-.003-.002c.002 0 .003.001.003.002" clip-rule="evenodd"/></svg>', o = [];
-  function s({ settings: n, id: f, x: h, y: d }) {
-    return o.length = 0, o.push([h, d], [h, d]), {
+  function s({ settings: n, id: f, x: h, y: v }) {
+    return o.length = 0, o.push([h, v], [h, v]), {
       type: e,
       id: f,
       x: h,
-      y: d,
+      y: v,
       path: Ie(o, { tolerance: 1, precision: 1 }).replace(/^M\d+,\d+/, ""),
@@ -961,4 +961,4 @@ thickness: n.thickness,
   }
-  function r({ settings: n, id: f, x: h, y: d }) {
-    return o.push([h, d]), {
+  function r({ settings: n, id: f, x: h, y: v }) {
+    return o.push([h, v]), {
       type: e,
@@ -1258,6 +1258,6 @@ id: f,
     var h;
-    const { simplifiedHistory: n } = ve({ history: de(a), tools: de(u), includeActiveShape: !1 }), f = n.value.find((d) => d.type === "crop");
+    const { simplifiedHistory: n } = ve({ history: de(a), tools: de(u), includeActiveShape: !1 }), f = n.value.find((v) => v.type === "crop");
     if (f) {
-      const d = f.width > 0 ? f.x : f.x + f.width, v = f.height > 0 ? f.y : f.y + f.height, g = Math.abs(f.width), p = Math.abs(f.height);
-      console.log({ crop: f, x: d, y: v, width: g, height: p }), c.setAttribute("width", String(g)), c.setAttribute("height", String(p)), c.setAttribute("viewBox", `${d} ${v} ${g} ${p}`), (h = c.querySelector(".overlay")) == null || h.remove();
+      const v = f.width > 0 ? f.x : f.x + f.width, d = f.height > 0 ? f.y : f.y + f.height, p = Math.abs(f.width), g = Math.abs(f.height);
+      console.log({ crop: f, x: v, y: d, width: p, height: g }), c.setAttribute("width", String(p)), c.setAttribute("height", String(g)), c.setAttribute("viewBox", `${v} ${d} ${p} ${g}`), (h = c.querySelector(".overlay")) == null || h.remove();
     }
@@ -1326,10 +1326,10 @@ }
   }
-  function c({ settings: h, id: d, minX: v, minY: g, maxX: p, maxY: y }) {
+  function c({ settings: h, id: v, minX: d, minY: p, maxX: g, maxY: y }) {
     return {
       type: i,
-      id: d,
-      x: v,
-      y: g,
-      width: p - v,
-      height: y - g,
+      id: v,
+      x: d,
+      y: p,
+      width: g - d,
+      height: y - p,
       fontSize: h.thickness,
@@ -1340,8 +1340,8 @@ color: h.color,
   }
-  function a({ settings: h, id: d, minX: v, minY: g, maxX: p, maxY: y }) {
+  function a({ settings: h, id: v, minX: d, minY: p, maxX: g, maxY: y }) {
     const w = Object.freeze({
-      x: v,
-      y: g,
-      width: p - v,
-      height: y - g
+      x: d,
+      y: p,
+      width: g - d,
+      height: y - p
     });
@@ -1356,3 +1356,3 @@ return new Promise((m, b) => {
           type: i,
-          id: d,
+          id: v,
           ...w,
@@ -1367,3 +1367,3 @@ fontSize: h.thickness,
   const u = oe(
-    (h, { isActive: d }) => B("foreignObject", {
+    (h, { isActive: v }) => B("foreignObject", {
       x: h.width > 0 ? h.x : h.x + h.width,
@@ -1374,5 +1374,5 @@ y: h.height > 0 ? h.y : h.y + h.height,
     }, B("textarea", {
-      class: d ? "is-active textarea" : "textarea",
+      class: v ? "is-active textarea" : "textarea",
       style: `font-size: ${h.fontSize}em; color: ${h.color}`,
-      disabled: !d,
+      disabled: !v,
       innerHTML: h.content
@@ -1425,5 +1425,5 @@ }))
   }
-  function f({ svg: h, history: d }) {
-    const v = h.querySelector("style");
-    !d.some((g) => g.type === "textarea") && v && (v.innerHTML = v.innerHTML.replace(n({ svgId: h.id }), ""));
+  function f({ svg: h, history: v }) {
+    const d = h.querySelector("style");
+    !v.some((p) => p.type === "textarea") && d && (d.innerHTML = d.innerHTML.replace(n({ svgId: h.id }), ""));
   }
@@ -1435,3 +1435,3 @@ return { type: i, icon: l, onInitialize: r, onDraw: c, onDrawEnd: a, ShapeSvgComponent: u, svgStyle: n, handles: Ae, snapAngles: pe, beforeExport: f };
   function i(a, u) {
-    const n = document.elementsFromPoint(a, u), f = n.findIndex((d) => d.classList.contains("vp-image")), h = n.slice(0, f).map((d) => d.id).filter((d) => d && !o.includes(d));
+    const n = document.elementsFromPoint(a, u), f = n.findIndex((v) => v.classList.contains("vp-image")), h = n.slice(0, f).map((v) => v.id).filter((v) => v && !o.includes(v));
     o.push(...h);
@@ -1468,10 +1468,10 @@ }
   let l = [];
-  function s(v, g) {
-    const y = document.elementsFromPoint(v, g).find((w) => w.classList.contains("handle"));
+  function s(d, p) {
+    const y = document.elementsFromPoint(d, p).find((w) => w.classList.contains("handle"));
     l = y ? [y.id] : [];
   }
-  function r({ id: v, absoluteX: g, absoluteY: p }) {
-    return s(g, p), {
+  function r({ id: d, absoluteX: p, absoluteY: g }) {
+    return s(p, g), {
       type: o,
-      id: v,
+      id: d,
       targets: structuredClone(l),
@@ -1483,41 +1483,41 @@ x: 0,
   }
-  function c({ id: v, settings: g, posStart: p, x: y, y: w }) {
-    const m = g.angleSnap;
-    g.angleSnap = !1;
+  function c({ id: d, settings: p, posStart: g, x: y, y: w }) {
+    const m = p.angleSnap;
+    p.angleSnap = !1;
     const b = {
       type: o,
-      id: v,
+      id: d,
       targets: structuredClone(l),
-      x: y - p.x,
-      y: w - p.y,
+      x: y - g.x,
+      y: w - g.y,
       angleSnap: m
     };
-    return g.angleSnap = m, b;
+    return p.angleSnap = m, b;
   }
-  function a({ activeShape: v }) {
-    return l.length === 0 ? void 0 : v;
+  function a({ activeShape: d }) {
+    return l.length === 0 ? void 0 : d;
   }
-  function u(v, g, p) {
-    const y = g.find(($) => $.type === v.type), w = y == null ? void 0 : y.handles, m = w == null ? void 0 : w.find(($) => $.name === p.handle);
+  function u(d, p, g) {
+    const y = p.find(($) => $.type === d.type), w = y == null ? void 0 : y.handles, m = w == null ? void 0 : w.find(($) => $.name === g.handle);
     if (!m || !y)
-      return v;
+      return d;
     const b = w == null ? void 0 : w.find(($) => $.name === m.opposite), S = k(), x = { x: 0, y: 0 };
-    if (p.angleSnap && m.name === "base")
+    if (g.angleSnap && m.name === "base")
       S.value = ke;
-    else if (p.angleSnap && b) {
-      const $ = m.position(v), L = b.position(v);
+    else if (g.angleSnap && b) {
+      const $ = m.position(d), L = b.position(d);
       x.x = L.x - $.x, x.y = L.y - $.y, S.value = y.snapAngles;
     }
-    const A = je({ snapAngles: S, posStart: x, x: p.x, y: p.y }), D = (m == null ? void 0 : m.onMove(A, v)) ?? {}, O = Object.entries(D).map(
-      ([$, L]) => [$, v[$] + L]
+    const A = Re({ snapAngles: S, posStart: x, x: g.x, y: g.y }), D = (m == null ? void 0 : m.onMove(A, d)) ?? {}, O = Object.entries(D).map(
+      ([$, L]) => [$, d[$] + L]
     );
-    return Object.assign({}, v, Object.fromEntries(O));
+    return Object.assign({}, d, Object.fromEntries(O));
   }
-  function n(v, g) {
-    const p = v.filter((y) => y.type === "move").flatMap((y) => y.targets.map((w) => {
+  function n(d, p) {
+    const g = d.filter((y) => y.type === "move").flatMap((y) => y.targets.map((w) => {
       const [m, b] = w.includes("-handle-") ? w.split("-handle-") : ["base", w];
       return { shapeId: b, handle: m, ...y };
     }));
-    return v.filter((y) => y.type !== "move").map(
-      (y) => p.filter((w) => y.id === w.shapeId).reduce((w, m) => u(w, g, m), y)
+    return d.filter((y) => y.type !== "move").map(
+      (y) => g.filter((w) => y.id === w.shapeId).reduce((w, m) => u(w, p, m), y)
     );
@@ -1527,11 +1527,11 @@ }
     props: { history: Array, activeShape: Object, width: Number, height: Number, tools: Array },
-    setup(v) {
-      const { simplifiedHistory: g } = ve({ ...fe(v), includeActiveShape: !0 });
-      return () => g.value.flatMap((p, y) => {
+    setup(d) {
+      const { simplifiedHistory: p } = ve({ ...fe(d), includeActiveShape: !0 });
+      return () => p.value.flatMap((g, y) => {
         var w, m;
-        return (m = (w = v.tools.find((b) => b.type === p.type)) == null ? void 0 : w.handles) == null ? void 0 : m.map((b) => {
-          const { x: S, y: x } = b.position(p);
+        return (m = (w = d.tools.find((b) => b.type === g.type)) == null ? void 0 : w.handles) == null ? void 0 : m.map((b) => {
+          const { x: S, y: x } = b.position(g);
           return B("circle", {
-            id: `${b.name}-handle-${p.id}`,
-            class: `handle use-tool-move ${e && y === g.value.length - 1 ? "is-active" : ""}`,
+            id: `${b.name}-handle-${g.id}`,
+            class: `handle use-tool-move ${e && y === p.value.length - 1 ? "is-active" : ""}`,
             cx: S,
@@ -1545,3 +1545,3 @@ cy: x
   };
-  function h({ svgId: v }) {
+  function h({ svgId: d }) {
     return `
@@ -1558,9 +1558,9 @@ circle.handle {
 
-      .active-tool-move #${v} circle.handle, 
-      .vp-editor #${v} circle.handle.is-active {
+      .active-tool-move #${d} circle.handle, 
+      .vp-editor #${d} circle.handle.is-active {
         r: ${t}px;
       }
 
-      .active-tool-move #${v} circle.handle:hover,
-      .vp-editor #${v} circle.handle.is-active:hover {
+      .active-tool-move #${d} circle.handle:hover,
+      .vp-editor #${d} circle.handle.is-active:hover {
         r: ${t * 1.5}px;
@@ -1570,6 +1570,6 @@ }
   }
-  function d({ svg: v }) {
-    v.querySelectorAll("circle.handle").forEach((g) => g.remove());
+  function v({ svg: d }) {
+    d.querySelectorAll("circle.handle").forEach((p) => p.remove());
   }
-  return { type: o, icon: i, onDrawStart: r, onDraw: c, onDrawEnd: a, simplifyHistory: n, ToolSvgComponent: f, svgStyle: h, beforeExport: d };
+  return { type: o, icon: i, onDrawStart: r, onDraw: c, onDrawEnd: a, simplifyHistory: n, ToolSvgComponent: f, svgStyle: h, beforeExport: v };
 }
@@ -1607,3 +1607,3 @@ function go(...e) {
     }
-  }), { getActiveEditor: r } = We();
+  }), { getActiveEditor: r } = _e();
   async function c() {
@@ -1620,3 +1620,3 @@ Object.entries(e).forEach(([a, u]) => {
 }
-const W = Math.sqrt(2) * 2, E = Math.sqrt(2), wo = [
+const _ = Math.sqrt(2) * 2, E = Math.sqrt(2), wo = [
   {
@@ -1635,3 +1635,3 @@ name: "base",
     opposite: "bottom-left",
-    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e + i / W, y: t - o / W }),
+    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e + i / _, y: t - o / _ }),
     onMove: ({ x: e, y: t }, { base: o }) => o === "center" ? { width: e * E * 2, height: -t * E * 2 } : { x: e / 2, y: t / 2, width: e * E, height: -t * E }
@@ -1647,3 +1647,3 @@ },
     opposite: "top-left",
-    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e + i / W, y: t + o / W }),
+    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e + i / _, y: t + o / _ }),
     onMove: ({ x: e, y: t }, { base: o }) => o === "center" ? { width: e * E * 2, height: t * E * 2 } : { x: e / 2, y: t / 2, width: e * E, height: t * E }
@@ -1659,3 +1659,3 @@ },
     opposite: "top-right",
-    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e - i / W, y: t + o / W }),
+    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e - i / _, y: t + o / _ }),
     onMove: ({ x: e, y: t }, { base: o }) => o === "center" ? { width: -e * E * 2, height: t * E * 2 } : { x: e / 2, y: t / 2, width: -e * E, height: t * E }
@@ -1671,3 +1671,3 @@ },
     opposite: "bottom-right",
-    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e - i / W, y: t - o / W }),
+    position: ({ x: e, y: t, height: o, width: i }) => ({ x: e - i / _, y: t - o / _ }),
     onMove: ({ x: e, y: t }, { base: o }) => o === "center" ? { width: -e * E * 2, height: -t * E * 2 } : { x: e / 2, y: t / 2, width: -e * E, height: -t * E }
@@ -1678,4 +1678,4 @@ }
   const t = "ellipse", o = Math.sqrt(2), i = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6c4.41 0 8 2.69 8 6s-3.59 6-8 6s-8-2.69-8-6s3.59-6 8-6m0-2C6.5 4 2 7.58 2 12s4.5 8 10 8s10-3.58 10-8s-4.5-8-10-8"/></svg>';
-  function l({ settings: c, id: a, minX: u, minY: n, maxX: f, maxY: h, posStart: d }) {
-    const v = e === "edge" ? {
+  function l({ settings: c, id: a, minX: u, minY: n, maxX: f, maxY: h, posStart: v }) {
+    const d = e === "edge" ? {
       x: u + (f - u) / 2,
@@ -1686,4 +1686,4 @@ y: n + (h - n) / 2,
     } : {
-      x: d.x,
-      y: d.y,
+      x: v.x,
+      y: v.y,
       width: (f - u) * o * 2,
@@ -1696,3 +1696,3 @@ height: (h - n) * o * 2
       base: e,
-      ...v,
+      ...d,
       thickness: c.thickness,
@@ -1814,3 +1814,3 @@ color: c.color
   ko as urlToBlob,
-  We as useActiveEditor,
+  _e as useActiveEditor,
   Eo as useAllTools,
@@ -1820,3 +1820,3 @@ lo as useArrow,
   uo as useCrop,
-  _t as useDraw,
+  Wt as useDraw,
   Kt as useEditor,
@@ -1823,0 +1823,0 @@ bo as useEllipse,

package.json

 {
   "name": "vue-paint",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140357

increased by0.09%

No dependency changes