@univerjs-pro/shape-editor-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/types/components/fill-style-tabs-editor/FillStyleTabsEditor.d.ts

@@ -31,6 +31,8 @@ export interface IFillStyleTabsEditorProps<T extends ItemValue = FillStyleType>
     noFillEditor?: ReactNode;
     pictureFillEditor?: ReactNode;
     renderColorIcon?: (color: string) => ReactNode;
+    /** Keep host text editing active while interacting with the nested color-picker portal. */
+    editorInteractionBoundary?: boolean;
     keepColorPickerOpenOnChange?: boolean;
     onChange?: (value: T) => void;
     onColorChange?: (color: string) => void;

package/lib/types/config/config.d.ts

@@ -1,31 +1,9 @@
 import type { IHostExternalReference } from '@univerjs-pro/engine-formula';
-import type { IBaseSnapshot, IWorkbookData, UniverInstanceType } from '@univerjs/core';
 export declare const SHAPE_EDITOR_UI_PLUGIN_CONFIG_KEY = "shape-editor-ui.config";
 export declare const configSymbol: unique symbol;
-export type FormulaBindingUnitType = UniverInstanceType.UNIVER_SHEET | UniverInstanceType.UNIVER_BASE;
-interface IFormulaBindingUnitResourceBase {
-    unitId: string;
-    name: string;
-}
-export type IFormulaBindingUnitResource = IFormulaBindingUnitResourceBase & ({
-    type: UniverInstanceType.UNIVER_SHEET;
-    loadSnapshot: () => Promise<IWorkbookData>;
-} | {
-    type: UniverInstanceType.UNIVER_BASE;
-    loadSnapshot: () => Promise<IBaseSnapshot>;
-});
-/**
- * Supplies remote source units visible to the current user.
- *
- * Loaded Sheet and Base units are included automatically. A provider only needs to return
- * additional units whose snapshots can be loaded into the read-only reference picker.
- */
-export interface IFormulaBindingUnitProvider {
-    listUnits: () => Promise<IFormulaBindingUnitResource[]>;
-}
 export interface IUniverShapeEditorUIConfig {
-    formulaUnitProvider?: IFormulaBindingUnitProvider;
-    formulaViewerWorkerURL?: string | Worker;
+    /** Sets the initial visibility of Shape floating toolbars in supporting editors. */
+    floatingToolbar?: boolean;
 }
 export interface IFormulaBindingHost {
     unitId: string;
@@ -41,4 +19,3 @@ export interface IFormulaBindingEditorResult extends IFormulaBindingEditorValue
     externalReferences: readonly IHostExternalReference[];
 }
 export declare const defaultPluginConfig: IUniverShapeEditorUIConfig;
-export {};

package/lib/types/controllers/components.controller.d.ts

@@ -1,7 +1,8 @@
 import { Disposable } from '@univerjs/core';
-import { IconManager } from '@univerjs/ui';
+import { ComponentManager, IconManager } from '@univerjs/ui';
 export declare class ComponentsController extends Disposable {
     private readonly _iconManager;
-    constructor(_iconManager: IconManager);
+    private readonly _componentManager;
+    constructor(_iconManager: IconManager, _componentManager: ComponentManager);
     private _registerIcons;
 }

package/lib/types/index.d.ts

@@ -1,13 +1,19 @@
 import './global.css';
+export { ToggleShapeFloatingToolbarOperation } from './commands/operations/toggle-shape-floating-toolbar.operation';
 export { FillStyleTabsEditor } from './components/fill-style-tabs-editor/FillStyleTabsEditor';
 export { SHAPE_EDITOR_UI_PLUGIN_CONFIG_KEY } from './config/config';
-export type { FormulaBindingUnitType, IFormulaBindingEditorResult, IFormulaBindingEditorValue, IFormulaBindingHost, IFormulaBindingUnitProvider, IFormulaBindingUnitResource, IUniverShapeEditorUIConfig, } from './config/config';
+export type { IFormulaBindingEditorResult, IFormulaBindingEditorValue, IFormulaBindingHost, IUniverShapeEditorUIConfig, } from './config/config';
+export { ShapeFloatingToolbarToggleFactory } from './menu/shape-floating-toolbar.menu';
 export { UniverShapeEditorUIPlugin } from './plugin';
 export { applyFormulaBindingReferenceSelection, normalizeFormulaBindingFormula, } from './services/formula-binding-editor';
 export type { IFormulaBindingReferenceEditResult, IFormulaBindingReferenceSelectionChange, } from './services/formula-binding-editor';
