goatdee-canvas 0.0.1

package/dist/src/utils/html2json/parsers.d.ts

@@ -0,0 +1,47 @@
+/**
+ * HTML to EditorJSON Converter - Parsing Functions
+ * 包含颜色、渐变、阴影、字体等解析函数
+ */
+import type { LinearGradient, Shadow } from "./types";
+/**
+ * 解析颜色值
+ * 支持: hex, rgb, rgba, hsl, hsla, CSS 变量等
+ */
+export declare function parseColor(color: string | null | undefined): string | undefined;
+/**
+ * 解析 CSS 渐变
+ */
+export declare function parseGradient(gradient: string): string | LinearGradient | undefined;
+/**
+ * 解析 CSS box-shadow
+ */
+export declare function parseShadow(shadowStr: string | null | undefined): Shadow | undefined;
+/**
+ * 解析字体大小
+ */
+export declare function parseFontSize(fontSize: string | null | undefined): number | undefined;
+/**
+ * 解析数值（带单位）
+ */
+export declare function parseLength(value: string | null | undefined): number;
+/**
+ * 解析 transform 属性中的旋转角度
+ * 支持 matrix()、matrix3d() 和 rotate() 格式
+ */
+export declare function parseTransformAngle(transform: string | null | undefined): number | undefined;
+/**
+ * 解析字体粗细
+ */
+export declare function parseFontWeight(weight: string | null | undefined): number | string | undefined;
+/**
+ * 解析圆角
+ */
+export declare function parseBorderRadius(radius: string | null | undefined, width?: number, height?: number): number;
+/**
+ * 解析行高 (line-height)
+ * @param lineHeightStr - CSS line-height 值（如 "normal", "1.2", "19.2px"）
+ * @param fontSizePx - 字体大小的像素值（用于计算相对值）
+ * @param dpr - 设备像素比（用于缩放）
+ * @returns 计算后的行高值
+ */
+export declare function parseLineHeight(lineHeightStr: string | null | undefined, fontSizePx: number, dpr?: number): number;

package/dist/src/utils/html2json/renderers.d.ts

