@orangelogic/design-system 2.108.0 → 2.109.0

package/library/packages/hybrid/book-reader/src/react/page-flip/Settings.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Book size calculation type
+ */
+export declare const enum SizeType {
+    /** Dimensions are fixed */
+    FIXED = "fixed",
+    /** Dimensions are calculated based on the parent element */
+    STRETCH = "stretch"
+}
+/**
+ * Configuration object
+ */
+export interface FlipSetting {
+    /** If this value is true, the parent element will be equal to the size of the book */
+    autoSize: boolean;
+    /** Set the forward event of clicking on child elements (buttons, links) */
+    clickEventForward: boolean;
+    /** if this value is true, flipping by clicking on the whole book will be locked. Only on corners */
+    disableFlipByClick: boolean;
+    /** Draw shadows or not when page flipping */
+    drawShadow: boolean;
+    /** Flipping animation time */
+    flippingTime: number;
+    height: number;
+    maxHeight: number;
+    /** Shadow intensity (1: max intensity, 0: hidden shadows) */
+    maxShadowOpacity: number;
+    maxWidth: number;
+    minHeight: number;
+    minWidth: number;
+    /** Disable content scrolling when touching a book on mobile devices */
+    mobileScrollSupport: boolean;
+    /** If this value is true, the first and the last pages will be marked as hard and will be shown in single page mode */
+    showCover: boolean;
+    /** if this value is true, fold the corners of the book when the mouse pointer is over them. */
+    showPageCorners: boolean;
+    /** Whether the book will be stretched under the parent element or not */
+    size: SizeType;
+    /** Page number from which to start viewing */
+    startPage: number;
+    /** Initial value to z-index */
+    startZIndex: number;
+    swipeDistance: number;
+    /** Using mouse and touch events to page flipping */
+    useMouseEvents: boolean;
+    /** Enable switching to portrait mode */
+    usePortrait: boolean;
+    width: number;
+}
+export declare class Settings {
+    private _default;
+    /**
+     * Processing parameters received from the user. Substitution default values
+     *
+     * @param userSetting
+     * @returns {FlipSetting} Сonfiguration object
+     */
+    getSettings(userSetting: Record<string, number | string | boolean>): FlipSetting;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/collection/HTMLPageCollection.d.ts

@@ -0,0 +1,13 @@
+import { PageFlip } from '../PageFlip';
+import { Render } from '../render/Render';
+import { PageCollection } from './PageCollection';
+
+/**
+ * Сlass representing a collection of pages as HTML Element
+ */
+export declare class HTMLPageCollection extends PageCollection {
+    private readonly element;
+    private readonly pagesElement;
+    constructor(app: PageFlip, render: Render, element: HTMLElement, items: NodeListOf<HTMLElement> | HTMLElement[]);
+    load(): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/collection/ImagePageCollection.d.ts

@@ -0,0 +1,12 @@
+import { PageFlip } from '../PageFlip';
+import { Render } from '../render/Render';
+import { PageCollection } from './PageCollection';
+
+/**
+ * Сlass representing a collection of pages as images on the canvas
+ */
+export declare class ImagePageCollection extends PageCollection {
+    private readonly imagesHref;
+    constructor(app: PageFlip, render: Render, imagesHref: string[]);
+    load(): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/collection/PageCollection.d.ts

@@ -0,0 +1,116 @@
+import { FlipDirection } from '../flip/Flip';
+import { Page } from '../page/Page';
+import { PageFlip } from '../PageFlip';
+import { Render } from '../render/Render';
+
+export type NumberArray = number[];
+/**
+ * Сlass representing a collection of pages
+ */
+export declare abstract class PageCollection {
+    protected readonly app: PageFlip;
+    protected readonly render: Render;
+    protected readonly isShowCover: boolean;
+    /** Pages List */
+    protected pages: Page[];
+    /** Index of the current page in list */
+    protected currentPageIndex: number;
+    /** Number of the current spread in book */
+    protected currentSpreadIndex: number;
+    /**  Two-page spread in landscape mode */
+    protected landscapeSpread: NumberArray[];
+    /**  One-page spread in portrait mode */
+    protected portraitSpread: NumberArray[];
+    protected constructor(app: PageFlip, render: Render);
+    /**
+     * Load pages
+     */
+    abstract load(): void;
+    /**
+     * Clear pages list
+     */
+    destroy(): void;
+    /**
+     * Split the book on the two-page spread in landscape mode and one-page spread in portrait mode
+     */
+    protected createSpread(): void;
+    /**
+     * Get spread by mode (portrait or landscape)
+     */
+    protected getSpread(): NumberArray[];
+    /**
+     * Get spread index by page number
+     *
+     * @param {number} pageNum - page index
+     */
+    getSpreadIndexByPage(pageNum: number): number | null;
+    /**
+     * Get the total number of pages
+     */
+    getPageCount(): number;
+    /**
+     * Get the pages list
+     */
+    getPages(): Page[];
+    /**
+     * Get page by index
+     *
+     * @param {number} pageIndex
+     */
+    getPage(pageIndex: number): Page;
+    /**
+     * Get the next page from the specified
+     *
+     * @param {Page} current
+     */
+    nextBy(current: Page): Page | null;
+    /**
+     * Get previous page from specified
+     *
+     * @param {Page} current
+     */
+    prevBy(current: Page): Page | null;
+    /**
+     * Get flipping page depending on the direction
+     *
+     * @param {FlipDirection} direction
+     */
+    getFlippingPage(direction: FlipDirection): Page;
+    /**
+     * Get Next page at the time of flipping
+     *
+     * @param {FlipDirection}  direction
+     */
+    getBottomPage(direction: FlipDirection): Page;
+    /**
+     * Show next spread
+     */
+    showNext(): void;
+    /**
+     * Show prev spread
+     */
+    showPrev(): void;
+    /**
+     * Get the number of the current spread in book
+     */
+    getCurrentPageIndex(): number;
+    /**
+     * Show specified page
+     * @param {number} pageNum - Page index (from 0s)
+     */
+    show(pageNum?: number | null, triggerFlip?: boolean): void;
+    /**
+     * Index of the current page in list
+     */
+    getCurrentSpreadIndex(): number;
+    /**
+     * Set new spread index as current
+     *
+     * @param {number} newIndex - new spread index
+     */
+    setCurrentSpreadIndex(newIndex: number): void;
+    /**
+     * Show current spread
+     */
+    private showSpread;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/event/EventObject.d.ts

@@ -0,0 +1,34 @@
+import { PageFlip } from '../PageFlip';
+
+/**
+ * Data type passed to the event handler
+ */
+export type DataType = number | string | boolean | object;
+/**
+ * Type of object in event handlers
+ */
+export interface WidgetEvent {
+    data: DataType;
+    object: PageFlip;
+}
+export type EventCallback = (e: WidgetEvent) => void;
+/**
+ * A class implementing a basic event model
+ */
+export declare abstract class EventObject {
+    private events;
+    /**
+     * Add new event handler
+     *
+     * @param {string} eventName
+     * @param {EventCallback} callback
+     */
+    on(eventName: string, callback: EventCallback): EventObject;
+    /**
+     * Removing all handlers from an event
+     *
+     * @param {string} event - Event name
+     */
+    off(event: string): void;
+    protected trigger(eventName: string, app: PageFlip, data?: DataType | null): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/flip/Flip.d.ts

@@ -0,0 +1,126 @@
+import { Point } from '../BasicTypes';
+import { PageFlip } from '../PageFlip';
+import { Render } from '../render/Render';
+import { FlipCalculation } from './FlipCalculation';
+
+/**
+ * Flipping direction
+ */
+export declare const enum FlipDirection {
+    FORWARD = 0,
+    BACK = 1
+}
+/**
+ * Active corner when flipping
+ */
+export declare const enum FlipCorner {
+    BOTTOM = "bottom",
+    TOP = "top"
+}
+/**
+ * State of the book
+ */
+export declare const enum FlippingState {
+    /** During flipping animation */
+    FLIPPING = "flipping",
+    /** Mouse over active corners */
+    FOLD_CORNER = "fold_corner",
+    /** Base state */
+    READ = "read",
+    /** The user folding the page */
+    USER_FOLD = "user_fold"
+}
+/**
+ * Class representing the flipping process
+ */
+export declare class Flip {
+    private readonly render;
+    private readonly app;
+    private flippingPage;
+    private bottomPage;
+    private calc;
+    private state;
+    scale: number;
+    constructor(render: Render, app: PageFlip);
+    /**
+     * Called when the page folding (User drags page corner)
+     *
+     * @param globalPos - Touch Point Coordinates (relative window)
+     */
+    fold(globalPos: Point): void;
+    /**
+     * Page turning with animation
+     *
+     * @param globalPos - Touch Point Coordinates (relative window)
+     */
+    flip(globalPos: Point): void;
+    /**
+     * Start the flipping process. Find direction and corner of flipping. Creating an object for calculation.
+     *
+     * @param {Point} globalPos - Touch Point Coordinates (relative window)
+     *
+     * @returns {boolean} True if flipping is possible, false otherwise
+     */
+    start(globalPos: Point): boolean;
+    /**
+     * Perform calculations for the current page position. Pass data to render object
+     *
+     * @param {Point} pagePos - Touch Point Coordinates (relative active page)
+     */
+    private do;
+    /**
+     * Turn to the specified page number (with animation)
+     *
+     * @param {number} page - New page number
+     * @param {FlipCorner} corner - Active page corner when turning
+     */
+    flipToPage(page: number, corner: FlipCorner): void;
+    /**
+     * Turn to the next page (with animation)
+     *
+     * @param {FlipCorner} corner - Active page corner when turning
+     */
+    flipNext(corner: FlipCorner): void;
+    /**
+     * Turn to the prev page (with animation)
+     *
+     * @param {FlipCorner} corner - Active page corner when turning
+     */
+    flipPrev(corner: FlipCorner): void;
+    /**
+     * Called when the user has stopped flipping
+     */
+    stopMove(): void;
+    /**
+     * Fold the corners of the book when the mouse pointer is over them.
+     * Called when the mouse pointer is over the book without clicking
+     *
+     * @param globalPos
+     */
+    showCorner(globalPos: Point): void;
+    /**
+     * Starting the flipping animation process
+     *
+     * @param {Point} start - animation start point
+     * @param {Point} dest - animation end point
+     * @param {boolean} isTurned - will the page turn over, or just bring it back
+     * @param {boolean} needReset - reset the flipping process at the end of the animation
+     */
+    private animateFlippingTo;
+    /**
+     * Get the current calculations object
+     */
+    getCalculation(): FlipCalculation;
+    /**
+     * Get current flipping state
+     */
+    getState(): FlippingState;
+    private setState;
+    private getDirectionByPoint;
+    private getAnimationDuration;
+    private checkDirection;
+    private reset;
+    private getBoundsRect;
+    private checkState;
+    isPointOnCorners(globalPos: Point): boolean;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/flip/FlipCalculation.d.ts

@@ -0,0 +1,99 @@
+import { Point, RectPoints } from '../BasicTypes';
+import { FlipCorner, FlipDirection } from './Flip';
+
+/**
+ * Class representing mathematical methods for calculating page position (rotation angle, clip area ...)
+ */
+export declare class FlipCalculation {
+    private direction;
+    private corner;
+    /** Calculated rotation angle to flipping page */
+    private angle;
+    /** Calculated position to flipping page */
+    private position;
+    private rect;
+    /** The point of intersection of the page with the borders of the book */
+    private topIntersectPoint;
+    private sideIntersectPoint;
+    private bottomIntersectPoint;
+    private readonly pageWidth;
+    private readonly pageHeight;
+    /**
+     * @constructor
+     *
+     * @param {FlipDirection} direction - Flipping direction
+     * @param {FlipCorner} corner - Flipping corner
+     * @param pageWidth - Current page width
+     * @param pageHeight - Current page height
+     */
+    constructor(direction: FlipDirection, corner: FlipCorner, pageWidth: string, pageHeight: string);
+    /**
+     * The main calculation method
+     *
+     * @param {Point} localPos - Touch Point Coordinates (relative active page!)
+     *
+     * @returns {boolean} True - if the calculations were successful, false if errors occurred
+     */
+    calc(localPos: Point): boolean;
+    /**
+     * Get the crop area for the flipping page
+     *
+     * @returns {Point[]} Polygon page
+     */
+    getFlippingClipArea(): Point[];
+    /**
+     * Get the crop area for the page that is below the page to be flipped
+     *
+     * @returns {Point[]} Polygon page
+     */
+    getBottomClipArea(): Point[];
+    /**
+     * Get page rotation angle
+     */
+    getAngle(): number;
+    /**
+     * Get page area while flipping
+     */
+    getRect(): RectPoints;
+    /**
+     * Get the position of the active angle when turning
+     */
+    getPosition(): Point;
+    /**
+     * Get the active corner of the page (which pull)
+     */
+    getActiveCorner(): Point;
+    /**
+     * Get flipping direction
+     */
+    getDirection(): FlipDirection;
+    /**
+     * Get flipping progress (0-100)
+     */
+    getFlippingProgress(): number;
+    /**
+     * Get flipping corner position (top, bottom)
+     */
+    getCorner(): FlipCorner;
+    /**
+     * Get start position for the page that is below the page to be flipped
+     */
+    getBottomPagePosition(): Point;
+    /**
+     * Get the starting position of the shadow
+     */
+    getShadowStartPoint(): Point;
+    /**
+     * Get the rotate angle of the shadow
+     */
+    getShadowAngle(): number;
+    private calcAngleAndPosition;
+    private updateAngleAndGeometry;
+    private calculateAngle;
+    private getPageRect;
+    private getRectFromBasePoint;
+    private getRotatedPoint;
+    private calculateIntersectPoint;
+    private checkPositionAtCenterLine;
+    private getSegmentToShadowLine;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/index.d.ts

@@ -0,0 +1,22 @@
+import { PageFlipGeometry } from '../utils/PageFlipGeometry';
+import { PageRect, Point, Rect, RectPoints, Segment } from './BasicTypes';
+import { HTMLPageCollection } from './collection/HTMLPageCollection';
+import { ImagePageCollection } from './collection/ImagePageCollection';
+import { NumberArray, PageCollection } from './collection/PageCollection';
+import { DataType, EventCallback, EventObject, WidgetEvent } from './event/EventObject';
+import { Flip, FlipCorner, FlipDirection, FlippingState } from './flip/Flip';
+import { FlipCalculation } from './flip/FlipCalculation';
+import { HTMLPage } from './page/HTMLPage';
+import { ImagePage } from './page/ImagePage';
+import { Page, PageDensity, PageOrientation, PageState } from './page/Page';
+import { PageFlip } from './PageFlip';
+import { CanvasRender } from './render/CanvasRender';
+import { HTMLRender } from './render/HTMLRender';
+import { FrameAction, Orientation, Render, Shadow } from './render/Render';
+import { FlipSetting, Settings, SizeType } from './Settings';
+import { CanvasUI } from './ui/CanvasUI';
+import { HTMLUI } from './ui/HTMLUI';
+import { SwipeData, UI } from './ui/UI';
+
+export { CanvasRender, CanvasUI, EventObject, Flip, FlipCalculation, FlipCorner, FlipDirection, FlippingState, PageFlipGeometry, HTMLPage, HTMLPageCollection, HTMLRender, HTMLUI, ImagePage, ImagePageCollection, Orientation, Page, PageCollection, PageDensity, PageFlip, PageOrientation, Render, Settings, SizeType, UI, };
+export type { DataType, EventCallback, FlipSetting, FrameAction, NumberArray, PageRect, PageState, Point, Rect, RectPoints, Segment, Shadow, SwipeData, WidgetEvent, };

package/library/packages/hybrid/book-reader/src/react/page-flip/page/HTMLPage.d.ts

@@ -0,0 +1,24 @@
+import { Render } from '../render/Render';
+import { Page, PageDensity, PageOrientation } from './Page';
+
+/**
+ * Class representing a book page as a HTML Element
+ */
+export declare class HTMLPage extends Page {
+    private readonly element;
+    private copiedElement;
+    private temporaryCopy;
+    private isLoad;
+    constructor(render: Render, element: HTMLElement, density: PageDensity);
+    newTemporaryCopy(): Page;
+    getTemporaryCopy(): Page;
+    hideTemporaryCopy(): void;
+    draw(tempDensity?: PageDensity): void;
+    private drawHard;
+    private drawSoft;
+    simpleDraw(orient: PageOrientation): void;
+    getElement(): HTMLElement;
+    load(): void;
+    setOrientation(orientation: PageOrientation): void;
+    setDrawingDensity(density: PageDensity): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/page/ImagePage.d.ts

@@ -0,0 +1,19 @@
+import { Render } from '../render/Render';
+import { Page, PageDensity, PageOrientation } from './Page';
+
+/**
+ * Class representing a book page as an image on Canvas
+ */
+export declare class ImagePage extends Page {
+    private readonly image;
+    private isLoad;
+    private loadingAngle;
+    constructor(render: Render, href: string, density: PageDensity);
+    draw(): void;
+    simpleDraw(orient: PageOrientation): void;
+    private drawLoader;
+    load(): void;
+    newTemporaryCopy(): Page;
+    getTemporaryCopy(): Page;
+    hideTemporaryCopy(): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/page/Page.d.ts

@@ -0,0 +1,123 @@
+import { Point } from '../BasicTypes';
+import { Render } from '../render/Render';
+
+/**
+ * State of the page on the basis of which rendering
+ */
+export interface PageState {
+    /** Page rotation angle */
+    angle: number;
+    /** Page scope */
+    area: Point[];
+    /** Rotate angle for hard pages */
+    hardAngle: number;
+    /** Rotate angle for hard pages at renedering time */
+    hardDrawingAngle: number;
+    /** Page position */
+    position: Point;
+}
+export declare const enum PageOrientation {
+    /** Left side page */
+    LEFT = 0,
+    /** Right side page */
+    RIGHT = 1
+}
+export declare const enum PageDensity {
+    HARD = "hard",
+    SOFT = "soft"
+}
+/**
+ * Class representing a book page
+ */
+export declare abstract class Page {
+    /** State of the page on the basis of which rendering */
+    protected state: PageState;
+    /** Render object */
+    protected render: Render;
+    /** Page Orientation */
+    protected orientation: PageOrientation;
+    /** Density at creation */
+    protected createdDensity: PageDensity;
+    /** Density at the time of rendering (Depends on neighboring pages) */
+    protected nowDrawingDensity: PageDensity;
+    protected constructor(render: Render, density: PageDensity);
+    /**
+     * Render static page
+     *
+     * @param {PageOrientation} orient - Static page orientation
+     */
+    abstract simpleDraw(orient: PageOrientation): void;
+    /**
+     * Render dynamic page, using state
+     *
+     * @param {PageDensity} tempDensity - Density at the time of rendering
+     */
+    abstract draw(tempDensity?: PageDensity): void;
+    /**
+     * Page loading
+     */
+    abstract load(): void;
+    /**
+     * Set a constant page density
+     *
+     * @param {PageDensity} density
+     */
+    setDensity(density: PageDensity): void;
+    /**
+     * Set temp page density to next render
+     *
+     * @param {PageDensity}  density
+     */
+    setDrawingDensity(density: PageDensity): void;
+    /**
+     * Set page position
+     *
+     * @param {Point} pagePos
+     */
+    setPosition(pagePos: Point): void;
+    /**
+     * Set page angle
+     *
+     * @param {number} angle
+     */
+    setAngle(angle: number): void;
+    /**
+     * Set page crop area
+     *
+     * @param {Point[]} area
+     */
+    setArea(area: Point[]): void;
+    /**
+     * Rotate angle for hard pages to next render
+     *
+     * @param {number} angle
+     */
+    setHardDrawingAngle(angle: number): void;
+    /**
+     * Rotate angle for hard pages
+     *
+     * @param {number} angle
+     */
+    setHardAngle(angle: number): void;
+    /**
+     * Set page orientation
+     *
+     * @param {PageOrientation} orientation
+     */
+    setOrientation(orientation: PageOrientation): void;
+    /**
+     * Get temp page density
+     */
+    getDrawingDensity(): PageDensity;
+    /**
+     * Get a constant page density
+     */
+    getDensity(): PageDensity;
+    /**
+     * Get rotate angle for hard pages
+     */
+    getHardAngle(): number;
+    abstract newTemporaryCopy(): Page;
+    abstract getTemporaryCopy(): Page;
+    abstract hideTemporaryCopy(): void;
+}

package/library/packages/hybrid/book-reader/src/react/page-flip/render/CanvasRender.d.ts

@@ -0,0 +1,19 @@
+import { PageFlip } from '../PageFlip';
+import { FlipSetting } from '../Settings';
+import { Render } from './Render';
+
+/**
+ * Class responsible for rendering the Canvas book
+ */
+export declare class CanvasRender extends Render {
+    private readonly canvas;
+    private readonly ctx;
+    constructor(app: PageFlip, setting: FlipSetting, inCanvas: HTMLCanvasElement);
+    getContext(): CanvasRenderingContext2D;
+    reload(): void;
+    protected drawFrame(): void;
+    private drawBookShadow;
+    private drawOuterShadow;
+    private drawInnerShadow;
+    private clear;
+}