@leapfrog/interactive-canvas 0.1.0

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

@@ -0,0 +1,89 @@
+import { Observable } from "rxjs";
+import { ICanvasObject } from "../canvas-object.interface";
+import { IMutableColor, IMutablePosition } from "../..";
+import { AbstractCanvasObject } from "../abstract-canvas-object";
+import { CanvasObjectData } from "../canvas-object-data";
+import { InteractiveCanvas } from "../../interactive-canvas.impl";
+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: InteractiveCanvas, 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
+     */
+    setHeight(height: number): 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,14 @@
+export interface ICanvasDimensionRestrictions {
+    readonly width?: {
+        min?: number;
+        max?: number;
+    };
+    readonly height?: {
+        min?: number;
+        max?: number;
+    };
+    readonly volume?: {
+        min?: number;
+        max?: number;
+    };
+}

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,10 @@
+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"
+}

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,6 @@
+export interface IPosition {
+    readonly top?: number;
+    readonly left?: number;
+    readonly width?: number;
+    readonly height?: 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;
+}

package/dist/types/selection-data.interface.d.ts

@@ -0,0 +1,19 @@
+import { ICanvasObject, ITextSelection } from "..";
+export interface ISelectionData {
+    /**
+     * The currently selected fields.
+     */
+    readonly objects: ICanvasObject[];
+    /**
+     * True if there is nothing selected.
+     */
+    readonly empty: boolean;
+    /**
+     * True if text is currently being edited.
+     */
+    readonly isText: boolean;
+    /**
+     * Text selection data.
+     */
+    readonly textSelection: ITextSelection | null;
+}

package/dist/types/text-alignment.interface.d.ts

@@ -0,0 +1 @@
+export declare type TextAlignment = "left" | "center" | "right" | "justify";

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@leapfrog/interactive-canvas",
+  "version": "0.1.0",
+  "description": "Leapfrog interactive canvas",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "main": "dist/interactive-canvas.js",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "watch": "webpack --mode=production --watch"
+  },
+  "devDependencies": {
+    "@types/fabric": "^3.6.5",
+    "@types/lodash": "^4.14.153",
+    "clean-webpack-plugin": "^3.0.0",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.3",
+    "unminified-webpack-plugin": "^2.0.0",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.7"
+  },
+  "dependencies": {
+    "fabric": "^3.6.3",
+    "lodash": "^4.17.15",
+    "rxjs": "^6.5.5",
+    "ts-optchain": "^0.1.8"
+  },
+  "author": "",
+  "license": "UNLICENSED"
+}

package/readme.md

@@ -0,0 +1,43 @@
+# Leapfrog Interactive Canvas #
+
+A set of APIs wrapping the fabric.js library, providing Leapfrog-specific behavior and interactions.
+
+### 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": {
+    "link:lic": "npm link @leapfrog/interactive-canvas",
+    "upgrade:lic": "npm install @leapfrog/interactive-canvas@latest"
+  }
+}
+```
+
+* In this project: `npm link`
+* In the calling project: `npm run link:lic`
+* In this project: `npm run watch`
+
+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.
+
+### Publishing
+The `.npmrc` file contains the access token needed to publish to the `@leapfrog` npm repo.
+* Increment the version number in `package.json`.
+* `npm install` to update the `package-lock.json`.
+* `npm run build`
+* `npm publish`