@@ -0,0 +1,95 @@
+/**
+ * HTML to EditorJSON Converter - Rendering Functions
+ * 包含背景渲染、滤镜渲染、emoji 渲染、SVG 渲染等函数
+ */
+/**
+ * 将 SVG 元素转换为 base64 data URL
+ * 使用 encodeURIComponent 将 SVG 转换为可用于 img src 的 data URL
+ *
+ * @param element SVG 元素
+ * @param width 目标宽度
+ * @param height 目标高度
+ * @param styles 元素样式（可选）
+ * @returns base64 data URL 或 null
+ */
+export declare function renderSVGToBase64(element: SVGElement, width: number, height: number, styles?: CSSStyleDeclaration | null): Promise<string | null>;
+/**
+ * 判断背景是否为复杂图案（需要转为图片）
+ * 复杂图案包括：url(), radial-gradient, conic-gradient, repeating-gradient, 或有特殊 background-size
+ */
+export declare function isComplexBackground(bgImage: string | null | undefined, bgSize: string | null | undefined): boolean;
+/**
+ * 使用 html2canvas 将元素渲染为 base64 图片（通用版本）
+ * 支持自动计算 padding 以容纳 filter 效果
+ */
+export declare function renderElementWithHtml2Canvas(element: Element, styles: CSSStyleDeclaration, rect?: {
+    width: number;
+    height: number;
+}): Promise<{
+    base64: string;
+    padding: number;
+} | null>;
+/**
+ * 将带有 filter 效果的元素渲染为 base64 图片
+ * 用于处理 blur、drop-shadow 等滤镜效果
+ * 返回 { base64, padding } 以便调整图层位置和大小
+ */
+export declare function renderElementWithFilterToBase64(element: Element, width: number, height: number, styles: CSSStyleDeclaration): Promise<{
+    base64: string;
+    padding: number;
+} | null>;
+/**
+ * 使用 Canvas 2D 渲染「仅字符+字体」的伪元素（如 Font Awesome 图标）
+ * html2canvas 对伪元素+自定义字体常得到空白图，此路径直接画字符，更稳定
+ */
+/**
+ * 使用 Canvas 2D 渲染图标字体
+ */
+/** 图标字体渲染结果：base64 为高分辨率图，宽高用实际像素，显示尺寸用 scale 控制 */
+export type IconImageResult = {
+    base64: string;
+    padding: number;
+    actualWidth: number;
+    actualHeight: number;
+    logicalWidth: number;
+    logicalHeight: number;
+};
+/**
+ * 判断是否为「图标字体」
+ * 常见库：Font Awesome、Material Icons、Bootstrap Icons、Ionicons、Feather、Remix Icon、Tabler、Phosphor、Octicons 等
+ */
+export declare function isIconFontFamily(fontFamily: string | undefined): boolean;
+/** 判断是否为「标签内的图标字体」：单字符 + 图标字体族，如 <span class="list-icon"></span> */
+export declare function isIconFontText(text: string, fontFamily: string | undefined): boolean;
+/**
+ * 将「标签内图标字符」渲染为图片，如 <span class="list-icon"></span>
+ * 使用元素的 computed 样式和 textContent 的第一个字符
+ */
+export declare function renderIconFontTextToImage(element: Element, doc: Document): Promise<IconImageResult | null>;
+/**
+ * 使用 html2canvas 渲染伪元素为 base64 图片
+ * 这能够 100% 复刻浏览器的原生渲染效果，包括复杂的 filter、gradient 等
+ */
+export declare function renderPseudoElementWithHtml2Canvas(element: Element, pseudoElement: "::before" | "::after", rect: DOMRect, styles: CSSStyleDeclaration): Promise<{
+    base64: string;
+    padding: number;
+    actualWidth?: number;
+    actualHeight?: number;
+    logicalWidth?: number;
+    logicalHeight?: number;
+} | null>;
+/**
+ * 将元素的背景渲染为 base64 图片
+ * 使用 html2canvas 完美复刻复杂背景效果
+ * 注意：只渲染背景样式，不包含子元素
+ */
+export declare function renderBackgroundToBase64(element: Element, width: number, height: number): Promise<string | null>;
+/**
+ * 检测文本是否主要是 emoji
+ */
+export declare function isEmojiText(text: string): boolean;
+/**
+ * 将 emoji 文本渲染为 base64 图片
+ * 使用 html2canvas 确保完美渲染
+ */
+export declare function renderEmojiToBase64(text: string, fontSize: number, width: number, height: number, color?: string, textShadow?: string, targetDoc?: Document): Promise<string | null>;

package/dist/src/utils/html2json/types.d.ts

@@ -0,0 +1,104 @@
+/**
+ * HTML to EditorJSON Converter - Type Definitions
+ */
+export interface ColorStop {
+    offset: number;
+    color: string;
+}
+export interface LinearGradient {
+    type: "linear";
+    coords: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    };
+    colorStops: ColorStop[];
+}
+export interface Shadow {
+    blur?: number;
+    color?: string;
+    offsetX?: number;
+    offsetY?: number;
+}
+export interface CommonLayerFields {
+    id: string;
+    name?: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    scaleX?: number;
+    scaleY?: number;
+    angle?: number;
+    strokeWidth?: number;
+    opacity?: number;
+    visible?: boolean;
+    locked?: boolean;
+}
+export interface TextLayer extends CommonLayerFields {
+    type: "textbox";
+    text: string;
+    fontSize?: number;
+    lineHeight?: number;
+    fontFamily?: string;
+    bold?: boolean;
+    fill?: string | LinearGradient;
+    stroke?: string;
+    shadow?: Shadow;
+    textAlign?: string;
+    charSpacing?: number;
+    underline?: boolean;
+    linethrough?: boolean;
+}
+export interface ImageLayer extends CommonLayerFields {
+    type: "image";
+    src: string;
+    prompt?: string;
+    objectFit?: string;
+    rx?: number;
+    ry?: number;
+    backgroundColor?: string | LinearGradient;
+    stroke?: string;
+    shadow?: Shadow;
+}
+export interface RectangleLayer extends CommonLayerFields {
+    type: "rectangle";
+    rx?: number;
+    ry?: number;
+    fill?: string | LinearGradient;
+    stroke?: string;
+    shadow?: Shadow;
+}
+export interface CircleLayer extends CommonLayerFields {
+    type: "circle";
+    radius?: number;
+    fill?: string | LinearGradient;
+    stroke?: string;
+    shadow?: Shadow;
+}
+export interface FrameLayer extends CommonLayerFields {
+    type: "frame";
+    backgroundColor?: string | LinearGradient;
+    objects: Layer[];
+}
+export interface GroupLayer extends CommonLayerFields {
+    type: "group";
+    objects: Layer[];
+}
+export type Layer = TextLayer | ImageLayer | RectangleLayer | CircleLayer | FrameLayer | GroupLayer;
+export interface EditorJSON {
+    width: number;
+    height: number;
+    objects: Layer[];
+    thumb?: string;
+}
+export interface ElementContext {
+    containerRect: DOMRect;
+    currentTop: number;
+    cssVariables: Map<string, string>;
+    /** 当前转换所在的 document（来自 iframe.contentDocument） */
+    doc?: Document;
+    /** 当前转换所在的 window（来自 iframe.contentWindow） */
+    win?: Window;
+}