-export { FormulaBindingUnitViewerService } from './services/formula-binding-unit-viewer.service';
-export type { FormulaBindingViewerUnit, IFormulaBindingViewerFormulaContext, } from './services/formula-binding-unit-viewer.service';
+export { FormulaBindingService } from './services/formula-binding.service';
+export type { IFormulaBinding, IFormulaBindingContext, IFormulaBindingOptions, } from './services/formula-binding.service';
+export { ShapeFloatingToolbarService } from './services/shape-floating-toolbar.service';
 export { activateDrawingObject, clearActiveDrawingObjects } from './utils/activate-drawing-object';
+export { getDrawingTypeNameKey } from './utils/drawing-type-name';
+export type { DrawingTypeNameKey } from './utils/drawing-type-name';
+export { resolveShapeContextualRibbonHostMode } from './utils/shape-contextual-ribbon-host';
 export { SHAPE_FLOATING_TOOLBAR_TOP_OFFSET, SHEET_DOC_SHAPE_FLOATING_TOOLBAR_TOP_OFFSET } from './utils/shape-floating-toolbar-config';
 export { SHAPE_EDITOR_TRANSFORMER_CONFIG } from './utils/shape-transformer-config';
 export { getTextModel, getTextStyle, normalizeShapeTextModel } from './utils/util';
@@ -25,28 +31,48 @@ export { getInitialShapeFillType, ShapeFillEditor, } from './views/shape-editor-
 export { ShapeImageFillEditor } from './views/shape-editor-panel/ShapeImageFillEditor';
 export { ShapeLineEditor } from './views/shape-editor-panel/ShapeLineEditor';
 export { ShapeTextBoxEditor } from './views/shape-editor-panel/ShapeTextBoxEditor';
+export { keepFloatingToolbarPanelInteraction } from './views/shape-floating-toolbar/floating-toolbar-interaction';
+export { SHAPE_FLOATING_TOOLBAR_DEFAULT_FILL_COLOR, SHAPE_FLOATING_TOOLBAR_DEFAULT_STROKE_COLOR, SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_BACKGROUND_COLOR, SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_COLOR, } from './views/shape-floating-toolbar/shape-floating-toolbar-constants';
 export { buildShapeTextDataUpdate } from './views/shape-floating-toolbar/shape-floating-toolbar-utils';
 export type { IShapeTextUpdateOptions } from './views/shape-floating-toolbar/shape-floating-toolbar-utils';
-export { SHAPE_FLOATING_TOOLBAR_DEFAULT_STROKE_COLOR, SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_BACKGROUND_COLOR, SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_COLOR, ShapeFillButton, ShapeFloatingToolbar, ShapeFloatingToolbarContent, ShapeFloatingToolbarDropdownTrigger, ShapeFloatingToolbarFontSizeSelect, ShapeFloatingToolbarIcon, ShapeFloatingToolbarMenuItem, ShapeFloatingToolbarMenuPanel, ShapeStrokePanelButton, ShapeStrokePanelContent, TextFillButton, TypographyPanelButton, } from './views/shape-floating-toolbar/ShapeFloatingToolbar';
+export { ShapeFillButton } from './views/shape-floating-toolbar/ShapeFillControls';
+export { ShapeFloatingToolbar, ShapeFloatingToolbarMenuItem, ShapeFloatingToolbarMenuPanel, } from './views/shape-floating-toolbar/ShapeFloatingToolbar';
 export type { IShapeFloatingToolbarExtensionGroup, IShapeFloatingToolbarLayerActions, } from './views/shape-floating-toolbar/ShapeFloatingToolbar';
