Skip to content

Commit

Permalink
chore: add drag drop for facade
Browse files Browse the repository at this point in the history
  • Loading branch information
@lumixraku
lumixraku committed Jan 13, 2025
1 parent 88a0c86 commit 33d2ed0
Show file tree
Hide file tree
Showing 6 changed files with 353 additions and 18 deletions.
3 changes: 2 additions & 1 deletion packages/sheets-hyper-link/src/facade/f-workbook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export interface IFWorkbookHyperlinkMixin {

/**
* Parse the hyperlink string to get the hyperlink info.
* @param hyperlink the hyperlink string
* @param hyperlink the hyperlink
* string
* @returns the hyperlink info
* @example
* ``` ts
Expand Down
124 changes: 122 additions & 2 deletions packages/sheets-ui/src/facade/f-event.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,17 @@ export interface IBeforeSheetEditEndEventParams extends IEventBase {
isConfirm: boolean;
}

interface IFSheetsUIEventNameMixin {
export const CellFEventName = {
CellClicked: 'CellClicked',
CellPointerDown: 'CellPointerDown',
CellPointerUp: 'CellPointerUp',
CellPointerMove: 'CellPointerMove',
CellHover: 'CellHover',
DragOver: 'DragOver',
Drop: 'Drop',
} as const;

export interface IFSheetsUIEventNameMixin {
/**
* Trigger this event before the clipboard content changes.
* Type of the event parameter is {@link IBeforeClipboardChangeParam}
Expand Down Expand Up @@ -243,6 +253,66 @@ interface IFSheetsUIEventNameMixin {
* ```
*/
readonly SheetEditEnded: 'SheetEditEnded';

/**
* Event fired when a cell is clicked
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('CellClicked', (p)=> console.log(p));
* ```
*/
readonly CellClicked: 'CellClicked';
/**
* Event fired when a cell is pointer down
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('CellPointerDown', (p)=> console.log(p));
* ```
*/
readonly CellPointerDown: 'CellPointerDown';

/**
* Event fired when a cell is pointer up
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('CellPointerUp', (p)=> console.log(p));
* ```
*/
readonly CellPointerUp: 'CellPointerUp';

/**
* Event fired when a cell is hovered
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('CellHover', (p)=> console.log(p));
* ```
*/
readonly CellHover: 'CellHover';
/**
* Event fired when move on spreadsheet cells
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('CellPointerMove', (p)=> console.log(p));
* ```
*/
readonly CellPointerMove: 'CellPointerMove';
/**
* Event fired when drag over spreadsheet cells
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('DragOver', (p)=> console.log(p));
* ```
*/
readonly DragOver: 'DragOver';

/**
* Event fired when drop on spreadsheet cells
* @example
* ```ts
* univerAPI.getActiveWorkbook().addEvent('Drop', (p)=> console.log(p));
* ```
*/
readonly Drop: 'Drop';
}

export class FSheetsUIEventName extends FEventName implements IFSheetsUIEventNameMixin {
Expand Down Expand Up @@ -281,8 +351,46 @@ export class FSheetsUIEventName extends FEventName implements IFSheetsUIEventNam
override get SheetEditEnded(): 'SheetEditEnded' {
return 'SheetEditEnded';
}

override get CellClicked(): 'CellClicked' {
return CellFEventName.CellClicked;
}

override get CellHover(): 'CellHover' {
return CellFEventName.CellHover;
}

override get CellPointerDown(): 'CellPointerDown' {
return CellFEventName.CellPointerDown;
}

override get CellPointerUp(): 'CellPointerUp' {
return CellFEventName.CellPointerUp;
}

override get CellPointerMove(): 'CellPointerMove' {
return CellFEventName.CellPointerMove;
}

override get DragOver(): 'DragOver' {
return 'DragOver' as const;
}

override get Drop(): 'Drop' {
return 'Drop' as const;
}
}

