@leapfrog/interactive-canvas 2.0.8 → 2.0.9-beta.0

package/dist/abstract-interactive-canvas.d.ts

@@ -0,0 +1,372 @@
+import { BehaviorSubject, Observable, Subject } from "rxjs";
+import { ICutoff } from "./object/impl/cutoff";
+import { IRectangle } from "./object/impl/rectangle";
+import { IBorder } from "./object/impl/border";
+import { IImage } from "./object/impl/image";
+import { IText } from "./object/impl/text";
+import { ILayoutManager } from "./layout/layout-manager.interface";
+import { LayoutManager } from "./layout/layout-manager.enum";
+import { IVerticalRule } from "./object/impl/vertical-rule";
+import { IHorizontalRule } from "./object/impl/horizontal-rule";
+import { IInteractiveCanvas } from "./interactive-canvas.interface";
+import { ICanvasProfile } from "./profile/canvas-profile.interface";
+import { IFontLibrary } from "./font/font-library.interface";
+import { ICanvasDimensions } from "./types/canvas-dimensions.interface";
+import { ICanvasDimensionRestrictions } from "./types/canvas-dimension-restrictions.interface";
+import { AbstractCanvasObject } from "./object/abstract-canvas-object";
+import { IRect } from "./types/rect.interface";
+import { ObjectType } from "./types/object-type.enum";
+import { ICanvasObject } from "./object/canvas-object.interface";
+import { ISelectionData } from "./types/selection-data.interface";
+import { ICanvasState } from "./types/canvas-state.interface";
+import { ITextSelection } from "./mutator/mutable-text-style.interface";
+import { fabric } from "fabric";
+import { IRichText } from "./object/impl/rich-text";
+import { IBackgroundImage } from "./object/impl/background-image";
+export declare abstract class AbstractInteractiveCanvas implements IInteractiveCanvas {
+    fabric: any;
+    protected readonly fabricCanvas: fabric.Canvas;
+    protected devicePixelRatio: number;
+    protected readonly IMAGE_CAPTURE_COEFFICIENT: number;
+    abstract readonly headless: boolean;
+    protected readonly fontLibrary: IFontLibrary;
+    protected readonly profile$: BehaviorSubject<ICanvasProfile>;
+    protected readonly layoutManager$: BehaviorSubject<ILayoutManager>;
+    protected readonly backgroundColor$: BehaviorSubject<string>;
+    protected readonly dimensions$: BehaviorSubject<ICanvasDimensions>;
+    protected readonly dimensionRestrictions$: BehaviorSubject<ICanvasDimensionRestrictions>;
+    protected readonly dimensionChangeRejections$: Subject<ICanvasDimensions>;
+    protected readonly zoom$: BehaviorSubject<number>;
+    protected readonly objects$: BehaviorSubject<Array<AbstractCanvasObject<any>>>;
+    protected readonly selection$: BehaviorSubject<SelectionData>;
+    protected baseDimensions: ICanvasDimensions;
+    protected constructor(fabric: any, fabricCanvas: fabric.Canvas, devicePixelRatio: number);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getFontLibrary(): IFontLibrary;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getProfile(): ICanvasProfile;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getProfile$(): Observable<ICanvasProfile>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setProfile(profile: ICanvasProfile): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getLayoutManager(): ILayoutManager;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getLayoutManager$(): Observable<ILayoutManager>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setLayoutManager(layoutManager: LayoutManager): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBackgroundColor(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBackgroundColor$(): Observable<string>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setBackgroundColor(color?: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getDimensions(): ICanvasDimensions;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBaseDimensions(): ICanvasDimensions;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getDimensions$(): Observable<ICanvasDimensions>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setDimensions(dimensions: ICanvasDimensions): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setBaseDimensions(dimensions: ICanvasDimensions): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getDimensionChangeRejections$(): Observable<ICanvasDimensions>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getDimensionsRestrictions(): ICanvasDimensionRestrictions;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getDimensionsRestrictions$(): Observable<ICanvasDimensionRestrictions>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setDimensionRestrictions(restrictions: ICanvasDimensionRestrictions): void;
+    getMargin(): IRect;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getZoom(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getZoom$(): Observable<number>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setZoom(zoom: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getObjects(): ICanvasObject[];
+    /**
+     * Get the list of objects directly.
+     */
+    getObjectsInternal(): Array<AbstractCanvasObject<any>>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getObjectsByTypeInternal<T extends AbstractCanvasObject<any>>(type: ObjectType): T[];
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getObjectsByTypesInternal(...types: ObjectType[]): Array<AbstractCanvasObject<any>>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getObjects$(): Observable<ICanvasObject[]>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    removeObject(target: ICanvasObject): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addImageObject(imageUrl: string): Promise<IImage>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addTextObject(): Promise<IText>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addRichTextObject(imageUrl: string, htmlContent: string): Promise<IRichText>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addRectangleObject(): Promise<IRectangle>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addCutoffObject(): Promise<ICutoff>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addBorderObject(): Promise<IBorder>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addVerticalRuleObject(): Promise<IVerticalRule>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addHorizontalRuleObject(): Promise<IHorizontalRule>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addBackgroundImageObject(imageUrl: string): Promise<IBackgroundImage>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setPrefillData(data: {
+        [id: string]: string;
+    }): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    distributeObjectsVertically(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getSelection(): ISelectionData;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getSelection$(): Observable<ISelectionData>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    select(object: ICanvasObject): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    clearSelection(): void;
+    setMultiSelect(value: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    clear(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    save(): ICanvasState;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    load(canvasState: ICanvasState): Promise<void>;
+    /**
+     * Another hack for bullet points... because they use canvas objects to render the bullets, they get saved when the canvas is persisted... and then loaded into a new canvas, but there's
+     * nothing linking them to the field that needs bullets, so they end up duplicating every time the canvas is saved/loaded. Since we don't use circles for anything else, this just
+     * deletes all circles on canvas load.
+     */
+    private removePersistedBullets;
+    /**
+     * Remove any slave objects persisted to the canvas; their master objects will recreate them.
+     */
+    private removeSlaveObjects;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    toSvg(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    toImage(multiplier?: number): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    createPNGStream(): any;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerUndoState(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    undo(): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    redo(): Promise<void>;
+    /**
+     * Redraw the canvas.
+     */
+    redraw(): void;
+    syncObjectList(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    notifyObjectListChanged(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    notifyTextChanged(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    notifyMarginChanged(): void;
+    removeFabricObject(obj: any): void;
+    protected selectFabricObject(object: fabric.Object): void;
+    protected onTextChange(): void;
+    protected onObjectListChange(): void;
+    protected onDimensionsChange(): void;
+    protected onMarginChange(): void;
+    private bindFields;
+    private bindField;
+    private findFabricObject;
+    private findObject;
+    /**
+     * Reset zoom and canvas dimensions to 1:1 scale, execute a function, then return the canvas to
+     * the previous values.
+     * @param func Function to execute.
+     */
+    private executeWithNormalizedCanvas;
+    /**
+     * Update the actual dimensions of the canvas by multiplying the requested dimensions by the current zoom factor.
+     */
+    private updateCanvasDimensions;
+    protected onProfileChanged(profile: ICanvasProfile): void;
+    protected getFieldByCanvasObject?(object: any): AbstractCanvasObject<any> | null;
+    protected getFieldsByCanvasObject(objects: any[]): Array<AbstractCanvasObject<any>>;
+    private calculateImageCaptureCoefficient;
+    private randomId;
+    private getLowestTextPoint;
+    private trackNewObject;
+    private dimensionsExceedRestrictions;
+}
+export declare class SelectionData implements ISelectionData {
+    readonly empty: boolean;
+    readonly objects: Array<AbstractCanvasObject<any>>;
+    readonly isText: boolean;
+    readonly textSelection: ITextSelection | null;
+    constructor(objects: Array<AbstractCanvasObject<any>>);
+}

package/dist/dimensions/millimeter-dimensions.d.ts

@@ -0,0 +1,15 @@
+import { ICanvasDimensions } from "..";
+export declare class MillimeterDimensions implements ICanvasDimensions {
+    readonly width: number;
+    readonly widthPx: number;
+    readonly widthMm: number;
+    readonly widthUnit: string;
+    readonly height: number;
+    readonly heightPx: number;
+    readonly heightMm: number;
+    readonly heightUnit: string;
+    constructor(width: number, height: number);
+    withSize(width: number, height: number): ICanvasDimensions;
+    widthPxToMm(px: number): number | undefined;
+    heightPxToMm(px: number): number | undefined;
+}

package/dist/dimensions/pixel-canvas-dimensions.d.ts

@@ -0,0 +1,13 @@
+import { ICanvasDimensions } from "..";
+export declare class PixelCanvasDimensions implements ICanvasDimensions {
+    readonly width: number;
+    readonly widthPx: number;
+    readonly widthUnit: string;
+    readonly height: number;
+    readonly heightPx: number;
+    readonly heightUnit: string;
+    constructor(width: number, height: number);
+    withSize(width: number, height: number): ICanvasDimensions;
+    widthPxToMm(px: number): number | undefined;
+    heightPxToMm(px: number): number | undefined;
+}

package/dist/dimensions/print-6-col-canvas-dimensions.d.ts

@@ -0,0 +1,18 @@
+import { ICanvasDimensions } from "..";
+export declare class Print6ColCanvasDimensions implements ICanvasDimensions {
+    readonly width: number;
+    readonly widthPx: number;
+    readonly widthMm: number;
+    readonly widthUnit: string;
+    readonly gutterCount: number;
+    readonly gutterTotalMm: number;
+    readonly columnsTotalMm: number;
+    readonly height: number;
+    readonly heightPx: number;
+    readonly heightMm: number;
+    readonly heightUnit: string;
+    constructor(width: number, height: number);
+    withSize(width: number, height: number): ICanvasDimensions;
+    widthPxToMm(px: number): number | undefined;
+    heightPxToMm(px: number): number | undefined;
+}

package/dist/dimensions/print-8-col-canvas-dimensions.d.ts

@@ -0,0 +1,18 @@
+import { ICanvasDimensions } from "..";
+export declare class Print8ColCanvasDimensions implements ICanvasDimensions {
+    readonly width: number;
+    readonly widthPx: number;
+    readonly widthMm: number;
+    readonly widthUnit: string;
+    readonly gutterCount: number;
+    readonly gutterTotalMm: number;
+    readonly columnsTotalMm: number;
+    readonly height: number;
+    readonly heightPx: number;
+    readonly heightMm: number;
+    readonly heightUnit: string;
+    constructor(width: number, height: number);
+    withSize(width: number, height: number): ICanvasDimensions;
+    widthPxToMm(px: number): number | undefined;
+    heightPxToMm(px: number): number | undefined;
+}

package/dist/font/font-library.d.ts

@@ -0,0 +1,27 @@
+import { IFont } from "./font.interface";
+import { IFontLibrary } from "./font-library.interface";
+import { UnknownFont } from "./unknown-font";
+export declare const UNKNOWN_FONT: UnknownFont;
+export declare class FontLibrary implements IFontLibrary {
+    private readonly _fonts;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerFont(font: IFont): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerFonts(fonts: IFont[]): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getFonts(): IFont[];
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getFont(family: string): IFont;
+}

package/dist/font/font-library.interface.d.ts

@@ -0,0 +1,24 @@
+import { IFont } from "./font.interface";
+/**
+ * The font library manages a list of Fonts registered with the canvas.
+ */
+export interface IFontLibrary {
+    /**
+     * Register a font
+     */
+    registerFont(font: IFont): void;
+    /**
+     * Register fonts
+     */
+    registerFonts(fonts: IFont[]): void;
+    /**
+     * Get all fonts registered in the library.
+     */
+    getFonts(): IFont[];
+    /**
+     * Get a font by family.
+     * If font is not recognized, the {@link UNKNOWN_FONT} will be returned.
+     * @param name Font family.
+     */
+    getFont(name: string): IFont;
+}

package/dist/font/font.interface.d.ts

@@ -0,0 +1,20 @@
+export interface IFont {
+    readonly family: string;
+    readonly normalWeight: number;
+    readonly boldWeight: number;
+    /**
+     * Returns true if the given font weight is considered bold for this font.
+     * @param fontWeight Font weight.
+     */
+    isBold(fontWeight: number): boolean;
+}
+export declare abstract class Font implements IFont {
+    abstract readonly family: string;
+    abstract readonly normalWeight: number;
+    abstract readonly boldWeight: number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isBold(fontWeight: number): boolean;
+}

package/dist/font/unknown-font.d.ts

@@ -0,0 +1,6 @@
+import { Font } from "./font.interface";
+export declare class UnknownFont extends Font {
+    readonly family = "_Unknown_";
+    readonly normalWeight = 400;
+    readonly boldWeight = 700;
+}

package/dist/headless-interactive-canvas.d.ts

@@ -0,0 +1,10 @@
+import { fabric } from "fabric";
+import { AbstractInteractiveCanvas } from "./abstract-interactive-canvas";
+export declare class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
+    readonly headless: boolean;
+    constructor();
+    /**
+     * @override
+     */
+    protected selectFabricObject(object: fabric.Object): void;
+}

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export * from "./dimensions/millimeter-dimensions";
+export * from "./dimensions/pixel-canvas-dimensions";
+export * from "./dimensions/print-6-col-canvas-dimensions";
+export * from "./dimensions/print-8-col-canvas-dimensions";
+export * from "./font/font-library";
+export * from "./font/font-library.interface";
+export * from "./font/font.interface";
+export * from "./font/unknown-font";
+export * from "./layout/abstract-layout-manager";
+export * from "./layout/advanced-layout-manager";
+export * from "./layout/layout-manager.enum";
+export * from "./layout/layout-manager.interface";
+export * from "./layout/standard-layout-manager";
+export * from "./mutator/mutable-background-color.interface";
+export * from "./mutator/mutable-color.interface";
+export * from "./mutator/mutable-image.interface";
+export * from "./mutator/mutable-position.interface";
+export * from "./mutator/mutable-stroke.interface";
+export * from "./mutator/mutable-text-style.interface";
+export * from "./mutator/mutable-text.interface";
+export * from "./object/abstract-canvas-object";
+export * from "./object/canvas-object-data";
+export * from "./object/canvas-object.interface";
+export * from "./object/impl/background-image";
+export * from "./object/impl/border";
+export * from "./object/impl/cutoff";
+export * from "./object/impl/horizontal-rule";
+export * from "./object/impl/image";
+export * from "./object/impl/rectangle";
+export * from "./object/impl/rich-text";
+export * from "./object/impl/text";
+export * from "./object/impl/vertical-rule";
+export * from "./profile/canvas-profile.interface";
+export * from "./profile/default-canvas-profile";
+export * from "./types/canvas-dimension-restrictions.interface";
+export * from "./types/canvas-dimensions.interface";
+export * from "./types/canvas-dimension-restrictions.interface";
+export * from "./types/canvas-dimensions.interface";
+export * from "./types/canvas-state.interface";
+export * from "./types/dimension-restrictions.interface";
+export * from "./types/image-type.enum";
+export * from "./types/margin.interface";
+export * from "./types/object-dimensions.interface";
+export * from "./types/object-type.enum";
+export * from "./types/overflow.interface";
+export * from "./types/position.interface";
+export * from "./types/rect.interface";
+export * from "./types/selection-data.interface";
+export * from "./types/text-alignment.interface";
+export * from "./abstract-interactive-canvas";
+export * from "./headless-interactive-canvas";
+export * from "./interactive-canvas";
+export * from "./interactive-canvas.interface";
+export { ExtendedFabricTextbox } from "./object/impl/extended-fabric-textbox.interface";

package/dist/interactive-canvas.d.ts

@@ -0,0 +1,25 @@
+import { AbstractInteractiveCanvas } from "./abstract-interactive-canvas";
+export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
+    protected devicePixelRatio: number;
+    readonly headless: boolean;
+    private readonly undoStack;
+    constructor(canvas: HTMLCanvasElement | string | null, devicePixelRatio: number);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerUndoState(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    undo(): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    redo(): Promise<void>;
+    private onFabricSelectionChanged;
+    private enterTextSelectionModeIfRequired;
+    private onTextEditing;
+}