Linted&fromatted

This commit is contained in:
Eugene 2023-07-26 21:43:22 +03:00
parent 022435103b
commit 954b3b8260
4 changed files with 90 additions and 81 deletions

View File

@ -40,10 +40,14 @@ export class Scroller {
this.element.addEventListener("dblclick", this.handleDoubleClick); this.element.addEventListener("dblclick", this.handleDoubleClick);
this.element.addEventListener("keydown", this.handleKeydown); this.element.addEventListener("keydown", this.handleKeydown);
this.element.addEventListener('paste', (event) => { this.element.addEventListener("paste", (event) => {
if (!this.root.selection.selectedCell) return; 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) { public setSelectingMode(mode: boolean) {
@ -192,12 +196,12 @@ export class Scroller {
console.log(event.code); console.log(event.code);
if (event.code === "KeyC") { if (event.code === "KeyC") {
let cells: Cell[][] = undefined!; let cells: Cell[][] = undefined!;
const selection = new Selection() const selection = new Selection();
if (this.root.selection.selectedRange) { if (this.root.selection.selectedRange) {
const { from, to } = 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); 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); return row.slice(from.column, to.column + 1);
}); });
cells = [...subArrByCols]; cells = [...subArrByCols];
} else if (this.root.selection.selectedCell) { } else if (this.root.selection.selectedCell) {
const { column, row } = this.root.selection.selectedCell; const { column, row } = this.root.selection.selectedCell;
cells = [[this.root.data[row][column]]]; cells = [[this.root.data[row][column]]];
selection.selectedRange = { selection.selectedRange = {
from: this.root.selection.selectedCell, from: this.root.selection.selectedCell,
to: this.root.selection.selectedCell to: this.root.selection.selectedCell,
} };
} else { } else {
return; return;
}; }
this.root.clipboard.copy(cells, selection.selectedRange); this.root.clipboard.copy(cells, selection.selectedRange);
return; return;
@ -281,7 +283,7 @@ export class Scroller {
this.verticalScroller = verticalScroller; this.verticalScroller = verticalScroller;
this.horizontalScroller = horizontalScroller; this.horizontalScroller = horizontalScroller;
scroller.appendChild(groupScrollers); scroller.appendChild(groupScrollers);
scroller.contentEditable = "false" scroller.contentEditable = "false";
scroller.classList.add(CSS_PREFIX + "scroller"); scroller.classList.add(CSS_PREFIX + "scroller");
return { scroller, verticalScroller, horizontalScroller }; return { scroller, verticalScroller, horizontalScroller };

View File

@ -4,17 +4,21 @@ import { EventTypes } from "./events";
export class Clipboard { export class Clipboard {
saved: Cell[][] | null = null; saved: Cell[][] | null = null;
root: Spreadsheet root: Spreadsheet;
constructor(root: Spreadsheet) { constructor(root: Spreadsheet) {
this.root = root this.root = root;
} }
copy(data: Cell[][], range: RangeSelectionType) { copy(data: Cell[][], range: RangeSelectionType) {
const mapedData = data.map((row) => { const mapedData = data
return row.map((item) => { .map((row) => {
return row
.map((item) => {
return item.displayValue; return item.displayValue;
}).join("\t"); })
}).join("\n"); .join("\t");
})
.join("\n");
this.saved = data; this.saved = data;
navigator.clipboard.writeText(mapedData); navigator.clipboard.writeText(mapedData);
@ -23,20 +27,18 @@ export class Clipboard {
type: EventTypes.COPY_CELLS, type: EventTypes.COPY_CELLS,
data, data,
dataAsString: mapedData, dataAsString: mapedData,
range range,
}) });
} }
paste(root: Spreadsheet, { column, row }: Position, event: ClipboardEvent) { paste(root: Spreadsheet, { column, row }: Position, event: ClipboardEvent) {
if (!this.saved) { if (!this.saved) {
if (!event.clipboardData) return; if (!event.clipboardData) return;
const data = event.clipboardData.getData("text") const data = event.clipboardData.getData("text");
try { try {
const arr = data.split('\n').map(item => item.split('\t')) const arr = data.split("\n").map((item) => item.split("\t"));
const arrayOfCells = arr.map((innerRow) => { const arrayOfCells = arr.map((innerRow) => {
return innerRow.map(item => { return innerRow.map((item) => {
const cellProps: CellConstructorProps = { const cellProps: CellConstructorProps = {
displayValue: item, displayValue: item,
position: { position: {
@ -45,11 +47,11 @@ export class Clipboard {
}, },
resultValue: item, resultValue: item,
style: new CellStyles(), style: new CellStyles(),
value: item value: item,
} };
return new Cell(cellProps) return new Cell(cellProps);
}) });
}) });
const rowsLength = arrayOfCells.length; const rowsLength = arrayOfCells.length;
const colsLength = arrayOfCells[0] ? arrayOfCells[0].length : 0; const colsLength = arrayOfCells[0] ? arrayOfCells[0].length : 0;
@ -72,10 +74,8 @@ export class Clipboard {
root.changeCellValues(position, values, false); root.changeCellValues(position, values, false);
} }
} }
} catch (err) {
} console.error("Cannot read clipboard. ", err);
catch(err) {
console.error('Cannot read clipboard. ', err)
} }
return; return;

View File

@ -10,7 +10,11 @@ export interface ViewProperties {
export type CellClickEvent = (event: MouseEvent, cell: Cell) => void; export type CellClickEvent = (event: MouseEvent, cell: Cell) => void;
export type SelectionChangeEvent = (selection: Selection) => void; export type SelectionChangeEvent = (selection: Selection) => void;
export type CellChangeEvent = (cell: Cell) => 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 = { export type ConfigProperties = {
/** Please, end it with '_' symbol. /** Please, end it with '_' symbol.
@ -25,7 +29,7 @@ export type ConfigProperties = {
onCellClick?: CellClickEvent | null; onCellClick?: CellClickEvent | null;
onSelectionChange?: SelectionChangeEvent | null; onSelectionChange?: SelectionChangeEvent | null;
onCellChange?: CellChangeEvent | null; onCellChange?: CellChangeEvent | null;
onCopy?: CopyEvent | null onCopy?: CopyEvent | null;
}; };
export type SheetConfigConstructorProps = { export type SheetConfigConstructorProps = {
@ -44,7 +48,7 @@ export class Config {
onCellClick: CellClickEvent | null = null; onCellClick: CellClickEvent | null = null;
onSelectonChange: SelectionChangeEvent | null = null; onSelectonChange: SelectionChangeEvent | null = null;
onCellChange: CellChangeEvent | null = null; onCellChange: CellChangeEvent | null = null;
onCopy: CopyEvent | null onCopy: CopyEvent | null;
constructor(props: ConfigProperties) { constructor(props: ConfigProperties) {
this.columns = props.columns; this.columns = props.columns;
@ -54,6 +58,6 @@ export class Config {
this.onCellClick = props.onCellClick ?? null; this.onCellClick = props.onCellClick ?? null;
this.onSelectonChange = props.onSelectionChange ?? null; this.onSelectonChange = props.onSelectionChange ?? null;
this.onCellChange = props.onCellChange ?? null; this.onCellChange = props.onCellChange ?? null;
this.onCopy = props.onCopy ?? null this.onCopy = props.onCopy ?? null;
} }
} }

View File

@ -5,7 +5,7 @@ export enum EventTypes {
CELL_CLICK = "CELL_CLICK", CELL_CLICK = "CELL_CLICK",
SELECTION_CHANGE = "CHANGE_SELECTION", SELECTION_CHANGE = "CHANGE_SELECTION",
CELL_CHANGE = "CELL_CHANGE", CELL_CHANGE = "CELL_CHANGE",
COPY_CELLS = "COPY_CELLS" COPY_CELLS = "COPY_CELLS",
} }
export type CellClickEvent = { export type CellClickEvent = {
@ -29,9 +29,9 @@ export type ChangeCellEvent = {
export type CopyAction = { export type CopyAction = {
type: EventTypes.COPY_CELLS; type: EventTypes.COPY_CELLS;
range: RangeSelectionType; range: RangeSelectionType;
data: Cell[][] data: Cell[][];
dataAsString: string dataAsString: string;
} };
export type ActionTypes = export type ActionTypes =
| CellClickEvent | CellClickEvent
@ -39,7 +39,6 @@ export type ActionTypes =
| ChangeCellEvent | ChangeCellEvent
| CopyAction; | CopyAction;
export class Events { export class Events {
root: Spreadsheet; root: Spreadsheet;
@ -77,9 +76,9 @@ export class Events {
} }
case EventTypes.COPY_CELLS: { case EventTypes.COPY_CELLS: {
const {data, dataAsString, range} = action const { data, dataAsString, range } = action;
this.copy(range, data, dataAsString) this.copy(range, data, dataAsString);
break break;
} }
default: { default: {
@ -121,7 +120,11 @@ export class Events {
if (enableCallback) this.root.config.onCellChange?.(cell); 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); this.root.config.onCopy?.(range, data, dataAsString);
} };
} }