sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: Add rows/column style APIs

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-12-18 17:22:49 +01:00
committed by Nicolás Hatcher Andrés
parent 7e54cb6aa2
commit 23ab5dfef2
20 changed files with 909 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/IronCalc/.storybook/main.ts
View File

@@ -3,7 +3,6 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-onboarding",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",

15
webapp/IronCalc/package-lock.json generated
View File

@@ -23,7 +23,6 @@
"@chromatic-com/storybook": "^3.2.4",
"@storybook/addon-essentials": "^8.5.3",
"@storybook/addon-interactions": "^8.5.3",
"@storybook/addon-onboarding": "^8.5.3",
"@storybook/blocks": "^8.5.3",
"@storybook/react": "^8.5.3",
"@storybook/react-vite": "^8.5.3",
@@ -45,6 +44,7 @@
}
},
"../../bindings/wasm/pkg": {
"name": "@ironcalc/wasm",
"version": "0.3.2",
"license": "MIT/Apache-2.0"
},
@@ -1819,19 +1819,6 @@
"storybook": "^8.5.3"
}
},
"node_modules/@storybook/addon-onboarding": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.5.3.tgz",
"integrity": "sha512-NZhYj3UZK65reO7mXcK7FPPu7QkLCRyIa6TpfQ3mRAocfjqg401mcBsRO37JNywYfHCZrU4w1l7pwpqjvcYceg==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^8.5.3"
}
},
"node_modules/@storybook/addon-outline": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.5.3.tgz",

3
webapp/IronCalc/package.json
View File

