@sbseguros/design-system
Version:
A Vue 3 design system with Tailwind CSS and Lucide icons.
1,103 lines • 3.26 MB
JavaScript
var Jh = Object.defineProperty;
var xo = (b) => {
throw TypeError(b);
};
var kh = (b, I, g) => I in b ? Jh(b, I, { enumerable: !0, configurable: !0, writable: !0, value: g }) : b[I] = g;
var p = (b, I, g) => kh(b, typeof I != "symbol" ? I + "" : I, g), zb = (b, I, g) => I.has(b) || xo("Cannot " + g);
var l = (b, I, g) => (zb(b, I, "read from private field"), g ? g.call(b) : I.get(b)), a = (b, I, g) => I.has(b) ? xo("Cannot add the same private member more than once") : I instanceof WeakSet ? I.add(b) : I.set(b, g), W = (b, I, g, C) => (zb(b, I, "write to private field"), C ? C.call(b, g) : I.set(b, g), g), Y = (b, I, g) => (zb(b, I, "access private method"), g);
var EI = (b, I, g, C) => ({
set _(A) {
W(b, I, A, g);
},
get _() {
return l(b, I, C);
}
});
import { defineComponent as pg, computed as T, createElementBlock as P, openBlock as O, normalizeStyle as rd, normalizeClass as cI, toDisplayString as dI, h as Ub, createElementVNode as D, createVNode as MC, unref as hi, Fragment as ps, renderList as O0, createBlock as Yl, createCommentVNode as Zg, createTextVNode as ZZ, resolveDynamicComponent as Fs, Transition as v0, withCtx as NA, ref as Ug, watch as ni, nextTick as rs, onMounted as VB, onUnmounted as NB, createStaticVNode as Lh, withModifiers as XB, renderSlot as Xo, useAttrs as yB, mergeProps as yb, withDirectives as Th, withKeys as rh, vModelText as Qh } from "vue";
/*! berea-ui v0.0.67 | (c) 2025 SBS Seguros Design System | MIT License | https://github.com/sbs-seguros-col/sbs-common-components */
const jh = /* @__PURE__ */ pg({
__name: "Button",
props: {
label: {},
primary: { type: Boolean, default: !1 },
size: {},
backgroundColor: {}
},
emits: ["click"],
setup(b, { emit: I }) {
const g = b, C = I, A = T(() => ({
"storybook-button": !0,
"storybook-button--primary": g.primary,
"storybook-button--secondary": !g.primary,
[`storybook-button--${g.size || "medium"}`]: !0
})), i = T(() => ({
backgroundColor: g.backgroundColor
})), d = () => {
C("click", 1);
};
return (Z, s) => (O(), P("button", {
type: "button",
class: cI(A.value),
onClick: d,
style: rd(i.value)
}, dI(b.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 Uo = (b) => b.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), xh = (b) => b.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(I, g, C) => C ? C.toUpperCase() : g.toLowerCase()
), Uh = (b) => {
const I = xh(b);
return I.charAt(0).toUpperCase() + I.slice(1);
}, Oh = (...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 C0 = {
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 vh = ({ size: b, strokeWidth: I = 2, absoluteStrokeWidth: g, color: C, iconNode: A, name: i, class: d, ...Z }, { slots: s }) => Ub(
"svg",
{
...C0,
width: b || C0.width,
height: b || C0.height,
stroke: C || C0.stroke,
"stroke-width": g ? Number(I) * 24 / Number(b) : I,
class: Oh(
"lucide",
...i ? [`lucide-${Uo(Uh(i))}-icon`, `lucide-${Uo(i)}`] : ["lucide-icon"]
),
...Z
},
[...A.map((c) => Ub(...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 yo = (b, I) => (g, { slots: C }) => Ub(
vh,
{
...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 Eh = yo("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 RB = yo("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 Ob = yo("chevron-right", [
["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
]), Ph = { class: "h-6 w-6 flex p-[5px] justify-center items-center shrink-0" }, fh = { class: "text-sm font-medium leading-6 underline text-grey-grey-900 font-inter whitespace-nowrap" }, _h = { class: "flex items-center flex-grow min-w-0 gap-1 px-4 py-2 rounded bg-fill" }, qh = { class: "flex-shrink-0 text-sm font-medium leading-6 text-grey-grey-700 font-inter whitespace-nowrap" }, uB = /* @__PURE__ */ pg({
__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 = T(() => g.label), i = T(() => g.page), d = T(() => g.width), Z = T(() => {
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 = () => {
C("back");
};
return (c, G) => (O(), P("div", {
class: cI(["flex items-center gap-10", d.value])
}, [
D("button", {
onClick: s,
class: "flex items-center flex-shrink-0 gap-1"
}, [
D("span", Ph, [
MC(hi(Eh), { class: "w-6 h-6 shrink-0" })
]),
D("span", fh, dI(A.value), 1)
]),
D("div", _h, [
D("span", qh, dI(i.value), 1),
MC(hi(Ob), { class: "flex-shrink-0 w-4 h-4 text-grey-grey-300" }),
(O(!0), P(ps, null, O0(Z.value, (m, B) => (O(), P(ps, { key: m }, [
D("span", {
class: cI({
"text-status-focus": B === Z.value.length - 1,
// Último segmento activo
"text-grey-grey-700": B !== Z.value.length - 1,
// Segmentos anteriores
"font-inter text-sm font-medium leading-6 whitespace-nowrap flex-grow": B === Z.value.length - 1,
"font-inter text-sm font-medium leading-6 whitespace-nowrap flex-shrink-0": B !== Z.value.length - 1
})
}, dI(m), 3),
B < Z.value.length - 1 ? (O(), Yl(hi(Ob), {
key: 0,
class: "flex-shrink-0 w-4 h-4 text-grey-grey-300"
})) : Zg("", !0)
], 64))), 128))
])
], 2));
}
}), $h = { class: "self-stretch text-xl font-normal leading-[30px] font-inter text-grey-grey-600 mr-2" }, Iw = { class: "self-stretch text-sm font-bold font-inter leading-[30px] ml-2" }, gw = ["href"], Cw = /* @__PURE__ */ pg({
__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: ""
},
description_content: {
type: String,
default: ""
},
category: {
type: String,
default: ""
},
src: {
type: String,
default: ""
},
stretch: {
type: Boolean,
default: !1
},
contract: {
type: Boolean,
default: !1
},
products: {
type: Boolean,
default: !1
},
description_clausula: {
type: String,
default: ""
},
url_clausula: {
type: String,
default: ""
},
relative: {
type: Boolean,
default: !1
}
},
emits: ["back"],
setup(b, { emit: I }) {
const g = b, C = I, A = T(() => g.label), i = T(() => g.width), d = T(() => g.path), Z = T(() => g.title), s = T(() => g.description), c = T(() => g.description_content), G = T(() => g.category), m = T(() => g.src), B = T(() => g.page), w = T(() => g.stretch), e = T(() => g.contract), t = T(() => g.products), N = T(() => g.description_clausula), V = T(() => g.url_clausula), R = T(() => g.relative), X = () => {
C("back");
};
return (o, h) => (O(), P("div", {
class: cI([
"bg-grey-grey-100 w-full z-[99] shrink-0 aspect-[18/5] bg-cover bg-center bg-no-repeat",
w.value ? "h-[312px]" : "h-[400px]",
R.value ? "relative" : "absolute top-40 left-0"
]),
style: rd(m.value ? { backgroundImage: `url('${m.value}')` } : {})
}, [
MC(uB, {
label: A.value,
width: i.value,
path: d.value,
page: B.value,
class: "absolute top-10 left-[120px] z-[100]",
onBack: X
}, null, 8, ["label", "width", "path", "page"]),
D("div", {
class: cI(["absolute flex flex-col items-start text-left", {
"top-[166px] w-[789px] gap-4 h-[125px] left-[119.2px]": !w.value && !e.value && !t.value,
"top-[138px] w-[719px] gap-4 h-[125px] left-[119.2px]": e.value,
"top-[120px] w-[789px] gap-4 h-[125px] left-[119.2px]": w.value,
"top-[162px] w-[677px] gap-6 left-[130px]": t.value
}])
}, [
D("span", {
class: cI(["font-inter text-[42px] leading-[52px] font-extrabold flex flex-col justify-center self-stretch tracking-[-0.31px]", {
"bg-purple-purple-500 px-6 py-2 w-min text-grey-grey-50 h-[68px] rounded-lg": t.value,
"text-grey-grey-700 h-[40.5px]": !t.value
}])
}, dI(Z.value), 3),
D("span", $h, [
ZZ(dI(s.value) + " ", 1),
D("strong", null, dI(G.value), 1),
ZZ(" " + dI(c.value), 1)
]),
D("span", Iw, [
ZZ(dI(N.value) + " ", 1),
D("a", {
href: V.value,
target: "_blank",
rel: "noopener noreferrer"
}, dI(V.value), 9, gw)
])
], 2)
], 6));
}
}), Aw = { class: "flex flex-col w-full gap-8" }, lw = ["onClick", "aria-expanded", "aria-controls", "aria-label"], iw = { class: "self-stretch w-full h-8" }, dw = { class: "flex items-center gap-2" }, Zw = ["src"], sw = {
key: 0,
class: "w-6 h-6"
}, cw = ["id"], Gw = { class: "flex flex-col self-stretch gap-4 px-10 py-4" }, bw = ["onClick", "aria-label"], mw = /* @__PURE__ */ pg({
__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 = (B) => s.value === B.key && B.icon_active ? B.icon_active : B.icon, i = (B) => {
const w = A(B);
return typeof w == "string" ? w : void 0;
}, d = (B) => typeof B == "string", Z = T(() => g.items), s = T(() => g.activeForm), c = (B) => {
var e;
const w = ((e = g.activeChild) == null ? void 0 : e.parentKey) === B.key;
s.value === B.key && B.collapsed && !w ? C("click", "") : C("click", B.key);
}, G = (B, w) => {
s.value !== w.key && C("click", w.key), C("child-click", {
parentKey: w.key,
childKey: B.key
});
}, m = (B, w) => {
var e, t;
return ((e = g.activeChild) == null ? void 0 : e.parentKey) === w.key && ((t = g.activeChild) == null ? void 0 : t.childKey) === B.key;
};
return (B, w) => (O(), P("div", Aw, [
(O(!0), P(ps, null, O0(Z.value, (e) => (O(), P("div", {
key: e.key,
class: "flex flex-col items-center justify-center w-full h-full"
}, [
D("button", {
type: "button",
onClick: (t) => c(e),
"aria-expanded": b.activeForm === e.key && e.collapsed,
"aria-controls": `submenu-${e.key}`,
"aria-label": `Toggle ${e.name} menu`,
class: cI([
"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)]",
s.value === e.key ? "bg-status-focus" : "bg-bandn-white"
])
}, [
D("div", iw, [
D("div", dw, [
D("div", {
class: cI([
"flex w-8 h-8 py-1 px-0.5 items-center justify-center",
{
"text-grey-grey-900": s.value !== e.key,
"text-bandn-white": s.value === e.key
}
])
}, [
d(A(e)) ? (O(), P("img", {
key: 0,
src: i(e),
alt: "",
class: cI([
"object-contain w-8 h-8",
{
"brightness-0 invert": s.value === e.key,
"opacity-100": s.value === e.key,
"opacity-70": s.value !== e.key
}
])
}, null, 10, Zw)) : (O(), Yl(Fs(A(e)), {
key: 1,
class: cI(["w-8 h-8", {
"text-grey-grey-900": s.value !== e.key,
"text-bandn-white": s.value === e.key
}])
}, null, 8, ["class"]))
], 2),
D("span", {
class: cI([
"flex-[1_0_0] font-inter text-lg font-semibold text-left",
{
"text-grey-grey-900": s.value !== e.key,
"text-bandn-white": s.value === e.key
}
])
}, dI(e.name), 3),
e.collapsed ? (O(), P("div", sw, [
MC(hi(RB), {
class: cI([
"transition-transform duration-200",
{
"text-bandn-white": s.value === e.key,
"text-grey-grey-900": s.value !== e.key,
"rotate-180": s.value === e.key && e.collapsed
}
])
}, null, 8, ["class"])
])) : Zg("", !0)
])
])
], 10, lw),
MC(v0, {
name: "fade-slide",
mode: "out-in"
}, {
default: NA(() => [
e.children && e.children.length ? (O(), P("div", {
key: 0,
id: `submenu-${e.key}`,
class: cI([
"overflow-hidden transition-all duration-500 w-[276px]",
b.activeForm === e.key && e.collapsed ? "max-h-[500px]" : "max-h-0"
])
}, [
D("div", Gw, [
(O(!0), P(ps, null, O0(e.children, (t) => (O(), P("button", {
type: "button",
key: t.key,
onClick: (N) => G(t, e),
"aria-label": t.name,
class: cI([
"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": m(
t,
e
),
"text-grey-grey-900 border-grey-grey-50": !m(
t,
e
)
}
])
}, [
D("span", {
class: cI(["flex w-[158px] min-h-[22px] flex-col justify-center font-inter text-sm leading-[22px]", {
"font-semibold": m(t, e),
"font-normal": !m(t, e)
}])
}, dI(t.name), 3)
], 10, bw))), 128))
])
], 10, cw)) : Zg("", !0)
]),
_: 2
}, 1024)
]))), 128))
]));
}
}), fC = (b, I) => {
const g = b.__vccOpts || b;
for (const [C, A] of I)
g[C] = A;
return g;
}, ow = /* @__PURE__ */ fC(mw, [["__scopeId", "data-v-62b8d769"]]);
var Qs = { exports: {} }, Bw = Qs.exports, Oo;
function Ww() {
return Oo || (Oo = 1, (function(b, I) {
(function(g, C) {
C(I);
})(Bw, (function(g) {
class C {
constructor(o, h) {
this.state = { angle: 0, area: [], position: { x: 0, y: 0 }, hardAngle: 0, hardDrawingAngle: 0 }, this.createdDensity = h, this.nowDrawingDensity = this.createdDensity, this.render = o;
}
setDensity(o) {
this.createdDensity = o, this.nowDrawingDensity = o;
}
setDrawingDensity(o) {
this.nowDrawingDensity = o;
}
setPosition(o) {
this.state.position = o;
}
setAngle(o) {
this.state.angle = o;
}
setArea(o) {
this.state.area = o;
}
setHardDrawingAngle(o) {
this.state.hardDrawingAngle = o;
}
setHardAngle(o) {
this.state.hardAngle = o, this.state.hardDrawingAngle = o;
}
setOrientation(o) {
this.orientation = o;
}
getDrawingDensity() {
return this.nowDrawingDensity;
}
getDensity() {
return this.createdDensity;
}
getHardAngle() {
return this.state.hardAngle;
}
}
class A extends C {
constructor(o, h, n) {
super(o, n), this.image = null, this.isLoad = !1, this.loadingAngle = 0, this.image = new Image(), this.image.src = h;
}
draw(o) {
const h = this.render.getContext(), n = this.render.convertToGlobal(this.state.position), y = this.render.getRect().pageWidth, u = this.render.getRect().height;
h.save(), h.translate(n.x, n.y), h.beginPath();
for (let H of this.state.area) H !== null && (H = this.render.convertToGlobal(H), h.lineTo(H.x - n.x, H.y - n.y));
h.rotate(this.state.angle), h.clip(), this.isLoad ? h.drawImage(this.image, 0, 0, y, u) : this.drawLoader(h, { x: 0, y: 0 }, y, u), h.restore();
}
simpleDraw(o) {
const h = this.render.getRect(), n = this.render.getContext(), y = h.pageWidth, u = h.height, H = o === 1 ? h.left + h.pageWidth : h.left, K = h.top;
this.isLoad ? n.drawImage(this.image, H, K, y, u) : this.drawLoader(n, { x: H, y: K }, y, u);
}
drawLoader(o, h, n, y) {
o.beginPath(), o.strokeStyle = "rgb(200, 200, 200)", o.fillStyle = "rgb(255, 255, 255)", o.lineWidth = 1, o.rect(h.x + 1, h.y + 1, n - 1, y - 1), o.stroke(), o.fill();
const u = { x: h.x + n / 2, y: h.y + y / 2 };
o.beginPath(), o.lineWidth = 10, o.arc(u.x, u.y, 20, this.loadingAngle, 3 * Math.PI / 2 + this.loadingAngle), o.stroke(), o.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(o, h) {
this.pages = [], this.currentPageIndex = 0, this.currentSpreadIndex = 0, this.landscapeSpread = [], this.portraitSpread = [], this.render = h, this.app = o, this.currentPageIndex = 0, this.isShowCover = this.app.getSettings().showCover;
}
destroy() {
this.pages = [];
}
createSpread() {
this.landscapeSpread = [], this.portraitSpread = [];
for (let h = 0; h < this.pages.length; h++) this.portraitSpread.push([h]);
let o = 0;
this.isShowCover && (this.pages[0].setDensity("hard"), this.landscapeSpread.push([o]), o++);
for (let h = o; h < this.pages.length; h += 2) h < this.pages.length - 1 ? this.landscapeSpread.push([h, h + 1]) : (this.landscapeSpread.push([h]), this.pages[h].setDensity("hard"));
}
getSpread() {
return this.render.getOrientation() === "landscape" ? this.landscapeSpread : this.portraitSpread;
}
getSpreadIndexByPage(o) {
const h = this.getSpread();
for (let n = 0; n < h.length; n++) if (o === h[n][0] || o === h[n][1]) return n;
return null;
}
getPageCount() {
return this.pages.length;
}
getPages() {
return this.pages;
}
getPage(o) {
if (o >= 0 && o < this.pages.length) return this.pages[o];
throw new Error("Invalid page number");
}
nextBy(o) {
const h = this.pages.indexOf(o);
return h < this.pages.length - 1 ? this.pages[h + 1] : null;
}
prevBy(o) {
const h = this.pages.indexOf(o);
return h > 0 ? this.pages[h - 1] : null;
}
getFlippingPage(o) {
const h = this.currentSpreadIndex;
if (this.render.getOrientation() === "portrait") return o === 0 ? this.pages[h].newTemporaryCopy() : this.pages[h - 1];
{
const n = o === 0 ? this.getSpread()[h + 1] : this.getSpread()[h - 1];
return n.length === 1 || o === 0 ? this.pages[n[0]] : this.pages[n[1]];
}
}
getBottomPage(o) {
const h = this.currentSpreadIndex;
if (this.render.getOrientation() === "portrait") return o === 0 ? this.pages[h + 1] : this.pages[h - 1];
{
const n = o === 0 ? this.getSpread()[h + 1] : this.getSpread()[h - 1];
return n.length === 1 ? this.pages[n[0]] : o === 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(o = null) {
if (o === null && (o = this.currentPageIndex), o < 0 || o >= this.pages.length) return;
const h = this.getSpreadIndexByPage(o);
h !== null && (this.currentSpreadIndex = h, this.showSpread());
}
getCurrentSpreadIndex() {
return this.currentSpreadIndex;
}
setCurrentSpreadIndex(o) {
if (!(o >= 0 && o < this.getSpread().length)) throw new Error("Invalid page");
this.currentSpreadIndex = o;
}
showSpread() {
const o = this.getSpread()[this.currentSpreadIndex];
o.length === 2 ? (this.render.setLeftPage(this.pages[o[0]]), this.render.setRightPage(this.pages[o[1]])) : this.render.getOrientation() === "landscape" && o[0] === this.pages.length - 1 ? (this.render.setLeftPage(this.pages[o[0]]), this.render.setRightPage(null)) : (this.render.setLeftPage(null), this.render.setRightPage(this.pages[o[0]])), this.currentPageIndex = o[0], this.app.updatePageIndex(this.currentPageIndex);
}
}
class d extends i {
constructor(o, h, n) {
super(o, h), this.imagesHref = n;
}
load() {
for (const o of this.imagesHref) {
const h = new A(this.render, o, "soft");
h.load(), this.pages.push(h);
}
this.createSpread();
}
}
class Z {
static GetDistanceBetweenTwoPoint(o, h) {
return o === null || h === null ? 1 / 0 : Math.sqrt(Math.pow(h.x - o.x, 2) + Math.pow(h.y - o.y, 2));
}
static GetSegmentLength(o) {
return Z.GetDistanceBetweenTwoPoint(o[0], o[1]);
}
static GetAngleBetweenTwoLine(o, h) {
const n = o[0].y - o[1].y, y = h[0].y - h[1].y, u = o[1].x - o[0].x, H = h[1].x - h[0].x;
return Math.acos((n * y + u * H) / (Math.sqrt(n * n + u * u) * Math.sqrt(y * y + H * H)));
}
static PointInRect(o, h) {
return h === null ? null : h.x >= o.left && h.x <= o.width + o.left && h.y >= o.top && h.y <= o.top + o.height ? h : null;
}
static GetRotatedPoint(o, h, n) {
return { x: o.x * Math.cos(n) + o.y * Math.sin(n) + h.x, y: o.y * Math.cos(n) - o.x * Math.sin(n) + h.y };
}
static LimitPointToCircle(o, h, n) {
if (Z.GetDistanceBetweenTwoPoint(o, n) <= h) return n;
const y = o.x, u = o.y, H = n.x, K = n.y;
let M = Math.sqrt(Math.pow(h, 2) * Math.pow(y - H, 2) / (Math.pow(y - H, 2) + Math.pow(u - K, 2))) + y;
n.x < 0 && (M *= -1);
let S = (M - y) * (u - K) / (y - H) + u;
return y - H + u === 0 && (S = h), { x: M, y: S };
}
static GetIntersectBetweenTwoSegment(o, h, n) {
return Z.PointInRect(o, Z.GetIntersectBeetwenTwoLine(h, n));
}
static GetIntersectBeetwenTwoLine(o, h) {
const n = o[0].y - o[1].y, y = h[0].y - h[1].y, u = o[1].x - o[0].x, H = h[1].x - h[0].x, K = o[0].x * o[1].y - o[1].x * o[0].y, M = h[0].x * h[1].y - h[1].x * h[0].y, S = n * M - y * K, J = u * M - H * K, j = -(K * H - M * u) / (n * H - y * u), v = -(n * M - y * K) / (n * H - y * u);
if (isFinite(j) && isFinite(v)) return { x: j, y: v };
if (Math.abs(S - J) < 0.1) throw new Error("Segment included");
return null;
}
static GetCordsFromTwoPoint(o, h) {
const n = Math.abs(o.x - h.x), y = Math.abs(o.y - h.y), u = Math.max(n, y), H = [o];
function K(M, S, J, j, v) {
return S > M ? M + v * (J / j) : S < M ? M - v * (J / j) : M;
}
for (let M = 1; M <= u; M += 1) H.push({ x: K(o.x, h.x, n, u, M), y: K(o.y, h.y, y, u, M) });
return H;
}
}
class s extends C {
constructor(o, h, n) {
super(o, n), this.copiedElement = null, this.temporaryCopy = null, this.isLoad = !1, this.element = h, 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(o) {
const h = o || this.nowDrawingDensity, n = this.render.convertToGlobal(this.state.position), y = this.render.getRect().pageWidth, u = this.render.getRect().height;
this.element.classList.remove("--simple");
const H = `
display: block;
z-index: ${this.element.style.zIndex};
left: 0;
top: 0;
width: ${y}px;
height: ${u}px;
`;
h === "hard" ? this.drawHard(H) : this.drawSoft(n, H);
}
drawHard(o = "") {
const h = this.render.getRect().left + this.render.getRect().width / 2, n = this.state.hardDrawingAngle, y = o + `
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(${h}px, 0, 0) rotateY(${n}deg);`);
this.element.style.cssText = y;
}
drawSoft(o, h = "") {
let n = "polygon( ";
for (const u of this.state.area) if (u !== null) {
let H = this.render.getDirection() === 1 ? { x: -u.x + this.state.position.x, y: u.y - this.state.position.y } : { x: u.x - this.state.position.x, y: u.y - this.state.position.y };
H = Z.GetRotatedPoint(H, { x: 0, y: 0 }, this.state.angle), n += H.x + "px " + H.y + "px, ";
}
n = n.slice(0, -2), n += ")";
const y = h + `transform-origin: 0 0; clip-path: ${n}; -webkit-clip-path: ${n};` + (this.render.isSafari() && this.state.angle === 0 ? `transform: translate(${o.x}px, ${o.y}px);` : `transform: translate3d(${o.x}px, ${o.y}px, 0) rotate(${this.state.angle}rad);`);
this.element.style.cssText = y;
}
simpleDraw(o) {
const h = this.render.getRect(), n = h.pageWidth, y = h.height, u = o === 1 ? h.left + h.pageWidth : h.left, H = h.top;
this.element.classList.add("--simple"), this.element.style.cssText = `
position: absolute;
display: block;
height: ${y}px;
left: ${u}px;
top: ${H}px;
width: ${n}px;
z-index: ${this.render.getSettings().startZIndex + 1};`;
}
getElement() {
return this.element;
}
load() {
this.isLoad = !0;
}
setOrientation(o) {
super.setOrientation(o), this.element.classList.remove("--left", "--right"), this.element.classList.add(o === 1 ? "--right" : "--left");
}
setDrawingDensity(o) {
this.element.classList.remove("--soft", "--hard"), this.element.classList.add("--" + o), super.setDrawingDensity(o);
}
}
class c extends i {
constructor(o, h, n, y) {
super(o, h), this.element = n, this.pagesElement = y;
}
load() {
for (const o of this.pagesElement) {
const h = new s(this.render, o, o.dataset.density === "hard" ? "hard" : "soft");
h.load(), this.pages.push(h);
}
this.createSpread();
}
}
class G {
constructor(o, h, n, y) {
this.direction = o, this.corner = h, this.topIntersectPoint = null, this.sideIntersectPoint = null, this.bottomIntersectPoint = null, this.pageWidth = parseInt(n, 10), this.pageHeight = parseInt(y, 10);
}
calc(o) {
try {
return this.position = this.calcAngleAndPosition(o), this.calculateIntersectPoint(this.position), !0;
} catch {
return !1;
}
}
getFlippingClipArea() {
const o = [];
let h = !1;
return o.push(this.rect.topLeft), o.push(this.topIntersectPoint), this.sideIntersectPoint === null ? h = !0 : (o.push(this.sideIntersectPoint), this.bottomIntersectPoint === null && (h = !1)), o.push(this.bottomIntersectPoint), (h || this.corner === "bottom") && o.push(this.rect.bottomLeft), o;
}
getBottomClipArea() {
const o = [];
return o.push(this.topIntersectPoint), this.corner === "top" ? o.push({ x: this.pageWidth, y: 0 }) : (this.topIntersectPoint !== null && o.push({ x: this.pageWidth, y: 0 }), o.push({ x: this.pageWidth, y: this.pageHeight })), this.sideIntersectPoint !== null ? Z.GetDistanceBetweenTwoPoint(this.sideIntersectPoint, this.topIntersectPoint) >= 10 && o.push(this.sideIntersectPoint) : this.corner === "top" && o.push({ x: this.pageWidth, y: this.pageHeight }), o.push(this.bottomIntersectPoint), o.push(this.topIntersectPoint), o;
}
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 o = Z.GetAngleBetweenTwoLine(this.getSegmentToShadowLine(), [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]);
return this.direction === 0 ? o : Math.PI - o;
}
calcAngleAndPosition(o) {
let h = o;
if (this.updateAngleAndGeometry(h), h = this.corner === "top" ? this.checkPositionAtCenterLine(h, { x: 0, y: 0 }, { x: 0, y: this.pageHeight }) : this.checkPositionAtCenterLine(h, { x: 0, y: this.pageHeight }, { x: 0, y: 0 }), Math.abs(h.x - this.pageWidth) < 1 && Math.abs(h.y) < 1) throw new Error("Point is too small");
return h;
}
updateAngleAndGeometry(o) {
this.angle = this.calculateAngle(o), this.rect = this.getPageRect(o);
}
calculateAngle(o) {
const h = this.pageWidth - o.x + 1, n = this.corner === "bottom" ? this.pageHeight - o.y : o.y;
let y = 2 * Math.acos(h / Math.sqrt(n * n + h * h));
n < 0 && (y = -y);
const u = Math.PI - y;
if (!isFinite(y) || u >= 0 && u < 3e-3) throw new Error("The G point is too small");
return this.corner === "bottom" && (y = -y), y;
}
getPageRect(o) {
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 }], o) : this.getRectFromBasePoint([{ x: 0, y: -this.pageHeight }, { x: this.pageWidth, y: -this.pageHeight }, { x: 0, y: 0 }, { x: this.pageWidth, y: 0 }], o);
}
getRectFromBasePoint(o, h) {
return { topLeft: this.getRotatedPoint(o[0], h), topRight: this.getRotatedPoint(o[1], h), bottomLeft: this.getRotatedPoint(o[2], h), bottomRight: this.getRotatedPoint(o[3], h) };
}
getRotatedPoint(o, h) {
return { x: o.x * Math.cos(this.angle) + o.y * Math.sin(this.angle) + h.x, y: o.y * Math.cos(this.angle) - o.x * Math.sin(this.angle) + h.y };
}
calculateIntersectPoint(o) {
const h = { left: -1, top: -1, width: this.pageWidth + 2, height: this.pageHeight + 2 };
this.corner === "top" ? (this.topIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [o, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [o, this.rect.bottomLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }])) : (this.topIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [this.rect.topLeft, this.rect.topRight], [{ x: 0, y: 0 }, { x: this.pageWidth, y: 0 }]), this.sideIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [o, this.rect.topLeft], [{ x: this.pageWidth, y: 0 }, { x: this.pageWidth, y: this.pageHeight }]), this.bottomIntersectPoint = Z.GetIntersectBetweenTwoSegment(h, [this.rect.bottomLeft, this.rect.bottomRight], [{ x: 0, y: this.pageHeight }, { x: this.pageWidth, y: this.pageHeight }]));
}
checkPositionAtCenterLine(o, h, n) {
let y = o;
const u = Z.LimitPointToCircle(h, this.pageWidth, y);
y !== u && (y = u, this.updateAngleAndGeometry(y));
const H = Math.sqrt(Math.pow(this.pageWidth, 2) + Math.pow(this.pageHeight, 2));
let K = this.rect.bottomRight, M = this.rect.topLeft;
if (this.corner === "bottom" && (K = this.rect.topRight, M = this.rect.bottomLeft), K.x <= 0) {
const S = Z.LimitPointToCircle(n, H, M);
S !== y && (y = S, this.updateAngleAndGeometry(y));
}
return y;
}
getSegmentToShadowLine() {
const o = this.getShadowStartPoint();
return [o, o !== this.sideIntersectPoint && this.sideIntersectPoint !== null ? this.sideIntersectPoint : this.bottomIntersectPoint];
}
}
class m {
constructor(o, h) {
this.flippingPage = null, this.bottomPage = null, this.calc = null, this.state = "read", this.render = o, this.app = h;
}
fold(o) {
this.setState("user_fold"), this.calc === null && this.start(o), this.do(this.render.convertToPage(o));
}
flip(o) {
if (this.app.getSettings().disableFlipByClick && !this.isPointOnCorners(o) || (this.calc !== null && this.render.finishAnimation(), !this.start(o))) return;
const h = this.getBoundsRect();
this.setState("flipping");
const n = h.height / 10, y = this.calc.getCorner() === "bottom" ? h.height - n : n, u = this.calc.getCorner() === "bottom" ? h.height : 0;
this.calc.calc({ x: h.pageWidth - n, y }), this.animateFlippingTo({ x: h.pageWidth - n, y }, { x: -h.pageWidth, y: u }, !0);
}
start(o) {
this.reset();
const h = this.render.convertToBook(o), n = this.getBoundsRect(), y = this.getDirectionByPoint(h), u = h.y >= n.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 H = this.app.getPageCollection().nextBy(this.flippingPage);
H !== null && this.flippingPage.getDensity() !== H.getDensity() && (this.flippingPage.setDrawingDensity("hard"), H.setDrawingDensity("hard"));
} else {
const H = this.app.getPageCollection().prevBy(this.flippingPage);
H !== null && this.flippingPage.getDensity() !== H.getDensity() && (this.flippingPage.setDrawingDensity("hard"), H.setDrawingDensity("hard"));
}
return this.render.setDirection(y), this.calc = new G(y, u, n.pageWidth.toString(10), n.height.toString(10)), !0;
} catch {
return !1;
}
}
do(o) {
if (this.calc !== null && this.calc.calc(o)) {
const h = 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 * h) / 100) : this.flippingPage.setHardAngle(-90 * (200 - 2 * h) / 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(), h, this.calc.getDirection());
}
}
flipToPage(o, h) {
const n = this.app.getPageCollection().getCurrentSpreadIndex(), y = this.app.getPageCollection().getSpreadIndexByPage(o);
try {
y > n && (this.app.getPageCollection().setCurrentSpreadIndex(y - 1), this.flipNext(h)), y < n && (this.app.getPageCollection().setCurrentSpreadIndex(y + 1), this.flipPrev(h));
} catch {
}
}
flipNext(o) {
this.flip({ x: this.render.getRect().left + 2 * this.render.getRect().pageWidth - 10, y: o === "top" ? 1 : this.render.getRect().height - 2 });
}
flipPrev(o) {
this.flip({ x: 10, y: o === "top" ? 1 : this.render.getRect().height - 2 });
}
stopMove() {
if (this.calc === null) return;
const o = this.calc.getPosition(), h = this.getBoundsRect(), n = this.calc.getCorner() === "bottom" ? h.height : 0;
o.x <= 0 ? this.animateFlippingTo(o, { x: -h.pageWidth, y: n }, !0) : this.animateFlippingTo(o, { x: h.pageWidth, y: n }, !1);
}
showCorner(o) {
if (!this.checkState("read", "fold_corner")) return;
const h = this.getBoundsRect(), n = h.pageWidth;
if (this.isPointOnCorners(o)) if (this.calc === null) {
if (!this.start(o)) return;
this.setState("fold_corner"), this.calc.calc({ x: n - 1, y: 1 });
const y = 50, u = this.calc.getCorner() === "bottom" ? h.height - 1 : 1, H = this.calc.getCorner() === "bottom" ? h.height - y : y;
this.animateFlippingTo({ x: n - 1, y: u }, { x: n - y, y: H }, !1, !1);
} else this.do(this.render.convertToPage(o));
else this.setState("read"), this.render.finishAnimation(), this.stopMove();
}
animateFlippingTo(o, h, n, y = !0) {
const u = Z.GetCordsFromTwoPoint(o, h), H = [];
for (const M of u) H.push(() => this.do(M));
const K = this.getAnimationDuration(u.length);
this.render.startAnimation(H, K, () => {
this.calc && (n && (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(o) {
this.state !== o && (this.app.updateState(o), this.state = o);
}
getDirectionByPoint(o) {
const h = this.getBoundsRect();
if (this.render.getOrientation() === "portrait") {
if (o.x - h.pageWidth <= h.width / 5) return 1;
} else if (o.x < h.width / 2) return 1;
return 0;
}
getAnimationDuration(o) {
const h = this.app.getSettings().flippingTime;
return o >= 1e3 ? h : o / 1e3 * h;
}
checkDirection(o) {
return o === 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(...o) {
for (const h of o) if (this.state === h) return !0;
return !1;
}
isPointOnCorners(o) {
const h = this.getBoundsRect(), n = h.pageWidth, y = Math.sqrt(Math.pow(n, 2) + Math.pow(h.height, 2)) / 5, u = this.render.convertToBook(o);
return u.x > 0 && u.y > 0 && u.x < h.width && u.y < h.height && (u.x < y || u.x > h.width - y) && (u.y < y || u.y > h.height - y);
}
}
class B {
constructor(o, h) {
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 = h, this.app = o;
const n = new RegExp("Version\\/[\\d\\.]+.*Safari/");
this.safari = n.exec(window.navigator.userAgent) !== null;
}
render(o) {
if (this.animation !== null) {
const h = Math.round((o - this.animation.startedAt) / this.animation.durationFrame);
h < this.animation.frames.length ? this.animation.frames[h]() : (this.animation.onAnimateEnd(), this.animation = null);
}
this.timer = o, this.drawFrame();
}
start() {
this.update();
const o = (h) => {
this.render(h), requestAnimationFrame(o);
};
requestAnimationFrame(o);
}
startAnimation(o, h, n) {
this.finishAnimation(), this.animation = { frames: o, duration: h, durationFrame: h / o.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 o = this.calculateBoundsRect();
this.orientation !== o && (this.orientation = o, this.app.updateOrientation(o));
}
calculateBoundsRect() {
let o = "landscape";
const h = this.getBlockWidth(), n = h / 2, y = this.getBlockHeight() / 2, u = this.setting.width / this.setting.height;
let H = this.setting.width, K = this.setting.height, M = n - H;
return this.setting.size === "stretch" ? (h < 2 * this.setting.minWidth && this.app.getSettings().usePortrait && (o = "portrait"), H = o === "portrait" ? this.getBlockWidth() : this.getBlockWidth() / 2, H > this.setting.maxWidth && (H = this.setting.maxWidth), K = H / u, K > this.getBlockHeight() && (K = this.getBlockHeight(), H = K * u), M = o === "portrait" ? n - H / 2 - H : n - H) : h < 2 * H && this.app.getSettings().usePortrait && (o = "portrait", M = n - H / 2 - H), this.boundsRect = { left: M, top: y - K / 2, width: 2 * H, height: K, pageWidth: H }, o;
}
setShadowData(o, h, n, y) {
if (!this.app.getSettings().drawShadow) return;
const u = 100 * this.getSettings().maxShadowOpacity;
this.shadow = { pos: o, angle: h, width: 3 * this.getRect().pageWidth / 4 * n / 100, opacity: (100 - n) * u / 100 / 100, direction: y, 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(o) {
this.pageRect = o;
}
setDirection(o) {
this.direction = o;
}
setRightPage(o) {
o !== null && o.setOrientation(1), this.rightPage = o;
}
setLeftPage(o) {
o !== null && o.setOrientation(0), this.leftPage = o;
}
setBottomPage(o) {
o !== null && o.setOrientation(this.direction === 1 ? 0 : 1), this.bottomPage = o;
}
setFlippingPage(o) {
o !== null && o.setOrientation(this.direction === 0 && this.orientation !== "portrait" ? 0 : 1), this.flippingPage = o;
}
convertToBook(o) {
const h = this.getRect();
return { x: o.x - h.left, y: o.y - h.top };
}
isSafari() {
return this.safari;
}
convertToPage(o, h) {
h || (h = this.direction);
const n = this.getRect();
return { x: h === 0 ? o.x - n.left - n.width / 2 : n.width / 2 - o.x + n.left, y: o.y - n.top };
}
convertToGlobal(o, h) {
if (h || (h = this.direction), o == null) return null;
const n = this.getRect();
return { x: h === 0 ? o.x + n.left + n.width / 2 : n.width / 2 - o.x + n.left, y: o.y + n.top };
}
convertRectToGlobal(o, h) {
return h || (h = this.direction), { topLeft: this.convertToGlobal(o.topLeft, h), topRight: this.convertToGlobal(o.topRight, h), bottomLeft: this.convertToGlobal(o.bottomLeft, h), bottomRight: this.convertToGlobal(o.bottomRight, h) };
}
}
class w extends B {
constructor(o, h, n) {
super(o, h), 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.rig