package/dist/src/utils/html2json/utils.d.ts

@@ -0,0 +1,68 @@
+/**
+ * HTML to EditorJSON Converter - Utility Functions
+ * 包含 UUID 生成、CSS 变量解析、图片加载等工具函数
+ */
+import type { Layer } from "./types";
+/**
+ * 生成 UUID
+ */
+export declare function uuid(): string;
+/**
+ * 获取元素的计算样式
+ * 使用元素所在 document 的 defaultView，以便在 iframe 内元素时使用其所在 document 的 window
+ */
+export declare function getComputedStyles(element: Element, pseudoElement?: string): CSSStyleDeclaration | null;
+/**
+ * 获取元素的边界框
+ */
+export declare function getBoundingRect(element: Element): DOMRect | null;
+/**
+ * 获取元素的原始尺寸（不受 transform 影响）
+ * 使用 offsetWidth/offsetHeight，这些属性返回元素的布局尺寸，不受 CSS transform 影响
+ * 返回值包含 padding 和 border，但不包含 margin
+ */
+export declare function getOriginalDimensions(element: Element, styles: CSSStyleDeclaration | null): {
+    width: number;
+    height: number;
+} | null;
+/**
+ * 提取 title 标签
+ */
+export declare function extractTitle(doc: Document): string;
+/**
+ * 解析 CSS 变量
+ */
+export declare function extractCSSVariables(doc: Document): Map<string, string>;
+/**
+ * 解析变量引用
+ */
+export declare function resolveVariable(value: string, variables: Map<string, string>): string;
+/**
+ * 获取元素的文本内容，将 <br> 转换为换行符
+ * 注意：HTML 缩进已在 html2json 入口处统一处理，这里只需要处理 <br> 标签
+ */
+export declare function getTextContent(element: Element): string;
+/**
+ * 递归替换所有图层的字体族
+ */
+export declare function replaceFontFamily(layers: Layer[], fontFamily: string): void;
+/**
+ * 等待单个图片加载完成
+ */
+export declare function waitForImage(img: HTMLImageElement, timeout?: number): Promise<void>;
+/**
+ * 等待容器内所有图片加载完成
+ */
+export declare function waitForAllImages(container: Element, timeout?: number): Promise<void>;
+/**
+ * 判断元素是否为文本容器
+ */
+export declare function isTextElement(element: Element): boolean;
+/**
+ * 判断元素是否应该被当作文本处理（即使是 div）
+ */
+export declare function shouldTreatAsText(element: Element): boolean;
+/**
+ * 判断元素是否为布局容器
+ */
+export declare function isLayoutContainer(element: Element): boolean;

package/dist/src/utils/imageLoader.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 图片加载工具模块
+ * 通过 Worker 在后台线程中加载图片数据，避免阻塞主线程
+ */
+/**
+ * 通过 Worker 加载图片数据
+ * @param url 图片 URL
+ * @returns Promise<Uint8Array> 图片的二进制数据
+ */
+export declare function loadImageData(url: string): Promise<Uint8Array>;

