UNPKG

@magflip/core

Version:

Contains core MagFlip objects such as Book, Page, BookShelf, and BookViewer.

920 lines (905 loc) 21.9 kB
interface ISize { width: number; height: number; } interface ISizeExt { width: number; height: number; readonly diagonal: number; } declare class SizeExt implements ISizeExt { width: number; height: number; readonly diagonal: number; constructor(w: number, h: number); } interface IBookSize { closed: ISizeExt; opened: ISizeExt; } declare class BookSize { closed: ISizeExt; opened: ISizeExt; constructor(size: IBookSize); } type Listener = (...args: any[]) => void; declare class MZEvent { private listeners; addEventListener(event: string, listener: Listener): void; removeEventListener(event: string, listener: Listener): void; emitEvent(event: string, ...args: any[]): void; } type DeepRequired<T> = Required<{ [K in keyof T]: T[K] extends Required<T[K]> ? T[K] : DeepRequired<T[K]>; }>; interface IPublication { name: string; location: string; publishedDate: string; } declare enum PageType { Page = "Page", Cover = "Cover", Empty = "Empty", Blank = "Blank" } declare enum PageLabelType { Default = "Default", Empty = "Empty" } declare enum DefaultSize { bookWidth = 600, bookHeight = 900, pageWidth = 600, pageHeight = 900 } declare enum BookType { Book = "Book", Magazine = "Magazine", Newspaper = "Newspaper" } declare enum BookStatus { Open = "Open", Close = "Close" } declare enum EventStatus { None = 0, AutoFlip = 8, AutoFlipFromCorner = 12, AutoFlipToCorner = 10, Flipping = 128, SnappingBack = 144, FlippingForward = 160, FlippingBackward = 192, Dragging = 2048 } declare enum Zone { LT = 66, LC = 34, LB = 18, RT = 65, RC = 33, RB = 17, Left = 2, Right = 1, Top = 64, Center = 32, Bottom = 16 } declare enum AutoFlipType { FixedWidth = 0, MouseCursor = 1 } declare enum ViewerType { Flipping = "flipping", Scrolling = "scrolling" } interface IZoneEventParams { zone: Zone; } interface IEventHandlers { clicked: (event: Event, param: any) => void; mousemoved: (event: Event, param: any) => void; } interface IPoint { x: number; y: number; } interface IBox { x: number; y: number; width: number; height: number; } interface IBookData { id: string; status?: BookStatus; title?: string; author?: string; type?: BookType; publication?: IPublication; lastPageIndex: number; labels?: { [n: number | string]: IPageLabelData; }; /** * The book size when it is close. */ readonly size?: IBookSize; thumbnails?: { spine: string; small: string; medium: string; cover: { front: string; back: string; }; }; } interface IBook extends IBookData { fetchPage(index: number): Promise<IPageData>; fetchPages(indexRange: { start: number; cnt: number; }): Promise<IPageData[]>; importPages(pages: IPageData[], size: ISize): void; addPage(page: IPage, index: number): void; removePage(index: number): void; getPage(index: number): IPage; getPages(): { [n: string]: IPage; }; getPageCnt(): number; getPageEl(index: number): HTMLElement; createEmptyPage(index: number, size?: ISize): IPage; resetBook(): Promise<void>; } interface IBookEl { readonly elementOnShelf: HTMLElement; readonly element: HTMLElement; readonly pageContainerEl: HTMLElement; appendPageEl(pageEl: HTMLElement): void; prependPageEl(pageEl: HTMLElement): void; removePageEl(pageEl: HTMLElement): void; } interface IPageLabel extends IPageLabelData, IPageLabelEl { setEvents(): void; } interface IPageLabelData { index: number; pageIndex: number; type?: PageLabelType; size?: ISize; top?: number; ignore?: boolean; content?: any; backgroundColor?: string; opacity?: number | string; onClick?: (pageIndex: number) => void; } interface IPageLabelEl { readonly element: HTMLElement; readonly contentEl: HTMLElement; resetLabelEls(): void; } interface IPage extends IPageData, IPageEl { size: ISize; setEvents(): void; } interface IPageEl { readonly element: HTMLElement; readonly contentContainerEl: HTMLElement; readonly contentEl: HTMLElement; resetPageEls(): void; } interface IPageData { id: string; type?: PageType; size?: ISize; index: number; number?: number | undefined; ignore?: boolean; content?: any; image?: string; } interface IBookView { readonly id: string; readonly bookContainerEl: HTMLElement; getBookContainerEl(): HTMLElement; view(book: IBookData, openPageIndex?: number): HTMLElement; closeViewer(): void; zoom(zoomLevel: number): void; nextPage(offsetY?: number): void; prevPage(offsetY?: number): void; moveTo(pageIndex: number, offsetY?: number): void; } interface ILine { p1: Point; p2: Point; } interface ITopBottom { top: number; bottom: number; } interface ILeftRight { left: number; right: number; } interface IRect extends ITopBottom, ILeftRight { width: number; height: number; } declare class Point implements IPoint { x: number; y: number; constructor(point?: IPoint); toString(): string; } declare class Line { p1: Point; p2: Point; constructor(p1: Point, p2: Point); } declare class Rect implements IRect { left: number; right: number; top: number; bottom: number; width: number; height: number; private center; constructor(rect?: IRect); get leftTop(): { x: number; y: number; }; get leftCenter(): { x: number; y: number; }; get leftBottom(): { x: number; y: number; }; get rightTop(): { x: number; y: number; }; get rightCenter(): { x: number; y: number; }; get rightBottom(): { x: number; y: number; }; get centerTop(): { x: number; y: number; }; get centerCenter(): Point; get centerBottom(): { x: number; y: number; }; } /** * This is Magzog Math object that contains math util-methods. */ declare class MZMath { /** * Finds the symmetric point of a given target point with respect to a reference origin point. * * This function calculates the point that is symmetric to the target point, * using the origin point as the reference. The symmetric point is determined by * reflecting the target point across the origin. * * @param {Object} originPoint - The reference point for symmetry, containing x and y coordinates. * @param {Object} targetPoint - The point for which the symmetric point is calculated, containing x and y coordinates. * @returns {Object} - The symmetric point with x and y coordinates. */ static findSymmetricPoint(originPoint: Point, targetPoint: Point): Point; /** * Get degree. * 0 <= degree <= 180 or 0 < degree < -180 * @param startPoint * @param destPoint * @returns */ static getDegree(startPoint: Point, destPoint: Point): number; /** * Get degree. * 0 <= degree * @param startPoint * @param destPoint * @returns */ static getDegreePositive(startPoint: Point, destPoint: Point): number; /** * Get radian angle. * 0 <= radian <= pi or 0 < radian < -pi * @param startPoint * @param destPoint * @returns */ static getRadian(startPoint: Point, destPoint: Point): number; /** * Get radian angle. * 0 <= radian * @param startPoint * @param destPoint * @returns */ static getRadianPositive(startPoint: Point, destPoint: Point): number; /** * Returns the global location and size of the input element. * @param el * @returns */ static getOffset(el: HTMLDivElement): { top: number; left: number; width: number; height: number; bottom: number; right: number; }; /** * Ignore the scroll position. * @param el * @returns */ static getOffset4Fixed(el: HTMLElement): Rect; /** * Returns the length between two points. * @param point1 * @param point2 * @returns */ static getLength(point1: Point, point2: Point): number; /** * Find a point on line AB that is a fixed distance from point A toward point B. * @param a * @param b * @param distance * @returns */ static findPointOnLine(a: Point, b: Point, distance: number): Point; /** * Calculates and returns the coordinates of point D, where the perpendicular from point C meets the line segment AB. * @param line line * @param c * @returns */ static findPerpendicularFoot(line: Line, c: Point): Point; } declare function deepMerge<T>(target: any, source: any): T; declare class Base extends MZEvent { constructor(); } /** * Book element management class */ declare class BookEl extends Base { /** * Returns and sets the info of thumbnails for the book. */ thumbnails: { spine: string; small: string; medium: string; cover: { front: string; back: string; }; }; /** * Returns the the book element shown on the book shelf. */ readonly elementOnShelf: HTMLElement; /** * Returns the book element shown on the book viewer. */ readonly element: HTMLElement; /** * Returns the page container element. */ readonly pageContainerEl: HTMLElement; /** * Returns the label container element. */ readonly labelContainerEl: HTMLElement; /** * Returns the left sub container element. */ /** * Returns the right sub container element. */ constructor(book: IBookData); /** * Appends a page element into the page container element. * @param pageEl the page element to append. */ appendPageEl(pageEl: HTMLElement): void; /** * Prepends a page element into the page container element. * @param pageEl the page element to prepend. */ prependPageEl(pageEl: HTMLElement): void; /** * Remove a page element from the page container element. * @param pageEl the page element to remove. */ removePageEl(pageEl: HTMLElement): void; /** * Creates the book element and child elements * @returns */ private createBookElement; /** * Creates and adds the page labels to the book. * @param labels */ private createLabels; /** * Adds the page label to the book. * @param label */ private addLabelEl; /** * Clears the children elements of the page container's element. */ private clearPageEls; /** * */ protected resetBookEls(): void; } /** * Page class */ declare class PageEl extends Base { /** * Returns the element of this page. */ readonly element: HTMLElement; /** * Returns the content container element of this page. */ readonly contentContainerEl: HTMLElement; /** * Returns the content element of this page. */ readonly contentEl: HTMLElement; constructor(page: IPageData); /** * Creates the elements of this page. * @param page * @returns */ private createPageElement; resetPageEls(): void; } /** * */ declare enum PageEvent { } /** * Page class */ declare class Page extends PageEl implements IPage { /** * Returns the page's id. */ readonly id: string; /** * Returns the page's type. */ readonly type: PageType; /** * Returns the page's size. */ readonly size: ISize; /** * Returns the page's index which is the sequence number. * This number is unique in a book. */ readonly index: number; /** * Returns the page's number which is set by editors. */ readonly number: number | undefined; /** * Returns the ignore value whether this page is ignored or not. */ ignore: boolean; /** * Returns the content of this page. */ content: any; image: string; constructor(page: IPageData); /** * Creates and return an empty page. * @param index * @param size * @returns */ static emptyPage(index: number, size: ISize): Page; /** * Creates and return an blank page. * @param index * @param size * @returns */ static blankPage(index: number, size: ISize): Page; /** * Creates and return an empty or blank page. * @param index * @param size * @returns */ private static createEmptyOrBlankPage; /** * Adds all events related to this page. * @param handlers */ setEvents(): void; } type TRequiredBookData = DeepRequired<IBookData>; declare enum BookEvent { pageAdded = "pageAdded" } /** * Book class */ declare class Book extends BookEl implements IBook { private bookData; /** * Returns the book id. */ readonly id: string; /** * Returns and sets the book status such as close, open and so on. */ status: BookStatus; /** * Returns and sets the book type. */ type: BookType; /** * Returns the book's title. */ readonly title: string; /** * Returns the book's author. */ readonly author: string; /** * Returns the book's publication. */ readonly publication: IPublication; /** * Returns the book's size. */ readonly size: BookSize; /** * Return the last page index. */ readonly lastPageIndex: number; /** * Returns and sets pages that the book contains */ private pages; /** * Returns and sets the page labels. */ private pageLabels; /** * */ thumbnails: { spine: string; small: string; medium: string; cover: { front: string; back: string; }; }; constructor(book: IBookData); /** * Fetches and adds a page from server. * @param index * @returns */ fetchPage(index: number): Promise<IPageData>; /** * Fetches and adds pages from server. * @param indexRange the indice of the pages to fetches * @returns */ fetchPages(indexRange: { start: number; cnt: number; }): Promise<IPageData[]>; importPages(pages: IPageData[], size: ISize): void; /** * Adds a page object to the book. * @param page * @param index */ addPage(page: IPage, index: number): void; /** * Remove a page object from the book. * @param index */ removePage(index: number): void; /** * Returns the page object with the page index. * @param index * @returns */ getPage(index: number, emptyPage?: boolean): IPage; /** * Returns the pages object. * @returns */ getPages(): { [n: string]: IPage; [n: number]: IPage; }; /** * Return the pages array length. */ getPageCnt(): number; /** * Returns the page element with the page index. * @param index * @returns */ getPageEl(index: number): HTMLElement; /** * Creates and adds an empty page object. * @param index * @param size * @returns */ createEmptyPage(index: number, size?: ISize): Page; /** * Sets the events for the book. * @param event * @param handler */ setEvents(event: BookEvent, handler: (event: Event) => void): void; resetBook(): Promise<void>; } /** * This is an object type used to reference Elements related to the Viewer. */ type BookViewerElements = { bookViewerEl: HTMLElement; }; /** * BookViewer class * Gutter: * */ declare class BookViewer extends Base { /** * Zoom level of the viewer. */ private zoomLevel; /** * */ private registeredViews; private registeredEventHandlers; private callbackEventHandler; /** * Book object. * This contains the most information of a book loaded to this viewer. */ private book; /** * This is html document id of the book viewer. * It is set when creating a viewer instance or default value 'bookViewer' is set. */ private readonly bookViewerDocId; /** * Returns the instance of BookManager. */ private readonly bookShelfManager; /** * Returns the DOM element of the book viewer with id 'bookViewer'. */ readonly element: HTMLElement; /** * The DOM element of the book container with id 'bookContainer'. */ private _bookContainerEl; /** * Getter of the bookContainerEl. */ get bookContainerEl(): HTMLElement | undefined; /** * Setter of the bookContainerEl. * @param el */ private set bookContainerEl(value); /** * Returns the instance of current Viewer. */ private curView; constructor(bookManager: BookShelfManager); /** * Creates the viewer related elements. * @returns ViewerElements */ private createViewerElements; /** * * @param id * @returns */ private getView; /** * * @param id * @param view */ registerView(view: IBookView): void; /** * Sets the zoom level of the viewer. * @param zoomLevel */ setZoomLevel(zoomLevel: number): void; /** * Sets the current view. * @param viewId */ setCurView(viewId: string): void; /** * Opens the book on the viewer. * @param book * @param openPageIndex */ view(book: Book, openPageIndex?: number): void; /** * Closes the book on the viewer. */ closeViewer(): void; /** * * @param id */ changeView(id: string): void; } interface IBookShelfManagerConfig { hideBookShelf?: boolean; onViewerClose?: () => void; onViewerOpen?: () => void; } /** * BookManager class */ declare class BookShelfManager { config: IBookShelfManagerConfig; /** * Returns the BookShelf instance. */ private readonly bookShelf; /** * Returns the BookViewer instance. */ private readonly bookViewer; /** * * @param bookShelfDocId * @param bookViewerId */ constructor(config?: IBookShelfManagerConfig); /** * Change viewing book style. * @param type */ getBookViewer(): BookViewer; /** * Gets a book holder's element with the book's id. * @param id * @returns */ getBookHolder(id: string): Element; /** * Gets a book object with the book's id. * @param id * @returns */ getBook(id: string): Book; /** * Load books from the server and add them to the shelf. */ loadAndAddBooks(): Promise<void>; /** * Load a book from the server and add it to the shelf. * @param id */ loadAndAddBook(id: string): Promise<void>; importBookToShelf(book: Book): void; /** * Append the book to the shelf. * @param id */ addBookToShelf(book: IBookData): void; /** * Pickup a book from the shelf and view it on the viewer. * @param book * @returns */ pickupAndView(book: Book): void; /** * Put back the book from the viewer to the shelf. * @param book */ returnBookToShelf(book: Book | undefined): void; } interface IBookOnShelf { book: Book; bookHolderEl: Element; position: number; } /** * BookShelf class */ declare class BookShelf { /** * Returns the BookManager's instance. */ readonly bookManager: BookShelfManager; /** * Returns the book shelf's document id. */ readonly bookShelfDocId: string; /** * Returns and sets the books on the book shelf. */ booksOnShelf: { [id: string]: IBookOnShelf; }; /** * Returns this book shelf's element. */ readonly element: Element; constructor(bookManager: BookShelfManager); /** * Creates all book shelf elements. * @returns */ createElement(): Element; /** * Gets the book holder's element with the book id. * @param id * @returns */ getBookHolder(id: string): Element; /** * Gets the book object with the book id. * @param id * @returns */ getBook(id: string): Book; /** * Adds a book to this book shelf. * @param book */ addBook(book: Book, event: { [key: string]: (event: Event) => void; }): void; /** * Put back the book from the viewer to the shelf. * @param book */ putbackBook(book: Book): void; } export { AutoFlipType, Base, Book, BookEl, BookEvent, BookShelf, BookShelfManager, BookSize, BookStatus, BookType, BookViewer, type BookViewerElements, type DeepRequired, DefaultSize, EventStatus, type IBook, type IBookData, type IBookEl, type IBookShelfManagerConfig, type IBookSize, type IBookView, type IBox, type IEventHandlers, type ILeftRight, type ILine, type IPage, type IPageData, type IPageEl, type IPageLabel, type IPageLabelData, type IPageLabelEl, type IPoint, type IPublication, type IRect, type ISize, type ISizeExt, type ITopBottom, type IZoneEventParams, Line, MZEvent, MZMath, Page, PageEl, PageEvent, PageLabelType, PageType, Point, Rect, SizeExt, type TRequiredBookData, ViewerType, Zone, deepMerge };