@bensitu/image-editor 1.2.0 → 1.2.1

package/image-editor.d.ts

@@ -0,0 +1,181 @@
+// image-editor.d.ts - TypeScript declarations for @bensitu/image-editor
+
+declare module '@bensitu/image-editor' {
+  import { Canvas, Image as FabricImage, Object as FabricObject } from 'fabric';
+
+  export interface LabelOptions {
+    getText?: (mask: MaskObject, maskIndex: number) => string;
+    create?: (mask: MaskObject, fabric: any) => FabricObject;
+    textOptions?: Record<string, any>;
+  }
+
+  export interface CropOptions {
+    minWidth?: number;
+    minHeight?: number;
+    padding?: number;
+    hideMasksDuringCrop?: boolean;
+    preserveMasksAfterCrop?: boolean;
+    allowRotationOfCropRect?: boolean;
+  }
+
+  export interface ImageEditorOptions {
+    canvasWidth?: number;
+    canvasHeight?: number;
+    backgroundColor?: string;
+    animationDuration?: number;
+    minScale?: number;
+    maxScale?: number;
+    scaleStep?: number;
+    rotationStep?: number;
+
+    expandCanvasToImage?: boolean;
+    fitImageToCanvas?: boolean;
+    coverImageToCanvas?: boolean;
+
+    downsampleOnLoad?: boolean;
+    downsampleMaxWidth?: number;
+    downsampleMaxHeight?: number;
+    downsampleQuality?: number;
+
+    exportMultiplier?: number;
+    exportImageAreaByDefault?: boolean;
+
+    defaultMaskWidth?: number;
+    defaultMaskHeight?: number;
+    maskRotatable?: boolean;
+    maskLabelOnSelect?: boolean;
+    maskLabelOffset?: number;
+    maskName?: string;
+
+    groupSelection?: boolean;
+
+    showPlaceholder?: boolean;
+    initialImageBase64?: string | null;
+    defaultDownloadFileName?: string;
+
+    label?: LabelOptions;
+    crop?: CropOptions;
+
+    onImageLoaded?: () => void;
+    onError?: (error: unknown, message: string) => void;
+    onWarning?: (error: unknown, message: string) => void;
+  }
+
+  export interface ElementIdMap {
+    canvas?: string;
+    canvasContainer?: string | null;
+    imgPlaceholder?: string;
+    scaleRate?: string;
+    rotationLeftInput?: string;
+    rotationRightInput?: string;
+    rotateLeftBtn?: string;
+    rotateRightBtn?: string;
+    addMaskBtn?: string;
+    removeMaskBtn?: string;
+    removeAllMasksBtn?: string;
+    mergeBtn?: string;
+    downloadBtn?: string;
+    maskList?: string;
+    zoomInBtn?: string;
+    zoomOutBtn?: string;
+    resetBtn?: string;
+    undoBtn?: string;
+    redoBtn?: string;
+    imageInput?: string;
+    uploadArea?: string;
+    cropBtn?: string;
+    applyCropBtn?: string;
+    cancelCropBtn?: string;
+  }
+
+  export interface MaskConfig {
+    shape?: 'rect' | 'circle' | 'ellipse' | 'polygon' | string;
+    width?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    height?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    radius?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    rx?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    ry?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    points?: Array<{ x: number; y: number }>;
+    color?: string;
+    alpha?: number;
+    gap?: number;
+    left?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    top?: number | string | ((canvas: Canvas, options: ImageEditorOptions) => number);
+    angle?: number;
+    selectable?: boolean;
+    hasControls?: boolean;
+    borderColor?: string;
+    cornerColor?: string;
+    cornerSize?: number;
+    transparentCorners?: boolean;
+    strokeUniform?: boolean;
+    styles?: Record<string, any>;
+    fabricGenerator?: (config: MaskConfig, canvas: Canvas, options: ImageEditorOptions) => FabricObject;
+    onCreate?: (mask: MaskObject, canvas: Canvas) => void;
+  }
+
+  export interface MaskObject extends FabricObject {
+    maskId: number;
+    maskName: string;
+    originalAlpha: number;
+    __label?: FabricObject;
+  }
+
+  export interface Base64ExportOptions {
+    exportImageArea?: boolean;
+    multiplier?: number;
+  }
+
+  export interface ImageFileExportOptions {
+    mergeMask?: boolean;
+    fileType?: 'jpeg' | 'jpg' | 'png' | 'webp' | 'image/jpeg' | 'image/png' | 'image/webp';
+    quality?: number;
+    multiplier?: number;
+    fileName?: string;
+  }
+
+  export class ImageEditor {
+    readonly options: ImageEditorOptions;
+    readonly canvas: Canvas | null;
+    readonly canvasEl: HTMLCanvasElement | null;
+    readonly containerEl: HTMLElement | null;
+    readonly originalImage: FabricImage | null;
+    readonly currentScale: number;
+    readonly currentRotation: number;
+    readonly maskCounter: number;
+    readonly isAnimating: boolean;
+    readonly isImageLoadedToCanvas: boolean;
+
+    constructor(options?: ImageEditorOptions);
+
+    init(idMap?: ElementIdMap): void;
+    loadImage(base64: string): Promise<void>;
+    isImageLoaded(): boolean;
+
+    scaleImage(factor: number): Promise<void>;
+    rotateImage(degrees: number): Promise<void>;
+    reset(): Promise<void>;
+
+    addMask(config?: MaskConfig): MaskObject | null;
+    removeSelectedMask(): void;
+    removeAllMasks(): void;
+
+    merge(): Promise<void>;
+    downloadImage(fileName?: string): void;
+    getImageBase64(opts?: Base64ExportOptions): Promise<string>;
+    exportImageFile(opts?: ImageFileExportOptions): Promise<File>;
+
+    enterCropMode(): void;
+    cancelCrop(): void;
+    applyCrop(): Promise<void>;
+
+    undo(): void;
+    redo(): void;
+    saveState(): void;
+    loadFromState(jsonString: string | object): void;
+
+    dispose(): void;
+  }
+
+  export default ImageEditor;
+}

