Skip to Content
InterfacesIFWorksheetLegacy

Interface: IFWorksheetLegacy

Extended by

Methods

addFloatDomToColumnHeader()

addFloatDomToColumnHeader(
   column, 
   layer, 
   domPos, 
   id?): Nullable<{
  dispose: ...;
  id: ...;
}>

Add dom at column header, And FloatDOM is registerComponent(BuiltInUIPart.CONTENT)

Parameters

ParameterTypeDescription
columnnumber
layerIFICanvasFloatDom
domPosIDOMAnchor
id?string

Returns

Nullable<{ dispose: …; id: …; }>

Example

{
const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
const rs = sheet.addFloatDomToColumnHeader(3,
	{
		allowTransform: false,
		componentKey: 'FloatButton', // React comp key registered in ComponentManager
		props: {
			a: 1,
		},
	},
	{width: 100, height: 40, marginX: 0, marginY: 0, horizonOffsetAlign: 'right'},
	'ai-selector' // dom id
)
}

addFloatDomToPosition()

addFloatDomToPosition(layer, id?): Nullable<{
  dispose: ...;
  id: ...;
}>

Add a float dom to position.

Parameters

ParameterTypeDescription
layerIFICanvasFloatDomfloat dom config
id?stringfloat dom id, if not given will be auto generated

Returns

Nullable<{ dispose: …; id: …; }>

float dom id and dispose function

Example

let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
sheet.addFloatDomToPosition({
	allowTransform: false,
	initPosition: {
		startX: 200,
		endX: 400,
		startY: 200,
		endY: 400,
	},
	componentKey: 'ImageDemo',
	props: {
		a: 1,
	},
	data: {
		aa: '128',
	},
});

addFloatDomToRange()

addFloatDomToRange(
   range, 
   layer, 
   domLayout, 
   id?): Nullable<{
  dispose: ...;
  id: ...;
}>

Add dom over range to FloatDOM, And FloatDOM is registerComponent(BuiltInUIPart.CONTENT)

Parameters

ParameterTypeDescription
rangeFRange-
layerIFICanvasFloatDom
domLayoutIDOMAnchor-
id?string

Returns

Nullable<{ dispose: …; id: …; }>

Example

const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
const range = sheet.getRange(0, 0, 3, 3);
univerAPI.getActiveWorkbook().setActiveRange(range);
const {id, dispose } = sheet.addFloatDomToRange(range, {
	allowTransform: false,
	componentKey: 'RangeLoading',
	props: {
		a: 1,
	},
	data: {
		aa: '128',
	},
}, {},
'loadingcover'
)
setTimeout(()=> {
dispose();
}, 2000)
 
// another example-------------------
{
const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
const range = univerAPI.getActiveWorkbook().getActiveSheet().getActiveRange()
const {id, dispose } = sheet.addFloatDomToRange(range, {
	allowTransform: false,
	componentKey: 'FloatButton', // React comp key registered in ComponentManager
	props: {
		a: 1,
	},
	data: {
		aa: '128',
	},
}, {
width: 100,
height: 30,
marginX: '100%', // margin percent to range width, or pixel
marginY: '100%'
},
'AIButton') // dom id
}

deleteImages()

deleteImages(sheetImages): FWorksheet

Parameters

ParameterType
sheetImagesFOverGridImage[]

Returns

FWorksheet

getActiveImages()

getActiveImages(): FOverGridImage[]

Get all images in current sheet.

Returns

FOverGridImage[]

FOverGridImage[]

Example

univerAPI.getActiveWorkbook().getActiveSheet().getImages();

getImageById()

getImageById(id): FOverGridImage

Get image by drawing id

Parameters

ParameterTypeDescription
idstringThe drawing id of the image

Returns

FOverGridImage

FOverGridImage | null

Example

univerAPI.getActiveWorkbook().getActiveSheet().getImageById('xxxx');

getImages()

getImages(): FOverGridImage[]

Get all images in current sheet.

Returns

FOverGridImage[]

FOverGridImage[]

Example

univerAPI.getActiveWorkbook().getActiveSheet().getImages();

insertImage()

Call Signature

insertImage(url): Promise<boolean>

Insert an image to the sheet