@@ -11,7 +11,7 @@
"check": "biome check ./src",
"check-write": "biome check --write ./src",
"test": "vitest run",
"storybook": "storybook dev -p 6006",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build"
},
"dependencies": {
@@ -30,7 +30,6 @@
"@chromatic-com/storybook": "^3.2.4",
"@storybook/addon-essentials": "^8.5.3",
"@storybook/addon-interactions": "^8.5.3",
"@storybook/addon-onboarding": "^8.5.3",
"@storybook/blocks": "^8.5.3",
"@storybook/react": "^8.5.3",
"@storybook/react-vite": "^8.5.3",

22
webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
View File

@@ -577,8 +577,8 @@ export default class WorksheetCanvas {
let resizeHandleUp = (event: MouseEvent): void => {
div.style.opacity = "0";
this.columnGuide.style.display = "none";
document.removeEventListener("mousemove", resizeHandleMove);
document.removeEventListener("mouseup", resizeHandleUp);
document.removeEventListener("pointermove", resizeHandleMove);
document.removeEventListener("pointerup", resizeHandleUp);
const newColumnWidth = columnWidth + event.pageX - initPageX;
this.onColumnWidthChanges(
this.model.getSelectedSheet(),
@@ -587,13 +587,14 @@ export default class WorksheetCanvas {
);
};
resizeHandleUp = resizeHandleUp.bind(this);
div.addEventListener("mousedown", (event) => {
div.addEventListener("pointerdown", (event) => {
event.stopPropagation();
div.style.opacity = "1";
this.columnGuide.style.display = "block";
this.columnGuide.style.left = `${headerColumnWidth + x}px`;
initPageX = event.pageX;
document.addEventListener("mousemove", resizeHandleMove);
document.addEventListener("mouseup", resizeHandleUp);
document.addEventListener("pointermove", resizeHandleMove);
document.addEventListener("pointerup", resizeHandleUp);
});
}
@@ -615,20 +616,21 @@ export default class WorksheetCanvas {
let resizeHandleUp = (event: MouseEvent): void => {
div.style.opacity = "0";
this.rowGuide.style.display = "none";
document.removeEventListener("mousemove", resizeHandleMove);
document.removeEventListener("mouseup", resizeHandleUp);
document.removeEventListener("pointermove", resizeHandleMove);
document.removeEventListener("pointerup", resizeHandleUp);
const newRowHeight = rowHeight + event.pageY - initPageY - 1;
this.onRowHeightChanges(sheet, row, newRowHeight);
};
resizeHandleUp = resizeHandleUp.bind(this);
/* istanbul ignore next */
div.addEventListener("mousedown", (event) => {
div.addEventListener("pointerdown", (event) => {
event.stopPropagation();
div.style.opacity = "1";
this.rowGuide.style.display = "block";
this.rowGuide.style.top = `${y}px`;
initPageY = event.pageY;
document.addEventListener("mousemove", resizeHandleMove);
document.addEventListener("mouseup", resizeHandleUp);
document.addEventListener("pointermove", resizeHandleMove);
document.addEventListener("pointerup", resizeHandleUp);
});
}

2
webapp/IronCalc/src/components/formulabar.tsx
View File

@@ -19,8 +19,6 @@ type FormulaBarProps = {
onTextUpdated: () => void;
};
const headerColumnWidth = 35;
function FormulaBar(properties: FormulaBarProps) {
const {
cellAddress,

26
webapp/IronCalc/src/components/usePointer.ts
View File

@@ -15,6 +15,9 @@ interface PointerSettings {
worksheetCanvas: RefObject<WorksheetCanvas | null>;
worksheetElement: RefObject<HTMLDivElement | null>;
onCellSelected: (cell: Cell, event: React.MouseEvent) => void;
onRowSelected: (row: number) => void;
onColumnSelected: (column: number) => void;
onAllSheetSelected: () => void;
onAreaSelecting: (cell: Cell) => void;
onAreaSelected: () => void;
onExtendToCell: (cell: Cell) => void;
@@ -116,6 +119,7 @@ const usePointer = (options: PointerSettings): PointerEvents => {
const onPointerDown = useCallback(
(event: PointerEvent) => {
console.log("onPointerDown");
let x = event.clientX;
let y = event.clientY;
const {
@@ -125,6 +129,9 @@ const usePointer = (options: PointerSettings): PointerEvents => {
worksheetElement,
worksheetCanvas,
workbookState,
onRowSelected,
onColumnSelected,
onAllSheetSelected,
} = options;
const worksheet = worksheetCanvas.current;
const canvas = canvasElement.current;
@@ -143,7 +150,10 @@ const usePointer = (options: PointerSettings): PointerEvents => {
y < headerRowHeight ||
y > canvasRect.height
) {
if (
if (x < headerColumnWidth && y < headerRowHeight) {
// Click on the top left corner
onAllSheetSelected();
} else if (
x > 0 &&
x < headerColumnWidth &&
y > headerRowHeight &&
@@ -152,8 +162,18 @@ const usePointer = (options: PointerSettings): PointerEvents => {
// Click on a row number
const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
if (cell) {
// TODO
// Row selected
onRowSelected(cell.row);
}
} else if (
x > headerColumnWidth &&
x < canvasRect.width &&
y > 0 &&
y < headerRowHeight
) {
// Click on a column letter
const cell = worksheet.getCellByCoordinates(x, headerRowHeight);
if (cell) {
onColumnSelected(cell.column);
}
}
return;

23
webapp/IronCalc/src/components/util.ts
View File

@@ -1,6 +1,7 @@
import type { Area, Cell } from "./types";
import { type SelectedView, columnNameFromNumber } from "@ironcalc/wasm";
import { LAST_COLUMN, LAST_ROW } from "./WorksheetCanvas/constants";
/**
* Returns true if the keypress should start editing
@@ -34,11 +35,23 @@ export const getCellAddress = (selectedArea: Area, selectedCell: Cell) => {
selectedArea.rowStart === selectedArea.rowEnd &&
selectedArea.columnEnd === selectedArea.columnStart;
return isSingleCell
? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
: `${columnNameFromNumber(selectedArea.columnStart)}${
selectedArea.rowStart
}:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
if (isSingleCell) {
return `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`;
}
if (selectedArea.rowStart === 1 && selectedArea.rowEnd === LAST_ROW) {
return `${columnNameFromNumber(selectedArea.columnStart)}:${columnNameFromNumber(
selectedArea.columnEnd,
)}`;
}
if (
selectedArea.columnStart === 1 &&
selectedArea.columnEnd === LAST_COLUMN
) {
return `${selectedArea.rowStart}:${selectedArea.rowEnd}`;
}
return `${columnNameFromNumber(selectedArea.columnStart)}${
selectedArea.rowStart
}:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
};
export function rangeToStr(

16
webapp/IronCalc/src/components/worksheet.tsx
View File

@@ -4,6 +4,8 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
import CellContextMenu from "./CellContextMenu";
import {
COLUMN_WIDTH_SCALE,
LAST_COLUMN,
LAST_ROW,
ROW_HEIGH_SCALE,
outlineBackgroundColor,
outlineColor,
@@ -155,6 +157,20 @@ function Worksheet(props: {
model,
workbookState,
refresh,
onColumnSelected: (column: number) => {
model.setSelectedCell(1, column);
model.setSelectedRange(1, column, LAST_ROW, column);
refresh();
},
onRowSelected: (row: number) => {
model.setSelectedCell(row, 1);
model.setSelectedRange(row, 1, row, LAST_COLUMN);
refresh();
},
onAllSheetSelected: () => {
model.setSelectedCell(1, 1);
model.setSelectedRange(1, 1, LAST_ROW, LAST_COLUMN);
},
onCellSelected: (cell: Cell, event: React.MouseEvent) => {
event.preventDefault();
event.stopPropagation();

1
webapp/app.ironcalc.com/frontend/package-lock.json generated
View File

@@ -45,7 +45,6 @@
"@chromatic-com/storybook": "^3.2.4",
"@storybook/addon-essentials": "^8.5.3",
"@storybook/addon-interactions": "^8.5.3",
"@storybook/addon-onboarding": "^8.5.3",
"@storybook/blocks": "^8.5.3",
"@storybook/react": "^8.5.3",
"@storybook/react-vite": "^8.5.3",