@leapfrog/interactive-canvas 2.0.8 → 2.0.9

package/dist/object/impl/rectangle.d.ts

@@ -0,0 +1,78 @@
+import { ICanvasObject } from "../canvas-object.interface";
+import { IInteractiveCanvas, IMutableColor, IMutablePosition, IMutableStroke } from "../..";
+import { AbstractCanvasObject } from "../abstract-canvas-object";
+import { CanvasObjectData } from "../canvas-object-data";
+import { fabric } from "fabric";
+/**
+ * Rectangle field. A basic block of color that can be moved and scaled.
+ */
+export interface IRectangle extends ICanvasObject, IMutableStroke, IMutableColor, IMutablePosition {
+}
+export declare class Rectangle extends AbstractCanvasObject<fabric.Rect> implements IRectangle {
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Rect, persistedField?: CanvasObjectData);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getColor(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeColor(): string | null;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrokeColor(color: string | null): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeWidth(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrokeWidth(width: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerHorizontally(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerVertically(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeUp(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeDown(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeLeft(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeRight(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    protected afterScale(event: any): void;
+}

package/dist/object/impl/rich-text.d.ts

@@ -0,0 +1,39 @@
+import { CanvasObjectData, IInteractiveCanvas, Image, IMutableImage, IMutablePosition } from "../..";
+import { ICanvasObject } from "../canvas-object.interface";
+import { fabric } from "fabric";
+/**
+ * Rich text field.
+ * Displays complex text by taking a rendered image of a html block of rich text and displays it on the canvas.
+ * The rendering of the text content to an image must be handled by the caller.
+ * This is an attempt to work around the poor rich-text support of fabric, which supports virtually no rich-text features on the canvas itself.
+ */
+export interface IRichText extends ICanvasObject, IMutableImage, IMutablePosition {
+    /**
+     * HTML rich text content.
+     */
+    htmlContent: string;
+    /**
+     * Set the rich text content by providing the rendered image version of the content and the html content.
+     * @param renderedContentUrl Rendered version of the rich-text content.
+     * @param htmlContent Html version of the rich text content.
+     */
+    setRichTextContent(renderedContentUrl: string, htmlContent: string): Promise<void>;
+}
+export declare class RichText extends Image implements IRichText {
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Image, persistedField?: CanvasObjectData);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    get htmlContent(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    set htmlContent(text: string);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setRichTextContent(renderedContentUrl: string, htmlContent: string): Promise<void>;
+}

package/dist/object/impl/text.d.ts

@@ -0,0 +1,314 @@
+import { Observable } from "rxjs";
+import { IFont, IInteractiveCanvas, IMutableBackgroundColor, IMutableColor, IMutablePosition, IMutableText, IMutableTextStyle, ITextSelection, TextAlignment } from "../..";
+import { ICanvasObject } from "../canvas-object.interface";
+import { AbstractCanvasObject } from "../abstract-canvas-object";
+import { CanvasObjectData } from "../canvas-object-data";
+import { fabric } from "fabric";
+import { ExtendedFabricTextbox } from "./extended-fabric-textbox.interface";
+/**
+ * Text field. Displays customizable text.
+ */
+export interface IText extends ICanvasObject, IMutableColor, IMutableText, IMutableTextStyle, IMutablePosition, IMutableBackgroundColor {
+    /**
+     * @return Whether this text object should resize the canvas.
+     */
+    isResizeCanvas(): boolean;
+    /**
+     * Set whether this text object should resize the canvas.
+     */
+    setResizeCanvas(value: boolean): void;
+    /**
+     * Focus input on the text object.
+     */
+    focus(): void;
+    /**
+     * @return Is the text box currently being edited.
+     */
+    isEditing(): boolean;
+    /**
+     * Start editing the text.
+     */
+    enterEditing(): void;
+    /**
+     * Select all text.
+     */
+    selectAllText(): void;
+    /**
+     * Set the prefill type used for this text field.
+     */
+    setPrefillType(prefillType: string): void;
+    /**
+     * Get the prefill type used for this text field.
+     */
+    getPrefillType(): string;
+    /**
+     * Return the margin needed for bullets on this object.
+     */
+    getBulletMargin(): number;
+    /**
+     * Return the margin needed for ordered lists on this object.
+     */
+    getOrderedListMargin(): number;
+}
+export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> implements IText {
+    private readonly fontLibrary;
+    private baseComponentHeight;
+    private readonly text$;
+    private readonly textSelection$;
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Textbox, persistedField?: CanvasObjectData);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getText(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getText$(): Observable<string>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setText(text: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    replaceText(target: string, replacement: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    insertText(text: string, style?: any[], start?: number, end?: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    insertTextAtSelection(text: string, style?: any[]): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getColor(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getTextSelection(): ITextSelection;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getTextSelection$(): Observable<ITextSelection>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setTextAlign(alignment: TextAlignment): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setCharSpacing(spacing: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setLineHeight(height: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setBold(bold?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setBoldRegion(start: number, end: number, bold?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setItalic(italic?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setItalicRegion(start: number, end: number, italic?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrikethrough(strikethrough?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setUnderline(underline?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setFont(font: IFont): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setFontSize(fontSize: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setTextBackgroundColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerHorizontally(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerVertically(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeUp(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeDown(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeLeft(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeRight(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBackgroundColor(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setBackgroundColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setPrefillType(prefillType: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getPrefillType(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBulletMargin(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getOrderedListMargin(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isResizeCanvas(): boolean;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setResizeCanvas(value: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isEditing(): boolean;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    enterEditing(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    selectAllText(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isBulleted(): boolean;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    enableBullets(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    disableBullets(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isOrderedList(): boolean;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    enableOrderedList(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    disableOrderedList(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setOrderedListStart(start: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getOrderedListStart(): number;
+    getSizeIncreaseSinceCreation(): number;
+    private removeBullets;
+    private removeOrderedListMarkers;
+    private applyBulletListMonkeyPatches;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    protected updateFabricObjectBehavior(): void;
+    protected onTextChange(): void;
+    protected onDelete(): void;
+    protected onSelectionChange(): void;
+    private hasTextSelection;
+    private updateTextSelection;
+    private notifyCanvasOfTextChanges;
+}

package/dist/object/impl/vertical-rule.d.ts

@@ -0,0 +1,83 @@
+import { Observable } from "rxjs";
+import { ICanvasObject } from "../canvas-object.interface";
+import { IInteractiveCanvas, IMutableColor, IMutablePosition } from "../..";
+import { AbstractCanvasObject } from "../abstract-canvas-object";
+import { CanvasObjectData } from "../canvas-object-data";
+import { fabric } from "fabric";
+/**
+ * Vertical rule. A basic block of color that spans the canvas/row height.
+ */
+export interface IVerticalRule extends ICanvasObject, IMutableColor, IMutablePosition {
+    /**
+     * Get the width of the rule.
+     */
+    getStrokeWidth(): number;
+    /**
+     * Get an observable of the width of the rule.
+     */
+    getStrokeWidth$(): Observable<number>;
+    /**
+     * Set the rule width.
+     * @param width New width.
+     */
+    setStrokeWidth(width: number): void;
+}
+export declare class VerticalRule extends AbstractCanvasObject<fabric.Rect> implements IVerticalRule {
+    private readonly strokeWidth$;
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Rect, persistedField?: CanvasObjectData);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeWidth(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeWidth$(): Observable<number>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrokeWidth(width: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getColor(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerHorizontally(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    centerVertically(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeUp(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeDown(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeLeft(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    nudgeRight(): void;
+}

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

@@ -0,0 +1,22 @@
+import { TextAlignment } from "..";
+/**
+ * Defines the set of behaviors that can be adjusted on the interactive canvas, and provides an interface for grouping feature settings into a reusable profile.
+ */
+export interface ICanvasProfile {
+    readonly allowMultiSelect: boolean;
+    readonly allowObjectsToLeaveCanvas: boolean;
+    readonly enterTextEditImmediatelyOnSelect: boolean;
+    readonly allowMove: boolean;
+    readonly allowRotate: boolean;
+    readonly allowScale: boolean;
+    readonly defaultFont?: string;
+    readonly defaultFontSize: number;
+    readonly defaultFontColor: string;
+    readonly defaultLineHeight: number;
+    readonly defaultCharacterSpacing: number;
+    readonly defaultTextAlignment: TextAlignment;
+    readonly defaultBorderColor: string;
+    readonly defaultBorderWidth: number;
+    readonly defaultCutoffColor: string;
+    readonly defaultCutoffWidth: number;
+}

package/dist/profile/default-canvas-profile.d.ts

@@ -0,0 +1,23 @@
+import { TextAlignment } from "..";
+import { ICanvasProfile } from "./canvas-profile.interface";
+/**
+ * Profile with as many features disabled as possible.
+ */
+export declare class DefaultCanvasProfile implements ICanvasProfile {
+    readonly allowMultiSelect: boolean;
+    readonly enterTextEditImmediatelyOnSelect: boolean;
+    readonly allowObjectsToLeaveCanvas: boolean;
+    readonly allowMove: boolean;
+    readonly allowRotate: boolean;
+    readonly allowScale: boolean;
+    readonly defaultFont?: string;
+    readonly defaultFontSize: number;
+    readonly defaultFontColor: string;
+    readonly defaultLineHeight: number;
+    readonly defaultCharacterSpacing: number;
+    readonly defaultTextAlignment: TextAlignment;
+    readonly defaultBorderColor: string;
+    readonly defaultBorderWidth: number;
+    readonly defaultCutoffColor: string;
+    readonly defaultCutoffWidth: number;
+}

package/dist/types/canvas-dimension-restrictions.interface.d.ts

@@ -0,0 +1,15 @@
+export interface ICanvasDimensionRestrictions {
+    readonly width?: {
+        min?: number;
+        max?: number;
+    };
+    readonly height?: {
+        min?: number;
+        max?: number;
+    };
+    readonly volume?: {
+        min?: number;
+        max?: number;
+    };
+    readonly fixed?: boolean;
+}

package/dist/types/canvas-dimensions.interface.d.ts

@@ -0,0 +1,21 @@
+export interface 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;
+    withSize(width: number, height: number): ICanvasDimensions;
+    /**
+     * Convert a number of pixels on the width to millimeters.
+     * @param px Pixel count.
+     */
+    widthPxToMm(px: number): number | undefined;
+    /**
+     * Convert a number of pixels on the height to millimeters.
+     * @param px Pixel count.
+     */
+    heightPxToMm(px: number): number | undefined;
+}

package/dist/types/canvas-state.interface.d.ts

@@ -0,0 +1,11 @@
+import { ICanvasDimensions } from "./canvas-dimensions.interface";
+import { CanvasObjectData } from "..";
+/**
+ * Serialized canvas state that can be used to save the canvas.
+ */
+export interface ICanvasState {
+    readonly dimensions: ICanvasDimensions;
+    readonly canvasJson: string;
+    readonly objects: CanvasObjectData[];
+    readonly backgroundColor?: string;
+}

package/dist/types/dimension-restrictions.interface.d.ts

@@ -0,0 +1,6 @@
+export interface IDimensionRestrictions {
+    minWidth: number;
+    minHeight: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}

package/dist/types/image-type.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum ImageType {
+    DEFAULT = "DEFAULT",
+    BACKGROUND = "BACKGROUND",
+    LOGO = "LOGO",
+    PHOTO = "PHOTO"
+}

package/dist/types/margin.interface.d.ts

@@ -0,0 +1,6 @@
+export interface IMargin {
+    top?: number | null;
+    right?: number | null;
+    bottom?: number | null;
+    left?: number | null;
+}

package/dist/types/object-dimensions.interface.d.ts

@@ -0,0 +1,23 @@
+export interface IObjectDimensions {
+    readonly top: {
+        readonly px: number;
+        readonly mm: number;
+    };
+    readonly left: {
+        readonly px: number;
+        readonly mm: number;
+    };
+    readonly width: {
+        readonly px: number;
+        readonly mm: number;
+    };
+    readonly height: {
+        readonly px: number;
+        readonly mm: number;
+    };
+    readonly angle: number;
+    readonly scale: {
+        readonly x: number;
+        readonly y: number;
+    };
+}

package/dist/types/object-type.enum.d.ts

@@ -0,0 +1,12 @@
+export declare enum ObjectType {
+    TEXT = "TEXT",
+    BORDER = "BORDER",
+    IMAGE = "IMAGE",
+    RECTANGLE = "RECTANGLE",
+    LIBRARY_IMAGE = "LIBRARY_IMAGE",
+    CUTOFF = "CUTOFF",
+    VERTICAL_RULE = "VERTICAL_RULE",
+    HORIZONTAL_RULE = "HORIZONTAL_RULE",
+    RICH_TEXT = "RICH_TEXT",
+    BACKGROUND_IMAGE = "BACKGROUND_IMAGE"
+}

package/dist/types/overflow.interface.d.ts

@@ -0,0 +1,4 @@
+import { IRect } from "./rect.interface";
+export interface IOverflow extends IRect {
+    readonly hasOverflow: boolean;
+}

package/dist/types/position.interface.d.ts

@@ -0,0 +1,9 @@
+export interface IPosition {
+    readonly top?: number;
+    readonly left?: number;
+    readonly width?: number;
+    readonly height?: number;
+    readonly angle?: number;
+    readonly scaleX?: number;
+    readonly scaleY?: number;
+}

package/dist/types/rect.interface.d.ts

@@ -0,0 +1,6 @@
+export interface IRect {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}