@univerjs-pro/shape-editor-ui 1.0.0-beta.0 → 1.0.0-beta.2

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

@@ -1,5 +1,269 @@
 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;
+            };
+            layoutName: {
+                '001': string;
+                '002': string;
+                '003': string;
+                '004': string;
+                '005': string;
+                '006': string;
+                '007': string;
+                '008': string;
+                '009': string;
+                '010': string;
+                '011': string;
+                '012': string;
+                '013': string;
+                '014': string;
+                '015': string;
+                '016': string;
+                '017': string;
+                '018': string;
+                '019': string;
+                '020': string;
+                '021': string;
+                '022': string;
+                '023': string;
+                '024': string;
+                '025': string;
+                '026': string;
+                '027': string;
+                '028': string;
+                '029': string;
+                '030': string;
+                '031': string;
+                '032': string;
+                '033': string;
+                '034': string;
+                '035': string;
+                '036': string;
+                '037': string;
+                '038': string;
+                '039': string;
+                '040': string;
+                '041': string;
+                '042': string;
+                '043': string;
+                '044': string;
+                '045': string;
+                '046': string;
+                '047': string;
+                '048': string;
+                '049': string;
+                '050': string;
+                '051': string;
+                '052': string;
+                '053': string;
+                '054': string;
+                '055': string;
+                '056': string;
+                '057': string;
+                '058': string;
+                '059': string;
+                '060': string;
+                '061': string;
+                '062': string;
+                '063': string;
+                '064': string;
+                '065': string;
+                '066': string;
+                '067': string;
+                '068': string;
+                '069': string;
+                '070': string;
+                '071': string;
+                '072': string;
+                '073': string;
+                '074': string;
+                '075': string;
+                '076': string;
+                '077': string;
+                '078': string;
+                '079': string;
+                '080': string;
+                '081': string;
+                '082': string;
+                '083': string;
+                '084': string;
+                '085': string;
+                '086': string;
+                '087': string;
+                '088': string;
+                '089': string;
+                '090': string;
+                '091': string;
+                '092': string;
+                '093': string;
+                '094': string;
+                '095': string;
+                '096': string;
+                '097': string;
+                '098': string;
+                '099': string;
+                100: string;
+                101: string;
+                102: string;
+                103: string;
+                104: string;
+                105: string;
+                106: string;
+                107: string;
+                108: string;
+                109: string;
+                110: string;
+                111: string;
+                112: string;
+                113: string;
+                114: string;
+                115: string;
+                116: string;
+                117: string;
+                118: string;
+                119: string;
+                120: string;
+                121: string;
+                122: string;
+                123: string;
+                124: string;
+                125: string;
+                126: string;
+                127: string;
+                128: string;
+                129: string;
+                130: string;
+                131: string;
+                132: string;
+                133: string;
+                134: string;
+                135: string;
+                136: string;
+                137: string;
+                138: string;
+                139: string;
+                140: string;
+                141: string;
+                142: string;
+                143: string;
+                144: string;
+                145: string;
+                146: string;
+                147: string;
+                148: string;
+                149: string;
+                150: string;
+                151: string;
+                152: string;
+                153: string;
+                154: string;
+                155: string;
+                156: string;
+                157: string;
+                158: string;
+                159: 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 +282,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 +330,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;
@@ -106,12 +360,30 @@ declare const locale: {
                 callout: string;
             };
         };
