@univerjs/sheets-drawing-ui 0.20.1 → 0.21.0

package/lib/es/locale/zh-TW.js

@@ -1 +1,53 @@
-const e={sheetImage:{title:`圖片`,upload:{float:`浮動圖片`,cell:`儲存格圖片`},panel:{title:`編圖`},save:{title:`儲存儲存格圖片`,menuLabel:`儲存儲存格圖片`,imageCount:`圖片數量`,fileNameConfig:`檔案名稱`,useRowCol:`使用儲存格地址 (A1, B2...)`,useColumnValue:`使用某欄的值`,selectColumn:`選擇欄`,cancel:`取消`,confirm:`儲存`,saving:`儲存中...`,error:`儲存儲存格圖片失敗`}},"image-popup":{replace:`替換`,delete:`刪除`,edit:`編輯`,crop:`裁切`,reset:`重置大小`,flipH:`水平翻轉`,flipV:`垂直翻轉`},"drawing-anchor":{title:`錨點屬性`,both:`與儲存格一起移動和調整大小`,position:`移動但不調整大小與儲存格`,none:`不要移動或調整大小與儲存格`},"update-status":{exceedMaxSize:`圖片大小超過限制, 限制為{0}M`,invalidImageType:`圖片類型錯誤`,exceedMaxCount:`圖片只能一次上傳{0}張`,invalidImage:`無效圖片`},"cell-image":{pasteTitle:`貼上為儲存格圖片`,pasteContent:`貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上`,pasteError:`此儲存格不支援儲存格圖片複製貼上`}};export{e as default};
+//#region src/locale/zh-TW.ts
+const locale = {
+	sheetImage: {
+		title: "圖片",
+		upload: {
+			float: "浮動圖片",
+			cell: "儲存格圖片"
+		},
+		panel: { title: "編圖" },
+		save: {
+			title: "儲存儲存格圖片",
+			menuLabel: "儲存儲存格圖片",
+			imageCount: "圖片數量",
+			fileNameConfig: "檔案名稱",
+			useRowCol: "使用儲存格地址 (A1, B2...)",
+			useColumnValue: "使用某欄的值",
+			selectColumn: "選擇欄",
+			cancel: "取消",
+			confirm: "儲存",
+			saving: "儲存中...",
+			error: "儲存儲存格圖片失敗"
+		}
+	},
+	"image-popup": {
+		replace: "替換",
+		delete: "刪除",
+		edit: "編輯",
+		crop: "裁切",
+		reset: "重置大小",
+		flipH: "水平翻轉",
+		flipV: "垂直翻轉"
+	},
+	"drawing-anchor": {
+		title: "錨點屬性",
+		both: "與儲存格一起移動和調整大小",
+		position: "移動但不調整大小與儲存格",
+		none: "不要移動或調整大小與儲存格"
+	},
+	"update-status": {
+		exceedMaxSize: "圖片大小超過限制, 限制為{0}M",
+		invalidImageType: "圖片類型錯誤",
+		exceedMaxCount: "圖片只能一次上傳{0}張",
+		invalidImage: "無效圖片"
+	},
+	"cell-image": {
+		pasteTitle: "貼上為儲存格圖片",
+		pasteContent: "貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上",
+		pasteError: "此儲存格不支援儲存格圖片複製貼上"
+	}
+};
+
+//#endregion
+export { locale as default };

package/lib/facade.js

