@leapfrog/interactive-canvas 0.1.0

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,22 @@
+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
+     */
+    getFonts(): IFont[];
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getFont(family: string): IFont;
+}

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

@@ -0,0 +1,20 @@
+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;
+    /**
+     * 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/index.d.ts

@@ -0,0 +1,47 @@
+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-text.interface";
+export * from "./mutator/mutable-text-style.interface";
+export * from "./object/abstract-canvas-object";
+export * from "./object/canvas-object.interface";
+export * from "./object/canvas-object-data";
+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/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 "./interactive-canvas.impl";
+export * from "./interactive-canvas.interface";

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

@@ -0,0 +1,305 @@
+import { Observable } 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";
+export declare class InteractiveCanvas implements IInteractiveCanvas {
+    protected devicePixelRatio: number;
+    private readonly IMAGE_CAPTURE_COEFFICIENT;
+    private readonly fontLibrary;
+    private readonly profile$;
+    private readonly layoutManager$;
+    private readonly backgroundColor$;
+    private readonly dimensions$;
+    private readonly dimensionRestrictions$;
+    private readonly dimensionChangeRejections$;
+    private readonly zoom$;
+    private readonly objects$;
+    private readonly selection$;
+    private readonly fabricCanvas;
+    private baseDimensions;
+    constructor(elementId: string, 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>>;
+    getObjectsByTypeInternal<T extends AbstractCanvasObject<any>>(type: ObjectType): T[];
+    getObjectsByTypesInternal(...types: ObjectType[]): Array<AbstractCanvasObject<any>>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getObjects$(): Observable<ICanvasObject[]>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    removeObject(target: ICanvasObject): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addImageObject(imageUrl: string): Observable<IImage>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addTextObject(): Observable<IText>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addRectangleObject(): Observable<IRectangle>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addCutoffObject(): Observable<ICutoff>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addBorderObject(): Observable<IBorder>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addVerticalRuleObject(): Observable<IVerticalRule>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addHorizontalRuleObject(): Observable<IHorizontalRule>;
+    /**
+     * @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;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    toSvg(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    toImage(): string;
+    /**
+     * Redraw the canvas.
+     */
+    redraw(): void;
+    syncObjectList(): void;
+    onTextChange(): void;
+    onObjectListChange(): void;
+    onDimensionsChange(): void;
+    onMarginChange(): void;
+    notifyObjectListChanged(): void;
+    removeFabricObject(obj: any): 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;
+    private calculateImageCaptureCoefficient;
+    private onProfileChanged;
+    private onFabricSelectionChanged;
+    private onTextEditing;
+    private getFieldByCanvasObject;
+    private getFieldsByCanvasObject;
+    private randomId;
+    private getLowestTextPoint;
+    private trackNewObject;
+    private enterTextSelectionModeIfRequired;
+    private dimensionsExceedRestrictions;
+}

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

