@maximeij/react-csstick
Version:
CSS Stick figures and comics
765 lines (764 loc) • 19.5 kB
JavaScript
import Ce, { useRef as Oe, createElement as be, useMemo as je } from "react";
var H = { exports: {} }, F = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ae;
function we() {
if (ae) return F;
ae = 1;
var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
function a(c, n, o) {
var i = null;
if (o !== void 0 && (i = "" + o), n.key !== void 0 && (i = "" + n.key), "key" in n) {
o = {};
for (var u in n)
u !== "key" && (o[u] = n[u]);
} else o = n;
return n = o.ref, {
$$typeof: t,
type: c,
key: i,
ref: n !== void 0 ? n : null,
props: o
};
}
return F.Fragment = s, F.jsx = a, F.jsxs = a, F;
}
var W = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var le;
function $e() {
return le || (le = 1, process.env.NODE_ENV !== "production" && function() {
function t(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === j ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case C:
return "Fragment";
case P:
return "Profiler";
case p:
return "StrictMode";
case D:
return "Suspense";
case J:
return "SuspenseList";
case Y:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case x:
return "Portal";
case S:
return (e.displayName || "Context") + ".Provider";
case f:
return (e._context.displayName || "Context") + ".Consumer";
case V:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case O:
return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
case $:
r = e._payload, e = e._init;
try {
return t(e(r));
} catch {
}
}
return null;
}
function s(e) {
return "" + e;
}
function a(e) {
try {
s(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var l = r.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return l.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
m
), s(e);
}
}
function c(e) {
if (e === C) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === $)
return "<...>";
try {
var r = t(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = B.A;
return e === null ? null : e.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function i(e) {
if (te.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function u(e, r) {
function l() {
re || (re = !0, console.error(
"%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://react.dev/link/special-props)",
r
));
}
l.isReactWarning = !0, Object.defineProperty(e, "key", {
get: l,
configurable: !0
});
}
function d() {
var e = t(this.type);
return ne[e] || (ne[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function y(e, r, l, m, w, R, Z, X) {
return l = R.ref, e = {
$$typeof: T,
type: e,
key: r,
props: R,
_owner: w
}, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: d
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Z
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: X
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function E(e, r, l, m, w, R, Z, X) {
var b = r.children;
if (b !== void 0)
if (m)
if (Pe(b)) {
for (m = 0; m < b.length; m++)
v(b[m]);
Object.freeze && Object.freeze(b);
} else
console.error(
"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 v(b);
if (te.call(r, "key")) {
b = t(e);
var I = Object.keys(r).filter(function(Re) {
return Re !== "key";
});
m = 0 < I.length ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}", ce[b + m] || (I = 0 < I.length ? "{" + I.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
m,
b,
I,
b
), ce[b + m] = !0);
}
if (b = null, l !== void 0 && (a(l), b = "" + l), i(r) && (a(r.key), b = "" + r.key), "key" in r) {
l = {};
for (var Q in r)
Q !== "key" && (l[Q] = r[Q]);
} else l = r;
return b && u(
l,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), y(
e,
b,
R,
w,
n(),
l,
Z,
X
);
}
function v(e) {
typeof e == "object" && e !== null && e.$$typeof === T && e._store && (e._store.validated = 1);
}
var h = Ce, T = Symbol.for("react.transitional.element"), x = Symbol.for("react.portal"), C = Symbol.for("react.fragment"), p = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), f = Symbol.for("react.consumer"), S = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), J = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), $ = Symbol.for("react.lazy"), Y = Symbol.for("react.activity"), j = Symbol.for("react.client.reference"), B = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, te = Object.prototype.hasOwnProperty, Pe = Array.isArray, G = console.createTask ? console.createTask : function() {
return null;
};
h = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var re, ne = {}, oe = h["react-stack-bottom-frame"].bind(
h,
o
)(), se = G(c(o)), ce = {};
W.Fragment = C, W.jsx = function(e, r, l, m, w) {
var R = 1e4 > B.recentlyCreatedOwnerStacks++;
return E(
e,
r,
l,
!1,
m,
w,
R ? Error("react-stack-top-frame") : oe,
R ? G(c(e)) : se
);
}, W.jsxs = function(e, r, l, m, w) {
var R = 1e4 > B.recentlyCreatedOwnerStacks++;
return E(
e,
r,
l,
!0,
m,
w,
R ? Error("react-stack-top-frame") : oe,
R ? G(c(e)) : se
);
};
}()), W;
}
var ie;
function Ne() {
return ie || (ie = 1, process.env.NODE_ENV === "production" ? H.exports = we() : H.exports = $e()), H.exports;
}
var he = Ne();
const g = he.jsx, U = he.jsxs;
function q(t) {
const s = (a) => {
const {
onClick: c
} = a, n = Oe(null);
return c ? /* @__PURE__ */ g("span", {
onClick: (i) => {
i.preventDefault(), i.stopPropagation(), c && c(n);
},
ref: n,
children: /* @__PURE__ */ g(t, {
...a
})
}) : /* @__PURE__ */ g(t, {
...a
});
};
return s.displayName = `clickable(${t.displayName || t.name || "Component"})`, s;
}
const ue = "3rem", K = {
childProps: [],
type: "text",
bgColor: "transparent",
color: "#888888",
coord: {
x: "0",
y: "0"
},
dimensions: {
width: ue,
height: ue,
thickness: "2px"
},
id: "",
lineStyle: "",
onClick: () => null,
text: "",
font: "Comic Sans MS, Comic Sans, cursive",
fontSize: "1.5rem",
fontWeight: "normal",
borderColor: "transparent",
borderRadius: "40%"
}, Ae = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Default: K
}, Symbol.toStringTag, { value: "Module" })), pe = (t, s) => `calc(${t} * ${s})`, N = (t, s) => `calc(${t} / ${s || 1})`, k = (t) => `calc(100% - var(--${t}))`, De = (t) => `${t ?? 0}deg`, ee = (t) => {
const { bgColor: s, color: a, width: c, height: n, thickness: o } = t;
return {
"--w": c,
"--h": n,
"--t": o,
"--c": a,
"--bgc": s
};
}, Se = (t, s) => {
const a = typeof t == "number" ? [t] : t.slice(0, 3), c = {};
return a.forEach((n, o) => {
const i = `--${s}-${o}`;
c[i] = De(n);
}), c;
}, _e = (t) => {
const { bgColor: s, color: a, width: c, height: n, thickness: o, base: i, coord: u, offsets: d } = t;
return {
...ee({ bgColor: s, color: a, width: c, height: n, thickness: o }),
...Se(i ?? 0, "base"),
top: `calc(${(u == null ? void 0 : u.y) ?? 0} - ${(d == null ? void 0 : d.y) ?? "0%"})`,
left: `calc(${(u == null ? void 0 : u.x) ?? 0} - ${(d == null ? void 0 : d.x) ?? "0%"})`
};
}, Ie = (t) => {
const { font: s, fontSize: a, fontWeight: c, borderColor: n, borderRadius: o } = t;
return {
"--f": s,
"--fs": a,
"--fw": c,
"--bc": n,
"--br": o
};
}, Me = (t) => t, ze = (t = K) => {
const {
id: s,
font: a,
fontSize: c,
fontWeight: n,
bgColor: o,
borderColor: i,
borderRadius: u,
color: d,
dimensions: y,
coord: E,
text: v
} = t, {
width: h,
height: T,
thickness: x
} = {
...K.dimensions,
...y
}, C = _e({
width: h,
height: T,
thickness: x,
bgColor: o,
color: d,
coord: E
}), p = Ie({
font: a,
fontSize: c,
fontWeight: n,
borderColor: i,
borderRadius: u
}), P = {
...C,
...p
};
return /* @__PURE__ */ g("div", {
className: "bubble",
style: P,
id: s || void 0,
children: /* @__PURE__ */ g("div", {
className: "text",
children: v ?? ""
})
});
}, ge = q(ze), Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
TextBubblePresets: Ae,
default: ge
}, Symbol.toStringTag, { value: "Module" })), de = "12rem", A = {
default: { angle: [10, 0, -180] },
armPoint: { angle: [75, 15] },
armHip: { angle: [75, -85, 10] },
armHeadHold: { angle: [110, 80, -30] },
legHalfSquat: { angle: [50, -50, 90] }
}, _ = {
childProps: [],
children: [],
bgColor: "transparent",
color: "#888888",
coord: {
x: "0",
y: "0"
},
customPos: {
limbs: {
base: [10, 0, -180]
}
},
dimensions: {
width: de,
height: de,
thickness: "2px"
},
id: "",
lineStyle: "",
onClick: () => null,
posId: "default",
type: "stick"
}, ke = {
default: _.customPos,
custom: {},
panik: {
limbs: {
..._.customPos.limbs,
arms: {
left: A.armHeadHold,
right: A.armHeadHold
},
legs: {
left: A.legHalfSquat,
right: A.legHalfSquat
}
},
offsets: {
x: "0px",
y: "calc(var(--h) / -14)"
}
},
pointL: {
limbs: { ..._.customPos.limbs, arms: { left: A.armPoint } }
},
pointR: {
limbs: { ..._.customPos.limbs, arms: { right: A.armPoint } }
},
sitL: {
limbs: {
..._.customPos.limbs,
legs: { left: { angle: 90 }, right: { angle: 90 } }
},
offsets: { x: "0px", y: "-3rem" }
},
walkL: {},
walkR: {}
}, Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Default: _,
LimbAnglePresets: A,
Positions: ke
}, Symbol.toStringTag, { value: "Module" })), ve = (t = _) => {
const {
id: s,
bgColor: a,
color: c,
posId: n,
customPos: o,
dimensions: i,
coord: u,
childProps: d,
lineStyle: y,
onClick: E
} = t, v = n === "custom" && o, {
limbs: h,
offsets: T
} = v ? o : ke[n ?? "custom"], {
width: x,
height: C,
thickness: p
} = {
..._.dimensions,
...i
}, {
base: P = 0,
arms: f,
legs: S
} = {
..._.customPos.limbs,
...h
}, V = _e({
width: x,
height: C,
thickness: p,
bgColor: a,
color: c,
base: P,
offsets: T,
coord: u
}), D = (O) => {
const $ = O == null ? void 0 : O.angle, Y = {}, j = $ ? Se($, "angle") : {};
return /* @__PURE__ */ g("div", {
style: {
...Y,
...j
},
children: /* @__PURE__ */ g("div", {
children: /* @__PURE__ */ g("div", {})
})
});
}, J = y === "sketch" && p ? Me({
"--t": pe(p, 1.75)
}) : {};
return /* @__PURE__ */ U("div", {
className: `${y ?? ""} stick`,
style: V,
id: s || void 0,
children: [/* @__PURE__ */ g("div", {
className: "head"
}), /* @__PURE__ */ U("div", {
className: "body",
style: J,
children: [/* @__PURE__ */ U("div", {
className: "arms",
children: [D(f == null ? void 0 : f.left), D(f == null ? void 0 : f.right)]
}), /* @__PURE__ */ U("div", {
className: "legs",
children: [D(S == null ? void 0 : S.left), D(S == null ? void 0 : S.right)]
})]
}), d == null ? void 0 : d.map((O, $) => {
const {
type: Y
} = O;
let j = null;
switch (Y) {
case "stick":
j = ve;
return;
case "text":
j = ge;
break;
}
return j && /* @__PURE__ */ be(j, {
onClick: E,
...O,
key: `stickchild-${$}`
});
})]
});
}, ye = q(ve), Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
StickPresets: Le,
default: ye
}, Symbol.toStringTag, { value: "Module" })), fe = "50vmin", Ee = {
childProps: [],
color: _.color,
type: "comic",
bgColor: "transparent",
coord: {
x: "0",
y: "0"
},
dimensions: {
width: fe,
height: fe,
thickness: _.dimensions.thickness
},
id: "",
lineStyle: "",
onClick: () => null,
scenes: [],
layout: []
}, Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Default: Ee
}, Symbol.toStringTag, { value: "Module" })), me = "100%", Te = {
childProps: [],
type: "scene",
bgColor: "transparent",
coord: {
x: "0",
y: "0"
},
color: _.color,
dimensions: {
width: me,
height: me,
thickness: _.dimensions.thickness
},
id: "",
lineStyle: "",
onClick: () => null,
sticks: []
}, M = "h", z = "w", L = "0%", Fe = {
C: {
x: N(k(z), 2),
y: N(k(M), 2)
},
SW: {
x: L,
y: k(M)
},
W: {
x: L,
y: N(k(M), 2)
},
NW: {
x: L,
y: L
},
N: {
x: N(k(z), 2),
y: L
},
NE: {
x: k(z),
y: L
},
E: {
x: k(z),
y: N(k(M), 2)
},
SE: {
x: k(z),
y: k(M)
},
S: {
x: N(k(z), 2),
y: k(M)
}
}, We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Default: Te,
Directions: Fe
}, Symbol.toStringTag, { value: "Module" })), He = ({
id: t = "scene",
bgColor: s,
childProps: a,
color: c,
dimensions: n,
lineStyle: o,
sticks: i,
onClick: u
}) => {
const {
width: d,
height: y,
thickness: E
} = n ?? Te.dimensions, v = ee({
width: d,
height: y,
thickness: E,
bgColor: s,
color: c
});
return /* @__PURE__ */ g("div", {
className: `${o ?? ""} scene`,
style: v,
id: t || void 0,
children: [...a ?? [], ...i ?? []].filter(({
type: h
}) => h === "stick").map((h, T) => {
const x = {
bgColor: s,
color: c,
lineStyle: o,
...h
};
return /* @__PURE__ */ be(ye, {
...x,
onClick: u,
key: `stick-${T}-${x.id}`
});
})
});
}, xe = q(He), Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
ScenePresets: We,
default: xe
}, Symbol.toStringTag, { value: "Module" })), Ue = ({
id: t = "comic",
bgColor: s,
childProps: a,
color: c,
dimensions: n,
layout: o,
lineStyle: i,
onClick: u,
scenes: d
}) => {
const {
width: y,
height: E,
thickness: v
} = n ?? Ee.dimensions, h = ee({
width: y,
height: E,
thickness: v,
bgColor: s,
color: c
}), T = je(() => {
const x = o.map((p) => {
const P = p.reduce((f, S) => f + S, 0);
return p.map((f) => f / (P || 1));
}).flat(), C = a == null ? void 0 : a.filter(({
type: p
}) => p === "scene");
return /* @__PURE__ */ g("div", {
className: "row",
children: x.map((p, P) => {
const f = [...C ?? [], ...d ?? []][P], S = f ? {
bgColor: s,
color: c,
lineStyle: i,
...f,
dimensions: {
thickness: v,
...f.dimensions,
width: pe("100%", p),
height: N((n == null ? void 0 : n.height) ?? "", o.length || 1)
}
} : void 0;
return S && /* @__PURE__ */ g(xe, {
onClick: u,
...S
}, `scene-${P}`);
})
});
}, [n == null ? void 0 : n.height, o, d]);
return /* @__PURE__ */ g("div", {
className: `${i ?? ""} comic`,
style: h,
id: t || void 0,
children: T
});
}, qe = q(Ue), Ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
ComicPresets: Ye,
default: qe
}, Symbol.toStringTag, { value: "Module" }));
export {
Ze as Comic,
Ge as Scene,
Be as Stick,
Je as TextBubble
};