+        hyperLink: {
+            confirm: string;
+            cancel: string;
+            address: string;
+            addressError: string;
+            label: string;
+            labelError: string;
+            copy: string;
+            edit: string;
+            remove: string;
+            copied: string;
+        };
         fill: {
             title: string;
             noFill: string;
             solidFill: string;
             gradientFill: string;
             pictureFill: string;
+            tabs: {
+                noFill: string;
+                solidFill: string;
+                gradientFill: string;
+                pictureFill: string;
+            };
             patternFill: string;
             color: string;
             transparency: string;
@@ -399,8 +671,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;
@@ -415,9 +692,17 @@ declare const locale: {
             textBackgroundColor: string;
             fillColor: string;
             resetColor: string;
+            hyperlink: string;
             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/services/shape-text-hyper-link-popup.service.d.ts

@@ -0,0 +1,27 @@
+import type { IDisposable, Nullable } from '@univerjs/core';
+import type { IShapeTextHyperLinkInfo } from '../commands/shape-text-hyper-link.command';
+import { Disposable, IUniverInstanceService } from '@univerjs/core';
+import { DocSelectionManagerService } from '@univerjs/docs';
+import { DocCanvasPopManagerService } from '@univerjs/docs-ui';
+export declare class ShapeTextHyperLinkPopupService extends Disposable {
+    private readonly _docCanvasPopupManagerService;
+    private readonly _docSelectionManagerService;
+    private readonly _univerInstanceService;
+    private readonly _editingLink$;
+    private readonly _showingLink$;
+    readonly editingLink$: import("rxjs").Observable<Nullable<IShapeTextHyperLinkInfo>>;
+    readonly showingLink$: import("rxjs").Observable<Nullable<IShapeTextHyperLinkInfo>>;
+    private _editPopup;
+    private _infoPopup;
+    private _infoPopupSuppressed;
+    private _infoPopupSuppressionTimer;
+    constructor(_docCanvasPopupManagerService: DocCanvasPopManagerService, _docSelectionManagerService: DocSelectionManagerService, _univerInstanceService: IUniverInstanceService);
+    dispose(): void;
+    get editing(): Nullable<IShapeTextHyperLinkInfo>;
+    get showing(): Nullable<IShapeTextHyperLinkInfo>;
+    showEditPopup(unitId: string, link: Nullable<IShapeTextHyperLinkInfo>): Nullable<IDisposable>;
+    hideEditPopup(): void;
+    showInfoPopup(info: IShapeTextHyperLinkInfo, attachPopup?: () => IDisposable): Nullable<IDisposable>;
+    hideInfoPopup(): void;
+    hideInfoPopupOnPointerDown(): void;
+}

package/lib/types/utils/render-transformer-lifecycle.d.ts

@@ -0,0 +1,4 @@
+import type { IDisposable, UniverInstanceType } from '@univerjs/core';
+import type { IRender, IRenderManagerService } from '@univerjs/engine-render';
+export type RenderTransformer = ReturnType<IRender['scene']['getTransformerByCreate']>;
+export declare function bindRenderTransformerLifecycle(renderManagerService: IRenderManagerService, unitType: UniverInstanceType, bind: (transformer: RenderTransformer) => IDisposable): IDisposable;

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/utils/shape-transformer-config.d.ts

@@ -3,29 +3,29 @@
  * Per-object transformer settings still take precedence for special cases such as connectors.
  */
 export declare const SHAPE_EDITOR_TRANSFORMER_CONFIG: {
-    readonly borderEnabled: true;
-    readonly borderStroke: "#4086f4";
-    readonly borderStrokeWidth: 1;
-    readonly borderSpacing: 2;
-    readonly anchorFill: "#ffffff";
-    readonly anchorStroke: "#4086f4";
-    readonly anchorStrokeWidth: 1.5;
-    readonly anchorSize: 8;
-    readonly anchorCornerRadius: 2;
-    readonly anchorStyle: "canva";
+    readonly keepRatio: false;
+    readonly moveBoundaryEnabled: false;
+    readonly resizeEnabled: true;
     readonly rotateEnabled: true;
-    readonly rotateSize: 18;
-    readonly rotateCornerRadius: 9;
-    readonly rotateAnchorOffset: 28;
+    readonly rotateAnchorOffset: number;
     readonly rotateAnchorPosition: "bottom";
     readonly rotateLineEnabled: false;
-    readonly rotateFill: "#ffffff";
-    readonly rotateStroke: "#4086f4";
-    readonly rotateStrokeWidth: 1;
+    readonly rotateSize: number;
+    readonly rotateCornerRadius: number;
+    readonly rotateFill: string;
+    readonly rotateStroke: string;
+    readonly rotateStrokeWidth: number;
     readonly rotateIconEnabled: true;
-    readonly rotateIconStroke: "#4086f4";
-    readonly rotateIconStrokeWidth: 1.25;
-    readonly resizeEnabled: true;
-    readonly keepRatio: false;
-    readonly moveBoundaryEnabled: false;
+    readonly rotateIconStroke: string;
+    readonly rotateIconStrokeWidth: number;
+    readonly borderEnabled: true;
+    readonly borderStroke: string;
+    readonly borderStrokeWidth: number;
+    readonly borderSpacing: number;
+    readonly anchorFill: string;
+    readonly anchorStroke: string;
+    readonly anchorStrokeWidth: number;
+    readonly anchorSize: number;
+    readonly anchorCornerRadius: number;
+    readonly anchorStyle: "canva";
 };

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

@@ -2,11 +2,13 @@ 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

@@ -40,6 +40,7 @@ export interface IShapeFloatingToolbarExtensionGroup {
     actions: IShapeFloatingToolbarExtensionAction[];
 }
 export interface IShapeFloatingToolbarProps {
+    canvasElement: HTMLCanvasElement;
     shapeData?: IShapeData;
     shapeType?: ShapeTypeEnum;
     textStyle: ITextStyle;
@@ -59,8 +60,6 @@ export interface IShapeFloatingToolbarProps {
     groupAction?: IShapeFloatingToolbarGroupAction;
     layerActions?: IShapeFloatingToolbarLayerActions;
     extensionGroups?: IShapeFloatingToolbarExtensionGroup[];
-    collapseLabel?: string;
-    expandLabel?: string;
     deleteLabel?: string;
     onOpenPanel?: () => void;
     onDelete?: () => void;

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

@@ -1,4 +1,10 @@
-import type { MouseEvent, PointerEvent, ReactNode } from 'react';
+import type { ComponentProps, MouseEvent, PointerEvent, ReactNode } from 'react';
+import { Dropdown, Tooltip } from '@univerjs/design';
+export declare function ShapeFloatingToolbarTooltip(props: Omit<ComponentProps<typeof Tooltip>, 'visible' | 'onVisibleChange'> & {
+    popupOpen: boolean;
+}): import("react").JSX.Element;
+type ShapeFloatingToolbarDropdownProps = Omit<ComponentProps<typeof Dropdown>, 'avoidCollisions'>;
+export declare function ShapeFloatingToolbarDropdown(props: ShapeFloatingToolbarDropdownProps): import("react").JSX.Element;
 export declare function ShapeFloatingToolbarIcon(props: {
     children: ReactNode;
     className?: string;
@@ -16,7 +22,7 @@ export declare function ShapeFloatingToolbarButton(props: {
     children: ReactNode;
     className?: string;
     sizeClassName?: string;
-    tooltipVisible?: boolean;
+    popupOpen?: boolean;
     ariaExpanded?: boolean;
     onClick?: () => void;
     onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -24,6 +30,7 @@ export declare function ShapeFloatingToolbarButton(props: {
 }): import("react").JSX.Element;
 export declare function ShapeFloatingToolbarDropdownTrigger(props: {
     title?: string;
+    label?: string;
     icon: ReactNode;
     active?: boolean;
     className?: string;
@@ -34,6 +41,8 @@ export declare function ShapeFloatingToolbarDropdownTrigger(props: {
 export declare function ShapeFloatingToolbarFontSizeSelect(props: {
     value: string | number;
     className?: string;
+    dropdownSide?: 'top' | 'bottom';
     onChange: (fontSize: number) => void;
     onAfterChange?: () => void;
 }): import("react").JSX.Element;
+export {};

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

@@ -20,17 +20,22 @@ export interface IShapeStrokePanelContentProps {
     };
     onReset?: () => void;
     onRequestClose?: () => void;
+    closeOnColorChange?: boolean;
     onUpdateShapeData: ShapeDataUpdateHandler;
 }
 export declare function ShapeStrokePanelContent(props: IShapeStrokePanelContentProps): import("react").JSX.Element;
 export declare function ShapeStrokePanelButton(props: {
     title: string;
+    label?: string;
     shapeData: IShapeData;
     open?: boolean;
     disabled?: boolean;
     resetLabel?: string;
     fallbackColor?: string;
+    dropdownSide?: 'top' | 'bottom';
     onReset?: () => void;
     onOpenChange?: (open: boolean) => void;
+    closeOnColorChange?: boolean;
+    keepOpenOnInternalInteraction?: boolean;
     onUpdateShapeData: ShapeDataUpdateHandler;
 }): import("react").JSX.Element;