@ydesign/react-editor 0.0.9 → 0.1.1

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

@@ -1,12 +1,18 @@
-import { StoreType } from '../model/store.js';
-export { SectionTab } from './tab-button.js';
+import { S as StoreType } from '../store-DfmY1m2j.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-import '../utils/fonts.js';
-import 'mobx';
-import 'react/jsx-runtime';
+
+interface SectionTabProps$1 {
+    children: any;
+    name: string;
+    onClick: any;
+    active: boolean;
+    iconSize?: number;
+}
+declare const SectionTab: ({ children, name, iconSize, onClick, active }: SectionTabProps$1) => react_jsx_runtime.JSX.Element;
 
 interface SectionTabProps {
     onClick: any;
@@ -36,4 +42,4 @@ declare const SizeSection: Section;
 declare const DEFAULT_SECTIONS: Section[];
 declare const SidePanel: React.FC<SidePanelProps>;
 
-export { BackgroundSection, DEFAULT_SECTIONS, LayersSection, PhotosSection, type Section, ShapesSection, SidePanel, SizeSection, TemplatesSection, TextSection, UploadSection, SidePanel as default };
+export { BackgroundSection, DEFAULT_SECTIONS, LayersSection, PhotosSection, type Section, SectionTab, ShapesSection, SidePanel, SizeSection, TemplatesSection, TextSection, UploadSection, SidePanel as default };

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

@@ -1 +1 @@
-import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k,k as l}from"../chunk-JUVJJS4T.js";import"../chunk-DGCF2GDA.js";import"../chunk-QWM7VMLQ.js";import"../chunk-5C2MNUBC.js";import{a}from"../chunk-4HH3B3W3.js";import"../chunk-HHYPIHAP.js";import"../chunk-IV52R7D7.js";import"../chunk-JPIYZYMQ.js";import"../chunk-MXZ6RXT3.js";import"../chunk-PSO4W6J7.js";import"../chunk-O56ZNYGR.js";import"../chunk-RVXI723F.js";import"../chunk-YRJUN267.js";import"../chunk-OQ6HU62L.js";import"../chunk-5X6VER6G.js";import"../chunk-4LUZF4CB.js";import"../chunk-TS5CKDHH.js";import"../chunk-POCSL7OS.js";import"../chunk-WCHGSVUC.js";import"../chunk-TZ6B7XDS.js";import"../chunk-7NNOHYKX.js";import"../chunk-TTHQXTIX.js";import"../chunk-YCFED7XQ.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-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};

package/dist/store-DfmY1m2j.d.ts

