@ydesign/react-editor 0.1.1 → 0.1.3

package/dist/config.d.ts

@@ -1,224 +1,5 @@
 import { XY } from '@ydesign/core';
-
-/**
- * 设置/更新翻译
- * @param {object} newTranslations - 新的翻译对象
- * @param {object} options - 配置选项
- * @param {boolean} options.validate - 是否验证翻译完整性
- */
-declare const setTranslations: (newTranslations: any, { validate }?: {
-    validate?: boolean | undefined;
-}) => void;
-/**
- * 获取所有翻译（返回普通 JS 对象）
- * @returns {object}
- */
-declare const getTranslations: () => {
-    toolbar: {
-        undo: string;
-        redo: string;
-        duration: string;
-        opacity: string;
-        effects: string;
-        blur: string;
-        textBackground: string;
-        backgroundCornerRadius: string;
-        backgroundOpacity: string;
-        backgroundPadding: string;
-        backgroundColor: string;
-        brightness: string;
-        filters: string;
-        sepia: string;
-        grayscale: string;
-        contrast: string;
-        saturation: string;
-        vibrance: string;
-        hueRotation: string;
-        noise: string;
-        pixelate: string;
-        textStroke: string;
-        shadow: string;
-        border: string;
-        cornerRadius: string;
-        textleft: string;
-        textcenter: string;
-        textright: string;
-        textjustify: string;
-        textBold: string;
-        textItalic: string;
-        textUnderline: string;
-        textStrikethrough: string;
-        splitByGrapheme: string;
-        position: string;
-        layering: string;
-        toForward: string;
-        up: string;
-        down: string;
-        toBottom: string;
-        alignLeft: string;
-        alignCenter: string;
-        alignRight: string;
-        alignTop: string;
-        alignMiddle: string;
-        alignBottom: string;
-        flip: string;
-        flipHorizontally: string;
-        flipVertically: string;
-        fitToBackground: string;
-        removeBackground: string;
-        removeBackgroundTitle: string;
-        cancelRemoveBackground: string;
-        confirmRemoveBackground: string;
-        eraserPen: string;
-        eraserPenTitle: string;
-        cancelEraserPen: string;
-        confirmEraserPen: string;
-        crop: string;
-        cropDone: string;
-        cropCancel: string;
-        clip: string;
-        removeClip: string;
-        removeMask: string;
-        transparency: string;
-        lockedDescription: string;
-        unlockedDescription: string;
-        removeElements: string;
-        duplicateElements: string;
-        download: string;
-        saveAsImage: string;
-        saveAsPDF: string;
-        lineHeight: string;
-        letterSpacing: string;
-        offsetX: string;
-        offsetY: string;
-        color: string;
-        selectable: string;
-        draggable: string;
-        removable: string;
-        resizable: string;
-        contentEditable: string;
-        styleEditable: string;
-        alwaysOnTop: string;
-        showInExport: string;
-        ungroupElements: string;
-        groupElements: string;
-        lineSize: string;
-        fade: string;
-        move: string;
-        zoom: string;
-        rotate: string;
-        none: string;
-        bounce: string;
-        blink: string;
-        strength: string;
-        spaceEvenly: string;
-        horizontalDistribution: string;
-        verticalDistribution: string;
-        strokeWidth: string;
-        strokeSettings: string;
-        colorPicker: {
-            solid: string;
-            linear: string;
-            angle: string;
-        };
-        aiText: {
-            aiWrite: string;
-            rewrite: string;
-            shorten: string;
-            continue: string;
-            proofread: string;
-            tones: string;
-            friendly: string;
-            professional: string;
-            humorous: string;
-            formal: string;
-            customPrompt: string;
-            generatedResult: string;
-            cancel: string;
-            generate: string;
-            back: string;
-            tryAgain: string;
-            insert: string;
-            promptPlaceholder: string;
-        };
-        addImage: string;
-        addText: string;
-        fileType: string;
-        quality: string;
-        multiplier: string;
-        size: string;
-    };
-    workspace: {
-        noPages: string;
-        addPage: string;
-        removePage: string;
-        duplicatePage: string;
-        moveUp: string;
-        moveDown: string;
-    };
-    scale: {
-        reset: string;
-    };
-    error: {
-        removeBackground: string;
-    };
-    sidePanel: {
-        templates: string;
-        searchTemplatesWithSameSize: string;
-        searchPlaceholder: string;
-        otherFormats: string;
-        noResults: string;
-        error: string;
-        text: string;
-        uploadFont: string;
-        myFonts: string;
-        photos: string;
-        videos: string;
-        animations: string;
-        effects: string;
-        elements: string;
-        shapes: string;
-        lines: string;
-        upload: string;
-        uploadImage: string;
-        uploadTip: string;
-        background: string;
-        resize: string;
-        layers: string;
-        layerTypes: {
-            image: string;
-            text: string;
-            svg: string;
-            line: string;
-            figure: string;
-            group: string;
-        };
-        layersTip: string;
-        noLayers: string;
-        namePlaceholder: string;
-        useMagicResize: string;
-        clipImage: string;
-        width: string;
-        height: string;
-        magicResizeDescription: string;
-        headerText: string;
-        createHeader: string;
-        subHeaderText: string;
-        createSubHeader: string;
-        bodyText: string;
-        createBody: string;
-        units: string;
-    };
-    topbar: {
-        newDesign: string;
-        language: string;
-        editableTextPlaceholder: string;
-        statusLoading: string;
-        statusSaved: string;
-        statusHasChanges: string;
-        statusSaving: string;
-    };
-};
+export { getTranslations, setTranslations } from './utils/l10n.js';
 
 type UrlResult = {
     method?: string;
@@ -277,4 +58,4 @@ interface PresetLine {
 declare const LinePoolItems: LinePoolItem[];
 declare const PathLineLibs: PresetLine[];
 
-export { type LinePoint, type LinePoolItem, LinePoolItems, PathLineLibs, type PathListItem, type PathPoolItem, PathShapeLibs, type PresetLine, ShapePathFormulasKeys, getTranslations, setAPI, setTranslations };
+export { type LinePoint, type LinePoolItem, LinePoolItems, PathLineLibs, type PathListItem, type PathPoolItem, PathShapeLibs, type PresetLine, ShapePathFormulasKeys, setAPI };

package/dist/config.js

@@ -1 +1 @@
-import{c as d,d as e,e as f,f as g}from"./chunk-45NWLCOP.js";import{a,b}from"./chunk-WFMCGQ5V.js";import{f as c}from"./chunk-EUTDQZKU.js";import"./chunk-O2XFH626.js";export{f as LinePoolItems,g as PathLineLibs,e as PathShapeLibs,d as ShapePathFormulasKeys,b as getTranslations,c as setAPI,a as setTranslations};
+import{c as d,d as e,e as f,f as g}from"./chunk-45NWLCOP.js";import{g as c}from"./chunk-3PMUQSBH.js";import{a,b}from"./chunk-Q7N7SBSC.js";import"./chunk-O2XFH626.js";export{f as LinePoolItems,g as PathLineLibs,e as PathShapeLibs,d as ShapePathFormulasKeys,b as getTranslations,c as setAPI,a as setTranslations};

package/dist/model/store.d.ts

@@ -2,4 +2,4 @@ import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-export { E as ExportOptions, a as Font, b as Store, d as StoreProps, S as StoreType, c as createStore, c as default, f as forEveryChild, g as getToken } from '../store-DfmY1m2j.js';
+export { E as ExportOptions, a as Font, b as Store, d as StoreProps, S as StoreType, c as createStore, c as default, f as forEveryChild, g as getToken } from '../store-CgxwnT-h.js';

package/dist/model/store.js

@@ -1 +1 @@
-import{a,b,c,d,e,f}from"../chunk-KERQXVBL.js";import"../chunk-YBC2DYJX.js";import"../chunk-O2XFH626.js";export{b as Font,c as Store,e as createStore,f as default,a as forEveryChild,d as getToken};
+import{a,b,c,d,e,f}from"../chunk-C4XMVZO4.js";import"../chunk-YBC2DYJX.js";import"../chunk-O2XFH626.js";export{b as Font,c as Store,e as createStore,f as default,a as forEveryChild,d as getToken};

package/dist/project.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { S as StoreType, F as FONT } from './store-DfmY1m2j.js';
+import { S as StoreType, F as FONT } from './store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
@@ -13,6 +13,7 @@ declare class Project {
     private isOne;
     store: StoreType;
     id: string;
+    type: string;
     name: string;
     user: {};
     skipSaving: boolean;
@@ -39,8 +40,17 @@ declare class Project {
      */
     loadById(id?: string, type?: string): Promise<void>;
     updateUrlWithProjectId(): void;
+    /**
+     * 保存数据
+     * - 保存到线上
+     */
     save(): Promise<void>;
     getGlobalFont(fonts?: FONT[]): Promise<FONT[]>;
+    uploadFileToCos(file: Blob): Promise<{
+        url: string;
+        width: number;
+        height: number;
+    }>;
 }
 declare const ProjectContext: react.Context<Project | null>;
 declare const useProject: () => Project;

package/dist/project.js

@@ -1 +1 @@
-import{b as a,c as b,d as c,e as d}from"./chunk-2AZQIJ4K.js";import"./chunk-KERQXVBL.js";import"./chunk-YBC2DYJX.js";import"./chunk-EUTDQZKU.js";import"./chunk-O2XFH626.js";export{a as ProjectContext,c as createProject,d as default,b as useProject};
+import{b as a,c as b,d as c,e as d}from"./chunk-OV7AL42Z.js";import"./chunk-C4XMVZO4.js";import"./chunk-YBC2DYJX.js";import"./chunk-3PMUQSBH.js";import"./chunk-O2XFH626.js";export{a as ProjectContext,c as createProject,d as default,b as useProject};

package/dist/side-panel/index.d.ts

@@ -1,5 +1,5 @@
 export { BackgroundSection, DEFAULT_SECTIONS, LayersSection, PhotosSection, Section, SectionTab, ShapesSection, default as SidePanel, SizeSection, TemplatesSection, TextSection, UploadSection } from './side-panel.js';
-import '../store-DfmY1m2j.js';
+import '../store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';

package/dist/side-panel/index.js

@@ -1 +1 @@
-import{a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c}from"../chunk-SR5OYO6O.js";import"../chunk-63A6RW6Y.js";import"../chunk-RVXI723F.js";import"../chunk-45NWLCOP.js";import"../chunk-5C2MNUBC.js";import"../chunk-EWOU5F3O.js";import"../chunk-WFMCGQ5V.js";import"../chunk-EUTDQZKU.js";import"../chunk-O2XFH626.js";export{t as BackgroundSection,b as DEFAULT_SECTIONS,x as LayersSection,f as PhotosSection,o as SectionTab,m as ShapesSection,c as SidePanel,a as SizeSection,r as TemplatesSection,e as TextSection,p as UploadSection};
+import{a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c}from"../chunk-SEZLO2OE.js";import"../chunk-VIU27HHW.js";import"../chunk-RVXI723F.js";import"../chunk-EWOU5F3O.js";import"../chunk-5C2MNUBC.js";import"../chunk-45NWLCOP.js";import"../chunk-3PMUQSBH.js";import"../chunk-Q7N7SBSC.js";import"../chunk-O2XFH626.js";export{t as BackgroundSection,b as DEFAULT_SECTIONS,x as LayersSection,f as PhotosSection,o as SectionTab,m as ShapesSection,c as SidePanel,a as SizeSection,r as TemplatesSection,e as TextSection,p as UploadSection};

package/dist/side-panel/side-panel.d.ts

@@ -1,4 +1,4 @@
-import { S as StoreType } from '../store-DfmY1m2j.js';
+import { S as StoreType } from '../store-CgxwnT-h.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';

package/dist/side-panel/side-panel.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j,k,l}from"../chunk-SR5OYO6O.js";import"../chunk-63A6RW6Y.js";import"../chunk-RVXI723F.js";import"../chunk-45NWLCOP.js";import"../chunk-5C2MNUBC.js";import"../chunk-EWOU5F3O.js";import"../chunk-WFMCGQ5V.js";import"../chunk-EUTDQZKU.js";import"../chunk-O2XFH626.js";export{g as BackgroundSection,j as DEFAULT_SECTIONS,h as LayersSection,d as PhotosSection,a as SectionTab,e as ShapesSection,k as SidePanel,i as SizeSection,b as TemplatesSection,c as TextSection,f as UploadSection,l as default};
+import{a,b,c,d,e,f,g,h,i,j,k,l}from"../chunk-SEZLO2OE.js";import"../chunk-VIU27HHW.js";import"../chunk-RVXI723F.js";import"../chunk-EWOU5F3O.js";import"../chunk-5C2MNUBC.js";import"../chunk-45NWLCOP.js";import"../chunk-3PMUQSBH.js";import"../chunk-Q7N7SBSC.js";import"../chunk-O2XFH626.js";export{g as BackgroundSection,j as DEFAULT_SECTIONS,h as LayersSection,d as PhotosSection,a as SectionTab,e as ShapesSection,k as SidePanel,i as SizeSection,b as TemplatesSection,c as TextSection,f as UploadSection,l as default};

package/dist/{store-DfmY1m2j.d.ts → store-CgxwnT-h.d.ts}

@@ -94,6 +94,7 @@ declare const Store: mobx_state_tree.IModelType<{
     _triggerUpdate(): void;
     _fontSizeUpdate(): void;
     _syncBackgroundColor(color: any): void;
+    _workareaSizeChanged(width: number, height: number): void;
 } & {
     setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
     set(options: any, element?: FabricObject): void;
@@ -210,6 +211,7 @@ declare function createStore({ key, token, workspaceId }: StoreProps): mobx_stat
     _triggerUpdate(): void;
     _fontSizeUpdate(): void;
     _syncBackgroundColor(color: any): void;
+    _workareaSizeChanged(width: number, height: number): void;
 } & {
     setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
     set(options: any, element?: FabricObject): void;
@@ -315,6 +317,7 @@ declare function createStore({ key, token, workspaceId }: StoreProps): mobx_stat
     _triggerUpdate(): void;
     _fontSizeUpdate(): void;
     _syncBackgroundColor(color: any): void;
+    _workareaSizeChanged(width: number, height: number): void;
 } & {
     setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
     set(options: any, element?: FabricObject): void;

package/dist/toolbar/download-button.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as StoreType } from '../store-DfmY1m2j.js';
+import { S as StoreType } from '../store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';

package/dist/toolbar/download-button.js

@@ -1 +1 @@
-import{a,b}from"../chunk-RBRSKAZL.js";import"../chunk-WFMCGQ5V.js";import"../chunk-O2XFH626.js";export{a as DownloadButton,b as default};
+import{a,b}from"../chunk-AMEXYVS6.js";import"../chunk-Q7N7SBSC.js";import"../chunk-O2XFH626.js";export{a as DownloadButton,b as default};

package/dist/toolbar/toolbar.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import * as react from 'react';
-import { S as StoreType } from '../store-DfmY1m2j.js';
+import { S as StoreType } from '../store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';

package/dist/toolbar/toolbar.js

@@ -1,6 +1,6 @@
-import{d as W,e as _,g as $t}from"../chunk-63A6RW6Y.js";import{a as z,c as qt}from"../chunk-RVXI723F.js";import{a as Xt,b as Kt,d as Jt}from"../chunk-45NWLCOP.js";import{b as Qt}from"../chunk-RBRSKAZL.js";import{a as Bt}from"../chunk-YBC2DYJX.js";import{a as nt}from"../chunk-EWOU5F3O.js";import{c as i}from"../chunk-WFMCGQ5V.js";import"../chunk-EUTDQZKU.js";import"../chunk-O2XFH626.js";import jt from"styled-components";import{useRef as Sn}from"react";import{observer as U}from"mobx-react-lite";import{useEffect as tt,useState as S,useCallback as uo,useRef as oe,useMemo as go}from"react";import{ColorPicker as fo,Popover as ne,Button as R,Input as yo,InputNumber as Et,Space as bo,Slider as re,Tooltip as L}from"antd";import{cssGradient2FabricGradient as ho}from"@ydesign/core";import{ChevronDown as xo,TextAlignStart as vo,TextAlignCenter as ko,TextAlignEnd as Co,TextAlignJustify as Fo,Bold as So,Italic as To,Underline as wo,Strikethrough as Bo,ListChevronsUpDown as Ho,TextWrap as Po}from"lucide-react";import{FixedSizeList as Eo}from"react-window";import{Popover as ro,Button as no,Switch as Ht,Slider as lt,InputNumber as q,ColorPicker as Zt}from"antd";import{observer as io}from"mobx-react-lite";import{Sparkles as lo}from"lucide-react";import{useEffect as ao,useState as x}from"react";import{Fragment as Pt,jsx as f,jsxs as C}from"react/jsx-runtime";var $=(t,e,o)=>Math.max(e,Math.min(o,t)),te={display:"inline-flex",justifyContent:"space-between",width:"100%",padding:6},it={display:"flex",alignItems:"center",justifyContent:"space-between",padding:6},N=({label:t,enabled:e,visible:o=!0,onEnabledChange:l,numberValue:n,min:r,max:d,onNumberValueChange:p,step:y})=>o?C(Pt,{children:[C("div",{style:{display:"inline-flex",justifyContent:"space-between",width:"100%",padding:"6px"},children:[f("span",{children:t}),f(Ht,{checked:e,onChange:s=>{l(s)}})]}),e?C("div",{style:{display:"flex",width:"100%",justifyContent:"space-between",marginTop:10,marginBottom:10},children:[f("div",{style:{flex:1},children:f(lt,{value:n,onChange:s=>{p(s)},min:r,max:d,step:y})}),f(q,{size:"small",style:{width:60,marginLeft:10},value:n,step:y,onChange:s=>{p($(s,r,d))}})]}):null]}):null,D=io(({element:t,store:e,elements:o})=>{let n=(o||[t])[0],r=e.editor,d=n?.type==="textbox",p=n?.type==="image",y=r?.imageFiltersHandler.getFilter("blur"),s=r?.imageFiltersHandler.getFilter("brightness"),c=r?.imageFiltersHandler.getFilter("contrast"),u=r?.imageFiltersHandler.getFilter("saturation"),B=r?.imageFiltersHandler.getFilter("vibrance"),H=r?.imageFiltersHandler.getFilter("hueRotation"),I=r?.imageFiltersHandler.getFilter("noise"),P=r?.imageFiltersHandler.getFilter("pixelate"),[M,J]=x(!!y),[ft,rt]=x(y?.blur||.5),[E,yt]=x(!!s),[Le,Mt]=x(s?.brightness||.05),[Ue,bt]=x(!!c),[Ge,Wt]=x(c?.contrast||.25),[Ye,ht]=x(!!u),[Xe,_t]=x(u?.saturation||1),[Ke,xt]=x(!!B),[Je,Dt]=x(B?.vibrance||1),[qe,vt]=x(!!H),[$e,Lt]=x(H?.rotation||-.5),[Qe,kt]=x(!!I),[Ze,Ut]=x(I?.noise||30),[to,Ct]=x(!!P),[eo,Gt]=x(P?.blocksize||30),[oo,Ft]=x(n?.stroke),[St,Tt]=x(n?.strokeWidth),[T,Yt]=x({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"});ao(()=>{Ft(n?.stroke),Tt(n?.strokeWidth),Yt({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"}),J(!!y),rt(y?.blur||.5),yt(!!s),Mt(s?.brightness||.05),bt(!!c),Wt(c?.contrast||.25),ht(!!u),_t(u?.saturation||1),xt(!!B),Dt(B?.vibrance||1),vt(!!H),Lt(H?.rotation||-.5),kt(!!I),Ut(I?.noise||30),Ct(!!P),Gt(P?.blocksize||30)},[n]);let wt=a=>{r?.objectsHandler.setTextStyle(a)},A=(a,b)=>{Yt({...T,[a]:b}),r&&r.objectsHandler.setShadow({...T,[a]:b})};return f(ro,{trigger:"click",content:C("div",{style:{width:"280px",maxHeight:"calc(100vh - 150px)",overflow:"auto"},children:[f(N,{label:i("toolbar.blur"),visible:p,enabled:M,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"blur",{blur:.5}),J(!0)):(r?.imageFiltersHandler._removeFilter(b,"blur"),J(!1))},min:0,max:1,step:.1,numberValue:ft,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("blur","blur",a),rt(a)}}),f(N,{label:i("toolbar.brightness"),visible:p,enabled:E,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"brightness",{brightness:.05}),yt(!0)):(r?.imageFiltersHandler._removeFilter(b,"brightness"),yt(!1))},min:-1,max:1,step:.01,numberValue:Le,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("brightness","brightness",a),Mt(a)}}),f(N,{label:i("toolbar.contrast"),visible:p,enabled:Ue,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"contrast",{contrast:.25}),bt(!0)):(r?.imageFiltersHandler._removeFilter(b,"contrast"),bt(!1))},min:-1,max:1,step:.01,numberValue:Ge,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("contrast","contrast",a),Wt(a)}}),f(N,{label:i("toolbar.saturation"),visible:p,enabled:Ye,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"saturation",{saturation:1}),ht(!0)):(r?.imageFiltersHandler._removeFilter(b,"saturation"),ht(!1))},min:-1,max:1,step:.01,numberValue:Xe,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("saturation","saturation",a),_t(a)}}),f(N,{label:i("toolbar.vibrance"),visible:p,enabled:Ke,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"vibrance",{vibrance:1}),xt(!0)):(r?.imageFiltersHandler._removeFilter(b,"vibrance"),xt(!1))},min:-1,max:1,step:.01,numberValue:Je,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("vibrance","vibrance",a),Dt(a)}}),f(N,{label:i("toolbar.hueRotation"),visible:p,enabled:qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"hueRotation",{rotation:-.5}),vt(!0)):(r?.imageFiltersHandler._removeFilter(b,"hueRotation"),vt(!1))},min:-1,max:1,step:.01,numberValue:$e,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("hueRotation","rotation",a),Lt(a)}}),f(N,{label:i("toolbar.noise"),visible:p,enabled:Qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"noise",{noise:30}),kt(!0)):(r?.imageFiltersHandler._removeFilter(b,"noise"),kt(!1))},min:0,max:1e3,step:1,numberValue:Ze,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("noise","noise",a),Ut(a)}}),f(N,{label:i("toolbar.pixelate"),visible:p,enabled:to,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"pixelate",{blocksize:10}),Ct(!0)):(r?.imageFiltersHandler._removeFilter(b,"pixelate"),Ct(!1))},min:.01,max:100,step:.01,numberValue:eo,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("pixelate","blocksize",a),Gt(a)}}),d&&C(Pt,{children:[C("div",{style:te,children:[f("span",{children:i("toolbar.textStroke")}),f(Ht,{checked:!!St,onChange:a=>{wt({strokeWidth:a?10:0,stroke:a?"red":null}),Tt(a?10:0),Ft(a?"red":null)}})]}),!!St&&C("div",{style:{display:"flex",justifyContent:"space-between",padding:"6px"},children:[f(Zt,{value:oo,onChange:a=>{let b=a.toCssString();wt({stroke:b}),Ft(b)}}),f(q,{value:St,onChange:a=>{wt({strokeWidth:$(a,1,30)}),Tt($(a,1,30))},style:{width:60},min:1,max:Math.round(n.fontSize/2)})]})]}),C("div",{style:te,children:[f("span",{children:i("toolbar.shadow")}),f(Ht,{checked:!!T.enabled,onChange:a=>{A("enabled",a)}})]}),T.enabled&&C(Pt,{children:[C("div",{style:it,children:[f("div",{children:i("toolbar.blur")}),f("div",{children:f(q,{value:T.blur,style:{width:60},min:0,max:50,onChange:a=>{A("blur",a)}})})]}),f(lt,{value:T.blur,onChange:a=>A("blur",a),min:0,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetX")}),f("div",{children:f(q,{value:T.offsetX,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetX",$(a,-50,50))}})})]}),f(lt,{value:T.offsetX,onChange:a=>A("offsetX",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetY")}),f("div",{children:f(q,{value:T.offsetY,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetY",$(a,-50,50))}})})]}),f(lt,{value:T.offsetY,onChange:a=>A("offsetY",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.color")}),f(Zt,{defaultFormat:"rgb",value:T.color,onChange:a=>{A("color",a.toRgbString())}})]})]})]}),children:f(no,{type:"text",icon:f(lo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.effects")})})});import{observer as so}from"mobx-react-lite";import{Popover as co,Button as po}from"antd";import{Pencil as mo}from"lucide-react";import{jsx as at}from"react/jsx-runtime";var ee=so(()=>at(co,{trigger:"click",content:at("div",{children:"AI write"}),children:at(po,{type:"text",icon:at(mo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.aiText.aiWrite")})}));import{jsx as m,jsxs as Z}from"react/jsx-runtime";var{Search:Io}=yo,zo=({fontFamily:t,handleClick:e,modifiers:o,store:l,isCustom:n})=>{let[r,d]=S(!n);if(console.log("FontItem ---> ",d),tt(()=>{r||l.loadFont(t)},[t,r]),t==="_divider")return m("div",{style:{width:"100%",height:1,background:"#e8e8e8"}});let p=t;return m(R,{type:o.active?"primary":"text",block:!0,style:{justifyContent:"start"},onClick:()=>e(t),disabled:o.disabled,styles:{root:{fontFamily:'"'+t+'"'},content:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"}},children:p})},Ro=({onChange:t,defaultValue:e})=>m(Io,{placeholder:e,allowClear:!0,onChange:o=>{t(o.target.value)},style:{width:210}}),Ao=({store:t,fonts:e,activeFont:o,activeFontLabel:l,onFontSelect:n})=>{let[r,d]=S(""),p=e.filter(y=>y.toLowerCase().includes(r.toLowerCase()));return m(ne,{content:Z("div",{children:[m(Ro,{defaultValue:"\u641C\u7D22\u5B57\u4F53",onChange:y=>d(y??"")}),m("div",{style:{paddingTop:5},children:m(Eo,{itemCount:p.length,itemSize:28,width:210,height:Math.min(400,28*p.length)+10,children:({index:y,style:s})=>{let c=p[y];return m("div",{style:{...s,display:"flex",alignItems:"center",justifyContent:"center"},children:m(zo,{fontFamily:c,modifiers:{active:o===c},handleClick:()=>n(c),store:t,isCustom:t.fonts.find(u=>u.fontFamily===c)||Bt.find(u=>u.fontFamily===c)},c)})}})})]}),trigger:"click",children:m(R,{type:"text",style:{marginRight:5,fontFamily:'"'+o+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:30,padding:"0 10px"},icon:m(xo,{size:16,style:{display:"flex"}}),iconPlacement:"end",children:l})})},st=["left","center","right","justify"],No=U(({elements:t,store:e})=>{let o=e.fonts.concat(Bt).map(d=>d.fontFamily),l=t[0].fontFamily;l.length>15&&(l=l.slice(0,15)+"...");let n=qt(e.objects),r=[...new Set(n.concat("_divider").concat(o))];return m(Ao,{fonts:r,activeFont:t[0].fontFamily,activeFontLabel:l,store:e,onFontSelect:d=>{e.editor?.objectsHandler.setTextStyle({fontFamily:d})}})}),Q=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",Vo=U(({elements:t,store:e})=>{let o=t[0],l=uo(()=>{let{selectionStart:s,selectionEnd:c}=o;if(s!==c&&s!==void 0){let u=o.getSelectionStyles(s,s+1);if(u.length>0&&u[0].fill!==void 0)return u[0].fill}return o.fill},[o]),[n,r]=S(()=>z(l())),d=oe(!1),p=oe(Q(l()));tt(()=>{let s=e.editor?.customCanvas?.canvas;if(!s)return;let c=()=>{if(!d.current){let u=l();p.current=Q(u),r(z(u))}};return s.on("text:selection:changed",c),s.on("text:editing:entered",c),s.on("text:editing:exited",c),()=>{s.off("text:selection:changed",c),s.off("text:editing:entered",c),s.off("text:editing:exited",c)}},[e.editor?.customCanvas?.canvas,l]),tt(()=>{if(!d.current){let s=l(),c=Q(s);c!==p.current&&(p.current=c,r(z(s)))}},[o,l]);let y=go(()=>n,[Q(n)]);return m(fo,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{if(d.current=s,!s){let c=l();p.current=Q(c)}},onChange:s=>{r(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=ho(c);e.editor?.objectsHandler.setTextStyle({fill:u})}else e.editor?.objectsHandler.setTextStyle({fill:c})}})}),Oo=U(({elements:t,store:e})=>{let[o,l]=S(t[0].fontSize);tt(()=>{l(t[0].fontSize)},[t[0]?.fontSize,e._updateFontSize]);let n=r=>{Number.isNaN(r)||(e.editor?.objectsHandler.setTextStyle({fontSize:Number(r)}),l(Number(r)))};return m(Et,{min:1,max:4*e.height,value:Math.round(o),onChange:n,style:{width:75},styles:{actions:{opacity:1,width:24}}})}),jo=U(({elements:t,store:e})=>{let o=t[0],[l,n]=S(o.textAlign),[r,d]=S(o.fontWeight),[p,y]=S(o.fontStyle),[s,c]=S(o.underline),[u,B]=S(o.linethrough),[H,I]=S(o.splitByGrapheme);return tt(()=>{n(o.textAlign),d(o.fontWeight),y(o.fontStyle),c(o.underline),B(o.linethrough),I(o.splitByGrapheme)},[o]),Z(bo.Compact,{children:[m(L,{placement:"bottom",title:i(`toolbar.text${l}`),children:m(R,{type:"text",icon:l==="left"?m(vo,{size:16,style:{display:"flex"}}):l==="center"?m(ko,{size:16,style:{display:"flex"}}):l==="right"?m(Co,{size:16,style:{display:"flex"}}):m(Fo,{size:16,style:{display:"flex"}}),onClick:()=>{let P=(st.indexOf(l)+1+st.length)%st.length,M=st[P];e.editor?.objectsHandler.setTextStyle({textAlign:M}),n(M)}})}),m(L,{placement:"bottom",title:i("toolbar.textBold"),children:m(R,{type:r==="bold"||r==="700"?"primary":"text",icon:m(So,{size:16,style:{display:"flex"}}),onClick:()=>{r==="bold"||r==="700"?(e.editor?.objectsHandler.setTextStyle({fontWeight:"normal"}),d("normal")):(e.editor?.objectsHandler.setTextStyle({fontWeight:"bold"}),d("bold"))}})}),m(L,{placement:"bottom",title:i("toolbar.textItalic"),children:m(R,{type:p==="italic"?"primary":"text",icon:m(To,{size:16,style:{display:"flex"}}),onClick:()=>{p==="italic"?(e.editor?.objectsHandler.setTextStyle({fontStyle:"normal"}),y("normal")):(e.editor?.objectsHandler.setTextStyle({fontStyle:"italic"}),y("italic"))}})}),m(L,{placement:"bottom",title:i("toolbar.textUnderline"),children:m(R,{type:s?"primary":"text",icon:m(wo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({underline:!s}),c(!s)}})}),m(L,{placement:"bottom",title:i("toolbar.textStrikethrough"),children:m(R,{type:u?"primary":"text",icon:m(Bo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({linethrough:!u}),B(!u)}})}),m(L,{placement:"bottom",title:i("toolbar.splitByGrapheme"),children:m(R,{type:H?"primary":"text",icon:m(Po,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({splitByGrapheme:!H}),I(!H)}})})]})}),Mo=U(({elements:t,store:e})=>{let o=t[0],l={display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},n=typeof o.lineHeight=="number"?100*o.lineHeight:120,[r,d]=S(n),[p,y]=S(o.charSpacing),s=c=>{e.editor?.objectsHandler.setTextStyle(c)};return m(ne,{trigger:"click",content:Z("div",{style:{padding:"0 6px",width:"230px"},children:[Z("div",{style:l,children:[m("div",{children:i("toolbar.lineHeight")}),m("div",{children:m(Et,{min:50,max:250,value:Math.round(r),style:{width:80},onChange:c=>{s({lineHeight:c/100}),d(c)}})})]}),m(re,{value:Math.round(r),min:50,max:250,step:1,onChange:c=>{s({lineHeight:c/100}),d(c)}}),Z("div",{style:l,children:[m("div",{children:i("toolbar.letterSpacing")}),m("div",{children:m(Et,{min:-50,max:250,value:Math.round(p/10),style:{width:80},onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})})]}),m(re,{value:Math.round(p/10),min:-50,max:250,step:1,onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})]}),children:m(R,{type:"text",icon:m(Ho,{size:16,style:{display:"flex"}})})})}),Wo={TextFill:Vo,TextFontFamily:No,TextFontSize:Oo,TextFontVariant:jo,TextSpacing:Mo,TextFilters:D,TextAiWrite:ee},_o=U(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters","TextAiWrite"],components:e});return m(_,{items:n,itemRender:r=>{let d=e[r]||Wo[r];return d&&m(d,{elements:o,element:o[0],store:t},r)}})}),ie=_o;import{Tooltip as le,Button as ae}from"antd";import{Undo2 as Do,Redo2 as Lo}from"lucide-react";import{observer as Uo}from"mobx-react-lite";import{useEffect as Go,useState as Yo}from"react";import{jsx as G,jsxs as Xo}from"react/jsx-runtime";var se=Uo(({store:t})=>{let[e,o]=Yo({hasUndo:!1,hasRedo:!1});return Go(()=>{let l=t.editor,n=r=>{o(r)};return l&&l.on("history:changed",n),()=>{l&&l.off("history:changed",n)}},[t.editor]),Xo(It,{style:{float:"left",paddingRight:10},children:[G(le,{title:i("toolbar.undo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasUndo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.undo()},children:G(Do,{size:16})})}),G(le,{title:i("toolbar.redo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasRedo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.redo()},children:G(Lo,{size:16})})})]})});import{observer as Tn}from"mobx-react-lite";import{Layers as Ko}from"lucide-react";import{Popover as Jo,Button as F,Divider as zt}from"antd";import{observer as qo}from"mobx-react-lite";import{ChevronUp as $o,ChevronsUp as Qo,ChevronDown as Zo,ChevronsDown as tr,AlignStartVertical as er,AlignCenterVertical as or,AlignEndVertical as rr,AlignStartHorizontal as nr,AlignCenterHorizontal as ir,AlignEndHorizontal as lr,AlignVerticalSpaceAround as ar,AlignHorizontalSpaceAround as sr}from"lucide-react";import{Fragment as ce,jsx as g,jsxs as w}from"react/jsx-runtime";var de=qo(({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElementsIds,l=t.selectedElements.every(r=>r?.locked),n=!l&&t.selectedElements.length>1;return g(Jo,{styles:{container:{padding:"10px 5px"}},content:w("div",{style:{width:280},children:[g(zt,{size:"small",children:i("toolbar.layering")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g($o,{size:16}),disabled:!t.canMoveElementsUp(o),onClick:()=>{t.moveElementsUp(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.up")})}),g(F,{type:"text",block:!0,icon:g(Qo,{size:16}),disabled:!t.canMoveElementsTop(o),onClick:()=>{t.moveElementsTop(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toForward")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(Zo,{size:16}),disabled:!t.canMoveElementsDown(o),onClick:()=>{t.moveElementsDown(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.down")})}),g(F,{type:"text",block:!0,icon:g(tr,{size:16}),disabled:!t.canMoveElementsBottom(o),onClick:()=>{t.moveElementsBottom(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toBottom")})})]})]}),!l&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.position")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(er,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignLeft()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignLeft")})}),g(F,{type:"text",block:!0,icon:g(or,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignCenter()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignCenter")})}),g(F,{type:"text",block:!0,icon:g(rr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignRight()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignRight")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(nr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignTop()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignTop")})}),g(F,{type:"text",block:!0,icon:g(ir,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignMiddle()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignMiddle")})}),g(F,{type:"text",block:!0,icon:g(lr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignBottom()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignBottom")})})]})]})]}),n&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.spaceEvenly")}),w("div",{style:{display:"flex"},children:[g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(ar,{size:16}),onClick:()=>{t.editor?.alignmentHandler.yequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.verticalDistribution")})})}),g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(sr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.xequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.horizontalDistribution")})})})]})]})]}),trigger:"click",placement:"bottom",children:w(F,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:[g(Ko,{size:16}),i("toolbar.position")]})})});import{Blend as cr}from"lucide-react";import{Popover as dr,Tooltip as pr,Button as mr,InputNumber as ur,Slider as gr}from"antd";import{observer as fr}from"mobx-react-lite";import{useState as yr,useEffect as br}from"react";import{jsx as V,jsxs as pe}from"react/jsx-runtime";var me=fr(({store:t})=>{let e=t.selectedShapes.length>0,o=t.selectedShapes[0],[l,n]=yr(()=>Math.round(100*(o?.opacity??1)));br(()=>{o&&n(Math.round(100*(o.opacity??1)))},[o,o?.opacity]);let r=d=>{let p=Math.max(0,Math.min(d,100));n(p),t.set({opacity:p/100})};return V(pr,{title:i("toolbar.transparency"),placement:"bottom",children:V(dr,{content:pe("div",{children:[V("div",{style:{textAlign:"center",marginBottom:10},children:i("toolbar.transparency")}),pe("div",{style:{display:"flex"},children:[V("div",{style:{width:170,paddingRight:20},children:V(gr,{min:0,max:100,onChange:r,value:l})}),V(ur,{min:0,max:100,value:l,onChange:r,size:"small",styles:{root:{width:65}}})]})]}),trigger:"click",children:V(mr,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:V(cr,{size:16})})})})});import{LockKeyholeOpen as hr,LockKeyhole as xr}from"lucide-react";import{Tooltip as vr,Button as kr}from"antd";import{useCallback as ue}from"react";var ge=({store:t})=>{let e=t.selectedShapes.length>0,l=t.selectedShapes[0]?.locked;return{disabled:!e,lock:ue(()=>{t.editor?.lockHandler.lock()},[l,t]),unlock:ue(()=>{t.editor?.lockHandler.unlock()},[l,t]),locked:l}};import{observer as Cr}from"mobx-react-lite";import{jsx as Rt}from"react/jsx-runtime";var fe=Cr(({store:t})=>{let{disabled:e,locked:o,lock:l,unlock:n}=ge({store:t}),r=o?xr:hr,d=i(o?"toolbar.lockedDescription":"toolbar.unlockedDescription");return Rt(vr,{title:d,placement:"bottom",children:Rt(kr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o?n():l()},children:Rt(r,{size:16})})})});import{Copy as Sr}from"lucide-react";import{Tooltip as Tr,Button as wr}from"antd";import{observer as Br}from"mobx-react-lite";import{useCallback as Fr}from"react";var ye=({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElements.every(r=>r?.locked===!0),l=!e||o,n=Fr(()=>{t.clone()},[t]);return{disabled:l,duplicate:n}};import{jsx as At}from"react/jsx-runtime";var be=Br(({store:t})=>{let{disabled:e,duplicate:o}=ye({store:t});return At(Tr,{title:i("toolbar.duplicateElements"),placement:"bottom",children:At(wr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:At(Sr,{size:16})})})});import{Trash2 as Pr}from"lucide-react";import{Tooltip as Er,Button as Ir}from"antd";import{useCallback as Hr}from"react";var he=({store:t})=>{let e=t.selectedElements.filter(l=>!l?.locked),o=Hr(()=>{t.deleteElements(e.map(l=>l.id))},[t,e]);return{disabled:!e.length,remove:o}};import{observer as zr}from"mobx-react-lite";import{jsx as Nt}from"react/jsx-runtime";var xe=zr(({store:t})=>{let{disabled:e,remove:o}=he({store:t});return Nt(Er,{title:i("toolbar.removeElements"),placement:"bottom",children:Nt(Ir,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:Nt(Pr,{size:16})})})});import{Button as ve}from"antd";import{observer as Rr}from"mobx-react-lite";import{Fragment as Ar,jsx as ke,jsxs as Nr}from"react/jsx-runtime";var Ce=Rr(({store:t})=>{let e=t.selectedElements.length>1,o=t.selectedElements.length===1&&t.selectedElements[0]?.type==="group";return Nr(Ar,{children:[e&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.group()},children:i("toolbar.groupElements")}),o&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.ungroup()},children:i("toolbar.ungroupElements")})]})});import{observer as pt}from"mobx-react-lite";import{Button as dt,Tooltip as rn,Popover as nn}from"antd";import{Crop as ln}from"lucide-react";import an from"styled-components";import{Popover as Vr,Button as Vt}from"antd";import{Rotate3d as Or,FlipHorizontal as jr,FlipVertical as Mr}from"lucide-react";import{useState as Wr,useEffect as _r,useCallback as Fe}from"react";import{observer as Dr}from"mobx-react-lite";import{jsx as j,jsxs as Lr}from"react/jsx-runtime";var Se=Dr(({element:t,store:e})=>{let[o,l]=Wr({flipX:!1,flipY:!1}),n=Fe(()=>{e.editor?.objectsHandler.update({flipX:!o.flipX}),l({...o,flipX:!o.flipX})},[e.editor,o]),r=Fe(()=>{e.editor?.objectsHandler.update({flipY:!o.flipY}),l({...o,flipY:!o.flipY})},[e.editor,o]);return _r(()=>{t&&l({flipX:t.flipX,flipY:t.flipY})},[t]),j(Vr,{trigger:"click",content:Lr("div",{style:{width:165},children:[j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(jr,{size:16,style:{display:"flex"}}),onClick:n,children:i("toolbar.flipHorizontally")}),j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(Mr,{size:16,style:{display:"flex"}}),onClick:r,children:i("toolbar.flipVertically")})]}),children:j(Vt,{type:"text",icon:j(Or,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.flip")})})});import{Button as Ur,Modal as Gr}from"antd";import{useState as Te,useEffect as Yr}from"react";import{observer as we}from"mobx-react-lite";import{Fragment as Kr,jsx as ct,jsxs as Jr}from"react/jsx-runtime";var Xr=we(({isOpen:t,onClose:e,element:o})=>{let[l,n]=Te(o.getSrc());return Yr(()=>{n(o.getSrc())},[o.id]),ct(Gr,{title:i("toolbar.removeBackgroundTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmRemoveBackground"),cancelText:i("toolbar.cancelRemoveBackground"),children:ct("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Be=we(({element:t})=>{let[e,o]=Te(!1);return Jr(Kr,{children:[ct(Ur,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.removeBackground")}),ct(Xr,{isOpen:e,onClose:()=>o(!1),element:t})]})});import{Button as qr,Modal as $r}from"antd";import{Eraser as Qr}from"lucide-react";import{useState as He,useEffect as Zr}from"react";import{observer as Pe}from"mobx-react-lite";import{Fragment as en,jsx as et,jsxs as on}from"react/jsx-runtime";var tn=Pe(({isOpen:t,onClose:e,element:o})=>{let[l,n]=He(o.getSrc());return Zr(()=>{n(o.getSrc())},[o.id]),et($r,{title:i("toolbar.eraserPenTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmEraserPen"),cancelText:i("toolbar.cancelEraserPen"),children:et("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Ee=Pe(({element:t})=>{let[e,o]=He(!1);return on(en,{children:[et(qr,{type:"text",icon:et(Qr,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.eraserPen")}),et(tn,{isOpen:e,onClose:()=>o(!1),element:t})]})});function Ie(t,e){let o=t.width/t.height,l=e.width/e.height,n,r;o>=l?(n=e.width,r=e.width/o):(n=e.height*o,r=e.height);let d=(e.width-n)/2,p=(e.height-r)/2;return{cropX:d,cropY:p,width:n,height:r}}function ze(t){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(t)))}import{jsx as v}from"react/jsx-runtime";var sn=Object.keys(Xt),cn=[{width:300,height:300,fill:"lightgray",stroke:"#0c0c0c",strokeWidth:0,url:""}],Re=[];sn.forEach(t=>{cn.forEach(e=>{Re.push(Object.assign({subType:t},e))})});Re.forEach(t=>{t.url=ze(Kt(t))});var dn=an.div`
+import{a as Bt}from"../chunk-YBC2DYJX.js";import{d as W,e as _,g as $t}from"../chunk-VIU27HHW.js";import{a as z,c as qt}from"../chunk-RVXI723F.js";import{a as nt}from"../chunk-EWOU5F3O.js";import{a as Xt,b as Kt,d as Jt}from"../chunk-45NWLCOP.js";import"../chunk-3PMUQSBH.js";import{b as Qt}from"../chunk-AMEXYVS6.js";import{c as i}from"../chunk-Q7N7SBSC.js";import"../chunk-O2XFH626.js";import jt from"styled-components";import{useRef as Sn}from"react";import{observer as U}from"mobx-react-lite";import{useEffect as tt,useState as S,useCallback as go,useRef as oe,useMemo as uo}from"react";import{ColorPicker as fo,Popover as ne,Button as R,Input as yo,InputNumber as Et,Space as bo,Slider as re,Tooltip as L}from"antd";import{cssGradient2FabricGradient as ho}from"@ydesign/core";import{ChevronDown as xo,TextAlignStart as vo,TextAlignCenter as ko,TextAlignEnd as Co,TextAlignJustify as Fo,Bold as So,Italic as wo,Underline as To,Strikethrough as Bo,ListChevronsUpDown as Ho,TextWrap as Po}from"lucide-react";import{FixedSizeList as Eo}from"react-window";import{Popover as ro,Button as no,Switch as Ht,Slider as lt,InputNumber as q,ColorPicker as Zt}from"antd";import{observer as io}from"mobx-react-lite";import{Sparkles as lo}from"lucide-react";import{useEffect as ao,useState as x}from"react";import{Fragment as Pt,jsx as f,jsxs as C}from"react/jsx-runtime";var $=(t,e,o)=>Math.max(e,Math.min(o,t)),te={display:"inline-flex",justifyContent:"space-between",width:"100%",padding:6},it={display:"flex",alignItems:"center",justifyContent:"space-between",padding:6},N=({label:t,enabled:e,visible:o=!0,onEnabledChange:l,numberValue:n,min:r,max:d,onNumberValueChange:m,step:y})=>o?C(Pt,{children:[C("div",{style:{display:"inline-flex",justifyContent:"space-between",width:"100%",padding:"6px"},children:[f("span",{children:t}),f(Ht,{checked:e,onChange:c=>{l(c)}})]}),e?C("div",{style:{display:"flex",width:"100%",justifyContent:"space-between",marginTop:10,marginBottom:10},children:[f("div",{style:{flex:1},children:f(lt,{value:n,onChange:c=>{m(c)},min:r,max:d,step:y})}),f(q,{size:"small",style:{width:60,marginLeft:10},value:n,step:y,onChange:c=>{m($(c,r,d))}})]}):null]}):null,D=io(({element:t,store:e,elements:o})=>{let n=(o||[t])[0],r=e.editor,d=n?.type==="textbox",m=n?.type==="image",y=r?.imageFiltersHandler.getFilter("blur"),c=r?.imageFiltersHandler.getFilter("brightness"),s=r?.imageFiltersHandler.getFilter("contrast"),g=r?.imageFiltersHandler.getFilter("saturation"),B=r?.imageFiltersHandler.getFilter("vibrance"),H=r?.imageFiltersHandler.getFilter("hueRotation"),I=r?.imageFiltersHandler.getFilter("noise"),P=r?.imageFiltersHandler.getFilter("pixelate"),[M,J]=x(!!y),[ft,rt]=x(y?.blur||.5),[E,yt]=x(!!c),[Le,Mt]=x(c?.brightness||.05),[Ue,bt]=x(!!s),[Ge,Wt]=x(s?.contrast||.25),[Ye,ht]=x(!!g),[Xe,_t]=x(g?.saturation||1),[Ke,xt]=x(!!B),[Je,Dt]=x(B?.vibrance||1),[qe,vt]=x(!!H),[$e,Lt]=x(H?.rotation||-.5),[Qe,kt]=x(!!I),[Ze,Ut]=x(I?.noise||30),[to,Ct]=x(!!P),[eo,Gt]=x(P?.blocksize||30),[oo,Ft]=x(n?.stroke),[St,wt]=x(n?.strokeWidth),[w,Yt]=x({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"});ao(()=>{Ft(n?.stroke),wt(n?.strokeWidth),Yt({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"}),J(!!y),rt(y?.blur||.5),yt(!!c),Mt(c?.brightness||.05),bt(!!s),Wt(s?.contrast||.25),ht(!!g),_t(g?.saturation||1),xt(!!B),Dt(B?.vibrance||1),vt(!!H),Lt(H?.rotation||-.5),kt(!!I),Ut(I?.noise||30),Ct(!!P),Gt(P?.blocksize||30)},[n]);let Tt=a=>{r?.objectsHandler.setTextStyle(a)},A=(a,b)=>{Yt({...w,[a]:b}),r&&r.objectsHandler.setShadow({...w,[a]:b})};return f(ro,{trigger:"click",content:C("div",{style:{width:"280px",maxHeight:"calc(100vh - 150px)",overflow:"auto"},children:[f(N,{label:i("toolbar.blur"),visible:m,enabled:M,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"blur",{blur:.5}),J(!0)):(r?.imageFiltersHandler._removeFilter(b,"blur"),J(!1))},min:0,max:1,step:.1,numberValue:ft,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("blur","blur",a),rt(a)}}),f(N,{label:i("toolbar.brightness"),visible:m,enabled:E,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"brightness",{brightness:.05}),yt(!0)):(r?.imageFiltersHandler._removeFilter(b,"brightness"),yt(!1))},min:-1,max:1,step:.01,numberValue:Le,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("brightness","brightness",a),Mt(a)}}),f(N,{label:i("toolbar.contrast"),visible:m,enabled:Ue,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"contrast",{contrast:.25}),bt(!0)):(r?.imageFiltersHandler._removeFilter(b,"contrast"),bt(!1))},min:-1,max:1,step:.01,numberValue:Ge,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("contrast","contrast",a),Wt(a)}}),f(N,{label:i("toolbar.saturation"),visible:m,enabled:Ye,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"saturation",{saturation:1}),ht(!0)):(r?.imageFiltersHandler._removeFilter(b,"saturation"),ht(!1))},min:-1,max:1,step:.01,numberValue:Xe,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("saturation","saturation",a),_t(a)}}),f(N,{label:i("toolbar.vibrance"),visible:m,enabled:Ke,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"vibrance",{vibrance:1}),xt(!0)):(r?.imageFiltersHandler._removeFilter(b,"vibrance"),xt(!1))},min:-1,max:1,step:.01,numberValue:Je,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("vibrance","vibrance",a),Dt(a)}}),f(N,{label:i("toolbar.hueRotation"),visible:m,enabled:qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"hueRotation",{rotation:-.5}),vt(!0)):(r?.imageFiltersHandler._removeFilter(b,"hueRotation"),vt(!1))},min:-1,max:1,step:.01,numberValue:$e,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("hueRotation","rotation",a),Lt(a)}}),f(N,{label:i("toolbar.noise"),visible:m,enabled:Qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"noise",{noise:30}),kt(!0)):(r?.imageFiltersHandler._removeFilter(b,"noise"),kt(!1))},min:0,max:1e3,step:1,numberValue:Ze,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("noise","noise",a),Ut(a)}}),f(N,{label:i("toolbar.pixelate"),visible:m,enabled:to,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"pixelate",{blocksize:10}),Ct(!0)):(r?.imageFiltersHandler._removeFilter(b,"pixelate"),Ct(!1))},min:.01,max:100,step:.01,numberValue:eo,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("pixelate","blocksize",a),Gt(a)}}),d&&C(Pt,{children:[C("div",{style:te,children:[f("span",{children:i("toolbar.textStroke")}),f(Ht,{checked:!!St,onChange:a=>{Tt({strokeWidth:a?10:0,stroke:a?"red":null}),wt(a?10:0),Ft(a?"red":null)}})]}),!!St&&C("div",{style:{display:"flex",justifyContent:"space-between",padding:"6px"},children:[f(Zt,{value:oo,onChange:a=>{let b=a.toCssString();Tt({stroke:b}),Ft(b)}}),f(q,{value:St,onChange:a=>{Tt({strokeWidth:$(a,1,30)}),wt($(a,1,30))},style:{width:60},min:1,max:Math.round(n.fontSize/2)})]})]}),C("div",{style:te,children:[f("span",{children:i("toolbar.shadow")}),f(Ht,{checked:!!w.enabled,onChange:a=>{A("enabled",a)}})]}),w.enabled&&C(Pt,{children:[C("div",{style:it,children:[f("div",{children:i("toolbar.blur")}),f("div",{children:f(q,{value:w.blur,style:{width:60},min:0,max:50,onChange:a=>{A("blur",a)}})})]}),f(lt,{value:w.blur,onChange:a=>A("blur",a),min:0,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetX")}),f("div",{children:f(q,{value:w.offsetX,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetX",$(a,-50,50))}})})]}),f(lt,{value:w.offsetX,onChange:a=>A("offsetX",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetY")}),f("div",{children:f(q,{value:w.offsetY,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetY",$(a,-50,50))}})})]}),f(lt,{value:w.offsetY,onChange:a=>A("offsetY",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.color")}),f(Zt,{defaultFormat:"rgb",value:w.color,onChange:a=>{A("color",a.toRgbString())}})]})]})]}),children:f(no,{type:"text",icon:f(lo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.effects")})})});import{observer as so}from"mobx-react-lite";import{Popover as co,Button as po}from"antd";import{Pencil as mo}from"lucide-react";import{jsx as at}from"react/jsx-runtime";var ee=so(()=>at(co,{trigger:"click",content:at("div",{children:"AI write"}),children:at(po,{type:"text",icon:at(mo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.aiText.aiWrite")})}));import{jsx as p,jsxs as Z}from"react/jsx-runtime";var{Search:Io}=yo,zo=({fontFamily:t,handleClick:e,modifiers:o,store:l,isCustom:n})=>{let[r,d]=S(!n);if(console.log("FontItem ---> ",d),tt(()=>{r||l.loadFont(t)},[t,r]),t==="_divider")return p("div",{style:{width:"100%",height:1,background:"#e8e8e8"}});let m=t;return p(R,{type:o.active?"primary":"text",block:!0,style:{justifyContent:"start"},onClick:()=>e(t),disabled:o.disabled,styles:{root:{fontFamily:'"'+t+'"'},content:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"}},children:m})},Ro=({onChange:t,defaultValue:e})=>p(Io,{placeholder:e,allowClear:!0,onChange:o=>{t(o.target.value)},style:{width:210}}),Ao=({store:t,fonts:e,activeFont:o,activeFontLabel:l,onFontSelect:n})=>{let[r,d]=S(""),m=e.filter(y=>y.toLowerCase().includes(r.toLowerCase()));return p(ne,{content:Z("div",{children:[p(Ro,{defaultValue:"\u641C\u7D22\u5B57\u4F53",onChange:y=>d(y??"")}),p("div",{style:{paddingTop:5},children:p(Eo,{itemCount:m.length,itemSize:28,width:210,height:Math.min(400,28*m.length)+10,children:({index:y,style:c})=>{let s=m[y];return p("div",{style:{...c,display:"flex",alignItems:"center",justifyContent:"center"},children:p(zo,{fontFamily:s,modifiers:{active:o===s},handleClick:()=>n(s),store:t,isCustom:t.fonts.find(g=>g.fontFamily===s)||Bt.find(g=>g.fontFamily===s)},s)})}})})]}),trigger:"click",children:p(R,{type:"text",style:{marginRight:5,fontFamily:'"'+o+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:30,padding:"0 10px"},icon:p(xo,{size:16,style:{display:"flex"}}),iconPlacement:"end",children:l})})},st=["left","center","right","justify"],No=U(({elements:t,store:e})=>{let o=e.fonts.concat(Bt).map(d=>d.fontFamily),l=t[0].fontFamily;l.length>15&&(l=l.slice(0,15)+"...");let n=qt(e.objects),r=[...new Set(n.concat("_divider").concat(o))];return p(Ao,{fonts:r,activeFont:t[0].fontFamily,activeFontLabel:l,store:e,onFontSelect:d=>{e.editor?.objectsHandler.setTextStyle({fontFamily:d})}})}),Q=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",Vo=U(({elements:t,store:e})=>{let o=t[0],l=go(()=>{let{selectionStart:c,selectionEnd:s}=o;if(c!==s&&c!==void 0){let g=o.getSelectionStyles(c,c+1);if(g.length>0&&g[0].fill!==void 0)return g[0].fill}return o.fill},[o]),[n,r]=S(()=>z(l())),d=oe(!1),m=oe(Q(l()));tt(()=>{let c=e.editor?.customCanvas?.canvas;if(!c)return;let s=()=>{if(!d.current){let g=l();m.current=Q(g),r(z(g))}};return c.on("text:selection:changed",s),c.on("text:editing:entered",s),c.on("text:editing:exited",s),()=>{c.off("text:selection:changed",s),c.off("text:editing:entered",s),c.off("text:editing:exited",s)}},[e.editor?.customCanvas?.canvas,l]),tt(()=>{if(!d.current){let c=l(),s=Q(c);s!==m.current&&(m.current=s,r(z(c)))}},[o,l]);let y=uo(()=>n,[Q(n)]);return p(fo,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:c=>{if(d.current=c,!c){let s=l();m.current=Q(s)}},onChange:c=>{r(c)},onChangeComplete:c=>{let s=c.toCssString();if(s.includes("gradient")){let g=ho(s);e.editor?.objectsHandler.setTextStyle({fill:g})}else e.editor?.objectsHandler.setTextStyle({fill:s})}})}),Oo=U(({elements:t,store:e})=>{let[o,l]=S(t[0].fontSize);tt(()=>{l(t[0].fontSize)},[t[0]?.fontSize,e._updateFontSize]);let n=r=>{Number.isNaN(r)||(e.editor?.objectsHandler.setTextStyle({fontSize:Number(r)}),l(Number(r)))};return p(Et,{min:1,max:4*e.height,value:Math.round(o),onChange:n,style:{width:75},styles:{actions:{opacity:1,width:24}}})}),jo=U(({elements:t,store:e})=>{let o=t[0],[l,n]=S(o.textAlign),[r,d]=S(o.fontWeight),[m,y]=S(o.fontStyle),[c,s]=S(o.underline),[g,B]=S(o.linethrough),[H,I]=S(o.splitByGrapheme);return tt(()=>{n(o.textAlign),d(o.fontWeight),y(o.fontStyle),s(o.underline),B(o.linethrough),I(o.splitByGrapheme)},[o]),Z(bo.Compact,{children:[p(L,{placement:"bottom",title:i(`toolbar.text${l}`),children:p(R,{type:"text",icon:l==="left"?p(vo,{size:16,style:{display:"flex"}}):l==="center"?p(ko,{size:16,style:{display:"flex"}}):l==="right"?p(Co,{size:16,style:{display:"flex"}}):p(Fo,{size:16,style:{display:"flex"}}),onClick:()=>{let P=(st.indexOf(l)+1+st.length)%st.length,M=st[P];e.editor?.objectsHandler.setTextStyle({textAlign:M}),n(M)}})}),p(L,{placement:"bottom",title:i("toolbar.textBold"),children:p(R,{type:r==="bold"||r==="700"?"primary":"text",icon:p(So,{size:16,style:{display:"flex"}}),onClick:()=>{r==="bold"||r==="700"?(e.editor?.objectsHandler.setTextStyle({fontWeight:"normal"}),d("normal")):(e.editor?.objectsHandler.setTextStyle({fontWeight:"bold"}),d("bold"))}})}),p(L,{placement:"bottom",title:i("toolbar.textItalic"),children:p(R,{type:m==="italic"?"primary":"text",icon:p(wo,{size:16,style:{display:"flex"}}),onClick:()=>{m==="italic"?(e.editor?.objectsHandler.setTextStyle({fontStyle:"normal"}),y("normal")):(e.editor?.objectsHandler.setTextStyle({fontStyle:"italic"}),y("italic"))}})}),p(L,{placement:"bottom",title:i("toolbar.textUnderline"),children:p(R,{type:c?"primary":"text",icon:p(To,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({underline:!c}),s(!c)}})}),p(L,{placement:"bottom",title:i("toolbar.textStrikethrough"),children:p(R,{type:g?"primary":"text",icon:p(Bo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({linethrough:!g}),B(!g)}})}),p(L,{placement:"bottom",title:i("toolbar.splitByGrapheme"),children:p(R,{type:H?"primary":"text",icon:p(Po,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({splitByGrapheme:!H}),I(!H)}})})]})}),Mo=U(({elements:t,store:e})=>{let o=t[0],l={display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},n=typeof o.lineHeight=="number"?100*o.lineHeight:120,[r,d]=S(n),[m,y]=S(o.charSpacing),c=s=>{e.editor?.objectsHandler.setTextStyle(s)};return p(ne,{trigger:"click",content:Z("div",{style:{padding:"0 6px",width:"230px"},children:[Z("div",{style:l,children:[p("div",{children:i("toolbar.lineHeight")}),p("div",{children:p(Et,{min:50,max:250,value:Math.round(r),style:{width:80},onChange:s=>{c({lineHeight:s/100}),d(s)}})})]}),p(re,{value:Math.round(r),min:50,max:250,step:1,onChange:s=>{c({lineHeight:s/100}),d(s)}}),Z("div",{style:l,children:[p("div",{children:i("toolbar.letterSpacing")}),p("div",{children:p(Et,{min:-50,max:250,value:Math.round(m/10),style:{width:80},onChange:s=>{c({charSpacing:(s??0)*10}),y((s??0)*10)}})})]}),p(re,{value:Math.round(m/10),min:-50,max:250,step:1,onChange:s=>{c({charSpacing:(s??0)*10}),y((s??0)*10)}})]}),children:p(R,{type:"text",icon:p(Ho,{size:16,style:{display:"flex"}})})})}),Wo={TextFill:Vo,TextFontFamily:No,TextFontSize:Oo,TextFontVariant:jo,TextSpacing:Mo,TextFilters:D,TextAiWrite:ee},_o=U(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters","TextAiWrite"],components:e});return p(_,{items:n,itemRender:r=>{let d=e[r]||Wo[r];return d&&p(d,{elements:o,element:o[0],store:t},r)}})}),ie=_o;import{Tooltip as le,Button as ae}from"antd";import{Undo2 as Do,Redo2 as Lo}from"lucide-react";import{observer as Uo}from"mobx-react-lite";import{useEffect as Go,useState as Yo}from"react";import{jsx as G,jsxs as Xo}from"react/jsx-runtime";var se=Uo(({store:t})=>{let[e,o]=Yo({hasUndo:!1,hasRedo:!1});return Go(()=>{let l=t.editor,n=r=>{o(r)};return l&&l.on("history:changed",n),()=>{l&&l.off("history:changed",n)}},[t.editor]),Xo(It,{style:{float:"left",paddingRight:10},children:[G(le,{title:i("toolbar.undo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasUndo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.undo()},children:G(Do,{size:16})})}),G(le,{title:i("toolbar.redo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasRedo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.redo()},children:G(Lo,{size:16})})})]})});import{observer as wn}from"mobx-react-lite";import{Layers as Ko}from"lucide-react";import{Popover as Jo,Button as F,Divider as zt}from"antd";import{observer as qo}from"mobx-react-lite";import{ChevronUp as $o,ChevronsUp as Qo,ChevronDown as Zo,ChevronsDown as tr,AlignStartVertical as er,AlignCenterVertical as or,AlignEndVertical as rr,AlignStartHorizontal as nr,AlignCenterHorizontal as ir,AlignEndHorizontal as lr,AlignVerticalSpaceAround as ar,AlignHorizontalSpaceAround as sr}from"lucide-react";import{Fragment as ce,jsx as u,jsxs as T}from"react/jsx-runtime";var de=qo(({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElementsIds,l=t.selectedElements.every(r=>r?.locked),n=!l&&t.selectedElements.length>1;return u(Jo,{styles:{container:{padding:"10px 5px"}},content:T("div",{style:{width:280},children:[u(zt,{size:"small",children:i("toolbar.layering")}),T("div",{style:{display:"flex"},children:[T("div",{style:{width:"50%"},children:[u(F,{type:"text",block:!0,icon:u($o,{size:16}),disabled:!t.canMoveElementsUp(o),onClick:()=>{t.moveElementsUp(o)},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.up")})}),u(F,{type:"text",block:!0,icon:u(Qo,{size:16}),disabled:!t.canMoveElementsTop(o),onClick:()=>{t.moveElementsTop(o)},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toForward")})})]}),T("div",{style:{width:"50%"},children:[u(F,{type:"text",block:!0,icon:u(Zo,{size:16}),disabled:!t.canMoveElementsDown(o),onClick:()=>{t.moveElementsDown(o)},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.down")})}),u(F,{type:"text",block:!0,icon:u(tr,{size:16}),disabled:!t.canMoveElementsBottom(o),onClick:()=>{t.moveElementsBottom(o)},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toBottom")})})]})]}),!l&&T(ce,{children:[u(zt,{size:"small",children:i("toolbar.position")}),T("div",{style:{display:"flex"},children:[T("div",{style:{width:"50%"},children:[u(F,{type:"text",block:!0,icon:u(er,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignLeft()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignLeft")})}),u(F,{type:"text",block:!0,icon:u(or,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignCenter()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignCenter")})}),u(F,{type:"text",block:!0,icon:u(rr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignRight()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignRight")})})]}),T("div",{style:{width:"50%"},children:[u(F,{type:"text",block:!0,icon:u(nr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignTop()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignTop")})}),u(F,{type:"text",block:!0,icon:u(ir,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignMiddle()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignMiddle")})}),u(F,{type:"text",block:!0,icon:u(lr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignBottom()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignBottom")})})]})]})]}),n&&T(ce,{children:[u(zt,{size:"small",children:i("toolbar.spaceEvenly")}),T("div",{style:{display:"flex"},children:[u("div",{style:{width:"50%"},children:u(F,{type:"text",block:!0,icon:u(ar,{size:16}),onClick:()=>{t.editor?.alignmentHandler.yequation()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.verticalDistribution")})})}),u("div",{style:{width:"50%"},children:u(F,{type:"text",block:!0,icon:u(sr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.xequation()},children:u("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.horizontalDistribution")})})})]})]})]}),trigger:"click",placement:"bottom",children:T(F,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:[u(Ko,{size:16}),i("toolbar.position")]})})});import{Blend as cr}from"lucide-react";import{Popover as dr,Tooltip as pr,Button as mr,InputNumber as gr,Slider as ur}from"antd";import{observer as fr}from"mobx-react-lite";import{useState as yr,useEffect as br}from"react";import{jsx as V,jsxs as pe}from"react/jsx-runtime";var me=fr(({store:t})=>{let e=t.selectedShapes.length>0,o=t.selectedShapes[0],[l,n]=yr(()=>Math.round(100*(o?.opacity??1)));br(()=>{o&&n(Math.round(100*(o.opacity??1)))},[o,o?.opacity]);let r=d=>{let m=Math.max(0,Math.min(d,100));n(m),t.set({opacity:m/100})};return V(pr,{title:i("toolbar.transparency"),placement:"bottom",children:V(dr,{content:pe("div",{children:[V("div",{style:{textAlign:"center",marginBottom:10},children:i("toolbar.transparency")}),pe("div",{style:{display:"flex"},children:[V("div",{style:{width:170,paddingRight:20},children:V(ur,{min:0,max:100,onChange:r,value:l})}),V(gr,{min:0,max:100,value:l,onChange:r,size:"small",styles:{root:{width:65}}})]})]}),trigger:"click",children:V(mr,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:V(cr,{size:16})})})})});import{LockKeyholeOpen as hr,LockKeyhole as xr}from"lucide-react";import{Tooltip as vr,Button as kr}from"antd";import{useCallback as ge}from"react";var ue=({store:t})=>{let e=t.selectedShapes.length>0,l=t.selectedShapes[0]?.locked;return{disabled:!e,lock:ge(()=>{t.editor?.lockHandler.lock()},[l,t]),unlock:ge(()=>{t.editor?.lockHandler.unlock()},[l,t]),locked:l}};import{observer as Cr}from"mobx-react-lite";import{jsx as Rt}from"react/jsx-runtime";var fe=Cr(({store:t})=>{let{disabled:e,locked:o,lock:l,unlock:n}=ue({store:t}),r=o?xr:hr,d=i(o?"toolbar.lockedDescription":"toolbar.unlockedDescription");return Rt(vr,{title:d,placement:"bottom",children:Rt(kr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o?n():l()},children:Rt(r,{size:16})})})});import{Copy as Sr}from"lucide-react";import{Tooltip as wr,Button as Tr}from"antd";import{observer as Br}from"mobx-react-lite";import{useCallback as Fr}from"react";var ye=({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElements.every(r=>r?.locked===!0),l=!e||o,n=Fr(()=>{t.clone()},[t]);return{disabled:l,duplicate:n}};import{jsx as At}from"react/jsx-runtime";var be=Br(({store:t})=>{let{disabled:e,duplicate:o}=ye({store:t});return At(wr,{title:i("toolbar.duplicateElements"),placement:"bottom",children:At(Tr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:At(Sr,{size:16})})})});import{Trash2 as Pr}from"lucide-react";import{Tooltip as Er,Button as Ir}from"antd";import{useCallback as Hr}from"react";var he=({store:t})=>{let e=t.selectedElements.filter(l=>!l?.locked),o=Hr(()=>{t.deleteElements(e.map(l=>l.id))},[t,e]);return{disabled:!e.length,remove:o}};import{observer as zr}from"mobx-react-lite";import{jsx as Nt}from"react/jsx-runtime";var xe=zr(({store:t})=>{let{disabled:e,remove:o}=he({store:t});return Nt(Er,{title:i("toolbar.removeElements"),placement:"bottom",children:Nt(Ir,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:Nt(Pr,{size:16})})})});import{Button as ve}from"antd";import{observer as Rr}from"mobx-react-lite";import{Fragment as Ar,jsx as ke,jsxs as Nr}from"react/jsx-runtime";var Ce=Rr(({store:t})=>{let e=t.selectedElements.length>1,o=t.selectedElements.length===1&&t.selectedElements[0]?.type==="group";return Nr(Ar,{children:[e&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.group()},children:i("toolbar.groupElements")}),o&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.ungroup()},children:i("toolbar.ungroupElements")})]})});import{observer as pt}from"mobx-react-lite";import{Button as dt,Tooltip as rn,Popover as nn}from"antd";import{Crop as ln}from"lucide-react";import an from"styled-components";import{Popover as Vr,Button as Vt}from"antd";import{Rotate3d as Or,FlipHorizontal as jr,FlipVertical as Mr}from"lucide-react";import{useState as Wr,useEffect as _r,useCallback as Fe}from"react";import{observer as Dr}from"mobx-react-lite";import{jsx as j,jsxs as Lr}from"react/jsx-runtime";var Se=Dr(({element:t,store:e})=>{let[o,l]=Wr({flipX:!1,flipY:!1}),n=Fe(()=>{e.editor?.objectsHandler.update({flipX:!o.flipX}),l({...o,flipX:!o.flipX})},[e.editor,o]),r=Fe(()=>{e.editor?.objectsHandler.update({flipY:!o.flipY}),l({...o,flipY:!o.flipY})},[e.editor,o]);return _r(()=>{t&&l({flipX:t.flipX,flipY:t.flipY})},[t]),j(Vr,{trigger:"click",content:Lr("div",{style:{width:165},children:[j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(jr,{size:16,style:{display:"flex"}}),onClick:n,children:i("toolbar.flipHorizontally")}),j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(Mr,{size:16,style:{display:"flex"}}),onClick:r,children:i("toolbar.flipVertically")})]}),children:j(Vt,{type:"text",icon:j(Or,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.flip")})})});import{Button as Ur,Modal as Gr}from"antd";import{useState as we,useEffect as Yr}from"react";import{observer as Te}from"mobx-react-lite";import{Fragment as Kr,jsx as ct,jsxs as Jr}from"react/jsx-runtime";var Xr=Te(({isOpen:t,onClose:e,element:o})=>{let[l,n]=we(o.getSrc());return Yr(()=>{n(o.getSrc())},[o.id]),ct(Gr,{title:i("toolbar.removeBackgroundTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmRemoveBackground"),cancelText:i("toolbar.cancelRemoveBackground"),children:ct("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Be=Te(({element:t})=>{let[e,o]=we(!1);return Jr(Kr,{children:[ct(Ur,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.removeBackground")}),ct(Xr,{isOpen:e,onClose:()=>o(!1),element:t})]})});import{Button as qr,Modal as $r}from"antd";import{Eraser as Qr}from"lucide-react";import{useState as He,useEffect as Zr}from"react";import{observer as Pe}from"mobx-react-lite";import{Fragment as en,jsx as et,jsxs as on}from"react/jsx-runtime";var tn=Pe(({isOpen:t,onClose:e,element:o})=>{let[l,n]=He(o.getSrc());return Zr(()=>{n(o.getSrc())},[o.id]),et($r,{title:i("toolbar.eraserPenTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmEraserPen"),cancelText:i("toolbar.cancelEraserPen"),children:et("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Ee=Pe(({element:t})=>{let[e,o]=He(!1);return on(en,{children:[et(qr,{type:"text",icon:et(Qr,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.eraserPen")}),et(tn,{isOpen:e,onClose:()=>o(!1),element:t})]})});function Ie(t,e){let o=t.width/t.height,l=e.width/e.height,n,r;o>=l?(n=e.width,r=e.width/o):(n=e.height*o,r=e.height);let d=(e.width-n)/2,m=(e.height-r)/2;return{cropX:d,cropY:m,width:n,height:r}}function ze(t){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(t)))}import{jsx as v}from"react/jsx-runtime";var sn=Object.keys(Xt),cn=[{width:300,height:300,fill:"lightgray",stroke:"#0c0c0c",strokeWidth:0,url:""}],Re=[];sn.forEach(t=>{cn.forEach(e=>{Re.push(Object.assign({subType:t},e))})});Re.forEach(t=>{t.url=ze(Kt(t))});var dn=an.div`
   height: 220px;
-`,Ot={root:{padding:"0 7px"}},pn=pt(({element:t,store:e})=>{let o=e.editor;return v(dt,{type:"text",styles:Ot,onClick:async()=>{let l=e.width+2*e.bleed,n=e.height+2*e.bleed,r=t.getOriginalSize(),d={width:r.width,height:r.height},p=Ie({width:l,height:n},d);t.set({cropX:p.cropX,cropY:p.cropY,width:p.width,height:p.height,scaleX:l/p.width,scaleY:n/p.height,left:-e.bleed,top:-e.bleed}),t.setCoords(),o?.customCanvas?.canvas?.requestRenderAll(),o?.historyHandler.save("update")},children:i("toolbar.fitToBackground")})}),mn=pt(({element:t,store:e})=>v(rn,{title:i("toolbar.crop"),children:v(dt,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>{let o=e.editor?.layerHandler.getLayer();e.editor?.imageCropHandler.cropStart(t,o,t.getSrc())},children:v(ln,{size:16})})})),un=pt(({element:t,store:e})=>{let o=Jt.reduce((n,r)=>n.concat(r.children),[]),l=Math.ceil(o.length/4)||1;return t.clipPath?v(dt,{type:"text",styles:Ot,onClick:()=>{t.set({clipPath:null}),e.editor?.customCanvas?.canvas?.requestRenderAll(),e._triggerUpdate(),e.editor?.historyHandler.save("update")},children:i("toolbar.removeClip")}):v(nn,{styles:{container:{padding:"5px 10px"}},content:v("div",{style:{maxHeight:313,overflowY:"auto"},children:v(dn,{style:{height:80*l,width:300},children:v("div",{className:nt("shape-list","flex flex-wrap content-start mb-2"),children:o.map((n,r)=>v("div",{className:nt("shape-item","w-[25%] h-0 pb-[25%] relative cursor-pointer shrink-0 mb-[1.2%]"),onClick:()=>{e.editor?.objectsHandler.createMaskElement(t,n),e._triggerUpdate()},children:v("div",{className:nt("shape-content","absolute inset-0 flex justify-center items-center"),children:v("svg",{overflow:"visible",width:"50",height:"50",children:v("g",{transform:`scale(${50/n.viewBox[0]}, ${50/n.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`,children:v("path",{className:"shape-path",d:n.path,fill:"#ccc",strokeMiterlimit:8,strokeLinecap:"butt"})})})})},r))})})}),trigger:"click",children:v(dt,{type:"text",styles:Ot,children:i("toolbar.clip")})})}),gn={ImageFlip:Se,ImageFilters:D,ImageFitToBackground:pn,ImageCrop:mn,ImageClip:un,ImageRemoveBackground:Be,ImageEraserPen:Ee},Ae=pt(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop","ImageRemoveBackground","ImageEraserPen"],components:e});return v(_,{items:n,itemRender:r=>{let d=e[r]||gn[r];return d&&v(d,{elements:o,element:o[0],store:t},r)}})});import{jsx as fn}from"react/jsx-runtime";var Ne=()=>fn("div",{});import{cssGradient2FabricGradient as je}from"@ydesign/core";import{observer as ut}from"mobx-react-lite";import{useState as Me,useRef as mt,useMemo as We}from"react";import{ColorPicker as _e,Popover as yn,Button as Y,InputNumber as Ve,Slider as Oe}from"antd";import{Logs as bn,Ban as hn}from"lucide-react";import{Fragment as Fn,jsx as h,jsxs as ot}from"react/jsx-runtime";var O=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",xn=ut(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o.fill)),r=mt(!1),d=mt(O(o.fill)),p=O(o.fill);p!==d.current&&!r.current&&(d.current=p,n(z(o.fill)));let y=We(()=>l,[O(l)]);return h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{r.current=s,s||(d.current=O(o.fill))},onChange:s=>{n(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=je(c);t.editor?.objectsHandler.update({fill:u})}else t.editor?.objectsHandler.update({fill:c})}})}),vn=ut(({store:t,element:e})=>h(yn,{trigger:"click",content:ot("div",{style:{width:270},children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:15},children:[h(Y,{color:e?.strokeWidth===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeWidth:0}),t._triggerUpdate()},children:h(hn,{size:16})}),h(Y,{color:e?.strokeWidth&&e?.strokeDashArray?.length===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x2:24,y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===4?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[4,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===2?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[2,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===1?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[1,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:5},children:[h("div",{children:i("toolbar.strokeWidth")}),h("div",{children:h(Ve,{value:e?.strokeWidth,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.strokeWidth,onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)}),e?.type==="rect"&&ot(Fn,{children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:15,paddingBottom:5},children:[h("div",{children:i("toolbar.cornerRadius")}),h("div",{children:h(Ve,{value:e?.rx,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.rx,onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)})]})]}),children:h(Y,{type:"text",styles:{root:{padding:"0 7px"}},icon:h(bn,{size:16,style:{display:"flex"}}),children:i("toolbar.strokeSettings")})})),kn=ut(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o?.stroke)),r=mt(!1),d=mt(O(o?.stroke)),p=O(o?.stroke);p!==d.current&&!r.current&&(d.current=p,n(z(o?.stroke)));let y=We(()=>l,[O(l)]);return o?.strokeWidth?h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{r.current=s,s||(d.current=O(o.stroke))},onChange:s=>{n(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=je(c);t.editor?.objectsHandler.update({stroke:u})}else t.editor?.objectsHandler.update({stroke:c})}}):null}),Cn={FigureFill:xn,FigureStroke:kn,FigureSettings:vn,FigureFilters:D},X=ut(({store:t,components:e})=>{let o=t.selectedElements[0],n=W({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters"],components:e});return h(_,{items:n,itemRender:r=>{let d=e[r]||Cn[r];return d&&h(d,{elements:t.selectedElements,element:o,store:t},r)}})});import{Button as De,Divider as wn,Space as Bn,theme as Hn}from"antd";import{Check as Pn,X as En}from"lucide-react";import{Fragment as Nn,jsx as k,jsxs as K}from"react/jsx-runtime";var In=jt.div`
+`,Ot={root:{padding:"0 7px"}},pn=pt(({element:t,store:e})=>{let o=e.editor;return v(dt,{type:"text",styles:Ot,onClick:async()=>{let l=e.width+2*e.bleed,n=e.height+2*e.bleed,r=o?.workareaHandler?.getWorkarea(),d=r?.left||0,m=r?.top||0,y=t.getOriginalSize(),c={width:y.width,height:y.height},s=Ie({width:l,height:n},c);t.set({cropX:s.cropX,cropY:s.cropY,width:s.width,height:s.height,scaleX:l/s.width,scaleY:n/s.height,left:d-e.bleed,top:m-e.bleed}),t.setCoords(),o?.customCanvas?.canvas?.requestRenderAll(),o?.historyHandler.save("update")},children:i("toolbar.fitToBackground")})}),mn=pt(({element:t,store:e})=>v(rn,{title:i("toolbar.crop"),children:v(dt,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>{let o=e.editor?.layerHandler.getLayer();e.editor?.imageCropHandler.cropStart(t,o,t.getSrc())},children:v(ln,{size:16})})})),gn=pt(({element:t,store:e})=>{let o=Jt.reduce((n,r)=>n.concat(r.children),[]),l=Math.ceil(o.length/4)||1;return t.clipPath?v(dt,{type:"text",styles:Ot,onClick:()=>{t.set({clipPath:null}),e.editor?.customCanvas?.canvas?.requestRenderAll(),e._triggerUpdate(),e.editor?.historyHandler.save("update")},children:i("toolbar.removeClip")}):v(nn,{styles:{container:{padding:"5px 10px"}},content:v("div",{style:{maxHeight:313,overflowY:"auto"},children:v(dn,{style:{height:80*l,width:300},children:v("div",{className:nt("shape-list","flex flex-wrap content-start mb-2"),children:o.map((n,r)=>v("div",{className:nt("shape-item","w-[25%] h-0 pb-[25%] relative cursor-pointer shrink-0 mb-[1.2%]"),onClick:()=>{e.editor?.objectsHandler.createMaskElement(t,n),e._triggerUpdate()},children:v("div",{className:nt("shape-content","absolute inset-0 flex justify-center items-center"),children:v("svg",{overflow:"visible",width:"50",height:"50",children:v("g",{transform:`scale(${50/n.viewBox[0]}, ${50/n.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`,children:v("path",{className:"shape-path",d:n.path,fill:"#ccc",strokeMiterlimit:8,strokeLinecap:"butt"})})})})},r))})})}),trigger:"click",children:v(dt,{type:"text",styles:Ot,children:i("toolbar.clip")})})}),un={ImageFlip:Se,ImageFilters:D,ImageFitToBackground:pn,ImageCrop:mn,ImageClip:gn,ImageRemoveBackground:Be,ImageEraserPen:Ee},Ae=pt(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop","ImageRemoveBackground","ImageEraserPen"],components:e});return v(_,{items:n,itemRender:r=>{let d=e[r]||un[r];return d&&v(d,{elements:o,element:o[0],store:t},r)}})});import{jsx as fn}from"react/jsx-runtime";var Ne=()=>fn("div",{});import{cssGradient2FabricGradient as je}from"@ydesign/core";import{observer as gt}from"mobx-react-lite";import{useState as Me,useRef as mt,useMemo as We}from"react";import{ColorPicker as _e,Popover as yn,Button as Y,InputNumber as Ve,Slider as Oe}from"antd";import{Logs as bn,Ban as hn}from"lucide-react";import{Fragment as Fn,jsx as h,jsxs as ot}from"react/jsx-runtime";var O=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",xn=gt(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o.fill)),r=mt(!1),d=mt(O(o.fill)),m=O(o.fill);m!==d.current&&!r.current&&(d.current=m,n(z(o.fill)));let y=We(()=>l,[O(l)]);return h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:c=>{r.current=c,c||(d.current=O(o.fill))},onChange:c=>{n(c)},onChangeComplete:c=>{let s=c.toCssString();if(s.includes("gradient")){let g=je(s);t.editor?.objectsHandler.update({fill:g})}else t.editor?.objectsHandler.update({fill:s})}})}),vn=gt(({store:t,element:e})=>h(yn,{trigger:"click",content:ot("div",{style:{width:270},children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:15},children:[h(Y,{color:e?.strokeWidth===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeWidth:0}),t._triggerUpdate()},children:h(hn,{size:16})}),h(Y,{color:e?.strokeWidth&&e?.strokeDashArray?.length===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x2:24,y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===4?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[4,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===2?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[2,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===1?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[1,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:5},children:[h("div",{children:i("toolbar.strokeWidth")}),h("div",{children:h(Ve,{value:e?.strokeWidth,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.strokeWidth,onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)}),e?.type==="rect"&&ot(Fn,{children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:15,paddingBottom:5},children:[h("div",{children:i("toolbar.cornerRadius")}),h("div",{children:h(Ve,{value:e?.rx,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.rx,onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)})]})]}),children:h(Y,{type:"text",styles:{root:{padding:"0 7px"}},icon:h(bn,{size:16,style:{display:"flex"}}),children:i("toolbar.strokeSettings")})})),kn=gt(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o?.stroke)),r=mt(!1),d=mt(O(o?.stroke)),m=O(o?.stroke);m!==d.current&&!r.current&&(d.current=m,n(z(o?.stroke)));let y=We(()=>l,[O(l)]);return o?.strokeWidth?h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:c=>{r.current=c,c||(d.current=O(o.stroke))},onChange:c=>{n(c)},onChangeComplete:c=>{let s=c.toCssString();if(s.includes("gradient")){let g=je(s);t.editor?.objectsHandler.update({stroke:g})}else t.editor?.objectsHandler.update({stroke:s})}}):null}),Cn={FigureFill:xn,FigureStroke:kn,FigureSettings:vn,FigureFilters:D},X=gt(({store:t,components:e})=>{let o=t.selectedElements[0],n=W({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters"],components:e});return h(_,{items:n,itemRender:r=>{let d=e[r]||Cn[r];return d&&h(d,{elements:t.selectedElements,element:o,store:t},r)}})});import{Button as De,Divider as Tn,Space as Bn,theme as Hn}from"antd";import{Check as Pn,X as En}from"lucide-react";import{Fragment as Nn,jsx as k,jsxs as K}from"react/jsx-runtime";var In=jt.div`
   white-space: nowrap;
 
   height: 50px;
@@ -15,4 +15,4 @@ import{d as W,e as _,g as $t}from"../chunk-63A6RW6Y.js";import{a as z,c as qt}fr
   align-items: center;
   display: flex;
   height: 50px;
-`,Rn=({store:t})=>K(Bn,{style:{height:50},children:[K(De,{onClick:()=>{t.editor?.imageCropHandler.cropImg.onDeselectEvent()},children:[k(Pn,{size:16}),"\u5B8C\u6210"]}),K(De,{onClick:()=>{t.editor?.imageCropHandler.cropCancel()},children:[k(En,{size:16}),"\u53D6\u6D88"]})]}),gt={textbox:ie,image:Ae,path:X,rect:X,circle:X,ellipse:X,triangle:X,cropimage:Rn,many:Ne};function wa(t,e){gt[t]=e}var An=Tn(({store:t,downloadButtonEnabled:e,components:o={}})=>{let l=new Set(t.selectedElements.map(E=>E?.type)).size===1,n=t.selectedElements.length===1,r=t.selectedElements[0],d=t.selectedElements.length&&t.selectedElements.every(E=>E?.locked),p=n&&r?.isCropping,{token:y}=Hn.useToken(),s=n&&gt[r?.type];l?s=gt[r?.type]:t.selectedElements.length>1&&(s=gt.many);let c=Sn(o);(Object.keys(o).some(E=>o[E]!==c.current[E])||Object.keys(c.current).some(E=>!(E in o)))&&(c.current=Object.assign({},o));let u=c.current,B=u?.ActionControls||(e?Qt:null),H=u?.Position||de,I=u?.Opacity||me,P=u?.Lock||fe,M=u?.Duplicate||be,J=u?.Remove||xe,ft=u?.History||se,rt=u?.Group||Ce;return k(In,{className:"bp5-navbar design-toolbar",style:{backgroundColor:y.colorBgContainer,color:y.colorText},children:K(zn,{children:[!p&&k(ft,{store:t}),!r&&k($t,{store:t,components:u}),s&&!d&&k(s,{store:t,components:u}),!p&&K(It,{style:{float:"right"},children:[k(rt,{store:t}),k(H,{store:t}),!d&&k(I,{store:t}),k(P,{store:t}),k(M,{store:t}),k(J,{store:t}),B&&K(Nn,{children:[k(wn,{orientation:"vertical",style:{margin:"0 15px"}}),k(B,{store:t})]})]})]})})}),Ba=An;export{It as NavBarGroup,An as Toolbar,Ba as default,wa as registerToolbarComponent};
+`,Rn=({store:t})=>K(Bn,{style:{height:50},children:[K(De,{onClick:()=>{t.editor?.imageCropHandler.cropImg.onDeselectEvent()},children:[k(Pn,{size:16}),"\u5B8C\u6210"]}),K(De,{onClick:()=>{t.editor?.imageCropHandler.cropCancel()},children:[k(En,{size:16}),"\u53D6\u6D88"]})]}),ut={textbox:ie,image:Ae,path:X,rect:X,circle:X,ellipse:X,triangle:X,cropimage:Rn,many:Ne};function Ta(t,e){ut[t]=e}var An=wn(({store:t,downloadButtonEnabled:e,components:o={}})=>{let l=new Set(t.selectedElements.map(E=>E?.type)).size===1,n=t.selectedElements.length===1,r=t.selectedElements[0],d=t.selectedElements.length&&t.selectedElements.every(E=>E?.locked),m=n&&r?.isCropping,{token:y}=Hn.useToken(),c=n&&ut[r?.type];l?c=ut[r?.type]:t.selectedElements.length>1&&(c=ut.many);let s=Sn(o);(Object.keys(o).some(E=>o[E]!==s.current[E])||Object.keys(s.current).some(E=>!(E in o)))&&(s.current=Object.assign({},o));let g=s.current,B=g?.ActionControls||(e?Qt:null),H=g?.Position||de,I=g?.Opacity||me,P=g?.Lock||fe,M=g?.Duplicate||be,J=g?.Remove||xe,ft=g?.History||se,rt=g?.Group||Ce;return k(In,{className:"bp5-navbar design-toolbar",style:{backgroundColor:y.colorBgContainer,color:y.colorText},children:K(zn,{children:[!m&&k(ft,{store:t}),!r&&k($t,{store:t,components:g}),c&&!d&&k(c,{store:t,components:g}),!m&&K(It,{style:{float:"right"},children:[k(rt,{store:t}),k(H,{store:t}),!d&&k(I,{store:t}),k(P,{store:t}),k(M,{store:t}),k(J,{store:t}),B&&K(Nn,{children:[k(Tn,{orientation:"vertical",style:{margin:"0 15px"}}),k(B,{store:t})]})]})]})})}),Ba=An;export{It as NavBarGroup,An as Toolbar,Ba as default,Ta as registerToolbarComponent};

package/dist/toolbar/zoom-buttons.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as StoreType } from '../store-DfmY1m2j.js';
+import { S as StoreType } from '../store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';

package/dist/topbar/create-design.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as StoreType } from '../store-CgxwnT-h.js';
+import { ProjectType } from '../project.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
+import 'mobx-state-tree';
+import '@ydesign/core';
+import 'react';
+
+type Size = {
+    name: string;
+    desc: string;
+    width: number;
+    height: number;
+    unit: string;
+    bgColor?: string;
+};
+interface CreateDesignProps {
+    store: StoreType;
+    project: ProjectType;
+    visible: boolean;
+    onClose: () => void;
+    onConfirm: (size: Size) => void;
+    mode?: 'create' | 'open';
+}
+declare const CreateDesign: ({ project, visible, onClose, onConfirm }: CreateDesignProps) => react_jsx_runtime.JSX.Element;
+
+export { CreateDesign };

package/dist/topbar/create-design.js

@@ -0,0 +1 @@
+import{a}from"../chunk-3UOBPTKL.js";import"../chunk-OV7AL42Z.js";import"../chunk-C4XMVZO4.js";import"../chunk-YBC2DYJX.js";import"../chunk-EWOU5F3O.js";import"../chunk-5C2MNUBC.js";import"../chunk-3PMUQSBH.js";import"../chunk-O2XFH626.js";export{a as CreateDesign};

package/dist/topbar/topbar.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { S as StoreType } from '../store-DfmY1m2j.js';
+import { S as StoreType } from '../store-CgxwnT-h.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';