@sbseguros/design-system
Version:
A Vue 3 design system with Tailwind CSS and Lucide icons.
1,061 lines • 3.1 MB
JavaScript
var hW = Object.defineProperty;
var M0 = (b) => {
throw TypeError(b);
};
var YW = (b, I, g) => I in b ? hW(b, I, { enumerable: !0, configurable: !0, writable: !0, value: g }) : b[I] = g;
var K = (b, I, g) => YW(b, typeof I != "symbol" ? I + "" : I, g), FG = (b, I, g) => I.has(b) || M0("Cannot " + g);
var l = (b, I, g) => (FG(b, I, "read from private field"), g ? g.call(b) : I.get(b)), Y = (b, I, g) => I.has(b) ? M0("Cannot add the same private member more than once") : I instanceof WeakSet ? I.add(b) : I.set(b, g), o = (b, I, g, C) => (FG(b, I, "write to private field"), C ? C.call(b, g) : I.set(b, g), g), a = (b, I, g) => (FG(b, I, "access private method"), g);
var ig = (b, I, g, C) => ({
set _(A) {
o(b, I, A, g);
},
get _() {
return l(b, I, C);
}
});
import { defineComponent as Id, computed as NI, createElementBlock as dI, openBlock as AI, normalizeStyle as ac, normalizeClass as Bg, toDisplayString as WC, h as xG, createElementVNode as U, createVNode as ui, unref as Vc, Fragment as yd, renderList as UG, createBlock as Am, createCommentVNode as ml, resolveDynamicComponent as aW, Transition as VW, withCtx as NW, ref as qg, watch as zi, nextTick as Gc, onMounted as nW, onUnmounted as tW, createStaticVNode as eW } from "vue";
/*! berea-ui v0.0.20-beta-01 | (c) 2025 SBS Seguros Design System | MIT License | https://github.com/sbs-seguros-col/sbs-common-components */
const RW = /* @__PURE__ */ Id({
__name: "Button",
props: {
label: {},
primary: { type: Boolean, default: !1 },
size: {},
backgroundColor: {}
},
emits: ["click"],
setup(b, { emit: I }) {
const g = b, C = I, A = NI(() => ({
"storybook-button": !0,
"storybook-button--primary": g.primary,
"storybook-button--secondary": !g.primary,
[`storybook-button--${g.size || "medium"}`]: !0
})), i = NI(() => ({
backgroundColor: g.backgroundColor
})), Z = () => {
C("click", 1);
};
return (d, s) => (AI(), dI("button", {
type: "button",
class: Bg(A.value),
onClick: Z,
style: ac(i.value)
}, WC(d.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 D0 = (b) => b.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), yW = (b) => b.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(I, g, C) => C ? C.toUpperCase() : g.toLowerCase()
), XW = (b) => {
const I = yW(b);
return I.charAt(0).toUpperCase() + I.slice(1);
}, HW = (...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 bc = {
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 uW = ({ size: b, strokeWidth: I = 2, absoluteStrokeWidth: g, color: C, iconNode: A, name: i, class: Z, ...d }, { slots: s }) => xG(
"svg",
{
...bc,
width: b || bc.width,
height: b || bc.height,
stroke: C || bc.stroke,
"stroke-width": g ? Number(I) * 24 / Number(b) : I,
class: HW(
"lucide",
...i ? [`lucide-${D0(XW(i))}-icon`, `lucide-${D0(i)}`] : ["lucide-icon"]
),
...d
},
[...A.map((c) => xG(...c)), ...s.default ? [s.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 m0 = (b, I) => (g, { slots: C }) => xG(
uW,
{
...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 MW = m0("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 DW = m0("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 K0 = m0("chevron-right", [
["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
]), KW = { class: "h-6 w-6 flex p-[5px] justify-center items-center shrink-0" }, SW = { class: "text-sm font-medium underline text-grey-grey-900 font-inter" }, pW = { class: "inline-flex items-center gap-1 px-4 py-2 rounded bg-fill" }, FW = { class: "text-sm font-medium text-grey-grey-700 font-inter" }, lm = /* @__PURE__ */ Id({
__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 = NI(() => g.label), i = NI(() => g.page), Z = NI(() => g.width), d = NI(() => {
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));
}), s = () => {
console.log("Back button clicked"), C("back");
};
return (c, G) => (AI(), dI("div", {
class: Bg(`flex gap-6 w-[${Z.value}px]`)
}, [
U("button", {
onClick: s,
class: "flex items-center gap-1"
}, [
U("span", KW, [
ui(Vc(MW), { class: "w-[14px] h-[14px] shrink-0" })
]),
U("span", SW, WC(A.value), 1)
]),
U("div", pW, [
U("span", FW, WC(i.value), 1),
ui(Vc(K0), { class: "w-4 h-4 text-grey-grey-300" }),
(AI(!0), dI(yd, null, UG(d.value, (B, W) => (AI(), dI(yd, { key: B }, [
U("span", {
class: Bg({
"text-status-focus": W === d.value.length - 1,
// Último segmento activo
"text-grey-grey-700": W !== d.value.length - 1,
// Segmentos anteriores
"font-inter text-sm font-medium": !0
})
}, WC(B), 3),
W < d.value.length - 1 ? (AI(), Am(Vc(K0), {
key: 0,
class: "w-4 h-4 text-grey-grey-300"
})) : ml("", !0)
], 64))), 128))
])
], 2));
}
}), zW = ["src"], JW = { 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]" }, kW = { class: "self-stretch text-xl font-normal font-inter text-grey-grey-600" }, LW = /* @__PURE__ */ Id({
__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
}
},
emits: ["back"],
setup(b, { emit: I }) {
const g = b, C = I, A = NI(() => g.label), i = NI(() => g.width), Z = NI(() => g.path), d = NI(() => g.title), s = NI(() => g.description), c = NI(() => g.src), G = NI(() => g.page), B = NI(() => g.stretch), W = () => {
C("back");
};
return (h, N) => (AI(), dI("div", {
class: Bg([
"bg-grey-grey-100 w-full left-0 z-[99] absolute top-40 shrink-0 aspect-[18/5]",
B.value ? "h-[312px]" : "h-[400px]"
])
}, [
c.value ? (AI(), dI("img", {
key: 0,
src: c.value,
alt: "Profile Header",
class: "object-contain w-full h-full"
}, null, 8, zW)) : ml("", !0),
ui(lm, {
label: A.value,
width: i.value,
path: Z.value,
page: G.value,
class: "absolute top-10 left-[120px] z-[100]",
onBack: W
}, null, 8, ["label", "width", "path", "page"]),
U("div", {
class: Bg(["absolute left-[120px] flex flex-col w-[789px] h-[125px] items-start text-left gap-6", {
"top-[166px]": !B.value,
"top-[120px]": B.value
}])
}, [
U("span", JW, WC(d.value), 1),
U("span", kW, WC(s.value), 1)
], 2)
], 2));
}
}), TW = { class: "flex flex-col items-center justify-center w-full h-full" }, jW = ["onClick", "aria-expanded", "aria-controls"], QW = { class: "w-full h-8 selft-stretch" }, OW = { class: "flex items-center gap-2" }, xW = ["src"], UW = {
key: 0,
class: "w-6 h-6 shrink-0 aspect-[1/1]"
}, rW = {
key: 0,
class: "flex flex-col self-stretch gap-4 px-10 py-4"
}, vW = ["onClick"], EW = { class: "flex w-[158px] h-[22px] flex-col justify-center font-inter text-sm font-normal" }, PW = /* @__PURE__ */ Id({
__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))
)
},
activeForm: {
type: String,
required: !0
},
activeChild: {
type: Object,
default: null
}
},
emits: ["click", "child-click"],
setup(b, { emit: I }) {
const g = b, C = I, A = (B) => d.value === B.key && B.icon_active ? B.icon_active : B.icon, i = (B) => typeof B == "string", Z = NI(() => g.items), d = NI(() => g.activeForm), s = (B) => {
var h;
const W = ((h = g.activeChild) == null ? void 0 : h.parentKey) === B.key;
d.value === B.key && B.collapsed && !W ? C("click", "") : C("click", B.key);
}, c = (B, W) => {
d.value !== W.key && C("click", W.key), C("child-click", {
parentKey: W.key,
childKey: B.key
});
}, G = (B, W) => {
var h, N;
return ((h = g.activeChild) == null ? void 0 : h.parentKey) === W.key && ((N = g.activeChild) == null ? void 0 : N.childKey) === B.key;
};
return (B, W) => (AI(!0), dI(yd, null, UG(Z.value, (h) => (AI(), dI("div", TW, [
(AI(), dI("button", {
onClick: (N) => s(h),
key: h.key,
"aria-expanded": b.activeForm === h.key && h.collapsed,
"aria-controls": `submenu-${h.key}`,
class: Bg([
"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 === h.key ? "bg-status-focus" : "bg-bandn-white"
])
}, [
U("div", QW, [
U("div", OW, [
U("div", {
class: Bg([
"flex w-8 h-8 py-1 px-0.5 items-center justify-center shrink-0",
{
"text-grey-grey-900": d.value !== h.key,
"text-bandn-white": d.value === h.key
}
])
}, [
i(A(h)) ? (AI(), dI("img", {
key: 0,
src: A(h),
alt: "icon",
class: Bg(["object-contain w-8 h-8 shrink-0", {
"brightness-0 invert": d.value === h.key,
"opacity-100": d.value === h.key,
"opacity-70": d.value !== h.key
}])
}, null, 10, xW)) : (AI(), Am(aW(A(h)), {
key: 1,
class: "w-8 h-8 shrink-0"
}))
], 2),
U("span", {
class: Bg([
"flex-[1_0_0] font-inter text-lg font-semibold text-left",
{
"text-grey-grey-900": d.value !== h.key,
"text-bandn-white": d.value === h.key
}
])
}, WC(h.name), 3),
h.collapsed ? (AI(), dI("div", UW, [
ui(Vc(DW), {
class: Bg([
"transition-transform duration-200",
{
"text-bandn-white": d.value === h.key,
"text-grey-grey-900": d.value !== h.key,
"rotate-180": d.value === h.key
}
])
}, null, 8, ["class"])
])) : ml("", !0)
])
])
], 10, jW)),
ui(VW, {
name: "fade-slide",
mode: "out-in"
}, {
default: NW(() => [
U("div", {
class: Bg([
"overflow-hidden transition-all duration-500 w-[276px]",
b.activeForm === h.key && h.collapsed ? "max-h-[1000px]" : "max-h-0 hidden"
])
}, [
h.children && h.children.length ? (AI(), dI("div", rW, [
(AI(!0), dI(yd, null, UG(h.children, (N) => (AI(), dI("button", {
key: N.key,
onClick: (V) => c(N, h),
class: Bg(["flex w-[196px] py-1 text-left px-6 flex-col justify-center items-center border-b-2 border-solid", {
"text-status-focus border-b-status-focus ": G(
N,
h
),
"text-grey-grey-900 border-b-grey-grey-50": !G(
N,
h
)
}])
}, [
U("span", EW, WC(N.name), 1)
], 10, vW))), 128))
])) : ml("", !0)
], 2)
]),
_: 2
}, 1024)
]))), 256));
}
}), yG = (b, I) => {
const g = b.__vccOpts || b;
for (const [C, A] of I)
g[C] = A;
return g;
}, fW = /* @__PURE__ */ yG(PW, [["__scopeId", "data-v-c3bb137f"]]);
var Zd = { exports: {} }, _W = Zd.exports, S0;
function qW() {
return S0 || (S0 = 1, function(b, I) {
(function(g, C) {
C(I);
})(_W, 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, n) {
super(m, n), this.image = null, this.isLoad = !1, this.loadingAngle = 0, this.image = new Image(), this.image.src = w;
}
draw(m) {
const w = this.render.getContext(), n = this.render.convertToGlobal(this.state.position), R = this.render.getRect().pageWidth, X = this.render.getRect().height;
w.save(), w.translate(n.x, n.y), w.beginPath();
for (let u of this.state.area) u !== null && (u = this.render.convertToGlobal(u), w.lineTo(u.x - n.x, u.y - n.y));
w.rotate(this.state.angle), w.clip(), this.isLoad ? w.drawImage(this.image, 0, 0, R, X) : this.drawLoader(w, { x: 0, y: 0 }, R, X), w.restore();
}
simpleDraw(m) {
const w = this.render.getRect(), n = this.render.getContext(), R = w.pageWidth, X = w.height, u = m === 1 ? w.left + w.pageWidth : w.left, D = w.top;
this.isLoad ? n.drawImage(this.image, u, D, R, X) : this.drawLoader(n, { x: u, y: D }, R, X);
}
drawLoader(m, w, n, R) {
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, n - 1, R - 1), m.stroke(), m.fill();
const X = { x: w.x + n / 2, y: w.y + R / 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 n = 0; n < w.length; n++) if (m === w[n][0] || m === w[n][1]) return n;
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 n = m === 0 ? this.getSpread()[w + 1] : this.getSpread()[w - 1];
return n.length === 1 || m === 0 ? this.pages[n[0]] : this.pages[n[1]];
}
}
getBottomPage(m) {
const w = this.currentSpreadIndex;
if (this.render.getOrientation() === "portrait") return m === 0 ? this.pages[w + 1] : this.pages[w - 1];
{
const n = m === 0 ? this.getSpread()[w + 1] : this.getSpread()[w - 1];
return n.length === 1 ? this.pages[n[0]] : m === 0 ? this.pages[n[1]] : this.pages[n[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, n) {
super(m, w), this.imagesHref = n;
}
load() {
for (const m of this.imagesHref) {
const w = new A(this.render, m, "soft");
w.load(), this.pages.push(w);
}
this.createSpread();
}
}
class d {
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 d.GetDistanceBetweenTwoPoint(m[0], m[1]);
}
static GetAngleBetweenTwoLine(m, w) {
const n = m[0].y - m[1].y, R = w[0].y - w[1].y, X = m[1].x - m[0].x, u = w[1].x - w[0].x;
return Math.acos((n * R + X * u) / (Math.sqrt(n * n + X * X) * Math.sqrt(R * R + 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, n) {
return { x: m.x * Math.cos(n) + m.y * Math.sin(n) + w.x, y: m.y * Math.cos(n) - m.x * Math.sin(n) + w.y };
}
static LimitPointToCircle(m, w, n) {
if (d.GetDistanceBetweenTwoPoint(m, n) <= w) return n;
const R = m.x, X = m.y, u = n.x, D = n.y;
let M = Math.sqrt(Math.pow(w, 2) * Math.pow(R - u, 2) / (Math.pow(R - u, 2) + Math.pow(X - D, 2))) + R;
n.x < 0 && (M *= -1);
let S = (M - R) * (X - D) / (R - u) + X;
return R - u + X === 0 && (S = w), { x: M, y: S };
}
static GetIntersectBetweenTwoSegment(m, w, n) {
return d.PointInRect(m, d.GetIntersectBeetwenTwoLine(w, n));
}
static GetIntersectBeetwenTwoLine(m, w) {
const n = m[0].y - m[1].y, R = 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 = n * M - R * D, Q = X * M - u * D, x = -(D * u - M * X) / (n * u - R * X), $ = -(n * M - R * D) / (n * u - R * X);
if (isFinite(x) && isFinite($)) return { x, y: $ };
if (Math.abs(S - Q) < 0.1) throw new Error("Segment included");
return null;
}
static GetCordsFromTwoPoint(m, w) {
const n = Math.abs(m.x - w.x), R = Math.abs(m.y - w.y), X = Math.max(n, R), u = [m];
function D(M, S, Q, x, $) {
return S > M ? M + $ * (Q / x) : S < M ? M - $ * (Q / x) : M;
}
for (let M = 1; M <= X; M += 1) u.push({ x: D(m.x, w.x, n, X, M), y: D(m.y, w.y, R, X, M) });
return u;
}
}
class s extends C {
constructor(m, w, n) {
super(m, n), this.copiedElement = null, this.temporaryCopy = null, this.isLoad = !1, this.element = w, this.element.classList.add("stf__item"), this.element.classList.add("--" + n);
}
newTemporaryCopy() {
return this.nowDrawingDensity === "hard" ? this : (this.temporaryCopy === null && (this.copiedElement = this.element.cloneNode(!0), this.element.parentElement.appendChild(this.copiedElement), this.temporaryCopy = new s(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, n = this.render.convertToGlobal(this.state.position), R = 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: ${R}px;
height: ${X}px;
`;
w === "hard" ? this.drawHard(u) : this.drawSoft(n, u);
}
drawHard(m = "") {
const w = this.render.getRect().left + this.render.getRect().width / 2, n = this.state.hardDrawingAngle, R = 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(${n}deg);` : `transform-origin: 0 0;
transform: translate3d(${w}px, 0, 0) rotateY(${n}deg);`);
this.element.style.cssText = R;
}
drawSoft(m, w = "") {
let n = "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 = d.GetRotatedPoint(u, { x: 0, y: 0 }, this.state.angle), n += u.x + "px " + u.y + "px, ";
}
n = n.slice(0, -2), n += ")";
const R = w + `transform-origin: 0 0; clip-path: ${n}; -webkit-clip-path: ${n};` + (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 = R;
}
simpleDraw(m) {
const w = this.render.getRect(), n = w.pageWidth, R = 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: ${R}px;
left: ${X}px;
top: ${u}px;
width: ${n}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, n, R) {
super(m, w), this.element = n, this.pagesElement = R;
}
load() {
for (const m of this.pagesElement) {
const w = new s(this.render, m, m.dataset.density === "hard" ? "hard" : "soft");
w.load(), this.pages.push(w);
}
this.createSpread();
}
}
class G {
constructor(m, w, n, R) {
this.direction = m, this.corner = w, this.topIntersectPoint = null, this.sideIntersectPoint = null, this.bottomIntersectPoint = null, this.pageWidth = parseInt(n, 10), this.pageHeight = parseInt(R, 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 ? d.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 = d.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, n = this.corner === "bottom" ? this.pageHeight - m.y : m.y;
let R = 2 * Math.acos(w / Math.sqrt(n * n + w * w));
n < 0 && (R = -R);
const X = Math.PI - R;
if (!isFinite(R) || X >= 0 && X < 3e-3) throw new Error("The G point is too small");
return this.corner === "bottom" && (R = -R), R;
}
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 = d.GetIntersectBetweenTwoSegment(w, [m, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = d.GetIntersectBetweenTwoSegment(w, [m, this.rect.bottomLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = d.GetIntersectBetweenTwoSegment(w, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }])) : (this.topIntersectPoint = d.GetIntersectBetweenTwoSegment(w, [this.rect.topLeft, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = d.GetIntersectBetweenTwoSegment(w, [m, this.rect.topLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = d.GetIntersectBetweenTwoSegment(w, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }]));
}
checkPositionAtCenterLine(m, w, n) {
let R = m;
const X = d.LimitPointToCircle(w, this.pageWidth, R);
R !== X && (R = X, this.updateAngleAndGeometry(R));
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 = d.LimitPointToCircle(n, u, M);
S !== R && (R = S, this.updateAngleAndGeometry(R));
}
return R;
}
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 n = w.height / 10, R = this.calc.getCorner() === "bottom" ? w.height - n : n, X = this.calc.getCorner() === "bottom" ? w.height : 0;
this.calc.calc({ x: w.pageWidth - n, y: R }), this.animateFlippingTo({ x: w.pageWidth - n, y: R }, { x: -w.pageWidth, y: X }, !0);
}
start(m) {
this.reset();
const w = this.render.convertToBook(m), n = this.getBoundsRect(), R = this.getDirectionByPoint(w), X = w.y >= n.height / 2 ? "bottom" : "top";
if (!this.checkDirection(R)) return !1;
try {
if (this.flippingPage = this.app.getPageCollection().getFlippingPage(R), this.bottomPage = this.app.getPageCollection().getBottomPage(R), this.render.getOrientation() === "landscape") if (R === 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(R), this.calc = new G(R, X, n.pageWidth.toString(10), n.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 n = this.app.getPageCollection().getCurrentSpreadIndex(), R = this.app.getPageCollection().getSpreadIndexByPage(m);
try {
R > n && (this.app.getPageCollection().setCurrentSpreadIndex(R - 1), this.flipNext(w)), R < n && (this.app.getPageCollection().setCurrentSpreadIndex(R + 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(), n = this.calc.getCorner() === "bottom" ? w.height : 0;
m.x <= 0 ? this.animateFlippingTo(m, { x: -w.pageWidth, y: n }, !0) : this.animateFlippingTo(m, { x: w.pageWidth, y: n }, !1);
}
showCorner(m) {
if (!this.checkState("read", "fold_corner")) return;
const w = this.getBoundsRect(), n = w.pageWidth;
if (this.isPointOnCorners(m)) if (this.calc === null) {
if (!this.start(m)) return;
this.setState("fold_corner"), this.calc.calc({ x: n - 1, y: 1 });
const R = 50, X = this.calc.getCorner() === "bottom" ? w.height - 1 : 1, u = this.calc.getCorner() === "bottom" ? w.height - R : R;
this.animateFlippingTo({ x: n - 1, y: X }, { x: n - R, y: u }, !1, !1);
} else this.do(this.render.convertToPage(m));
else this.setState("read"), this.render.finishAnimation(), this.stopMove();
}
animateFlippingTo(m, w, n, R = !0) {
const X = d.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 && (n && (this.calc.getDirection() === 1 ? this.app.turnToPrevPage() : this.app.turnToNextPage()), R && (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(), n = w.pageWidth, R = Math.sqrt(Math.pow(n, 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 < R || X.x > w.width - R) && (X.y < R || X.y > w.height - R);
}
}
class W {
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 n = new RegExp("Version\\/[\\d\\.]+.*Safari/");
this.safari = n.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, n) {
this.finishAnimation(), this.animation = { frames: m, duration: w, durationFrame: w / m.length, onAnimateEnd: n, 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(), n = w / 2, R = this.getBlockHeight() / 2, X = this.setting.width / this.setting.height;
let u = this.setting.width, D = this.setting.height, M = n - 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" ? n - u / 2 - u : n - u) : w < 2 * u && this.app.getSettings().usePortrait && (m = "portrait", M = n - u / 2 - u), this.boundsRect = { left: M, top: R - D / 2, width: 2 * u, height: D, pageWidth: u }, m;
}
setShadowData(m, w, n, R) {
if (!this.app.getSettings().drawShadow) return;
const X = 100 * this.getSettings().maxShadowOpacity;
this.shadow = { pos: m, angle: w, width: 3 * this.getRect().pageWidth / 4 * n / 100, opacity: (100 - n) * X / 100 / 100, direction: R, progress: 2 * n };
}
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 n = this.getRect();
return { x: w === 0 ? m.x - n.left - n.width / 2 : n.width / 2 - m.x + n.left, y: m.y - n.top };
}
convertToGlobal(m, w) {
if (w || (w = this.direction), m == null) return null;
const n = this.getRect();
return { x: w === 0 ? m.x + n.left + n.width / 2 : n.width / 2 - m.x + n.left, y: m.y + n.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 W {
constructor(m, w, n) {
super(m, w), this.canvas = n, this.ctx = n.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 n = { x: m.left + m.width / 2 - w / 2, y: 0 };
this.ctx.translate(n.x, n.y);
const R = this.ctx.createLinearGradient(0, 0, w, 0);
R.addColorStop(0, "rgba(0, 0, 0, 0)"), R.addColorStop(0.4, "rgba(0, 0, 0, 0.2)"), R.addColorStop(0.49, "rgba(0, 0, 0, 0.1)"), R.addColorStop(0.5, "rgba(0, 0, 0, 0.5)"), R.addColorStop(0.51, "rgba(0, 0, 0, 0.4)"), R.addColorStop(1, "rgba(0, 0, 0, 0)"), this.ctx.clip(), this.ctx.fillStyle = R, 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), this.ctx.rotate(Math.PI + this.shadow.angle + Math.PI / 2);
const n = this.ctx.createLinearGradient(0, 0, this.shadow.width, 0);
this.shadow.direction === 0 ? (this.ctx.translate(0, -100), n.addColorStop(0, "rgba(0, 0, 0, " + this.shadow.opacity + ")"), n.addColorStop(1, "rgba(0, 0, 0, 0)")) : (this.ctx.translate(-this.shadow.width, -100), n.addColorStop(0, "rgba(0, 0, 0, 0)"), n.addColorStop(1, "rgba(0, 0, 0, " + this.shadow.opacity + ")")), this.ctx.clip(), this.ctx.fillStyle = n, this.ctx.fillRect(0, 0, this.shadow.width, 2 * m.height), this.ctx.restore();
}
drawInnerShadow() {
const m = this.getRect();
this.ctx.save(), this.ctx.beginPath();
const w = this.convertToGlobal({ x: this.shadow.pos.x, y: this.shadow.pos.y }), n = this.convertRectToGlobal(this.pageRect);
this.ctx.moveTo(n.topLeft.x, n.topLeft.y), this.ctx.lineTo(n.topRight.x, n.topRight.y), this.ctx.lineTo(n.bottomRight.x, n.bottomRight.y), this.ctx.lineTo(n.bottomLeft.x, n.bottomLeft.y), this.ctx.translate(w.x, w.y), this.ctx.rotate(Math.PI + this.shadow.angle + Math.PI / 2);
const R = 3 * this.shadow.width / 4, X = this.ctx.createLinearGradient(0, 0, R, 0);
this.shadow.direction === 0 ? (this.ctx.translate(-R, -100), X.addColorStop(1, "rgba(0, 0, 0, " + this.shadow.opacity + ")"), X.addColorStop(0.9, "rgba(0, 0, 0, 0.05)"), X.addColorStop(0.7