react-magazine 1.0.0

package/dist/esm/components/MagazineBook.js

@@ -0,0 +1,262 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useState, useImperativeHandle, useCallback, useEffect } from 'react';
+import { p as pageFlip_browserExports } from '../node_modules/page-flip/dist/js/page-flip.browser.js';
+
+// SVG Arrow Icons
+const ChevronLeft = () => (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "15 18 9 12 15 6" }) }));
+const ChevronRight = () => (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+const MagazineBookForward = forwardRef((props, ref) => {
+    const { className = '', style = {}, children, renderOnlyPageLengthChange = false, isLoading = false, disabled = false, showControls = false, controlsClassName = '', controlsStyle = {}, width = 400, height = 300, size = 'fixed', minWidth = 100, maxWidth = 2000, minHeight = 100, maxHeight = 2000, drawShadow = true, flippingTime = 1000, usePortrait = false, startZIndex = 0, autoSize = true, maxShadowOpacity = 1, showCover = false, mobileScrollSupport = true, clickEventForward = true, useMouseEvents = true, swipeDistance = 30, showPageCorners = true, disableFlipByClick = false, startPage = 0, onFlip, onChangeOrientation, onChangeState, onInit, onUpdate, } = props;
+    const htmlElementRef = useRef(null);
+    const childRef = useRef([]);
+    const pageFlip = useRef(null);
+    const [pages, setPages] = useState([]);
+    const [orientation, setOrientation] = useState('landscape');
+    const [currentPage, setCurrentPage] = useState(0);
+    const [pageCount, setPageCount] = useState(0);
+    // Expose pageFlip instance and helper methods via ref
+    useImperativeHandle(ref, () => ({
+        pageFlip: () => pageFlip.current,
+        flipNext: (corner) => {
+            pageFlip.current?.flipNext(corner);
+        },
+        flipPrev: (corner) => {
+            pageFlip.current?.flipPrev(corner);
+        },
+        flip: (pageNum, corner) => {
+            pageFlip.current?.flip(pageNum, corner);
+        },
+        turnToPage: (pageNum) => {
+            pageFlip.current?.turnToPage(pageNum);
+        },
+        getCurrentPageIndex: () => {
+            return pageFlip.current?.getCurrentPageIndex() ?? 0;
+        },
+        getPageCount: () => {
+            return pageFlip.current?.getPageCount() ?? 0;
+        },
+        getOrientation: () => {
+            const o = pageFlip.current?.getOrientation();
+            return o;
+        },
+        getState: () => {
+            const s = pageFlip.current?.getState();
+            return s;
+        },
+    }));
+    const refreshOnPageDelete = useCallback(() => {
+        if (pageFlip.current) {
+            pageFlip.current.clear();
+        }
+    }, []);
+    const removeHandlers = useCallback(() => {
+        const flip = pageFlip.current;
+        if (flip) {
+            flip.off('flip');
+            flip.off('changeOrientation');
+            flip.off('changeState');
+            flip.off('init');
+            flip.off('update');
+        }
+    }, []);
+    // Handle children changes
+    useEffect(() => {
+        childRef.current = [];
+        if (children) {
+            const childArray = React.Children.toArray(children).filter(React.isValidElement);
+            const totalChildren = childArray.length;
+            const childList = childArray.map((child, index) => {
+                if (!React.isValidElement(child))
+                    return null;
+                // Get the density from child props, default to 'soft'
+                const childProps = child.props;
+                let density = childProps.density || 'soft';
+                // If showCover is true, force first and last pages to be hard
+                if (showCover) {
+                    const isFirstPage = index === 0;
+                    const isLastPage = index === totalChildren - 1;
+                    if (isFirstPage || isLastPage) {
+                        density = 'hard';
+                    }
+                }
+                return React.cloneElement(child, {
+                    ref: (dom) => {
+                        if (dom) {
+                            // Ensure data-density is set correctly on the DOM element
+                            dom.setAttribute('data-density', density);
+                            childRef.current[index] = dom;
+                        }
+                    },
+                });
+            })?.filter(Boolean);
+            if (!renderOnlyPageLengthChange || pages.length !== childList?.length) {
+                if (childList && childList.length < pages.length) {
+                    refreshOnPageDelete();
+                }
+                setPages(childList || []);
+            }
+        }
+    }, [children, renderOnlyPageLengthChange, pages.length, refreshOnPageDelete, showCover]);
+    // Initialize PageFlip and handle updates
+    useEffect(() => {
+        const setHandlers = () => {
+            const flip = pageFlip.current;
+            if (flip) {
+                // Always track current page for controls
+                flip.on('flip', (e) => {
+                    const event = e;
+                    setCurrentPage(event.data);
+                    if (onFlip) {
+                        onFlip(e);
+                    }
+                });
+                // Always track orientation for CSS classes
+                flip.on('changeOrientation', (e) => {
+                    const event = e;
+                    setOrientation(event.data);
+                    if (onChangeOrientation) {
+                        onChangeOrientation(e);
+                    }
+                });
+                if (onChangeState) {
+                    flip.on('changeState', (e) => onChangeState(e));
+                }
+                // Always track page count on init
+                flip.on('init', (e) => {
+                    // Get actual page count from the flip instance
+                    const count = flip.getPageCount();
+                    setPageCount(count);
+                    // Set initial page
+                    setCurrentPage(flip.getCurrentPageIndex());
+                    if (onInit) {
+                        onInit(e);
+                    }
+                });
+                if (onUpdate) {
+                    flip.on('update', (e) => onUpdate(e));
+                }
+            }
+        };
+        // Filter out any undefined entries and ensure proper order
+        const validRefs = childRef.current.filter((ref) => ref !== null && ref !== undefined);
+        if (pages.length > 0 && validRefs.length > 0) {
+            removeHandlers();
+            if (htmlElementRef.current && !pageFlip.current) {
+                pageFlip.current = new pageFlip_browserExports.PageFlip(htmlElementRef.current, {
+                    width,
+                    height,
+                    size,
+                    minWidth,
+                    maxWidth,
+                    minHeight,
+                    maxHeight,
+                    drawShadow,
+                    flippingTime,
+                    usePortrait,
+                    startZIndex,
+                    autoSize,
+                    maxShadowOpacity,
+                    showCover,
+                    mobileScrollSupport,
+                    clickEventForward,
+                    useMouseEvents,
+                    swipeDistance,
+                    showPageCorners,
+                    disableFlipByClick,
+                    startPage,
+                });
+            }
+            if (pageFlip.current) {
+                // Use requestAnimationFrame to ensure DOM is fully rendered
+                requestAnimationFrame(() => {
+                    if (pageFlip.current) {
+                        if (!pageFlip.current.getFlipController()) {
+                            pageFlip.current.loadFromHTML(validRefs);
+                        }
+                        else {
+                            pageFlip.current.updateFromHtml(validRefs);
+                        }
+                        setHandlers();
+                    }
+                });
+            }
+            else {
+                setHandlers();
+            }
+        }
+        return () => {
+            removeHandlers();
+        };
+    }, [
+        pages,
+        width,
+        height,
+        size,
+        minWidth,
+        maxWidth,
+        minHeight,
+        maxHeight,
+        drawShadow,
+        flippingTime,
+        usePortrait,
+        startZIndex,
+        autoSize,
+        maxShadowOpacity,
+        showCover,
+        mobileScrollSupport,
+        clickEventForward,
+        useMouseEvents,
+        swipeDistance,
+        showPageCorners,
+        disableFlipByClick,
+        startPage,
+        onFlip,
+        onChangeOrientation,
+        onChangeState,
+        onInit,
+        onUpdate,
+        removeHandlers,
+    ]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (pageFlip.current) {
+                pageFlip.current.destroy();
+                pageFlip.current = null;
+            }
+        };
+    }, []);
+    // Control handlers
+    const handlePrevPage = useCallback(() => {
+        pageFlip.current?.flipPrev();
+    }, []);
+    const handleNextPage = useCallback(() => {
+        pageFlip.current?.flipNext();
+    }, []);
+    // Build CSS classes
+    const cssClasses = [
+        'react-magazine',
+        `react-magazine--${orientation}`,
+        isLoading ? 'react-magazine--loading' : '',
+        disabled ? 'react-magazine--disabled' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxs("div", { className: "react-magazine-wrapper", children: [jsx("div", { ref: htmlElementRef, className: cssClasses, style: {
+                    ...style,
+                    pointerEvents: disabled ? 'none' : undefined,
+                }, children: pages }), showControls && (jsxs("div", { className: `react-magazine-controls ${controlsClassName}`, style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '15px',
+                    marginTop: '8px',
+                    ...controlsStyle,
+                }, children: [jsxs("button", { className: "react-magazine-controls__btn react-magazine-controls__btn--prev", onClick: handlePrevPage, disabled: currentPage === 0, type: "button", children: [jsx(ChevronLeft, {}), jsx("span", { children: "Previous" })] }), jsxs("span", { className: "react-magazine-controls__page-info", children: ["Page ", currentPage + 1, " of ", pageCount || '...'] }), jsxs("button", { className: "react-magazine-controls__btn react-magazine-controls__btn--next", onClick: handleNextPage, disabled: currentPage >= pageCount - 1, type: "button", children: [jsx("span", { children: "Next" }), jsx(ChevronRight, {})] })] }))] }));
+});
+MagazineBookForward.displayName = 'MagazineBook';
+const MagazineBook = React.memo(MagazineBookForward);
+
+export { MagazineBook };
+//# sourceMappingURL=MagazineBook.js.map