@@ -1 +1,464 @@
-import{SheetSkeletonService as e}from"@univerjs/sheets";import{ISheetDrawingService as t,InsertSheetDrawingCommand as n,RemoveSheetDrawingCommand as r,SetSheetDrawingCommand as i,transformToAxisAlignPosition as a,transformToDrawingPosition as o}from"@univerjs/sheets-drawing";import{FileNamePart as s,IBatchSaveImagesService as c,SheetCanvasFloatDomManagerService as l,SheetDrawingUpdateController as u}from"@univerjs/sheets-drawing-ui";import{transformComponentKey as d}from"@univerjs/sheets-ui/facade";import{FRange as f,FWorksheet as p}from"@univerjs/sheets/facade";import{ComponentManager as m}from"@univerjs/ui";import{FEventName as h,FUniver as g}from"@univerjs/core/facade";import{CanceledError as _,DrawingTypeEnum as v,ICommandService as y,IURLImageService as b,IUniverInstanceService as x,UniverInstanceType as S}from"@univerjs/core";import{IDrawingManagerService as C}from"@univerjs/drawing";import{IRenderManagerService as w,getCurrentTypeOfRenderer as T}from"@univerjs/engine-render";var E=class extends p{getFloatDomById(e){let n=this._injector.get(l).getFloatDomInfo(e);if(!n)return null;let{unitId:r,subUnitId:i}=n,{rect:a}=n,{left:o=0,top:s=0,width:c=0,height:u=0,flipX:d=!1,flipY:f=!1,angle:p=0,skewX:m=0,skewY:h=0}=a.getState(),g=this._injector.get(t).getDrawingByParam({drawingId:n.id,unitId:r,subUnitId:i});return g?{position:{left:o,top:s,width:c,height:u,flipX:d,flipY:f,angle:p,skewX:m,skewY:h},componentKey:g.componentKey,allowTransform:g.allowTransform,data:g.data,id:n.id}:null}getAllFloatDoms(){let e=this._injector.get(l),n=this._workbook.getUnitId(),r=this._worksheet.getSheetId();return Array.from(e.getFloatDomsBySubUnitId(n,r).values()).map(e=>{let{rect:i}=e,a=this._injector.get(t).getDrawingByParam({drawingId:e.id,unitId:n,subUnitId:r}),{left:o,top:s,width:c,height:l,flipX:u,flipY:d,angle:f,skewX:p,skewY:m}=i.getState();return{position:{left:o,top:s,width:c,height:l,flipX:u,flipY:d,angle:f,skewX:p,skewY:m},componentKey:a.componentKey,allowTransform:a.allowTransform,data:a.data,id:e.id}})}updateFloatDom(n,r){var s,c;let u=this._injector.get(e),d=this._injector.get(l).getFloatDomInfo(n);if(!d)return this;let{unitId:f,subUnitId:p}=d,m=u.getSkeleton(f,p);if(!m)return this;let h=this._injector.get(t).getDrawingByParam({unitId:f,subUnitId:p,drawingId:n}),g={...h,componentKey:r.componentKey||h.componentKey,allowTransform:r.allowTransform===void 0?h.allowTransform:r.allowTransform,data:r.data||h.data,sheetTransform:r.position?(s=o(r.position,m))==null?h.sheetTransform:s:h.sheetTransform,transform:{...h.transform,...r.position},axisAlignSheetTransform:r.position?(c=a(r.position,m))==null?h.sheetTransform:c:h.sheetTransform};if(!this._commandService.syncExecuteCommand(i.id,{unitId:f,subUnitId:p,drawings:[g]}))throw Error(`updateFloatDom failed`);return this}batchUpdateFloatDoms(n){let r=this._injector.get(l),s=this._injector.get(t),c=this._injector.get(e),u=[];for(let e of n){var d,f;let t=r.getFloatDomInfo(e.id);if(!t)continue;let{unitId:n,subUnitId:i}=t,l=c.getSkeleton(n,i);if(!l)continue;let p=s.getDrawingByParam({unitId:n,subUnitId:i,drawingId:e.id});if(!p)continue;let m={...p,componentKey:e.config.componentKey||p.componentKey,allowTransform:e.config.allowTransform===void 0?p.allowTransform:e.config.allowTransform,data:e.config.data||p.data,sheetTransform:e.config.position?(d=o(e.config.position,l))==null?p.sheetTransform:d:p.sheetTransform,transform:{...p.transform,...e.config.position},axisAlignSheetTransform:e.config.position?(f=a(e.config.position,l))==null?p.sheetTransform:f:p.sheetTransform};u.push(m)}if(u.length>0){let e=this._workbook.getUnitId(),t=this._worksheet.getSheetId();if(!this._commandService.syncExecuteCommand(i.id,{unitId:e,subUnitId:t,drawings:u}))throw Error(`batchUpdateFloatDoms failed`)}return this}removeFloatDom(e){let n=this._injector.get(l).getFloatDomInfo(e);if(!n)return this;let{unitId:i,subUnitId:a}=n,o=this._injector.get(t).getDrawingByParam({unitId:i,subUnitId:a,drawingId:e});if(!o)return this;if(!this._commandService.syncExecuteCommand(r.id,{unitId:i,drawings:[o]}))throw Error(`removeFloatDom failed`);return this}addFloatDomToPosition(e,t){let n=this._workbook.getUnitId(),r=this._worksheet.getSheetId(),{key:i,disposableCollection:a}=d(e,this._injector.get(m)),o=this._injector.get(l).addFloatDomToPosition({...e,componentKey:i,unitId:n,subUnitId:r},t);return o?(a.add(o.dispose),{id:o.id,dispose:()=>{a.dispose(),o.dispose()}}):(a.dispose(),null)}addFloatDomToRange(e,t,n,r){let i=this._workbook.getUnitId(),a=this._worksheet.getSheetId(),{key:o,disposableCollection:s}=d(t,this._injector.get(m)),c=this._injector.get(l).addFloatDomToRange(e.getRange(),{...t,componentKey:o,unitId:i,subUnitId:a},n,r);return c?(s.add(c.dispose),{id:c.id,dispose:()=>{s.dispose(),c.dispose()}}):(s.dispose(),null)}addFloatDomToColumnHeader(e,t,n,r){let i=this._workbook.getUnitId(),a=this._worksheet.getSheetId(),{key:o,disposableCollection:s}=d(t,this._injector.get(m)),c=this._injector.get(l).addFloatDomToColumnHeader(e,{...t,componentKey:o,unitId:i,subUnitId:a},n,r);return c?(s.add(c.dispose),{id:c.id,dispose:()=>{s.dispose(),c.dispose()}}):(s.dispose(),null)}async saveCellImagesAsync(e,t){var n;let r=this._injector.get(c),i=this._fWorkbook.getId(),a=this.getSheetId(),o=t?t.map(e=>e.getRange()):[this._worksheet.getCellMatrix().getDataRange()],l=r.getCellImagesFromRanges(i,a,o);if(l.length===0)return!1;if(l.length===1)try{return await r.downloadSingleImage(l[0]),!0}catch(e){return console.error(`Failed to download image:`,e),!1}let u=[],d=(n=e==null?void 0:e.useCellAddress)==null?!0:n,f=e==null?void 0:e.useColumnIndex;d&&u.push(s.CELL_ADDRESS),f!==void 0&&u.push(s.COLUMN_VALUE),u.length===0&&u.push(s.CELL_ADDRESS);try{return await r.saveImagesWithContext(l,{fileNameParts:u,columnIndex:f},i,a),!0}catch(e){return console.error(`Failed to save images:`,e),!1}}};p.extend(E);var D=class extends h{get BeforeFloatDomAdd(){return`BeforeFloatDomAdd`}get FloatDomAdded(){return`FloatDomAdded`}get BeforeFloatDomUpdate(){return`BeforeFloatDomUpdate`}get FloatDomUpdated(){return`FloatDomUpdated`}get BeforeFloatDomDelete(){return`BeforeFloatDomDelete`}get FloatDomDeleted(){return`FloatDomDeleted`}};h.extend(D);var O=class extends g{_initialize(e){let t=e.get(y);this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomAdd,()=>t.beforeCommandExecuted(e=>{if(e.id!==n.id)return;let t=e.params,r=this.getActiveWorkbook();if(r==null||t==null)return;let{drawings:i}=t,a=i.filter(e=>e.drawingType===v.DRAWING_DOM);if(a.length===0)return;let o={workbook:r,drawings:a};if(this.fireEvent(this.Event.BeforeFloatDomAdd,o),o.cancel)throw new _}))),this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomAdded,()=>t.onCommandExecuted(e=>{if(e.id!==n.id)return;let t=e.params,r=this.getActiveWorkbook();if(r==null||t==null)return;let{drawings:i}=t,a=i.filter(e=>e.drawingType===v.DRAWING_DOM);if(a.length===0)return;let o={workbook:r,drawings:a};this.fireEvent(this.Event.FloatDomAdded,o)}))),this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomUpdate,()=>t.beforeCommandExecuted(t=>{if(t.id!==i.id)return;let n=t.params,r=this.getActiveWorkbook();if(r==null||n==null)return;let{drawings:a}=n,o=e.get(C),s=[];if(a.forEach(e=>{let t=o.getDrawingByParam(e);(t==null?void 0:t.drawingType)===v.DRAWING_DOM&&s.push(t)}),s.length===0)return;let c={workbook:r,drawings:s};if(this.fireEvent(this.Event.BeforeFloatDomUpdate,c),c.cancel)throw o.updateNotification(a),new _}))),this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomUpdated,()=>t.onCommandExecuted(t=>{if(t.id!==i.id)return;let n=t.params,r=this.getActiveWorkbook();if(r==null||n==null)return;let{drawings:a}=n,o=e.get(C),s=[];if(a.forEach(e=>{let t=o.getDrawingByParam(e);(t==null?void 0:t.drawingType)===v.DRAWING_DOM&&s.push(t)}),s.length===0)return;let c={workbook:r,drawings:s};this.fireEvent(this.Event.FloatDomUpdated,c)}))),this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomDelete,()=>t.beforeCommandExecuted(t=>{if(t.id!==r.id)return;let n=t.params,i=this.getActiveWorkbook();if(i==null||n==null)return;let a=e.get(C),{drawings:o}=n,s=o.map(e=>a.getDrawingByParam(e)).filter(e=>(e==null?void 0:e.drawingType)===v.DRAWING_DOM);if(s.length===0)return;let c={workbook:i,drawings:s};if(this.fireEvent(this.Event.BeforeFloatDomDelete,c),c.cancel)throw new _}))),this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomDeleted,()=>t.onCommandExecuted(e=>{if(e.id!==r.id)return;let t=e.params,n=this.getActiveWorkbook();if(n==null||t==null)return;let{drawings:i}=t,a={workbook:n,drawings:i.filter(e=>e.drawingType===v.DRAWING_DOM).map(e=>e.drawingId)};this.fireEvent(this.Event.FloatDomDeleted,a)})))}registerURLImageDownloader(e){return this._injector.get(b).registerURLImageDownloader(e)}};g.extend(O);var k=class extends f{async insertCellImageAsync(e){var t;let n=this._injector.get(w),r=(t=T(S.UNIVER_SHEET,this._injector.get(x),n))==null?void 0:t.with(u);if(!r)return!1;let i={unitId:this._workbook.getUnitId(),subUnitId:this._worksheet.getSheetId(),row:this.getRow(),col:this.getColumn()};return typeof e==`string`?r.insertCellImageByUrl(e,i):r.insertCellImageByFile(e,i)}async saveCellImagesAsync(e){var t;let n=this._injector.get(c),r=this._workbook.getUnitId(),i=this._worksheet.getSheetId(),a=this.getRange(),o=n.getCellImagesFromRanges(r,i,[a]);if(o.length===0)return!1;if(o.length===1)try{return await n.downloadSingleImage(o[0]),!0}catch(e){return console.error(`Failed to download image:`,e),!1}let l=[],u=(t=e==null?void 0:e.useCellAddress)==null?!0:t,d=e==null?void 0:e.useColumnIndex;u&&l.push(s.CELL_ADDRESS),d!==void 0&&l.push(s.COLUMN_VALUE),l.length===0&&l.push(s.CELL_ADDRESS);try{return await n.saveImagesWithContext(o,{fileNameParts:l,columnIndex:d},r,i),!0}catch(e){return console.error(`Failed to save images:`,e),!1}}};f.extend(k);export{};
+import { SheetSkeletonService } from "@univerjs/sheets";
+import { ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetSheetDrawingCommand, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
+import { FileNamePart, IBatchSaveImagesService, SheetCanvasFloatDomManagerService, SheetDrawingUpdateController } from "@univerjs/sheets-drawing-ui";
+import { transformComponentKey } from "@univerjs/sheets-ui/facade";
+import { FRange, FWorksheet } from "@univerjs/sheets/facade";
+import { ComponentManager } from "@univerjs/ui";
+import { FEventName, FUniver } from "@univerjs/core/facade";
+import { CanceledError, DrawingTypeEnum, ICommandService, IURLImageService, IUniverInstanceService, UniverInstanceType } from "@univerjs/core";
+import { IDrawingManagerService } from "@univerjs/drawing";
+import { IRenderManagerService, getCurrentTypeOfRenderer } from "@univerjs/engine-render";
+
+//#region src/facade/f-worksheet.ts
+var FWorksheetDrawingUIMixin = class extends FWorksheet {
+	getFloatDomById(id) {
+		const info = this._injector.get(SheetCanvasFloatDomManagerService).getFloatDomInfo(id);
+		if (!info) return null;
+		const { unitId, subUnitId } = info;
+		const { rect } = info;
+		const { left = 0, top = 0, width = 0, height = 0, flipX = false, flipY = false, angle = 0, skewX = 0, skewY = 0 } = rect.getState();
+		const drawingParm = this._injector.get(ISheetDrawingService).getDrawingByParam({
+			drawingId: info.id,
+			unitId,
+			subUnitId
+		});
+		if (!drawingParm) return null;
+		return {
+			position: {
+				left,
+				top,
+				width,
+				height,
+				flipX,
+				flipY,
+				angle,
+				skewX,
+				skewY
+			},
+			componentKey: drawingParm.componentKey,
+			allowTransform: drawingParm.allowTransform,
+			data: drawingParm.data,
+			id: info.id
+		};
+	}
+	getAllFloatDoms() {
+		const floatDomService = this._injector.get(SheetCanvasFloatDomManagerService);
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		return Array.from(floatDomService.getFloatDomsBySubUnitId(unitId, subUnitId).values()).map((info) => {
+			const { rect } = info;
+			const drawingParm = this._injector.get(ISheetDrawingService).getDrawingByParam({
+				drawingId: info.id,
+				unitId,
+				subUnitId
+			});
+			const { left, top, width, height, flipX, flipY, angle, skewX, skewY } = rect.getState();
+			return {
+				position: {
+					left,
+					top,
+					width,
+					height,
+					flipX,
+					flipY,
+					angle,
+					skewX,
+					skewY
+				},
+				componentKey: drawingParm.componentKey,
+				allowTransform: drawingParm.allowTransform,
+				data: drawingParm.data,
+				id: info.id
+			};
+		});
+	}
+	updateFloatDom(id, config) {
+		var _transformToDrawingPo, _transformToAxisAlign;
+		const sheetSkeletonService = this._injector.get(SheetSkeletonService);
+		const info = this._injector.get(SheetCanvasFloatDomManagerService).getFloatDomInfo(id);
+		if (!info) return this;
+		const { unitId, subUnitId } = info;
+		const skeleton = sheetSkeletonService.getSkeleton(unitId, subUnitId);
+		if (!skeleton) return this;
+		const drawingParm = this._injector.get(ISheetDrawingService).getDrawingByParam({
+			unitId,
+			subUnitId,
+			drawingId: id
+		});
+		const newParam = {
+			...drawingParm,
+			componentKey: config.componentKey || drawingParm.componentKey,
+			allowTransform: config.allowTransform !== void 0 ? config.allowTransform : drawingParm.allowTransform,
+			data: config.data || drawingParm.data,
+			sheetTransform: config.position ? (_transformToDrawingPo = transformToDrawingPosition(config.position, skeleton)) !== null && _transformToDrawingPo !== void 0 ? _transformToDrawingPo : drawingParm.sheetTransform : drawingParm.sheetTransform,
+			transform: {
+				...drawingParm.transform,
+				...config.position
+			},
+			axisAlignSheetTransform: config.position ? (_transformToAxisAlign = transformToAxisAlignPosition(config.position, skeleton)) !== null && _transformToAxisAlign !== void 0 ? _transformToAxisAlign : drawingParm.sheetTransform : drawingParm.sheetTransform
+		};
+		if (!this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId,
+			subUnitId,
+			drawings: [newParam]
+		})) throw new Error("updateFloatDom failed");
+		return this;
+	}
+	batchUpdateFloatDoms(updates) {
+		const floatDomService = this._injector.get(SheetCanvasFloatDomManagerService);
+		const drawingService = this._injector.get(ISheetDrawingService);
+		const sheetSkeletonService = this._injector.get(SheetSkeletonService);
+		const drawings = [];
+		for (const update of updates) {
+			var _transformToDrawingPo2, _transformToAxisAlign2;
+			const info = floatDomService.getFloatDomInfo(update.id);
+			if (!info) continue;
+			const { unitId, subUnitId } = info;
+			const skeleton = sheetSkeletonService.getSkeleton(unitId, subUnitId);
+			if (!skeleton) continue;
+			const drawingParm = drawingService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId: update.id
+			});
+			if (!drawingParm) continue;
+			const newParam = {
+				...drawingParm,
+				componentKey: update.config.componentKey || drawingParm.componentKey,
+				allowTransform: update.config.allowTransform !== void 0 ? update.config.allowTransform : drawingParm.allowTransform,
+				data: update.config.data || drawingParm.data,
+				sheetTransform: update.config.position ? (_transformToDrawingPo2 = transformToDrawingPosition(update.config.position, skeleton)) !== null && _transformToDrawingPo2 !== void 0 ? _transformToDrawingPo2 : drawingParm.sheetTransform : drawingParm.sheetTransform,
+				transform: {
+					...drawingParm.transform,
+					...update.config.position
+				},
+				axisAlignSheetTransform: update.config.position ? (_transformToAxisAlign2 = transformToAxisAlignPosition(update.config.position, skeleton)) !== null && _transformToAxisAlign2 !== void 0 ? _transformToAxisAlign2 : drawingParm.sheetTransform : drawingParm.sheetTransform
+			};
+			drawings.push(newParam);
+		}
+		if (drawings.length > 0) {
+			const unitId = this._workbook.getUnitId();
+			const subUnitId = this._worksheet.getSheetId();
+			if (!this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+				unitId,
+				subUnitId,
+				drawings
+			})) throw new Error("batchUpdateFloatDoms failed");
+		}
+		return this;
+	}
+	removeFloatDom(id) {
+		const info = this._injector.get(SheetCanvasFloatDomManagerService).getFloatDomInfo(id);
+		if (!info) return this;
+		const { unitId, subUnitId } = info;
+		const drawing = this._injector.get(ISheetDrawingService).getDrawingByParam({
+			unitId,
+			subUnitId,
+			drawingId: id
+		});
+		if (!drawing) return this;
+		if (!this._commandService.syncExecuteCommand(RemoveSheetDrawingCommand.id, {
+			unitId,
+			drawings: [drawing]
+		})) throw new Error("removeFloatDom failed");
+		return this;
+	}
+	addFloatDomToPosition(layer, id) {
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		const { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager));
+		const res = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToPosition({
+			...layer,
+			componentKey: key,
+			unitId,
+			subUnitId
+		}, id);
+		if (res) {
+			disposableCollection.add(res.dispose);
+			return {
+				id: res.id,
+				dispose: () => {
+					disposableCollection.dispose();
+					res.dispose();
+				}
+			};
+		}
+		disposableCollection.dispose();
+		return null;
+	}
+	addFloatDomToRange(fRange, layer, domLayout, id) {
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		const { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager));
+		const res = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToRange(fRange.getRange(), {
+			...layer,
+			componentKey: key,
+			unitId,
+			subUnitId
+		}, domLayout, id);
+		if (res) {
+			disposableCollection.add(res.dispose);
+			return {
+				id: res.id,
+				dispose: () => {
+					disposableCollection.dispose();
+					res.dispose();
+				}
+			};
+		}
+		disposableCollection.dispose();
+		return null;
+	}
+	addFloatDomToColumnHeader(column, layer, domLayout, id) {
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		const { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager));
+		const domRangeDispose = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToColumnHeader(column, {
+			...layer,
+			componentKey: key,
+			unitId,
+			subUnitId
+		}, domLayout, id);
+		if (domRangeDispose) {
+			disposableCollection.add(domRangeDispose.dispose);
+			return {
+				id: domRangeDispose.id,
+				dispose: () => {
+					disposableCollection.dispose();
+					domRangeDispose.dispose();
+				}
+			};
+		}
+		disposableCollection.dispose();
+		return null;
+	}
+	async saveCellImagesAsync(options, ranges) {
+		var _options$useCellAddre;
+		const batchSaveService = this._injector.get(IBatchSaveImagesService);
+		const unitId = this._fWorkbook.getId();
+		const subUnitId = this.getSheetId();
+		const iRanges = ranges ? ranges.map((r) => r.getRange()) : [this._worksheet.getCellMatrix().getDataRange()];
+		const images = batchSaveService.getCellImagesFromRanges(unitId, subUnitId, iRanges);
+		if (images.length === 0) return false;
+		if (images.length === 1) try {
+			await batchSaveService.downloadSingleImage(images[0]);
+			return true;
+		} catch (error) {
+			console.error("Failed to download image:", error);
+			return false;
+		}
+		const fileNameParts = [];
+		const useCellAddress = (_options$useCellAddre = options === null || options === void 0 ? void 0 : options.useCellAddress) !== null && _options$useCellAddre !== void 0 ? _options$useCellAddre : true;
+		const useColumnIndex = options === null || options === void 0 ? void 0 : options.useColumnIndex;
+		if (useCellAddress) fileNameParts.push(FileNamePart.CELL_ADDRESS);
+		if (useColumnIndex !== void 0) fileNameParts.push(FileNamePart.COLUMN_VALUE);
+		if (fileNameParts.length === 0) fileNameParts.push(FileNamePart.CELL_ADDRESS);
+		try {
+			await batchSaveService.saveImagesWithContext(images, {
+				fileNameParts,
+				columnIndex: useColumnIndex
+			}, unitId, subUnitId);
+			return true;
+		} catch (error) {
+			console.error("Failed to save images:", error);
+			return false;
+		}
+	}
+};
+FWorksheet.extend(FWorksheetDrawingUIMixin);
+
+//#endregion
+//#region src/facade/f-event.ts
+var FSheetsDrawingUIEventNameMixin = class extends FEventName {
+	get BeforeFloatDomAdd() {
+		return "BeforeFloatDomAdd";
+	}
+	get FloatDomAdded() {
+		return "FloatDomAdded";
+	}
+	get BeforeFloatDomUpdate() {
+		return "BeforeFloatDomUpdate";
+	}
+	get FloatDomUpdated() {
+		return "FloatDomUpdated";
+	}
+	get BeforeFloatDomDelete() {
+		return "BeforeFloatDomDelete";
+	}
+	get FloatDomDeleted() {
+		return "FloatDomDeleted";
+	}
+};
+FEventName.extend(FSheetsDrawingUIEventNameMixin);
+
+//#endregion
+//#region src/facade/f-univer.ts
+/**
+* @ignore
+*/
+var FUniverSheetsDrawingUIMixin = class extends FUniver {
+	/**
+	* @ignore
+	*/
+	_initialize(injector) {
+		const commandService = injector.get(ICommandService);
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomAdd, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== InsertSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const floatDomDrawings = drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_DOM);
+			if (floatDomDrawings.length === 0) return;
+			const eventParams = {
+				workbook,
+				drawings: floatDomDrawings
+			};
+			this.fireEvent(this.Event.BeforeFloatDomAdd, eventParams);
+			if (eventParams.cancel) throw new CanceledError();
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomAdded, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== InsertSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const floatDomDrawings = drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_DOM);
+			if (floatDomDrawings.length === 0) return;
+			const eventParams = {
+				workbook,
+				drawings: floatDomDrawings
+			};
+			this.fireEvent(this.Event.FloatDomAdded, eventParams);
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomUpdate, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const floatDomDrawings = [];
+			drawings.forEach((drawing) => {
+				const dom = drawingManagerService.getDrawingByParam(drawing);
+				if ((dom === null || dom === void 0 ? void 0 : dom.drawingType) === DrawingTypeEnum.DRAWING_DOM) floatDomDrawings.push(dom);
+			});
+			if (floatDomDrawings.length === 0) return;
+			const eventParams = {
+				workbook,
+				drawings: floatDomDrawings
+			};
+			this.fireEvent(this.Event.BeforeFloatDomUpdate, eventParams);
+			if (eventParams.cancel) {
+				drawingManagerService.updateNotification(drawings);
+				throw new CanceledError();
+			}
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomUpdated, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const floatDomDrawings = [];
+			drawings.forEach((drawing) => {
+				const dom = drawingManagerService.getDrawingByParam(drawing);
+				if ((dom === null || dom === void 0 ? void 0 : dom.drawingType) === DrawingTypeEnum.DRAWING_DOM) floatDomDrawings.push(dom);
+			});
+			if (floatDomDrawings.length === 0) return;
+			const eventParams = {
+				workbook,
+				drawings: floatDomDrawings
+			};
+			this.fireEvent(this.Event.FloatDomUpdated, eventParams);
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeFloatDomDelete, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== RemoveSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const { drawings } = params;
+			const floatDomDrawings = drawings.map((drawing) => drawingManagerService.getDrawingByParam(drawing)).filter((drawing) => (drawing === null || drawing === void 0 ? void 0 : drawing.drawingType) === DrawingTypeEnum.DRAWING_DOM);
+			if (floatDomDrawings.length === 0) return;
+			const eventParams = {
+				workbook,
+				drawings: floatDomDrawings
+			};
+			this.fireEvent(this.Event.BeforeFloatDomDelete, eventParams);
+			if (eventParams.cancel) throw new CanceledError();
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.FloatDomDeleted, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== RemoveSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const eventParams = {
+				workbook,
+				drawings: drawings.filter((i) => i.drawingType === DrawingTypeEnum.DRAWING_DOM).map((i) => i.drawingId)
+			};
+			this.fireEvent(this.Event.FloatDomDeleted, eventParams);
+		})));
+	}
+	registerURLImageDownloader(downloader) {
+		return this._injector.get(IURLImageService).registerURLImageDownloader(downloader);
+	}
+};
+FUniver.extend(FUniverSheetsDrawingUIMixin);
+
+//#endregion
+//#region src/facade/f-range.ts
+var FRangeSheetsDrawingUIMixin = class extends FRange {
+	async insertCellImageAsync(file) {
+		var _getCurrentTypeOfRend;
+		const renderManagerService = this._injector.get(IRenderManagerService);
+		const controller = (_getCurrentTypeOfRend = getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SHEET, this._injector.get(IUniverInstanceService), renderManagerService)) === null || _getCurrentTypeOfRend === void 0 ? void 0 : _getCurrentTypeOfRend.with(SheetDrawingUpdateController);
+		if (!controller) return false;
+		const location = {
+			unitId: this._workbook.getUnitId(),
+			subUnitId: this._worksheet.getSheetId(),
+			row: this.getRow(),
+			col: this.getColumn()
+		};
+		if (typeof file === "string") return controller.insertCellImageByUrl(file, location);
+		else return controller.insertCellImageByFile(file, location);
+	}
+	async saveCellImagesAsync(options) {
+		var _options$useCellAddre;
+		const batchSaveService = this._injector.get(IBatchSaveImagesService);
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		const range = this.getRange();
+		const images = batchSaveService.getCellImagesFromRanges(unitId, subUnitId, [range]);
+		if (images.length === 0) return false;
+		if (images.length === 1) try {
+			await batchSaveService.downloadSingleImage(images[0]);
+			return true;
+		} catch (error) {
+			console.error("Failed to download image:", error);
+			return false;
+		}
+		const fileNameParts = [];
+		const useCellAddress = (_options$useCellAddre = options === null || options === void 0 ? void 0 : options.useCellAddress) !== null && _options$useCellAddre !== void 0 ? _options$useCellAddre : true;
+		const useColumnIndex = options === null || options === void 0 ? void 0 : options.useColumnIndex;
+		if (useCellAddress) fileNameParts.push(FileNamePart.CELL_ADDRESS);
+		if (useColumnIndex !== void 0) fileNameParts.push(FileNamePart.COLUMN_VALUE);
+		if (fileNameParts.length === 0) fileNameParts.push(FileNamePart.CELL_ADDRESS);
+		try {
+			await batchSaveService.saveImagesWithContext(images, {
+				fileNameParts,
+				columnIndex: useColumnIndex
+			}, unitId, subUnitId);
+			return true;
+		} catch (error) {
+			console.error("Failed to save images:", error);
+			return false;
+		}
+	}
+};
+FRange.extend(FRangeSheetsDrawingUIMixin);
+
+//#endregion
+export {  };