react-scribble-pad
Version:
React transparent overlay just made easy.
1,727 lines • 65.1 kB
JavaScript
import { jsx as h, jsxs as z, Fragment as lt } from "react/jsx-runtime";
import Y, { useRef as j, useEffect as V, useCallback as ee, useState as W, Fragment as Ge, useMemo as He, useReducer as ct, useDebugValue as dt, useContext as ut, createContext as ft } from "react";
function x() {
return x = Object.assign ? Object.assign.bind() : function(e) {
for (var r = 1; r < arguments.length; r++) {
var t = arguments[r];
for (var n in t) ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
}
return e;
}, x.apply(null, arguments);
}
var te = 255, J = 100, ae = (e) => {
var {
r,
g: t,
b: n,
a: s
} = e, o = Math.max(r, t, n), c = o - Math.min(r, t, n), f = c ? o === r ? (t - n) / c : o === t ? 2 + (n - r) / c : 4 + (r - t) / c : 0;
return {
h: 60 * (f < 0 ? f + 6 : f),
s: o ? c / o * J : 0,
v: o / te * J,
a: s
};
}, Ue = (e) => {
var {
h: r,
s: t,
l: n,
a: s
} = Ke(e);
return "hsla(" + r + ", " + t + "%, " + n + "%, " + s + ")";
}, Ke = (e) => {
var {
h: r,
s: t,
v: n,
a: s
} = e, o = (200 - t) * n / J;
return {
h: r,
s: o > 0 && o < 200 ? t * n / J / (o <= J ? o : 200 - o) * J : 0,
l: o / 2,
a: s
};
}, Je = (e) => {
var {
r,
g: t,
b: n
} = e, s = r << 16 | t << 8 | n;
return "#" + ((o) => new Array(7 - o.length).join("0") + o)(s.toString(16));
}, ht = (e) => {
var {
r,
g: t,
b: n,
a: s
} = e, o = typeof s == "number" && (s * 255 | 256).toString(16).slice(1);
return "" + Je({
r,
g: t,
b: n
}) + (o || "");
}, le = (e) => ae(pt(e)), pt = (e) => {
var r = e.replace("#", "");
/^#?/.test(e) && r.length === 3 && (e = "#" + r.charAt(0) + r.charAt(0) + r.charAt(1) + r.charAt(1) + r.charAt(2) + r.charAt(2));
var t = new RegExp("[A-Za-z0-9]{2}", "g"), [n, s, o = 0, c] = e.match(t).map((f) => parseInt(f, 16));
return {
r: n,
g: s,
b: o,
a: (c ?? 255) / te
};
}, ve = (e) => {
var {
h: r,
s: t,
v: n,
a: s
} = e, o = r / 60, c = t / J, f = n / J, m = Math.floor(o) % 6, p = o - Math.floor(o), g = te * f * (1 - c), k = te * f * (1 - c * p), v = te * f * (1 - c * (1 - p));
f *= te;
var d = {};
switch (m) {
case 0:
d.r = f, d.g = v, d.b = g;
break;
case 1:
d.r = k, d.g = f, d.b = g;
break;
case 2:
d.r = g, d.g = f, d.b = v;
break;
case 3:
d.r = g, d.g = k, d.b = f;
break;
case 4:
d.r = v, d.g = g, d.b = f;
break;
case 5:
d.r = f, d.g = g, d.b = k;
break;
}
return d.r = Math.round(d.r), d.g = Math.round(d.g), d.b = Math.round(d.b), x({}, d, {
a: s
});
}, vt = (e) => {
var {
r,
g: t,
b: n,
a: s
} = ve(e);
return "rgba(" + r + ", " + t + ", " + n + ", " + s + ")";
}, gt = (e) => {
var {
r,
g: t,
b: n
} = e;
return {
r,
g: t,
b: n
};
}, bt = (e) => {
var {
h: r,
s: t,
l: n
} = e;
return {
h: r,
s: t,
l: n
};
}, ye = (e) => Je(ve(e)), wt = (e) => {
var {
h: r,
s: t,
v: n
} = e;
return {
h: r,
s: t,
v: n
};
}, xt = (e) => {
var {
r,
g: t,
b: n
} = e, s = function(g) {
return g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
}, o = s(r / 255), c = s(t / 255), f = s(n / 255), m = {};
return m.x = o * 0.4124 + c * 0.3576 + f * 0.1805, m.y = o * 0.2126 + c * 0.7152 + f * 0.0722, m.bri = o * 0.0193 + c * 0.1192 + f * 0.9505, m;
}, re = (e) => {
var r, t, n, s, o, c, f, m, p;
return typeof e == "string" && me(e) ? (c = le(e), m = e) : typeof e != "string" && (c = e), c && (n = wt(c), o = Ke(c), s = ve(c), p = ht(s), m = ye(c), t = bt(o), r = gt(s), f = xt(r)), {
rgb: r,
hsl: t,
hsv: n,
rgba: s,
hsla: o,
hsva: c,
hex: m,
hexa: p,
xy: f
};
}, me = (e) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e);
function H(e, r) {
if (e == null) return {};
var t = {};
for (var n in e) if ({}.hasOwnProperty.call(e, n)) {
if (r.indexOf(n) !== -1) continue;
t[n] = e[n];
}
return t;
}
function $e(e) {
var r = j(e);
return V(() => {
r.current = e;
}), ee((t, n) => r.current && r.current(t, n), []);
}
var ie = (e) => "touches" in e, ze = (e) => {
!ie(e) && e.preventDefault && e.preventDefault();
}, De = function(r, t, n) {
return t === void 0 && (t = 0), n === void 0 && (n = 1), r > n ? n : r < t ? t : r;
}, Ie = (e, r) => {
var t = e.getBoundingClientRect(), n = ie(r) ? r.touches[0] : r;
return {
left: De((n.pageX - (t.left + window.pageXOffset)) / t.width),
top: De((n.pageY - (t.top + window.pageYOffset)) / t.height),
width: t.width,
height: t.height,
x: n.pageX - (t.left + window.pageXOffset),
y: n.pageY - (t.top + window.pageYOffset)
};
}, yt = ["prefixCls", "className", "onMove", "onDown"], Se = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-interactive",
className: n,
onMove: s,
onDown: o
} = e, c = H(e, yt), f = j(null), m = j(!1), [p, g] = W(!1), k = $e(s), v = $e(o), d = (y) => m.current && !ie(y) ? !1 : (m.current = ie(y), !0), i = ee((y) => {
if (ze(y), !!f.current) {
var L = ie(y) ? y.touches.length > 0 : y.buttons > 0;
if (!L) {
g(!1);
return;
}
k?.(Ie(f.current, y), y);
}
}, [k]), b = ee(() => g(!1), []), l = ee((y) => {
y ? (window.addEventListener(m.current ? "touchmove" : "mousemove", i), window.addEventListener(m.current ? "touchend" : "mouseup", b)) : (window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", b), window.removeEventListener("touchmove", i), window.removeEventListener("touchend", b));
}, [i, b]);
V(() => (l(p), () => {
l(!1);
}), [p, i, b, l]);
var w = ee((y) => {
var L = document.activeElement;
L?.blur(), ze(y.nativeEvent), d(y.nativeEvent) && f.current && (v?.(Ie(f.current, y.nativeEvent), y.nativeEvent), g(!0));
}, [v]);
return /* @__PURE__ */ h("div", x({}, c, {
className: [t, n || ""].filter(Boolean).join(" "),
style: x({}, c.style, {
touchAction: "none"
}),
ref: f,
tabIndex: 0,
onMouseDown: w,
onTouchStart: w
}));
});
Se.displayName = "Interactive";
var mt = ["className", "prefixCls", "left", "top", "style", "fillProps"], kt = (e) => {
var {
className: r,
prefixCls: t,
left: n,
top: s,
style: o,
fillProps: c
} = e, f = H(e, mt), m = x({}, o, {
position: "absolute",
left: n,
top: s
}), p = x({
width: 18,
height: 18,
boxShadow: "var(--alpha-pointer-box-shadow)",
borderRadius: "50%",
backgroundColor: "var(--alpha-pointer-background-color)"
}, c?.style, {
transform: n ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
});
return /* @__PURE__ */ h("div", x({
className: t + "-pointer " + (r || ""),
style: m
}, f, {
children: /* @__PURE__ */ h("div", x({
className: t + "-fill"
}, c, {
style: p
}))
}));
}, Ct = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"], St = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==", fe = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-alpha",
className: n,
hsva: s,
background: o,
bgProps: c = {},
innerProps: f = {},
pointerProps: m = {},
radius: p = 0,
width: g,
height: k = 16,
direction: v = "horizontal",
style: d,
onChange: i,
pointer: b
} = e, l = H(e, Ct), w = (u) => {
i && i(x({}, s, {
a: v === "horizontal" ? u.left : u.top
}), u);
}, y = Ue(Object.assign({}, s, {
a: 1
})), L = "linear-gradient(to " + (v === "horizontal" ? "right" : "bottom") + ", rgba(244, 67, 54, 0) 0%, " + y + " 100%)", T = {};
v === "horizontal" ? T.left = s.a * 100 + "%" : T.top = s.a * 100 + "%";
var M = x({
"--alpha-background-color": "#fff",
"--alpha-pointer-background-color": "rgb(248, 248, 248)",
"--alpha-pointer-box-shadow": "rgb(0 0 0 / 37%) 0px 1px 4px 0px",
borderRadius: p,
background: "url(" + St + ") left center",
backgroundColor: "var(--alpha-background-color)"
}, {
width: g,
height: k
}, d, {
position: "relative"
}), R = b && typeof b == "function" ? b(x({
prefixCls: t
}, m, T)) : /* @__PURE__ */ h(kt, x({}, m, {
prefixCls: t
}, T));
return /* @__PURE__ */ z("div", x({}, l, {
className: [t, t + "-" + v, n || ""].filter(Boolean).join(" "),
style: M,
ref: r,
children: [/* @__PURE__ */ h("div", x({}, c, {
style: x({
inset: 0,
position: "absolute",
background: o || L,
borderRadius: p
}, c.style)
})), /* @__PURE__ */ h(Se, x({}, f, {
style: x({}, f.style, {
inset: 0,
zIndex: 1,
position: "absolute"
}),
onMove: w,
onDown: w,
children: R
}))]
}));
});
fe.displayName = "Alpha";
var Et = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"], Pt = (e) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e), Tt = (e) => Number(String(e).replace(/%/g, "")), ne = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-editable-input",
placement: n = "bottom",
label: s,
value: o,
className: c,
style: f,
labelStyle: m,
inputStyle: p,
onChange: g,
onBlur: k,
renderInput: v
} = e, d = H(e, Et), [i, b] = W(o), l = j(!1);
V(() => {
e.value !== i && (l.current || b(e.value));
}, [e.value]);
function w(u, A) {
var C = (A || u.target.value).trim().replace(/^#/, "");
Pt(C) && g && g(u, C);
var S = Tt(C);
isNaN(S) || g && g(u, S), b(C);
}
function y(u) {
l.current = !1, b(e.value), k && k(u);
}
var L = {};
n === "bottom" && (L.flexDirection = "column"), n === "top" && (L.flexDirection = "column-reverse"), n === "left" && (L.flexDirection = "row-reverse");
var T = x({
"--editable-input-label-color": "rgb(153, 153, 153)",
"--editable-input-box-shadow": "rgb(204 204 204) 0px 0px 0px 1px inset",
"--editable-input-color": "#666",
position: "relative",
alignItems: "center",
display: "flex",
fontSize: 11
}, L, f), M = x({
width: "100%",
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
fontSize: 11,
background: "transparent",
boxSizing: "border-box",
border: "none",
color: "var(--editable-input-color)",
boxShadow: "var(--editable-input-box-shadow)"
}, p), R = x({
value: i,
onChange: w,
onBlur: y,
autoComplete: "off",
onFocus: () => l.current = !0
}, d, {
style: M
});
return /* @__PURE__ */ z("div", {
className: [t, c || ""].filter(Boolean).join(" "),
style: T,
children: [v ? v(R, r) : /* @__PURE__ */ h("input", x({
ref: r
}, R)), s && /* @__PURE__ */ h("span", {
style: x({
color: "var(--editable-input-label-color)",
textTransform: "capitalize"
}, m),
children: s
})]
});
});
ne.displayName = "EditableInput";
var At = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"], Qe = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-swatch",
className: n,
color: s,
colors: o = [],
style: c,
rectProps: f = {},
onChange: m,
addonAfter: p,
addonBefore: g,
rectRender: k
} = e, v = H(e, At), d = x({
"--swatch-background-color": "rgb(144, 19, 254)",
background: "var(--swatch-background-color)",
height: 15,
width: 15,
marginRight: 5,
marginBottom: 5,
cursor: "pointer",
position: "relative",
outline: "none",
borderRadius: 2
}, f.style), i = (b, l) => {
m && m(le(b), re(le(b)), l);
};
return /* @__PURE__ */ z("div", x({
ref: r
}, v, {
className: [t, n || ""].filter(Boolean).join(" "),
style: x({
display: "flex",
flexWrap: "wrap",
position: "relative"
}, c),
children: [g && /* @__PURE__ */ Y.isValidElement(g) && g, o && Array.isArray(o) && o.map((b, l) => {
var w = "", y = "";
typeof b == "string" && (w = b, y = b), typeof b == "object" && b.color && (w = b.title || b.color, y = b.color);
var L = s && s.toLocaleLowerCase() === y.toLocaleLowerCase(), T = k && k({
title: w,
color: y,
checked: !!L,
style: x({}, d, {
background: y
}),
onClick: (R) => i(y, R)
});
if (T)
return /* @__PURE__ */ h(Ge, {
children: T
}, l);
var M = f.children && /* @__PURE__ */ Y.isValidElement(f.children) ? /* @__PURE__ */ Y.cloneElement(f.children, {
color: y,
checked: L
}) : null;
return /* @__PURE__ */ h("div", x({
tabIndex: 0,
title: w,
onClick: (R) => i(y, R)
}, f, {
children: M,
style: x({}, d, {
background: y
})
}), l);
}), p && /* @__PURE__ */ Y.isValidElement(p) && p]
}));
});
Qe.displayName = "Swatch";
var Nt = (e) => {
var {
className: r,
color: t,
left: n,
top: s,
prefixCls: o
} = e, c = {
position: "absolute",
top: s,
left: n
}, f = {
"--saturation-pointer-box-shadow": "rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",
width: 6,
height: 6,
transform: "translate(-3px, -3px)",
boxShadow: "var(--saturation-pointer-box-shadow)",
borderRadius: "50%",
backgroundColor: t
};
return He(() => /* @__PURE__ */ h("div", {
className: o + "-pointer " + (r || ""),
style: c,
children: /* @__PURE__ */ h("div", {
className: o + "-fill",
style: f
})
}), [s, n, t, r, o]);
}, Lt = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"], Ze = /* @__PURE__ */ Y.forwardRef((e, r) => {
var t, {
prefixCls: n = "w-color-saturation",
radius: s = 0,
pointer: o,
className: c,
hue: f = 0,
style: m,
hsva: p,
onChange: g
} = e, k = H(e, Lt), v = x({
width: 200,
height: 200,
borderRadius: s
}, m, {
position: "relative"
}), d = (b, l) => {
g && p && g({
h: p.h,
s: b.left * 100,
v: (1 - b.top) * 100,
a: p.a
// source: 'hsv',
});
}, i = He(() => {
if (!p) return null;
var b = {
top: 100 - p.v + "%",
left: p.s + "%",
color: Ue(p)
};
return o && typeof o == "function" ? o(x({
prefixCls: n
}, b)) : /* @__PURE__ */ h(Nt, x({
prefixCls: n
}, b));
}, [p, o, n]);
return /* @__PURE__ */ h(Se, x({
className: [n, c || ""].filter(Boolean).join(" ")
}, k, {
style: x({
position: "absolute",
inset: 0,
cursor: "crosshair",
backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((t = p?.h) != null ? t : f) + ", 100%, 50%))"
}, v),
ref: r,
onMove: d,
onDown: d,
children: i
}));
});
Ze.displayName = "Saturation";
var Rt = ["prefixCls", "className", "hue", "onChange", "direction"], qe = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-hue",
className: n,
hue: s = 0,
onChange: o,
direction: c = "horizontal"
} = e, f = H(e, Rt);
return /* @__PURE__ */ h(fe, x({
ref: r,
className: t + " " + (n || "")
}, f, {
direction: c,
background: "linear-gradient(to " + (c === "horizontal" ? "right" : "bottom") + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
hsva: {
h: s,
s: 100,
v: 100,
a: s / 360
},
onChange: (m, p) => {
o && o({
h: c === "horizontal" ? 360 * p.left : 360 * p.top
});
}
}));
});
qe.displayName = "Hue";
var _t = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"], et = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-editable-input-rgba",
hsva: n,
placement: s = "bottom",
rProps: o = {},
gProps: c = {},
bProps: f = {},
aProps: m = {},
className: p,
style: g,
onChange: k
} = e, v = H(e, _t), d = n ? ve(n) : {};
function i(l) {
var w = Number(l.target.value);
w && w > 255 && (l.target.value = "255"), w && w < 0 && (l.target.value = "0");
}
var b = (l, w, y) => {
typeof l == "number" && (w === "a" && (l < 0 && (l = 0), l > 100 && (l = 100), k && k(re(ae(x({}, d, {
a: l / 100
}))))), l > 255 && (l = 255, y.target.value = "255"), l < 0 && (l = 0, y.target.value = "0"), w === "r" && k && k(re(ae(x({}, d, {
r: l
})))), w === "g" && k && k(re(ae(x({}, d, {
g: l
})))), w === "b" && k && k(re(ae(x({}, d, {
b: l
})))));
};
return /* @__PURE__ */ z("div", x({
ref: r,
className: [t, p || ""].filter(Boolean).join(" ")
}, v, {
style: x({
fontSize: 11,
display: "flex"
}, g),
children: [/* @__PURE__ */ h(ne, x({
label: "R",
value: d.r || 0,
onBlur: i,
placement: s,
onChange: (l, w) => b(w, "r", l)
}, o, {
style: x({}, o.style)
})), /* @__PURE__ */ h(ne, x({
label: "G",
value: d.g || 0,
onBlur: i,
placement: s,
onChange: (l, w) => b(w, "g", l)
}, c, {
style: x({
marginLeft: 5
}, o.style)
})), /* @__PURE__ */ h(ne, x({
label: "B",
value: d.b || 0,
onBlur: i,
placement: s,
onChange: (l, w) => b(w, "b", l)
}, f, {
style: x({
marginLeft: 5
}, f.style)
})), m && /* @__PURE__ */ h(ne, x({
label: "A",
value: d.a ? parseInt(String(d.a * 100), 10) : 0,
onBlur: i,
placement: s,
onChange: (l, w) => b(w, "a", l)
}, m, {
style: x({
marginLeft: 5
}, m.style)
}))]
}));
});
et.displayName = "EditableInputRGBA";
var $t = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"], zt = ["#D0021B", "#F5A623", "#f8e61b", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"], Me = (e) => /* @__PURE__ */ h("div", {
style: {
boxShadow: "rgb(0 0 0 / 60%) 0px 0px 2px",
width: 4,
top: 1,
bottom: 1,
left: e.left,
borderRadius: 1,
position: "absolute",
backgroundColor: "#fff"
}
}), tt = /* @__PURE__ */ Y.forwardRef((e, r) => {
var {
prefixCls: t = "w-color-sketch",
className: n,
onChange: s,
width: o = 218,
presetColors: c = zt,
color: f,
editableDisable: m = !0,
disableAlpha: p = !1,
style: g
} = e, k = H(e, $t), [v, d] = W({
h: 209,
s: 36,
v: 90,
a: 1
});
V(() => {
typeof f == "string" && me(f) && d(le(f)), typeof f == "object" && d(f);
}, [f]);
var i = (R) => {
d(R), s && s(re(R));
}, b = (R, u) => {
typeof R == "string" && me(R) && /(3|6)/.test(String(R.length)) && i(le(R));
}, l = (R) => i(x({}, v, {
a: R.a
})), w = (R) => i(x({}, v, R, {
a: v.a
})), y = x({
"--sketch-background": "rgb(255, 255, 255)",
"--sketch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px",
"--sketch-swatch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset",
"--sketch-alpha-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset",
"--sketch-swatch-border-top": "1px solid rgb(238, 238, 238)",
background: "var(--sketch-background)",
borderRadius: 4,
boxShadow: "var(--sketch-box-shadow)",
width: o
}, g), L = {
borderRadius: 2,
background: vt(v),
boxShadow: "var(--sketch-alpha-box-shadow)"
}, T = {
borderTop: "var(--sketch-swatch-border-top)",
paddingTop: 10,
paddingLeft: 10
}, M = {
marginRight: 10,
marginBottom: 10,
borderRadius: 3,
boxShadow: "var(--sketch-swatch-box-shadow)"
};
return /* @__PURE__ */ z("div", x({}, k, {
className: t + " " + (n || ""),
ref: r,
style: y,
children: [/* @__PURE__ */ z("div", {
style: {
padding: "10px 10px 8px"
},
children: [/* @__PURE__ */ h(Ze, {
hsva: v,
style: {
width: "auto",
height: 150
},
onChange: w
}), /* @__PURE__ */ z("div", {
style: {
display: "flex",
marginTop: 4
},
children: [/* @__PURE__ */ z("div", {
style: {
flex: 1
},
children: [/* @__PURE__ */ h(qe, {
width: "auto",
height: 10,
hue: v.h,
pointer: Me,
innerProps: {
style: {
marginLeft: 1,
marginRight: 5
}
},
onChange: (R) => i(x({}, v, R))
}), !p && /* @__PURE__ */ h(fe, {
width: "auto",
height: 10,
hsva: v,
pointer: Me,
style: {
marginTop: 4
},
innerProps: {
style: {
marginLeft: 1,
marginRight: 5
}
},
onChange: l
})]
}), !p && /* @__PURE__ */ h(fe, {
width: 24,
height: 24,
hsva: v,
radius: 2,
style: {
marginLeft: 4
},
bgProps: {
style: {
background: "transparent"
}
},
innerProps: {
style: L
},
pointer: () => /* @__PURE__ */ h(Ge, {})
})]
})]
}), m && /* @__PURE__ */ z("div", {
style: {
display: "flex",
margin: "0 10px 3px 10px"
},
children: [/* @__PURE__ */ h(ne, {
label: "Hex",
value: ye(v).replace(/^#/, "").toLocaleUpperCase(),
onChange: (R, u) => b(u),
style: {
minWidth: 58
}
}), /* @__PURE__ */ h(et, {
hsva: v,
style: {
marginLeft: 6
},
aProps: p ? !1 : {},
onChange: (R) => i(R.hsva)
})]
}), c && c.length > 0 && /* @__PURE__ */ h(Qe, {
style: T,
colors: c,
color: ye(v),
onChange: (R) => i(R),
rectProps: {
style: M
}
})]
}));
});
tt.displayName = "Sketch";
function Be({ pick: e, position: r }) {
return /* @__PURE__ */ h(
tt,
{
style: {
position: "absolute",
bottom: 50,
left: r
},
onChange: (t) => {
e({ ...t.rgba });
}
}
);
}
const se = {}, Oe = (e, r) => e.unstable_is ? e.unstable_is(r) : r === e, We = (e) => "init" in e, be = (e) => !!e.write, Ye = (e) => "v" in e || "e" in e, ue = (e) => {
if ("e" in e)
throw e.e;
if ((se ? "production" : void 0) !== "production" && !("v" in e))
throw new Error("[Bug] atom state is not initialized");
return e.v;
}, he = /* @__PURE__ */ new WeakMap(), Xe = (e) => {
var r;
return pe(e) && !!((r = he.get(e)) != null && r[0]);
}, Dt = (e) => {
const r = he.get(e);
r?.[0] && (r[0] = !1, r[1].forEach((t) => t()));
}, rt = (e, r) => {
let t = he.get(e);
if (!t) {
t = [!0, /* @__PURE__ */ new Set()], he.set(e, t);
const n = () => {
t[0] = !1;
};
e.then(n, n);
}
t[1].add(r);
}, pe = (e) => typeof e?.then == "function", nt = (e, r, t) => {
t.p.has(e) || (t.p.add(e), r.then(
() => {
t.p.delete(e);
},
() => {
t.p.delete(e);
}
));
}, we = (e, r, t) => {
const n = t(e), s = "v" in n, o = n.v;
if (pe(r))
for (const c of n.d.keys())
nt(e, r, t(c));
n.v = r, delete n.e, (!s || !Object.is(o, n.v)) && (++n.n, pe(o) && Dt(o));
}, je = (e, r, t) => {
var n;
const s = /* @__PURE__ */ new Set();
for (const o of ((n = t.get(e)) == null ? void 0 : n.t) || [])
t.has(o) && s.add(o);
for (const o of r.p)
s.add(o);
return s;
}, It = Symbol(), Mt = (e = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), t = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), c = {}, f = (v, ...d) => v.read(...d), m = (v, ...d) => v.write(...d), p = (v, d) => {
var i;
return (i = v.unstable_onInit) == null ? void 0 : i.call(v, d);
}, g = (v, d) => {
var i;
return (i = v.onMount) == null ? void 0 : i.call(v, d);
}, ...k) => {
const v = k[0] || ((u) => {
if ((se ? "production" : void 0) !== "production" && !u)
throw new Error("Atom is undefined or null");
let A = e.get(u);
return A || (A = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, e.set(u, A), p?.(u, R)), A;
}), d = k[1] || (() => {
const u = [], A = (C) => {
try {
C();
} catch (S) {
u.push(S);
}
};
do {
c.f && A(c.f);
const C = /* @__PURE__ */ new Set(), S = C.add.bind(C);
n.forEach((E) => {
var P;
return (P = r.get(E)) == null ? void 0 : P.l.forEach(S);
}), n.clear(), o.forEach(S), o.clear(), s.forEach(S), s.clear(), C.forEach(A), n.size && i();
} while (n.size || o.size || s.size);
if (u.length)
throw new AggregateError(u);
}), i = k[2] || (() => {
const u = [], A = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), S = Array.from(n);
for (; S.length; ) {
const E = S[S.length - 1], P = v(E);
if (C.has(E)) {
S.pop();
continue;
}
if (A.has(E)) {
if (t.get(E) === P.n)
u.push([E, P]);
else if ((se ? "production" : void 0) !== "production" && t.has(E))
throw new Error("[Bug] invalidated atom exists");
C.add(E), S.pop();
continue;
}
A.add(E);
for (const I of je(E, P, r))
A.has(I) || S.push(I);
}
for (let E = u.length - 1; E >= 0; --E) {
const [P, I] = u[E];
let B = !1;
for (const F of I.d.keys())
if (F !== P && n.has(F)) {
B = !0;
break;
}
B && (b(P), y(P)), t.delete(P);
}
}), b = k[3] || ((u) => {
var A;
const C = v(u);
if (Ye(C) && (r.has(u) && t.get(u) !== C.n || Array.from(C.d).every(
([D, U]) => (
// Recursively, read the atom state of the dependency, and
// check if the atom epoch number is unchanged
b(D).n === U
)
)))
return C;
C.d.clear();
let S = !0;
const E = () => {
r.has(u) && (y(u), i(), d());
}, P = (D) => {
var U;
if (Oe(u, D)) {
const _ = v(D);
if (!Ye(_))
if (We(D))
we(D, D.init, v);
else
throw new Error("no atom init");
return ue(_);
}
const a = b(D);
try {
return ue(a);
} finally {
C.d.set(D, a.n), Xe(C.v) && nt(u, C.v, a), (U = r.get(D)) == null || U.t.add(u), S || E();
}
};
let I, B;
const F = {
get signal() {
return I || (I = new AbortController()), I.signal;
},
get setSelf() {
return (se ? "production" : void 0) !== "production" && !be(u) && console.warn("setSelf function cannot be used with read-only atom"), !B && be(u) && (B = (...D) => {
if ((se ? "production" : void 0) !== "production" && S && console.warn("setSelf function cannot be called in sync"), !S)
try {
return w(u, ...D);
} finally {
i(), d();
}
}), B;
}
}, Q = C.n;
try {
const D = f(u, P, F);
return we(u, D, v), pe(D) && (rt(D, () => I?.abort()), D.then(
E,
E
)), C;
} catch (D) {
return delete C.v, C.e = D, ++C.n, C;
} finally {
S = !1, Q !== C.n && t.get(u) === Q && (t.set(u, C.n), n.add(u), (A = c.c) == null || A.call(c, u));
}
}), l = k[4] || ((u) => {
const A = [u];
for (; A.length; ) {
const C = A.pop(), S = v(C);
for (const E of je(C, S, r)) {
const P = v(E);
t.set(E, P.n), A.push(E);
}
}
}), w = k[5] || ((u, ...A) => {
let C = !0;
const S = (P) => ue(b(P)), E = (P, ...I) => {
var B;
const F = v(P);
try {
if (Oe(u, P)) {
if (!We(P))
throw new Error("atom not writable");
const Q = F.n, D = I[0];
we(P, D, v), y(P), Q !== F.n && (n.add(P), (B = c.c) == null || B.call(c, P), l(P));
return;
} else
return w(P, ...I);
} finally {
C || (i(), d());
}
};
try {
return m(u, S, E, ...A);
} finally {
C = !1;
}
}), y = k[6] || ((u) => {
var A;
const C = v(u), S = r.get(u);
if (S && !Xe(C.v)) {
for (const [E, P] of C.d)
if (!S.d.has(E)) {
const I = v(E);
L(E).t.add(u), S.d.add(E), P !== I.n && (n.add(E), (A = c.c) == null || A.call(c, E), l(E));
}
for (const E of S.d || [])
if (!C.d.has(E)) {
S.d.delete(E);
const P = T(E);
P?.t.delete(u);
}
}
}), L = k[7] || ((u) => {
var A;
const C = v(u);
let S = r.get(u);
if (!S) {
b(u);
for (const E of C.d.keys())
L(E).t.add(u);
if (S = {
l: /* @__PURE__ */ new Set(),
d: new Set(C.d.keys()),
t: /* @__PURE__ */ new Set()
}, r.set(u, S), (A = c.m) == null || A.call(c, u), be(u)) {
const E = () => {
let P = !0;
const I = (...B) => {
try {
return w(u, ...B);
} finally {
P || (i(), d());
}
};
try {
const B = g(u, I);
B && (S.u = () => {
P = !0;
try {
B();
} finally {
P = !1;
}
});
} finally {
P = !1;
}
};
s.add(E);
}
}
return S;
}), T = k[8] || ((u) => {
var A;
const C = v(u);
let S = r.get(u);
if (S && !S.l.size && !Array.from(S.t).some((E) => {
var P;
return (P = r.get(E)) == null ? void 0 : P.d.has(u);
})) {
S.u && o.add(S.u), S = void 0, r.delete(u), (A = c.u) == null || A.call(c, u);
for (const E of C.d.keys()) {
const P = T(E);
P?.t.delete(u);
}
return;
}
return S;
}), M = [
// store state
e,
r,
t,
n,
s,
o,
c,
// atom interceptors
f,
m,
p,
g,
// building-block functions
v,
d,
i,
b,
l,
w,
y,
L,
T
], R = {
get: (u) => ue(b(u)),
set: (u, ...A) => {
try {
return w(u, ...A);
} finally {
i(), d();
}
},
sub: (u, A) => {
const S = L(u).l;
return S.add(A), d(), () => {
S.delete(A), T(u), d();
};
}
};
return Object.defineProperty(R, It, { value: M }), R;
}, Bt = Mt, Ve = rt, ot = {};
let Ot = 0;
function at(e, r) {
const t = `atom${++Ot}`, n = {
toString() {
return (ot ? "production" : void 0) !== "production" && this.debugLabel ? t + ":" + this.debugLabel : t;
}
};
return typeof e == "function" ? n.read = e : (n.init = e, n.read = Wt, n.write = Yt), n;
}
function Wt(e) {
return e(this);
}
function Yt(e, r, t) {
return r(
this,
typeof t == "function" ? t(e(this)) : t
);
}
function Xt() {
return Bt();
}
let oe;
function jt() {
return oe || (oe = Xt(), (ot ? "production" : void 0) !== "production" && (globalThis.__JOTAI_DEFAULT_STORE__ || (globalThis.__JOTAI_DEFAULT_STORE__ = oe), globalThis.__JOTAI_DEFAULT_STORE__ !== oe && console.warn(
"Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"
))), oe;
}
const Vt = {}, Ft = ft(
void 0
);
function st(e) {
return ut(Ft) || jt();
}
const ke = (e) => typeof e?.then == "function", Ce = (e) => {
e.status || (e.status = "pending", e.then(
(r) => {
e.status = "fulfilled", e.value = r;
},
(r) => {
e.status = "rejected", e.reason = r;
}
));
}, Gt = Y.use || // A shim for older React versions
((e) => {
if (e.status === "pending")
throw e;
if (e.status === "fulfilled")
return e.value;
throw e.status === "rejected" ? e.reason : (Ce(e), e);
}), xe = /* @__PURE__ */ new WeakMap(), Fe = (e, r) => {
let t = xe.get(e);
return t || (t = new Promise((n, s) => {
let o = e;
const c = (p) => (g) => {
o === p && n(g);
}, f = (p) => (g) => {
o === p && s(g);
}, m = () => {
try {
const p = r();
ke(p) ? (xe.set(p, t), o = p, p.then(c(p), f(p)), Ve(p, m)) : n(p);
} catch (p) {
s(p);
}
};
e.then(c(e), f(e)), Ve(e, m);
}), xe.set(e, t)), t;
};
function Ht(e, r) {
const { delay: t, unstable_promiseStatus: n = !Y.use } = {}, s = st(), [[o, c, f], m] = ct(
(g) => {
const k = s.get(e);
return Object.is(g[0], k) && g[1] === s && g[2] === e ? g : [k, s, e];
},
void 0,
() => [s.get(e), s, e]
);
let p = o;
if ((c !== s || f !== e) && (m(), p = s.get(e)), V(() => {
const g = s.sub(e, () => {
if (n)
try {
const k = s.get(e);
ke(k) && Ce(
Fe(k, () => s.get(e))
);
} catch {
}
if (typeof t == "number") {
setTimeout(m, t);
return;
}
m();
});
return m(), g;
}, [s, e, t, n]), dt(p), ke(p)) {
const g = Fe(p, () => s.get(e));
return n && Ce(g), Gt(g);
}
return p;
}
function Ut(e, r) {
const t = st();
return ee(
(...s) => {
if ((Vt ? "production" : void 0) !== "production" && !("write" in e))
throw new Error("not writable atom");
return t.set(e, ...s);
},
[t, e]
);
}
function ce(e, r) {
return [
Ht(e),
// We do wrong type assertion here, which results in throwing an error.
Ut(e)
];
}
const it = at(!1);
function Kt() {
const [, e] = ce(it), [r, t] = W(""), [n, s] = W(!1), [o, c] = W(!1), f = j(null), [m, p] = ce(Ee), [g, k] = W({
x: 0,
y: 0,
width: 0,
height: 0
});
return V(() => {
const d = (i) => {
const b = i.target;
if (b.classList.contains("dynamic-input") || b?.parentNode?.classList.contains("li-box") || !m.sticketTextAtom) {
c(!1);
return;
}
if (f.current && f?.current.contains(i.target)) {
c(!1);
return;
} else
t(""), c(!0), setTimeout(() => {
f?.current?.focus();
}, 0);
const l = {
x: i.clientX,
y: i.clientY,
width: window.innerWidth,
height: window.innerHeight
};
k(l);
};
return window.addEventListener("mousedown", d), () => {
window.removeEventListener("mousedown", d);
};
}, [m.sticketTextAtom]), o && /* @__PURE__ */ h("form", { onSubmit: (d) => {
d.preventDefault();
const i = document.createElement("div");
i.textContent = r, i.style.minWidth = "50px", i.style.maxWidth = "150px", i.style.resize = "both", i.contentEditable = "true", i.setAttribute("placeholder", "Max 30 words"), i.style.whiteSpace = "wrap", i.style.wordBreak = "break-word", i.style.overflowWrap = "break-word", i.style.border = "none", i.style.outline = "none", i.style.borderRadius = "10px", i.style.padding = "0.55rem", i.style.backdropFilter = "blur(10px)", i.style.zIndex = "214748364", i.spellcheck = !1, i.style.font = `${m.fontSize}px Arial`, i.style.touchAction = "none", i.style.background = "rgba(37, 235, 221, 0.6)", i.style.cursor = "grab", i.style.position = "fixed", i.style.left = `${g.x}px`, i.style.top = `${g.y}px`, i.className = "dynamic-input", document.body.appendChild(i);
let b = !1, l = 0, w = 0;
t(""), c(!1), i.addEventListener("mouseenter", () => {
p((T) => ({ ...T, hidePen: !0 }));
}), i.addEventListener("mouseleave", () => {
p((T) => ({ ...T, hidePen: !1 }));
}), i.addEventListener("mousedown", (T) => {
b = !0, l = T.clientX - i.offsetLeft, w = T.clientY - i.offsetTop;
});
let y = 0;
i.addEventListener("keydown", () => {
s(!0), y && clearTimeout(y), y = setTimeout(() => {
s(!1);
}, 500);
});
const L = (T) => {
b && (i.style.left = `${T.clientX - l}px`, i.style.top = `${T.clientY - w}px`);
};
document.addEventListener("mousemove", L), i.addEventListener("touchstart", (T) => {
T.touches.length > 0 && (e(!0), b = !0);
}), document.addEventListener("touchmove", (T) => {
if (b && T.touches.length > 0) {
const M = T.touches[0];
i.style.left = `${M.clientX - i.clientWidth / 2}px`, i.style.top = `${M.clientY - i.clientHeight / 2}px`;
}
}), document.addEventListener("touchend", () => {
b = !1, e(!1);
}), document.addEventListener("mouseup", () => {
b = !1;
}), i.addEventListener("keydown", (T) => {
T.key === "Delete" ? (p((M) => ({ ...M, hidePen: !1 })), i.remove()) : T.key === "Enter" && T.shiftKey ? i.appendChild(document.createElement("br")) : (T.key === "Escape" || T.key === "Enter") && i.blur(), T.key === "Backspace" && i.textContent?.trim() === "" && (p((M) => ({ ...M, hidePen: !1 })), i.remove());
});
}, children: /* @__PURE__ */ h(
"input",
{
onKeyDown: (d) => {
d.key === "Escape" && (c(!1), t(""));
},
ref: f,
style: {
width: "150px",
height: "30px",
position: "fixed",
borderRadius: "3px",
// pointerEvents: "none",
zIndex: 2147483647,
transition: "transform 0.02s ease-in-out",
transform: `translate(${(g.x - 75) / g.width * window.innerWidth}px, ${(g.y - 25) / g.height * window.innerHeight}px)`
},
onChange: (d) => {
n || t(d.target.value);
},
type: "text",
value: r,
className: "sticker-editor"
}
) });
}
function K({ right: e, bottom: r, value: t }) {
return /* @__PURE__ */ h(
"div",
{
style: {
position: "absolute",
bottom: `${r}%`,
right: `${e}px`,
color: "black",
fontSize: "10px"
},
children: t
}
);
}
const Ee = at({
sticketTextAtom: !1,
bgColor: "",
fontSize: 16,
customizeCursor: !1,
hidePenOnEraser: !1
});
function Jt() {
const [e] = ce(it), [r, t] = W({
openPalette: !1,
color: ""
}), n = j(null), s = j(null), [o, c] = W(), [f, m] = W({ x: -100, y: -100 }), p = j(null), g = j({ x: 0, y: 0 }), [k, v] = ce(Ee), [d, i] = W({
textSize: ""
}), b = j(!1), l = j({
eraser: !1,
pickColor: !1,
showText: !1,
canvasText: !1,
moveSticker: !1,
lockScroll: !1
}), [w, y] = W({
eraser: !1,
pickColor: !1,
penSize: !1,
canvasText: !1,
showScreen: !0,
lockScroll: !1
}), [L, T] = W(!1);
V(() => {
l.current.moveSticker = e;
const a = () => {
window.matchMedia("(pointer: coarse)").matches ? T(!0) : T(!1);
};
return a(), window.addEventListener("resize", a), () => {
window.removeEventListener("resize", a);
};
}, [e]), V(() => {
const a = n.current;
if (!a) return;
const _ = a.getContext("2d");
if (!_ || (c(_), !o)) return;
let G;
G = window.devicePixelRatio || 1, a.width = window.innerWidth * G, a.height = window.innerHeight * G, a.style.width = `${window.innerWidth}px`, a.style.height = `${window.innerHeight}px`, o.scale(G, G), o.lineWidth = 5, o.fill(), o.font = "20px Arial";
const de = (N) => {
const $ = a.getBoundingClientRect(), O = N.clientX - $.left, X = N.clientY - $.top;
return { offsetX: O, offsetY: X };
};
function Z(N) {
if (!l.current.lockScroll)
return;
let $ = 0, O = 0;
if (b.current = !0, N?.touches?.length > 0) {
let X = N?.touches[0];
$ = X.clientX, O = X.clientY;
}
return { offSetX: $, offSetY: O };
}
function Pe(N) {
if (!l.current.moveSticker)
if (l.current.eraser) {
const $ = N.touches[0];
ge($.clientX, $.clientY), document.documentElement.style.setProperty(
"--eraserPositionX",
`${$.clientX}px`
), document.documentElement.style.setProperty(
"--eraserPositionY",
`${$.clientY}px`
);
} else {
const $ = Z(N);
if ($) {
const { offSetX: O, offSetY: X } = $;
ge(O, X);
}
}
}
const Te = (N) => {
b.current = !0;
const { offsetX: $, offsetY: O } = de(N);
o.beginPath(), o.moveTo($, O);
}, q = () => {
b.current = !1, o.beginPath();
}, ge = (N, $) => {
if (l.current.eraser) {
o.globalCompositeOperation = "destination-out";
const O = 100;
o.rect(N - O / 2, $ - O / 2, O, O), o.fill(), o.beginPath(), o.moveTo(N, $);
} else l.current.showText ? (o.font = "20px Arial", o.fillStyle = "#000") : (o.globalCompositeOperation = "source-over", o.lineJoin = "round", o.lineCap = "round", o.lineTo(N, $), o.stroke());
}, Ae = (N) => {
if (!b.current) return;
const { offsetX: $, offsetY: O } = de(N);
ge($, O);
};
function Ne(N) {
g.current.x = N.clientX, g.current.y = N.clientY, l.current.eraser && (document.documentElement.style.setProperty(
"--eraserPositionX",
`${N.clientX}px`
), document.documentElement.style.setProperty(
"--eraserPositionY",
`${N.clientY}px`
));
}
function Le(N) {
if (s.current?.contains(N.target)) {
m({ x: -100, y: -100 });
return;
}
l.current.canvasText && (p.current?.contains(N.target) || m({ x: N.clientX, y: N.clientY }), setTimeout(() => {
p.current?.focus();
}, 0));
}
function Re(N) {
N.key === "Escape" && M();
}
const _e = () => {
const N = n.current;
if (!N) return;
const $ = N.getContext("2d");
if (!$) return;
const O = $.getImageData(0, 0, N.width, N.height);
let X;
X = window.devicePixelRatio || 1, N.width = window.innerWidth * X, N.height = window.innerHeight * X, N.style.width = `${window.innerWidth}px`, N.style.height = `${window.innerHeight}px`, $.lineWidth = 5, $.scale(X, X), $.putImageData(O, 0, 0);
};
return a.addEventListener("mousedown", Te), a.addEventListener("mousemove", Ae), a.addEventListener("mouseup", q), a.addEventListener("mouseout", q), window.addEventListener("mousemove", Ne), window.addEventListener("mousedown", Le), window.addEventListener("keydown", Re), window.addEventListener("resize", _e), window.addEventListener("touchstart", Z), window.addEventListener("touchmove", Pe), window.addEventListener("touchend", q), () => {
window.removeEventListener("mousemove", Ne), a.removeEventListener("mousedown", Te), a.removeEventListener("mousemove", Ae), a.removeEventListener("mouseup", q), a.removeEventListener("mouseout", q), window.removeEventListener("mousedown", Le), window.removeEventListener("keydown", Re), window.removeEventListener("resize", _e), window.removeEventListener("touchstart", Z), window.removeEventListener("touchmove", Pe), window.removeEventListener("touchend", q);
};
}, [o]);
function M() {
y((a) => ({
...a,
canvasText: !1,
eraser: !1,
penSize: !1,
pickColor: !1
// lockScroll: false,
})), t((a) => ({
...a,
openPalette: !1
})), l.current.canvasText = !1, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !1, l.current.showText = !1, v((a) => ({
...a,
sticketTextAtom: !1,
hidePen: !1,
hidePenOnEraser: !1
}));
}
function R(a) {
a.preventDefault(), p.current.value = "", o.fillText("", f.x, f.y);
}
function u(a) {
document.documentElement.style.setProperty(
"--eraserPositionX",
`${a.clientX}px`
), document.documentElement.style.setProperty(
"--eraserPositionY",
`${a.clientY}px`
);
}
function A(a) {
const _ = a.touches[0];
document.documentElement.style.setProperty(
"--eraserPositionX",
`${_.clientX}px`
), document.documentElement.style.setProperty(
"--eraserPositionY",
`${_.clientY}px`
);
}
function C(a) {
v((_) => ({
..._,
customizeCursor: a.target.value === "on"
}));
}
const S = () => {
document.querySelectorAll(".dynamic-input").forEach((_) => {
document.body.contains(_) && document.body.removeChild(_);
}), n.current && o.clearRect(0, 0, n.current.width, n.current.height), M();
};
function E() {
l.current.canvasText = !1, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !1, l.current.lockScroll = !l.current.lockScroll, y((a) => ({
...a,
eraser: !1,
penSize: !1,
pickColor: !1,
canvasText: !1,
lockScroll: !a.lockScroll
}));
}
function P() {
l.current.canvasText = !1, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !1, y((a) => ({
...a,
eraser: !1,
penSize: !1,
pickColor: !a.pickColor,
canvasText: !1
}));
}
function I(a) {
u(a), v((_) => ({
..._,
sticketTextAtom: !1,
// hidePen: !prev.hidePen,
hidePenOnEraser: !_.hidePenOnEraser
})), l.current.eraser = !l.current.eraser, l.current.canvasText = !1, l.current.pickColor = !1, l.current.showText = !1, y((_) => ({
..._,
penSize: !1,
pickColor: !1,
eraser: !_.eraser,
canvasText: !1
}));
}
const B = () => {
l.current.canvasText = !1, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !1, v((a) => ({
...a,
sticketTextAtom: !a.sticketTextAtom
})), y((a) => ({
...a,
penSize: !1,
eraser: !1,
pickColor: !1,
canvasText: !1
}));
};
function F() {
l.current.canvasText = !1, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !1, y((a) => ({
...a,
penSize: !a.penSize,
eraser: !1,
pickColor: !1,
canvasText: !1
})), v((a) => ({
...a,
sticketTextAtom: !1,
hidePen: !1
}));
}
const Q = () => {
l.current.canvasText = !0, l.current.eraser = !1, l.current.pickColor = !1, l.current.showText = !l.current.showText, o.globalCompositeOperation = "source-over", y((a) => ({
...a,
penSize: !1,
eraser: !1,
pickColor: !1,
canvasText: !a.canvasText
})), v((a) => ({
...a,
hidePen: !1,
sticketTextAtom: !1
}));
};
function D() {
t((a) => ({
...a,
openPalette: !a.openPalette
}));
}
function U() {
y((a) => ({
...a,
showScreen: !a.showScreen
}));
}
return V(() => {
function a(_) {
const G = Number(_.key);
if (G >= 1 && G <= 8)
switch (G) {
case 1:
P(), v((Z) => ({
...Z,
hidePen: !1,
hidePenOnEraser: !1
}));
break;
case 2:
const de = {
clientX: g.current.x,
clientY: g.current.y
};
I(de);
break;
case 3:
F();
break;
case 4:
S();
break;
case 5:
Q();
break;
case 6:
B();
break;
case 7:
U();
break;
case 8:
D(), v((Z) => ({
...Z,
hidePen: !1
}));
break;
}
}
return window.addEventListener("keydown", a), () => {
window.removeEventListener("keydown", a);
};
}, [o]), /* @__PURE__ */ z(
"div",
{
style: {
zIndex: 214748364,
cursor: w.canvasText ? "text" : ""
},
className: " canvas-container ",
children: [
w.eraser && /* @__PURE__ */ h("div", { className: "eraser-tool" }),
/* @__PURE__ */ h(
"div",
{
onMouseEnter: () => {
v((a) => ({ ...a, hidePen: !0 }));
},
onMouseLeave: () => {
v((a) => ({ ...a, hidePen: !1 }));
},
className: "pallete-box",
style: {
width: w.showScreen ? "340px" : "380px",
transition: "width 0.2s ease-in"
},
ref: s,
children: /* @__PURE__ */ z("ul", { className: "pallete-tools", children: [
/* @__PURE__ */ h(
"li",
{
title: "Screen lock for touch-users",
className: `li-box ${w.lockScroll ? "show" : ""} ${!L && "hover"}`,
onClick: E,
children: /* @__PURE__ */ h("span", { className: "lock" })
}
),
/* @__PURE__ */ z(
"li",
{
title: "Color Palette",
className: `li-box ${w.pickColor ? "show" : ""} ${!L && "hover"}`,
onC