package/dist/src/utils/imageLoader.example.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 图片加载工具使用示例
+ * 这个文件仅用于演示，不会被打包到最终产品中
+ */
+declare function loadSingleImageExample(): Promise<void>;
+declare function loadImageWithOptionsExample(): Promise<void>;
+declare function loadMultipleImagesExample(): Promise<void>;
+declare function cacheManagementExample(): void;
+export declare class ImageComponent {
+    private imageData;
+    loadImage(url: string): Promise<void>;
+    private renderImage;
+    private showError;
+    destroy(): void;
+}
+export declare function loadImageForCanvas(canvas: HTMLCanvasElement, imageUrl: string): Promise<void>;
+export { loadSingleImageExample, loadImageWithOptionsExample, loadMultipleImagesExample, cacheManagementExample };

package/dist/src/utils/imageLoader.worker.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 图片加载 Worker
+ * 用于在后台线程中加载图片数据，避免阻塞主线程
+ */
+export interface ImageLoadMessage {
+    type: 'LOAD_IMAGE';
+    url: string;
+    id: string;
+}
+export interface ImageLoadResult {
+    type: 'IMAGE_LOADED' | 'IMAGE_ERROR';
+    id: string;
+    data?: Uint8Array;
+    error?: string;
+}

package/dist/src/utils/imageUpload.d.ts

@@ -0,0 +1 @@
+export declare const uploadClipboardImage: (blob: Blob, mimeType: string, uploadAction?: string, uploadHeader?: Record<string, string>) => Promise<string | null>;

package/dist/src/utils/index.d.ts

@@ -0,0 +1,7 @@
+import { CanvasRef, CanvasProps } from "../types";
+export type { CanvasRef, CanvasProps };
+export { loadImageData } from './imageLoader';
+export { convertFabricJSON } from './fabricConverter';
+export type { FabricObject, ConvertedObject } from './fabricConverter';
+export { html2json } from './html2json';
+export { utils } from './utils';

package/dist/src/utils/safariCompatibility.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Safari浏览器兼容性工具
+ * 用于处理Safari浏览器中WebAssembly相关的兼容性问题
+ */
+/**
+ * 检测是否为Safari浏览器
+ */
+export declare const isSafari: () => boolean;
+/**
+ * 检测Safari版本
+ */
+export declare const getSafariVersion: () => number | null;
+/**
+ * 为Safari创建WebAssembly模块初始化配置
+ */
+export declare const createSafariWasmConfig: () => {
+    locateFile: (path: string) => string;
+    noInitialRun: boolean;
+    INITIAL_MEMORY: number;
+    USE_PTHREADS: number;
+    PTHREAD_POOL_SIZE: number;
+    SHARED_MEMORY: number;
+    wasmMemory: undefined;
+    onRuntimeInitialized: () => void;
+    onAbort: (what: string) => void;
+    PROXY_TO_PTHREAD: number;
+    onWorkerCreated: (worker: Worker) => void;
+};
+/**
+ * 创建Safari专用的WebAssembly配置（禁用多线程）
+ */
+export declare const createSafariNoThreadsConfig: () => {
+    locateFile: (path: string) => string;
+    USE_PTHREADS: number;
+    PTHREAD_POOL_SIZE: number;
+    SHARED_MEMORY: number;
+    PROXY_TO_PTHREAD: number;
+    INITIAL_MEMORY: number;
+    ALLOW_MEMORY_GROWTH: number;
+    noInitialRun: boolean;
+    wasmMemory: undefined;
+    onRuntimeInitialized: () => void;
+    onAbort: (what: string) => void;
+};
+/**
+ * 创建Safari标准配置（保持多线程但优化设置）
+ */
+export declare const createSafariStandardConfig: () => {
+    locateFile: (path: string) => string;
+    INITIAL_MEMORY: number;
+    ALLOW_MEMORY_GROWTH: number;
+    USE_PTHREADS: number;
+    PTHREAD_POOL_SIZE: number;
+    SHARED_MEMORY: number;
+    PROXY_TO_PTHREAD: number;
+    noInitialRun: boolean;
+    onRuntimeInitialized: () => void;
+    onAbort: (what: string) => void;
+};
+/**
+ * 安全地初始化WebAssembly模块（Safari兼容）
+ */
+export declare const safeInitializeWasm: (wasmModule: any) => Promise<any>;
+/**
+ * 检查Safari是否支持WebAssembly多线程
+ */
+export declare const isSafariWebAssemblyThreadsSupported: () => boolean;
+/**
+ * 获取Safari兼容性警告信息
+ */
+export declare const getSafariCompatibilityWarning: () => string | null;