@@ -0,0 +1,221 @@
+import { Observable } from "rxjs";
+import { IImage } from "./object/impl/image";
+import { IText } from "./object/impl/text";
+import { IRectangle } from "./object/impl/rectangle";
+import { ICutoff } from "./object/impl/cutoff";
+import { ILayoutManager } from "./layout/layout-manager.interface";
+import { IBorder } from "./object/impl/border";
+import { LayoutManager } from "./layout/layout-manager.enum";
+import { IVerticalRule } from "./object/impl/vertical-rule";
+import { IHorizontalRule } from "./object/impl/horizontal-rule";
+import { IFontLibrary } from "./font/font-library.interface";
+import { ICanvasProfile } from "./profile/canvas-profile.interface";
+import { ICanvasDimensionRestrictions } from "./types/canvas-dimension-restrictions.interface";
+import { IRect } from "./types/rect.interface";
+import { ICanvasObject } from "./object/canvas-object.interface";
+import { ICanvasDimensions } from "./types/canvas-dimensions.interface";
+import { ISelectionData } from "./types/selection-data.interface";
+import { ICanvasState } from "./types/canvas-state.interface";
+/**
+ * New leapfrog canvas implementation c. 2019.
+ */
+export interface IInteractiveCanvas {
+    /**
+     * Get the canvas font library.
+     */
+    getFontLibrary(): IFontLibrary;
+    /**
+     * Get the current canvas profile.
+     * The profile determines what operations are permitted, such as moving or scaling components.
+     */
+    getProfile(): ICanvasProfile;
+    /**
+     * Get an observable of the current canvas profile.
+     */
+    getProfile$(): Observable<ICanvasProfile>;
+    /**
+     * Set the canvas profile.
+     * @param profile New profile.
+     */
+    setProfile(profile: ICanvasProfile): void;
+    /**
+     * Get the current layout manager.
+     * The layout manager controls how elements on the canvas are laid out.
+     */
+    getLayoutManager(): ILayoutManager;
+    /**
+     * Get an observable of the current layout manager.
+     */
+    getLayoutManager$(): Observable<ILayoutManager>;
+    /**
+     * Set the layout manager.
+     * @param layoutManager New layout manager.
+     */
+    setLayoutManager(layoutManager: LayoutManager): void;
+    /**
+     * Get the current canvas background color.
+     */
+    getBackgroundColor(): string;
+    /**
+     * Get an observable of the current background color.
+     */
+    getBackgroundColor$(): Observable<string>;
+    /**
+     * Set the canvas background color.
+     * @param color New color.
+     */
+    setBackgroundColor(color: string): void;
+    /**
+     * Get the current canvas dimensions.
+     */
+    getDimensions(): ICanvasDimensions;
+    /**
+     * Get the current canvas base dimensions.
+     */
+    getBaseDimensions(): ICanvasDimensions;
+    /**
+     * Get an observable of the current canvas dimensions.
+     */
+    getDimensions$(): Observable<ICanvasDimensions>;
+    /**
+     * Set new canvas dimensions.
+     * @param dimensions New dimensions.
+     */
+    setDimensions(dimensions: ICanvasDimensions): void;
+    /**
+     * Set new canvas base dimensions. Automatic resize will occur relative to these base dimensions.
+     * @param dimensions New dimensions.
+     */
+    setBaseDimensions(dimensions: ICanvasDimensions): void;
+    /**
+     * Get an observable of any rejected dimension changes.
+     */
+    getDimensionChangeRejections$(): Observable<ICanvasDimensions>;
+    /**
+     * Set restrictions on canvas dimensions.
+     * @param restrictions Optional restrictions.
+     */
+    setDimensionRestrictions(restrictions: ICanvasDimensionRestrictions): void;
+    /**
+     * Get an observable of the canvas dimension restrictions.
+     */
+    getDimensionsRestrictions$(): Observable<ICanvasDimensionRestrictions>;
+    /**
+     * Get canvas dimension restrictions.
+     */
+    getDimensionsRestrictions(): ICanvasDimensionRestrictions;
+    /**
+     * Get the size of the canvas margin (the area occupied by borders/cutoff rules).
+     */
+    getMargin(): IRect;
+    /**
+     * Get the current canvas zoom factor.
+     */
+    getZoom(): number;
+    /**
+     * Get an observable of the current canvas zoom factor.
+     */
+    getZoom$(): Observable<number>;
+    /**
+     * Set a new canvas zoom factor.
+     * @param zoom Zoom factor.
+     */
+    setZoom(zoom: number): void;
+    /**
+     * Get the current canvas object list.
+     */
+    getObjects(): ICanvasObject[];
+    /**
+     * Get an observable of the current canvas object list.
+     */
+    getObjects$(): Observable<ICanvasObject[]>;
+    /**
+     * Remove an object from the canvas.
+     * @param object The object to remove.
+     */
+    removeObject(object: ICanvasObject): void;
+    /**
+     * Add an image object to the canvas.
+     * @param imageUrl Url for image content.
+     */
+    addImageObject(imageUrl: string): Observable<IImage>;
+    /**
+     * Add a text object to the canvas.
+     */
+    addTextObject(): Observable<IText>;
+    /**
+     * Add a rectangle object to the canvas.
+     */
+    addRectangleObject(): Observable<IRectangle>;
+    /**
+     * Add a rectangle object to the canvas.
+     */
+    addCutoffObject(): Observable<ICutoff>;
+    /**
+     * Add a border object to the canvas.
+     */
+    addBorderObject(): Observable<IBorder>;
+    /**
+     * Add a vertical rule object to the canvas.
+     */
+    addVerticalRuleObject(): Observable<IVerticalRule>;
+    /**
+     * Add a horizontal rule object to the canvas.
+     */
+    addHorizontalRuleObject(): Observable<IHorizontalRule>;
+    /**
+     * Set the data used to prefill text into the canvas.
+     * @param data Prefill data.
+     */
+    setPrefillData(data: {
+        [id: string]: string;
+    }): void;
+    /**
+     * Distribute text and image objects equally along the vertical axis.s
+     */
+    distributeObjectsVertically(): void;
+    /**
+     * Get data on the current selection.
+     */
+    getSelection(): ISelectionData;
+    /**
+     * Get an observable of the current selection data.
+     */
+    getSelection$(): Observable<ISelectionData>;
+    /**
+     * Select a field.
+     * @param field The field to select.
+     */
+    select(field: ICanvasObject): void;
+    /**
+     * Deselects any selected fields.
+     */
+    clearSelection(): void;
+    /**
+     * Enable/disable multi select.
+     * @param value value.
+     */
+    setMultiSelect(value: boolean): void;
+    /**
+     * Clear the canvas.
+     */
+    clear(): void;
+    /**
+     * Serialize the canvas for saving.
+     * Returns an observable that will complete after the load process is finished.
+     */
+    save(): ICanvasState;
+    /**
+     * Load the canvas state from a previously {@link IInteractiveCanvas#save saved} state.
+     * @param canvasState Persisted canvas state.
+     */
+    load(canvasState: ICanvasState): Promise<void>;
+    /**
+     * Export the canvas to an SVG.
+     */
+    toSvg(): string;
+    /**
+     * Export the canvas to a DataUrl image.
+     */
+    toImage(): string;
+}