diff --git a/src/components/canvas/component.tsx b/src/components/canvas/component.tsx index 8add727..f472e7a 100644 --- a/src/components/canvas/component.tsx +++ b/src/components/canvas/component.tsx @@ -1,5 +1,7 @@ import { buildSelectedDataFromCell, + buildSelectedDataFromCellRange, + buildSelectedDataFromLines, getSelectedCellRange, SelectedData, } from './events' @@ -157,12 +159,58 @@ const Internal: FC = observer((props: CanvasProps) => { if (isDnd) return } store.selector.onMouseMove(startCell) + store.endCell = startCell }) mouseUp$.pipe(take(1)).subscribe(() => { store.type = undefined store.dnd.onMouseUp() + store.selector.onMouseUp() store.resizer.mouseup() sub.unsubscribe() + if (!store.startCell) return + if (store.startCell?.type !== store.endCell?.type && store.endCell) + return + + let data: SelectedData + const {startRow, startCol} = store.startCell.coordinate + const endRow = store.endCell + ? store.endCell.coordinate.startRow + : startRow + const endCol = store.endCell + ? store.endCell.coordinate.startCol + : startCol + if (store.startCell?.type === 'FixedLeftHeader') { + data = buildSelectedDataFromLines( + startRow, + endRow, + 'row', + 'none' + ) + } else if (store.startCell?.type === 'FixedTopHeader') { + data = buildSelectedDataFromLines( + startCol, + endCol, + 'col', + 'none' + ) + } else if (store.startCell?.type === 'Cell') { + if (store.endCell?.type === 'Cell') { + const {startRow: endRow, startCol: endCol} = + store.endCell.coordinate + data = buildSelectedDataFromCellRange( + startRow, + startCol, + endRow, + endCol, + 'none' + ) + } else { + data = buildSelectedDataFromCell(startRow, startCol, 'none') + } + } else { + return + } + selectedData$(data) }) const isResize = store.resizer.mousedown(e.nativeEvent) @@ -174,9 +222,14 @@ const Internal: FC = observer((props: CanvasProps) => { const matchCell = store.match(e.clientX, e.clientY) if (!matchCell) return store.mousedown(e, matchCell) - if (matchCell?.type !== 'Cell') return const {startRow: row, startCol: col} = matchCell.coordinate - const data = buildSelectedDataFromCell(row, col, 'none') + let data: SelectedData + if (matchCell?.type === 'FixedLeftHeader') { + data = buildSelectedDataFromLines(row, row, 'row', 'none') + } else if (matchCell?.type === 'FixedTopHeader') { + data = buildSelectedDataFromLines(col, col, 'col', 'none') + } else if (matchCell?.type !== 'Cell') return + data = buildSelectedDataFromCell(row, col, 'none') selectedData$(data) } diff --git a/src/components/canvas/events/selected-cell.ts b/src/components/canvas/events/selected-cell.ts index ce563ca..c50bbde 100644 --- a/src/components/canvas/events/selected-cell.ts +++ b/src/components/canvas/events/selected-cell.ts @@ -58,3 +58,34 @@ export function buildSelectedDataFromCell( }, } } + +export function buildSelectedDataFromCellRange( + startRow: number, + startCol: number, + endRow: number, + endCol: number, + source: 'editbar' | 'none' +): SelectedData { + return { + source, + data: { + ty: 'cellRange', + d: {startRow, endRow, startCol, endCol}, + }, + } +} + +export function buildSelectedDataFromLines( + start: number, + end: number, + type: 'row' | 'col', + source: 'editbar' | 'none' +): SelectedData { + return { + source, + data: { + ty: 'line', + d: {start, end, type}, + }, + } +} diff --git a/src/components/canvas/store/selector.ts b/src/components/canvas/store/selector.ts index e518128..89c19b0 100644 --- a/src/components/canvas/store/selector.ts +++ b/src/components/canvas/store/selector.ts @@ -43,6 +43,17 @@ export class Selector { this.startCell = startCell } + @action + onMouseUp() { + if (!this.store.startCell) { + this.selector = undefined + return + } + this.selector = new SelectorProps() + this.updateSelector(this.startCell, this.endCell) + this._aftetUpdateSelector() + } + @action onMouseDown() { this.endCell = undefined diff --git a/src/components/canvas/store/store.ts b/src/components/canvas/store/store.ts index 536e29a..a6f2610 100644 --- a/src/components/canvas/store/store.ts +++ b/src/components/canvas/store/store.ts @@ -25,6 +25,7 @@ export class CanvasStore { } @observable.ref startCell?: Cell + endCell?: Cell type?: 'mousedown' | 'contextmenu' /**