diff --git a/src/components/scroller.ts b/src/components/scroller.ts index 17c2e3b..0e88b7c 100644 --- a/src/components/scroller.ts +++ b/src/components/scroller.ts @@ -40,10 +40,14 @@ export class Scroller { this.element.addEventListener("dblclick", this.handleDoubleClick); this.element.addEventListener("keydown", this.handleKeydown); - this.element.addEventListener('paste', (event) => { + this.element.addEventListener("paste", (event) => { if (!this.root.selection.selectedCell) return; - this.root.clipboard.paste(this.root, this.root.selection.selectedCell, event); - }) + this.root.clipboard.paste( + this.root, + this.root.selection.selectedCell, + event, + ); + }); } public setSelectingMode(mode: boolean) { @@ -128,7 +132,7 @@ export class Scroller { if ( this.root.selection.selectedCell && this.root.selection.selectedCell.column < - this.root.config.columns.length - 1 + this.root.config.columns.length - 1 ) { this.root.selection.selectedCell.column += 1; // this.root.renderSheet(); @@ -149,7 +153,7 @@ export class Scroller { if ( this.root.selection.selectedCell && this.root.selection.selectedCell.row < - this.root.config.rows.length - 1 + this.root.config.rows.length - 1 ) { this.root.selection.selectedCell.row += 1; // this.root.renderSheet(); @@ -192,12 +196,12 @@ export class Scroller { console.log(event.code); if (event.code === "KeyC") { let cells: Cell[][] = undefined!; - const selection = new Selection() + const selection = new Selection(); if (this.root.selection.selectedRange) { const { from, to } = this.root.selection.selectedRange; - selection.selectedRange = this.root.selection.selectedRange + selection.selectedRange = this.root.selection.selectedRange; const subArrByRows = this.root.data.slice(from.row, to.row + 1); @@ -205,19 +209,17 @@ export class Scroller { return row.slice(from.column, to.column + 1); }); - - cells = [...subArrByCols]; } else if (this.root.selection.selectedCell) { const { column, row } = this.root.selection.selectedCell; cells = [[this.root.data[row][column]]]; selection.selectedRange = { from: this.root.selection.selectedCell, - to: this.root.selection.selectedCell - } + to: this.root.selection.selectedCell, + }; } else { return; - }; + } this.root.clipboard.copy(cells, selection.selectedRange); return; @@ -281,7 +283,7 @@ export class Scroller { this.verticalScroller = verticalScroller; this.horizontalScroller = horizontalScroller; scroller.appendChild(groupScrollers); - scroller.contentEditable = "false" + scroller.contentEditable = "false"; scroller.classList.add(CSS_PREFIX + "scroller"); return { scroller, verticalScroller, horizontalScroller }; diff --git a/src/modules/clipboard.ts b/src/modules/clipboard.ts index 1a4cd35..f767592 100644 --- a/src/modules/clipboard.ts +++ b/src/modules/clipboard.ts @@ -4,17 +4,21 @@ import { EventTypes } from "./events"; export class Clipboard { saved: Cell[][] | null = null; - root: Spreadsheet + root: Spreadsheet; constructor(root: Spreadsheet) { - this.root = root + this.root = root; } copy(data: Cell[][], range: RangeSelectionType) { - const mapedData = data.map((row) => { - return row.map((item) => { + const mapedData = data + .map((row) => { + return row + .map((item) => { return item.displayValue; - }).join("\t"); - }).join("\n"); + }) + .join("\t"); + }) + .join("\n"); this.saved = data; navigator.clipboard.writeText(mapedData); @@ -23,62 +27,58 @@ export class Clipboard { type: EventTypes.COPY_CELLS, data, dataAsString: mapedData, - range - }) + range, + }); } paste(root: Spreadsheet, { column, row }: Position, event: ClipboardEvent) { - if (!this.saved) { + if (!event.clipboardData) return; + const data = event.clipboardData.getData("text"); + try { + const arr = data.split("\n").map((item) => item.split("\t")); + const arrayOfCells = arr.map((innerRow) => { + return innerRow.map((item) => { + const cellProps: CellConstructorProps = { + displayValue: item, + position: { + column, + row, + }, + resultValue: item, + style: new CellStyles(), + value: item, + }; + return new Cell(cellProps); + }); + }); - if(!event.clipboardData) return; - const data = event.clipboardData.getData("text") - try{ - const arr = data.split('\n').map(item => item.split('\t')) - const arrayOfCells = arr.map((innerRow) => { - return innerRow.map(item => { - const cellProps: CellConstructorProps = { - displayValue: item, - position: { - column, - row, - }, - resultValue: item, - style: new CellStyles(), - value: item - } - return new Cell(cellProps) - }) - }) + const rowsLength = arrayOfCells.length; + const colsLength = arrayOfCells[0] ? arrayOfCells[0].length : 0; - const rowsLength = arrayOfCells.length; - const colsLength = arrayOfCells[0] ? arrayOfCells[0].length : 0; - - for (let i = 0; i < rowsLength; i++) { - for (let j = 0; j < colsLength; j++) { - const savedCell = arrayOfCells[i][j]; - - const position = { - column: column + j, - row: row + i, - }; - - const values = { - displayValue: savedCell.displayValue, - value: savedCell.value, - style: savedCell.style, - }; - - root.changeCellValues(position, values, false); - } - } + for (let i = 0; i < rowsLength; i++) { + for (let j = 0; j < colsLength; j++) { + const savedCell = arrayOfCells[i][j]; - } - catch(err) { - console.error('Cannot read clipboard. ', err) - } + const position = { + column: column + j, + row: row + i, + }; - return; + const values = { + displayValue: savedCell.displayValue, + value: savedCell.value, + style: savedCell.style, + }; + + root.changeCellValues(position, values, false); + } + } + } catch (err) { + console.error("Cannot read clipboard. ", err); + } + + return; } const rowsLength = this.saved.length; diff --git a/src/modules/config.ts b/src/modules/config.ts index b47cfc8..676f54a 100644 --- a/src/modules/config.ts +++ b/src/modules/config.ts @@ -10,7 +10,11 @@ export interface ViewProperties { export type CellClickEvent = (event: MouseEvent, cell: Cell) => void; export type SelectionChangeEvent = (selection: Selection) => void; export type CellChangeEvent = (cell: Cell) => void; -export type CopyEvent = (range: RangeSelectionType, data: Cell[][], dataAsString: string) => void +export type CopyEvent = ( + range: RangeSelectionType, + data: Cell[][], + dataAsString: string, +) => void; export type ConfigProperties = { /** Please, end it with '_' symbol. @@ -25,7 +29,7 @@ export type ConfigProperties = { onCellClick?: CellClickEvent | null; onSelectionChange?: SelectionChangeEvent | null; onCellChange?: CellChangeEvent | null; - onCopy?: CopyEvent | null + onCopy?: CopyEvent | null; }; export type SheetConfigConstructorProps = { @@ -44,7 +48,7 @@ export class Config { onCellClick: CellClickEvent | null = null; onSelectonChange: SelectionChangeEvent | null = null; onCellChange: CellChangeEvent | null = null; - onCopy: CopyEvent | null + onCopy: CopyEvent | null; constructor(props: ConfigProperties) { this.columns = props.columns; @@ -54,6 +58,6 @@ export class Config { this.onCellClick = props.onCellClick ?? null; this.onSelectonChange = props.onSelectionChange ?? null; this.onCellChange = props.onCellChange ?? null; - this.onCopy = props.onCopy ?? null + this.onCopy = props.onCopy ?? null; } } diff --git a/src/modules/events.ts b/src/modules/events.ts index 3e90963..d13bf9e 100644 --- a/src/modules/events.ts +++ b/src/modules/events.ts @@ -5,7 +5,7 @@ export enum EventTypes { CELL_CLICK = "CELL_CLICK", SELECTION_CHANGE = "CHANGE_SELECTION", CELL_CHANGE = "CELL_CHANGE", - COPY_CELLS = "COPY_CELLS" + COPY_CELLS = "COPY_CELLS", } export type CellClickEvent = { @@ -29,9 +29,9 @@ export type ChangeCellEvent = { export type CopyAction = { type: EventTypes.COPY_CELLS; range: RangeSelectionType; - data: Cell[][] - dataAsString: string -} + data: Cell[][]; + dataAsString: string; +}; export type ActionTypes = | CellClickEvent @@ -39,7 +39,6 @@ export type ActionTypes = | ChangeCellEvent | CopyAction; - export class Events { root: Spreadsheet; @@ -77,9 +76,9 @@ export class Events { } case EventTypes.COPY_CELLS: { - const {data, dataAsString, range} = action - this.copy(range, data, dataAsString) - break + const { data, dataAsString, range } = action; + this.copy(range, data, dataAsString); + break; } default: { @@ -121,7 +120,11 @@ export class Events { if (enableCallback) this.root.config.onCellChange?.(cell); } - private copy = (range: RangeSelectionType, data: Cell[][], dataAsString: string) => { + private copy = ( + range: RangeSelectionType, + data: Cell[][], + dataAsString: string, + ) => { this.root.config.onCopy?.(range, data, dataAsString); - } + }; }