@univerjs/docs-drawing 1.0.0-alpha.3 → 1.0.0-alpha.5

package/lib/es/facade.js

@@ -0,0 +1,558 @@
+import { ArrangeTypeEnum, BooleanNumber, DrawingTypeEnum, ICommandService, IImageIoService, IURLImageService, ImageSourceType, ObjectRelativeFromH, ObjectRelativeFromV, WrapTextType, generateRandomId } from "@univerjs/core";
+import { buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
+import { InsertDocDrawingCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, TextWrappingStyle, UpdateDocDrawingWrappingStyleCommand, UpdateDrawingDocTransformCommand, WRAPPING_STYLE_TO_LAYOUT_TYPE } from "@univerjs/docs-drawing";
+import { FDocument } from "@univerjs/docs/facade";
+import { DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, getImageSize } from "@univerjs/drawing";
+import { FEnum } from "@univerjs/core/facade";
+
+//#region src/facade/f-document-image.ts
+/**
+* Facade API for an image in a document.
+* @hideconstructor
+*/
+var FDocumentImage = class {
+	constructor(_document, _imageId, _injector) {
+		this._document = _document;
+		this._imageId = _imageId;
+		this._injector = _injector;
+	}
+	/**
+	* Gets the id of the document containing the image.
+	* @returns {string} The document unit id.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getUnitId());
+	* }
+	* ```
+	*/
+	getUnitId() {
+		return this._document.getId();
+	}
+	/**
+	* Gets the drawing id of the image.
+	* @returns {string} The drawing id.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getId());
+	* }
+	* ```
+	*/
+	getId() {
+		return this._imageId;
+	}
+	/**
+	* Gets the image source supplied at insertion time.
+	* @returns {string | undefined} The image source, or `undefined` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getSource());
+	* }
+	* ```
+	*/
+	getSource() {
+		var _this$getImageData;
+		return (_this$getImageData = this.getImageData()) === null || _this$getImageData === void 0 ? void 0 : _this$getImageData.source;
+	}
+	/**
+	* Gets the image source type supplied at insertion time.
+	* @returns {ImageSourceType | undefined} The image source type, or `undefined` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getSourceType());
+	* }
+	* ```
+	*/
+	getSourceType() {
+		var _this$getImageData2;
+		return (_this$getImageData2 = this.getImageData()) === null || _this$getImageData2 === void 0 ? void 0 : _this$getImageData2.imageSourceType;
+	}
+	/**
+	* Gets the current image size.
+	* @returns {ISize | null} The width and height in pixels, or `null` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getSize());
+	* }
+	* ```
+	*/
+	getSize() {
+		var _this$getImageData$do, _this$getImageData3;
+		return (_this$getImageData$do = (_this$getImageData3 = this.getImageData()) === null || _this$getImageData3 === void 0 ? void 0 : _this$getImageData3.docTransform.size) !== null && _this$getImageData$do !== void 0 ? _this$getImageData$do : null;
+	}
+	/**
+	* Gets the current clockwise rotation angle.
+	* @returns {number | undefined} The rotation angle in degrees, or `undefined` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getAngle());
+	* }
+	* ```
+	*/
+	getAngle() {
+		var _this$getImageData4;
+		return (_this$getImageData4 = this.getImageData()) === null || _this$getImageData4 === void 0 ? void 0 : _this$getImageData4.docTransform.angle;
+	}
+	/**
+	* Gets the current horizontal position.
+	* @returns {IObjectPositionH | null} The horizontal position, or `null` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getPositionH());
+	* }
+	* ```
+	*/
+	getPositionH() {
+		var _this$getImageData$do2, _this$getImageData5;
+		return (_this$getImageData$do2 = (_this$getImageData5 = this.getImageData()) === null || _this$getImageData5 === void 0 ? void 0 : _this$getImageData5.docTransform.positionH) !== null && _this$getImageData$do2 !== void 0 ? _this$getImageData$do2 : null;
+	}
+	/**
+	* Gets the current vertical position.
+	* @returns {IObjectPositionV | null} The vertical position, or `null` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getPositionV());
+	* }
+	* ```
+	*/
+	getPositionV() {
+		var _this$getImageData$do3, _this$getImageData6;
+		return (_this$getImageData$do3 = (_this$getImageData6 = this.getImageData()) === null || _this$getImageData6 === void 0 ? void 0 : _this$getImageData6.docTransform.positionV) !== null && _this$getImageData$do3 !== void 0 ? _this$getImageData$do3 : null;
+	}
+	/**
+	* Gets the current raw document image data.
+	* @returns {IDocImage | null} The image data, or `null` when the image no longer exists.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   console.log(image.getImageData());
+	* }
+	* ```
+	*/
+	getImageData() {
+		var _this$_document$getDo;
+		const drawing = (_this$_document$getDo = this._document.getDocumentDataModel().getDrawings()) === null || _this$_document$getDo === void 0 ? void 0 : _this$_document$getDo[this._imageId];
+		if (!drawing || drawing.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return null;
+		return drawing;
+	}
+	/**
+	* Sets the image size.
+	* @param {number} width The width in pixels.
+	* @param {number} height The height in pixels.
+	* @returns {boolean} `true` when the update command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setSize(400, 300);
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setSize(width, height) {
+		return this._updateTransform("size", {
+			width,
+			height
+		});
+	}
+	/**
+	* Sets the clockwise rotation angle.
+	* @param {number} angle The rotation angle in degrees.
+	* @returns {boolean} `true` when the update command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setRotate(45);
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setRotate(angle) {
+		return this._updateTransform("angle", angle);
+	}
+	/**
+	* Sets the horizontal position of the image.
+	* Inline images are positioned by their document placeholder, so this has a visible effect only when the image
+	* wrapping style is not `TextWrappingStyle.INLINE`.
+	* @param {IObjectPositionH} positionH The horizontal position relative to the document.
+	* @returns {boolean} `true` when the update command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setPositionH({
+	*     relativeFrom: univerAPI.Enum.DocsImageRelativeFromH.MARGIN,
+	*     posOffset: 100
+	*   });
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setPositionH(positionH) {
+		return this._updateTransform("positionH", positionH);
+	}
+	/**
+	* Sets the vertical position of the image.
+	* Inline images are positioned by their document placeholder, so this has a visible effect only when the image
+	* wrapping style is not `TextWrappingStyle.INLINE`.
+	* @param {IObjectPositionV} positionV The vertical position relative to the document.
+	* @returns {boolean} `true` when the update command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setPositionV({
+	*     relativeFrom: univerAPI.Enum.DocsImageRelativeFromV.MARGIN,
+	*     posOffset: 100
+	*   });
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setPositionV(positionV) {
+		return this._updateTransform("positionV", positionV);
+	}
+	/**
+	* Sets the image wrapping style.
+	* When switching from inline to a floating style in a UI environment, the current visual position is preserved.
+	* @param {TextWrappingStyle} wrappingStyle The wrapping style to apply.
+	* @returns {boolean} `true` when the update command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setWrappingStyle(univerAPI.Enum.DocsImageWrappingStyle.WRAP_SQUARE);
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setWrappingStyle(wrappingStyle) {
+		const image = this.getImageData();
+		if (!image) return false;
+		return this._injector.get(ICommandService).syncExecuteCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+			unitId: this.getUnitId(),
+			subUnitId: this.getUnitId(),
+			drawings: [image],
+			wrappingStyle
+		});
+	}
+	/**
+	* Moves the image forward by one level in the drawing order.
+	* @returns {boolean} `true` when the arrange command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setForward();
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setForward() {
+		return this._arrange(ArrangeTypeEnum.forward);
+	}
+	/**
+	* Moves the image backward by one level in the drawing order.
+	* @returns {boolean} `true` when the arrange command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setBackward();
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setBackward() {
+		return this._arrange(ArrangeTypeEnum.backward);
+	}
+	/**
+	* Moves the image to the back of the drawing order.
+	* @returns {boolean} `true` when the arrange command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setBack();
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setBack() {
+		return this._arrange(ArrangeTypeEnum.back);
+	}
+	/**
+	* Moves the image to the front of the drawing order.
+	* @returns {boolean} `true` when the arrange command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.setFront();
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	setFront() {
+		return this._arrange(ArrangeTypeEnum.front);
+	}
+	/**
+	* Removes the image and its document placeholder.
+	* @returns {boolean} `true` when the remove command succeeds; otherwise, `false`.
+	* @example
+	* ```ts
+	* const fDocument = univerAPI.getActiveDocument();
+	* const image = fDocument.getImages()[0];
+	*
+	* if (image) {
+	*   const success = image.remove();
+	*   console.log(success);
+	* }
+	* ```
+	*/
+	remove() {
+		const image = this.getImageData();
+		const textRange = this._getTextRange();
+		if (!image || !textRange) return false;
+		return this._injector.get(ICommandService).syncExecuteCommand(RemoveDocDrawingCommand.id, {
+			unitId: this.getUnitId(),
+			drawings: [{
+				unitId: this.getUnitId(),
+				subUnitId: this.getUnitId(),
+				drawingId: this._imageId,
+				drawingType: DrawingTypeEnum.DRAWING_IMAGE
+			}],
+			textRange
+		});
+	}
+	_updateTransform(key, value) {
+		return this._injector.get(ICommandService).syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId: this.getUnitId(),
+			subUnitId: this.getUnitId(),
+			drawings: [{
+				drawingId: this._imageId,
+				key,
+				value
+			}]
+		});
+	}
+	_arrange(arrangeType) {
+		return this._injector.get(ICommandService).syncExecuteCommand(SetDocDrawingArrangeCommand.id, {
+			unitId: this.getUnitId(),
+			subUnitId: this.getUnitId(),
+			drawingIds: [this._imageId],
+			arrangeType
+		});
+	}
+	_getTextRange() {
+		const { body, headers = {}, footers = {} } = this._document.getDocumentDataModel().getSnapshot();
+		const segments = [
+			{
+				segmentId: "",
+				body
+			},
+			...Object.entries(headers).map(([segmentId, header]) => ({
+				segmentId,
+				body: header.body
+			})),
+			...Object.entries(footers).map(([segmentId, footer]) => ({
+				segmentId,
+				body: footer.body
+			}))
+		];
+		for (const { segmentId, body } of segments) {
+			var _body$customBlocks;
+			const customBlock = body === null || body === void 0 || (_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.find((block) => block.blockId === this._imageId);
+			if (customBlock) return {
+				startOffset: customBlock.startIndex,
+				endOffset: customBlock.startIndex,
+				collapsed: true,
+				segmentId
+			};
+		}
+		return null;
+	}
+};
+
+//#endregion
+//#region src/facade/f-document.ts
+var FDocumentImageMixin = class extends FDocument {
+	async insertImage(options) {
+		var _options$wrappingStyl, _options$angle, _options$positionH, _options$positionV;
+		const unitId = this.getId();
+		const imageId = generateRandomId(6);
+		const size = resolveImageSize(await this._getIntrinsicSize(options.source, options.imageSourceType), options);
+		const defaultTransform = buildDocTransform(size.width, size.height);
+		const wrappingStyle = (_options$wrappingStyl = options.wrappingStyle) !== null && _options$wrappingStyl !== void 0 ? _options$wrappingStyl : TextWrappingStyle.INLINE;
+		const docTransform = {
+			...defaultTransform,
+			angle: (_options$angle = options.angle) !== null && _options$angle !== void 0 ? _options$angle : defaultTransform.angle,
+			positionH: (_options$positionH = options.positionH) !== null && _options$positionH !== void 0 ? _options$positionH : defaultTransform.positionH,
+			positionV: (_options$positionV = options.positionV) !== null && _options$positionV !== void 0 ? _options$positionV : defaultTransform.positionV
+		};
+		const transform = docDrawingPositionToTransform(docTransform);
+		const drawing = {
+			unitId,
+			subUnitId: unitId,
+			drawingId: imageId,
+			drawingType: DrawingTypeEnum.DRAWING_IMAGE,
+			imageSourceType: options.imageSourceType,
+			source: options.source,
+			transform,
+			docTransform,
+			behindDoc: wrappingStyle === TextWrappingStyle.BEHIND_TEXT ? BooleanNumber.TRUE : BooleanNumber.FALSE,
+			title: "",
+			description: "",
+			layoutType: WRAPPING_STYLE_TO_LAYOUT_TYPE[wrappingStyle],
+			wrapText: WrapTextType.BOTH_SIDES,
+			distB: 0,
+			distL: 0,
+			distR: 0,
+			distT: 0
+		};
+		if (!this._injector.get(ICommandService).syncExecuteCommand(InsertDocDrawingCommand.id, {
+			unitId,
+			drawings: [drawing],
+			textRange: options.textRange
+		})) return null;
+		return this._injector.createInstance(FDocumentImage, this, imageId, this._injector);
+	}
+	getImage(imageId) {
+		var _this$getDocumentData;
+		const drawing = (_this$getDocumentData = this.getDocumentDataModel().getDrawings()) === null || _this$getDocumentData === void 0 ? void 0 : _this$getDocumentData[imageId];
+		if (!drawing || drawing.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return null;
+		return this._injector.createInstance(FDocumentImage, this, imageId, this._injector);
+	}
+	getImages() {
+		var _documentDataModel$ge, _documentDataModel$ge2;
+		const documentDataModel = this.getDocumentDataModel();
+		const drawings = (_documentDataModel$ge = documentDataModel.getDrawings()) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : {};
+		return ((_documentDataModel$ge2 = documentDataModel.getDrawingsOrder()) !== null && _documentDataModel$ge2 !== void 0 ? _documentDataModel$ge2 : Object.keys(drawings)).filter((drawingId) => {
+			var _drawings$drawingId;
+			return ((_drawings$drawingId = drawings[drawingId]) === null || _drawings$drawingId === void 0 ? void 0 : _drawings$drawingId.drawingType) === DrawingTypeEnum.DRAWING_IMAGE;
+		}).map((drawingId) => this._injector.createInstance(FDocumentImage, this, drawingId, this._injector));
+	}
+	async _getIntrinsicSize(source, imageSourceType) {
+		const imageIoService = this._injector.has(IImageIoService) ? this._injector.get(IImageIoService) : null;
+		let resolvedSource = source;
+		if (imageSourceType === ImageSourceType.UUID && imageIoService) resolvedSource = await imageIoService.getImage(source);
+		else if (imageSourceType === ImageSourceType.URL && this._injector.has(IURLImageService)) try {
+			resolvedSource = await this._injector.get(IURLImageService).getImage(source);
+		} catch {
+			resolvedSource = source;
+		}
+		const { width, height, image } = await getImageSize(resolvedSource);
+		imageIoService === null || imageIoService === void 0 || imageIoService.addImageSourceCache(source, imageSourceType, image);
+		return {
+			width,
+			height
+		};
+	}
+};
+function resolveImageSize(intrinsicSize, options) {
+	const { width: intrinsicWidth, height: intrinsicHeight } = intrinsicSize;
+	if (options.width != null && options.height != null) return {
+		width: options.width,
+		height: options.height
+	};
+	if (options.width != null) return {
+		width: options.width,
+		height: intrinsicHeight * options.width / intrinsicWidth
+	};
+	if (options.height != null) return {
+		width: intrinsicWidth * options.height / intrinsicHeight,
+		height: options.height
+	};
+	const scale = Math.min(1, DRAWING_IMAGE_WIDTH_LIMIT / intrinsicWidth, DRAWING_IMAGE_HEIGHT_LIMIT / intrinsicHeight);
+	return {
+		width: intrinsicWidth * scale,
+		height: intrinsicHeight * scale
+	};
+}
+FDocument.extend(FDocumentImageMixin);
+
+//#endregion
+//#region src/facade/f-enum.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var FDocumentImageEnumMixin = class extends FEnum {
+	get DocsImageWrappingStyle() {
+		return TextWrappingStyle;
+	}
+	get DocsImageRelativeFromH() {
+		return ObjectRelativeFromH;
+	}
+	get DocsImageRelativeFromV() {
+		return ObjectRelativeFromV;
+	}
+};
+FEnum.extend(FDocumentImageEnumMixin);
+
+//#endregion
+export { FDocumentImage };