import type { ShapeTypeEnum } from '@univerjs-pro/engine-shape'; import type { ISlideImageElement, SlideModel } from '@univerjs-pro/slides'; import type { Injector } from '@univerjs/core'; import type { ImageSourceType } from '@univerjs/drawing'; import { FPageElement } from './f-page-element'; export interface ISlideImageBuilderInfo { /** * @property {string} unitId The presentation id where the image is located. */ unitId: string; /** * @property {string} subUnitId The slide id where the image is located. */ subUnitId: string; /** * @property {ISlideImageElement} element The image element data. */ element: ISlideImageElement; } /** * The facade class for a slide image element. * @hideconstructor */ export declare class FImage extends FPageElement { constructor(unitId: string, subUnitId: string, elementId: string, slideModel: SlideModel, injector: Injector); /** * Get the image source. * @returns {string} The image source. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * const images = fSlide.getImages(); * console.log(images[0]?.getSource()); * ``` */ getSource(): string; /** * Update the image source. * @param {string} source The image URL, base64 data URI, or image id. * @param {ImageSourceType} [imageSourceType] The image source type. * @returns {FImage} This image, for chaining. * * @example * ```ts * const image = fSlide.getImages()[0]; * image.setSource('https://example.com/image.png'); * ``` */ setSource(source: string, imageSourceType?: ImageSourceType): this; /** * Set the crop rectangle of the image. * @param {ISlideImageElement['crop']} crop The crop rectangle. * @returns {FImage} This image, for chaining. */ setCrop(crop: ISlideImageElement['crop']): this; /** * Set the preset shape used to clip the image. * @param {ShapeTypeEnum} prstGeom The preset shape type. * @param {Record} [adjustValues] Optional adjust values for the clip shape. * @returns {FImage} This image, for chaining. * * @example * ```ts * const image = fSlide.getImages()[0]; * image.setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect); * ``` */ setClipShape(prstGeom: ShapeTypeEnum, adjustValues?: Record): this; /** * Returns a builder initialized from this image. The builder does not update the slide until it is passed to `fSlide.updateImage()`. * @returns {FImageBuilder} An image builder. */ modify(): FImageBuilder; } /** * The slide image builder. It is used to create or update an image in a slide. * Unlike UI insertion, this builder requires an explicit image source and does not open a file picker. * * @example * ```ts * const fPresentation = univerAPI.getActivePresentation(); * const fSlide = fPresentation.getActiveSlide(); * * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setAbsolutePosition(80, 120) * .setWidth(320) * .setHeight(180) * .build(); * fSlide.insertImage(imageInfo); * ``` */ export declare class FImageBuilder { protected readonly _injector: Injector; /** * @property {string} unitId The presentation id where the image is located. */ unitId: string; /** * @property {string} subUnitId The slide id where the image is located. */ subUnitId: string; /** * @property {string} elementId The image element id. */ elementId: string; /** * @property {number} left The x-coordinate of the image's top-left corner. */ left: number; /** * @property {number} top The y-coordinate of the image's top-left corner. */ top: number; /** * @property {number} width The image width in slide pixels. */ width: number; /** * @property {number} height The image height in slide pixels. */ height: number; /** * @property {number} rotation The image rotation in degrees. */ rotation: number; /** * @property {string} [source] The image URL, base64 data URI, or image id. */ source?: string; /** * @property {ImageSourceType} [imageSourceType] The image source type. */ imageSourceType?: ImageSourceType; /** * @property {ISlideImageElement['crop']} [crop] The crop rectangle of the image. */ crop?: ISlideImageElement['crop']; /** * @property {ShapeTypeEnum} [prstGeom] The preset shape used to clip the image. */ prstGeom?: ShapeTypeEnum; /** * @property {Record} [adjustValues] The adjust values of the image clip shape. */ adjustValues?: Record; constructor(unitId: string, subUnitId: string, _injector: Injector, elementId?: string); /** * Sets the element id of the image. * @param {string} elementId The image element id. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setElementId('image-1') * .setSource('https://example.com/image.png') * .build(); * fSlide.insertImage(imageInfo); * ``` */ setElementId(elementId: string): this; /** * Sets the image source. * @param {string} source The image URL, base64 data URI, or image id. * @param {ImageSourceType} [imageSourceType] The image source type. Which can be found from `ImageSourceType`. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .build(); * fSlide.insertImage(imageInfo); * ``` */ setSource(source: string, imageSourceType?: ImageSourceType): this; /** * Sets the position by absolute slide coordinates. * @param {number} left The x-coordinate of the image's top-left corner. * @param {number} top The y-coordinate of the image's top-left corner. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setAbsolutePosition(80, 120) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setAbsolutePosition(left: number, top: number): this; /** * Sets the position by absolute slide coordinates. * @param {number} left The x-coordinate of the image's top-left corner. * @param {number} top The y-coordinate of the image's top-left corner. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setPosition(80, 120) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setPosition(left: number, top: number): this; /** * Sets the width of the image in slide pixels. * @param {number} width The image width. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setWidth(320) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setWidth(width: number): this; /** * Sets the height of the image in slide pixels. * @param {number} height The image height. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setHeight(180) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setHeight(height: number): this; /** * Sets the image size in slide pixels. * @param {number} width The image width. * @param {number} height The image height. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setSize(320, 180) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setSize(width: number, height: number): this; /** * Sets the rotation of the image in degrees. * @param {number} rotation The rotation in degrees. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setRotation(15) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setRotation(rotation: number): this; /** * Sets the crop rectangle of the image. * @param {ISlideImageElement['crop']} crop The crop rectangle. * @param {number} [crop.left] The left crop offset. * @param {number} [crop.top] The top crop offset. * @param {number} [crop.right] The right crop offset. * @param {number} [crop.bottom] The bottom crop offset. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setCrop({ left: 10, top: 10, right: 10, bottom: 10 }) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setCrop(crop: ISlideImageElement['crop']): this; /** * Sets the preset shape used to clip the image. * @param {ShapeTypeEnum} prstGeom The preset shape type. * @param {Record} [adjustValues] Optional adjust values for the clip shape. * @returns {FImageBuilder} This builder, for chaining. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect) * .build(); * fSlide.insertImage(imageInfo); * ``` */ setClipShape(prstGeom?: ShapeTypeEnum, adjustValues?: Record): this; /** * Builds the image builder info. This method does not automatically draw the image on the slide. * A new image must be inserted via `fSlide.insertImage(imageInfo)`, and an existing image should be updated via `fSlide.updateImage(imageInfo)`. * @returns {ISlideImageBuilderInfo} The image builder info. * * @example * ```ts * const imageInfo = fSlide.newImage() * .setSource('https://example.com/image.png') * .setAbsolutePosition(80, 120) * .setSize(320, 180) * .build(); * fSlide.insertImage(imageInfo); * ``` */ build(): ISlideImageBuilderInfo; }