Skip to content

Commit 58d8551

Browse files
lumixrakulumixraku
authored
fix: pointer event (#4456)
1 parent 88a0c86 commit 58d8551

File tree

5 files changed

+351
-17
lines changed

5 files changed

+351
-17
lines changed

‎packages/sheets-ui/src/facade/f-event.ts‎

Lines changed: 122 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,17 @@ export interface IBeforeSheetEditEndEventParams extends IEventBase {
133133
isConfirm: boolean;
134134
}
135135

136-
interface IFSheetsUIEventNameMixin {
136+
export const CellFEventName = {
137+
CellClicked: 'CellClicked',
138+
CellPointerDown: 'CellPointerDown',
139+
CellPointerUp: 'CellPointerUp',
140+
CellPointerMove: 'CellPointerMove',
141+
CellHover: 'CellHover',
142+
DragOver: 'DragOver',
143+
Drop: 'Drop',
144+
} as const;
145+
146+
export interface IFSheetsUIEventNameMixin {
137147
/**
138148
* Trigger this event before the clipboard content changes.
139149
* Type of the event parameter is {@link IBeforeClipboardChangeParam}
@@ -243,6 +253,66 @@ interface IFSheetsUIEventNameMixin {
243253
* ```
244254
*/
245255
readonly SheetEditEnded: 'SheetEditEnded';
256+
257+
/**
258+
* Event fired when a cell is clicked
259+
* @example
260+
* ```ts
261+
* univerAPI.getActiveWorkbook().addEvent('CellClicked', (p)=> console.log(p));
262+
* ```
263+
*/
264+
readonly CellClicked: 'CellClicked';
265+
/**
266+
* Event fired when a cell is pointer down
267+
* @example
268+
* ```ts
269+
* univerAPI.getActiveWorkbook().addEvent('CellPointerDown', (p)=> console.log(p));
270+
* ```
271+
*/
272+
readonly CellPointerDown: 'CellPointerDown';
273+
274+
/**
275+
* Event fired when a cell is pointer up
276+
* @example
277+
* ```ts
278+
* univerAPI.getActiveWorkbook().addEvent('CellPointerUp', (p)=> console.log(p));
279+
* ```
280+
*/
281+
readonly CellPointerUp: 'CellPointerUp';
282+
283+
/**
284+
* Event fired when a cell is hovered
285+
* @example
286+
* ```ts
287+
* univerAPI.getActiveWorkbook().addEvent('CellHover', (p)=> console.log(p));
288+
* ```
289+
*/
290+
readonly CellHover: 'CellHover';
291+
/**
292+
* Event fired when move on spreadsheet cells
293+
* @example
294+
* ```ts
295+
* univerAPI.getActiveWorkbook().addEvent('CellPointerMove', (p)=> console.log(p));
296+
* ```
297+
*/
298+
readonly CellPointerMove: 'CellPointerMove';
299+
/**
300+
* Event fired when drag over spreadsheet cells
301+
* @example
302+
* ```ts
303+
* univerAPI.getActiveWorkbook().addEvent('DragOver', (p)=> console.log(p));
304+
* ```
305+
*/
306+
readonly DragOver: 'DragOver';
307+
308+
/**
309+
* Event fired when drop on spreadsheet cells
310+
* @example
311+
* ```ts
312+
* univerAPI.getActiveWorkbook().addEvent('Drop', (p)=> console.log(p));
313+
* ```
314+
*/
315+
readonly Drop: 'Drop';
246316
}
247317

248318
export class FSheetsUIEventName extends FEventName implements IFSheetsUIEventNameMixin {
@@ -281,8 +351,46 @@ export class FSheetsUIEventName extends FEventName implements IFSheetsUIEventNam
281351
override get SheetEditEnded(): 'SheetEditEnded' {
282352
return 'SheetEditEnded';
283353
}
354+
355+
override get CellClicked(): 'CellClicked' {
356+
return CellFEventName.CellClicked;
357+
}
358+
359+
override get CellHover(): 'CellHover' {
360+
return CellFEventName.CellHover;
361+
}
362+
363+
override get CellPointerDown(): 'CellPointerDown' {
364+
return CellFEventName.CellPointerDown;
365+
}
366+
367+
override get CellPointerUp(): 'CellPointerUp' {
368+
return CellFEventName.CellPointerUp;
369+
}
370+
371+
override get CellPointerMove(): 'CellPointerMove' {
372+
return CellFEventName.CellPointerMove;
373+
}
374+
375+
override get DragOver(): 'DragOver' {
376+
return 'DragOver' as const;
377+
}
378+
379+
override get Drop(): 'Drop' {
380+
return 'Drop' as const;
381+
}
284382
}
285383

384+
export interface IUIEventBase extends IEventBase {
385+
/**
386+
* The workbook instance currently being operated on. {@link FWorkbook}
387+
*/
388+
workbook: FWorkbook;
389+
/**
390+
* The worksheet instance currently being operated on. {@link FWorksheet}
391+
*/
392+
worksheet: FWorksheet;
393+
}
286394
export interface IBeforeClipboardChangeParam extends IEventBase {
287395
/**
288396
* The workbook instance currently being operated on. {@link FWorkbook}
@@ -333,7 +441,11 @@ export interface IBeforeClipboardPasteParam extends IEventBase {
333441

334442
export type IClipboardPastedParam = IBeforeClipboardPasteParam;
335443

336-
interface IFSheetsUIEventParamConfig {
444+
export interface ICellEventParam extends IUIEventBase {
445+
row: number;
446+
column: number;
447+
}
448+
export interface IFSheetsUIEventParamConfig {
337449
BeforeClipboardChange: IBeforeClipboardChangeParam;
338450
ClipboardChanged: IClipboardChangedParam;
339451
BeforeClipboardPaste: IBeforeClipboardPasteParam;
@@ -344,6 +456,14 @@ interface IFSheetsUIEventParamConfig {
344456
SheetEditChanging: ISheetEditChangingEventParams;
345457
BeforeSheetEditEnd: IBeforeSheetEditEndEventParams;
346458
SheetEditEnded: ISheetEditEndedEventParams;
459+
460+
CellClicked: ICellEventParam;
461+
CellHover: ICellEventParam;
462+
CellPointerDown: ICellEventParam;
463+
CellPointerUp: ICellEventParam;
464+
CellPointerMove: ICellEventParam;
465+
Drop: ICellEventParam;
466+
DragOver: ICellEventParam;
347467
}
348468

349469
FEventName.extend(FSheetsUIEventName);

‎packages/sheets-ui/src/facade/f-workbook.ts‎

Lines changed: 111 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
*/
1616

1717
import type { IDisposable, Nullable } from '@univerjs/core';
18-
import type { RenderManagerService } from '@univerjs/engine-render';
19-
import type { ICellPosWithEvent, IEditorBridgeServiceVisibleParam, IHoverRichTextInfo, IHoverRichTextPosition, IScrollState, SheetSelectionRenderService } from '@univerjs/sheets-ui';
18+
import type { IMouseEvent, IPointerEvent, RenderManagerService } from '@univerjs/engine-render';
19+
import type { ICellPosWithEvent, IDragCellPosition, IEditorBridgeServiceVisibleParam, IHoverRichTextInfo, IHoverRichTextPosition, IScrollState, SheetSelectionRenderService } from '@univerjs/sheets-ui';
2020
import { awaitTime, ICommandService, ILogService, toDisposable } from '@univerjs/core';
2121
import { DeviceInputEventType, IRenderManagerService } from '@univerjs/engine-render';
22-
import { HoverManagerService, ISheetSelectionRenderService, SetCellEditVisibleOperation, SheetScrollManagerService } from '@univerjs/sheets-ui';
22+
import { DragManagerService, HoverManagerService, ISheetSelectionRenderService, SetCellEditVisibleOperation, SheetScrollManagerService } from '@univerjs/sheets-ui';
2323
import { FWorkbook } from '@univerjs/sheets/facade';
2424
import { type IDialogPartMethodOptions, IDialogService, type ISidebarMethodOptions, ISidebarService, KeyCode } from '@univerjs/ui';
2525
import { filter } from 'rxjs';
26+
import { CellFEventName, type ICellEventParam, type IFSheetsUIEventParamConfig, type IUIEventBase } from './f-event';
2627

2728
export interface IFWorkbookSheetsUIMixin {
2829
/**
@@ -59,17 +60,21 @@ export interface IFWorkbookSheetsUIMixin {
5960
* Subscribe to pointer move events on workbook. Just like onCellHover, but with event information.
6061
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
6162
*/
62-
onPointerMove(callback: (cell: Nullable<ICellPosWithEvent>, buttons: number) => void): IDisposable;
63+
onCellPointerMove(callback: (cell: ICellPosWithEvent, event: IPointerEvent | IMouseEvent) => void): IDisposable;
6364
/**
6465
* Subscribe to cell pointer down events.
6566
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
6667
*/
67-
onCellPointerDown(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable;
68+
onCellPointerDown(callback: (cell: ICellPosWithEvent) => void): IDisposable;
6869
/**
6970
* Subscribe to cell pointer up events.
7071
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
7172
*/
72-
onCellPointerUp(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable;
73+
onCellPointerUp(callback: (cell: ICellPosWithEvent) => void): IDisposable;
74+
75+
onDragOver(callback: (cell: IDragCellPosition) => void): IDisposable;
76+
77+
onDrop(callback: (cell: IDragCellPosition) => void): IDisposable;
7378

7479
/**
7580
* Start the editing process
@@ -177,12 +182,85 @@ export class FWorkbookSheetsUIMixin extends FWorkbook implements IFWorkbookSheet
177182
logService.warn('[FWorkbook]', `${name} is deprecated. Please use the function of the same name on "FUniver".`);
178183
}
179184

185+
override addUIEvent(event: keyof IFSheetsUIEventParamConfig, _callback: (params: IFSheetsUIEventParamConfig[typeof event]) => void): IDisposable {
186+
const worksheet = this.getActiveSheet();
187+
const baseParams: IUIEventBase = {
188+
workbook: this,
189+
worksheet,
190+
};
191+
192+
switch (event) {
193+
case CellFEventName.CellClicked:
194+
this.onCellClick((cell) => {
195+
this.fireEvent(this.Event.CellClicked, {
196+
row: cell.location.row,
197+
column: cell.location.col,
198+
...baseParams,
199+
} as ICellEventParam);
200+
});
201+
break;
202+
case CellFEventName.CellPointerDown:
203+
this.onCellPointerDown((cell) => {
204+
this.fireEvent(this.Event.CellPointerDown, this.generateCellParams(cell));
205+
});
206+
break;
207+
case CellFEventName.CellPointerUp:
208+
this.onCellPointerUp((cell) => {
209+
this.fireEvent(this.Event.CellPointerUp, this.generateCellParams(cell));
210+
});
211+
break;
212+
case CellFEventName.CellPointerMove:
213+
this.onCellPointerMove((cell) => {
214+
this.fireEvent(this.Event.CellPointerMove, this.generateCellParams(cell));
215+
});
216+
break;
217+
case CellFEventName.CellHover:
218+
this.onCellHover((cell) => {
219+
this.fireEvent(this.Event.CellHover, this.generateCellParams(cell));
220+
});
221+
break;
222+
case CellFEventName.DragOver:
223+
this.onDragOver((cell) => {
224+
this.fireEvent(this.Event.DragOver, {
225+
row: cell.location.row,
226+
column: cell.location.col,
227+
...baseParams,
228+
});
229+
});
230+
break;
231+
case CellFEventName.Drop:
232+
this.onDrop((cell) => {
233+
this.fireEvent(this.Event.Drop, {
234+
row: cell.location.row,
235+
column: cell.location.col,
236+
...baseParams,
237+
});
238+
});
239+
}
240+
241+
return toDisposable(() => {
242+
//
243+
});
244+
}
245+
246+
generateCellParams(cell: IHoverRichTextPosition | ICellPosWithEvent): ICellEventParam {
247+
const worksheet = this.getActiveSheet();
248+
return {
249+
row: cell.row,
250+
column: cell.col,
251+
workbook: this,
252+
worksheet,
253+
};
254+
}
255+
180256
override onCellClick(callback: (cell: IHoverRichTextInfo) => void): IDisposable {
181257
const hoverManagerService = this._injector.get(HoverManagerService);
182258
return toDisposable(
183259
hoverManagerService.currentClickedCell$
184260
.pipe(filter((cell) => !!cell))
185-
.subscribe(callback)
261+
.subscribe((cell) => {
262+
callback(cell);
263+
})
186264
);
187265
}
188266

@@ -195,27 +273,49 @@ export class FWorkbookSheetsUIMixin extends FWorkbook implements IFWorkbookSheet
195273
);
196274
}
197275

198-
override onCellPointerDown(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable {
276+
override onCellPointerDown(callback: (cell: ICellPosWithEvent) => void): IDisposable {
199277
const hoverManagerService = this._injector.get(HoverManagerService);
200278
return toDisposable(
201279
hoverManagerService.currentPointerDownCell$.subscribe(callback)
202280
);
203281
}
204282

205-
override onCellPointerUp(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable {
283+
override onCellPointerUp(callback: (cell: ICellPosWithEvent) => void): IDisposable {
206284
const hoverManagerService = this._injector.get(HoverManagerService);
207285
return toDisposable(
208286
hoverManagerService.currentPointerUpCell$.subscribe(callback)
209287
);
210288
}
211289

212-
override onPointerMove(callback: (cell: Nullable<ICellPosWithEvent>, buttons: number) => void): IDisposable {
290+
override onCellPointerMove(callback: (cell: ICellPosWithEvent, event: IPointerEvent | IMouseEvent) => void): IDisposable {
213291
const hoverManagerService = this._injector.get(HoverManagerService);
214292
return toDisposable(
215293
hoverManagerService.currentCellPosWithEvent$
216294
.pipe(filter((cell) => !!cell))
217295
.subscribe((cell: ICellPosWithEvent) => {
218-
callback(cell, cell.event.buttons);
296+
callback(cell, cell.event);
297+
})
298+
);
299+
}
300+
301+
override onDragOver(callback: (cell: IDragCellPosition) => void): IDisposable {
302+
const dragManagerService = this._injector.get(DragManagerService);
303+
return toDisposable(
304+
dragManagerService.currentCell$
305+
.pipe(filter((cell) => !!cell))
306+
.subscribe((cell: IDragCellPosition) => {
307+
callback(cell);
308+
})
309+
);
310+
}
311+
312+
override onDrop(callback: (cell: IDragCellPosition) => void): IDisposable {
313+
const dragManagerService = this._injector.get(DragManagerService);
314+
return toDisposable(
315+
dragManagerService.endCell$
316+
.pipe(filter((cell) => !!cell))
317+
.subscribe((cell: IDragCellPosition) => {
318+
callback(cell);
219319
})
220320
);
221321
}

‎packages/sheets-ui/src/services/hover-manager.service.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@ export class HoverManagerService extends Disposable {
311311
});
312312
}
313313

314+
/**
315+
* Trigger by pointerup.
316+
* @param unitId
317+
* @param offsetX
318+
* @param offsetY
319+
*/
314320
triggerClick(unitId: string, offsetX: number, offsetY: number) {
315321
const activeCell = this._calcActiveCell(unitId, offsetX, offsetY);
316322
if (activeCell) {

0 commit comments

Comments
 (0)