@sbseguros/design-system
Version:
A Vue 3 design system with Tailwind CSS and Lucide icons.
1,084 lines • 3.11 MB
JavaScript
var Xo = Object.defineProperty;
var p0 = (b) => {
throw TypeError(b);
};
var Ho = (b, I, g) => I in b ? Xo(b, I, { enumerable: !0, configurable: !0, writable: !0, value: g }) : b[I] = g;
var K = (b, I, g) => Ho(b, typeof I != "symbol" ? I + "" : I, g), JG = (b, I, g) => I.has(b) || p0("Cannot " + g);
var l = (b, I, g) => (JG(b, I, "read from private field"), g ? g.call(b) : I.get(b)), Y = (b, I, g) => I.has(b) ? p0("Cannot add the same private member more than once") : I instanceof WeakSet ? I.add(b) : I.set(b, g), W = (b, I, g, C) => (JG(b, I, "write to private field"), C ? C.call(b, g) : I.set(b, g), g), a = (b, I, g) => (JG(b, I, "access private method"), g);
var sg = (b, I, g, C) => ({
set _(A) {
W(b, I, A, g);
},
get _() {
return l(b, I, C);
}
});
import { defineComponent as XA, computed as f, createElementBlock as gI, openBlock as _, normalizeStyle as us, normalizeClass as VI, toDisplayString as nI, h as rG, createElementVNode as F, createVNode as $g, unref as Wl, Fragment as Ms, renderList as vG, createBlock as HG, createCommentVNode as nA, resolveDynamicComponent as W0, Transition as dm, withCtx as Pi, ref as Qg, watch as ki, nextTick as oc, onMounted as uo, onUnmounted as Mo, createStaticVNode as Do, renderSlot as cm, useAttrs as Gm, createTextVNode as F0, mergeProps as bm } from "vue";
/*! berea-ui v0.0.39 | (c) 2025 SBS Seguros Design System | MIT License | https://github.com/sbs-seguros-col/sbs-common-components */
const Ko = /* @__PURE__ */ XA({
__name: "Button",
props: {
label: {},
primary: { type: Boolean, default: !1 },
size: {},
backgroundColor: {}
},
emits: ["click"],
setup(b, { emit: I }) {
const g = b, C = I, A = f(() => ({
"storybook-button": !0,
"storybook-button--primary": g.primary,
"storybook-button--secondary": !g.primary,
[`storybook-button--${g.size || "medium"}`]: !0
})), i = f(() => ({
backgroundColor: g.backgroundColor
})), Z = () => {
C("click", 1);
};
return (s, d) => (_(), gI("button", {
type: "button",
class: VI(A.value),
onClick: Z,
style: us(i.value)
}, nI(s.label), 7));
}
});
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const z0 = (b) => b.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), So = (b) => b.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(I, g, C) => C ? C.toUpperCase() : g.toLowerCase()
), po = (b) => {
const I = So(b);
return I.charAt(0).toUpperCase() + I.slice(1);
}, Fo = (...b) => b.filter((I, g, C) => !!I && I.trim() !== "" && C.indexOf(I) === g).join(" ").trim();
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var Wc = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const zo = ({ size: b, strokeWidth: I = 2, absoluteStrokeWidth: g, color: C, iconNode: A, name: i, class: Z, ...s }, { slots: d }) => rG(
"svg",
{
...Wc,
width: b || Wc.width,
height: b || Wc.height,
stroke: C || Wc.stroke,
"stroke-width": g ? Number(I) * 24 / Number(b) : I,
class: Fo(
"lucide",
...i ? [`lucide-${z0(po(i))}-icon`, `lucide-${z0(i)}`] : ["lucide-icon"]
),
...s
},
[...A.map((c) => rG(...c)), ...d.default ? [d.default()] : []]
);
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const w0 = (b, I) => (g, { slots: C }) => rG(
zo,
{
...g,
iconNode: I,
name: b
},
C
);
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Jo = w0("arrow-left", [
["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
["path", { d: "M19 12H5", key: "x3x0zl" }]
]);
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const mm = w0("chevron-down", [
["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
]);
/**
* @license lucide-vue-next v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const EG = w0("chevron-right", [
["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
]), ko = { class: "h-6 w-6 flex p-[5px] justify-center items-center shrink-0" }, Lo = { class: "text-sm font-medium leading-6 underline text-grey-grey-900 font-inter" }, To = { class: "inline-flex items-center gap-1 px-4 py-2 rounded bg-fill min-w-[161px]" }, jo = { class: "text-sm font-medium leading-6 text-grey-grey-700 font-inter" }, Bm = /* @__PURE__ */ XA({
__name: "breadcrumb",
props: {
label: {
type: String,
required: !0
},
page: {
type: String,
default: "Home"
},
width: {
type: String,
default: "100%"
},
path: {
type: String,
default: ""
// Valor por defecto vacío, lo que indica que debe usar window.location
}
},
emits: ["back"],
setup(b, { emit: I }) {
const g = b, C = I, A = f(() => g.label), i = f(() => g.page), Z = f(() => g.width), s = f(() => {
let c;
return g.path ? c = g.path : typeof window < "u" ? c = window.location.pathname : c = "/", c.split("/").filter((G) => G).map((G) => G[0].toUpperCase() + G.slice(1));
}), d = () => {
console.log("Back button clicked"), C("back");
};
return (c, G) => (_(), gI("div", {
class: VI(`flex gap-10 w-[${Z.value}]`)
}, [
F("button", {
onClick: d,
class: "flex items-center gap-1"
}, [
F("span", ko, [
$g(Wl(Jo), { class: "w-6 h-6 shrink-0" })
]),
F("span", Lo, nI(A.value), 1)
]),
F("div", To, [
F("span", jo, nI(i.value), 1),
$g(Wl(EG), { class: "w-4 h-4 text-grey-grey-300" }),
(_(!0), gI(Ms, null, vG(s.value, (B, o) => (_(), gI(Ms, { key: B }, [
F("span", {
class: VI({
"text-status-focus": o === s.value.length - 1,
// Último segmento activo
"text-grey-grey-700": o !== s.value.length - 1,
// Segmentos anteriores
"font-inter text-sm font-medium leading-6 flex-[1_0_0]": !0
})
}, nI(B), 3),
o < s.value.length - 1 ? (_(), HG(Wl(EG), {
key: 0,
class: "w-4 h-4 text-grey-grey-300"
})) : nA("", !0)
], 64))), 128))
])
], 2));
}
}), Qo = ["src"], Oo = { class: "font-inter text-[42px] leading-[52px] font-extrabold text-grey-grey-700 flex h-[40.5px] flex-col justify-center self-stretch tracking-[-0.31px]" }, xo = { class: "self-stretch text-xl font-normal leading-[30px] font-inter text-grey-grey-600 mr-2" }, Uo = /* @__PURE__ */ XA({
__name: "banner",
props: {
label: {
type: String,
required: !0
},
width: {
type: String,
default: "100%"
},
page: {
type: String,
default: "Home"
},
path: {
type: String,
default: ""
},
title: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
src: {
type: String,
default: ""
},
stretch: {
type: Boolean,
default: !1
},
contract: {
type: Boolean,
default: !1
}
},
emits: ["back"],
setup(b, { emit: I }) {
const g = b;
console.log("Banner props:", g);
const C = I, A = f(() => g.label), i = f(() => g.width), Z = f(() => g.path), s = f(() => g.title), d = f(() => g.description), c = f(() => g.src), G = f(() => g.page), B = f(() => g.stretch), o = f(() => g.contract), h = () => {
C("back");
};
return (V, N) => (_(), gI("div", {
class: VI([
"bg-grey-grey-100 w-full left-0 z-[99] absolute top-40 shrink-0 aspect-[18/5]",
B.value ? "h-[312px]" : "h-[399px]"
])
}, [
c.value ? (_(), gI("img", {
key: 0,
src: c.value,
alt: "Profile Header",
class: "object-contain w-full h-full"
}, null, 8, Qo)) : nA("", !0),
$g(Bm, {
label: A.value,
width: i.value,
path: Z.value,
page: G.value,
class: "absolute top-10 left-[120px] z-[100]",
onBack: h
}, null, 8, ["label", "width", "path", "page"]),
F("div", {
class: VI(["absolute left-[119.2px] flex flex-col h-[125px] items-start text-left gap-4", {
"top-[166px] w-[789px]": !B.value && !o.value,
"top-[138px] w-[719px]": o.value,
"top-[120px] w-[789px]": B.value
}])
}, [
F("span", Oo, nI(s.value), 1),
F("span", xo, nI(d.value), 1)
], 2)
], 2));
}
}), ro = { class: "flex flex-col w-full gap-8" }, vo = ["onClick", "aria-expanded", "aria-controls", "aria-label"], Eo = { class: "self-stretch w-full h-8" }, Po = { class: "flex items-center gap-2" }, fo = ["src"], _o = {
key: 0,
class: "w-6 h-6"
}, qo = ["id"], $o = { class: "flex flex-col self-stretch gap-4 px-10 py-4" }, IW = ["onClick", "aria-label"], gW = /* @__PURE__ */ XA({
__name: "collapsed",
props: {
items: {
type: Array,
required: !0,
validator: (b) => b.every(
(I) => typeof I.key == "string" && typeof I.name == "string" && (I.icon === void 0 || typeof I.icon == "string" || typeof I.icon == "function") && (I.icon_active === void 0 || typeof I.icon_active == "string" || typeof I.icon_active == "function") && (I.collapsed === void 0 || typeof I.collapsed == "boolean") && (I.children === void 0 || Array.isArray(I.children) && I.children.every(
(g) => typeof g.key == "string" && typeof g.name == "string"
))
)
},
activeForm: {
type: String,
required: !0
},
activeChild: {
type: Object,
default: null
}
},
emits: ["click", "child-click"],
setup(b, { emit: I }) {
const g = b, C = I, A = (o) => d.value === o.key && o.icon_active ? o.icon_active : o.icon, i = (o) => {
const h = A(o);
return typeof h == "string" ? h : void 0;
}, Z = (o) => typeof o == "string", s = f(() => g.items), d = f(() => g.activeForm), c = (o) => {
var V;
const h = ((V = g.activeChild) == null ? void 0 : V.parentKey) === o.key;
d.value === o.key && o.collapsed && !h ? C("click", "") : C("click", o.key);
}, G = (o, h) => {
d.value !== h.key && C("click", h.key), C("child-click", {
parentKey: h.key,
childKey: o.key
});
}, B = (o, h) => {
var V, N;
return ((V = g.activeChild) == null ? void 0 : V.parentKey) === h.key && ((N = g.activeChild) == null ? void 0 : N.childKey) === o.key;
};
return (o, h) => (_(), gI("div", ro, [
(_(!0), gI(Ms, null, vG(s.value, (V) => (_(), gI("div", {
key: V.key,
class: "flex flex-col items-center justify-center w-full h-full"
}, [
F("button", {
type: "button",
onClick: (N) => c(V),
"aria-expanded": b.activeForm === V.key && V.collapsed,
"aria-controls": `submenu-${V.key}`,
"aria-label": `Toggle ${V.name} menu`,
class: VI([
"flex py-2 px-4 flex-col items-start gap-2.5 self-stretch rounded-lg shadow-[0_2px_5px_0_rgba(0,_0,_0,_0.08)]",
d.value === V.key ? "bg-status-focus" : "bg-bandn-white"
])
}, [
F("div", Eo, [
F("div", Po, [
F("div", {
class: VI([
"flex w-8 h-8 py-1 px-0.5 items-center justify-center",
{
"text-grey-grey-900": d.value !== V.key,
"text-bandn-white": d.value === V.key
}
])
}, [
Z(A(V)) ? (_(), gI("img", {
key: 0,
src: i(V),
alt: "",
class: VI([
"object-contain w-8 h-8",
{
"brightness-0 invert": d.value === V.key,
"opacity-100": d.value === V.key,
"opacity-70": d.value !== V.key
}
])
}, null, 10, fo)) : (_(), HG(W0(A(V)), {
key: 1,
class: VI(["w-8 h-8", {
"text-grey-grey-900": d.value !== V.key,
"text-bandn-white": d.value === V.key
}])
}, null, 8, ["class"]))
], 2),
F("span", {
class: VI([
"flex-[1_0_0] font-inter text-lg font-semibold text-left",
{
"text-grey-grey-900": d.value !== V.key,
"text-bandn-white": d.value === V.key
}
])
}, nI(V.name), 3),
V.collapsed ? (_(), gI("div", _o, [
$g(Wl(mm), {
class: VI([
"transition-transform duration-200",
{
"text-bandn-white": d.value === V.key,
"text-grey-grey-900": d.value !== V.key,
"rotate-180": d.value === V.key && V.collapsed
}
])
}, null, 8, ["class"])
])) : nA("", !0)
])
])
], 10, vo),
$g(dm, {
name: "fade-slide",
mode: "out-in"
}, {
default: Pi(() => [
V.children && V.children.length ? (_(), gI("div", {
key: 0,
id: `submenu-${V.key}`,
class: VI([
"overflow-hidden transition-all duration-500 w-[276px]",
b.activeForm === V.key && V.collapsed ? "max-h-[500px]" : "max-h-0"
])
}, [
F("div", $o, [
(_(!0), gI(Ms, null, vG(V.children, (N) => (_(), gI("button", {
type: "button",
key: N.key,
onClick: (n) => G(N, V),
"aria-label": N.name,
class: VI([
"flex w-[196px] py-1 text-left px-6 flex-col justify-center items-center border-b border-solid",
{
"text-status-focus border-status-focus": B(
N,
V
),
"text-grey-grey-900 border-grey-grey-50": !B(
N,
V
)
}
])
}, [
F("span", {
class: VI(["flex w-[158px] min-h-[22px] flex-col justify-center font-inter text-sm leading-[22px]", {
"font-semibold": B(N, V),
"font-normal": !B(N, V)
}])
}, nI(N.name), 3)
], 10, IW))), 128))
])
], 10, qo)) : nA("", !0)
]),
_: 2
}, 1024)
]))), 128))
]));
}
}), As = (b, I) => {
const g = b.__vccOpts || b;
for (const [C, A] of I)
g[C] = A;
return g;
}, CW = /* @__PURE__ */ As(gW, [["__scopeId", "data-v-62b8d769"]]);
var cs = { exports: {} }, AW = cs.exports, J0;
function lW() {
return J0 || (J0 = 1, function(b, I) {
(function(g, C) {
C(I);
})(AW, function(g) {
class C {
constructor(m, w) {
this.state = { angle: 0, area: [], position: { x: 0, y: 0 }, hardAngle: 0, hardDrawingAngle: 0 }, this.createdDensity = w, this.nowDrawingDensity = this.createdDensity, this.render = m;
}
setDensity(m) {
this.createdDensity = m, this.nowDrawingDensity = m;
}
setDrawingDensity(m) {
this.nowDrawingDensity = m;
}
setPosition(m) {
this.state.position = m;
}
setAngle(m) {
this.state.angle = m;
}
setArea(m) {
this.state.area = m;
}
setHardDrawingAngle(m) {
this.state.hardDrawingAngle = m;
}
setHardAngle(m) {
this.state.hardAngle = m, this.state.hardDrawingAngle = m;
}
setOrientation(m) {
this.orientation = m;
}
getDrawingDensity() {
return this.nowDrawingDensity;
}
getDensity() {
return this.createdDensity;
}
getHardAngle() {
return this.state.hardAngle;
}
}
class A extends C {
constructor(m, w, t) {
super(m, t), this.image = null, this.isLoad = !1, this.loadingAngle = 0, this.image = new Image(), this.image.src = w;
}
draw(m) {
const w = this.render.getContext(), t = this.render.convertToGlobal(this.state.position), y = this.render.getRect().pageWidth, X = this.render.getRect().height;
w.save(), w.translate(t.x, t.y), w.beginPath();
for (let u of this.state.area) u !== null && (u = this.render.convertToGlobal(u), w.lineTo(u.x - t.x, u.y - t.y));
w.rotate(this.state.angle), w.clip(), this.isLoad ? w.drawImage(this.image, 0, 0, y, X) : this.drawLoader(w, { x: 0, y: 0 }, y, X), w.restore();
}
simpleDraw(m) {
const w = this.render.getRect(), t = this.render.getContext(), y = w.pageWidth, X = w.height, u = m === 1 ? w.left + w.pageWidth : w.left, D = w.top;
this.isLoad ? t.drawImage(this.image, u, D, y, X) : this.drawLoader(t, { x: u, y: D }, y, X);
}
drawLoader(m, w, t, y) {
m.beginPath(), m.strokeStyle = "rgb(200, 200, 200)", m.fillStyle = "rgb(255, 255, 255)", m.lineWidth = 1, m.rect(w.x + 1, w.y + 1, t - 1, y - 1), m.stroke(), m.fill();
const X = { x: w.x + t / 2, y: w.y + y / 2 };
m.beginPath(), m.lineWidth = 10, m.arc(X.x, X.y, 20, this.loadingAngle, 3 * Math.PI / 2 + this.loadingAngle), m.stroke(), m.closePath(), this.loadingAngle += 0.07, this.loadingAngle >= 2 * Math.PI && (this.loadingAngle = 0);
}
load() {
this.isLoad || (this.image.onload = () => {
this.isLoad = !0;
});
}
newTemporaryCopy() {
return this;
}
getTemporaryCopy() {
return this;
}
hideTemporaryCopy() {
}
}
class i {
constructor(m, w) {
this.pages = [], this.currentPageIndex = 0, this.currentSpreadIndex = 0, this.landscapeSpread = [], this.portraitSpread = [], this.render = w, this.app = m, this.currentPageIndex = 0, this.isShowCover = this.app.getSettings().showCover;
}
destroy() {
this.pages = [];
}
createSpread() {
this.landscapeSpread = [], this.portraitSpread = [];
for (let w = 0; w < this.pages.length; w++) this.portraitSpread.push([w]);
let m = 0;
this.isShowCover && (this.pages[0].setDensity("hard"), this.landscapeSpread.push([m]), m++);
for (let w = m; w < this.pages.length; w += 2) w < this.pages.length - 1 ? this.landscapeSpread.push([w, w + 1]) : (this.landscapeSpread.push([w]), this.pages[w].setDensity("hard"));
}
getSpread() {
return this.render.getOrientation() === "landscape" ? this.landscapeSpread : this.portraitSpread;
}
getSpreadIndexByPage(m) {
const w = this.getSpread();
for (let t = 0; t < w.length; t++) if (m === w[t][0] || m === w[t][1]) return t;
return null;
}
getPageCount() {
return this.pages.length;
}
getPages() {
return this.pages;
}
getPage(m) {
if (m >= 0 && m < this.pages.length) return this.pages[m];
throw new Error("Invalid page number");
}
nextBy(m) {
const w = this.pages.indexOf(m);
return w < this.pages.length - 1 ? this.pages[w + 1] : null;
}
prevBy(m) {
const w = this.pages.indexOf(m);
return w > 0 ? this.pages[w - 1] : null;
}
getFlippingPage(m) {
const w = this.currentSpreadIndex;
if (this.render.getOrientation() === "portrait") return m === 0 ? this.pages[w].newTemporaryCopy() : this.pages[w - 1];
{
const t = m === 0 ? this.getSpread()[w + 1] : this.getSpread()[w - 1];
return t.length === 1 || m === 0 ? this.pages[t[0]] : this.pages[t[1]];
}
}
getBottomPage(m) {
const w = this.currentSpreadIndex;
if (this.render.getOrientation() === "portrait") return m === 0 ? this.pages[w + 1] : this.pages[w - 1];
{
const t = m === 0 ? this.getSpread()[w + 1] : this.getSpread()[w - 1];
return t.length === 1 ? this.pages[t[0]] : m === 0 ? this.pages[t[1]] : this.pages[t[0]];
}
}
showNext() {
this.currentSpreadIndex < this.getSpread().length && (this.currentSpreadIndex++, this.showSpread());
}
showPrev() {
this.currentSpreadIndex > 0 && (this.currentSpreadIndex--, this.showSpread());
}
getCurrentPageIndex() {
return this.currentPageIndex;
}
show(m = null) {
if (m === null && (m = this.currentPageIndex), m < 0 || m >= this.pages.length) return;
const w = this.getSpreadIndexByPage(m);
w !== null && (this.currentSpreadIndex = w, this.showSpread());
}
getCurrentSpreadIndex() {
return this.currentSpreadIndex;
}
setCurrentSpreadIndex(m) {
if (!(m >= 0 && m < this.getSpread().length)) throw new Error("Invalid page");
this.currentSpreadIndex = m;
}
showSpread() {
const m = this.getSpread()[this.currentSpreadIndex];
m.length === 2 ? (this.render.setLeftPage(this.pages[m[0]]), this.render.setRightPage(this.pages[m[1]])) : this.render.getOrientation() === "landscape" && m[0] === this.pages.length - 1 ? (this.render.setLeftPage(this.pages[m[0]]), this.render.setRightPage(null)) : (this.render.setLeftPage(null), this.render.setRightPage(this.pages[m[0]])), this.currentPageIndex = m[0], this.app.updatePageIndex(this.currentPageIndex);
}
}
class Z extends i {
constructor(m, w, t) {
super(m, w), this.imagesHref = t;
}
load() {
for (const m of this.imagesHref) {
const w = new A(this.render, m, "soft");
w.load(), this.pages.push(w);
}
this.createSpread();
}
}
class s {
static GetDistanceBetweenTwoPoint(m, w) {
return m === null || w === null ? 1 / 0 : Math.sqrt(Math.pow(w.x - m.x, 2) + Math.pow(w.y - m.y, 2));
}
static GetSegmentLength(m) {
return s.GetDistanceBetweenTwoPoint(m[0], m[1]);
}
static GetAngleBetweenTwoLine(m, w) {
const t = m[0].y - m[1].y, y = w[0].y - w[1].y, X = m[1].x - m[0].x, u = w[1].x - w[0].x;
return Math.acos((t * y + X * u) / (Math.sqrt(t * t + X * X) * Math.sqrt(y * y + u * u)));
}
static PointInRect(m, w) {
return w === null ? null : w.x >= m.left && w.x <= m.width + m.left && w.y >= m.top && w.y <= m.top + m.height ? w : null;
}
static GetRotatedPoint(m, w, t) {
return { x: m.x * Math.cos(t) + m.y * Math.sin(t) + w.x, y: m.y * Math.cos(t) - m.x * Math.sin(t) + w.y };
}
static LimitPointToCircle(m, w, t) {
if (s.GetDistanceBetweenTwoPoint(m, t) <= w) return t;
const y = m.x, X = m.y, u = t.x, D = t.y;
let M = Math.sqrt(Math.pow(w, 2) * Math.pow(y - u, 2) / (Math.pow(y - u, 2) + Math.pow(X - D, 2))) + y;
t.x < 0 && (M *= -1);
let S = (M - y) * (X - D) / (y - u) + X;
return y - u + X === 0 && (S = w), { x: M, y: S };
}
static GetIntersectBetweenTwoSegment(m, w, t) {
return s.PointInRect(m, s.GetIntersectBeetwenTwoLine(w, t));
}
static GetIntersectBeetwenTwoLine(m, w) {
const t = m[0].y - m[1].y, y = w[0].y - w[1].y, X = m[1].x - m[0].x, u = w[1].x - w[0].x, D = m[0].x * m[1].y - m[1].x * m[0].y, M = w[0].x * w[1].y - w[1].x * w[0].y, S = t * M - y * D, O = X * M - u * D, U = -(D * u - M * X) / (t * u - y * X), CI = -(t * M - y * D) / (t * u - y * X);
if (isFinite(U) && isFinite(CI)) return { x: U, y: CI };
if (Math.abs(S - O) < 0.1) throw new Error("Segment included");
return null;
}
static GetCordsFromTwoPoint(m, w) {
const t = Math.abs(m.x - w.x), y = Math.abs(m.y - w.y), X = Math.max(t, y), u = [m];
function D(M, S, O, U, CI) {
return S > M ? M + CI * (O / U) : S < M ? M - CI * (O / U) : M;
}
for (let M = 1; M <= X; M += 1) u.push({ x: D(m.x, w.x, t, X, M), y: D(m.y, w.y, y, X, M) });
return u;
}
}
class d extends C {
constructor(m, w, t) {
super(m, t), this.copiedElement = null, this.temporaryCopy = null, this.isLoad = !1, this.element = w, this.element.classList.add("stf__item"), this.element.classList.add("--" + t);
}
newTemporaryCopy() {
return this.nowDrawingDensity === "hard" ? this : (this.temporaryCopy === null && (this.copiedElement = this.element.cloneNode(!0), this.element.parentElement.appendChild(this.copiedElement), this.temporaryCopy = new d(this.render, this.copiedElement, this.nowDrawingDensity)), this.getTemporaryCopy());
}
getTemporaryCopy() {
return this.temporaryCopy;
}
hideTemporaryCopy() {
this.temporaryCopy !== null && (this.copiedElement.remove(), this.copiedElement = null, this.temporaryCopy = null);
}
draw(m) {
const w = m || this.nowDrawingDensity, t = this.render.convertToGlobal(this.state.position), y = this.render.getRect().pageWidth, X = this.render.getRect().height;
this.element.classList.remove("--simple");
const u = `
display: block;
z-index: ${this.element.style.zIndex};
left: 0;
top: 0;
width: ${y}px;
height: ${X}px;
`;
w === "hard" ? this.drawHard(u) : this.drawSoft(t, u);
}
drawHard(m = "") {
const w = this.render.getRect().left + this.render.getRect().width / 2, t = this.state.hardDrawingAngle, y = m + `
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
clip-path: none;
-webkit-clip-path: none;
` + (this.orientation === 0 ? `transform-origin: ${this.render.getRect().pageWidth}px 0;
transform: translate3d(0, 0, 0) rotateY(${t}deg);` : `transform-origin: 0 0;
transform: translate3d(${w}px, 0, 0) rotateY(${t}deg);`);
this.element.style.cssText = y;
}
drawSoft(m, w = "") {
let t = "polygon( ";
for (const X of this.state.area) if (X !== null) {
let u = this.render.getDirection() === 1 ? { x: -X.x + this.state.position.x, y: X.y - this.state.position.y } : { x: X.x - this.state.position.x, y: X.y - this.state.position.y };
u = s.GetRotatedPoint(u, { x: 0, y: 0 }, this.state.angle), t += u.x + "px " + u.y + "px, ";
}
t = t.slice(0, -2), t += ")";
const y = w + `transform-origin: 0 0; clip-path: ${t}; -webkit-clip-path: ${t};` + (this.render.isSafari() && this.state.angle === 0 ? `transform: translate(${m.x}px, ${m.y}px);` : `transform: translate3d(${m.x}px, ${m.y}px, 0) rotate(${this.state.angle}rad);`);
this.element.style.cssText = y;
}
simpleDraw(m) {
const w = this.render.getRect(), t = w.pageWidth, y = w.height, X = m === 1 ? w.left + w.pageWidth : w.left, u = w.top;
this.element.classList.add("--simple"), this.element.style.cssText = `
position: absolute;
display: block;
height: ${y}px;
left: ${X}px;
top: ${u}px;
width: ${t}px;
z-index: ${this.render.getSettings().startZIndex + 1};`;
}
getElement() {
return this.element;
}
load() {
this.isLoad = !0;
}
setOrientation(m) {
super.setOrientation(m), this.element.classList.remove("--left", "--right"), this.element.classList.add(m === 1 ? "--right" : "--left");
}
setDrawingDensity(m) {
this.element.classList.remove("--soft", "--hard"), this.element.classList.add("--" + m), super.setDrawingDensity(m);
}
}
class c extends i {
constructor(m, w, t, y) {
super(m, w), this.element = t, this.pagesElement = y;
}
load() {
for (const m of this.pagesElement) {
const w = new d(this.render, m, m.dataset.density === "hard" ? "hard" : "soft");
w.load(), this.pages.push(w);
}
this.createSpread();
}
}
class G {
constructor(m, w, t, y) {
this.direction = m, this.corner = w, this.topIntersectPoint = null, this.sideIntersectPoint = null, this.bottomIntersectPoint = null, this.pageWidth = parseInt(t, 10), this.pageHeight = parseInt(y, 10);
}
calc(m) {
try {
return this.position = this.calcAngleAndPosition(m), this.calculateIntersectPoint(this.position), !0;
} catch {
return !1;
}
}
getFlippingClipArea() {
const m = [];
let w = !1;
return m.push(this.rect.topLeft), m.push(this.topIntersectPoint), this.sideIntersectPoint === null ? w = !0 : (m.push(this.sideIntersectPoint), this.bottomIntersectPoint === null && (w = !1)), m.push(this.bottomIntersectPoint), (w || this.corner === "bottom") && m.push(this.rect.bottomLeft), m;
}
getBottomClipArea() {
const m = [];
return m.push(this.topIntersectPoint), this.corner === "top" ? m.push({ x: this.pageWidth, y: 0 }) : (this.topIntersectPoint !== null && m.push({ x: this.pageWidth, y: 0 }), m.push({ x: this.pageWidth, y: this.pageHeight })), this.sideIntersectPoint !== null ? s.GetDistanceBetweenTwoPoint(this.sideIntersectPoint, this.topIntersectPoint) >= 10 && m.push(this.sideIntersectPoint) : this.corner === "top" && m.push({ x: this.pageWidth, y: this.pageHeight }), m.push(this.bottomIntersectPoint), m.push(this.topIntersectPoint), m;
}
getAngle() {
return this.direction === 0 ? -this.angle : this.angle;
}
getRect() {
return this.rect;
}
getPosition() {
return this.position;
}
getActiveCorner() {
return this.direction === 0 ? this.rect.topLeft : this.rect.topRight;
}
getDirection() {
return this.direction;
}
getFlippingProgress() {
return Math.abs((this.position.x - this.pageWidth) / (2 * this.pageWidth) * 100);
}
getCorner() {
return this.corner;
}
getBottomPagePosition() {
return this.direction === 1 ? { x: this.pageWidth, y: 0 } : { x: 0, y: 0 };
}
getShadowStartPoint() {
return this.corner === "top" ? this.topIntersectPoint : this.sideIntersectPoint !== null ? this.sideIntersectPoint : this.topIntersectPoint;
}
getShadowAngle() {
const m = s.GetAngleBetweenTwoLine(this.getSegmentToShadowLine(), [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]);
return this.direction === 0 ? m : Math.PI - m;
}
calcAngleAndPosition(m) {
let w = m;
if (this.updateAngleAndGeometry(w), w = this.corner === "top" ? this.checkPositionAtCenterLine(w, { x: 0, y: 0 }, { x: 0, y: this.pageHeight }) : this.checkPositionAtCenterLine(w, { x: 0, y: this.pageHeight }, { x: 0, y: 0 }), Math.abs(w.x - this.pageWidth) < 1 && Math.abs(w.y) < 1) throw new Error("Point is too small");
return w;
}
updateAngleAndGeometry(m) {
this.angle = this.calculateAngle(m), this.rect = this.getPageRect(m);
}
calculateAngle(m) {
const w = this.pageWidth - m.x + 1, t = this.corner === "bottom" ? this.pageHeight - m.y : m.y;
let y = 2 * Math.acos(w / Math.sqrt(t * t + w * w));
t < 0 && (y = -y);
const X = Math.PI - y;
if (!isFinite(y) || X >= 0 && X < 3e-3) throw new Error("The G point is too small");
return this.corner === "bottom" && (y = -y), y;
}
getPageRect(m) {
return this.corner === "top" ? this.getRectFromBasePoint([{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }, { x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }], m) : this.getRectFromBasePoint([{ x: 0, y: -this.pageHeight }, { x: this.pageWidth, y: -this.pageHeight }, { x: 0, y: 0 }, { x: this.pageWidth, y: 0 }], m);
}
getRectFromBasePoint(m, w) {
return { topLeft: this.getRotatedPoint(m[0], w), topRight: this.getRotatedPoint(m[1], w), bottomLeft: this.getRotatedPoint(m[2], w), bottomRight: this.getRotatedPoint(m[3], w) };
}
getRotatedPoint(m, w) {
return { x: m.x * Math.cos(this.angle) + m.y * Math.sin(this.angle) + w.x, y: m.y * Math.cos(this.angle) - m.x * Math.sin(this.angle) + w.y };
}
calculateIntersectPoint(m) {
const w = { left: -1, top: -1, width: this.pageWidth + 2, height: this.pageHeight + 2 };
this.corner === "top" ? (this.topIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [m, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [m, this.rect.bottomLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }])) : (this.topIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [this.rect.topLeft, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [m, this.rect.topLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = s.GetIntersectBetweenTwoSegment(w, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }]));
}
checkPositionAtCenterLine(m, w, t) {
let y = m;
const X = s.LimitPointToCircle(w, this.pageWidth, y);
y !== X && (y = X, this.updateAngleAndGeometry(y));
const u = Math.sqrt(Math.pow(this.pageWidth, 2) + Math.pow(this.pageHeight, 2));
let D = this.rect.bottomRight, M = this.rect.topLeft;
if (this.corner === "bottom" && (D = this.rect.topRight, M = this.rect.bottomLeft), D.x <= 0) {
const S = s.LimitPointToCircle(t, u, M);
S !== y && (y = S, this.updateAngleAndGeometry(y));
}
return y;
}
getSegmentToShadowLine() {
const m = this.getShadowStartPoint();
return [m, m !== this.sideIntersectPoint && this.sideIntersectPoint !== null ? this.sideIntersectPoint : this.bottomIntersectPoint];
}
}
class B {
constructor(m, w) {
this.flippingPage = null, this.bottomPage = null, this.calc = null, this.state = "read", this.render = m, this.app = w;
}
fold(m) {
this.setState("user_fold"), this.calc === null && this.start(m), this.do(this.render.convertToPage(m));
}
flip(m) {
if (this.app.getSettings().disableFlipByClick && !this.isPointOnCorners(m) || (this.calc !== null && this.render.finishAnimation(), !this.start(m))) return;
const w = this.getBoundsRect();
this.setState("flipping");
const t = w.height / 10, y = this.calc.getCorner() === "bottom" ? w.height - t : t, X = this.calc.getCorner() === "bottom" ? w.height : 0;
this.calc.calc({ x: w.pageWidth - t, y }), this.animateFlippingTo({ x: w.pageWidth - t, y }, { x: -w.pageWidth, y: X }, !0);
}
start(m) {
this.reset();
const w = this.render.convertToBook(m), t = this.getBoundsRect(), y = this.getDirectionByPoint(w), X = w.y >= t.height / 2 ? "bottom" : "top";
if (!this.checkDirection(y)) return !1;
try {
if (this.flippingPage = this.app.getPageCollection().getFlippingPage(y), this.bottomPage = this.app.getPageCollection().getBottomPage(y), this.render.getOrientation() === "landscape") if (y === 1) {
const u = this.app.getPageCollection().nextBy(this.flippingPage);
u !== null && this.flippingPage.getDensity() !== u.getDensity() && (this.flippingPage.setDrawingDensity("hard"), u.setDrawingDensity("hard"));
} else {
const u = this.app.getPageCollection().prevBy(this.flippingPage);
u !== null && this.flippingPage.getDensity() !== u.getDensity() && (this.flippingPage.setDrawingDensity("hard"), u.setDrawingDensity("hard"));
}
return this.render.setDirection(y), this.calc = new G(y, X, t.pageWidth.toString(10), t.height.toString(10)), !0;
} catch {
return !1;
}
}
do(m) {
if (this.calc !== null && this.calc.calc(m)) {
const w = this.calc.getFlippingProgress();
this.bottomPage.setArea(this.calc.getBottomClipArea()), this.bottomPage.setPosition(this.calc.getBottomPagePosition()), this.bottomPage.setAngle(0), this.bottomPage.setHardAngle(0), this.flippingPage.setArea(this.calc.getFlippingClipArea()), this.flippingPage.setPosition(this.calc.getActiveCorner()), this.flippingPage.setAngle(this.calc.getAngle()), this.calc.getDirection() === 0 ? this.flippingPage.setHardAngle(90 * (200 - 2 * w) / 100) : this.flippingPage.setHardAngle(-90 * (200 - 2 * w) / 100), this.render.setPageRect(this.calc.getRect()), this.render.setBottomPage(this.bottomPage), this.render.setFlippingPage(this.flippingPage), this.render.setShadowData(this.calc.getShadowStartPoint(), this.calc.getShadowAngle(), w, this.calc.getDirection());
}
}
flipToPage(m, w) {
const t = this.app.getPageCollection().getCurrentSpreadIndex(), y = this.app.getPageCollection().getSpreadIndexByPage(m);
try {
y > t && (this.app.getPageCollection().setCurrentSpreadIndex(y - 1), this.flipNext(w)), y < t && (this.app.getPageCollection().setCurrentSpreadIndex(y + 1), this.flipPrev(w));
} catch {
}
}
flipNext(m) {
this.flip({ x: this.render.getRect().left + 2 * this.render.getRect().pageWidth - 10, y: m === "top" ? 1 : this.render.getRect().height - 2 });
}
flipPrev(m) {
this.flip({ x: 10, y: m === "top" ? 1 : this.render.getRect().height - 2 });
}
stopMove() {
if (this.calc === null) return;
const m = this.calc.getPosition(), w = this.getBoundsRect(), t = this.calc.getCorner() === "bottom" ? w.height : 0;
m.x <= 0 ? this.animateFlippingTo(m, { x: -w.pageWidth, y: t }, !0) : this.animateFlippingTo(m, { x: w.pageWidth, y: t }, !1);
}
showCorner(m) {
if (!this.checkState("read", "fold_corner")) return;
const w = this.getBoundsRect(), t = w.pageWidth;
if (this.isPointOnCorners(m)) if (this.calc === null) {
if (!this.start(m)) return;
this.setState("fold_corner"), this.calc.calc({ x: t - 1, y: 1 });
const y = 50, X = this.calc.getCorner() === "bottom" ? w.height - 1 : 1, u = this.calc.getCorner() === "bottom" ? w.height - y : y;
this.animateFlippingTo({ x: t - 1, y: X }, { x: t - y, y: u }, !1, !1);
} else this.do(this.render.convertToPage(m));
else this.setState("read"), this.render.finishAnimation(), this.stopMove();
}
animateFlippingTo(m, w, t, y = !0) {
const X = s.GetCordsFromTwoPoint(m, w), u = [];
for (const M of X) u.push(() => this.do(M));
const D = this.getAnimationDuration(X.length);
this.render.startAnimation(u, D, () => {
this.calc && (t && (this.calc.getDirection() === 1 ? this.app.turnToPrevPage() : this.app.turnToNextPage()), y && (this.render.setBottomPage(null), this.render.setFlippingPage(null), this.render.clearShadow(), this.setState("read"), this.reset()));
});
}
getCalculation() {
return this.calc;
}
getState() {
return this.state;
}
setState(m) {
this.state !== m && (this.app.updateState(m), this.state = m);
}
getDirectionByPoint(m) {
const w = this.getBoundsRect();
if (this.render.getOrientation() === "portrait") {
if (m.x - w.pageWidth <= w.width / 5) return 1;
} else if (m.x < w.width / 2) return 1;
return 0;
}
getAnimationDuration(m) {
const w = this.app.getSettings().flippingTime;
return m >= 1e3 ? w : m / 1e3 * w;
}
checkDirection(m) {
return m === 0 ? this.app.getCurrentPageIndex() < this.app.getPageCount() - 1 : this.app.getCurrentPageIndex() >= 1;
}
reset() {
this.calc = null, this.flippingPage = null, this.bottomPage = null;
}
getBoundsRect() {
return this.render.getRect();
}
checkState(...m) {
for (const w of m) if (this.state === w) return !0;
return !1;
}
isPointOnCorners(m) {
const w = this.getBoundsRect(), t = w.pageWidth, y = Math.sqrt(Math.pow(t, 2) + Math.pow(w.height, 2)) / 5, X = this.render.convertToBook(m);
return X.x > 0 && X.y > 0 && X.x < w.width && X.y < w.height && (X.x < y || X.x > w.width - y) && (X.y < y || X.y > w.height - y);
}
}
class o {
constructor(m, w) {
this.leftPage = null, this.rightPage = null, this.flippingPage = null, this.bottomPage = null, this.direction = null, this.orientation = null, this.shadow = null, this.animation = null, this.pageRect = null, this.boundsRect = null, this.timer = 0, this.safari = !1, this.setting = w, this.app = m;
const t = new RegExp("Version\\/[\\d\\.]+.*Safari/");
this.safari = t.exec(window.navigator.userAgent) !== null;
}
render(m) {
if (this.animation !== null) {
const w = Math.round((m - this.animation.startedAt) / this.animation.durationFrame);
w < this.animation.frames.length ? this.animation.frames[w]() : (this.animation.onAnimateEnd(), this.animation = null);
}
this.timer = m, this.drawFrame();
}
start() {
this.update();
const m = (w) => {
this.render(w), requestAnimationFrame(m);
};
requestAnimationFrame(m);
}
startAnimation(m, w, t) {
this.finishAnimation(), this.animation = { frames: m, duration: w, durationFrame: w / m.length, onAnimateEnd: t, startedAt: this.timer };
}
finishAnimation() {
this.animation !== null && (this.animation.frames[this.animation.frames.length - 1](), this.animation.onAnimateEnd !== null && this.animation.onAnimateEnd()), this.animation = null;
}
update() {
this.boundsRect = null;
const m = this.calculateBoundsRect();
this.orientation !== m && (this.orientation = m, this.app.updateOrientation(m));
}
calculateBoundsRect() {
let m = "landscape";
const w = this.getBlockWidth(), t = w / 2, y = this.getBlockHeight() / 2, X = this.setting.width / this.setting.height;
let u = this.setting.width, D = this.setting.height, M = t - u;
return this.setting.size === "stretch" ? (w < 2 * this.setting.minWidth && this.app.getSettings().usePortrait && (m = "portrait"), u = m === "portrait" ? this.getBlockWidth() : this.getBlockWidth() / 2, u > this.setting.maxWidth && (u = this.setting.maxWidth), D = u / X, D > this.getBlockHeight() && (D = this.getBlockHeight(), u = D * X), M = m === "portrait" ? t - u / 2 - u : t - u) : w < 2 * u && this.app.getSettings().usePortrait && (m = "portrait", M = t - u / 2 - u), this.boundsRect = { left: M, top: y - D / 2, width: 2 * u, height: D, pageWidth: u }, m;
}
setShadowData(m, w, t, y) {
if (!this.app.getSettings().drawShadow) return;
const X = 100 * this.getSettings().maxShadowOpacity;
this.shadow = { pos: m, angle: w, width: 3 * this.getRect().pageWidth / 4 * t / 100, opacity: (100 - t) * X / 100 / 100, direction: y, progress: 2 * t };
}
clearShadow() {
this.shadow = null;
}
getBlockWidth() {
return this.app.getUI().getDistElement().offsetWidth;
}
getBlockHeight() {
return this.app.getUI().getDistElement().offsetHeight;
}
getDirection() {
return this.direction;
}
getRect() {
return this.boundsRect === null && this.calculateBoundsRect(), this.boundsRect;
}
getSettings() {
return this.app.getSettings();
}
getOrientation() {
return this.orientation;
}
setPageRect(m) {
this.pageRect = m;
}
setDirection(m) {
this.direction = m;
}
setRightPage(m) {
m !== null && m.setOrientation(1), this.rightPage = m;
}
setLeftPage(m) {
m !== null && m.setOrientation(0), this.leftPage = m;
}
setBottomPage(m) {
m !== null && m.setOrientation(this.direction === 1 ? 0 : 1), this.bottomPage = m;
}
setFlippingPage(m) {
m !== null && m.setOrientation(this.direction === 0 && this.orientation !== "portrait" ? 0 : 1), this.flippingPage = m;
}
convertToBook(m) {
const w = this.getRect();
return { x: m.x - w.left, y: m.y - w.top };
}
isSafari() {
return this.safari;
}
convertToPage(m, w) {
w || (w = this.direction);
const t = this.getRect();
return { x: w === 0 ? m.x - t.left - t.width / 2 : t.width / 2 - m.x + t.left, y: m.y - t.top };
}
convertToGlobal(m, w) {
if (w || (w = this.direction), m == null) return null;
const t = this.getRect();
return { x: w === 0 ? m.x + t.left + t.width / 2 : t.width / 2 - m.x + t.left, y: m.y + t.top };
}
convertRectToGlobal(m, w) {
return w || (w = this.direction), { topLeft: this.convertToGlobal(m.topLeft, w), topRight: this.convertToGlobal(m.topRight, w), bottomLeft: this.convertToGlobal(m.bottomLeft, w), bottomRight: this.convertToGlobal(m.bottomRight, w) };
}
}
class h extends o {
constructor(m, w, t) {
super(m, w), this.canvas = t, this.ctx = t.getContext("2d");
}
getContext() {
return this.ctx;
}
reload() {
}
drawFrame() {
this.clear(), this.orientation !== "portrait" && this.leftPage != null && this.leftPage.simpleDraw(0), this.rightPage != null && this.rightPage.simpleDraw(1), this.bottomPage != null && this.bottomPage.draw(), this.drawBookShadow(), this.flippingPage != null && this.flippingPage.draw(), this.shadow != null && (this.drawOuterShadow(), this.drawInnerShadow());
const m = this.getRect();
this.orientation === "portrait" && (this.ctx.beginPath(), this.ctx.rect(m.left + m.pageWidth, m.top, m.width, m.height), this.ctx.clip());
}
drawBookShadow() {
const m = this.getRect();
this.ctx.save(), this.ctx.beginPath();
const w = m.width / 20;
this.ctx.rect(m.left, m.top, m.width, m.height);
const t = { x: m.left + m.width / 2 - w / 2, y: 0 };
this.ctx.translate(t.x, t.y);
const y = this.ctx.createLinearGradient(0, 0, w, 0);
y.addColorStop(0, "rgba(0, 0, 0, 0)"), y.addColorStop(0.4, "rgba(0, 0, 0, 0.2)"), y.addColorStop(0.49, "rgba(0, 0, 0, 0.1)"), y.addColorStop(0.5, "rgba(0, 0, 0, 0.5)"), y.addColorStop(0.51, "rgba(0, 0, 0, 0.4)"), y.addColorStop(1, "rgba(0, 0, 0, 0)"), this.ctx.clip(), this.ctx.fillStyle = y, this.ctx.fillRect(0, 0, w, 2 * m.height), this.ctx.restore();
}
drawOuterShadow() {
const m = this.getRect();
this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(m.left, m.top, m.width, m.height);
const w = this.convertToGlobal({ x: this.shadow.pos.x, y: this.shadow.pos.y });
this.ctx.translate(w.x, w.y), t