plugin-canvas-editor
Version:
A customizable canvas editor component for React
1,620 lines (1,618 loc) • 70.2 kB
JavaScript
var xt = Object.defineProperty;
var mt = (r, c, i) => c in r ? xt(r, c, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[c] = i;
var ve = (r, c, i) => mt(r, typeof c != "symbol" ? c + "" : c, i);
import Q, { useState as T, useEffect as We, useRef as yt, useCallback as I } from "react";
import { motion as Y } from "framer-motion";
import { X as vt, Menu as bt, FolderOpen as wt, Save as jt, Download as St } from "lucide-react";
import Ct from "html2canvas";
var se = { exports: {} }, K = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var $e;
function Nt() {
if ($e) return K;
$e = 1;
var r = Q, c = Symbol.for("react.element"), i = Symbol.for("react.fragment"), h = Object.prototype.hasOwnProperty, m = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, y = { key: !0, ref: !0, __self: !0, __source: !0 };
function d(f, b, p) {
var S, g = {}, x = null, j = null;
p !== void 0 && (x = "" + p), b.key !== void 0 && (x = "" + b.key), b.ref !== void 0 && (j = b.ref);
for (S in b) h.call(b, S) && !y.hasOwnProperty(S) && (g[S] = b[S]);
if (f && f.defaultProps) for (S in b = f.defaultProps, b) g[S] === void 0 && (g[S] = b[S]);
return { $$typeof: c, type: f, key: x, ref: j, props: g, _owner: m.current };
}
return K.Fragment = i, K.jsx = d, K.jsxs = d, K;
}
var Z = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ye;
function Et() {
return Ye || (Ye = 1, process.env.NODE_ENV !== "production" && function() {
var r = Q, c = Symbol.for("react.element"), i = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), d = Symbol.for("react.provider"), f = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), S = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), A = Symbol.iterator, F = "@@iterator";
function D(e) {
if (e === null || typeof e != "object")
return null;
var n = A && e[A] || e[F];
return typeof n == "function" ? n : null;
}
var k = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function u(e) {
{
for (var n = arguments.length, a = new Array(n > 1 ? n - 1 : 0), l = 1; l < n; l++)
a[l - 1] = arguments[l];
M("error", e, a);
}
}
function M(e, n, a) {
{
var l = k.ReactDebugCurrentFrame, C = l.getStackAddendum();
C !== "" && (n += "%s", a = a.concat([C]));
var E = a.map(function(w) {
return String(w);
});
E.unshift("Warning: " + n), Function.prototype.apply.call(console[e], console, E);
}
}
var N = !1, L = !1, le = !1, ce = !1, G = !1, ee;
ee = Symbol.for("react.module.reference");
function de(e) {
return !!(typeof e == "string" || typeof e == "function" || e === h || e === y || G || e === m || e === p || e === S || ce || e === j || N || L || le || typeof e == "object" && e !== null && (e.$$typeof === x || e.$$typeof === g || e.$$typeof === d || e.$$typeof === f || e.$$typeof === b || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === ee || e.getModuleId !== void 0));
}
function ue(e, n, a) {
var l = e.displayName;
if (l)
return l;
var C = n.displayName || n.name || "";
return C !== "" ? a + "(" + C + ")" : a;
}
function te(e) {
return e.displayName || "Context";
}
function B(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && u("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case h:
return "Fragment";
case i:
return "Portal";
case y:
return "Profiler";
case m:
return "StrictMode";
case p:
return "Suspense";
case S:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case f:
var n = e;
return te(n) + ".Consumer";
case d:
var a = e;
return te(a._context) + ".Provider";
case b:
return ue(e, e.render, "ForwardRef");
case g:
var l = e.displayName || null;
return l !== null ? l : B(e.type) || "Memo";
case x: {
var C = e, E = C._payload, w = C._init;
try {
return B(w(E));
} catch {
return null;
}
}
}
return null;
}
var U = Object.assign, o = 0, s, R, W, z, J, we, je;
function Se() {
}
Se.__reactDisabledLog = !0;
function Ve() {
{
if (o === 0) {
s = console.log, R = console.info, W = console.warn, z = console.error, J = console.group, we = console.groupCollapsed, je = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: Se,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
o++;
}
}
function He() {
{
if (o--, o === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: U({}, e, {
value: s
}),
info: U({}, e, {
value: R
}),
warn: U({}, e, {
value: W
}),
error: U({}, e, {
value: z
}),
group: U({}, e, {
value: J
}),
groupCollapsed: U({}, e, {
value: we
}),
groupEnd: U({}, e, {
value: je
})
});
}
o < 0 && u("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var he = k.ReactCurrentDispatcher, fe;
function re(e, n, a) {
{
if (fe === void 0)
try {
throw Error();
} catch (C) {
var l = C.stack.trim().match(/\n( *(at )?)/);
fe = l && l[1] || "";
}
return `
` + fe + e;
}
}
var pe = !1, ne;
{
var Je = typeof WeakMap == "function" ? WeakMap : Map;
ne = new Je();
}
function Ce(e, n) {
if (!e || pe)
return "";
{
var a = ne.get(e);
if (a !== void 0)
return a;
}
var l;
pe = !0;
var C = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var E;
E = he.current, he.current = null, Ve();
try {
if (n) {
var w = function() {
throw Error();
};
if (Object.defineProperty(w.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(w, []);
} catch (V) {
l = V;
}
Reflect.construct(e, [], w);
} else {
try {
w.call();
} catch (V) {
l = V;
}
e.call(w.prototype);
}
} else {
try {
throw Error();
} catch (V) {
l = V;
}
e();
}
} catch (V) {
if (V && l && typeof V.stack == "string") {
for (var v = V.stack.split(`
`), O = l.stack.split(`
`), _ = v.length - 1, P = O.length - 1; _ >= 1 && P >= 0 && v[_] !== O[P]; )
P--;
for (; _ >= 1 && P >= 0; _--, P--)
if (v[_] !== O[P]) {
if (_ !== 1 || P !== 1)
do
if (_--, P--, P < 0 || v[_] !== O[P]) {
var $ = `
` + v[_].replace(" at new ", " at ");
return e.displayName && $.includes("<anonymous>") && ($ = $.replace("<anonymous>", e.displayName)), typeof e == "function" && ne.set(e, $), $;
}
while (_ >= 1 && P >= 0);
break;
}
}
} finally {
pe = !1, he.current = E, He(), Error.prepareStackTrace = C;
}
var q = e ? e.displayName || e.name : "", Me = q ? re(q) : "";
return typeof e == "function" && ne.set(e, Me), Me;
}
function Xe(e, n, a) {
return Ce(e, !1);
}
function qe(e) {
var n = e.prototype;
return !!(n && n.isReactComponent);
}
function ae(e, n, a) {
if (e == null)
return "";
if (typeof e == "function")
return Ce(e, qe(e));
if (typeof e == "string")
return re(e);
switch (e) {
case p:
return re("Suspense");
case S:
return re("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case b:
return Xe(e.render);
case g:
return ae(e.type, n, a);
case x: {
var l = e, C = l._payload, E = l._init;
try {
return ae(E(C), n, a);
} catch {
}
}
}
return "";
}
var ie = Object.prototype.hasOwnProperty, Ne = {}, Ee = k.ReactDebugCurrentFrame;
function oe(e) {
if (e) {
var n = e._owner, a = ae(e.type, e._source, n ? n.type : null);
Ee.setExtraStackFrame(a);
} else
Ee.setExtraStackFrame(null);
}
function Ge(e, n, a, l, C) {
{
var E = Function.call.bind(ie);
for (var w in e)
if (E(e, w)) {
var v = void 0;
try {
if (typeof e[w] != "function") {
var O = Error((l || "React class") + ": " + a + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw O.name = "Invariant Violation", O;
}
v = e[w](n, w, l, a, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (_) {
v = _;
}
v && !(v instanceof Error) && (oe(C), u("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", l || "React class", a, w, typeof v), oe(null)), v instanceof Error && !(v.message in Ne) && (Ne[v.message] = !0, oe(C), u("Failed %s type: %s", a, v.message), oe(null));
}
}
}
var Ke = Array.isArray;
function ge(e) {
return Ke(e);
}
function Ze(e) {
{
var n = typeof Symbol == "function" && Symbol.toStringTag, a = n && e[Symbol.toStringTag] || e.constructor.name || "Object";
return a;
}
}
function Qe(e) {
try {
return Re(e), !1;
} catch {
return !0;
}
}
function Re(e) {
return "" + e;
}
function De(e) {
if (Qe(e))
return u("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ze(e)), Re(e);
}
var ke = k.ReactCurrentOwner, et = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, _e, Te;
function tt(e) {
if (ie.call(e, "ref")) {
var n = Object.getOwnPropertyDescriptor(e, "ref").get;
if (n && n.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function rt(e) {
if (ie.call(e, "key")) {
var n = Object.getOwnPropertyDescriptor(e, "key").get;
if (n && n.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function nt(e, n) {
typeof e.ref == "string" && ke.current;
}
function at(e, n) {
{
var a = function() {
_e || (_e = !0, u("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
};
a.isReactWarning = !0, Object.defineProperty(e, "key", {
get: a,
configurable: !0
});
}
}
function it(e, n) {
{
var a = function() {
Te || (Te = !0, u("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
};
a.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: a,
configurable: !0
});
}
}
var ot = function(e, n, a, l, C, E, w) {
var v = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: c,
// Built-in properties that belong on the element
type: e,
key: n,
ref: a,
props: w,
// Record the component responsible for creating this element.
_owner: E
};
return v._store = {}, Object.defineProperty(v._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(v, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: l
}), Object.defineProperty(v, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: C
}), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
};
function st(e, n, a, l, C) {
{
var E, w = {}, v = null, O = null;
a !== void 0 && (De(a), v = "" + a), rt(n) && (De(n.key), v = "" + n.key), tt(n) && (O = n.ref, nt(n, C));
for (E in n)
ie.call(n, E) && !et.hasOwnProperty(E) && (w[E] = n[E]);
if (e && e.defaultProps) {
var _ = e.defaultProps;
for (E in _)
w[E] === void 0 && (w[E] = _[E]);
}
if (v || O) {
var P = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
v && at(w, P), O && it(w, P);
}
return ot(e, v, O, C, l, ke.current, w);
}
}
var xe = k.ReactCurrentOwner, Fe = k.ReactDebugCurrentFrame;
function X(e) {
if (e) {
var n = e._owner, a = ae(e.type, e._source, n ? n.type : null);
Fe.setExtraStackFrame(a);
} else
Fe.setExtraStackFrame(null);
}
var me;
me = !1;
function ye(e) {
return typeof e == "object" && e !== null && e.$$typeof === c;
}
function Pe() {
{
if (xe.current) {
var e = B(xe.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function lt(e) {
return "";
}
var Ae = {};
function ct(e) {
{
var n = Pe();
if (!n) {
var a = typeof e == "string" ? e : e.displayName || e.name;
a && (n = `
Check the top-level render call using <` + a + ">.");
}
return n;
}
}
function ze(e, n) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var a = ct(n);
if (Ae[a])
return;
Ae[a] = !0;
var l = "";
e && e._owner && e._owner !== xe.current && (l = " It was passed a child from " + B(e._owner.type) + "."), X(e), u('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', a, l), X(null);
}
}
function Oe(e, n) {
{
if (typeof e != "object")
return;
if (ge(e))
for (var a = 0; a < e.length; a++) {
var l = e[a];
ye(l) && ze(l, n);
}
else if (ye(e))
e._store && (e._store.validated = !0);
else if (e) {
var C = D(e);
if (typeof C == "function" && C !== e.entries)
for (var E = C.call(e), w; !(w = E.next()).done; )
ye(w.value) && ze(w.value, n);
}
}
}
function dt(e) {
{
var n = e.type;
if (n == null || typeof n == "string")
return;
var a;
if (typeof n == "function")
a = n.propTypes;
else if (typeof n == "object" && (n.$$typeof === b || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
n.$$typeof === g))
a = n.propTypes;
else
return;
if (a) {
var l = B(n);
Ge(a, e.props, "prop", l, e);
} else if (n.PropTypes !== void 0 && !me) {
me = !0;
var C = B(n);
u("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", C || "Unknown");
}
typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && u("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function ut(e) {
{
for (var n = Object.keys(e.props), a = 0; a < n.length; a++) {
var l = n[a];
if (l !== "children" && l !== "key") {
X(e), u("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", l), X(null);
break;
}
}
e.ref !== null && (X(e), u("Invalid attribute `ref` supplied to `React.Fragment`."), X(null));
}
}
function Ie(e, n, a, l, C, E) {
{
var w = de(e);
if (!w) {
var v = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (v += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var O = lt();
O ? v += O : v += Pe();
var _;
e === null ? _ = "null" : ge(e) ? _ = "array" : e !== void 0 && e.$$typeof === c ? (_ = "<" + (B(e.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : _ = typeof e, u("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", _, v);
}
var P = st(e, n, a, C, E);
if (P == null)
return P;
if (w) {
var $ = n.children;
if ($ !== void 0)
if (l)
if (ge($)) {
for (var q = 0; q < $.length; q++)
Oe($[q], e);
Object.freeze && Object.freeze($);
} else
u("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Oe($, e);
}
return e === h ? ut(P) : dt(P), P;
}
}
function ht(e, n, a) {
return Ie(e, n, a, !0);
}
function ft(e, n, a) {
return Ie(e, n, a, !1);
}
var pt = ft, gt = ht;
Z.Fragment = h, Z.jsx = pt, Z.jsxs = gt;
}()), Z;
}
var Le;
function Rt() {
return Le || (Le = 1, process.env.NODE_ENV === "production" ? se.exports = Nt() : se.exports = Et()), se.exports;
}
var t = Rt();
const Dt = ({ element: r, isSelected: c, setSelectedElement: i, updateElement: h }) => {
const [m, y] = T(!1), [d, f] = T({ x: 0, y: 0 }), b = (g) => {
y(!0), f({
x: g.clientX - r.x,
y: g.clientY - r.y
}), i(r.id), g.stopPropagation(), g.preventDefault();
}, p = (g) => {
m && h(r.id, {
x: g.clientX - d.x,
y: g.clientY - d.y
});
}, S = () => {
y(!1);
};
return /* @__PURE__ */ t.jsx(
"div",
{
className: `image-element ${c ? "ring-2 ring-blue-500" : ""}`,
style: {
position: "absolute",
left: `${r.x}px`,
top: `${r.y}px`,
width: `${r.width}px`,
height: `${r.height}px`,
cursor: m ? "grabbing" : "grab",
zIndex: 1,
overflow: "hidden",
backgroundColor: "transparent"
},
onMouseDown: b,
onMouseMove: p,
onMouseUp: S,
onMouseLeave: S,
onClick: (g) => {
i(r.id), g.stopPropagation();
},
children: /* @__PURE__ */ t.jsx(
"img",
{
src: r.src,
alt: "uploaded",
style: {
width: "100%",
height: "100%",
objectFit: "cover",
pointerEvents: "none",
display: "block"
},
onError: (g) => {
g.target.onerror = null, g.target.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none" stroke="red" stroke-width="2"><rect width="100" height="100"/><line x1="0" y1="0" x2="100" y2="100"/><line x1="100" y1="0" x2="0" y2="100"/><text x="50" y="50" font-family="Arial" font-size="10" text-anchor="middle" stroke="none" fill="red">Failed to load</text></svg>';
}
}
)
}
);
}, kt = ({ element: r, isSelected: c, setSelectedElement: i, updateElement: h }) => {
const [m, y] = T(!1), [d, f] = T(r.text), [b, p] = T(!1), [S, g] = T({ x: 0, y: 0 }), x = Q.useRef(null);
We(() => {
f(r.text);
}, [r.text]);
const j = () => {
y(!0);
}, A = () => {
y(!1), h(r.id, { text: d });
}, F = (N) => {
f(N.target.value);
}, D = (N) => {
!m && N.button === 0 && (p(!0), g({
x: N.clientX - r.x,
y: N.clientY - r.y
}), i(r.id), N.stopPropagation());
}, k = (N) => {
b && !m && h(r.id, {
x: N.clientX - S.x,
y: N.clientY - S.y
});
}, u = () => {
p(!1);
}, M = (N) => {
b || (i(r.id), N.stopPropagation());
};
return /* @__PURE__ */ t.jsx(
"div",
{
ref: x,
className: `text-element ${c ? "ring-2 ring-blue-500" : ""}`,
style: {
position: "absolute",
left: `${r.x}px`,
top: `${r.y}px`,
width: `${r.width}px`,
height: `${r.height}px`,
fontSize: `${r.fontSize}px`,
fontFamily: r.fontFamily,
color: r.color,
cursor: b ? "grabbing" : "grab",
zIndex: 1,
userSelect: "none"
},
onClick: M,
onMouseDown: D,
onMouseMove: k,
onMouseUp: u,
onMouseLeave: u,
onDoubleClick: j,
children: m ? /* @__PURE__ */ t.jsx(
"textarea",
{
value: d,
onChange: F,
onBlur: A,
autoFocus: !0,
style: {
width: "100%",
height: "100%",
border: "none",
outline: "none",
resize: "none",
background: "transparent",
fontFamily: r.fontFamily,
fontSize: `${r.fontSize}px`,
color: r.color
}
}
) : /* @__PURE__ */ t.jsx(
"div",
{
style: {
width: "100%",
height: "100%",
pointerEvents: m ? "none" : "auto"
},
children: d
}
)
}
);
}, _t = ({ element: r, isSelected: c, setSelectedElement: i, updateElement: h }) => {
const [m, y] = T(!1), [d, f] = T({ x: 0, y: 0 }), [b, p] = T(!1), [S, g] = T(null), x = (D) => {
D.target.classList.contains("resize-handle") ? (p(!0), g(D.target.dataset.handle)) : (y(!0), f({
x: D.clientX - r.x,
y: D.clientY - r.y
})), D.preventDefault();
}, j = (D) => {
if (m)
h(r.id, {
x: D.clientX - d.x,
y: D.clientY - d.y
});
else if (b) {
const k = D.clientX - r.x, u = D.clientY - r.y;
let M = r.width, N = r.height;
switch (S) {
case "bottom-right":
M = k, N = u;
break;
case "bottom-left":
M = r.width - k, N = u, h(r.id, { x: D.clientX });
break;
case "top-right":
M = k, N = r.height - u, h(r.id, { y: D.clientY });
break;
case "top-left":
M = r.width - k, N = r.height - u, h(r.id, { x: D.clientX, y: D.clientY });
break;
}
h(r.id, { width: M, height: N });
}
}, A = () => {
y(!1), p(!1), g(null);
}, F = () => {
switch (r.shapeType) {
case "rectangle":
return /* @__PURE__ */ t.jsx(
"div",
{
style: {
width: "100%",
height: "100%",
border: `2px solid ${r.color}`,
backgroundColor: "transparent"
}
}
);
case "circle":
return /* @__PURE__ */ t.jsx(
"div",
{
style: {
width: "100%",
height: "100%",
border: `2px solid ${r.color}`,
borderRadius: "50%",
backgroundColor: "transparent"
}
}
);
case "line":
return /* @__PURE__ */ t.jsx(
"div",
{
style: {
width: "100%",
height: "2px",
backgroundColor: r.color,
transform: "rotate(45deg)"
}
}
);
default:
return null;
}
};
return /* @__PURE__ */ t.jsxs(
"div",
{
className: `shape-element ${c ? "selected" : ""}`,
style: {
left: r.x,
top: r.y,
width: r.width,
height: r.height,
position: "absolute",
cursor: m || b ? "grabbing" : "grab",
zIndex: 1
},
onMouseDown: x,
onMouseMove: j,
onMouseUp: A,
onMouseLeave: A,
onClick: () => i(r.id),
children: [
F(),
c && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
/* @__PURE__ */ t.jsx(
"div",
{
className: "resize-handle",
"data-handle": "top-left",
style: {
position: "absolute",
top: -5,
left: -5,
width: 10,
height: 10,
backgroundColor: "blue",
cursor: "nwse-resize"
}
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "resize-handle",
"data-handle": "top-right",
style: {
position: "absolute",
top: -5,
right: -5,
width: 10,
height: 10,
backgroundColor: "blue",
cursor: "nesw-resize"
}
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "resize-handle",
"data-handle": "bottom-left",
style: {
position: "absolute",
bottom: -5,
left: -5,
width: 10,
height: 10,
backgroundColor: "blue",
cursor: "nesw-resize"
}
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "resize-handle",
"data-handle": "bottom-right",
style: {
position: "absolute",
bottom: -5,
right: -5,
width: 10,
height: 10,
backgroundColor: "blue",
cursor: "nwse-resize"
}
}
)
] })
]
}
);
}, Be = Q.forwardRef(({
elements: r = [],
// Default empty array added here
selectedElement: c,
setSelectedElement: i,
updateElement: h,
canvasSize: m = { width: 800, height: 600 }
// Default size
}, y) => {
const d = (f) => {
f.target === f.currentTarget && i(null);
};
return /* @__PURE__ */ t.jsx(
"div",
{
ref: y,
className: "bg-white",
style: {
width: `${m.width}px`,
height: `${m.height}px`,
position: "relative",
overflow: "hidden"
},
onClick: d,
children: (r || []).map((f) => {
switch (f.type) {
case "image":
return /* @__PURE__ */ t.jsx(
Dt,
{
element: f,
isSelected: c === f.id,
setSelectedElement: i,
updateElement: h
},
f.id
);
case "text":
return /* @__PURE__ */ t.jsx(
kt,
{
element: f,
isSelected: c === f.id,
setSelectedElement: i,
updateElement: h
},
f.id
);
case "shape":
return /* @__PURE__ */ t.jsx(
_t,
{
element: f,
isSelected: c === f.id,
setSelectedElement: i,
updateElement: h
},
f.id
);
default:
return null;
}
})
}
);
});
Be.displayName = "Canvas";
class H extends Q.Component {
constructor() {
super(...arguments);
ve(this, "state", { hasError: !1, error: null });
ve(this, "handleReset", () => {
this.setState({ hasError: !1, error: null }), this.props.onReset && this.props.onReset();
});
}
static getDerivedStateFromError(i) {
return { hasError: !0, error: i };
}
componentDidCatch(i, h) {
console.error("Component Error:", i, h);
}
render() {
var i;
return this.state.hasError ? /* @__PURE__ */ t.jsxs("div", { className: "alert alert-danger m-3", children: [
/* @__PURE__ */ t.jsx("h3", { children: "Something went wrong" }),
/* @__PURE__ */ t.jsx("p", { className: "text-muted", children: (i = this.state.error) == null ? void 0 : i.toString() }),
/* @__PURE__ */ t.jsx(
"button",
{
className: "btn btn-secondary mt-2",
onClick: this.handleReset,
children: "Try Again"
}
),
/* @__PURE__ */ t.jsx(
"button",
{
className: "btn btn-outline-secondary mt-2 ms-2",
onClick: () => window.location.reload(),
children: "Reload Page"
}
)
] }) : this.props.children;
}
}
const Tt = (r) => {
try {
return typeof r != "string" || r.trim() === "" ? null : JSON.parse(r) || null;
} catch (c) {
return console.error("JSON parse error:", c), null;
}
}, Ft = ({ onLoad: r, onDelete: c, onClose: i }) => {
const [h, m] = T([]), [y, d] = T(!0), [f, b] = T(null), p = async () => {
try {
d(!0), b(null);
const x = await fetch("http://localhost:5000/api/designs");
if (!x.ok)
throw new Error(`Server responded with status ${x.status}`);
const j = await x.text(), A = Tt(j);
if (!A || !Array.isArray(A))
throw new Error("Received invalid design data format");
m(A);
} catch (x) {
console.error("DesignList fetch error:", x), b(x.message || "Failed to load designs. Please try again."), m([]);
} finally {
d(!1);
}
};
We(() => {
p();
}, []);
const S = async (x) => {
try {
d(!0), await r(x);
} catch (j) {
console.error("Load design error:", j), b("Failed to load design. Please try again.");
} finally {
d(!1);
}
}, g = async (x) => {
try {
d(!0), await c(x), await p();
} catch (j) {
console.error("Delete design error:", j), b("Failed to delete design. Please try again.");
} finally {
d(!1);
}
};
return f ? /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(
Y.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center",
style: { backgroundColor: "rgba(0, 0, 0, 0.8)", zIndex: 1050 },
children: /* @__PURE__ */ t.jsx(
Y.div,
{
className: "bg-white p-4 rounded-3 shadow-lg position-relative",
style: { maxWidth: "600px", width: "90%" },
children: /* @__PURE__ */ t.jsxs("div", { className: "alert alert-danger", children: [
/* @__PURE__ */ t.jsx("h4", { className: "alert-heading", children: "Error" }),
/* @__PURE__ */ t.jsx("p", { children: f }),
/* @__PURE__ */ t.jsxs("div", { className: "d-flex justify-content-end gap-2", children: [
/* @__PURE__ */ t.jsx(
"button",
{
className: "btn btn-secondary",
onClick: p,
children: "Retry"
}
),
/* @__PURE__ */ t.jsx(
"button",
{
className: "btn btn-outline-secondary",
onClick: i,
children: "Close"
}
)
] })
] })
}
)
}
) }) : /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(
Y.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center",
style: { backgroundColor: "rgba(0, 0, 0, 0.8)", zIndex: 1050 },
children: /* @__PURE__ */ t.jsxs(
Y.div,
{
className: "bg-white p-4 rounded-3 shadow-lg w-90 mw-100 position-relative",
style: { maxHeight: "85vh", overflowY: "auto", border: "1px solid rgba(0, 0, 0, 0.1)" },
children: [
/* @__PURE__ */ t.jsx(
Y.button,
{
whileHover: { scale: 1.1, rotate: 90 },
whileTap: { scale: 0.9 },
className: "position-absolute top-0 end-0 m-2 btn btn-light rounded-circle",
style: { width: "40px", height: "40px" },
onClick: i,
"aria-label": "Close",
children: "×"
}
),
/* @__PURE__ */ t.jsx("h2", { className: "text-center mb-4 fs-2 fw-bold text-primary", children: "Your Saved Designs" }),
y ? /* @__PURE__ */ t.jsx("div", { className: "d-flex justify-content-center align-items-center", style: { height: "160px" }, children: /* @__PURE__ */ t.jsx("div", { className: "spinner-border text-primary", role: "status", children: /* @__PURE__ */ t.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }) : h.length === 0 ? /* @__PURE__ */ t.jsxs("div", { className: "text-center py-5", children: [
/* @__PURE__ */ t.jsx("p", { className: "text-muted mb-3", children: "No designs saved yet" }),
/* @__PURE__ */ t.jsx(
"button",
{
className: "btn btn-primary",
onClick: p,
children: "Refresh"
}
)
] }) : /* @__PURE__ */ t.jsx("div", { className: "row g-3", children: h.map((x) => /* @__PURE__ */ t.jsx(
Y.div,
{
whileHover: { scale: 1.02 },
className: "col-md-6",
children: /* @__PURE__ */ t.jsxs("div", { className: "bg-white p-3 rounded shadow-sm border h-100", children: [
/* @__PURE__ */ t.jsx("h3", { className: "fw-semibold fs-5 text-dark mb-2", children: x.name || "Untitled Design" }),
/* @__PURE__ */ t.jsxs("p", { className: "text-muted small mb-3", children: [
"Canvas: ",
x.canvas_width || "800",
" × ",
x.canvas_height || "600"
] }),
/* @__PURE__ */ t.jsxs("div", { className: "d-flex justify-content-end gap-2", children: [
/* @__PURE__ */ t.jsx(
"button",
{
onClick: () => S(x.id),
className: "btn btn-primary btn-sm",
disabled: y,
children: y ? "Loading..." : "Load"
}
),
/* @__PURE__ */ t.jsx(
"button",
{
onClick: () => g(x.id),
className: "btn btn-danger btn-sm",
disabled: y,
children: "Delete"
}
)
] })
] })
},
x.id
)) })
]
}
)
}
) });
}, Pt = ({ onDownload: r, onSave: c, onShowDesigns: i, isSaving: h }) => {
const [m, y] = T(!1), d = () => {
y(!m);
};
return /* @__PURE__ */ t.jsx("nav", { className: "navbar navbar-expand-lg navbar-dark fixed-top", style: { zIndex: 1030, backgroundColor: "#30388A" }, children: /* @__PURE__ */ t.jsxs("div", { className: "container-fluid", children: [
/* @__PURE__ */ t.jsx("span", { className: "navbar-brand fs-4 fw-bold", children: "Editor" }),
/* @__PURE__ */ t.jsx(
"button",
{
className: "navbar-toggler",
type: "button",
onClick: d,
"aria-label": "Toggle navigation",
children: m ? /* @__PURE__ */ t.jsx(vt, { size: 24 }) : /* @__PURE__ */ t.jsx(bt, { size: 24 })
}
),
/* @__PURE__ */ t.jsx("div", { className: `collapse navbar-collapse ${m ? "show" : ""}`, children: /* @__PURE__ */ t.jsxs("div", { className: "navbar-nav ms-auto", children: [
/* @__PURE__ */ t.jsxs(
"button",
{
onClick: i,
className: "btn btn-secondary d-flex align-items-center gap-1 mx-1",
children: [
/* @__PURE__ */ t.jsx(wt, { size: 18 }),
/* @__PURE__ */ t.jsx("span", { children: "My Designs" })
]
}
),
/* @__PURE__ */ t.jsxs(
"button",
{
onClick: c,
disabled: h,
className: "btn btn-success d-flex align-items-center gap-1 mx-1",
children: [
/* @__PURE__ */ t.jsx(jt, { size: 18 }),
/* @__PURE__ */ t.jsx("span", { children: h ? "Saving..." : "Save Design" })
]
}
),
/* @__PURE__ */ t.jsxs(
"button",
{
onClick: r,
className: "btn btn-info d-flex align-items-center gap-1 mx-1",
children: [
/* @__PURE__ */ t.jsx(St, { size: 18 }),
/* @__PURE__ */ t.jsx("span", { children: "Download" })
]
}
)
] }) })
] }) });
}, At = ({ onTemplateSelect: r, onClose: c }) => {
const i = [
{
id: 1,
name: "Professional Resume",
elements: [
{
type: "text",
id: Date.now() + 1,
text: "John Doe",
x: 120,
y: 30,
fontSize: 32,
fontFamily: "Arial",
color: "#333",
width: 300,
height: 50
},
{
type: "text",
id: Date.now() + 2,
text: "Software Engineer | Web Developer",
x: 120,
y: 80,
fontSize: 18,
fontFamily: "Arial",
color: "#555",
width: 300,
height: 30
},
{ type: "line", id: Date.now() + 3, x: 20, y: 120, width: 500 },
{
type: "text",
id: Date.now() + 4,
text: "Contact Information",
x: 20,
y: 140,
fontSize: 20,
fontFamily: "Arial",
color: "#222",
width: 200,
height: 30
},
{
type: "text",
id: Date.now() + 5,
text: "📧 johndoe@example.com",
x: 40,
y: 170,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 250,
height: 30
},
{
type: "text",
id: Date.now() + 6,
text: "📞 +1 234 567 890",
x: 40,
y: 200,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 250,
height: 30
},
{ type: "line", id: Date.now() + 7, x: 20, y: 230, width: 500 },
{
type: "text",
id: Date.now() + 8,
text: "Experience",
x: 20,
y: 250,
fontSize: 20,
fontFamily: "Arial",
color: "#222",
width: 200,
height: 30
},
{
type: "text",
id: Date.now() + 9,
text: "🔹 Software Engineer - ABC Tech (2020 - Present)",
x: 40,
y: 280,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 400,
height: 30
},
{
type: "text",
id: Date.now() + 10,
text: "🔹 Frontend Developer - XYZ Solutions (2017 - 2019)",
x: 40,
y: 310,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 400,
height: 30
},
{ type: "line", id: Date.now() + 11, x: 20, y: 340, width: 500 },
{
type: "text",
id: Date.now() + 12,
text: "Education",
x: 20,
y: 360,
fontSize: 20,
fontFamily: "Arial",
color: "#222",
width: 200,
height: 30
},
{
type: "text",
id: Date.now() + 13,
text: "🎓 MCA - XYZ University (2016 - 2019)",
x: 40,
y: 390,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 400,
height: 30
},
{
type: "text",
id: Date.now() + 14,
text: "🎓 BCA - ABC College (2013 - 2016)",
x: 40,
y: 420,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 400,
height: 30
},
{ type: "line", id: Date.now() + 15, x: 20, y: 450, width: 500 },
{
type: "text",
id: Date.now() + 16,
text: "Skills",
x: 20,
y: 470,
fontSize: 20,
fontFamily: "Arial",
color: "#222",
width: 200,
height: 30
},
{
type: "text",
id: Date.now() + 17,
text: "⚡ JavaScript, React, Node.js, MongoDB, SQL",
x: 40,
y: 500,
fontSize: 16,
fontFamily: "Arial",
color: "#444",
width: 400,
height: 30
}
]
},
{
id: 2,
name: "Business Card",
elements: [
{
type: "text",
id: Date.now(),
text: "John Doe",
x: 50,
y: 30,
fontSize: 24,
fontFamily: "Arial",
color: "#222",
width: 200,
height: 40
},
{
type: "text",
id: Date.now() + 1,
text: "CEO, Tech Innovations",
x: 50,
y: 70,
fontSize: 18,
fontFamily: "Arial",
color: "#444",
width: 250,
height: 30
},
{
type: "text",
id: Date.now() + 2,
text: "Email: john.doe@example.com",
x: 50,
y: 110,
fontSize: 16,
fontFamily: "Arial",
color: "#555",
width: 300,
height: 30
},
{
type: "text",
id: Date.now() + 3,
text: "Phone: (123) 456-7890",
x: 50,
y: 140,
fontSize: 16,
fontFamily: "Arial",
color: "#555",
width: 300,
height: 30
},
{
type: "text",
id: Date.now() + 4,
text: "Tech Innovations Inc.",
x: 50,
y: 170,
fontSize: 18,
fontFamily: "Arial",
color: "#333",
width: 300,
height: 30
},
{
type: "text",
id: Date.now() + 5,
text: "www.techinnovations.com",
x: 50,
y: 200,
fontSize: 14,
fontFamily: "Arial",
color: "#666",
width: 300,
height: 30
}
]
},
{
id: 3,
name: "Birthday Invitation",
elements: [
{
type: "text",
id: Date.now(),
text: "Happy Birthday!",
x: 100,
y: 50,
fontSize: 36,
fontFamily: "Cursive",
color: "#ff0000",
width: 300,
height: 50
},
{
type: "text",
id: Date.now() + 1,
text: "Join us to celebrate!",
x: 100,
y: 100,
fontSize: 24,
fontFamily: "Cursive",
color: "#ff9900",
width: 300,
height: 40
},
{
type: "text",
id: Date.now() + 2,
text: "Date: July 15, 2024",
x: 100,
y: 150,
fontSize: 18,
fontFamily: "Arial",
color: "#333",
width: 300,
height: 30
},
{
type: "text",
id: Date.now() + 3,
text: "Venue: Wonderland Party Hall",
x: 100,
y: 180,
fontSize: 18,
fontFamily: "Arial",
color: "#333",
width: 300,
height: 30
}
]
}
], h = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1
}
}
}, m = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
stiffness: 100
}
}
};
return /* @__PURE__ */ t.jsx(
Y.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center",
style: {
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%)",
backdropFilter: "blur(4px)",
zIndex: 1050
},
children: /* @__PURE__ */ t.jsxs(
Y.div,
{
variants: h,
initial: "hidden",
animate: "visible",
className: "bg-white bg-opacity-95 p-4 rounded-3 shadow-lg position-relative",
style: {
width: "90%",
maxWidth: "800px",
maxHeight: "85vh",
overflowY: "auto",
border: "1px solid rgba(0, 0, 0, 0.1)",
backdropFilter: "blur(10px)"
},
children: [
/* @__PURE__ */ t.jsx(
Y.button,
{
whileHover: { scale: 1.1, rotate: 90 },
whileTap: { scale: 0.9 },
className: "position-absolute top-0 end-0 m-2 btn btn-light rounded-circle",
style: { width: "40px", height: "40px" },
onClick: c,
children: "×"
}
),
/* @__PURE__ */ t.jsx("h2", { className: "text-center mb-4 fs-2 fw-bold text-primary", children: "Select Your Template" }),
/* @__PURE__ */ t.jsx("div", { className: "row g-4", children: i.map((y) => /* @__PURE__ */ t.jsx(
Y.div,
{
variants: m,
whileHover: {
scale: 1.03,
boxShadow: "0 10px 20px rgba(0, 0, 0, 0.1)"
},
whileTap: { scale: 0.98 },
className: "col-md-6",
children: /* @__PURE__ */ t.jsxs(
"div",
{
className: "p-3 border rounded-3 cursor-pointer h-100",
style: {
background: "linear-gradient(to bottom right, white, #f8f9fa)",
transition: "all 0.3s ease"
},
onClick: () => r(y),
children: [
/* @__PURE__ */ t.jsx("h3", { className: "fw-