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

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

@@ -4,11 +4,13 @@ export declare function TextFillButton(props: {
     title: string;
     textStyle: ITextStyle;
     fallbackColor: string;
+    dropdownSide?: 'top' | 'bottom';
     onChange: (textStyle: ITextStyle) => void;
 }): import("react").JSX.Element;
 export declare function TextBackgroundColorButton(props: {
     title: string;
     color: string;
+    dropdownSide?: 'top' | 'bottom';
     onApply: () => void;
     onReset?: () => void;
     onChange: (color: string) => void;
@@ -26,5 +28,6 @@ export declare function TypographyPanelButton(props: {
     verticalAlign: VerticalAlign;
     horizontalAlignOptions: Array<IToolbarDropdownOption<HorizontalAlign>>;
     verticalAlignOptions: Array<IToolbarDropdownOption<VerticalAlign>>;
+    dropdownSide?: 'top' | 'bottom';
     onUpdateText: ShapeTextUpdateHandler;
 }): import("react").JSX.Element;

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

@@ -1,11 +1,17 @@
 import type { IShapeData, IShapeTextDataModel } from '@univerjs-pro/engine-shape';
-import type { IDocumentData, ITextStyle } from '@univerjs/core';
+import type { IDocumentData, ITextStyle, PresetListType } from '@univerjs/core';
 import { HorizontalAlign, VerticalAlign } from '@univerjs/core';
 export interface IShapeTextUpdateOptions {
     textStyle?: ITextStyle;
     verticalAlign?: VerticalAlign;
     horizontalAlign?: HorizontalAlign;
+    listType?: PresetListType | null;
 }
 export declare function createDefaultShapeTextDocument(textStyle?: ITextStyle, horizontalAlign?: HorizontalAlign, text?: string): IDocumentData;
 export declare function getShapeTextModel(shapeData: IShapeData, options: IShapeTextUpdateOptions): IShapeTextDataModel;
+export declare function getShapeTextListState(shapeData: IShapeData, family: PresetListType.ORDER_LIST | PresetListType.BULLET_LIST): {
+    active: boolean;
+    mixed: boolean;
+    value?: PresetListType;
+};
 export declare function buildShapeTextDataUpdate(shapeData: IShapeData, options: IShapeTextUpdateOptions): IShapeData;

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

@@ -0,0 +1 @@
+export declare function forwardShapeFloatingToolbarWheel(source: WheelEvent, canvasElement: HTMLCanvasElement): boolean;

package/lib/types/views/shape-format-ribbon/ShapeEffectControls.d.ts

@@ -0,0 +1,19 @@
+import type { IShapeData, ShapeBevelPresetEnum } from '@univerjs-pro/engine-shape';
+import { ShapeCameraPresetEnum } from '@univerjs-pro/engine-shape';
+export type ShapeEffectCategory = 'shadow' | 'reflection' | 'glow' | 'softEdge' | 'bevel' | 'rotation3d';
+/**
+ * Values observed by applying the native PowerPoint gallery to a newly inserted rectangle.
+ * Existing 3D properties not owned by the selected gallery remain intact through mergeEffectPatch.
+ */
+export declare function createBevelPresetPatch(preset: ShapeBevelPresetEnum): IShapeData;
+export declare function createRotationPresetPatch(preset: ShapeCameraPresetEnum): IShapeData;
+export declare const ROTATION_GROUPS: Record<string, ShapeCameraPresetEnum[]>;
+export declare function mergeEffectPatch(shapeData: IShapeData, patch: IShapeData): IShapeData;
+export declare function ShapeEffectButton(props: {
+    categories?: ShapeEffectCategory[];
+    shapeData: IShapeData;
+    disabled?: boolean;
+    dropdownSide?: 'top' | 'bottom';
+    titleKey?: string;
+    onUpdateShapeData: (patch: IShapeData) => void;
+}): import("react").JSX.Element;

package/lib/types/views/shape-format-ribbon/ShapeEffectPresetIcon.d.ts

@@ -0,0 +1,11 @@
+import type { IShapeScene3D } from '@univerjs-pro/engine-shape';
+import { ShapeBevelPresetEnum, ShapeCameraPresetEnum } from '@univerjs-pro/engine-shape';
+export declare const BEVEL_PRESET_ORDER: readonly [ShapeBevelPresetEnum.RelaxedInset, ShapeBevelPresetEnum.Circle, ShapeBevelPresetEnum.Slope, ShapeBevelPresetEnum.Cross, ShapeBevelPresetEnum.Angle, ShapeBevelPresetEnum.SoftRound, ShapeBevelPresetEnum.Convex, ShapeBevelPresetEnum.CoolSlant, ShapeBevelPresetEnum.Divot, ShapeBevelPresetEnum.Riblet, ShapeBevelPresetEnum.HardEdge, ShapeBevelPresetEnum.ArtDeco];
+export declare function BevelPresetIcon(props: {
+    preset: ShapeBevelPresetEnum;
+}): import("react").JSX.Element;
+export declare function RotationPresetIcon(props: {
+    group: string;
+    preset: ShapeCameraPresetEnum;
+    scene3d: IShapeScene3D;
+}): import("react").JSX.Element;

package/lib/types/views/shape-format-ribbon/ShapeFormatRibbonControls.d.ts

@@ -0,0 +1,27 @@
+import type { IShapeData, ShapeTypeEnum } from '@univerjs-pro/engine-shape';
+import type { ReactNode } from 'react';
+import type { IShapeFloatingToolbarExtensionAction } from '../shape-floating-toolbar/ShapeFloatingToolbar';
+export interface IShapeStyleRibbonControlProps {
+    shapeData: IShapeData;
+    shapeType?: ShapeTypeEnum;
+    onUpdateShapeData: (patch: IShapeData) => void;
+}
+export type IShapeEffectsRibbonControlProps = IShapeStyleRibbonControlProps;
+export interface IShapeTextRibbonControlProps {
+    fontFamilyPopupDataComponent: string;
+    shapeData: IShapeData;
+    onUpdateShapeData: (patch: IShapeData) => void;
+}
+export interface IShapeTextEffectsRibbonControlProps {
+    shapeData: IShapeData;
+    onUpdateShapeData: (patch: IShapeData) => void;
+}
+export interface IShapeFormulaRibbonControlProps {
+    actions: IShapeFloatingToolbarExtensionAction[];
+    panel?: ReactNode;
+}
+export declare function ShapeStyleRibbonControl(props: IShapeStyleRibbonControlProps): import("react").JSX.Element;
+export declare function ShapeEffectsRibbonControl(props: IShapeEffectsRibbonControlProps): import("react").JSX.Element;
+export declare function ShapeTextEffectsRibbonControl(props: IShapeTextEffectsRibbonControlProps): import("react").JSX.Element;
+export declare function ShapeFormulaRibbonControl(props: IShapeFormulaRibbonControlProps): import("react").JSX.Element | null;
+export declare function ShapeTextRibbonControl(props: IShapeTextRibbonControlProps): import("react").JSX.Element;

package/lib/types/views/shape-format-ribbon/shape-effect-reference-paths.generated.d.ts

@@ -0,0 +1,6 @@
+export interface IReferenceIconLayer {
+    fill: string;
+    d: string;
+}
+export declare const BEVEL_REFERENCE_PATHS: readonly IReferenceIconLayer[][];
+export declare const ROTATION_REFERENCE_PATHS: readonly IReferenceIconLayer[][];

package/lib/types/views/shape-picker/ShapeChangePicker.d.ts

@@ -0,0 +1,7 @@
+import type { ShapeTypeEnum } from '@univerjs-pro/engine-shape';
+export declare const SHAPE_CHANGE_PICKER_COMPONENT = "shape-editor-ui.change-shape-picker";
+interface IShapeChangePickerProps {
+    onChange?: (value: ShapeTypeEnum) => void;
+}
+export declare function ShapeChangePicker(props: IShapeChangePickerProps): import("react").JSX.Element;
+export {};

package/lib/types/views/shape-quick-style/ShapeQuickStyleGallery.d.ts

@@ -0,0 +1,10 @@
+import { getShapeQuickStylePresets } from '@univerjs-pro/shape-editor';
+type ShapeQuickStyleType = Parameters<typeof getShapeQuickStylePresets>[0];
+export interface IShapeQuickStyleGalleryProps {
+    type: ShapeQuickStyleType;
+    ariaLabel: string;
+    activePresetId?: string | null;
+    onSelect: (presetId: string) => void;
+}
+export declare function ShapeQuickStyleGallery(props: IShapeQuickStyleGalleryProps): import("react").JSX.Element;
+export {};

package/lib/types/views/shape-text-editor/DocParagraphTypeDropdown.d.ts

@@ -1,8 +1,8 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 export interface IDocParagraphTypeDropdownProps {
-    buttonClassName?: string;
     className?: string;
     popupDataComponent?: string;
+    size?: 'small' | 'middle';
     title?: string;
     onAfterCommand?: () => void;
     onBeforeCommand?: () => void;

package/lib/types/views/shape-text-editor/ShapeTextFloatToolbar.d.ts

@@ -2,7 +2,6 @@ export declare const STYLE_COMMAND_IDS: string[];
 export declare const SHAPE_TEXT_FLOAT_TOOLBAR_CLASSES: {
     root: string;
     group: string;
-    button: string;
     select: string;
 };
 export declare function ShapeTextFloatToolbar(): import("react").JSX.Element;

package/lib/types/views/shape-text-editor/ShapeTextHyperLinkPopup.d.ts

@@ -0,0 +1,8 @@
+export declare function ShapeTextHyperLinkEdit(): import("react").JSX.Element | null;
+export declare namespace ShapeTextHyperLinkEdit {
+    var componentKey: string;
+}
+export declare function ShapeTextHyperLinkInfo(): import("react").JSX.Element | null;
+export declare namespace ShapeTextHyperLinkInfo {
+    var componentKey: string;
+}

package/lib/types/views/shape-text-editor/ShapeTextPositionWrapper.d.ts

@@ -50,6 +50,10 @@ export declare function resolveShapeTextEditorPositionTransform(options: {
     scene: Nullable<Scene>;
 }): Nullable<IShapeObjectLike>;
 export declare function resolveShapeTextEditorPositionRoot(editorElement: HTMLElement | null): Element | null;
+export declare function resolveEmbeddedShapeTextEditorPositionOffset(canvasElement: Element | null | undefined, positionRoot: Element | null): {
+    left: number;
+    top: number;
+} | null;
 /**
  * Position wrapper component that handles shape positioning in DOM.
  * This is the first layer DOM that tracks shape position with scroll.

package/lib/types/views/shape-text-editor/shape-text-editor-commands.d.ts

@@ -1,4 +1,3 @@
-export declare const SHAPE_TEXT_EDITOR_HYPERLINK_EDIT_OPERATION_ID = "doc.operation.show-hyper-link-edit-popup";
 export declare const SHAPE_TEXT_EDITOR_CALLOUT_COMMAND_ID = "docs-callout.command.insert";
 export declare const SHAPE_TEXT_EDITOR_CODE_COMMAND_ID = "docs-code.command.insert";
 export declare const SHAPE_TEXT_EDITOR_QUOTE_COMMAND_ID = "docs-quote.command.insert";

package/lib/types/views/shape-text-editor/shape-text-float-menu-render-controller-base.d.ts

@@ -1,7 +1,8 @@
-import type { DocumentDataModel } from '@univerjs/core';
-import type { DocSelectionManagerService } from '@univerjs/docs';
-import type { DocCanvasPopManagerService, DocSelectionRenderService } from '@univerjs/docs-ui';
+import type { DocumentDataModel, ICommandService } from '@univerjs/core';
+import type { DocInterceptorService, DocSelectionManagerService } from '@univerjs/docs';
+import type { DocCanvasPopManagerService, DocEventManagerService, DocRenderController, DocSelectionRenderService } from '@univerjs/docs-ui';
 import type { IRenderContext, IRenderModule } from '@univerjs/engine-render';
+import type { ShapeTextHyperLinkPopupService } from '../../services/shape-text-hyper-link-popup.service';
 import { Disposable } from '@univerjs/core';
 export interface IShapeTextFloatMenuRenderControllerConfig {
     componentKey: string;
@@ -12,9 +13,17 @@ export declare class ShapeTextFloatMenuRenderControllerBase extends Disposable i
     private readonly _docSelectionManagerService;
     private readonly _docCanvasPopManagerService;
     private readonly _docSelectionRenderService;
+    private readonly _commandService;
+    private readonly _eventManagerService;
+    private readonly _popupService;
+    private readonly _interceptorService;
+    private readonly _renderController;
     private readonly _config;
     private _floatMenu;
-    constructor(_context: IRenderContext<DocumentDataModel>, _docSelectionManagerService: DocSelectionManagerService, _docCanvasPopManagerService: DocCanvasPopManagerService, _docSelectionRenderService: DocSelectionRenderService, _config: IShapeTextFloatMenuRenderControllerConfig);
+    constructor(_context: IRenderContext<DocumentDataModel>, _docSelectionManagerService: DocSelectionManagerService, _docCanvasPopManagerService: DocCanvasPopManagerService, _docSelectionRenderService: DocSelectionRenderService, _commandService: ICommandService, _eventManagerService: DocEventManagerService, _popupService: ShapeTextHyperLinkPopupService, _interceptorService: DocInterceptorService, _renderController: DocRenderController, _config: IShapeTextFloatMenuRenderControllerConfig);
+    dispose(): void;
+    private _initHyperLinkInteraction;
+    private _initHyperLinkRendering;
     private _initSelectionChange;
     private _hideFloatMenu;
     private _showFloatMenu;

package/lib/types/views/shape-text-editor/shape-text-keyboard.d.ts

@@ -6,6 +6,10 @@ interface IShapeTextEditorKeyboardRange {
     endOffset?: number;
     collapsed?: boolean;
 }
+export declare function getShapeTextEditorSelectAllRange(dataStreamLength: number): {
+    startOffset: number;
+    endOffset: number;
+};
 export declare function isShapeTextEditorKeyboardFocusActive(isInputFocusing: boolean, textRanges: readonly IShapeTextEditorKeyboardRange[] | null | undefined): boolean;
 interface IShapeTextEditorKeyboardOptions {
     commitOnEnter?: boolean;

package/lib/types/views/shape-text-editor/types.d.ts

@@ -9,6 +9,7 @@ export interface IShapeTextEditingParams {
     shapeId: string;
     shapeKey: string;
     visible: boolean;
+    selectAllOnFocus?: boolean;
 }
 export interface IShapeTextEditingService {
     editingParams$: Observable<Nullable<IShapeTextEditingParams>>;

package/lib/types/views/smart-art/SmartArtColorGallery.d.ts

@@ -0,0 +1,6 @@
+import type { ISmartArtColorStyleCatalogItem } from '@univerjs-pro/engine-shape';
+export interface ISmartArtColorGalleryProps {
+    selectedColorStyleId?: string;
+    onSelect: (style: ISmartArtColorStyleCatalogItem) => void;
+}
+export declare function SmartArtColorGallery(props: ISmartArtColorGalleryProps): import("react").JSX.Element;

package/lib/types/views/smart-art/SmartArtLayoutGallery.d.ts

@@ -0,0 +1,6 @@
+import type { ISmartArtLayoutCatalogItem } from './smart-art-layout-catalog.generated';
+export interface ISmartArtLayoutGalleryProps {
+    selectedLayoutId?: string;
+    onSelect: (layout: ISmartArtLayoutCatalogItem) => void;
+}
+export declare function SmartArtLayoutGallery(props: ISmartArtLayoutGalleryProps): import("react").JSX.Element;

package/lib/types/views/smart-art/SmartArtLayoutIcon.d.ts

@@ -0,0 +1,6 @@
+import type { SmartArtLayoutIconElement } from './smart-art-layout-catalog.generated';
+export interface ISmartArtLayoutIconProps {
+    elements: readonly SmartArtLayoutIconElement[];
+    className?: string;
+}
+export declare function SmartArtLayoutIcon(props: ISmartArtLayoutIconProps): import("react").JSX.Element;

package/lib/types/views/smart-art/SmartArtQuickStyleGallery.d.ts

@@ -0,0 +1,10 @@
+import type { ISmartArtQuickStyleCatalogItem } from '@univerjs-pro/engine-shape';
+export interface ISmartArtQuickStyleGalleryProps {
+    selectedStyleId?: string;
+    onSelect: (style: ISmartArtQuickStyleCatalogItem) => void;
+}
+export declare function SmartArtQuickStyleGallery(props: ISmartArtQuickStyleGalleryProps): import("react").JSX.Element;
+export declare function SmartArtQuickStylePreview(props: {
+    style: ISmartArtQuickStyleCatalogItem;
+    compact?: boolean;
+}): import("react").JSX.Element;

package/lib/types/views/smart-art/SmartArtRibbonControl.d.ts

@@ -0,0 +1,33 @@
+import type { ISmartArtColorStyleCatalogItem, ISmartArtData, ISmartArtQuickStyleCatalogItem } from '@univerjs-pro/engine-shape';
+import { SmartArtInsertPositionEnum } from '@univerjs-pro/engine-shape';
+import type { ISmartArtLayoutCatalogItem } from './smart-art-layout-catalog.generated';
+export interface ISmartArtRibbonControlProps {
+    data: ISmartArtData;
+    onOpenTextPane: () => void;
+    onAddNode: (position: SmartArtInsertPositionEnum) => void;
+    onPromoteNode: () => void;
+    onDemoteNode: () => void;
+    onMoveNode: (position: SmartArtInsertPositionEnum.Before | SmartArtInsertPositionEnum.After) => void;
+    onDeleteNode: () => void;
+    onToggleDirection: () => void;
+    onReset: () => void;
+    onSelectLayout: (layout: ISmartArtLayoutCatalogItem) => void;
+    onSelectStyle: (style: ISmartArtQuickStyleCatalogItem) => void;
+    onSelectColor: (style: ISmartArtColorStyleCatalogItem) => void;
+    onConvertToShapes: () => void;
+    canAddAfter?: boolean;
+    canAddBelow?: boolean;
+    canAddAssistant?: boolean;
+    canPromote?: boolean;
+    canDemote?: boolean;
+    canMoveUp?: boolean;
+    canMoveDown?: boolean;
+    canDelete?: boolean;
+}
+type CreateGraphicProps = Pick<ISmartArtRibbonControlProps, 'data' | 'onOpenTextPane' | 'onAddNode' | 'onPromoteNode' | 'onDemoteNode' | 'onMoveNode' | 'onDeleteNode' | 'onToggleDirection' | 'canAddAfter' | 'canAddBelow' | 'canAddAssistant' | 'canPromote' | 'canDemote' | 'canMoveUp' | 'canMoveDown' | 'canDelete'>;
+export declare function SmartArtCreateGraphicRibbonControl(props: CreateGraphicProps): import("react").JSX.Element;
+export declare function SmartArtLayoutRibbonControl(props: Pick<ISmartArtRibbonControlProps, 'data' | 'onSelectLayout'>): import("react").JSX.Element;
+export declare function SmartArtStyleRibbonControl(props: Pick<ISmartArtRibbonControlProps, 'data' | 'onSelectStyle' | 'onSelectColor'>): import("react").JSX.Element;
+export declare function SmartArtResetRibbonControl(props: Pick<ISmartArtRibbonControlProps, 'onReset' | 'onConvertToShapes'>): import("react").JSX.Element;
+export declare function SmartArtRibbonControl(props: ISmartArtRibbonControlProps): import("react").JSX.Element;
+export {};

package/lib/types/views/smart-art/SmartArtTextPane.d.ts

@@ -0,0 +1,14 @@
+import type { ISmartArtData, ISmartArtDataNode, SmartArtOperation } from '@univerjs-pro/engine-shape';
+export interface ISmartArtTextPaneProps {
+    data: ISmartArtData;
+    onOperation: (operation: SmartArtOperation, focusedNodeId?: string) => void;
+    selectedNodeId?: string;
+    onSelectNode?: (nodeId: string | undefined) => void;
+    showToolbar?: boolean;
+}
+export interface ISmartArtTextPaneRow {
+    depth: number;
+    node: ISmartArtDataNode;
+}
+export declare function flattenSmartArtTextPaneRows(data: ISmartArtData): ISmartArtTextPaneRow[];
+export declare function SmartArtTextPane(props: ISmartArtTextPaneProps): import("react").JSX.Element;

package/lib/types/views/smart-art/smart-art-layout-catalog.generated.d.ts

@@ -0,0 +1,35 @@
+export type SmartArtLayoutIconElement = {
+    kind: 'ellipse';
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    transform?: string;
+} | {
+    kind: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    transform?: string;
+} | {
+    kind: 'path';
+    d: string;
+    transform?: string;
+} | {
+    kind: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+    transform?: string;
+};
+export interface ISmartArtLayoutCatalogItem {
+    category: string;
+    iconElements: SmartArtLayoutIconElement[];
+    iconFile: string;
+    id: string;
+    name: string;
+}
+export declare const SMART_ART_LAYOUT_CATALOG: readonly ISmartArtLayoutCatalogItem[];

package/lib/types/views/smart-art/smart-art-layout-gallery-catalog.generated.d.ts

@@ -0,0 +1,5 @@
+import type { ISmartArtLayoutCatalogItem } from './smart-art-layout-catalog.generated';
+export interface ISmartArtLayoutGalleryItem extends ISmartArtLayoutCatalogItem {
+    galleryId: string;
+}
+export declare const SMART_ART_LAYOUT_GALLERY_CATALOG: readonly ISmartArtLayoutGalleryItem[];