+export { ShapeFloatingToolbarContent, ShapeFloatingToolbarDropdown, ShapeFloatingToolbarDropdownTrigger, ShapeFloatingToolbarFontSizeSelect, ShapeFloatingToolbarIcon, } from './views/shape-floating-toolbar/ShapeFloatingToolbarPrimitives';
+export { buildShapeStrokeDataUpdate, ShapeStrokePanelButton, ShapeStrokePanelContent, } from './views/shape-floating-toolbar/ShapeStrokeControls';
+export type { IShapeStrokePanelContentProps, ShapeStrokePanelMode, } from './views/shape-floating-toolbar/ShapeStrokeControls';
+export { TextBackgroundColorButton, TextFillButton, TypographyPanelButton, } from './views/shape-floating-toolbar/ShapeTextControls';
+export { ShapeEffectsRibbonControl, ShapeFormulaRibbonControl, ShapeStyleRibbonControl, ShapeTextEffectsRibbonControl, ShapeTextRibbonControl, } from './views/shape-format-ribbon/ShapeFormatRibbonControls';
+export { SHAPE_CHANGE_PICKER_COMPONENT } from './views/shape-picker/ShapeChangePicker';
 export { ShapePickerDropdown, ShapePickerPanel } from './views/shape-picker/ShapePickerGrid';
 export { ShapeGroupEnum, shapeTypeOptions } from './views/shape-picker/shapes';
 export type { ShapeTypeOption } from './views/shape-picker/shapes';
+export { ShapeQuickStyleGallery } from './views/shape-quick-style/ShapeQuickStyleGallery';
 export { DocParagraphTypeDropdown } from './views/shape-text-editor/DocParagraphTypeDropdown';
 export { resolveShapeTextEditorBehaviorShapeData, resolveShapeTextEditorFlowAxis, resolveShapeTextEditorWrapStrategy, shouldAllowShapeTextEditorHostSizeShrink, shouldAutoFitShapeTextEditorNoWrap, shouldClipShapeTextDocument, } from './views/shape-text-editor/shape-text-behavior';
 export type { ShapeTextFlowAxis } from './views/shape-text-editor/shape-text-behavior';
 export { plainShapeTextToDocumentData, prepareShapeTextDocumentData, resolveShapeTextDocumentAlignment, resolveShapeTextDocumentPageHeight, stripShapeTextDocumentLayout, } from './views/shape-text-editor/shape-text-document';
 export { SHAPE_TEXT_EDITOR_QUOTE_COMMAND_ID } from './views/shape-text-editor/shape-text-editor-commands';
 export { ShapeTextFloatMenuRenderControllerBase, } from './views/shape-text-editor/shape-text-float-menu-render-controller-base';
-export { getShapeTextOpticalVerticalOffset, isShapeTextOpticalVerticalAlignEnabled, resolveShapeTextDocumentRenderLayout, resolveShapeTextVerticalOffset, } from './views/shape-text-editor/shape-text-layout';
+export { getShapeTextOpticalVerticalOffset, getShapeTextVisibleInkHeight, isShapeTextOpticalVerticalAlignEnabled, normalizeShapeTextRect, resolveShapeTextDocumentRenderLayout, resolveShapeTextVerticalOffset, } from './views/shape-text-editor/shape-text-layout';
 export type { IShapeTextDocumentRenderLayout } from './views/shape-text-editor/shape-text-layout';
+export { resolveShapeTextEditorTextRect } from './views/shape-text-editor/shape-text-layout';
 export { resolveShapeTextNoWrapLayout } from './views/shape-text-editor/shape-text-no-wrap-layout';
 export type { IResolveShapeTextNoWrapLayoutOptions, IShapeTextNoWrapLayout, IShapeTextNoWrapRect, } from './views/shape-text-editor/shape-text-no-wrap-layout';
 export { createShapeTextPlaceholderDocumentData, isShapeTextEditorDocumentEmpty, } from './views/shape-text-editor/shape-text-placeholder';
 export { resolveShapeTextBoxResizePolicy } from './views/shape-text-editor/shape-text-resize-policy';
 export type { IShapeTextBoxResizePolicyResult, IShapeTextBoxResizeRect, } from './views/shape-text-editor/shape-text-resize-policy';
-export { resolveShapeTextEditorTextRect } from './views/shape-text-editor/ShapeTextEditor';
 export { ShapeTextEditorContainer } from './views/shape-text-editor/ShapeTextEditorContainer';
 export { ShapeTextFloatToolbar } from './views/shape-text-editor/ShapeTextFloatToolbar';
 export type { IShapeTextEditingParams, IShapeTextEditorAdapter, IShapeTextEditorModel, IShapeTextEditorPositionOptions, IShapeTextHostHeightUpdateParams, IShapeTextHostSizeUpdateParams, IShapeTextUpdateParams, } from './views/shape-text-editor/types';
 export { stripShapeTextPlainMarker } from './views/shape-text-editor/types';
