canvas-drawing-editor 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import { default as default_2 } from 'react';
+
+export declare interface BaseObject {
+    id: string;
+    type: CanvasObjectType;
+    x: number;
+    y: number;
+    color: string;
+    lineWidth: number;
+}
+
+export declare type CanvasObject = RectObject | CircleObject | PathObject | TextObject | ImageObject;
+
+export declare type CanvasObjectType = 'RECTANGLE' | 'CIRCLE' | 'PATH' | 'TEXT' | 'IMAGE';
+
+export declare interface CircleObject extends BaseObject {
+    type: 'CIRCLE';
+    radius: number;
+}
+
+export declare interface EditorConfig {
+    title?: string;
+    showPencil?: boolean;
+    showRectangle?: boolean;
+    showCircle?: boolean;
+    showText?: boolean;
+    showImage?: boolean;
+    showZoom?: boolean;
+    showDownload?: boolean;
+    showExport?: boolean;
+    showImport?: boolean;
+    showColor?: boolean;
+    showMinimap?: boolean;
+}
+
+export declare interface EditorState {
+    objects: CanvasObject[];
+    selectedId: string | null;
+    tool: ToolType;
+}
+
+export declare const ImageEditor: default_2.FC<ImageEditorProps>;
+
+export declare interface ImageEditorProps {
+    onClose?: () => void;
+    config?: EditorConfig;
+    onChange?: (objects: CanvasObject[]) => void;
+}
+
+export declare const ImageEditorWebComponent: CustomElementConstructor;
+
+export declare const ImageEditorWrapper: default_2.FC<WebComponentProps>;
+
+export declare interface ImageObject extends BaseObject {
+    type: 'IMAGE';
+    width: number;
+    height: number;
+    dataUrl: string;
+    imageElement?: HTMLImageElement;
+}
+
+export declare interface PathObject extends BaseObject {
+    type: 'PATH';
+    points: Point[];
+}
+
+export declare interface Point {
+    x: number;
+    y: number;
+}
+
+export declare interface RectObject extends BaseObject {
+    type: 'RECTANGLE';
+    width: number;
+    height: number;
+}
+
+export declare function registerImageEditor(tagName?: string): void;
+
+export declare interface TextObject extends BaseObject {
+    type: 'TEXT';
+    text: string;
+    fontSize: number;
+}
+
+export declare enum ToolType {
+    SELECT = "SELECT",
+    PENCIL = "PENCIL",
+    RECTANGLE = "RECTANGLE",
+    CIRCLE = "CIRCLE",
+    TEXT = "TEXT",
+    IMAGE = "IMAGE"
+}
+
+declare interface WebComponentProps {
+    config?: string;
+    title?: string;
+    'show-pencil'?: boolean;
+    'show-rectangle'?: boolean;
+    'show-circle'?: boolean;
+    'show-text'?: boolean;
+    'show-image'?: boolean;
+    'show-zoom'?: boolean;
+    'show-download'?: boolean;
+    'show-export'?: boolean;
+    'show-import'?: boolean;
+    'show-color'?: boolean;
+    'show-minimap'?: boolean;
+}
+
+export { }

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "canvas-drawing-editor",
+  "version": "1.0.0",
+  "description": "A powerful canvas-based image editor Web Component that works with Vue, React, Angular, and vanilla HTML",
+  "type": "module",
+  "main": "dist/image-editor.umd.js",
+  "module": "dist/image-editor.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/image-editor.es.js",
+      "require": "./dist/image-editor.umd.js"
+    },
+    "./style.css": "./dist/image-editor.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "keywords": [
+    "canvas",
+    "image-editor",
+    "web-component",
+    "drawing",
+    "vue",
+    "react",
+    "angular",
+    "vanilla"
+  ],
+  "author": "typsusan <typsusan@163.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "@r2wc/react-to-web-component": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}