import type { IShapeData, IShapePoint, IShapeRelationItem, ShapeGradientTypeEnum, ShapeLineCapEnum, ShapeLineDashEnum, ShapeLineJoinEnum, ShapeLineTypeEnum, ShapeTypeEnum } from '@univerjs-pro/engine-shape'; import type { Injector } from '@univerjs/core'; /** * The shape builder info. It is the return value of the `build()` method. It contains all the information needed to insert a shape. */ export interface IShapeBuilderInfo { /** * @property {string} unitId The workbook id where the shape is located. */ unitId: string; /** * @property {string} subUnitId The worksheet id where the shape is located. */ subUnitId: string; /** * @property {string} shapeId The id of the shape. */ shapeId: string; /** * @property {ShapeTypeEnum} shapeType The type of the shape. */ shapeType: ShapeTypeEnum; /** * @property {IShapeData} [shapeData] The shape data containing fill and stroke styles. */ shapeData?: IShapeData; /** * @property {number} x The x-coordinate of the shape. */ x: number; /** * @property {number} y The y-coordinate of the shape. */ y: number; /** * @property {number} width The width of the shape. */ width: number; /** * @property {number} height The height of the shape. */ height: number; } /** * The shape builder. It is used to create or update a shape in the sheet. * All set methods store properties on the builder instance, and the `build()` method * returns an `IShapeBuilderInfo` object that can be used with `fWorksheet.insertShape()`. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * // Create a rectangle shape at cell B2 with offset * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setPosition(1, 1, 0, 0) * .setWidth(200) * .setHeight(200) * .setShapeSolidFill('#000000') * .setStrokeColor('#000000') * .setStrokeWidth(2) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ export declare class FShape { /** * @property {string} unitId The workbook id where the shape is located. */ unitId: string; /** * @property {string} subUnitId The worksheet id where the shape is located. */ subUnitId: string; /** * @property {string} drawId The id of the shape. */ drawId: string; /** * @property {number} x The x-coordinate of the shape. IF not set, it will default to 100 when building the shape info. */ x: number; /** * @property {number} y The y-coordinate of the shape. If not set, it will default to 100 when building the shape info. */ y: number; /** * @property {number} width The width of the shape in pixels. */ width: number; /** * @property {number} height The height of the shape in pixels. */ height: number; /** * @property {ShapeTypeEnum | undefined} shapeType The type of the shape. */ shapeType: ShapeTypeEnum | undefined; /** * @property {IShapeData} shapeData The shape data containing fill and stroke styles. */ shapeData: IShapeData; private _injector; constructor(unitId: string, subUnitId: string, drawingId: string, injector: Injector); /** * Sets the position, changing where the shape appears on the sheet. anchorRowPos and anchorColPos are 0-indexed. * @description The shape's start anchor position is the top left-hand corner of the shape. The rowOffset and columnOffset are the pixel offsets from the anchor position. * @param {number} anchorRowPos The shape's top side is anchored in this row. * @param {number} anchorColPos The shape's left side is anchored in this column. * @param {number} rowOffset The shape's top left-hand corner is offset by this many pixels from the row. * @param {number} columnOffset The shape's top left-hand corner is offset by this many pixels from the column. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setPosition(2, 5, 20, 20) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setPosition(anchorRowPos: number, anchorColPos: number, rowOffset: number, columnOffset: number): this; /** * Sets the position by absolute pixel coordinates. * @description The shape's start anchor position is the top left-hand corner of the shape. * @param {number} x The x-coordinate of the shape's top left-hand corner. * @param {number} y The y-coordinate of the shape's top left-hand corner. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setAbsolutePosition(100, 200) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setAbsolutePosition(x: number, y: number): 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 {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setShapeType(shapeType: ShapeTypeEnum): this; /** * Sets the solid fill style for the shape. * @param {string} color The fill color, e.g., '#ff0000'. If not specified, it will default to '#156082'.If the opacity is set both, the color string should be hex string or rgb string, the color like 'red' will not work. * @param {number} [opacity] The opacity of the fill (0 to 1). * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setShapeSolidFill('#f0f000', 0.8) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.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 An array of gradient color stops. Each stop has a `position` (0 to 1) and a `color` (e.g., '#ff0000'). * @param {number} [gradientAngle] The angle of the gradient in degrees (e.g., 0 for left-to-right, 90 for top-to-bottom). * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * // Gradient fill with angle and color stops * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setShapeGradientFill( * univerAPI.Enum.ShapeGradientTypeEnum.Linear, * [ * { position: 0, color: '#ff0000' }, * { position: 0.5, color: '#00ff00' }, * { position: 1, color: '#0000ff' }, * ], * 90, * ) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setShapeGradientFill(shapeGradientType: ShapeGradientTypeEnum, colorStops: Array<{ position: number; color: string; }>, gradientAngle?: number): this; /** * Removes the fill from the shape, making it transparent. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setNoneFill() * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setNoneFill(): this; /** * Sets the stroke color of the shape. * @param {string} color The stroke color, e.g., '#ff0000'. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeColor('#ff0000') * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeColor(color: string): this; /** * Sets the stroke width of the shape. * @param {number} width The stroke width in pixels. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeWidth(3) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeWidth(width: number): this; /** * Sets the stroke line dash type of the shape. * @param {ShapeLineDashEnum} lineDashType The line dash type. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineDashType(univerAPI.Enum.ShapeLineDashEnum.Dash) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeLineDashType(lineDashType: ShapeLineDashEnum): this; /** * Sets the stroke line join type of the shape. * @param {ShapeLineJoinEnum} lineJoinType The line join type. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineJoinType(univerAPI.Enum.ShapeLineJoinEnum.Round) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeLineJoinType(lineJoinType: ShapeLineJoinEnum): this; /** * Sets the stroke line cap type of the shape. * @param {ShapeLineCapEnum} lineCapType The line cap type. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineCapType(univerAPI.Enum.ShapeLineCapEnum.Round) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeLineCapType(lineCapType: ShapeLineCapEnum): this; /** * Sets the stroke opacity of the shape. * @param {number} opacity The opacity of the stroke (0 to 1). * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeColor('#ff0000') * .setStrokeOpacity(0.5) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.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 {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setStrokeLineType(univerAPI.Enum.ShapeLineTypeEnum.SolidLine) * .setStrokeColor('#000000') * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setStrokeLineType(lineType: ShapeLineTypeEnum): this; /** * Sets the width of the shape in pixels. * @param {number} width The width of the shape in pixels. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setWidth(300) * .setHeight(200) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setWidth(width: number): this; /** * Sets the height of the shape in pixels. * @param {number} height The height of the shape in pixels. * @returns {FShape} this builder, for chaining. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setWidth(300) * .setHeight(200) * .setPosition(1, 1, 0, 0) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ setHeight(height: number): this; /** * Returns whether this shape is a line/connector shape (e.g., straight connector, bent connector, curved connector). * @returns {boolean} `true` if the shape is a line/connector shape, `false` otherwise. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * for (const shape of shapes) { * console.log(`Shape ${shape.drawId} is line: ${shape.isLineShape()}`); * } * ``` */ isLineShape(): boolean; /** * Returns the connection sites (points where connectors can attach) for this shape. * Connection sites are only available for non-connector (basic) shapes. * The coordinates are in the shape's local coordinate space (relative to shape bounds). * @returns {Array<{ x: number; y: number; index: number; ang: number }>} An array of connection site info. * Each item contains `x`, `y` (local coordinates), `index` (site index), and `ang` (angle in 60000ths of a degree). * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * const basicShape = shapes.find((s) => !s.isLineShape()); * if (basicShape) { * const sites = basicShape.getConnectionSites(); * console.log('Connection sites:', sites); * } * ``` */ getConnectionSites(): Array<{ x: number; y: number; index: number; ang: number; }>; /** * Returns the adjust points (adjust handles) for this shape. * Adjust points allow the user to change the geometry of the shape (e.g., corner radius, arrow size). * The coordinates are in the shape's local coordinate space. * @returns {Array<{ x: number; y: number; adjName: string }>} An array of adjust point info, * each containing `x`, `y` (local coordinates) and `adjName` (the adjust parameter name). * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * const shape = shapes[0]; * const adjustPoints = shape.getAdjustPoints(); * console.log('Adjust points:', adjustPoints); * ``` */ getAdjustPoints(): Array<{ x: number; y: number; adjName: string; }>; /** * Returns the connector line points for a line/connector shape. * The coordinates are in the shape's local coordinate space. * Returns an empty array if this shape is not a connector shape. * @returns {IShapePoint[]} An array of line points `{ x, y }`. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * const lineShape = shapes.find((s) => s.isLineShape()); * if (lineShape) { * const points = lineShape.getConnectorLinePoints(); * console.log('Connector points:', points); * } * ``` */ getConnectorLinePoints(): IShapePoint[]; /** * Returns the start connection info for a connector shape. * If this connector's start point is connected to a basic shape, returns the target shape id and connection site index. * @returns {IShapeRelationItem | null} The start connection info, or `null` if not connected. * * @example * ```ts * const lineShape = fWorksheet.getShapes().find((s) => s.isLineShape()); * if (lineShape) { * const startInfo = lineShape.getStartConnectInfo(); * if (startInfo) { * console.log(`Connected to shape ${startInfo.shapeId} at site ${startInfo.cxnIndex}`); * } * } * ``` */ getStartConnectInfo(): IShapeRelationItem | null; /** * Returns the end connection info for a connector shape. * If this connector's end point is connected to a basic shape, returns the target shape id and connection site index. * @returns {IShapeRelationItem | null} The end connection info, or `null` if not connected. * * @example * ```ts * const lineShape = fWorksheet.getShapes().find((s) => s.isLineShape()); * if (lineShape) { * const endInfo = lineShape.getEndConnectInfo(); * if (endInfo) { * console.log(`Connected to shape ${endInfo.shapeId} at site ${endInfo.cxnIndex}`); * } * } * ``` */ getEndConnectInfo(): IShapeRelationItem | null; /** * Builds the shape builder info. This method does not automatically draw the shape on top of the spreadsheet. * A new shape must be inserted via `fWorksheet.insertShape(shapeInfo)`. * @returns {IShapeBuilderInfo} The shape builder info containing all the accumulated properties. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * * const shapeInfo = fWorksheet.newShape() * .setShapeType(univerAPI.Enum.ShapeTypeEnum.Rect) * .setPosition(1, 1, 0, 0) * .setWidth(300) * .setHeight(200) * .setStrokeColor('#000000') * .setStrokeWidth(2) * .build(); * await fWorksheet.insertShape(shapeInfo); * ``` */ build(): IShapeBuilderInfo; /** * Returns the unique identifier of this shape. * @returns {string} The shape id. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * if (shapes.length > 0) { * console.log('Shape ID:', shapes[0].getShapeId()); * } * ``` */ getShapeId(): string; /** * Returns the type of this shape. * @returns {ShapeTypeEnum | undefined} The shape type, or `undefined` if not set. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * if (shapes.length > 0) { * console.log('Shape type:', shapes[0].getShapeType()); * } * ``` */ getShapeType(): ShapeTypeEnum | undefined; /** * Returns the shape data containing fill and stroke styles. * @returns {IShapeData} The shape data object. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * if (shapes.length > 0) { * const data = shapes[0].getShapeData(); * console.log('Fill:', data.fill); * console.log('Stroke:', data.stroke); * } * ``` */ getShapeData(): IShapeData; /** * Returns the absolute pixel position of this shape's top-left corner. * @returns {{ x: number; y: number }} An object with `x` and `y` pixel coordinates. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * if (shapes.length > 0) { * const pos = shapes[0].getPosition(); * console.log(`Position: (${pos.x}, ${pos.y})`); * } * ``` */ getPosition(): { x: number; y: number; }; /** * Returns the size of this shape in pixels. * @returns {{ width: number; height: number }} An object with `width` and `height` in pixels. * * @example * ```ts * const fWorkbook = univerAPI.getActiveWorkbook(); * const fWorksheet = fWorkbook.getActiveSheet(); * const shapes = fWorksheet.getShapes(); * * if (shapes.length > 0) { * const size = shapes[0].getSize(); * console.log(`Size: ${size.width} x ${size.height}`); * } * ``` */ getSize(): { width: number; height: number; }; }