+export { SMART_ART_LAYOUT_CATALOG } from './views/smart-art/smart-art-layout-catalog.generated';
+export type { ISmartArtLayoutCatalogItem, SmartArtLayoutIconElement } from './views/smart-art/smart-art-layout-catalog.generated';
+export { SMART_ART_LAYOUT_GALLERY_CATALOG } from './views/smart-art/smart-art-layout-gallery-catalog.generated';
+export { SmartArtColorGallery } from './views/smart-art/SmartArtColorGallery';
+export { SmartArtLayoutGallery } from './views/smart-art/SmartArtLayoutGallery';
+export { SmartArtLayoutIcon } from './views/smart-art/SmartArtLayoutIcon';
+export { SmartArtQuickStyleGallery, SmartArtQuickStylePreview } from './views/smart-art/SmartArtQuickStyleGallery';
+export { SmartArtCreateGraphicRibbonControl, SmartArtLayoutRibbonControl, SmartArtResetRibbonControl, SmartArtRibbonControl, SmartArtStyleRibbonControl, } from './views/smart-art/SmartArtRibbonControl';
+export type { ISmartArtRibbonControlProps } from './views/smart-art/SmartArtRibbonControl';
+export { flattenSmartArtTextPaneRows, SmartArtTextPane } from './views/smart-art/SmartArtTextPane';

package/lib/types/locale/en-US.d.ts

