@leapfrog/interactive-canvas 1.14.5 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "1.14.5",
+  "version": "2.0.1",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"
@@ -13,12 +13,12 @@
     "watch": "rollup -cw"
   },
   "devDependencies": {
-    "@types/fabric": "^3.6.5",
+    "@types/fabric": "^4.2.0",
     "@types/lodash": "^4.14.153",
     "typescript": "^3.5.3"
   },
   "dependencies": {
-    "fabric": "^3.6.3",
+    "fabric": "^5.2.4",
     "lodash": "^4.17.15",
     "rollup": "^2.13.0",
     "rollup-plugin-typescript2": "^0.27.1",

package/readme.md

@@ -3,31 +3,37 @@
 A set of APIs wrapping the fabric.js library, providing Leapfrog-specific behavior and interactions.
 
 ### Installing
+
 ```
 npm install --save @leapfrog/interactive-canvas
 ```
 
 ### Installing (Node)
+
 If running in node, you additionally need `jsdom`:
+
 ```
 npm install --save jsdom
 ```
 
 ### Building
+
     npm run build
 
 or
 
     npm run watch
-    
+
 ### Using library in another Project
+
 `npm install @leapfrog/interactive-canvas`
 
 ### Linking for local development
 
 You can use `npm link` to see changes to the library immediately in a linked project.
- 
+
 Add the following lines to the `package.json` `scripts` config in the project that uses this library:
+
 ```json
 {
   "scripts": {
@@ -43,11 +49,12 @@ Add the following lines to the `package.json` `scripts` config in the project th
 
 Changes in the library will be visible in the calling project.
 
-Once complete, publish the changes then run `npm run upgrade:lic` to get the latest published version of the
-library in the calling project.
+Once complete, publish the changes then run `npm run upgrade:lic` to get the latest published version of the library in the calling project.
 
 ### Publishing
+
 The `.npmrc` file contains the access token needed to publish to the `@leapfrog` npm repo.
+
 * `npm version <version>` or `npm version <version>-beta.0`
 * `npm run build`
 * `npm publish` or `npm publish --tag beta`

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

@@ -1,372 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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