package/dist/esm/components/MagazineBook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagazineBook.js","sources":["../../../../src/components/MagazineBook.tsx"],"sourcesContent":[null],"names":["_jsx","PageFlip","_jsxs"],"mappings":"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"}

package/dist/esm/components/Page.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Page component for use inside MagazineBook
+ * Each page should be wrapped in this component to properly integrate with the flip book
+ */
+const Page = forwardRef(({ children, number, density = 'soft', className = '', style = {} }, ref) => {
+    return (jsx("div", { ref: ref, className: `react-magazine-page ${className}`, "data-density": density, "data-page-number": number, style: {
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            ...style,
+        }, children: children }));
+});
+Page.displayName = 'Page';
+
+export { Page };
+//# sourceMappingURL=Page.js.map

package/dist/esm/components/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sources":["../../../../src/components/Page.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAGA;;;AAGG;AACI,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAA,oBAAA,EAAuB,SAAS,EAAE,EAAA,cAAA,EAC/B,OAAO,sBACH,MAAM,EACxB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/esm/components/PageCover.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * PageCover component for hard cover pages (front/back)
+ * This is a specialized Page component with density="hard" preset
+ */
+const PageCover = forwardRef(({ children, number, position = 'front', className = '', style = {} }, ref) => {
+    return (jsx("div", { ref: ref, className: `react-magazine-page react-magazine-cover react-magazine-cover--${position} ${className}`, "data-density": "hard", "data-page-number": number, "data-cover-position": position, style: {
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            ...style,
+        }, children: children }));
+});
+PageCover.displayName = 'PageCover';
+
+export { PageCover };
+//# sourceMappingURL=PageCover.js.map

package/dist/esm/components/PageCover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageCover.js","sources":["../../../../src/components/PageCover.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAGA;;;AAGG;AACI,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,KAAI;IAC5E,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAA,+DAAA,EAAkE,QAAQ,IAAI,SAAS,CAAA,CAAE,kBACvF,MAAM,EAAA,kBAAA,EACD,MAAM,EAAA,qBAAA,EACH,QAAQ,EAC7B,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/esm/hooks/useFlipBook.js