@@ -0,0 +1,379 @@
+import * as fabric from 'fabric';
+import * as mobx_state_tree_dist_internal from 'mobx-state-tree/dist/internal';
+import * as mobx_state_tree from 'mobx-state-tree';
+import { Instance } from 'mobx-state-tree';
+import { Editor, FabricObject } from '@ydesign/core';
+
+type FONT = {
+    fontFamily: string;
+    url?: string;
+    img?: string;
+    name?: string;
+    styles?: Array<{
+        src: string;
+        fontStyle?: string;
+        fontWeight?: string;
+    }>;
+};
+
+interface ExportOptions {
+    multiplier: number;
+    format?: 'jpeg' | 'png' | 'webp';
+    quality?: number;
+    enableRetinaScaling?: boolean;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    filter?: (object: any) => boolean;
+}
+declare const forEveryChild: (node: any, cb: any) => void;
+declare const Font: mobx_state_tree.IModelType<{
+    fontFamily: mobx_state_tree.ISimpleType<string>;
+    name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+    url: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+    img: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+    styles: mobx_state_tree.IType<any, any, any>;
+}, {}, mobx_state_tree.ModelCreationType<{
+    fontFamily: string;
+    name: string | undefined;
+    url: string | undefined;
+    img: string | undefined;
+    styles: any;
+}>, mobx_state_tree._NotCustomized>;
+/**
+ * 三个对象要搞清楚关系
+ *  1. selectedElementsIds: 选中的元素id数组
+ *  2. selectedElements: 会根据ids返回元素实例
+ *  3. selectElements: 设置 ids 的
+ *  4. selectedShapes:
+ */
+declare const Store: mobx_state_tree.IModelType<{
+    name: mobx_state_tree.IType<string | undefined, string, string>;
+    token: mobx_state_tree.IType<string | undefined, string, string>;
+    workspaceId: mobx_state_tree.IType<string | undefined, string, string>;
+    width: mobx_state_tree.IType<number | undefined, number, number>;
+    height: mobx_state_tree.IType<number | undefined, number, number>;
+    scale: mobx_state_tree.IType<number | undefined, number, number>;
+    scaleToFit: mobx_state_tree.IType<number | undefined, number, number>;
+    unit: mobx_state_tree.IType<string | undefined, string, string>;
+    dpi: mobx_state_tree.IType<number | undefined, number, number>;
+    bleed: mobx_state_tree.IType<number | undefined, number, number>;
+    bleedVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
+    selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
+    fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
+        fontFamily: mobx_state_tree.ISimpleType<string>;
+        name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        url: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        img: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        styles: mobx_state_tree.IType<any, any, any>;
+    }, {}, mobx_state_tree.ModelCreationType<{
+        fontFamily: string;
+        name: string | undefined;
+        url: string | undefined;
+        img: string | undefined;
+        styles: any;
+    }>, mobx_state_tree._NotCustomized>>;
+    editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
+    custom: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IArrayType<mobx_state_tree.IType<any, any, any>>;
+    _key: mobx_state_tree.IType<string | undefined, string, string>;
+    _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
+    _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
+}, {
+    readonly selectedElements: FabricObject[];
+} & {
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(id: string): any;
+} & {
+    _setEditor(editor: Editor): void;
+    _triggerUpdate(): void;
+    _fontSizeUpdate(): void;
+    _syncBackgroundColor(color: any): void;
+} & {
+    setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
+    set(options: any, element?: FabricObject): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi?: any;
+    }): void;
+    setObjects(objects: any): void;
+    selectElements(ids: string[]): void;
+    openSidePanel(t: string): void;
+    deleteElements(ids: string[]): void;
+    setScale(scale: number): void;
+    clone(): void;
+    /**
+     * 添加jsons元素
+     * @param options 元素json数据
+     * @param isHistory 是否记录历史
+     * @returns
+     */
+    addElement(options: any, isHistory?: boolean): Promise<void> | undefined;
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
+    setupEditorListeners(): void;
+} & {
+    _forEachElementUp(ids: Array<string>, callback: Function): void;
+    _forEachElementDown(ids: Array<string>, callback: Function): false | undefined;
+} & {
+    canMoveElementsUp(ids: Array<string>): false;
+    moveElementsUp(ids: Array<string>): void;
+    canMoveElementsTop(ids: Array<string>): false;
+    moveElementsTop(ids: Array<string>): void;
+    canMoveElementsDown(ids: Array<string>): false;
+    moveElementsDown(ids: Array<string>): void;
+    canMoveElementsBottom(ids: Array<string>): false;
+    moveElementsBottom(ids: Array<string>): void;
+    setElementZIndex(): void;
+} & {
+    toDataURL(options?: ExportOptions): Promise<string | null | undefined>;
+    toBlob(options?: ExportOptions): Promise<Blob | null | undefined>;
+    saveAsImage(options?: ExportOptions & {
+        fileName?: string;
+    }): Promise<void>;
+    toJSON(): any;
+    toObject(): any;
+    loadJSON: (data: any) => Promise<void>;
+    clear(): void;
+} & {
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
+    /**
+     * 加载字体（注入 CSS 并等待字体可用）
+     * @param fontFamily - 字体名称
+     */
+    loadFont(fontFamily: string): Promise<void[]>;
+} & {
+    on(eventName: any, callback: any): mobx_state_tree.IDisposer | undefined;
+}, mobx_state_tree._NotCustomized, mobx_state_tree._NotCustomized>;
+type StoreType = Instance<typeof Store>;
+interface StoreProps {
+    key: string;
+    token?: string;
+    workspaceId?: string;
+}
+declare const getToken: () => {
+    token: string;
+    workspaceId: string;
+};
+declare function createStore({ key, token, workspaceId }: StoreProps): mobx_state_tree.ModelInstanceTypeProps<{
+    name: mobx_state_tree.IType<string | undefined, string, string>;
+    token: mobx_state_tree.IType<string | undefined, string, string>;
+    workspaceId: mobx_state_tree.IType<string | undefined, string, string>;
+    width: mobx_state_tree.IType<number | undefined, number, number>;
+    height: mobx_state_tree.IType<number | undefined, number, number>;
+    scale: mobx_state_tree.IType<number | undefined, number, number>;
+    scaleToFit: mobx_state_tree.IType<number | undefined, number, number>;
+    unit: mobx_state_tree.IType<string | undefined, string, string>;
+    dpi: mobx_state_tree.IType<number | undefined, number, number>;
+    bleed: mobx_state_tree.IType<number | undefined, number, number>;
+    bleedVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
+    selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
+    fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
+        fontFamily: mobx_state_tree.ISimpleType<string>;
+        name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        url: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        img: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        styles: mobx_state_tree.IType<any, any, any>;
+    }, {}, mobx_state_tree.ModelCreationType<{
+        fontFamily: string;
+        name: string | undefined;
+        url: string | undefined;
+        img: string | undefined;
+        styles: any;
+    }>, mobx_state_tree._NotCustomized>>;
+    editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
+    custom: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IArrayType<mobx_state_tree.IType<any, any, any>>;
+    _key: mobx_state_tree.IType<string | undefined, string, string>;
+    _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
+    _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
+}> & {
+    readonly selectedElements: FabricObject[];
+} & {
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(id: string): any;
+} & {
+    _setEditor(editor: Editor): void;
+    _triggerUpdate(): void;
+    _fontSizeUpdate(): void;
+    _syncBackgroundColor(color: any): void;
+} & {
+    setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
+    set(options: any, element?: FabricObject): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi?: any;
+    }): void;
+    setObjects(objects: any): void;
+    selectElements(ids: string[]): void;
+    openSidePanel(t: string): void;
+    deleteElements(ids: string[]): void;
+    setScale(scale: number): void;
+    clone(): void;
+    /**
+     * 添加jsons元素
+     * @param options 元素json数据
+     * @param isHistory 是否记录历史
+     * @returns
+     */
+    addElement(options: any, isHistory?: boolean): Promise<void> | undefined;
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
+    setupEditorListeners(): void;
+} & {
+    _forEachElementUp(ids: Array<string>, callback: Function): void;
+    _forEachElementDown(ids: Array<string>, callback: Function): false | undefined;
+} & {
+    canMoveElementsUp(ids: Array<string>): false;
+    moveElementsUp(ids: Array<string>): void;
+    canMoveElementsTop(ids: Array<string>): false;
+    moveElementsTop(ids: Array<string>): void;
+    canMoveElementsDown(ids: Array<string>): false;
+    moveElementsDown(ids: Array<string>): void;
+    canMoveElementsBottom(ids: Array<string>): false;
+    moveElementsBottom(ids: Array<string>): void;
+    setElementZIndex(): void;
+} & {
+    toDataURL(options?: ExportOptions): Promise<string | null | undefined>;
+    toBlob(options?: ExportOptions): Promise<Blob | null | undefined>;
+    saveAsImage(options?: ExportOptions & {
+        fileName?: string;
+    }): Promise<void>;
+    toJSON(): any;
+    toObject(): any;
+    loadJSON: (data: any) => Promise<void>;
+    clear(): void;
+} & {
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
+    /**
+     * 加载字体（注入 CSS 并等待字体可用）
+     * @param fontFamily - 字体名称
+     */
+    loadFont(fontFamily: string): Promise<void[]>;
+} & {
+    on(eventName: any, callback: any): mobx_state_tree.IDisposer | undefined;
+} & mobx_state_tree.IStateTreeNode<mobx_state_tree.IModelType<{
+    name: mobx_state_tree.IType<string | undefined, string, string>;
+    token: mobx_state_tree.IType<string | undefined, string, string>;
+    workspaceId: mobx_state_tree.IType<string | undefined, string, string>;
+    width: mobx_state_tree.IType<number | undefined, number, number>;
+    height: mobx_state_tree.IType<number | undefined, number, number>;
+    scale: mobx_state_tree.IType<number | undefined, number, number>;
+    scaleToFit: mobx_state_tree.IType<number | undefined, number, number>;
+    unit: mobx_state_tree.IType<string | undefined, string, string>;
+    dpi: mobx_state_tree.IType<number | undefined, number, number>;
+    bleed: mobx_state_tree.IType<number | undefined, number, number>;
+    bleedVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
+    openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
+    selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
+    fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
+        fontFamily: mobx_state_tree.ISimpleType<string>;
+        name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        url: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        img: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
+        styles: mobx_state_tree.IType<any, any, any>;
+    }, {}, mobx_state_tree.ModelCreationType<{
+        fontFamily: string;
+        name: string | undefined;
+        url: string | undefined;
+        img: string | undefined;
+        styles: any;
+    }>, mobx_state_tree._NotCustomized>>;
+    editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
+    custom: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IArrayType<mobx_state_tree.IType<any, any, any>>;
+    _key: mobx_state_tree.IType<string | undefined, string, string>;
+    _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
+    _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
+}, {
+    readonly selectedElements: FabricObject[];
+} & {
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(id: string): any;
+} & {
+    _setEditor(editor: Editor): void;
+    _triggerUpdate(): void;
+    _fontSizeUpdate(): void;
+    _syncBackgroundColor(color: any): void;
+} & {
+    setBackgroundColor(color: string | Record<string, any>, isHistory?: boolean): void;
+    set(options: any, element?: FabricObject): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi?: any;
+    }): void;
+    setObjects(objects: any): void;
+    selectElements(ids: string[]): void;
+    openSidePanel(t: string): void;
+    deleteElements(ids: string[]): void;
+    setScale(scale: number): void;
+    clone(): void;
+    /**
+     * 添加jsons元素
+     * @param options 元素json数据
+     * @param isHistory 是否记录历史
+     * @returns
+     */
+    addElement(options: any, isHistory?: boolean): Promise<void> | undefined;
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
+    setupEditorListeners(): void;
+} & {
+    _forEachElementUp(ids: Array<string>, callback: Function): void;
+    _forEachElementDown(ids: Array<string>, callback: Function): false | undefined;
+} & {
+    canMoveElementsUp(ids: Array<string>): false;
+    moveElementsUp(ids: Array<string>): void;
+    canMoveElementsTop(ids: Array<string>): false;
+    moveElementsTop(ids: Array<string>): void;
+    canMoveElementsDown(ids: Array<string>): false;
+    moveElementsDown(ids: Array<string>): void;
+    canMoveElementsBottom(ids: Array<string>): false;
+    moveElementsBottom(ids: Array<string>): void;
+    setElementZIndex(): void;
+} & {
+    toDataURL(options?: ExportOptions): Promise<string | null | undefined>;
+    toBlob(options?: ExportOptions): Promise<Blob | null | undefined>;
+    saveAsImage(options?: ExportOptions & {
+        fileName?: string;
+    }): Promise<void>;
+    toJSON(): any;
+    toObject(): any;
+    loadJSON: (data: any) => Promise<void>;
+    clear(): void;
+} & {
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
+    /**
+     * 加载字体（注入 CSS 并等待字体可用）
+     * @param fontFamily - 字体名称
+     */
+    loadFont(fontFamily: string): Promise<void[]>;
+} & {
+    on(eventName: any, callback: any): mobx_state_tree.IDisposer | undefined;
+}, mobx_state_tree._NotCustomized, mobx_state_tree._NotCustomized>>;
+
+export { type ExportOptions as E, type FONT as F, type StoreType as S, Font as a, Store as b, createStore as c, type StoreProps as d, forEveryChild as f, getToken as g };

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

