@jieyin/editor-sdk 0.1.0

package/README.md

@@ -0,0 +1,75 @@
+# Editor SDK
+
+## 模式 A：编辑器内拉取产品（支持切换产品）
+```vue
+<script setup lang="ts">
+import { Editor } from '@sdk/index'
+import { fetch, fetchBasic, fetchDiecut, fetchDeformation } from '@/api/product'
+
+const fetchProductList = async (page: number, pageSize: number) => {
+  const res = await fetch(page, pageSize)
+  const data = res?.data ?? res
+  return {
+    rows: data?.rows ?? [],
+    total: data?.total ?? 0
+  }
+}
+
+const fetchProductDetail = async (productId: number | string) => {
+  const [basicRes, diecutRes, deformationRes] = await Promise.all([
+    fetchBasic(Number(productId)),
+    fetchDiecut(Number(productId)),
+    fetchDeformation(Number(productId))
+  ])
+
+  return {
+    basicInfo: basicRes?.data ?? basicRes,
+    diecutData: diecutRes?.data ?? diecutRes,
+    deformationData: deformationRes?.data ?? deformationRes
+  }
+}
+</script>
+
+<template>
+  <Editor
+    :product-list-api="fetchProductList"
+    :product-detail-api="fetchProductDetail"
+    :product-list-page-size="8"
+  />
+</template>
+```
+
+## 模式 B：传入单个产品（不显示产品面板）
+```vue
+<script setup lang="ts">
+import { Editor } from '@sdk/index'
+
+const product = {
+  id: 1,
+  name: '示例产品'
+}
+
+const basicInfo = {
+  id: 1,
+  name: '示例产品',
+  sizes: ['1600x1600']
+}
+
+const diecutData = {
+  data: []
+}
+
+const deformationData = {
+  data: []
+}
+</script>
+
+<template>
+  <Editor
+    :product="product"
+    :basic-info="basicInfo"
+    :diecut-data="diecutData"
+    :deformation-data="deformationData"
+  />
+</template>
+```

package/dist/components/Editor/components/CanvasSection.vue.d.ts