export interface IUIEventBase extends IEventBase {
/**
* The workbook instance currently being operated on. {@link FWorkbook}
*/
workbook: FWorkbook;
/**
* The worksheet instance currently being operated on. {@link FWorksheet}
*/
worksheet: FWorksheet;
}
export interface IBeforeClipboardChangeParam extends IEventBase {
/**
* The workbook instance currently being operated on. {@link FWorkbook}
Expand Down Expand Up @@ -333,7 +441,11 @@ export interface IBeforeClipboardPasteParam extends IEventBase {

export type IClipboardPastedParam = IBeforeClipboardPasteParam;

interface IFSheetsUIEventParamConfig {
export interface ICellEventParam extends IUIEventBase {
row: number;
column: number;
}
export interface IFSheetsUIEventParamConfig {
BeforeClipboardChange: IBeforeClipboardChangeParam;
ClipboardChanged: IClipboardChangedParam;
BeforeClipboardPaste: IBeforeClipboardPasteParam;
Expand All @@ -344,6 +456,14 @@ interface IFSheetsUIEventParamConfig {
SheetEditChanging: ISheetEditChangingEventParams;
BeforeSheetEditEnd: IBeforeSheetEditEndEventParams;
SheetEditEnded: ISheetEditEndedEventParams;

CellClicked: ICellEventParam;
CellHover: ICellEventParam;
CellPointerDown: ICellEventParam;
CellPointerUp: ICellEventParam;
CellPointerMove: ICellEventParam;
Drop: ICellEventParam;
DragOver: ICellEventParam;
}

FEventName.extend(FSheetsUIEventName);
Expand Down
122 changes: 111 additions & 11 deletions packages/sheets-ui/src/facade/f-workbook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@
*/

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

export interface IFWorkbookSheetsUIMixin {
/**
Expand Down Expand Up @@ -59,17 +60,21 @@ export interface IFWorkbookSheetsUIMixin {
* Subscribe to pointer move events on workbook. Just like onCellHover, but with event information.
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
*/
onPointerMove(callback: (cell: Nullable<ICellPosWithEvent>, buttons: number) => void): IDisposable;
onCellPointerMove(callback: (cell: ICellPosWithEvent, event: IPointerEvent | IMouseEvent) => void): IDisposable;
/**
* Subscribe to cell pointer down events.
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
*/
onCellPointerDown(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable;
onCellPointerDown(callback: (cell: ICellPosWithEvent) => void): IDisposable;
/**
* Subscribe to cell pointer up events.
* @param {function(ICellPosWithEvent): any} callback The callback function accept cell location and event.
*/
onCellPointerUp(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable;
onCellPointerUp(callback: (cell: ICellPosWithEvent) => void): IDisposable;

onDragOver(callback: (cell: IDragCellPosition) => void): IDisposable;

onDrop(callback: (cell: IDragCellPosition) => void): IDisposable;

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

override addUIEvent(event: keyof IFSheetsUIEventParamConfig, _callback: (params: IFSheetsUIEventParamConfig[typeof event]) => void): IDisposable {
const worksheet = this.getActiveSheet();
const baseParams: IUIEventBase = {
workbook: this,
worksheet,
};

switch (event) {
case CellFEventName.CellClicked:
this.onCellClick((cell) => {
this.fireEvent(this.Event.CellClicked, {
row: cell.location.row,
column: cell.location.col,
...baseParams,
} as ICellEventParam);
});
break;
case CellFEventName.CellPointerDown:
this.onCellPointerDown((cell) => {
this.fireEvent(this.Event.CellPointerDown, this.generateCellParams(cell));
});
break;
case CellFEventName.CellPointerUp:
this.onCellPointerUp((cell) => {
this.fireEvent(this.Event.CellPointerUp, this.generateCellParams(cell));
});
break;
case CellFEventName.CellPointerMove:
this.onCellPointerMove((cell) => {
this.fireEvent(this.Event.CellPointerMove, this.generateCellParams(cell));
});
break;
case CellFEventName.CellHover:
this.onCellHover((cell) => {
this.fireEvent(this.Event.CellHover, this.generateCellParams(cell));
});
break;
case CellFEventName.DragOver:
this.onDragOver((cell) => {
this.fireEvent(this.Event.DragOver, {
row: cell.location.row,
column: cell.location.col,
...baseParams,
});
});
break;
case CellFEventName.Drop:
this.onDrop((cell) => {
this.fireEvent(this.Event.Drop, {
row: cell.location.row,
column: cell.location.col,
...baseParams,
});
});
}

return toDisposable(() => {
//
});
}

generateCellParams(cell: IHoverRichTextPosition | ICellPosWithEvent): ICellEventParam {
const worksheet = this.getActiveSheet();
return {
row: cell.row,
column: cell.col,
workbook: this,
worksheet,
};
}

override onCellClick(callback: (cell: IHoverRichTextInfo) => void): IDisposable {
const hoverManagerService = this._injector.get(HoverManagerService);
return toDisposable(
hoverManagerService.currentClickedCell$
.pipe(filter((cell) => !!cell))
.subscribe(callback)
.subscribe((cell) => {
callback(cell);
})
);
}

Expand All @@ -195,27 +273,49 @@ export class FWorkbookSheetsUIMixin extends FWorkbook implements IFWorkbookSheet
);
}

override onCellPointerDown(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable {
override onCellPointerDown(callback: (cell: ICellPosWithEvent) => void): IDisposable {
const hoverManagerService = this._injector.get(HoverManagerService);
return toDisposable(
hoverManagerService.currentPointerDownCell$.subscribe(callback)
);
}

override onCellPointerUp(callback: (cell: Nullable<ICellPosWithEvent>) => void): IDisposable {
override onCellPointerUp(callback: (cell: ICellPosWithEvent) => void): IDisposable {
const hoverManagerService = this._injector.get(HoverManagerService);
return toDisposable(
hoverManagerService.currentPointerUpCell$.subscribe(callback)
);
}

override onPointerMove(callback: (cell: Nullable<ICellPosWithEvent>, buttons: number) => void): IDisposable {
override onCellPointerMove(callback: (cell: ICellPosWithEvent, event: IPointerEvent | IMouseEvent) => void): IDisposable {
const hoverManagerService = this._injector.get(HoverManagerService);
return toDisposable(
hoverManagerService.currentCellPosWithEvent$
.pipe(filter((cell) => !!cell))
.subscribe((cell: ICellPosWithEvent) => {
callback(cell, cell.event.buttons);
callback(cell, cell.event);
})
);
}

override onDragOver(callback: (cell: IDragCellPosition) => void): IDisposable {
const dragManagerService = this._injector.get(DragManagerService);
return toDisposable(
dragManagerService.currentCell$
.pipe(filter((cell) => !!cell))
.subscribe((cell: IDragCellPosition) => {
callback(cell);
})
);
}

override onDrop(callback: (cell: IDragCellPosition) => void): IDisposable {
const dragManagerService = this._injector.get(DragManagerService);
return toDisposable(
dragManagerService.endCell$
.pipe(filter((cell) => !!cell))
.subscribe((cell: IDragCellPosition) => {
callback(cell);
})
);
}
Expand Down
6 changes: 6 additions & 0 deletions packages/sheets-ui/src/services/hover-manager.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,12 @@ export class HoverManagerService extends Disposable {
});
}

/**
* Trigger by pointerup.
* @param unitId
* @param offsetX
* @param offsetY
*/
triggerClick(unitId: string, offsetX: number, offsetY: number) {
const activeCell = this._calcActiveCell(unitId, offsetX, offsetY);
if (activeCell) {
Expand Down
Loading

0 comments on commit 33d2ed0

Please sign in to comment.