@@ -1,11 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StoreType } from '../model/store.js';
+import { S as StoreType } from '../store-DfmY1m2j.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-import '../utils/fonts.js';
-import 'mobx';
 
 declare const DownloadButton: (({ store }: {
     store: StoreType;

package/dist/toolbar/download-button.js

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

package/dist/toolbar/toolbar.d.ts

@@ -2,13 +2,11 @@ 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 { StoreType } from '../model/store.js';
+import { S as StoreType } from '../store-DfmY1m2j.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-import '../utils/fonts.js';
-import 'mobx';
 
 declare const NavBarGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare function registerToolbarComponent(type: string, reactComponent: any): void;

package/dist/toolbar/toolbar.js

@@ -1 +1,18 @@
-import{a,b,c,d}from"../chunk-KKA7WASQ.js";import"../chunk-KVT25LDU.js";import"../chunk-2T3O5ZZ2.js";import"../chunk-NDZKXZQ2.js";import"../chunk-CB23VFSC.js";import"../chunk-3TO57JPN.js";import"../chunk-O73AAP2K.js";import"../chunk-AC6CCGZH.js";import"../chunk-RSKWMPST.js";import"../chunk-XRRO2RT7.js";import"../chunk-YCJBBRRT.js";import"../chunk-5OA2JYPB.js";import"../chunk-2A3HHQ7X.js";import"../chunk-7YLSIB43.js";import"../chunk-J6PYM4EV.js";import"../chunk-62YF5KTO.js";import"../chunk-YVBVDUVA.js";import"../chunk-TTK5Z2Z6.js";import"../chunk-T3TEB73P.js";import"../chunk-IUFYYEGO.js";import"../chunk-MXZ6RXT3.js";import"../chunk-O56ZNYGR.js";import"../chunk-RVXI723F.js";import"../chunk-YRJUN267.js";import"../chunk-OQ6HU62L.js";import"../chunk-WCHGSVUC.js";import"../chunk-TZ6B7XDS.js";import"../chunk-7NNOHYKX.js";import"../chunk-TTHQXTIX.js";import"../chunk-YCFED7XQ.js";import"../chunk-WJT6VPDR.js";import"../chunk-JMIN2XMC.js";import"../chunk-75WC3GVB.js";import"../chunk-O2XFH626.js";export{a as NavBarGroup,c as Toolbar,d as default,b as registerToolbarComponent};
+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`
+  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`
+  white-space: nowrap;
+
+  height: 50px;
+  padding: 0 15px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+`,zn=jt.div`
+  width: 100%;
+  height: 100%;
+`,It=jt.div`
+  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};

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

@@ -1,11 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StoreType } from '../model/store.js';
+import { S as StoreType } from '../store-DfmY1m2j.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-import '../utils/fonts.js';
-import 'mobx';
 
 declare const ZoomGroup: (({ store }: {
     store: StoreType;

package/dist/topbar/topbar.d.ts

@@ -1,16 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StoreType } from '../model/store.js';
+import { ReactNode } from 'react';
+import { S as StoreType } from '../store-DfmY1m2j.js';
 import 'fabric';
 import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
-import '../utils/fonts.js';
-import 'mobx';
 
-declare const Topbar: (({ store }: {
+interface TopbarProps {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element) & {
+    /**
+     * 自定义 Logo 配置
+     * - 传入 string（URL 或 base64）时，自动渲染为 <img>
+     * - 传入 ReactNode 时，直接渲染（如 SVG 组件、自定义 JSX 等）
+     * - 不传时使用内置默认 Logo
+     */
+    logo?: ReactNode | string;
+    /**
+     * Logo 点击跳转地址
+     * - 传入 URL 字符串时，点击 logo 会在新标签页打开该地址
+     * - 不传时点击 logo 默认回退上一页（history.back()）
+     */
+    logoUrl?: string;
+}
+declare const Topbar: (({ store, logo, logoUrl }: TopbarProps) => react_jsx_runtime.JSX.Element) & {
     displayName: string;
 };
 
-export { Topbar };
+export { Topbar, type TopbarProps };