package/package.json

@@ -1,71 +1,84 @@
-{
-    "name": "@bensitu/image-editor",
-    "version": "1.2.0",
-    "description": "Lightweight canvas-based image editor",
-    "main": "dist/image-editor.js",
-    "module": "dist/image-editor.esm.js",
-    "types": "image-editor.d.ts",
-    "exports": {
-        "import": "./dist/image-editor.esm.js",
-        "require": "./dist/image-editor.iife.js"
-    },
-    "scripts": {
-        "dev": "node esbuild.config.mjs --watch",
-        "build": "node esbuild.config.mjs",
-        "build:babel": "babel src --out-dir dist --copy-files",
-        "lint": "eslint src --ext .js"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/bensitu/image-editor.git"
-    },
-    "author": "Ben Situ",
-    "license": "MIT",
-    "files": [
-        "dist",
-        "src"
-    ],
-    "peerDependencies": {
-        "fabric": "^5.5.2"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.22.9",
-        "@babel/core": "^7.22.9",
-        "@babel/preset-env": "^7.22.9",
-        "esbuild": "^0.19.12",
-        "esbuild-plugin-babel": "^0.2.3",
-        "eslint": "^8.49.0"
-    },
-    "browserslist": [
-        "defaults",
-        "ie 11"
-    ],
-    "keywords": [
-        "fabricjs",
-        "image-editor",
-        "javascript",
-        "mask",
-        "open-source"
-    ],
-    "directories": {
-        "doc": "docs"
-    },
-    "bugs": {
-        "url": "https://github.com/bensitu/image-editor/issues"
-    },
-    "homepage": "https://github.com/bensitu/image-editor#readme",
-    "babel": {
-        "presets": [
-            [
-                "@babel/preset-env",
-                {
-                    "targets": {
-                        "ie": "11"
-                    },
-                    "useBuiltIns": false,
-                    "modules": false
-                }
-            ]
-        ]
-    }
-}
+{
+    "name": "@bensitu/image-editor",
+    "version": "1.2.1",
+    "description": "Lightweight canvas-based image editor",
+    "main": "./dist/image-editor.js",
+    "module": "./dist/image-editor.esm.mjs",
+    "types": "./image-editor.d.ts",
+    "exports": {
+        ".": {
+            "types": "./image-editor.d.ts",
+            "import": "./dist/image-editor.esm.mjs",
+            "default": "./dist/image-editor.js"
+        }
+    },
+    "scripts": {
+        "dev": "node esbuild.config.mjs --watch",
+        "build": "node esbuild.config.mjs",
+        "build:babel": "babel src --out-dir dist --copy-files",
+        "lint": "eslint src --ext .js",
+        "test": "npm run build && node --test tests/image-editor.test.mjs tests/package.test.mjs"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/bensitu/image-editor.git"
+    },
+    "author": "Ben Situ",
+    "license": "MIT",
+    "files": [
+        "dist",
+        "src",
+        "image-editor.d.ts"
+    ],
+    "peerDependencies": {
+        "fabric": "^5.5.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.22.9",
+        "@babel/core": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "esbuild": "^0.19.12",
+        "esbuild-plugin-babel": "^0.2.3",
+        "eslint": "^8.49.0"
+    },
+    "browserslist": [
+        "Chrome >= 100",
+        "Firefox >= 100",
+        "Safari >= 15",
+        "Edge >= 100"
+    ],
+    "keywords": [
+        "fabricjs",
+        "image-editor",
+        "javascript",
+        "mask",
+        "open-source"
+    ],
+    "directories": {
+        "doc": "docs"
+    },
+    "bugs": {
+        "url": "https://github.com/bensitu/image-editor/issues"
+    },
+    "homepage": "https://github.com/bensitu/image-editor#readme",
+    "babel": {
+        "presets": [
+            [
+                "@babel/preset-env",
+                {
+                    "targets": {
+                        "chrome": "100",
+                        "firefox": "100",
+                        "safari": "15",
+                        "edge": "100"
+                    },
+                    "useBuiltIns": false,
+                    "modules": false
+                }
+            ]
+        ]
+    }
+}

package/src/browser.js

@@ -0,0 +1,11 @@
+import ImageEditor, { setFabric } from './image-editor.js';
+
+const scope = typeof globalThis !== 'undefined'
+    ? globalThis
+    : (typeof self !== 'undefined' ? self : (typeof window !== 'undefined' ? window : null));
+
+setFabric(scope && scope.fabric);
+
+if (scope) {
+    scope.ImageEditor = ImageEditor;
+}

package/src/esm.js

@@ -0,0 +1,9 @@
+import fabricModule from 'fabric';
+import ImageEditor, { setFabric } from './image-editor.js';
+
+const fabricInstance = fabricModule && (fabricModule.fabric || fabricModule.default || fabricModule);
+
+setFabric(fabricInstance);
+
+export { ImageEditor };
+export default ImageEditor;