import type { IBasicShapeData, ImageFillModeEnum, ImageSourceTypeEnum, IShapeLineStyle, IShapeText, ShapeGradientTypeEnum, ShapeLineCapEnum, ShapeLineDashEnum, ShapeLineJoinEnum, ShapeLineTypeEnum, ShapeTypeEnum } from '@univerjs-pro/engine-shape'; import type { ISlideShapeElement, ISlideTextStyle, SlideModel } from '@univerjs-pro/slides'; import type { Injector } from '@univerjs/core'; import { FPageElement } from './f-page-element'; type SlideShapeFill = NonNullable; export interface ISlideShapeImageFillOptions { imageFillMode?: ImageFillModeEnum; imageOpacity?: number; imageRotateWithShape?: boolean; stretchFillRect?: SlideShapeFill['stretchFillRect']; srcRect?: SlideShapeFill['srcRect']; imageTile?: SlideShapeFill['imageTile']; } export interface ISlideShapeBuilderInfo { /** * @property {string} unitId The presentation id where the shape is located. */ unitId: string; /** * @property {string} subUnitId The slide id where the shape is located. */ subUnitId: string; /** * @property {ISlideShapeElement} element The shape element data. */ element: ISlideShapeElement; } /** * The facade class for a slide shape element. * @hideconstructor */ export declare class FShape extends FPageElement { constructor(unitId: string, subUnitId: string, elementId: string, slideModel: SlideModel, injector: Injector); /** * Get the shape type of this shape. * @returns {ShapeTypeEnum} The shape type. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * const shapes = fSlide.getShapes(); * console.log(shapes[0]?.getShapeType()); * ``` */ getShapeType(): ShapeTypeEnum; /** * Get the shape data of this shape. * @returns {IBasicShapeData} The shape data. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * const shape = fSlide.getShapes()[0]; * console.log(shape.getShapeData().fill); * ``` */ getShapeData(): IBasicShapeData; /** * Update the shape data of this shape. * @param {IBasicShapeData} shapeData The new shape data. * @returns {FShape} This shape, for chaining. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * const shape = fSlide.getShapes()[0]; * shape.setShapeData({ * ...shape.getShapeData(), * fill: { fillType: univerAPI.Enum.ShapeFillEnum.SolidFill, color: '#ff0000' }, * }); * ``` */ setShapeData(shapeData: IBasicShapeData): this; /** * Returns a builder initialized from this shape. The builder does not update the slide until it is passed to `fSlide.updateShape()`. * @returns {FShapeBuilder} A shape builder. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * const shape = fSlide.getShapes()[0]; * const shapeInfo = shape.modify() * .setStrokeColor('#ff0000') * .setStrokeWidth(3) * .build(); * fSlide.updateShape(shapeInfo); * ``` */ modify(): FShapeBuilder; } /** * The slide shape builder. It is used to create or update a shape in a slide. * All set methods store properties on the builder instance, and `build()` returns * an `ISlideShapeBuilderInfo` object that can be used with `fSlide.insertShape()` or `fSlide.updateShape()`. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setAbsolutePosition(100, 120) * .setWidth(240) * .setHeight(120) * .setShapeSolidFill('#4f90ff') * .setStrokeColor('#1a5fe0') * .setStrokeWidth(2) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ export declare class FShapeBuilder { protected readonly _injector: Injector; /** * @property {string} unitId The presentation id where the shape is located. */ unitId: string; /** * @property {string} subUnitId The slide id where the shape is located. */ subUnitId: string; /** * @property {string} elementId The shape element id. */ elementId: string; /** * @property {number} left The x-coordinate of the shape's top-left corner. */ left: number; /** * @property {number} top The y-coordinate of the shape's top-left corner. */ top: number; /** * @property {number} width The shape width in slide pixels. */ width: number; /** * @property {number} height The shape height in slide pixels. */ height: number; /** * @property {number} rotation The shape rotation in degrees. */ rotation: number; /** * @property {IBasicShapeData} shapeData The shape data containing shape type, fill, stroke, text, and adjust values. */ shapeData: IBasicShapeData; constructor(unitId: string, subUnitId: string, _injector: Injector, elementId?: string); /** * Sets the element id of the shape. * @param {string} elementId The shape element id. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setElementId('shape-1') * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setElementId(elementId: string): this; /** * Sets the type of the shape. * @param {ShapeTypeEnum} shapeType The type of shape to create. Which can be found from `univerAPI.Enum.ShapeTypeEnum`. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.RoundRect) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setShapeType(shapeType: ShapeTypeEnum): this; /** * Sets all shape data on the builder. * @param {IBasicShapeData} shapeData The shape data containing type, fill, stroke, text, and adjust values. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeData({ * shapeType: univerAPI.Enum.ShapeTypeEnum.Rect, * fill: { fillType: univerAPI.Enum.ShapeFillEnum.SolidFill, color: '#ff0000' }, * }) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setShapeData(shapeData: IBasicShapeData): this; /** * Sets the position by absolute slide coordinates. * @param {number} left The x-coordinate of the shape's top-left corner. * @param {number} top The y-coordinate of the shape's top-left corner. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setAbsolutePosition(80, 120) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setAbsolutePosition(left: number, top: number): this; /** * Sets the position by absolute slide coordinates. * @param {number} left The x-coordinate of the shape's top-left corner. * @param {number} top The y-coordinate of the shape's top-left corner. * @returns {FShapeBuilder} This builder, for chaining. */ setPosition(left: number, top: number): this; /** * Sets the width of the shape in slide pixels. * @param {number} width The width of the shape. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setWidth(240) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setWidth(width: number): this; /** * Sets the height of the shape in slide pixels. * @param {number} height The height of the shape. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setHeight(120) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setHeight(height: number): this; /** * Sets the size of the shape in slide pixels. * @param {number} width The width of the shape. * @param {number} height The height of the shape. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setSize(240, 120) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setSize(width: number, height: number): this; /** * Sets the rotation of the shape in degrees. * @param {number} rotation The rotation in degrees. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setRotation(45) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setRotation(rotation: number): this; /** * Sets the solid fill style for the shape. * @param {string} color The fill color, e.g. `'#ff0000'`. * @param {number} [opacity] The opacity of the fill, from 0 to 1. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setShapeSolidFill('#ff0000', 0.8) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setShapeSolidFill(color: string, opacity?: number): this; /** * Sets the gradient fill style for the shape. * @param {ShapeGradientTypeEnum} shapeGradientType The gradient type. Which can be found from `univerAPI.Enum.ShapeGradientTypeEnum`. * @param {Array<{ position: number; color: string }>} colorStops The gradient color stops. * @param {number} colorStops.position The color stop position, from 0 to 1. * @param {string} colorStops.color The color stop color. * @param {number} [gradientAngle] The angle of the gradient in degrees. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setShapeGradientFill( * univerAPI.Enum.ShapeGradientTypeEnum.Linear, * [ * { position: 0, color: '#ff0000' }, * { position: 1, color: '#0000ff' }, * ], * 90 * ) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setShapeGradientFill(shapeGradientType: ShapeGradientTypeEnum, colorStops: Array<{ position: number; color: string; }>, gradientAngle?: number): this; /** * Sets an image as the shape fill. * @param {string} source The image URL, base64 data URI, or image id. * @param {ImageSourceTypeEnum} [imageSourceType] The image source type. * @param {ISlideShapeImageFillOptions} [options] Optional image fill layout options. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Hexagon) * .setImageFill('https://example.com/image.png', univerAPI.Enum.ImageSourceTypeEnum.URL) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setImageFill(source: string, imageSourceType?: ImageSourceTypeEnum, options?: ISlideShapeImageFillOptions): this; /** * Removes the fill from the shape. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setNoneFill() * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setNoneFill(): this; /** * Sets the stroke color of the shape. * @param {string} color The stroke color. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeColor('#000000') * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeColor(color: string): this; /** * Sets the stroke width of the shape. * @param {number} width The stroke width. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeWidth(2) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeWidth(width: number): this; /** * Sets the stroke dash type of the shape. * @param {ShapeLineDashEnum} lineDashType The line dash type. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineDashType(univerAPI.Enum.ShapeLineDashEnum.Dash) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeLineDashType(lineDashType: ShapeLineDashEnum): this; /** * Sets the stroke line join type of the shape. * @param {ShapeLineJoinEnum} lineJoinType The line join type. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineJoinType(univerAPI.Enum.ShapeLineJoinEnum.Round) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeLineJoinType(lineJoinType: ShapeLineJoinEnum): this; /** * Sets the stroke line cap type of the shape. * @param {ShapeLineCapEnum} lineCapType The line cap type. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Line) * .setStrokeLineCapType(univerAPI.Enum.ShapeLineCapEnum.Round) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeLineCapType(lineCapType: ShapeLineCapEnum): this; /** * Sets the stroke opacity of the shape. * @param {number} opacity The opacity of the stroke, from 0 to 1. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeColor('#000000') * .setStrokeOpacity(0.5) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeOpacity(opacity: number): this; /** * Sets the stroke line type of the shape. * @param {ShapeLineTypeEnum} lineType The line type. Which can be found from `univerAPI.Enum.ShapeLineTypeEnum`. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineType(univerAPI.Enum.ShapeLineTypeEnum.SolidLine) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ setStrokeLineType(lineType: ShapeLineTypeEnum): this; /** * Configures this builder as a text box. * @param {boolean} [horizontal] Whether the text box uses horizontal text. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const textBoxInfo = fSlide.newShape() * .asTextBox() * .setText('Quarterly Review') * .setAbsolutePosition(80, 80) * .build(); * fSlide.insertShape(textBoxInfo); * ``` */ asTextBox(horizontal?: boolean): this; /** * Sets text content for a text box shape. * @param {string} text The text content. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const textBoxInfo = fSlide.newTextBox() * .setText('Quarterly Review') * .build(); * fSlide.insertShape(textBoxInfo); * ``` */ setText(text: string): this; /** * Sets text style for a text box shape. * @param {ISlideTextStyle} textStyle The text style. * @param {string} [textStyle.color] The text color. * @param {string} [textStyle.fontFamily] The text font family. * @param {number} [textStyle.fontSize] The text font size. * @param {boolean} [textStyle.bold] Whether the text is bold. * @param {boolean} [textStyle.italic] Whether the text is italic. * @param {boolean} [textStyle.underline] Whether the text is underlined. * @returns {FShapeBuilder} This builder, for chaining. * * @example * ```ts * const textBoxInfo = fSlide.newTextBox() * .setText('Quarterly Review') * .setTextStyle({ fontSize: 24, color: '#111827', bold: true }) * .build(); * fSlide.insertShape(textBoxInfo); * ``` */ setTextStyle(textStyle: ISlideTextStyle): this; /** * Builds the shape builder info. This method does not automatically draw the shape on the slide. * A new shape must be inserted via `fSlide.insertShape(shapeInfo)`, and an existing shape should be updated via `fSlide.updateShape(shapeInfo)`. * @returns {ISlideShapeBuilderInfo} The shape builder info. * * @example * ```ts * const shapeInfo = fSlide.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setAbsolutePosition(80, 120) * .build(); * fSlide.insertShape(shapeInfo); * ``` */ build(): ISlideShapeBuilderInfo; protected _ensureStroke(): IShapeLineStyle; protected _ensureShapeText(): IShapeText; } export {};