@@ -0,0 +1,90 @@
+import { type PropType } from 'vue';
+type DiecutOption = {
+    id: string;
+    name: string;
+    url?: string;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    sizeOptions: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    selectedSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingTemplate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    templateError: {
+        type: StringConstructor;
+        default: string;
+    };
+    diecutOptions: {
+        type: PropType<DiecutOption[]>;
+        default: () => any[];
+    };
+    selectedDiecutId: {
+        type: StringConstructor;
+        default: string;
+    };
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedSize": (...args: any[]) => void;
+    "update:selectedDiecutId": (...args: any[]) => void;
+    "canvas-ready": (...args: any[]) => void;
+    "zoom-in": (...args: any[]) => void;
+    "zoom-out": (...args: any[]) => void;
+    "fit-canvas": (...args: any[]) => void;
+    "copy-to-diecuts": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    sizeOptions: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    selectedSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingTemplate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    templateError: {
+        type: StringConstructor;
+        default: string;
+    };
+    diecutOptions: {
+        type: PropType<DiecutOption[]>;
+        default: () => any[];
+    };
+    selectedDiecutId: {
+        type: StringConstructor;
+        default: string;
+    };
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    "onUpdate:selectedSize"?: (...args: any[]) => any;
+    "onUpdate:selectedDiecutId"?: (...args: any[]) => any;
+    "onCanvas-ready"?: (...args: any[]) => any;
+    "onZoom-in"?: (...args: any[]) => any;
+    "onZoom-out"?: (...args: any[]) => any;
+    "onFit-canvas"?: (...args: any[]) => any;
+    "onCopy-to-diecuts"?: (...args: any[]) => any;
+}>, {
+    sizeOptions: string[];
+    selectedSize: string;
+    loadingTemplate: boolean;
+    templateError: string;
+    diecutOptions: DiecutOption[];
+    selectedDiecutId: string;
+    zoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/components/EditorSidebar.vue.d.ts

@@ -0,0 +1,316 @@
+import type { ProductItem } from '../../../types';
+interface Layer {
+    id: string | number;
+    name: string;
+    object?: any;
+    visible?: boolean;
+    locked?: boolean;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    activeTab: {
+        type: StringConstructor;
+        default: string;
+    };
+    visibleTabs: {
+        type: () => string[];
+        default: () => string[];
+    };
+    showNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    urlInput: {
+        type: StringConstructor;
+        default: string;
+    };
+    productItems: {
+        type: () => ProductItem[];
+        default: () => any[];
+    };
+    productTotal: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productPageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productHasPrev: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    productHasNext: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedProductIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    layers: {
+        type: () => Layer[];
+        default: () => any[];
+    };
+    activeLayerId: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
+    showImageTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    imagePatternMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    imagePatternScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imagePatternScaleEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLayerTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    layerOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showTextTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textFontFamily: {
+        type: StringConstructor;
+        default: string;
+    };
+    textFontSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textCharSpacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textLineHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    textStrokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "add-text": (...args: any[]) => void;
+    "add-label": (...args: any[]) => void;
+    upload: (...args: any[]) => void;
+    "update:activeTab": (...args: any[]) => void;
+    "update:urlInput": (...args: any[]) => void;
+    "update:selectedProductIndex": (...args: any[]) => void;
+    "change-product-page": (...args: any[]) => void;
+    "add-rect": (...args: any[]) => void;
+    "add-circle": (...args: any[]) => void;
+    "remove-selected": (...args: any[]) => void;
+    "add-image-url": (...args: any[]) => void;
+    "paste-url": (...args: any[]) => void;
+    "select-layer": (...args: any[]) => void;
+    "apply-image-pattern": (...args: any[]) => void;
+    "update-image-pattern-scale": (...args: any[]) => void;
+    "move-layer": (...args: any[]) => void;
+    "flip-layer": (...args: any[]) => void;
+    "rotate-layer": (...args: any[]) => void;
+    "center-layer": (...args: any[]) => void;
+    "update-layer-opacity": (...args: any[]) => void;
+    "update-text-prop": (...args: any[]) => void;
+    "align-layer": (...args: any[]) => void;
+    "scale-layer": (...args: any[]) => void;
+    "duplicate-layer": (...args: any[]) => void;
+    "toggle-layer-visibility": (...args: any[]) => void;
+    "toggle-layer-lock": (...args: any[]) => void;
+    "delete-layer": (...args: any[]) => void;
+    "move-layer-by-id": (...args: any[]) => void;
+    "duplicate-layer-by-id": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    activeTab: {
+        type: StringConstructor;
+        default: string;
+    };
+    visibleTabs: {
+        type: () => string[];
+        default: () => string[];
+    };
+    showNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    urlInput: {
+        type: StringConstructor;
+        default: string;
+    };
+    productItems: {
+        type: () => ProductItem[];
+        default: () => any[];
+    };
+    productTotal: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productPageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    productHasPrev: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    productHasNext: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedProductIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    layers: {
+        type: () => Layer[];
+        default: () => any[];
+    };
+    activeLayerId: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
+    showImageTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    imagePatternMode: {
+        type: StringConstructor;
+        default: string;
+    };
+    imagePatternScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imagePatternScaleEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLayerTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    layerOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showTextTools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textFontFamily: {
+        type: StringConstructor;
+        default: string;
+    };
+    textFontSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textCharSpacing: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textLineHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    textStrokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    textStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onAdd-text"?: (...args: any[]) => any;
+    "onAdd-label"?: (...args: any[]) => any;
+    onUpload?: (...args: any[]) => any;
+    "onUpdate:activeTab"?: (...args: any[]) => any;
+    "onUpdate:urlInput"?: (...args: any[]) => any;
+    "onUpdate:selectedProductIndex"?: (...args: any[]) => any;
+    "onChange-product-page"?: (...args: any[]) => any;
+    "onAdd-rect"?: (...args: any[]) => any;
+    "onAdd-circle"?: (...args: any[]) => any;
+    "onRemove-selected"?: (...args: any[]) => any;
+    "onAdd-image-url"?: (...args: any[]) => any;
+    "onPaste-url"?: (...args: any[]) => any;
+    "onSelect-layer"?: (...args: any[]) => any;
+    "onApply-image-pattern"?: (...args: any[]) => any;
+    "onUpdate-image-pattern-scale"?: (...args: any[]) => any;
+    "onMove-layer"?: (...args: any[]) => any;
+    "onFlip-layer"?: (...args: any[]) => any;
+    "onRotate-layer"?: (...args: any[]) => any;
+    "onCenter-layer"?: (...args: any[]) => any;
+    "onUpdate-layer-opacity"?: (...args: any[]) => any;
+    "onUpdate-text-prop"?: (...args: any[]) => any;
+    "onAlign-layer"?: (...args: any[]) => any;
+    "onScale-layer"?: (...args: any[]) => any;
+    "onDuplicate-layer"?: (...args: any[]) => any;
+    "onToggle-layer-visibility"?: (...args: any[]) => any;
+    "onToggle-layer-lock"?: (...args: any[]) => any;
+    "onDelete-layer"?: (...args: any[]) => any;
+    "onMove-layer-by-id"?: (...args: any[]) => any;
+    "onDuplicate-layer-by-id"?: (...args: any[]) => any;
+}>, {
+    activeTab: string;
+    visibleTabs: string[];
+    showNav: boolean;
+    urlInput: string;
+    productItems: ProductItem[];
+    productTotal: number;
+    productPage: number;
+    productPageSize: number;
+    productHasPrev: boolean;
+    productHasNext: boolean;
+    selectedProductIndex: number;
+    layers: Layer[];
+    activeLayerId: string | number;
+    showImageTools: boolean;
+    imagePatternMode: string;
+    imagePatternScale: number;
+    imagePatternScaleEnabled: boolean;
+    showLayerTools: boolean;
+    layerOpacity: number;
+    showTextTools: boolean;
+    textFontFamily: string;
+    textFontSize: number;
+    textCharSpacing: number;
+    textLineHeight: number;
+    textFill: string;
+    textStrokeWidth: number;
+    textStroke: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/components/EditorTopbar.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    productName: {
+        type: StringConstructor;
+        default: string;
+    };
+    showGrid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "add-text": (...args: any[]) => void;
+    "add-label": (...args: any[]) => void;
+    "toggle-grid": (...args: any[]) => void;
+    "clear-canvas": (...args: any[]) => void;
+    "download-png": (...args: any[]) => void;
+    upload: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    productName: {
+        type: StringConstructor;
+        default: string;
+    };
+    showGrid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onAdd-text"?: (...args: any[]) => any;
+    "onAdd-label"?: (...args: any[]) => any;
+    "onToggle-grid"?: (...args: any[]) => any;
+    "onClear-canvas"?: (...args: any[]) => any;
+    "onDownload-png"?: (...args: any[]) => any;
+    onUpload?: (...args: any[]) => any;
+}>, {
+    productName: string;
+    showGrid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/components/PreviewPanel.vue.d.ts

@@ -0,0 +1,67 @@
+import { type PropType } from 'vue';
+import { type IRenderByJson } from '../../../utils/renderService';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    renderData: {
+        type: PropType<IRenderByJson | null>;
+        default: any;
+    };
+    previewTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    templateIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    templateTotal: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getRenderDataForIndex: {
+        type: PropType<(index: number) => Promise<IRenderByJson | null>>;
+        default: any;
+    };
+    getAllDiecutFabricData: {
+        type: PropType<() => Promise<Record<string, unknown>>>;
+        default: any;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "prev-template": (...args: any[]) => void;
+    "next-template": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    renderData: {
+        type: PropType<IRenderByJson | null>;
+        default: any;
+    };
+    previewTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    templateIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    templateTotal: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getRenderDataForIndex: {
+        type: PropType<(index: number) => Promise<IRenderByJson | null>>;
+        default: any;
+    };
+    getAllDiecutFabricData: {
+        type: PropType<() => Promise<Record<string, unknown>>>;
+        default: any;
+    };
+}>> & Readonly<{
+    "onPrev-template"?: (...args: any[]) => any;
+    "onNext-template"?: (...args: any[]) => any;
+}>, {
+    renderData: IRenderByJson;
+    previewTitle: string;
+    templateIndex: number;
+    templateTotal: number;
+    getRenderDataForIndex: (index: number) => Promise<IRenderByJson | null>;
+    getAllDiecutFabricData: () => Promise<Record<string, unknown>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/components/TemplateModal.vue.d.ts

@@ -0,0 +1,35 @@
+import type { PropType } from 'vue';
+type TemplateModeOption = {
+    type: string;
+    label: string;
+    size?: string;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    templateModeOptions: {
+        type: PropType<TemplateModeOption[]>;
+        default: () => any[];
+    };
+    selectedMode: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:selected-mode": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    templateModeOptions: {
+        type: PropType<TemplateModeOption[]>;
+        default: () => any[];
+    };
+    selectedMode: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClose?: (...args: any[]) => any;
+    "onUpdate:selected-mode"?: (...args: any[]) => any;
+}>, {
+    templateModeOptions: TemplateModeOption[];
+    selectedMode: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ProductItem, BasicInfo, DiecutResponse, DeformationResponse, EditorOptions, ProductListApi, ProductDetailApi } from '../../types';
+import './editor.css';
+type EditorProps = {
+    product?: ProductItem | null;
+    basicInfo?: BasicInfo | null;
+    diecutData?: DiecutResponse | null;
+    deformationData?: DeformationResponse | null;
+    options?: EditorOptions;
+    productListApi?: ProductListApi;
+    productDetailApi?: ProductDetailApi;
+    productListPageSize?: number;
+    productListInitialPage?: number;
+};
+declare const _default: import("vue").DefineComponent<EditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EditorProps> & Readonly<{}>, {
+    product: ProductItem | null;
+    basicInfo: BasicInfo | null;
+    diecutData: DiecutResponse | null;
+    deformationData: DeformationResponse | null;
+    options: EditorOptions;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Editor/workers/copyDiecuts.worker.d.ts

@@ -0,0 +1,14 @@
+type CopyDiecutsWorkerRequest = {
+    id: number;
+    sourceObjects: any[];
+    targetJsonMap: Record<string, any>;
+    objectIndex: number;
+};
+declare const cloneForCopy: (obj: any, startId: number) => {
+    cloned: any;
+    nextId: number;
+};
+declare const processCopy: (payload: CopyDiecutsWorkerRequest) => {
+    updates: Record<string, any>;
+    nextObjectIndex: number;
+};

package/dist/components/Editor/workers/maskWorker.d.ts

@@ -0,0 +1,13 @@
+type MaskWorkerRequest = {
+    id: number;
+    baseBlob: Blob;
+    maskBlob: Blob;
+    maskWidth: number;
+    maskHeight: number;
+    left: number;
+    top: number;
+    canvasWidth: number;
+    canvasHeight: number;
+};
+declare const loadBitmap: (blob: Blob) => Promise<ImageBitmap>;
+declare const cropAndMask: (payload: MaskWorkerRequest) => Promise<Blob>;

package/dist/components/Editor/workers/renderWorker.d.ts

@@ -0,0 +1 @@
+export {};