package/dist/src/utils/safariDataCloneFix.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Safari DataCloneError 修复工具
+ * 专门处理Safari浏览器中的DataCloneError问题
+ */
+/**
+ * 安全的对象克隆函数，兼容Safari
+ */
+export declare const safeClone: <T>(obj: T) => T;
+/**
+ * 检查对象是否可以被安全克隆
+ */
+export declare const isCloneable: (obj: any) => boolean;
+/**
+ * 为Safari创建安全的postMessage包装器
+ */
+export declare const createSafePostMessage: (originalPostMessage: any) => (this: any, message: any, ...args: any[]) => any;
+/**
+ * 修复Worker中的DataCloneError问题
+ */
+export declare const patchWorkerForSafari: (worker: Worker) => Worker;
+/**
+ * 创建Safari兼容的Worker
+ */
+export declare const createSafariCompatibleWorker: (scriptURL: string | URL, options?: WorkerOptions) => Worker;
+/**
+ * 修复全局postMessage以兼容Safari
+ */
+export declare const patchGlobalPostMessage: () => void;
+/**
+ * 初始化Safari兼容性修复
+ */
+export declare const initSafariCompatibility: () => void;

package/dist/src/utils/styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 获取鼠标光标样式（css值）
+ */
+export declare function getCursorStyle(data: string, angle?: number): string;

package/dist/src/utils/utils.d.ts

@@ -0,0 +1,23 @@
+export declare namespace utils {
+    function safeProperties(properties: any): any;
+    /**
+     * 防抖函数
+     * @param fn 函数
+     * @param delay 延迟时间
+     * @returns 防抖函数
+     */
+    function debounce(fn: any, delay: number): (this: any, ...args: any[]) => void;
+    /**
+     * 节流函数
+     * @param fn 函数
+     * @param delay 延迟时间
+     * @returns 节流函数
+     */
+    function throttle(fn: any, delay: number): (this: any, ...args: any[]) => void;
+    /**
+     * 将 base64 转换为 Uint8Array
+     * @param base64 base64 字符串
+     * @returns Uint8Array
+     */
+    function base64ToUint8Array(base64: string): Uint8Array;
+}

package/dist/src/utils/viewState.d.ts

@@ -0,0 +1,9 @@
+interface EnsureImageVisibleOptions {
+    imageWidth: number;
+    imageHeight: number;
+    imageLeft: number;
+    imageTop: number;
+    imageId: string;
+}
+export declare const ensureImageVisible: ({ imageWidth, imageHeight, imageLeft, imageTop, imageId, }: EnsureImageVisibleOptions) => void;
+export {};

package/dist/wasm/ZHCanvasCore.d.ts

@@ -0,0 +1,2 @@
+export default createModule;
+declare function createModule(moduleArg?: {}): Promise<any>;

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "goatdee-canvas",
+  "version": "0.0.1",
+  "description": "Goatdee Canvas",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "cross-env THREAD_MODE=multi rollup -c",
+    "dev": "cross-env THREAD_MODE=multi rollup -c -w",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit",
+    "docs:api": "typedoc"
+  },
+  "keywords": [
+    "canvas",
+    "infinite",
+    "editor",
+    "react"
+  ],
+  "author": "Tencent",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "cross-env": "^7.0.3",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.0.0",
+    "typescript": "^5.0.0",
+    "typedoc": "^0.28.0",
+    "typedoc-plugin-markdown": "^4.10.0"
+  },
+  "dependencies": {
+    "alloyfinger": "^0.1.16",
+    "heic-to": "^1.3.0",
+    "html2canvas": "^1.4.1",
+    "wawoff2": "^2.0.1"
+  }
+}