@@ -1,5 +1,108 @@
 declare const locale: {
     'shape-editor-ui': {
+        effects: {
+            title: string;
+            shadow: string;
+            reflection: string;
+            glow: string;
+            softEdge: string;
+            bevel: string;
+            rotation3d: string;
+            none: string;
+            menu: {
+                shadow: string;
+                reflection: string;
+                glow: string;
+                softEdge: string;
+                bevel: string;
+                rotation3d: string;
+            };
+            groups: {
+                outer: string;
+                perspective: string;
+                reflectionVariations: string;
+                glowVariations: string;
+                softEdgeVariations: string;
+                bevelVariations: string;
+                parallel: string;
+                oblique: string;
+            };
+            textTitle: string;
+        };
+        smartArt: {
+            addAfter: string;
+            addAssistant: string;
+            addBelow: string;
+            convertToShapes: string;
+            deleteNode: string;
+            demote: string;
+            direction: string;
+            layout: string;
+            moveDown: string;
+            moveUp: string;
+            promote: string;
+            reset: string;
+            styles: string;
+            textPane: string;
+            title: string;
+            category: {
+                all: string;
+                list: string;
+                process: string;
+                cycle: string;
+                hierarchy: string;
+                relationship: string;
+                matrix: string;
+                pyramid: string;
+                picture: string;
+                timeline: string;
+                team: string;
+                textCard: string;
+            };
+            addShape: string;
+            addBullet: string;
+            createGraphic: string;
+            layoutGroup: string;
+            moveForward: string;
+            moveBackward: string;
+            resetGroup: string;
+            styleGroup: string;
+            changeColors: string;
+            quickStyle: {
+                section: {
+                    bestMatch: string;
+                    threeDimensional: string;
+                };
+                name: {
+                    simple1: string;
+                    simple2: string;
+                    simple3: string;
+                    simple4: string;
+                    simple5: string;
+                    '3d1': string;
+                    '3d2': string;
+                    '3d3': string;
+                    '3d4': string;
+                    '3d5': string;
+                    '3d6': string;
+                    '3d7': string;
+                    '3d8': string;
+                    '3d9': string;
+                };
+            };
+            colorStyle: {
+                section: {
+                    theme: string;
+                    colorful: string;
+                    accent1: string;
+                    accent2: string;
+                    accent3: string;
+                    accent4: string;
+                    accent5: string;
+                    accent6: string;
+                };
+            };
+        };
         formulaBinding: {
             accountingDescription: string;
             baseUnit: string;
@@ -18,9 +121,18 @@ declare const locale: {
                 currency: string;
                 custom: string;
                 date: string;
+                dateTime: string;
+                durationTime: string;
+                financial: string;
                 general: string;
                 more: string;
+                number: string;
+                percentage: string;
+                roundingCurrency: string;
+                scientific: string;
+                text: string;
                 thousandSeparator: string;
+                time: string;
             };
             formulaPlaceholder: string;
             generalDescription: string;
@@ -57,25 +169,6 @@ declare const locale: {
             confirm: string;
             cancel: string;
             animation: string;
-            formats: {
-                general: string;
-                text: string;
-                number: string;
-                percent: string;
-                percentage: string;
-                scientific: string;
-                accounting: string;
-                financial: string;
-                currency: string;
-                roundingCurrency: string;
-                date: string;
-                time: string;
-                dateTime: string;
-                durationTime: string;
-                thousandSeparator: string;
-                custom: string;
-                more: string;
-            };
         };
         insertShape: string;
         openPanel: string;
@@ -112,6 +205,12 @@ declare const locale: {
             solidFill: string;
             gradientFill: string;
             pictureFill: string;
+            tabs: {
+                noFill: string;
+                solidFill: string;
+                gradientFill: string;
+                pictureFill: string;
+            };
             patternFill: string;
             color: string;
             transparency: string;
@@ -399,8 +498,13 @@ declare const locale: {
             };
         };
         toolbar: {
-            expandShapeToolbar: string;
-            hideMenu: string;
+            fontFamily: string;
+            fontSize: string;
+            increaseFontSize: string;
+            decreaseFontSize: string;
+            floatingToolbar: string;
+            quickStyles: string;
+            changeShape: string;
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
@@ -418,6 +522,13 @@ declare const locale: {
             typography: string;
             more: string;
         };
+        arrange: {
+            title: string;
+            forward: string;
+            backward: string;
+            front: string;
+            back: string;
+        };
         align: {
             top: string;
             middle: string;

package/lib/types/menu/shape-floating-toolbar.menu.d.ts

@@ -0,0 +1,3 @@
+import type { IAccessor } from '@univerjs/core';
+import type { IMenuButtonItem } from '@univerjs/ui';
+export declare function ShapeFloatingToolbarToggleFactory(accessor: IAccessor): IMenuButtonItem<string, boolean>;

package/lib/types/plugin.d.ts

@@ -1,13 +1,14 @@
 import type { IUniverShapeEditorUIConfig } from './config/config';
-import { IConfigService, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
+import { ICommandService, IConfigService, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
 export declare class UniverShapeEditorUIPlugin extends Plugin {
     private readonly _config;
     protected readonly _injector: Injector;
     private readonly _configService;
+    private readonly _commandService;
     static type: UniverInstanceType;
     static pluginName: string;
     static packageName: string;
     static version: string;
-    constructor(_config: IUniverShapeEditorUIConfig | undefined, _injector: Injector, _configService: IConfigService);
+    constructor(_config: IUniverShapeEditorUIConfig | undefined, _injector: Injector, _configService: IConfigService, _commandService: ICommandService);
     onStarting(): void;
 }

package/lib/types/services/formula-binding.service.d.ts

@@ -0,0 +1,34 @@
+import type { IReferencedUnitCatalogService, IResourceRef } from '@univerjs-pro/embed';
+import type { IReferencedUnitViewerSession } from '@univerjs-pro/embed-unit-ui';
+import type { IDisposable } from '@univerjs/core';
+import type { FormulaSequenceNode, IFormulaRefSelection } from '@univerjs/engine-formula';
+import type { IFormulaBindingHost } from '../config/config';
+import type { IFormulaBindingReferenceSelectionChange } from './formula-binding-editor';
+import { HostExternalReferenceModel } from '@univerjs-pro/engine-formula';
+import { IUniverInstanceService, ThemeService } from '@univerjs/core';
+export interface IFormulaBindingContext {
+    formula: string;
+    refSelections: IFormulaRefSelection[];
+    selectionEnd: number;
+    selectionStart: number;
+    sequenceNodes: FormulaSequenceNode[];
+}
+export interface IFormulaBindingOptions {
+    host: IFormulaBindingHost;
+    onSelectReferences(change: IFormulaBindingReferenceSelectionChange): void;
+}
+export interface IFormulaBinding extends IDisposable {
+    updateFormulaContext(context: IFormulaBindingContext): void;
+}
+export declare class FormulaBindingService {
+    private readonly _catalog;
+    private readonly _themeService;
+    private readonly _externalReferenceModel;
+    private readonly _instanceService;
+    constructor(_catalog: IReferencedUnitCatalogService, _themeService: ThemeService, _externalReferenceModel: HostExternalReferenceModel, _instanceService: IUniverInstanceService);
+    resolveInitialResourceRef(host: IFormulaBindingHost, sequenceNodes: FormulaSequenceNode[]): {
+        ref?: IResourceRef;
+        required: boolean;
+    };
+    bind(session: IReferencedUnitViewerSession, options: IFormulaBindingOptions): IFormulaBinding;
+}

package/lib/types/services/shape-floating-toolbar.service.d.ts

@@ -0,0 +1,16 @@
+import type { Observable } from 'rxjs';
+import { Disposable, IConfigService } from '@univerjs/core';
+export declare class ShapeFloatingToolbarService extends Disposable {
+    private readonly _enabled$;
+    private readonly _fallbackVisible$;
+    private readonly _fallbackVisibleSources;
+    readonly enabled$: Observable<boolean>;
+    readonly visible$: Observable<boolean>;
+    constructor(configService: IConfigService);
+    getEnabled(): boolean;
+    setEnabled(enabled: boolean): void;
+    getVisible(): boolean;
+    setFallbackVisible(visible: boolean, source?: string): void;
+    toggle(): void;
+    dispose(): void;
+}

package/lib/types/utils/drawing-type-name.d.ts

@@ -0,0 +1,3 @@
+import { DrawingTypeEnum } from '@univerjs/core';
+export type DrawingTypeNameKey = 'chart' | 'dom' | 'group' | 'image' | 'object' | 'shape' | 'smartArt' | 'table' | 'unit' | 'video';
+export declare function getDrawingTypeNameKey(drawingType: DrawingTypeEnum): DrawingTypeNameKey;

package/lib/types/utils/shape-contextual-ribbon-host.d.ts

@@ -0,0 +1,2 @@
+export type ShapeContextualRibbonHostMode = 'regular' | 'tab' | 'isolated';
+export declare function resolveShapeContextualRibbonHostMode(canvasElement: HTMLElement | null | undefined): ShapeContextualRibbonHostMode;

package/lib/types/utils/shape-floating-toolbar-config.d.ts

@@ -1,5 +1,5 @@
 /**
- * Extra top clearance for shape toolbars, so they do not visually touch selection affordances.
+ * Symmetric vertical clearance for shape toolbars, including the rotation affordance around a selection.
  */
-export declare const SHAPE_FLOATING_TOOLBAR_TOP_OFFSET = 16;
-export declare const SHEET_DOC_SHAPE_FLOATING_TOOLBAR_TOP_OFFSET = 16;
+export declare const SHAPE_FLOATING_TOOLBAR_TOP_OFFSET = 64;
+export declare const SHEET_DOC_SHAPE_FLOATING_TOOLBAR_TOP_OFFSET = 64;

package/lib/types/views/FormulaBindingEditorDialog.d.ts

@@ -8,4 +8,4 @@ export interface IFormulaBindingEditorDialogProps {
     onClose: () => void;
     onConfirm: (result: IFormulaBindingEditorResult) => void;
 }
-export declare function FormulaBindingEditorDialog(props: IFormulaBindingEditorDialogProps): import("react").JSX.Element;
+export declare function FormulaBindingEditorDialog(props: IFormulaBindingEditorDialogProps): import("react").JSX.Element | null;

package/lib/types/views/formula-shape/UseFormulaShapeToolbar.d.ts

@@ -4,6 +4,9 @@ import type { ReactNode } from 'react';
 import type { IShapeFloatingToolbarExtensionGroup } from '../shape-floating-toolbar/ShapeFloatingToolbar';
 interface IUseFormulaShapeToolbarOptions extends IShapeFormulaIdentity {
     shapeData?: IShapeData;
+    registerBinding?: boolean;
+    showLabels?: boolean;
+    dropdownSide?: 'top' | 'bottom';
     onUpdateBinding: (binding: IShapeFormulaBinding) => void;
 }
 export declare function useFormulaShapeToolbar(options: IUseFormulaShapeToolbarOptions): {

package/lib/types/views/shape-floating-toolbar/ShapeFillControls.d.ts

@@ -0,0 +1,14 @@
+import type { IShapeData } from '@univerjs-pro/engine-shape';
+import type { ShapeDataUpdateHandler } from './shape-floating-toolbar-types';
+export declare function ShapeFillButton(props: {
+    title: string;
+    label?: string;
+    shapeData: IShapeData;
+    open?: boolean;
+    disabled?: boolean;
+    fallbackColor?: string;
+    fallbackGradientEndColor?: string;
+    dropdownSide?: 'top' | 'bottom';
+    onOpenChange?: (open: boolean) => void;
+    onUpdateShapeData: ShapeDataUpdateHandler;
+}): import("react").JSX.Element;

package/lib/types/views/shape-floating-toolbar/ShapeFloatingToolbar.d.ts

@@ -1,22 +1,13 @@
 import type { IShapeData, ShapeTypeEnum } from '@univerjs-pro/engine-shape';
 import type { ITextStyle } from '@univerjs/core';
-import type { MouseEvent, PointerEvent, ReactNode } from 'react';
-import type { IShapeTextUpdateOptions } from './shape-floating-toolbar-utils';
+import type { ReactNode } from 'react';
+import type { IToolbarDropdownOption, ShapeDataUpdateHandler, ShapeTextUpdateHandler } from './shape-floating-toolbar-types';
 import { HorizontalAlign, VerticalAlign } from '@univerjs/core';
-export declare const SHAPE_FLOATING_TOOLBAR_DEFAULT_FILL_COLOR = "#3B82F6";
-export declare const SHAPE_FLOATING_TOOLBAR_DEFAULT_STROKE_COLOR = "#2563EB";
-export declare const SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_COLOR = "#111827";
-export declare const SHAPE_FLOATING_TOOLBAR_DEFAULT_TEXT_BACKGROUND_COLOR = "#ffffff";
 export type IShapeFloatingToolbarWrappingStyle = string | number;
 export interface IShapeFloatingToolbarTextModel {
     ha?: HorizontalAlign;
     va?: VerticalAlign;
 }
-export interface IToolbarDropdownOption<T extends string | number> {
-    label: string;
-    value: T;
-    icon: ReactNode;
-}
 export interface IShapeFloatingToolbarGroupAction {
     type: 'group' | 'ungroup';
     label: string;
@@ -49,6 +40,7 @@ export interface IShapeFloatingToolbarExtensionGroup {
     actions: IShapeFloatingToolbarExtensionAction[];
 }
 export interface IShapeFloatingToolbarProps {
+    canvasElement: HTMLCanvasElement;
     shapeData?: IShapeData;
     shapeType?: ShapeTypeEnum;
     textStyle: ITextStyle;
@@ -62,130 +54,16 @@ export interface IShapeFloatingToolbarProps {
     defaultFillColor?: string;
     defaultGradientEndColor?: string;
     defaultStrokeColor?: string;
-    onUpdateShapeData: (oldShapeJSON: {
-        oldShapeData?: IShapeData;
-    }, shapeData?: IShapeData, patch?: IShapeData) => void;
-    onUpdateText: (params: IShapeTextUpdateOptions) => void;
+    onUpdateShapeData: ShapeDataUpdateHandler;
+    onUpdateText: ShapeTextUpdateHandler;
     onUpdateWrappingStyle?: (value: IShapeFloatingToolbarWrappingStyle) => void;
     groupAction?: IShapeFloatingToolbarGroupAction;
     layerActions?: IShapeFloatingToolbarLayerActions;
     extensionGroups?: IShapeFloatingToolbarExtensionGroup[];
-    collapseLabel?: string;
-    expandLabel?: string;
     deleteLabel?: string;
     onOpenPanel?: () => void;
     onDelete?: () => void;
 }
-export declare function ShapeFloatingToolbarIcon(props: {
-    children: ReactNode;
-    className?: string;
-}): import("react").JSX.Element;
-export declare function ShapeFloatingToolbarContent(props: {
-    children: ReactNode;
-    className?: string;
-    maxWidthClassName?: string;
-    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
-}): import("react").JSX.Element;
-export declare function ShapeFloatingToolbarButton(props: {
-    title?: string;
-    active?: boolean;
-    disabled?: boolean;
-    children: ReactNode;
-    className?: string;
-    sizeClassName?: string;
-    tooltipVisible?: boolean;
-    ariaExpanded?: boolean;
-    onClick?: () => void;
-    onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onPointerDown?: (event: PointerEvent<HTMLButtonElement>) => void;
-}): import("react").JSX.Element;
-export declare function ShapeFloatingToolbarDropdownTrigger(props: {
-    title?: string;
-    icon: ReactNode;
-    active?: boolean;
-    className?: string;
-    sizeClassName?: string;
-    onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onPointerDown?: (event: PointerEvent<HTMLButtonElement>) => void;
-}): import("react").JSX.Element;
-export declare function ShapeFloatingToolbarFontSizeSelect(props: {
-    value: string | number;
-    className?: string;
-    onChange: (fontSize: number) => void;
-    onAfterChange?: () => void;
-}): import("react").JSX.Element;
-export type ShapeStrokePanelMode = 'none' | 'solid' | 'dash' | 'dot';
-export declare function buildShapeStrokeDataUpdate(currentStroke: IShapeData['stroke'], resolvedStroke: NonNullable<IShapeData['stroke']>, partial: Partial<NonNullable<IShapeData['stroke']>>): {
-    nextShapeData: IShapeData;
-    patch: IShapeData;
-};
-export interface IShapeStrokePanelContentProps {
-    title: string;
-    shapeData: IShapeData;
-    disabled?: boolean;
-    resetLabel?: string;
-    modeOptions?: ShapeStrokePanelMode[];
-    showDashDropdown?: boolean;
-    fallbackColor?: string;
-    widthRange?: {
-        min: number;
-        max: number;
-        step: number;
-    };
-    onReset?: () => void;
-    onRequestClose?: () => void;
-    onUpdateShapeData: IShapeFloatingToolbarProps['onUpdateShapeData'];
-}
-export declare function ShapeStrokePanelContent(props: IShapeStrokePanelContentProps): import("react").JSX.Element;
-export declare function ShapeStrokePanelButton(props: {
-    title: string;
-    shapeData: IShapeData;
-    open?: boolean;
-    disabled?: boolean;
-    resetLabel?: string;
-    fallbackColor?: string;
-    onReset?: () => void;
-    onOpenChange?: (open: boolean) => void;
-    onUpdateShapeData: IShapeFloatingToolbarProps['onUpdateShapeData'];
-}): import("react").JSX.Element;
-export declare function ShapeFillButton(props: {
-    title: string;
-    shapeData: IShapeData;
-    open?: boolean;
-    disabled?: boolean;
-    fallbackColor?: string;
-    fallbackGradientEndColor?: string;
-    onOpenChange?: (open: boolean) => void;
-    onUpdateShapeData: IShapeFloatingToolbarProps['onUpdateShapeData'];
-}): import("react").JSX.Element;
-export declare function TextFillButton(props: {
-    title: string;
-    textStyle: ITextStyle;
-    fallbackColor: string;
-    onChange: (textStyle: ITextStyle) => void;
-}): import("react").JSX.Element;
-export declare function TextBackgroundColorButton(props: {
-    title: string;
-    color: string;
-    onApply: () => void;
-    onReset?: () => void;
-    onChange: (color: string) => void;
-}): import("react").JSX.Element;
-export declare function TypographyPanelButton(props: {
-    title: string;
-    fontFamily: string;
-    textStyle: {
-        isBold: boolean;
-        isItalic: boolean;
-        isUnderline: boolean;
-        isStrike: boolean;
-    };
-    horizontalAlign: HorizontalAlign;
-    verticalAlign: VerticalAlign;
-    horizontalAlignOptions: Array<IToolbarDropdownOption<HorizontalAlign>>;
-    verticalAlignOptions: Array<IToolbarDropdownOption<VerticalAlign>>;
-    onUpdateText: IShapeFloatingToolbarProps['onUpdateText'];
-}): import("react").JSX.Element;
 export declare function ShapeFloatingToolbarMenuPanel(props: {
     title?: string;
     children: ReactNode;
@@ -193,8 +71,7 @@ export declare function ShapeFloatingToolbarMenuPanel(props: {
     minWidthClassName?: string;
 }): import("react").JSX.Element;
 export declare function ShapeFloatingToolbarMenuItem(props: {
-    label?: string;
-    labelKey?: string;
+    label: string;
     shortcut?: string;
     disabled?: boolean;
     danger?: boolean;