@@ -0,0 +1,98 @@
+import { useRef, useState, useCallback } from 'react';
+
+/**
+ * Custom hook for easier control of MagazineBook
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { bookRef, state, flipNext, flipPrev, handlers } = useFlipBook();
+ *
+ *   return (
+ *     <div>
+ *       <MagazineBook ref={bookRef} {...handlers}>
+ *         <Page>Page 1</Page>
+ *         <Page>Page 2</Page>
+ *       </MagazineBook>
+ *       <p>Page {state.currentPage + 1} of {state.pageCount}</p>
+ *       <button onClick={() => flipPrev()}>Previous</button>
+ *       <button onClick={() => flipNext()}>Next</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useFlipBook() {
+    const bookRef = useRef(null);
+    const [state, setState] = useState({
+        currentPage: 0,
+        pageCount: 0,
+        orientation: 'landscape',
+        pageState: null,
+        isFlipping: false,
+    });
+    const flipNext = useCallback((corner) => {
+        bookRef.current?.flipNext(corner);
+    }, []);
+    const flipPrev = useCallback((corner) => {
+        bookRef.current?.flipPrev(corner);
+    }, []);
+    const flipTo = useCallback((pageNum, corner) => {
+        bookRef.current?.flip(pageNum, corner);
+    }, []);
+    const turnTo = useCallback((pageNum) => {
+        bookRef.current?.turnToPage(pageNum);
+    }, []);
+    const canFlipNext = useCallback(() => {
+        return state.currentPage < state.pageCount - 1;
+    }, [state.currentPage, state.pageCount]);
+    const canFlipPrev = useCallback(() => {
+        return state.currentPage > 0;
+    }, [state.currentPage]);
+    const onFlip = useCallback((e) => {
+        setState((prev) => ({
+            ...prev,
+            currentPage: e.data,
+        }));
+    }, []);
+    const onChangeOrientation = useCallback((e) => {
+        setState((prev) => ({
+            ...prev,
+            orientation: e.data,
+        }));
+    }, []);
+    const onChangeState = useCallback((e) => {
+        setState((prev) => ({
+            ...prev,
+            pageState: e.data,
+            isFlipping: e.data === 'flipping',
+        }));
+    }, []);
+    const onInit = useCallback((e) => {
+        const pageCount = bookRef.current?.getPageCount() ?? 0;
+        setState((prev) => ({
+            ...prev,
+            currentPage: e.data,
+            pageCount,
+        }));
+    }, []);
+    return {
+        bookRef,
+        state,
+        flipNext,
+        flipPrev,
+        flipTo,
+        turnTo,
+        canFlipNext,
+        canFlipPrev,
+        handlers: {
+            onFlip,
+            onChangeOrientation,
+            onChangeState,
+            onInit,
+        },
+    };
+}
+
+export { useFlipBook };
+//# sourceMappingURL=useFlipBook.js.map

package/dist/esm/hooks/useFlipBook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlipBook.js","sources":["../../../../src/hooks/useFlipBook.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+export { MagazineBook, MagazineBook as default } from './components/MagazineBook.js';
+export { Page } from './components/Page.js';
+export { PageCover } from './components/PageCover.js';
+export { useFlipBook } from './hooks/useFlipBook.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/node_modules/page-flip/dist/js/page-flip.browser.js

@@ -0,0 +1,11 @@
+import { commonjsGlobal } from '../../../../_virtual/_commonjsHelpers.js';
+import { __module as pageFlip_browser } from '../../../../_virtual/page-flip.browser.js';
+
+(function (module, exports$1) {
+	!function(t,e){e(exports$1);}(commonjsGlobal,(function(t){class e{constructor(t,e){this.state={angle:0,area:[],position:{x:0,y:0},hardAngle:0,hardDrawingAngle:0},this.createdDensity=e,this.nowDrawingDensity=this.createdDensity,this.render=t;}setDensity(t){this.createdDensity=t,this.nowDrawingDensity=t;}setDrawingDensity(t){this.nowDrawingDensity=t;}setPosition(t){this.state.position=t;}setAngle(t){this.state.angle=t;}setArea(t){this.state.area=t;}setHardDrawingAngle(t){this.state.hardDrawingAngle=t;}setHardAngle(t){this.state.hardAngle=t,this.state.hardDrawingAngle=t;}setOrientation(t){this.orientation=t;}getDrawingDensity(){return this.nowDrawingDensity}getDensity(){return this.createdDensity}getHardAngle(){return this.state.hardAngle}}class i extends e{constructor(t,e,i){super(t,i),this.image=null,this.isLoad=false,this.loadingAngle=0,this.image=new Image,this.image.src=e;}draw(t){const e=this.render.getContext(),i=this.render.convertToGlobal(this.state.position),s=this.render.getRect().pageWidth,n=this.render.getRect().height;e.save(),e.translate(i.x,i.y),e.beginPath();for(let t of this.state.area)null!==t&&(t=this.render.convertToGlobal(t),e.lineTo(t.x-i.x,t.y-i.y));e.rotate(this.state.angle),e.clip(),this.isLoad?e.drawImage(this.image,0,0,s,n):this.drawLoader(e,{x:0,y:0},s,n),e.restore();}simpleDraw(t){const e=this.render.getRect(),i=this.render.getContext(),s=e.pageWidth,n=e.height,h=1===t?e.left+e.pageWidth:e.left,r=e.top;this.isLoad?i.drawImage(this.image,h,r,s,n):this.drawLoader(i,{x:h,y:r},s,n);}drawLoader(t,e,i,s){t.beginPath(),t.strokeStyle="rgb(200, 200, 200)",t.fillStyle="rgb(255, 255, 255)",t.lineWidth=1,t.rect(e.x+1,e.y+1,i-1,s-1),t.stroke(),t.fill();const n={x:e.x+i/2,y:e.y+s/2};t.beginPath(),t.lineWidth=10,t.arc(n.x,n.y,20,this.loadingAngle,3*Math.PI/2+this.loadingAngle),t.stroke(),t.closePath(),this.loadingAngle+=.07,this.loadingAngle>=2*Math.PI&&(this.loadingAngle=0);}load(){this.isLoad||(this.image.onload=()=>{this.isLoad=true;});}newTemporaryCopy(){return this}getTemporaryCopy(){return this}hideTemporaryCopy(){}}class s{constructor(t,e){this.pages=[],this.currentPageIndex=0,this.currentSpreadIndex=0,this.landscapeSpread=[],this.portraitSpread=[],this.render=e,this.app=t,this.currentPageIndex=0,this.isShowCover=this.app.getSettings().showCover;}destroy(){this.pages=[];}createSpread(){this.landscapeSpread=[],this.portraitSpread=[];for(let t=0;t<this.pages.length;t++)this.portraitSpread.push([t]);let t=0;this.isShowCover&&(this.pages[0].setDensity("hard"),this.landscapeSpread.push([t]),t++);for(let e=t;e<this.pages.length;e+=2)e<this.pages.length-1?this.landscapeSpread.push([e,e+1]):(this.landscapeSpread.push([e]),this.pages[e].setDensity("hard"));}getSpread(){return "landscape"===this.render.getOrientation()?this.landscapeSpread:this.portraitSpread}getSpreadIndexByPage(t){const e=this.getSpread();for(let i=0;i<e.length;i++)if(t===e[i][0]||t===e[i][1])return i;return null}getPageCount(){return this.pages.length}getPages(){return this.pages}getPage(t){if(t>=0&&t<this.pages.length)return this.pages[t];throw new Error("Invalid page number")}nextBy(t){const e=this.pages.indexOf(t);return e<this.pages.length-1?this.pages[e+1]:null}prevBy(t){const e=this.pages.indexOf(t);return e>0?this.pages[e-1]:null}getFlippingPage(t){const e=this.currentSpreadIndex;if("portrait"===this.render.getOrientation())return 0===t?this.pages[e].newTemporaryCopy():this.pages[e-1];{const i=0===t?this.getSpread()[e+1]:this.getSpread()[e-1];return 1===i.length||0===t?this.pages[i[0]]:this.pages[i[1]]}}getBottomPage(t){const e=this.currentSpreadIndex;if("portrait"===this.render.getOrientation())return 0===t?this.pages[e+1]:this.pages[e-1];{const i=0===t?this.getSpread()[e+1]:this.getSpread()[e-1];return 1===i.length?this.pages[i[0]]:0===t?this.pages[i[1]]:this.pages[i[0]]}}showNext(){this.currentSpreadIndex<this.getSpread().length&&(this.currentSpreadIndex++,this.showSpread());}showPrev(){this.currentSpreadIndex>0&&(this.currentSpreadIndex--,this.showSpread());}getCurrentPageIndex(){return this.currentPageIndex}show(t=null){if(null===t&&(t=this.currentPageIndex),t<0||t>=this.pages.length)return;const e=this.getSpreadIndexByPage(t);null!==e&&(this.currentSpreadIndex=e,this.showSpread());}getCurrentSpreadIndex(){return this.currentSpreadIndex}setCurrentSpreadIndex(t){if(!(t>=0&&t<this.getSpread().length))throw new Error("Invalid page");this.currentSpreadIndex=t;}showSpread(){const t=this.getSpread()[this.currentSpreadIndex];2===t.length?(this.render.setLeftPage(this.pages[t[0]]),this.render.setRightPage(this.pages[t[1]])):"landscape"===this.render.getOrientation()&&t[0]===this.pages.length-1?(this.render.setLeftPage(this.pages[t[0]]),this.render.setRightPage(null)):(this.render.setLeftPage(null),this.render.setRightPage(this.pages[t[0]])),this.currentPageIndex=t[0],this.app.updatePageIndex(this.currentPageIndex);}}class n extends s{constructor(t,e,i){super(t,e),this.imagesHref=i;}load(){for(const t of this.imagesHref){const e=new i(this.render,t,"soft");e.load(),this.pages.push(e);}this.createSpread();}}class h{static GetDistanceBetweenTwoPoint(t,e){return null===t||null===e?1/0:Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}static GetSegmentLength(t){return h.GetDistanceBetweenTwoPoint(t[0],t[1])}static GetAngleBetweenTwoLine(t,e){const i=t[0].y-t[1].y,s=e[0].y-e[1].y,n=t[1].x-t[0].x,h=e[1].x-e[0].x;return Math.acos((i*s+n*h)/(Math.sqrt(i*i+n*n)*Math.sqrt(s*s+h*h)))}static PointInRect(t,e){return null===e?null:e.x>=t.left&&e.x<=t.width+t.left&&e.y>=t.top&&e.y<=t.top+t.height?e:null}static GetRotatedPoint(t,e,i){return {x:t.x*Math.cos(i)+t.y*Math.sin(i)+e.x,y:t.y*Math.cos(i)-t.x*Math.sin(i)+e.y}}static LimitPointToCircle(t,e,i){if(h.GetDistanceBetweenTwoPoint(t,i)<=e)return i;const s=t.x,n=t.y,r=i.x,o=i.y;let a=Math.sqrt(Math.pow(e,2)*Math.pow(s-r,2)/(Math.pow(s-r,2)+Math.pow(n-o,2)))+s;i.x<0&&(a*=-1);let g=(a-s)*(n-o)/(s-r)+n;return s-r+n===0&&(g=e),{x:a,y:g}}static GetIntersectBetweenTwoSegment(t,e,i){return h.PointInRect(t,h.GetIntersectBeetwenTwoLine(e,i))}static GetIntersectBeetwenTwoLine(t,e){const i=t[0].y-t[1].y,s=e[0].y-e[1].y,n=t[1].x-t[0].x,h=e[1].x-e[0].x,r=t[0].x*t[1].y-t[1].x*t[0].y,o=e[0].x*e[1].y-e[1].x*e[0].y,a=i*o-s*r,g=n*o-h*r,l=-(r*h-o*n)/(i*h-s*n),d=-(i*o-s*r)/(i*h-s*n);if(isFinite(l)&&isFinite(d))return {x:l,y:d};if(Math.abs(a-g)<.1)throw new Error("Segment included");return null}static GetCordsFromTwoPoint(t,e){const i=Math.abs(t.x-e.x),s=Math.abs(t.y-e.y),n=Math.max(i,s),h=[t];function r(t,e,i,s,n){return e>t?t+n*(i/s):e<t?t-n*(i/s):t}for(let o=1;o<=n;o+=1)h.push({x:r(t.x,e.x,i,n,o),y:r(t.y,e.y,s,n,o)});return h}}class r extends e{constructor(t,e,i){super(t,i),this.copiedElement=null,this.temporaryCopy=null,this.isLoad=false,this.element=e,this.element.classList.add("stf__item"),this.element.classList.add("--"+i);}newTemporaryCopy(){return "hard"===this.nowDrawingDensity?this:(null===this.temporaryCopy&&(this.copiedElement=this.element.cloneNode(true),this.element.parentElement.appendChild(this.copiedElement),this.temporaryCopy=new r(this.render,this.copiedElement,this.nowDrawingDensity)),this.getTemporaryCopy())}getTemporaryCopy(){return this.temporaryCopy}hideTemporaryCopy(){null!==this.temporaryCopy&&(this.copiedElement.remove(),this.copiedElement=null,this.temporaryCopy=null);}draw(t){const e=t||this.nowDrawingDensity,i=this.render.convertToGlobal(this.state.position),s=this.render.getRect().pageWidth,n=this.render.getRect().height;this.element.classList.remove("--simple");const h=`\n            display: block;\n            z-index: ${this.element.style.zIndex};\n            left: 0;\n            top: 0;\n            width: ${s}px;\n            height: ${n}px;\n        `;"hard"===e?this.drawHard(h):this.drawSoft(i,h);}drawHard(t=""){const e=this.render.getRect().left+this.render.getRect().width/2,i=this.state.hardDrawingAngle,s=t+"\n                backface-visibility: hidden;\n                -webkit-backface-visibility: hidden;\n                clip-path: none;\n                -webkit-clip-path: none;\n            "+(0===this.orientation?`transform-origin: ${this.render.getRect().pageWidth}px 0; \n                   transform: translate3d(0, 0, 0) rotateY(${i}deg);`:`transform-origin: 0 0; \n                   transform: translate3d(${e}px, 0, 0) rotateY(${i}deg);`);this.element.style.cssText=s;}drawSoft(t,e=""){let i="polygon( ";for(const t of this.state.area)if(null!==t){let e=1===this.render.getDirection()?{x:-t.x+this.state.position.x,y:t.y-this.state.position.y}:{x:t.x-this.state.position.x,y:t.y-this.state.position.y};e=h.GetRotatedPoint(e,{x:0,y:0},this.state.angle),i+=e.x+"px "+e.y+"px, ";}i=i.slice(0,-2),i+=")";const s=e+`transform-origin: 0 0; clip-path: ${i}; -webkit-clip-path: ${i};`+(this.render.isSafari()&&0===this.state.angle?`transform: translate(${t.x}px, ${t.y}px);`:`transform: translate3d(${t.x}px, ${t.y}px, 0) rotate(${this.state.angle}rad);`);this.element.style.cssText=s;}simpleDraw(t){const e=this.render.getRect(),i=e.pageWidth,s=e.height,n=1===t?e.left+e.pageWidth:e.left,h=e.top;this.element.classList.add("--simple"),this.element.style.cssText=`\n            position: absolute; \n            display: block; \n            height: ${s}px; \n            left: ${n}px; \n            top: ${h}px; \n            width: ${i}px; \n            z-index: ${this.render.getSettings().startZIndex+1};`;}getElement(){return this.element}load(){this.isLoad=true;}setOrientation(t){super.setOrientation(t),this.element.classList.remove("--left","--right"),this.element.classList.add(1===t?"--right":"--left");}setDrawingDensity(t){this.element.classList.remove("--soft","--hard"),this.element.classList.add("--"+t),super.setDrawingDensity(t);}}class o extends s{constructor(t,e,i,s){super(t,e),this.element=i,this.pagesElement=s;}load(){for(const t of this.pagesElement){const e=new r(this.render,t,"hard"===t.dataset.density?"hard":"soft");e.load(),this.pages.push(e);}this.createSpread();}}class a{constructor(t,e,i,s){this.direction=t,this.corner=e,this.topIntersectPoint=null,this.sideIntersectPoint=null,this.bottomIntersectPoint=null,this.pageWidth=parseInt(i,10),this.pageHeight=parseInt(s,10);}calc(t){try{return this.position=this.calcAngleAndPosition(t),this.calculateIntersectPoint(this.position),!0}catch(t){return  false}}getFlippingClipArea(){const t=[];let e=false;return t.push(this.rect.topLeft),t.push(this.topIntersectPoint),null===this.sideIntersectPoint?e=true:(t.push(this.sideIntersectPoint),null===this.bottomIntersectPoint&&(e=false)),t.push(this.bottomIntersectPoint),(e||"bottom"===this.corner)&&t.push(this.rect.bottomLeft),t}getBottomClipArea(){const t=[];return t.push(this.topIntersectPoint),"top"===this.corner?t.push({x:this.pageWidth,y:0}):(null!==this.topIntersectPoint&&t.push({x:this.pageWidth,y:0}),t.push({x:this.pageWidth,y:this.pageHeight})),null!==this.sideIntersectPoint?h.GetDistanceBetweenTwoPoint(this.sideIntersectPoint,this.topIntersectPoint)>=10&&t.push(this.sideIntersectPoint):"top"===this.corner&&t.push({x:this.pageWidth,y:this.pageHeight}),t.push(this.bottomIntersectPoint),t.push(this.topIntersectPoint),t}getAngle(){return 0===this.direction?-this.angle:this.angle}getRect(){return this.rect}getPosition(){return this.position}getActiveCorner(){return 0===this.direction?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 1===this.direction?{x:this.pageWidth,y:0}:{x:0,y:0}}getShadowStartPoint(){return "top"===this.corner?this.topIntersectPoint:null!==this.sideIntersectPoint?this.sideIntersectPoint:this.topIntersectPoint}getShadowAngle(){const t=h.GetAngleBetweenTwoLine(this.getSegmentToShadowLine(),[{x:0,y:0},{x:this.pageWidth,y:0}]);return 0===this.direction?t:Math.PI-t}calcAngleAndPosition(t){let e=t;if(this.updateAngleAndGeometry(e),e="top"===this.corner?this.checkPositionAtCenterLine(e,{x:0,y:0},{x:0,y:this.pageHeight}):this.checkPositionAtCenterLine(e,{x:0,y:this.pageHeight},{x:0,y:0}),Math.abs(e.x-this.pageWidth)<1&&Math.abs(e.y)<1)throw new Error("Point is too small");return e}updateAngleAndGeometry(t){this.angle=this.calculateAngle(t),this.rect=this.getPageRect(t);}calculateAngle(t){const e=this.pageWidth-t.x+1,i="bottom"===this.corner?this.pageHeight-t.y:t.y;let s=2*Math.acos(e/Math.sqrt(i*i+e*e));i<0&&(s=-s);const n=Math.PI-s;if(!isFinite(s)||n>=0&&n<.003)throw new Error("The G point is too small");return "bottom"===this.corner&&(s=-s),s}getPageRect(t){return "top"===this.corner?this.getRectFromBasePoint([{x:0,y:0},{x:this.pageWidth,y:0},{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}],t):this.getRectFromBasePoint([{x:0,y:-this.pageHeight},{x:this.pageWidth,y:-this.pageHeight},{x:0,y:0},{x:this.pageWidth,y:0}],t)}getRectFromBasePoint(t,e){return {topLeft:this.getRotatedPoint(t[0],e),topRight:this.getRotatedPoint(t[1],e),bottomLeft:this.getRotatedPoint(t[2],e),bottomRight:this.getRotatedPoint(t[3],e)}}getRotatedPoint(t,e){return {x:t.x*Math.cos(this.angle)+t.y*Math.sin(this.angle)+e.x,y:t.y*Math.cos(this.angle)-t.x*Math.sin(this.angle)+e.y}}calculateIntersectPoint(t){const e={left:-1,top:-1,width:this.pageWidth+2,height:this.pageHeight+2};"top"===this.corner?(this.topIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[t,this.rect.topRight],[{x:0,y:0},{x:this.pageWidth,y:0}]),this.sideIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[t,this.rect.bottomLeft],[{x:this.pageWidth,y:0},{x:this.pageWidth,y:this.pageHeight}]),this.bottomIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[this.rect.bottomLeft,this.rect.bottomRight],[{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}])):(this.topIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[this.rect.topLeft,this.rect.topRight],[{x:0,y:0},{x:this.pageWidth,y:0}]),this.sideIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[t,this.rect.topLeft],[{x:this.pageWidth,y:0},{x:this.pageWidth,y:this.pageHeight}]),this.bottomIntersectPoint=h.GetIntersectBetweenTwoSegment(e,[this.rect.bottomLeft,this.rect.bottomRight],[{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}]));}checkPositionAtCenterLine(t,e,i){let s=t;const n=h.LimitPointToCircle(e,this.pageWidth,s);s!==n&&(s=n,this.updateAngleAndGeometry(s));const r=Math.sqrt(Math.pow(this.pageWidth,2)+Math.pow(this.pageHeight,2));let o=this.rect.bottomRight,a=this.rect.topLeft;if("bottom"===this.corner&&(o=this.rect.topRight,a=this.rect.bottomLeft),o.x<=0){const t=h.LimitPointToCircle(i,r,a);t!==s&&(s=t,this.updateAngleAndGeometry(s));}return s}getSegmentToShadowLine(){const t=this.getShadowStartPoint();return [t,t!==this.sideIntersectPoint&&null!==this.sideIntersectPoint?this.sideIntersectPoint:this.bottomIntersectPoint]}}class g{constructor(t,e){this.flippingPage=null,this.bottomPage=null,this.calc=null,this.state="read",this.render=t,this.app=e;}fold(t){this.setState("user_fold"),null===this.calc&&this.start(t),this.do(this.render.convertToPage(t));}flip(t){if(this.app.getSettings().disableFlipByClick&&!this.isPointOnCorners(t))return;if(null!==this.calc&&this.render.finishAnimation(),!this.start(t))return;const e=this.getBoundsRect();this.setState("flipping");const i=e.height/10,s="bottom"===this.calc.getCorner()?e.height-i:i,n="bottom"===this.calc.getCorner()?e.height:0;this.calc.calc({x:e.pageWidth-i,y:s}),this.animateFlippingTo({x:e.pageWidth-i,y:s},{x:-e.pageWidth,y:n},true);}start(t){this.reset();const e=this.render.convertToBook(t),i=this.getBoundsRect(),s=this.getDirectionByPoint(e),n=e.y>=i.height/2?"bottom":"top";if(!this.checkDirection(s))return  false;try{if(this.flippingPage=this.app.getPageCollection().getFlippingPage(s),this.bottomPage=this.app.getPageCollection().getBottomPage(s),"landscape"===this.render.getOrientation())if(1===s){const t=this.app.getPageCollection().nextBy(this.flippingPage);null!==t&&this.flippingPage.getDensity()!==t.getDensity()&&(this.flippingPage.setDrawingDensity("hard"),t.setDrawingDensity("hard"));}else {const t=this.app.getPageCollection().prevBy(this.flippingPage);null!==t&&this.flippingPage.getDensity()!==t.getDensity()&&(this.flippingPage.setDrawingDensity("hard"),t.setDrawingDensity("hard"));}return this.render.setDirection(s),this.calc=new a(s,n,i.pageWidth.toString(10),i.height.toString(10)),!0}catch(t){return  false}}do(t){if(null!==this.calc&&this.calc.calc(t)){const t=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()),0===this.calc.getDirection()?this.flippingPage.setHardAngle(90*(200-2*t)/100):this.flippingPage.setHardAngle(-90*(200-2*t)/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(),t,this.calc.getDirection());}}flipToPage(t,e){const i=this.app.getPageCollection().getCurrentSpreadIndex(),s=this.app.getPageCollection().getSpreadIndexByPage(t);try{s>i&&(this.app.getPageCollection().setCurrentSpreadIndex(s-1),this.flipNext(e)),s<i&&(this.app.getPageCollection().setCurrentSpreadIndex(s+1),this.flipPrev(e));}catch(t){}}flipNext(t){this.flip({x:this.render.getRect().left+2*this.render.getRect().pageWidth-10,y:"top"===t?1:this.render.getRect().height-2});}flipPrev(t){this.flip({x:10,y:"top"===t?1:this.render.getRect().height-2});}stopMove(){if(null===this.calc)return;const t=this.calc.getPosition(),e=this.getBoundsRect(),i="bottom"===this.calc.getCorner()?e.height:0;t.x<=0?this.animateFlippingTo(t,{x:-e.pageWidth,y:i},true):this.animateFlippingTo(t,{x:e.pageWidth,y:i},false);}showCorner(t){if(!this.checkState("read","fold_corner"))return;const e=this.getBoundsRect(),i=e.pageWidth;if(this.isPointOnCorners(t))if(null===this.calc){if(!this.start(t))return;this.setState("fold_corner"),this.calc.calc({x:i-1,y:1});const s=50,n="bottom"===this.calc.getCorner()?e.height-1:1,h="bottom"===this.calc.getCorner()?e.height-s:s;this.animateFlippingTo({x:i-1,y:n},{x:i-s,y:h},false,false);}else this.do(this.render.convertToPage(t));else this.setState("read"),this.render.finishAnimation(),this.stopMove();}animateFlippingTo(t,e,i,s=true){const n=h.GetCordsFromTwoPoint(t,e),r=[];for(const t of n)r.push(()=>this.do(t));const o=this.getAnimationDuration(n.length);this.render.startAnimation(r,o,()=>{this.calc&&(i&&(1===this.calc.getDirection()?this.app.turnToPrevPage():this.app.turnToNextPage()),s&&(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(t){this.state!==t&&(this.app.updateState(t),this.state=t);}getDirectionByPoint(t){const e=this.getBoundsRect();if("portrait"===this.render.getOrientation()){if(t.x-e.pageWidth<=e.width/5)return 1}else if(t.x<e.width/2)return 1;return 0}getAnimationDuration(t){const e=this.app.getSettings().flippingTime;return t>=1e3?e:t/1e3*e}checkDirection(t){return 0===t?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(...t){for(const e of t)if(this.state===e)return  true;return  false}isPointOnCorners(t){const e=this.getBoundsRect(),i=e.pageWidth,s=Math.sqrt(Math.pow(i,2)+Math.pow(e.height,2))/5,n=this.render.convertToBook(t);return n.x>0&&n.y>0&&n.x<e.width&&n.y<e.height&&(n.x<s||n.x>e.width-s)&&(n.y<s||n.y>e.height-s)}}class l{constructor(t,e){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=false,this.setting=e,this.app=t;const i=new RegExp("Version\\/[\\d\\.]+.*Safari/");this.safari=null!==i.exec(window.navigator.userAgent);}render(t){if(null!==this.animation){const e=Math.round((t-this.animation.startedAt)/this.animation.durationFrame);e<this.animation.frames.length?this.animation.frames[e]():(this.animation.onAnimateEnd(),this.animation=null);}this.timer=t,this.drawFrame();}start(){this.update();const t=e=>{this.render(e),requestAnimationFrame(t);};requestAnimationFrame(t);}startAnimation(t,e,i){this.finishAnimation(),this.animation={frames:t,duration:e,durationFrame:e/t.length,onAnimateEnd:i,startedAt:this.timer};}finishAnimation(){null!==this.animation&&(this.animation.frames[this.animation.frames.length-1](),null!==this.animation.onAnimateEnd&&this.animation.onAnimateEnd()),this.animation=null;}update(){this.boundsRect=null;const t=this.calculateBoundsRect();this.orientation!==t&&(this.orientation=t,this.app.updateOrientation(t));}calculateBoundsRect(){let t="landscape";const e=this.getBlockWidth(),i=e/2,s=this.getBlockHeight()/2,n=this.setting.width/this.setting.height;let h=this.setting.width,r=this.setting.height,o=i-h;return "stretch"===this.setting.size?(e<2*this.setting.minWidth&&this.app.getSettings().usePortrait&&(t="portrait"),h="portrait"===t?this.getBlockWidth():this.getBlockWidth()/2,h>this.setting.maxWidth&&(h=this.setting.maxWidth),r=h/n,r>this.getBlockHeight()&&(r=this.getBlockHeight(),h=r*n),o="portrait"===t?i-h/2-h:i-h):e<2*h&&this.app.getSettings().usePortrait&&(t="portrait",o=i-h/2-h),this.boundsRect={left:o,top:s-r/2,width:2*h,height:r,pageWidth:h},t}setShadowData(t,e,i,s){if(!this.app.getSettings().drawShadow)return;const n=100*this.getSettings().maxShadowOpacity;this.shadow={pos:t,angle:e,width:3*this.getRect().pageWidth/4*i/100,opacity:(100-i)*n/100/100,direction:s,progress:2*i};}clearShadow(){this.shadow=null;}getBlockWidth(){return this.app.getUI().getDistElement().offsetWidth}getBlockHeight(){return this.app.getUI().getDistElement().offsetHeight}getDirection(){return this.direction}getRect(){return null===this.boundsRect&&this.calculateBoundsRect(),this.boundsRect}getSettings(){return this.app.getSettings()}getOrientation(){return this.orientation}setPageRect(t){this.pageRect=t;}setDirection(t){this.direction=t;}setRightPage(t){null!==t&&t.setOrientation(1),this.rightPage=t;}setLeftPage(t){null!==t&&t.setOrientation(0),this.leftPage=t;}setBottomPage(t){null!==t&&t.setOrientation(1===this.direction?0:1),this.bottomPage=t;}setFlippingPage(t){null!==t&&t.setOrientation(0===this.direction&&"portrait"!==this.orientation?0:1),this.flippingPage=t;}convertToBook(t){const e=this.getRect();return {x:t.x-e.left,y:t.y-e.top}}isSafari(){return this.safari}convertToPage(t,e){e||(e=this.direction);const i=this.getRect();return {x:0===e?t.x-i.left-i.width/2:i.width/2-t.x+i.left,y:t.y-i.top}}convertToGlobal(t,e){if(e||(e=this.direction),null==t)return null;const i=this.getRect();return {x:0===e?t.x+i.left+i.width/2:i.width/2-t.x+i.left,y:t.y+i.top}}convertRectToGlobal(t,e){return e||(e=this.direction),{topLeft:this.convertToGlobal(t.topLeft,e),topRight:this.convertToGlobal(t.topRight,e),bottomLeft:this.convertToGlobal(t.bottomLeft,e),bottomRight:this.convertToGlobal(t.bottomRight,e)}}}class d extends l{constructor(t,e,i){super(t,e),this.canvas=i,this.ctx=i.getContext("2d");}getContext(){return this.ctx}reload(){}drawFrame(){this.clear(),"portrait"!==this.orientation&&null!=this.leftPage&&this.leftPage.simpleDraw(0),null!=this.rightPage&&this.rightPage.simpleDraw(1),null!=this.bottomPage&&this.bottomPage.draw(),this.drawBookShadow(),null!=this.flippingPage&&this.flippingPage.draw(),null!=this.shadow&&(this.drawOuterShadow(),this.drawInnerShadow());const t=this.getRect();"portrait"===this.orientation&&(this.ctx.beginPath(),this.ctx.rect(t.left+t.pageWidth,t.top,t.width,t.height),this.ctx.clip());}drawBookShadow(){const t=this.getRect();this.ctx.save(),this.ctx.beginPath();const e=t.width/20;this.ctx.rect(t.left,t.top,t.width,t.height);const i={x:t.left+t.width/2-e/2,y:0};this.ctx.translate(i.x,i.y);const s=this.ctx.createLinearGradient(0,0,e,0);s.addColorStop(0,"rgba(0, 0, 0, 0)"),s.addColorStop(.4,"rgba(0, 0, 0, 0.2)"),s.addColorStop(.49,"rgba(0, 0, 0, 0.1)"),s.addColorStop(.5,"rgba(0, 0, 0, 0.5)"),s.addColorStop(.51,"rgba(0, 0, 0, 0.4)"),s.addColorStop(1,"rgba(0, 0, 0, 0)"),this.ctx.clip(),this.ctx.fillStyle=s,this.ctx.fillRect(0,0,e,2*t.height),this.ctx.restore();}drawOuterShadow(){const t=this.getRect();this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(t.left,t.top,t.width,t.height);const e=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y});this.ctx.translate(e.x,e.y),this.ctx.rotate(Math.PI+this.shadow.angle+Math.PI/2);const i=this.ctx.createLinearGradient(0,0,this.shadow.width,0);0===this.shadow.direction?(this.ctx.translate(0,-100),i.addColorStop(0,"rgba(0, 0, 0, "+this.shadow.opacity+")"),i.addColorStop(1,"rgba(0, 0, 0, 0)")):(this.ctx.translate(-this.shadow.width,-100),i.addColorStop(0,"rgba(0, 0, 0, 0)"),i.addColorStop(1,"rgba(0, 0, 0, "+this.shadow.opacity+")")),this.ctx.clip(),this.ctx.fillStyle=i,this.ctx.fillRect(0,0,this.shadow.width,2*t.height),this.ctx.restore();}drawInnerShadow(){const t=this.getRect();this.ctx.save(),this.ctx.beginPath();const e=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y}),i=this.convertRectToGlobal(this.pageRect);this.ctx.moveTo(i.topLeft.x,i.topLeft.y),this.ctx.lineTo(i.topRight.x,i.topRight.y),this.ctx.lineTo(i.bottomRight.x,i.bottomRight.y),this.ctx.lineTo(i.bottomLeft.x,i.bottomLeft.y),this.ctx.translate(e.x,e.y),this.ctx.rotate(Math.PI+this.shadow.angle+Math.PI/2);const s=3*this.shadow.width/4,n=this.ctx.createLinearGradient(0,0,s,0);0===this.shadow.direction?(this.ctx.translate(-s,-100),n.addColorStop(1,"rgba(0, 0, 0, "+this.shadow.opacity+")"),n.addColorStop(.9,"rgba(0, 0, 0, 0.05)"),n.addColorStop(.7,"rgba(0, 0, 0, "+this.shadow.opacity+")"),n.addColorStop(0,"rgba(0, 0, 0, 0)")):(this.ctx.translate(0,-100),n.addColorStop(0,"rgba(0, 0, 0, "+this.shadow.opacity+")"),n.addColorStop(.1,"rgba(0, 0, 0, 0.05)"),n.addColorStop(.3,"rgba(0, 0, 0, "+this.shadow.opacity+")"),n.addColorStop(1,"rgba(0, 0, 0, 0)")),this.ctx.clip(),this.ctx.fillStyle=n,this.ctx.fillRect(0,0,s,2*t.height),this.ctx.restore();}clear(){this.ctx.fillStyle="white",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);}}class p{constructor(t,e,i){this.touchPoint=null,this.swipeTimeout=250,this.onResize=()=>{this.update();},this.onMouseDown=t=>{if(this.checkTarget(t.target)){const e=this.getMousePos(t.clientX,t.clientY);this.app.startUserTouch(e),t.preventDefault();}},this.onTouchStart=t=>{if(this.checkTarget(t.target)&&t.changedTouches.length>0){const e=t.changedTouches[0],i=this.getMousePos(e.clientX,e.clientY);this.touchPoint={point:i,time:Date.now()},setTimeout(()=>{null!==this.touchPoint&&this.app.startUserTouch(i);},this.swipeTimeout),this.app.getSettings().mobileScrollSupport||t.preventDefault();}},this.onMouseUp=t=>{const e=this.getMousePos(t.clientX,t.clientY);this.app.userStop(e);},this.onMouseMove=t=>{const e=this.getMousePos(t.clientX,t.clientY);this.app.userMove(e,false);},this.onTouchMove=t=>{if(t.changedTouches.length>0){const e=t.changedTouches[0],i=this.getMousePos(e.clientX,e.clientY);this.app.getSettings().mobileScrollSupport?(null!==this.touchPoint&&(Math.abs(this.touchPoint.point.x-i.x)>10||"read"!==this.app.getState())&&t.cancelable&&this.app.userMove(i,true),"read"!==this.app.getState()&&t.preventDefault()):this.app.userMove(i,true);}},this.onTouchEnd=t=>{if(t.changedTouches.length>0){const e=t.changedTouches[0],i=this.getMousePos(e.clientX,e.clientY);let s=false;if(null!==this.touchPoint){const t=i.x-this.touchPoint.point.x,e=Math.abs(i.y-this.touchPoint.point.y);Math.abs(t)>this.swipeDistance&&e<2*this.swipeDistance&&Date.now()-this.touchPoint.time<this.swipeTimeout&&(t>0?this.app.flipPrev(this.touchPoint.point.y<this.app.getRender().getRect().height/2?"top":"bottom"):this.app.flipNext(this.touchPoint.point.y<this.app.getRender().getRect().height/2?"top":"bottom"),s=true),this.touchPoint=null;}this.app.userStop(i,s);}},this.parentElement=t,t.classList.add("stf__parent"),t.insertAdjacentHTML("afterbegin",'<div class="stf__wrapper"></div>'),this.wrapper=t.querySelector(".stf__wrapper"),this.app=e;const s=this.app.getSettings().usePortrait?1:2;t.style.minWidth=i.minWidth*s+"px",t.style.minHeight=i.minHeight+"px","fixed"===i.size&&(t.style.minWidth=i.width*s+"px",t.style.minHeight=i.height+"px"),i.autoSize&&(t.style.width="100%",t.style.maxWidth=2*i.maxWidth+"px"),t.style.display="block",window.addEventListener("resize",this.onResize,false),this.swipeDistance=i.swipeDistance;}destroy(){this.app.getSettings().useMouseEvents&&this.removeHandlers(),this.distElement.remove(),this.wrapper.remove();}getDistElement(){return this.distElement}getWrapper(){return this.wrapper}setOrientationStyle(t){this.wrapper.classList.remove("--portrait","--landscape"),"portrait"===t?(this.app.getSettings().autoSize&&(this.wrapper.style.paddingBottom=this.app.getSettings().height/this.app.getSettings().width*100+"%"),this.wrapper.classList.add("--portrait")):(this.app.getSettings().autoSize&&(this.wrapper.style.paddingBottom=this.app.getSettings().height/(2*this.app.getSettings().width)*100+"%"),this.wrapper.classList.add("--landscape")),this.update();}removeHandlers(){window.removeEventListener("resize",this.onResize),this.distElement.removeEventListener("mousedown",this.onMouseDown),this.distElement.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("mouseup",this.onMouseUp),window.removeEventListener("touchend",this.onTouchEnd);}setHandlers(){window.addEventListener("resize",this.onResize,false),this.app.getSettings().useMouseEvents&&(this.distElement.addEventListener("mousedown",this.onMouseDown),this.distElement.addEventListener("touchstart",this.onTouchStart),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("touchmove",this.onTouchMove,{passive:!this.app.getSettings().mobileScrollSupport}),window.addEventListener("mouseup",this.onMouseUp),window.addEventListener("touchend",this.onTouchEnd));}getMousePos(t,e){const i=this.distElement.getBoundingClientRect();return {x:t-i.left,y:e-i.top}}checkTarget(t){return !this.app.getSettings().clickEventForward||!["a","button"].includes(t.tagName.toLowerCase())}}class c extends p{constructor(t,e,i,s){super(t,e,i),this.wrapper.insertAdjacentHTML("afterbegin",'<div class="stf__block"></div>'),this.distElement=t.querySelector(".stf__block"),this.items=s;for(const t of s)this.distElement.appendChild(t);this.setHandlers();}clear(){for(const t of this.items)this.parentElement.appendChild(t);}updateItems(t){this.removeHandlers(),this.distElement.innerHTML="";for(const e of t)this.distElement.appendChild(e);this.items=t,this.setHandlers();}update(){this.app.getRender().update();}}class u extends p{constructor(t,e,i){super(t,e,i),this.wrapper.innerHTML='<canvas class="stf__canvas"></canvas>',this.canvas=t.querySelectorAll("canvas")[0],this.distElement=this.canvas,this.resizeCanvas(),this.setHandlers();}resizeCanvas(){const t=getComputedStyle(this.canvas),e=parseInt(t.getPropertyValue("width"),10),i=parseInt(t.getPropertyValue("height"),10);this.canvas.width=e,this.canvas.height=i;}getCanvas(){return this.canvas}update(){this.resizeCanvas(),this.app.getRender().update();}}class w extends l{constructor(t,e,i){super(t,e),this.outerShadow=null,this.innerShadow=null,this.hardShadow=null,this.hardInnerShadow=null,this.element=i,this.createShadows();}createShadows(){this.element.insertAdjacentHTML("beforeend",'<div class="stf__outerShadow"></div>\n             <div class="stf__innerShadow"></div>\n             <div class="stf__hardShadow"></div>\n             <div class="stf__hardInnerShadow"></div>'),this.outerShadow=this.element.querySelector(".stf__outerShadow"),this.innerShadow=this.element.querySelector(".stf__innerShadow"),this.hardShadow=this.element.querySelector(".stf__hardShadow"),this.hardInnerShadow=this.element.querySelector(".stf__hardInnerShadow");}clearShadow(){super.clearShadow(),this.outerShadow.style.cssText="display: none",this.innerShadow.style.cssText="display: none",this.hardShadow.style.cssText="display: none",this.hardInnerShadow.style.cssText="display: none";}reload(){this.element.querySelector(".stf__outerShadow")||this.createShadows();}drawHardInnerShadow(){const t=this.getRect(),e=this.shadow.progress>100?200-this.shadow.progress:this.shadow.progress;let i=(100-e)*(2.5*t.pageWidth)/100+20;i>t.pageWidth&&(i=t.pageWidth);let s=`\n            display: block;\n            z-index: ${(this.getSettings().startZIndex+5).toString(10)};\n            width: ${i}px;\n            height: ${t.height}px;\n            background: linear-gradient(to right,\n                rgba(0, 0, 0, ${this.shadow.opacity*e/100}) 5%,\n                rgba(0, 0, 0, 0) 100%);\n            left: ${t.left+t.width/2}px;\n            transform-origin: 0 0;\n        `;s+=0===this.getDirection()&&this.shadow.progress>100||1===this.getDirection()&&this.shadow.progress<=100?"transform: translate3d(0, 0, 0);":"transform: translate3d(0, 0, 0) rotateY(180deg);",this.hardInnerShadow.style.cssText=s;}drawHardOuterShadow(){const t=this.getRect();let e=(100-(this.shadow.progress>100?200-this.shadow.progress:this.shadow.progress))*(2.5*t.pageWidth)/100+20;e>t.pageWidth&&(e=t.pageWidth);let i=`\n            display: block;\n            z-index: ${(this.getSettings().startZIndex+4).toString(10)};\n            width: ${e}px;\n            height: ${t.height}px;\n            background: linear-gradient(to left, rgba(0, 0, 0, ${this.shadow.opacity}) 5%, rgba(0, 0, 0, 0) 100%);\n            left: ${t.left+t.width/2}px;\n            transform-origin: 0 0;\n        `;i+=0===this.getDirection()&&this.shadow.progress>100||1===this.getDirection()&&this.shadow.progress<=100?"transform: translate3d(0, 0, 0) rotateY(180deg);":"transform: translate3d(0, 0, 0);",this.hardShadow.style.cssText=i;}drawInnerShadow(){const t=this.getRect(),e=3*this.shadow.width/4,i=0===this.getDirection()?e:0,s=0===this.getDirection()?"to left":"to right",n=this.convertToGlobal(this.shadow.pos),r=this.shadow.angle+3*Math.PI/2,o=[this.pageRect.topLeft,this.pageRect.topRight,this.pageRect.bottomRight,this.pageRect.bottomLeft];let a="polygon( ";for(const t of o){let e=1===this.getDirection()?{x:-t.x+this.shadow.pos.x,y:t.y-this.shadow.pos.y}:{x:t.x-this.shadow.pos.x,y:t.y-this.shadow.pos.y};e=h.GetRotatedPoint(e,{x:i,y:100},r),a+=e.x+"px "+e.y+"px, ";}a=a.slice(0,-2),a+=")";const g=`\n            display: block;\n            z-index: ${(this.getSettings().startZIndex+10).toString(10)};\n            width: ${e}px;\n            height: ${2*t.height}px;\n            background: linear-gradient(${s},\n                rgba(0, 0, 0, ${this.shadow.opacity}) 5%,\n                rgba(0, 0, 0, 0.05) 15%,\n                rgba(0, 0, 0, ${this.shadow.opacity}) 35%,\n                rgba(0, 0, 0, 0) 100%);\n            transform-origin: ${i}px 100px;\n            transform: translate3d(${n.x-i}px, ${n.y-100}px, 0) rotate(${r}rad);\n            clip-path: ${a};\n            -webkit-clip-path: ${a};\n        `;this.innerShadow.style.cssText=g;}drawOuterShadow(){const t=this.getRect(),e=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y}),i=this.shadow.angle+3*Math.PI/2,s=1===this.getDirection()?this.shadow.width:0,n=0===this.getDirection()?"to right":"to left",r=[{x:0,y:0},{x:t.pageWidth,y:0},{x:t.pageWidth,y:t.height},{x:0,y:t.height}];let o="polygon( ";for(const t of r)if(null!==t){let e=1===this.getDirection()?{x:-t.x+this.shadow.pos.x,y:t.y-this.shadow.pos.y}:{x:t.x-this.shadow.pos.x,y:t.y-this.shadow.pos.y};e=h.GetRotatedPoint(e,{x:s,y:100},i),o+=e.x+"px "+e.y+"px, ";}o=o.slice(0,-2),o+=")";const a=`\n            display: block;\n            z-index: ${(this.getSettings().startZIndex+10).toString(10)};\n            width: ${this.shadow.width}px;\n            height: ${2*t.height}px;\n            background: linear-gradient(${n}, rgba(0, 0, 0, ${this.shadow.opacity}), rgba(0, 0, 0, 0));\n            transform-origin: ${s}px 100px;\n            transform: translate3d(${e.x-s}px, ${e.y-100}px, 0) rotate(${i}rad);\n            clip-path: ${o};\n            -webkit-clip-path: ${o};\n        `;this.outerShadow.style.cssText=a;}drawLeftPage(){"portrait"!==this.orientation&&null!==this.leftPage&&(1===this.direction&&null!==this.flippingPage&&"hard"===this.flippingPage.getDrawingDensity()?(this.leftPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.leftPage.setHardDrawingAngle(180+this.flippingPage.getHardAngle()),this.leftPage.draw(this.flippingPage.getDrawingDensity())):this.leftPage.simpleDraw(0));}drawRightPage(){null!==this.rightPage&&(0===this.direction&&null!==this.flippingPage&&"hard"===this.flippingPage.getDrawingDensity()?(this.rightPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.rightPage.setHardDrawingAngle(180+this.flippingPage.getHardAngle()),this.rightPage.draw(this.flippingPage.getDrawingDensity())):this.rightPage.simpleDraw(1));}drawBottomPage(){if(null===this.bottomPage)return;const t=null!=this.flippingPage?this.flippingPage.getDrawingDensity():null;"portrait"===this.orientation&&1===this.direction||(this.bottomPage.getElement().style.zIndex=(this.getSettings().startZIndex+3).toString(10),this.bottomPage.draw(t));}drawFrame(){this.clear(),this.drawLeftPage(),this.drawRightPage(),this.drawBottomPage(),null!=this.flippingPage&&(this.flippingPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.flippingPage.draw()),null!=this.shadow&&null!==this.flippingPage&&("soft"===this.flippingPage.getDrawingDensity()?(this.drawOuterShadow(),this.drawInnerShadow()):(this.drawHardOuterShadow(),this.drawHardInnerShadow()));}clear(){for(const t of this.app.getPageCollection().getPages())t!==this.leftPage&&t!==this.rightPage&&t!==this.flippingPage&&t!==this.bottomPage&&(t.getElement().style.cssText="display: none"),t.getTemporaryCopy()!==this.flippingPage&&t.hideTemporaryCopy();}update(){super.update(),null!==this.rightPage&&this.rightPage.setOrientation(1),null!==this.leftPage&&this.leftPage.setOrientation(0);}}class x{constructor(){this._default={startPage:0,size:"fixed",width:0,height:0,minWidth:0,maxWidth:0,minHeight:0,maxHeight:0,drawShadow:true,flippingTime:1e3,usePortrait:true,startZIndex:0,autoSize:true,maxShadowOpacity:1,showCover:false,mobileScrollSupport:true,swipeDistance:30,clickEventForward:true,useMouseEvents:true,showPageCorners:true,disableFlipByClick:false};}getSettings(t){const e=this._default;if(Object.assign(e,t),"stretch"!==e.size&&"fixed"!==e.size)throw new Error('Invalid size type. Available only "fixed" and "stretch" value');if(e.width<=0||e.height<=0)throw new Error("Invalid width or height");if(e.flippingTime<=0)throw new Error("Invalid flipping time");return "stretch"===e.size?(e.minWidth<=0&&(e.minWidth=100),e.maxWidth<e.minWidth&&(e.maxWidth=2e3),e.minHeight<=0&&(e.minHeight=100),e.maxHeight<e.minHeight&&(e.maxHeight=2e3)):(e.minWidth=e.width,e.maxWidth=e.width,e.minHeight=e.height,e.maxHeight=e.height),e}}!function(t,e){ void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&s.firstChild?s.insertBefore(n,s.firstChild):s.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t));}}(".stf__parent {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  transform: translateZ(0);\n\n  -ms-touch-action: pan-y;\n  touch-action: pan-y;\n}\n\n.sft__wrapper {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.stf__parent canvas {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n\n.stf__block {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  perspective: 2000px;\n}\n\n.stf__item {\n  display: none;\n  position: absolute;\n  transform-style: preserve-3d;\n}\n\n.stf__outerShadow {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.stf__innerShadow {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.stf__hardShadow {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.stf__hardInnerShadow {\n  position: absolute;\n  left: 0;\n  top: 0;\n}");t.PageFlip=class extends class{constructor(){this.events=new Map;}on(t,e){return this.events.has(t)?this.events.get(t).push(e):this.events.set(t,[e]),this}off(t){this.events.delete(t);}trigger(t,e,i=null){if(this.events.has(t))for(const s of this.events.get(t))s({data:i,object:e});}}{constructor(t,e){super(),this.isUserTouch=false,this.isUserMove=false,this.setting=null,this.pages=null,this.setting=(new x).getSettings(e),this.block=t;}destroy(){this.ui.destroy(),this.block.remove();}update(){this.render.update(),this.pages.show();}loadFromImages(t){this.ui=new u(this.block,this,this.setting);const e=this.ui.getCanvas();this.render=new d(this,this.setting,e),this.flipController=new g(this.render,this),this.pages=new n(this,this.render,t),this.pages.load(),this.render.start(),this.pages.show(this.setting.startPage),setTimeout(()=>{this.ui.update(),this.trigger("init",this,{page:this.setting.startPage,mode:this.render.getOrientation()});},1);}loadFromHTML(t){this.ui=new c(this.block,this,this.setting,t),this.render=new w(this,this.setting,this.ui.getDistElement()),this.flipController=new g(this.render,this),this.pages=new o(this,this.render,this.ui.getDistElement(),t),this.pages.load(),this.render.start(),this.pages.show(this.setting.startPage),setTimeout(()=>{this.ui.update(),this.trigger("init",this,{page:this.setting.startPage,mode:this.render.getOrientation()});},1);}updateFromImages(t){const e=this.pages.getCurrentPageIndex();this.pages.destroy(),this.pages=new n(this,this.render,t),this.pages.load(),this.pages.show(e),this.trigger("update",this,{page:e,mode:this.render.getOrientation()});}updateFromHtml(t){const e=this.pages.getCurrentPageIndex();this.pages.destroy(),this.pages=new o(this,this.render,this.ui.getDistElement(),t),this.pages.load(),this.ui.updateItems(t),this.render.reload(),this.pages.show(e),this.trigger("update",this,{page:e,mode:this.render.getOrientation()});}clear(){this.pages.destroy(),this.ui.clear();}turnToPrevPage(){this.pages.showPrev();}turnToNextPage(){this.pages.showNext();}turnToPage(t){this.pages.show(t);}flipNext(t="top"){this.flipController.flipNext(t);}flipPrev(t="top"){this.flipController.flipPrev(t);}flip(t,e="top"){this.flipController.flipToPage(t,e);}updateState(t){this.trigger("changeState",this,t);}updatePageIndex(t){this.trigger("flip",this,t);}updateOrientation(t){this.ui.setOrientationStyle(t),this.update(),this.trigger("changeOrientation",this,t);}getPageCount(){return this.pages.getPageCount()}getCurrentPageIndex(){return this.pages.getCurrentPageIndex()}getPage(t){return this.pages.getPage(t)}getRender(){return this.render}getFlipController(){return this.flipController}getOrientation(){return this.render.getOrientation()}getBoundsRect(){return this.render.getRect()}getSettings(){return this.setting}getUI(){return this.ui}getState(){return this.flipController.getState()}getPageCollection(){return this.pages}startUserTouch(t){this.mousePosition=t,this.isUserTouch=true,this.isUserMove=false;}userMove(t,e){this.isUserTouch||e||!this.setting.showPageCorners?this.isUserTouch&&h.GetDistanceBetweenTwoPoint(this.mousePosition,t)>5&&(this.isUserMove=true,this.flipController.fold(t)):this.flipController.showCorner(t);}userStop(t,e=false){this.isUserTouch&&(this.isUserTouch=false,e||(this.isUserMove?this.flipController.stopMove():this.flipController.flip(t)));}},Object.defineProperty(t,"__esModule",{value:true});})); 
+} (pageFlip_browser, pageFlip_browser.exports));
+
+var pageFlip_browserExports = pageFlip_browser.exports;
+
+export { pageFlip_browserExports as p };
+//# sourceMappingURL=page-flip.browser.js.map