Parameters
ParameterTypeDescription
urlstringThe image url
Returns

Promise<boolean>

true if the image is inserted successfully

Example
const activeSpreadsheet = univerAPI.getActiveWorkbook();
const activeSheet = activeSpreadsheet.getActiveSheet();
activeSheet.insertImage('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', 5, 5, 0, 0);

Call Signature

insertImage(
   url, 
   column, 
row): Promise<boolean>
Parameters
ParameterType
urlstring
columnnumber
rownumber
Returns

Promise<boolean>

Call Signature

insertImage(
   url, 
   column, 
   row, 
   offsetX, 
offsetY): Promise<boolean>
Parameters
ParameterType
urlstring
columnnumber
rownumber
offsetXnumber
offsetYnumber
Returns

Promise<boolean>

Call Signature

insertImage(url): Promise<boolean>
Parameters
ParameterType
urlIFBlobSource
Returns

Promise<boolean>

Call Signature

insertImage(
   url, 
   column, 
row): Promise<boolean>
Parameters
ParameterType
urlIFBlobSource
columnnumber
rownumber
Returns

Promise<boolean>

Call Signature

insertImage(
   url, 
   column, 
   row, 
   offsetX, 
offsetY): Promise<boolean>
Parameters
ParameterType
urlIFBlobSource
columnnumber
rownumber
offsetXnumber
offsetYnumber
Returns

Promise<boolean>

Call Signature

insertImage(
   url, 
   column, 
   row, 
   offsetX, 
offsetY): Promise<boolean>
Parameters
ParameterType
urlstring | IFBlobSource
columnnumber
rownumber
offsetXnumber
offsetYnumber
Returns

Promise<boolean>

insertImages()

insertImages(sheetImages): FWorksheet

Insert images to the sheet

Parameters

ParameterTypeDescription
sheetImagesISheetImage[]The images to insert

Returns

FWorksheet

true if the image is inserted successfully

Example

 const activeSpreadsheet = univerAPI.getActiveWorkbook();
 const activeSheet = activeSpreadsheet.getActiveSheet();
 const imageBuilder = activeSheet.newOverGridImage();
 const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(500).setHeight(300).build();
 activeSheet.insertImages([param]);
 const image = activeSheet.getImageById(param.drawingId);
 console.log(image);
 setTimeout(async ()=>{
  const builder = image.toBuilder();
  const param = await builder.setHeight(50).setWidth(100).build();
  activeSheet.updateImages([param]);
 }, 4000);
 
***
 
### newOverGridImage()
 
```ts
newOverGridImage(): FOverGridImageBuilder

Create a new over grid image builder.

Returns

FOverGridImageBuilder

The builder

Example

// create a new over grid image builder.
const builder = univerAPI.newOverGridImage();

onImageChanged()

onImageChanged(callback): IDisposable

Hook when a image is changed.

Parameters

ParameterTypeDescription
callback(images) => voidThe callback function when a image is changed.

Returns

IDisposable

onImageDeleted()

onImageDeleted(callback): IDisposable

Hook when a image is deleted.

Parameters

ParameterTypeDescription
callback(images) => voidThe callback function when a image is deleted.

Returns

IDisposable

onImageInserted()

onImageInserted(callback): IDisposable

Hook when a image is inserted.

Parameters

ParameterTypeDescription
callback(images) => voidThe callback function when a image is inserted.

Returns

IDisposable

updateImages()

updateImages(sheetImages): FWorksheet

Update images to the sheet

Parameters

ParameterTypeDescription
sheetImagesISheetImage[]The images to insert

Returns

FWorksheet

true if the image is inserted successfully

Example

 const activeSpreadsheet = univerAPI.getActiveWorkbook();
 const activeSheet = activeSpreadsheet.getActiveSheet();
 const imageBuilder = activeSheet.newOverGridImage();
 const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(500).setHeight(300).build();
 activeSheet.insertImages([param]);
 const image = activeSheet.getImageById(param.drawingId);
 console.log(image);
 setTimeout(async ()=>{
  const builder = image.toBuilder();
  const param = await builder.setHeight(50).setWidth(100).build();
  activeSheet.updateImages([param]);
 }, 4000);
IFTextFinderIFacadeClearOptions