UPDATE: Adds web app (#79)
Things missing: * Browse mode * Front end tests * Storybook
This commit is contained in:
Nicolás Hatcher Andrés
committed by
GitHub
GitHub
parent
083548608e
commit
dc23a7f29c
12
webapp/src/components/README.md
Normal file
12
webapp/src/components/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
# Keyboard and mouse events architecture
|
||||
|
||||
This document describes the architecture of the keyboard navigation and mouse events in IronCalc Web
|
||||
|
||||
There are two modes for mouse events:
|
||||
|
||||
* Normal mode: clicking a cell selects it, clicking on a sheet opens it
|
||||
* Browse mode: clicking on a cell updates the formula, etc
|
||||
|
||||
While in browse mode some mouse events might end the browse mode
|
||||
|
||||
We follow Excel's way of navigating a spreadsheet
|
||||
18
webapp/src/components/WorksheetCanvas/constants.ts
Normal file
18
webapp/src/components/WorksheetCanvas/constants.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export const headerCornerBackground = "#FFF";
|
||||
export const headerTextColor = "#333";
|
||||
export const headerBackground = "#FFF";
|
||||
export const headerGlobalSelectorColor = "#EAECF4";
|
||||
export const headerSelectedBackground = "#EEEEEE";
|
||||
export const headerFullSelectedBackground = "#D3D6E9";
|
||||
export const headerSelectedColor = "#333";
|
||||
export const headerBorderColor = "#DEE0EF";
|
||||
|
||||
export const gridColor = "#D3D6E9";
|
||||
export const gridSeparatorColor = "#D3D6E9";
|
||||
export const defaultTextColor = "#2E414D";
|
||||
|
||||
export const outlineColor = "#F2994A";
|
||||
export const outlineBackgroundColor = "#F2994A1A";
|
||||
|
||||
export const LAST_COLUMN = 16_384;
|
||||
export const LAST_ROW = 1_048_576;
|
||||
1356
webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
Normal file
1356
webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
Normal file
File diff suppressed because it is too large
Load Diff
538
webapp/src/components/borderPicker.tsx
Normal file
538
webapp/src/components/borderPicker.tsx
Normal file
@@ -0,0 +1,538 @@
|
||||
import { type BorderOptions, BorderStyle, BorderType } from "@ironcalc/wasm";
|
||||
import Popover, { type PopoverOrigin } from "@mui/material/Popover";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import {
|
||||
Grid2X2 as BorderAllIcon,
|
||||
ChevronRight,
|
||||
PencilLine,
|
||||
} from "lucide-react";
|
||||
import type React from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
BorderBottomIcon,
|
||||
BorderCenterHIcon,
|
||||
BorderCenterVIcon,
|
||||
BorderInnerIcon,
|
||||
BorderLeftIcon,
|
||||
BorderNoneIcon,
|
||||
BorderOuterIcon,
|
||||
BorderRightIcon,
|
||||
BorderStyleIcon,
|
||||
BorderTopIcon,
|
||||
} from "../icons";
|
||||
import { theme } from "../theme";
|
||||
import ColorPicker from "./colorPicker";
|
||||
|
||||
type BorderPickerProps = {
|
||||
className?: string;
|
||||
onChange: (border: BorderOptions) => void;
|
||||
anchorEl: React.RefObject<HTMLElement>;
|
||||
anchorOrigin?: PopoverOrigin;
|
||||
transformOrigin?: PopoverOrigin;
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
const BorderPicker = (properties: BorderPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [borderSelected, setBorderSelected] = useState(BorderType.None);
|
||||
const [borderColor, setBorderColor] = useState("#000000");
|
||||
const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
|
||||
const [colorPickerOpen, setColorPickerOpen] = useState(false);
|
||||
const [stylePickerOpen, setStylePickerOpen] = useState(false);
|
||||
const closePicker = (): void => {
|
||||
properties.onChange({
|
||||
color: borderColor,
|
||||
style: borderStyle,
|
||||
border: borderSelected,
|
||||
});
|
||||
};
|
||||
const borderColorButton = useRef(null);
|
||||
const borderStyleButton = useRef(null);
|
||||
return (
|
||||
<>
|
||||
<StyledPopover
|
||||
open={properties.open}
|
||||
onClose={(): void => closePicker()}
|
||||
anchorEl={properties.anchorEl.current}
|
||||
anchorOrigin={
|
||||
properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
|
||||
}
|
||||
transformOrigin={
|
||||
properties.transformOrigin || { vertical: "top", horizontal: "left" }
|
||||
}
|
||||
>
|
||||
<BorderPickerDialog>
|
||||
<Borders>
|
||||
<Line>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.All}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.All) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.All);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderAllIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Inner}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Inner) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Inner);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderInnerIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.CenterH}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.CenterH) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.CenterH);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderCenterHIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.CenterV}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.CenterV) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.CenterV);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderCenterVIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Outer}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Outer) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Outer);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderOuterIcon />
|
||||
</Button>
|
||||
</Line>
|
||||
<Line>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.None}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.None) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.None);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderNoneIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Top}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Top) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Top);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderTopIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Right}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Right) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Right);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderRightIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Bottom}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Bottom) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Bottom);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderBottomIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={borderSelected === BorderType.Left}
|
||||
onClick={() => {
|
||||
if (borderSelected === BorderType.Left) {
|
||||
setBorderSelected(BorderType.None);
|
||||
} else {
|
||||
setBorderSelected(BorderType.Left);
|
||||
}
|
||||
}}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderLeftIcon />
|
||||
</Button>
|
||||
</Line>
|
||||
</Borders>
|
||||
<Divider />
|
||||
<Styles>
|
||||
<ButtonWrapper onClick={() => setColorPickerOpen(true)}>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={false}
|
||||
ref={borderColorButton}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<PencilLine />
|
||||
</Button>
|
||||
<div style={{ flexGrow: 2 }}>Border color</div>
|
||||
<ChevronRightStyled />
|
||||
</ButtonWrapper>
|
||||
<ButtonWrapper
|
||||
onClick={() => setStylePickerOpen(true)}
|
||||
ref={borderStyleButton}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={false}
|
||||
title={t("workbook.toolbar.borders_button_title")}
|
||||
>
|
||||
<BorderStyleIcon />
|
||||
</Button>
|
||||
<div style={{ flexGrow: 2 }}>Border style</div>
|
||||
<ChevronRightStyled />
|
||||
</ButtonWrapper>
|
||||
</Styles>
|
||||
</BorderPickerDialog>
|
||||
<ColorPicker
|
||||
color={borderColor}
|
||||
onChange={(color): void => {
|
||||
setBorderColor(color);
|
||||
setColorPickerOpen(false);
|
||||
}}
|
||||
onClose={() => {
|
||||
setColorPickerOpen(false);
|
||||
}}
|
||||
anchorEl={borderColorButton}
|
||||
open={colorPickerOpen}
|
||||
/>
|
||||
<StyledPopover
|
||||
open={stylePickerOpen}
|
||||
onClose={(): void => {
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
anchorEl={borderStyleButton.current}
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
|
||||
transformOrigin={{ vertical: 38, horizontal: -6 }}
|
||||
>
|
||||
<BorderStyleDialog>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.None}
|
||||
>
|
||||
<BorderDescription>None</BorderDescription>
|
||||
<NoneLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Thin);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Thin}
|
||||
>
|
||||
<BorderDescription>Thin</BorderDescription>
|
||||
<SolidLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Medium);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Medium}
|
||||
>
|
||||
<BorderDescription>Medium</BorderDescription>
|
||||
<MediumLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Thick);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Thick}
|
||||
>
|
||||
<BorderDescription>Thick</BorderDescription>
|
||||
<ThickLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dotted);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Dotted}
|
||||
>
|
||||
<BorderDescription>Dotted</BorderDescription>
|
||||
<DottedLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Dashed}
|
||||
>
|
||||
<BorderDescription>Dashed</BorderDescription>
|
||||
<DashedLine />
|
||||
</LineWrapper>
|
||||
<LineWrapper
|
||||
onClick={() => {
|
||||
setBorderStyle(BorderStyle.Dashed);
|
||||
setStylePickerOpen(false);
|
||||
}}
|
||||
$checked={borderStyle === BorderStyle.Double}
|
||||
>
|
||||
<BorderDescription>Double</BorderDescription>
|
||||
<DoubleLine />
|
||||
</LineWrapper>
|
||||
</BorderStyleDialog>
|
||||
</StyledPopover>
|
||||
</StyledPopover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type LineWrapperProperties = { $checked: boolean };
|
||||
const LineWrapper = styled("div")<LineWrapperProperties>`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: ${({ $checked }): string => {
|
||||
if ($checked) {
|
||||
return "#EEEEEE;";
|
||||
}
|
||||
return "inherit;";
|
||||
}};
|
||||
&:hover {
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: 1px solid white;
|
||||
`;
|
||||
|
||||
const CheckIconWrapper = styled("div")`
|
||||
width: 12px;
|
||||
`;
|
||||
|
||||
type CheckIconProperties = { $checked: boolean };
|
||||
const CheckIcon = styled("div")<CheckIconProperties>`
|
||||
width: 2px;
|
||||
background-color: #eee;
|
||||
height: 28px;
|
||||
visibility: ${({ $checked }): string => {
|
||||
if ($checked) {
|
||||
return "visible";
|
||||
}
|
||||
return "hidden";
|
||||
}};
|
||||
`;
|
||||
const NoneLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
`;
|
||||
const SolidLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px solid #333333;
|
||||
`;
|
||||
const MediumLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 2px solid #333333;
|
||||
`;
|
||||
const ThickLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 3px solid #333333;
|
||||
`;
|
||||
const DashedLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px dashed #333333;
|
||||
`;
|
||||
const DottedLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 1px dotted #333333;
|
||||
`;
|
||||
const DoubleLine = styled("div")`
|
||||
width: 68px;
|
||||
border-top: 3px double #333333;
|
||||
`;
|
||||
|
||||
const Divider = styled("div")`
|
||||
display: inline-flex;
|
||||
heigh: 1px;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
`;
|
||||
|
||||
const Borders = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Styles = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Line = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ButtonWrapper = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
border-top-color: ${(): string => theme.palette.grey["400"]};
|
||||
}
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
`;
|
||||
|
||||
const BorderStyleDialog = styled("div")`
|
||||
background: ${({ theme }): string => theme.palette.background.default};
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StyledPopover = styled(Popover)`
|
||||
.MuiPopover-paper {
|
||||
border-radius: 10px;
|
||||
border: 0px solid ${({ theme }): string => theme.palette.background.default};
|
||||
box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
|
||||
}
|
||||
.MuiPopover-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
.MuiList-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
font-family: ${({ theme }) => theme.typography.fontFamily};
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const BorderPickerDialog = styled("div")`
|
||||
background: ${({ theme }): string => theme.palette.background.default};
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const BorderDescription = styled("div")`
|
||||
width: 70px;
|
||||
`;
|
||||
|
||||
type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
|
||||
const Button = styled("button")<TypeButtonProperties>(
|
||||
({ disabled, $pressed, $underlinedColor }) => {
|
||||
const result = {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
// fontSize: "26px",
|
||||
border: "0px solid #fff",
|
||||
borderRadius: "2px",
|
||||
marginRight: "5px",
|
||||
transition: "all 0.2s",
|
||||
cursor: "pointer",
|
||||
padding: "0px",
|
||||
};
|
||||
if (disabled) {
|
||||
return {
|
||||
...result,
|
||||
color: theme.palette.grey["600"],
|
||||
cursor: "default",
|
||||
};
|
||||
}
|
||||
return {
|
||||
...result,
|
||||
borderTop: $underlinedColor ? "3px solid #FFF" : "none",
|
||||
borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
|
||||
color: "#21243A",
|
||||
backgroundColor: $pressed ? theme.palette.grey["600"] : "inherit",
|
||||
"&:hover": {
|
||||
backgroundColor: "#F1F2F8",
|
||||
borderTopColor: "#F1F2F8",
|
||||
},
|
||||
svg: {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
},
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
const ChevronRightStyled = styled(ChevronRight)`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
`;
|
||||
|
||||
export default BorderPicker;
|
||||
271
webapp/src/components/colorPicker.tsx
Normal file
271
webapp/src/components/colorPicker.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import styled from "@emotion/styled";
|
||||
import Popover, { type PopoverOrigin } from "@mui/material/Popover";
|
||||
import type React from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { HexColorInput, HexColorPicker } from "react-colorful";
|
||||
import { theme } from "../theme";
|
||||
|
||||
type ColorPickerProps = {
|
||||
className?: string;
|
||||
color: string;
|
||||
onChange: (color: string) => void;
|
||||
onClose: () => void;
|
||||
anchorEl: React.RefObject<HTMLElement>;
|
||||
anchorOrigin?: PopoverOrigin;
|
||||
transformOrigin?: PopoverOrigin;
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
const colorPickerWidth = 240;
|
||||
const colorfulHeight = 185; // 150 + 15 + 20
|
||||
|
||||
const ColorPicker = (properties: ColorPickerProps) => {
|
||||
const [color, setColor] = useState<string>(properties.color);
|
||||
const recentColors = useRef<string[]>([]);
|
||||
|
||||
const closePicker = (newColor: string): void => {
|
||||
const maxRecentColors = 14;
|
||||
properties.onChange(newColor);
|
||||
const colors = recentColors.current.filter((c) => c !== newColor);
|
||||
recentColors.current = [newColor, ...colors].slice(0, maxRecentColors);
|
||||
};
|
||||
|
||||
const handleClose = (): void => {
|
||||
properties.onClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setColor(properties.color);
|
||||
}, [properties.color]);
|
||||
|
||||
const presetColors = [
|
||||
"#FFFFFF",
|
||||
"#1B717E",
|
||||
"#59B9BC",
|
||||
"#3BB68A",
|
||||
"#8CB354",
|
||||
"#F8CD3C",
|
||||
"#EC5753",
|
||||
"#A23C52",
|
||||
"#D03627",
|
||||
"#523E93",
|
||||
"#3358B7",
|
||||
];
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={properties.open}
|
||||
onClose={handleClose}
|
||||
anchorEl={properties.anchorEl.current}
|
||||
anchorOrigin={
|
||||
properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
|
||||
}
|
||||
transformOrigin={
|
||||
properties.transformOrigin || { vertical: "top", horizontal: "left" }
|
||||
}
|
||||
>
|
||||
<ColorPickerDialog>
|
||||
<HexColorPicker
|
||||
color={color}
|
||||
onChange={(newColor): void => {
|
||||
setColor(newColor);
|
||||
}}
|
||||
/>
|
||||
<ColorPickerInput>
|
||||
<HexWrapper>
|
||||
<HexLabel>{"Hex"}</HexLabel>
|
||||
<HexColorInputBox>
|
||||
<HashLabel>{"#"}</HashLabel>
|
||||
<HexColorInput
|
||||
color={color}
|
||||
onChange={(newColor): void => {
|
||||
setColor(newColor);
|
||||
}}
|
||||
/>
|
||||
</HexColorInputBox>
|
||||
</HexWrapper>
|
||||
<Swatch
|
||||
$color={color}
|
||||
onClick={(): void => {
|
||||
closePicker(color);
|
||||
}}
|
||||
/>
|
||||
</ColorPickerInput>
|
||||
<HorizontalDivider />
|
||||
<ColorList>
|
||||
{presetColors.map((presetColor) => (
|
||||
<Button
|
||||
key={presetColor}
|
||||
$color={presetColor}
|
||||
onClick={(): void => {
|
||||
closePicker(presetColor);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ColorList>
|
||||
<HorizontalDivider />
|
||||
<RecentLabel>{"Recent"}</RecentLabel>
|
||||
<ColorList>
|
||||
{recentColors.current.map((recentColor) => (
|
||||
<Button
|
||||
key={recentColor}
|
||||
$color={recentColor}
|
||||
onClick={(): void => {
|
||||
closePicker(recentColor);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ColorList>
|
||||
</ColorPickerDialog>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
const RecentLabel = styled.div`
|
||||
font-size: 12px;
|
||||
color: ${theme.palette.text.secondary};
|
||||
`;
|
||||
|
||||
const ColorList = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const Button = styled.button<{ $color: string }>`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
${({ $color }): string => {
|
||||
if ($color.toUpperCase() === "#FFFFFF") {
|
||||
return `border: 1px solid ${theme.palette.grey["600"]};`;
|
||||
}
|
||||
return `border: 1px solid ${$color};`;
|
||||
}}
|
||||
background-color: ${({ $color }): string => {
|
||||
return $color;
|
||||
}};
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
||||
const HorizontalDivider = styled.div`
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid ${theme.palette.grey["400"]};
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
// const StyledPopover = styled(Popover)`
|
||||
// .MuiPopover-paper {
|
||||
// border-radius: 10px;
|
||||
// border: 0px solid ${theme.palette.background.default};
|
||||
// box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
|
||||
// }
|
||||
// .MuiPopover-padding {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// .MuiList-padding {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// `;
|
||||
|
||||
const ColorPickerDialog = styled.div`
|
||||
background: ${theme.palette.background.default};
|
||||
width: ${colorPickerWidth}px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .react-colorful {
|
||||
height: ${colorfulHeight}px;
|
||||
width: ${colorPickerWidth}px;
|
||||
}
|
||||
& .react-colorful__saturation {
|
||||
border-bottom: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .react-colorful__hue {
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .react-colorful__saturation-pointer {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
& .react-colorful__hue-pointer {
|
||||
width: 7px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
`;
|
||||
|
||||
const HashLabel = styled.div`
|
||||
margin: auto 0px auto 10px;
|
||||
font-size: 13px;
|
||||
color: #7d8ec2;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
`;
|
||||
|
||||
const HexLabel = styled.div`
|
||||
margin: auto 10px auto 0px;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
`;
|
||||
|
||||
const HexColorInputBox = styled.div`
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
width: 140px;
|
||||
height: 28px;
|
||||
border: 1px solid ${theme.palette.grey["600"]};
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const HexWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
& input {
|
||||
min-width: 0px;
|
||||
border: 0px;
|
||||
background: ${theme.palette.background.default};
|
||||
outline: none;
|
||||
font-family: ${theme.typography.button.fontFamily};
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& input:focus {
|
||||
border-color: #4298ef;
|
||||
}
|
||||
`;
|
||||
|
||||
const Swatch = styled.div<{ $color: string }>`
|
||||
display: inline-flex;
|
||||
${({ $color }): string => {
|
||||
if ($color.toUpperCase() === "#FFFFFF") {
|
||||
return `border: 1px solid ${theme.palette.grey["600"]};`;
|
||||
}
|
||||
return `border: 1px solid ${$color};`;
|
||||
}}
|
||||
background-color: ${({ $color }): string => $color};
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const ColorPickerInput = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
`;
|
||||
|
||||
export default ColorPicker;
|
||||
136
webapp/src/components/formatMenu.tsx
Normal file
136
webapp/src/components/formatMenu.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Menu, MenuItem, styled } from "@mui/material";
|
||||
import { type ComponentProps, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormatPicker from "./formatPicker";
|
||||
import { NumberFormats } from "./formatUtil";
|
||||
|
||||
type FormatMenuProps = {
|
||||
children: React.ReactNode;
|
||||
numFmt: string;
|
||||
onChange: (numberFmt: string) => void;
|
||||
onExited?: () => void;
|
||||
anchorOrigin?: ComponentProps<typeof Menu>["anchorOrigin"];
|
||||
};
|
||||
|
||||
const FormatMenu = (properties: FormatMenuProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { onChange } = properties;
|
||||
const [isMenuOpen, setMenuOpen] = useState(false);
|
||||
const [isPickerOpen, setPickerOpen] = useState(false);
|
||||
const anchorElement = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChildrenWrapper
|
||||
onClick={(): void => setMenuOpen(true)}
|
||||
ref={anchorElement}
|
||||
>
|
||||
{properties.children}
|
||||
</ChildrenWrapper>
|
||||
<Menu
|
||||
open={isMenuOpen}
|
||||
onClose={(): void => setMenuOpen(false)}
|
||||
anchorEl={anchorElement.current}
|
||||
anchorOrigin={properties.anchorOrigin}
|
||||
>
|
||||
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}>
|
||||
<MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
|
||||
</MenuItemWrapper>
|
||||
<MenuDivider />
|
||||
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}>
|
||||
<MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.number_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.PERCENTAGE)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.percentage_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
|
||||
<MenuDivider />
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.currency_eur_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.CURRENCY_USD)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.currency_usd_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.currency_gbp_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
|
||||
<MenuDivider />
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.DATE_SHORT)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.date_short_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
<MenuItemWrapper
|
||||
onClick={(): void => onChange(NumberFormats.DATE_LONG)}
|
||||
>
|
||||
<MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText>
|
||||
<MenuItemExample>
|
||||
{t("toolbar.format_menu.date_long_example")}
|
||||
</MenuItemExample>
|
||||
</MenuItemWrapper>
|
||||
|
||||
<MenuDivider />
|
||||
<MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
|
||||
<MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
|
||||
</MenuItemWrapper>
|
||||
</Menu>
|
||||
<FormatPicker
|
||||
numFmt={properties.numFmt}
|
||||
onChange={properties.onChange}
|
||||
open={isPickerOpen}
|
||||
onClose={(): void => setPickerOpen(false)}
|
||||
onExited={properties.onExited}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const MenuItemWrapper = styled(MenuItem)`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const ChildrenWrapper = styled("div")`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const MenuDivider = styled("div")``;
|
||||
|
||||
const MenuItemText = styled("div")`
|
||||
color: #000;
|
||||
`;
|
||||
|
||||
const MenuItemExample = styled("div")`
|
||||
margin-left: 20px;
|
||||
`;
|
||||
|
||||
export default FormatMenu;
|
||||
49
webapp/src/components/formatPicker.tsx
Normal file
49
webapp/src/components/formatPicker.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type FormatPickerProps = {
|
||||
className?: string;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onExited?: () => void;
|
||||
numFmt: string;
|
||||
onChange: (numberFmt: string) => void;
|
||||
};
|
||||
|
||||
const FormatPicker = (properties: FormatPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [formatCode, setFormatCode] = useState(properties.numFmt);
|
||||
|
||||
const onSubmit = (format_code: string): void => {
|
||||
properties.onChange(format_code);
|
||||
properties.onClose();
|
||||
};
|
||||
return (
|
||||
<Dialog open={properties.open} onClose={properties.onClose}>
|
||||
<DialogTitle>{t("num_fmt.title")}</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<TextField
|
||||
defaultValue={properties.numFmt}
|
||||
label={t("num_fmt.label")}
|
||||
name="format_code"
|
||||
onChange={(event) => setFormatCode(event.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => onSubmit(formatCode)}>
|
||||
{t("num_fmt.save")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormatPicker;
|
||||
36
webapp/src/components/formatUtil.ts
Normal file
36
webapp/src/components/formatUtil.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
export function increaseDecimalPlaces(numberFormat: string): string {
|
||||
// FIXME: Should it be done in the Rust? How should it work?
|
||||
// Increase decimal places for existing numbers with decimals
|
||||
const newNumberFormat = numberFormat.replace(/\.0/g, ".00");
|
||||
// If no decimal places declared, add 0.0
|
||||
if (!newNumberFormat.includes(".")) {
|
||||
if (newNumberFormat.includes("0")) {
|
||||
return newNumberFormat.replace(/0/g, "0.0");
|
||||
}
|
||||
if (newNumberFormat.includes("#")) {
|
||||
return newNumberFormat.replace(/#([^#,]|$)/g, "0.0$1");
|
||||
}
|
||||
return "0.0";
|
||||
}
|
||||
return newNumberFormat;
|
||||
}
|
||||
|
||||
export function decreaseDecimalPlaces(numberFormat: string): string {
|
||||
// FIXME: Should it be done in the Rust? How should it work?
|
||||
// Decrease decimal places for existing numbers with decimals
|
||||
let newNumberFormat = numberFormat.replace(/\.0/g, ".");
|
||||
// Fix leftover dots
|
||||
newNumberFormat = newNumberFormat.replace(/0\.([^0]|$)/, "0$1");
|
||||
return newNumberFormat;
|
||||
}
|
||||
|
||||
export enum NumberFormats {
|
||||
AUTO = "general",
|
||||
CURRENCY_EUR = '"€"#,##0.00',
|
||||
CURRENCY_USD = '"$"#,##0.00',
|
||||
CURRENCY_GBP = '"£"#,##0.00',
|
||||
DATE_SHORT = 'dd"/"mm"/"yyyy',
|
||||
DATE_LONG = 'dddd"," mmmm dd"," yyyy',
|
||||
PERCENTAGE = "0.00%",
|
||||
NUMBER = "#,##0.00",
|
||||
}
|
||||
50
webapp/src/components/formulaDialog.tsx
Normal file
50
webapp/src/components/formulaDialog.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface FormulaDialogProps {
|
||||
isOpen: boolean;
|
||||
close: () => void;
|
||||
onFormulaChanged: (name: string) => void;
|
||||
defaultFormula: string;
|
||||
}
|
||||
|
||||
export const FormulaDialog = (properties: FormulaDialogProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [formula, setFormula] = useState(properties.defaultFormula);
|
||||
return (
|
||||
<Dialog open={properties.isOpen} onClose={properties.close}>
|
||||
<DialogTitle>{t("formula_input.title")}</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<TextField
|
||||
defaultValue={formula}
|
||||
label={t("formula_input.label")}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onChange={(event) => {
|
||||
setFormula(event.target.value);
|
||||
}}
|
||||
spellCheck="false"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
properties.onFormulaChanged(formula);
|
||||
}}
|
||||
>
|
||||
{t("formula_input.update")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
132
webapp/src/components/formulabar.tsx
Normal file
132
webapp/src/components/formulabar.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { Button, styled } from "@mui/material";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Fx } from "../icons";
|
||||
import { FormulaDialog } from "./formulaDialog";
|
||||
|
||||
type FormulaBarProps = {
|
||||
cellAddress: string;
|
||||
formulaValue: string;
|
||||
onChange: (value: string) => void;
|
||||
};
|
||||
|
||||
const formulaBarHeight = 30;
|
||||
const headerColumnWidth = 30;
|
||||
|
||||
function FormulaBar(properties: FormulaBarProps) {
|
||||
const [formulaDialogOpen, setFormulaDialogOpen] = useState(false);
|
||||
const handleCloseFormulaDialog = () => {
|
||||
setFormulaDialogOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<AddressContainer>
|
||||
<CellBarAddress>{properties.cellAddress}</CellBarAddress>
|
||||
<StyledButton>
|
||||
<ChevronDown />
|
||||
</StyledButton>
|
||||
</AddressContainer>
|
||||
<Divider />
|
||||
<FormulaContainer>
|
||||
<FormulaSymbolButton>
|
||||
<Fx />
|
||||
</FormulaSymbolButton>
|
||||
<Editor
|
||||
onClick={() => {
|
||||
setFormulaDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
{properties.formulaValue}
|
||||
</Editor>
|
||||
</FormulaContainer>
|
||||
<FormulaDialog
|
||||
isOpen={formulaDialogOpen}
|
||||
close={handleCloseFormulaDialog}
|
||||
defaultFormula={properties.formulaValue}
|
||||
onFormulaChanged={(newName) => {
|
||||
properties.onChange(newName);
|
||||
setFormulaDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
width: 15px;
|
||||
min-width: 0px;
|
||||
padding: 0px;
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
`;
|
||||
|
||||
const FormulaSymbolButton = styled(StyledButton)`
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
const Divider = styled("div")`
|
||||
background-color: #e0e0e0;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
`;
|
||||
|
||||
const FormulaContainer = styled("div")`
|
||||
margin-left: 10px;
|
||||
line-height: 22px;
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const Container = styled("div")`
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: ${(properties): string =>
|
||||
properties.theme.palette.background.default};
|
||||
height: ${formulaBarHeight}px;
|
||||
`;
|
||||
|
||||
const AddressContainer = styled("div")`
|
||||
padding-left: 16px;
|
||||
color: #333;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
flex-grow: row;
|
||||
min-width: ${headerColumnWidth}px;
|
||||
`;
|
||||
|
||||
const CellBarAddress = styled("div")`
|
||||
width: 100%;
|
||||
text-align: "center";
|
||||
`;
|
||||
|
||||
const Editor = styled("div")`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
span {
|
||||
min-width: 1px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default FormulaBar;
|
||||
2
webapp/src/components/navigation/index.ts
Normal file
2
webapp/src/components/navigation/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default } from "./navigation";
|
||||
export type { NavigationProps } from "./navigation";
|
||||
122
webapp/src/components/navigation/menus.tsx
Normal file
122
webapp/src/components/navigation/menus.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
TextField,
|
||||
styled,
|
||||
} from "@mui/material";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { SheetOptions } from "./types";
|
||||
|
||||
interface SheetRenameDialogProps {
|
||||
isOpen: boolean;
|
||||
close: () => void;
|
||||
onNameChanged: (name: string) => void;
|
||||
defaultName: string;
|
||||
}
|
||||
|
||||
export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState(properties.defaultName);
|
||||
return (
|
||||
<Dialog open={properties.isOpen} onClose={properties.close}>
|
||||
<DialogTitle>{t("sheet_rename.title")}</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<TextField
|
||||
defaultValue={name}
|
||||
label={t("sheet_rename.label")}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onChange={(event) => {
|
||||
setName(event.target.value);
|
||||
}}
|
||||
spellCheck="false"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
properties.onNameChanged(name);
|
||||
}}
|
||||
>
|
||||
{t("sheet_rename.rename")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
interface SheetListMenuProps {
|
||||
isOpen: boolean;
|
||||
close: () => void;
|
||||
anchorEl: HTMLButtonElement | null;
|
||||
onSheetSelected: (index: number) => void;
|
||||
sheetOptionsList: SheetOptions[];
|
||||
}
|
||||
|
||||
const SheetListMenu = (properties: SheetListMenuProps) => {
|
||||
const { isOpen, close, anchorEl, onSheetSelected, sheetOptionsList } =
|
||||
properties;
|
||||
|
||||
return (
|
||||
<StyledMenu
|
||||
open={isOpen}
|
||||
onClose={close}
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: 6,
|
||||
}}
|
||||
>
|
||||
{sheetOptionsList.map((tab, index) => (
|
||||
<StyledMenuItem
|
||||
key={tab.sheetId}
|
||||
onClick={(): void => onSheetSelected(index)}
|
||||
>
|
||||
<ItemColor style={{ backgroundColor: tab.color }} />
|
||||
<ItemName>{tab.name}</ItemName>
|
||||
</StyledMenuItem>
|
||||
))}
|
||||
</StyledMenu>
|
||||
);
|
||||
};
|
||||
|
||||
const StyledMenu = styled(Menu)({
|
||||
"& .MuiPaper-root": {
|
||||
borderRadius: 8,
|
||||
padding: 4,
|
||||
},
|
||||
"& .MuiList-padding": {
|
||||
padding: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const StyledMenuItem = styled(MenuItem)({
|
||||
padding: 8,
|
||||
borderRadius: 4,
|
||||
});
|
||||
|
||||
const ItemColor = styled("div")`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
const ItemName = styled("div")`
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
`;
|
||||
|
||||
export default SheetListMenu;
|
||||
145
webapp/src/components/navigation/navigation.tsx
Normal file
145
webapp/src/components/navigation/navigation.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { styled } from "@mui/material";
|
||||
import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyledButton } from "../toolbar";
|
||||
import SheetListMenu from "./menus";
|
||||
import Sheet from "./sheet";
|
||||
import type { SheetOptions } from "./types";
|
||||
|
||||
export interface NavigationProps {
|
||||
sheets: SheetOptions[];
|
||||
selectedIndex: number;
|
||||
onSheetSelected: (index: number) => void;
|
||||
onAddBlankSheet: () => void;
|
||||
onSheetColorChanged: (hex: string) => void;
|
||||
onSheetRenamed: (name: string) => void;
|
||||
onSheetDeleted: () => void;
|
||||
}
|
||||
|
||||
function Navigation(props: NavigationProps) {
|
||||
const { t } = useTranslation();
|
||||
const { onSheetSelected, sheets, selectedIndex } = props;
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<StyledButton
|
||||
title={t("navigation.add_sheet")}
|
||||
$pressed={false}
|
||||
onClick={props.onAddBlankSheet}
|
||||
>
|
||||
<Plus />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
onClick={handleClick}
|
||||
title={t("navigation.sheet_list")}
|
||||
$pressed={false}
|
||||
>
|
||||
<Menu />
|
||||
</StyledButton>
|
||||
<Sheets>
|
||||
<SheetInner>
|
||||
{sheets.map((tab, index) => (
|
||||
<Sheet
|
||||
key={tab.sheetId}
|
||||
name={tab.name}
|
||||
color={tab.color}
|
||||
selected={index === selectedIndex}
|
||||
onSelected={() => onSheetSelected(index)}
|
||||
onColorChanged={(hex: string): void => {
|
||||
props.onSheetColorChanged(hex);
|
||||
}}
|
||||
onRenamed={(name: string): void => {
|
||||
props.onSheetRenamed(name);
|
||||
}}
|
||||
onDeleted={(): void => {
|
||||
props.onSheetDeleted();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</SheetInner>
|
||||
</Sheets>
|
||||
<LeftDivider />
|
||||
<ChevronLeftStyled />
|
||||
<ChevronRightStyled />
|
||||
<RightDivider />
|
||||
<Advert>ironcalc.com</Advert>
|
||||
<SheetListMenu
|
||||
anchorEl={anchorEl}
|
||||
isOpen={open}
|
||||
close={handleClose}
|
||||
sheetOptionsList={sheets}
|
||||
onSheetSelected={onSheetSelected}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const ChevronLeftStyled = styled(ChevronLeft)`
|
||||
color: #333333;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const ChevronRightStyled = styled(ChevronRight)`
|
||||
color: #333333;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
// Note I have to specify the font-family in every component that can be considered stand-alone
|
||||
const Container = styled("div")`
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
font-family: Inter;
|
||||
background-color: #fff;
|
||||
`;
|
||||
|
||||
const Sheets = styled("div")`
|
||||
flex-grow: 2;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const SheetInner = styled("div")`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const LeftDivider = styled("div")`
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0px 10px 0px 0px;
|
||||
`;
|
||||
|
||||
const RightDivider = styled("div")`
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0px 20px 0px 10px;
|
||||
`;
|
||||
|
||||
const Advert = styled("div")`
|
||||
color: #f2994a;
|
||||
margin-right: 12px;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
export default Navigation;
|
||||
142
webapp/src/components/navigation/sheet.tsx
Normal file
142
webapp/src/components/navigation/sheet.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { Button, Menu, MenuItem, styled } from "@mui/material";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import ColorPicker from "../colorPicker";
|
||||
import { SheetRenameDialog } from "./menus";
|
||||
interface SheetProps {
|
||||
name: string;
|
||||
color: string;
|
||||
selected: boolean;
|
||||
onSelected: () => void;
|
||||
onColorChanged: (hex: string) => void;
|
||||
onRenamed: (name: string) => void;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
function Sheet(props: SheetProps) {
|
||||
const { name, color, selected, onSelected } = props;
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
|
||||
const [colorPickerOpen, setColorPickerOpen] = useState(false);
|
||||
const colorButton = useRef(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const [renameDialogOpen, setRenameDialogOpen] = useState(false);
|
||||
const handleCloseRenameDialog = () => {
|
||||
setRenameDialogOpen(false);
|
||||
};
|
||||
const handleOpenRenameDialog = () => {
|
||||
setRenameDialogOpen(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Wrapper
|
||||
style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
|
||||
onClick={() => {
|
||||
onSelected();
|
||||
}}
|
||||
ref={colorButton}
|
||||
>
|
||||
<Name>{name}</Name>
|
||||
<StyledButton onClick={handleOpen}>
|
||||
<ChevronDown />
|
||||
</StyledButton>
|
||||
</Wrapper>
|
||||
<StyledMenu
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: 6,
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleOpenRenameDialog();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
Rename
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setColorPickerOpen(true);
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
Change Color
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
props.onDeleted();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
Delete
|
||||
</MenuItem>
|
||||
</StyledMenu>
|
||||
<SheetRenameDialog
|
||||
isOpen={renameDialogOpen}
|
||||
close={handleCloseRenameDialog}
|
||||
defaultName={name}
|
||||
onNameChanged={(newName) => {
|
||||
props.onRenamed(newName);
|
||||
setRenameDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
<ColorPicker
|
||||
color={color}
|
||||
onChange={(color): void => {
|
||||
props.onColorChanged(color);
|
||||
setColorPickerOpen(false);
|
||||
}}
|
||||
onClose={() => {
|
||||
setColorPickerOpen(false);
|
||||
}}
|
||||
anchorEl={colorButton}
|
||||
open={colorPickerOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const StyledMenu = styled(Menu)``;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
width: 15px;
|
||||
height: 24px;
|
||||
min-width: 0px;
|
||||
padding: 0px;
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Wrapper = styled("div")`
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
border-bottom: 3px solid;
|
||||
border-top: 3px solid white;
|
||||
line-height: 34px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Name = styled("div")`
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
text-wrap: nowrap;
|
||||
`;
|
||||
|
||||
export default Sheet;
|
||||
5
webapp/src/components/navigation/types.ts
Normal file
5
webapp/src/components/navigation/types.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface SheetOptions {
|
||||
name: string;
|
||||
color: string;
|
||||
sheetId: number;
|
||||
}
|
||||
13
webapp/src/components/tests/model.test.ts
Normal file
13
webapp/src/components/tests/model.test.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { Model, initSync } from "@ironcalc/wasm";
|
||||
import { expect, test } from "vitest";
|
||||
|
||||
// This is a simple test that showcases how to load the wasm module in the tests
|
||||
|
||||
test("simple calculation", async () => {
|
||||
const buffer = await readFile("node_modules/@ironcalc/wasm/wasm_bg.wasm");
|
||||
initSync(buffer);
|
||||
const model = new Model("en", "UTC");
|
||||
model.setUserInput(0, 1, 1, "=21*2");
|
||||
expect(model.getFormattedCellValue(0, 1, 1)).toBe("42");
|
||||
});
|
||||
7
webapp/src/components/tests/util.test.ts
Normal file
7
webapp/src/components/tests/util.test.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { expect, test } from "vitest";
|
||||
import { isNavigationKey } from "../util";
|
||||
|
||||
test("checks arrow left is a navigation key", () => {
|
||||
expect(isNavigationKey("ArrowLeft")).toBe(true);
|
||||
expect(isNavigationKey("Arrow")).toBe(false);
|
||||
});
|
||||
453
webapp/src/components/toolbar.tsx
Normal file
453
webapp/src/components/toolbar.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
import type {
|
||||
BorderOptions,
|
||||
HorizontalAlignment,
|
||||
VerticalAlignment,
|
||||
} from "@ironcalc/wasm";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import {
|
||||
AlignCenter,
|
||||
AlignLeft,
|
||||
AlignRight,
|
||||
ArrowDownToLine,
|
||||
ArrowUpToLine,
|
||||
Bold,
|
||||
ChevronDown,
|
||||
Euro,
|
||||
Grid2X2,
|
||||
Grid2x2Check,
|
||||
Grid2x2X,
|
||||
Italic,
|
||||
PaintBucket,
|
||||
Paintbrush2,
|
||||
Percent,
|
||||
Redo2,
|
||||
Strikethrough,
|
||||
Type,
|
||||
Underline,
|
||||
Undo2,
|
||||
} from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ArrowMiddleFromLine,
|
||||
DecimalPlacesDecreaseIcon,
|
||||
DecimalPlacesIncreaseIcon,
|
||||
} from "../icons";
|
||||
import { theme } from "../theme";
|
||||
import BorderPicker from "./borderPicker";
|
||||
import ColorPicker from "./colorPicker";
|
||||
import FormatMenu from "./formatMenu";
|
||||
import {
|
||||
NumberFormats,
|
||||
decreaseDecimalPlaces,
|
||||
increaseDecimalPlaces,
|
||||
} from "./formatUtil";
|
||||
|
||||
type ToolbarProperties = {
|
||||
canUndo: boolean;
|
||||
canRedo: boolean;
|
||||
onRedo: () => void;
|
||||
onUndo: () => void;
|
||||
onToggleUnderline: (u: boolean) => void;
|
||||
onToggleBold: (v: boolean) => void;
|
||||
onToggleItalic: (v: boolean) => void;
|
||||
onToggleStrike: (v: boolean) => void;
|
||||
onToggleHorizontalAlign: (v: string) => void;
|
||||
onToggleVerticalAlign: (v: string) => void;
|
||||
onCopyStyles: () => void;
|
||||
onTextColorPicked: (hex: string) => void;
|
||||
onFillColorPicked: (hex: string) => void;
|
||||
onNumberFormatPicked: (numberFmt: string) => void;
|
||||
onBorderChanged: (border: BorderOptions) => void;
|
||||
fillColor: string;
|
||||
fontColor: string;
|
||||
bold: boolean;
|
||||
underline: boolean;
|
||||
italic: boolean;
|
||||
strike: boolean;
|
||||
horizontalAlign: HorizontalAlignment;
|
||||
verticalAlign: VerticalAlignment;
|
||||
canEdit: boolean;
|
||||
numFmt: string;
|
||||
showGridLines: boolean;
|
||||
onToggleShowGridLines: (show: boolean) => void;
|
||||
};
|
||||
|
||||
function Toolbar(properties: ToolbarProperties) {
|
||||
const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
|
||||
const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
|
||||
const [borderPickerOpen, setBorderPickerOpen] = useState(false);
|
||||
|
||||
const fontColorButton = useRef(null);
|
||||
const fillColorButton = useRef(null);
|
||||
const borderButton = useRef(null);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { canEdit } = properties;
|
||||
|
||||
return (
|
||||
<ToolbarContainer>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={properties.onUndo}
|
||||
disabled={!properties.canUndo}
|
||||
title={t("toolbar.undo")}
|
||||
>
|
||||
<Undo2 />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={properties.onRedo}
|
||||
disabled={!properties.canRedo}
|
||||
title={t("toolbar.redo")}
|
||||
>
|
||||
<Redo2 />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={properties.onCopyStyles}
|
||||
title={t("toolbar.copy_styles")}
|
||||
>
|
||||
<Paintbrush2 />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={(): void => {
|
||||
properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.euro")}
|
||||
>
|
||||
<Euro />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={(): void => {
|
||||
properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.percentage")}
|
||||
>
|
||||
<Percent />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={(): void => {
|
||||
properties.onNumberFormatPicked(
|
||||
decreaseDecimalPlaces(properties.numFmt),
|
||||
);
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.decimal_places_decrease")}
|
||||
>
|
||||
<DecimalPlacesDecreaseIcon />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={(): void => {
|
||||
properties.onNumberFormatPicked(
|
||||
increaseDecimalPlaces(properties.numFmt),
|
||||
);
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.decimal_places_increase")}
|
||||
>
|
||||
<DecimalPlacesIncreaseIcon />
|
||||
</StyledButton>
|
||||
<FormatMenu
|
||||
numFmt={properties.numFmt}
|
||||
onChange={(numberFmt): void => {
|
||||
properties.onNumberFormatPicked(numberFmt);
|
||||
}}
|
||||
onExited={(): void => {}}
|
||||
anchorOrigin={{
|
||||
horizontal: 20, // Aligning the menu to the middle of FormatButton
|
||||
vertical: "bottom",
|
||||
}}
|
||||
>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.format_number")}
|
||||
sx={{
|
||||
width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{"123"}
|
||||
<ChevronDown />
|
||||
</StyledButton>
|
||||
</FormatMenu>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.bold}
|
||||
onClick={() => properties.onToggleBold(!properties.bold)}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.bold")}
|
||||
>
|
||||
<Bold />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.italic}
|
||||
onClick={() => properties.onToggleItalic(!properties.italic)}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.italic")}
|
||||
>
|
||||
<Italic />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.underline}
|
||||
onClick={() => properties.onToggleUnderline(!properties.underline)}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.underline")}
|
||||
>
|
||||
<Underline />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.strike}
|
||||
onClick={() => properties.onToggleStrike(!properties.strike)}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.strike_trough")}
|
||||
>
|
||||
<Strikethrough />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.font_color")}
|
||||
ref={fontColorButton}
|
||||
$underlinedColor={properties.fontColor}
|
||||
onClick={() => setFontColorPickerOpen(true)}
|
||||
>
|
||||
<Type />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.fill_color")}
|
||||
ref={fillColorButton}
|
||||
$underlinedColor={properties.fillColor}
|
||||
onClick={() => setFillColorPickerOpen(true)}
|
||||
>
|
||||
<PaintBucket />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.horizontalAlign === "left"}
|
||||
onClick={() =>
|
||||
properties.onToggleHorizontalAlign(
|
||||
properties.horizontalAlign === "left" ? "general" : "left",
|
||||
)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.align_left")}
|
||||
>
|
||||
<AlignLeft />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.horizontalAlign === "center"}
|
||||
onClick={() =>
|
||||
properties.onToggleHorizontalAlign(
|
||||
properties.horizontalAlign === "center" ? "general" : "center",
|
||||
)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.align_center")}
|
||||
>
|
||||
<AlignCenter />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.horizontalAlign === "right"}
|
||||
onClick={() =>
|
||||
properties.onToggleHorizontalAlign(
|
||||
properties.horizontalAlign === "right" ? "general" : "right",
|
||||
)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.align_right")}
|
||||
>
|
||||
<AlignRight />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.verticalAlign === "top"}
|
||||
onClick={() =>
|
||||
properties.onToggleVerticalAlign(
|
||||
properties.verticalAlign === "top" ? "bottom" : "top",
|
||||
)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.vertical_align_top")}
|
||||
>
|
||||
<ArrowUpToLine />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.verticalAlign === "center"}
|
||||
onClick={() =>
|
||||
properties.onToggleVerticalAlign(
|
||||
properties.verticalAlign === "center" ? "bottom" : "center",
|
||||
)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.vertical_align_center")}
|
||||
>
|
||||
<ArrowMiddleFromLine />
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={properties.verticalAlign === "bottom"}
|
||||
onClick={() => properties.onToggleVerticalAlign("bottom")}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.vertical_align_bottom")}
|
||||
>
|
||||
<ArrowDownToLine />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={() => setBorderPickerOpen(true)}
|
||||
ref={borderButton}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.borders")}
|
||||
>
|
||||
<Grid2X2 />
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={() =>
|
||||
properties.onToggleShowGridLines(!properties.showGridLines)
|
||||
}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.show_hide_grid_lines")}
|
||||
>
|
||||
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
|
||||
</StyledButton>
|
||||
|
||||
<ColorPicker
|
||||
color={properties.fontColor}
|
||||
onChange={(color): void => {
|
||||
properties.onTextColorPicked(color);
|
||||
setFontColorPickerOpen(false);
|
||||
}}
|
||||
onClose={() => {
|
||||
setFontColorPickerOpen(false);
|
||||
}}
|
||||
anchorEl={fontColorButton}
|
||||
open={fontColorPickerOpen}
|
||||
/>
|
||||
<ColorPicker
|
||||
color={properties.fillColor}
|
||||
onChange={(color): void => {
|
||||
properties.onFillColorPicked(color);
|
||||
setFillColorPickerOpen(false);
|
||||
}}
|
||||
onClose={() => {
|
||||
setFillColorPickerOpen(false);
|
||||
}}
|
||||
anchorEl={fillColorButton}
|
||||
open={fillColorPickerOpen}
|
||||
/>
|
||||
<BorderPicker
|
||||
onChange={(border): void => {
|
||||
properties.onBorderChanged(border);
|
||||
setBorderPickerOpen(false);
|
||||
}}
|
||||
anchorEl={borderButton}
|
||||
open={borderPickerOpen}
|
||||
/>
|
||||
</ToolbarContainer>
|
||||
);
|
||||
}
|
||||
const toolbarHeight = 40;
|
||||
|
||||
const ToolbarContainer = styled("div")`
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.palette.background.paper};
|
||||
height: ${toolbarHeight}px;
|
||||
line-height: ${toolbarHeight}px;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.palette.grey["600"]};
|
||||
font-family: Inter;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
overflow-x: auto;
|
||||
`;
|
||||
|
||||
type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
|
||||
export const StyledButton = styled("button")<TypeButtonProperties>(
|
||||
({ disabled, $pressed, $underlinedColor }) => {
|
||||
const result = {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "26px",
|
||||
border: "0px solid #fff",
|
||||
borderRadius: "2px",
|
||||
marginRight: "5px",
|
||||
transition: "all 0.2s",
|
||||
cursor: "pointer",
|
||||
backgroundColor: "white",
|
||||
padding: "0px",
|
||||
svg: {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
},
|
||||
};
|
||||
if (disabled) {
|
||||
return {
|
||||
...result,
|
||||
color: theme.palette.grey["600"],
|
||||
cursor: "default",
|
||||
};
|
||||
}
|
||||
return {
|
||||
...result,
|
||||
borderTop: $underlinedColor ? "3px solid #FFF" : "none",
|
||||
borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
|
||||
color: "#21243A",
|
||||
backgroundColor: $pressed ? "#EEE" : "#FFF",
|
||||
"&:hover": {
|
||||
backgroundColor: "#F1F2F8",
|
||||
borderTopColor: "#F1F2F8",
|
||||
},
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
const Divider = styled("div")({
|
||||
width: "0px",
|
||||
height: "10px",
|
||||
borderLeft: "1px solid #D3D6E9",
|
||||
marginLeft: "5px",
|
||||
marginRight: "10px",
|
||||
});
|
||||
|
||||
export default Toolbar;
|
||||
11
webapp/src/components/types.ts
Normal file
11
webapp/src/components/types.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export interface Area {
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
}
|
||||
|
||||
export interface Cell {
|
||||
row: number;
|
||||
column: number;
|
||||
}
|
||||
225
webapp/src/components/useKeyboardNavigation.ts
Normal file
225
webapp/src/components/useKeyboardNavigation.ts
Normal file
@@ -0,0 +1,225 @@
|
||||
import { type KeyboardEvent, type RefObject, useCallback } from "react";
|
||||
import { type NavigationKey, isEditingKey, isNavigationKey } from "./util";
|
||||
|
||||
export enum Border {
|
||||
Top = "top",
|
||||
Bottom = "bottom",
|
||||
Right = "right",
|
||||
Left = "left",
|
||||
}
|
||||
|
||||
interface Options {
|
||||
onCellsDeleted: () => void;
|
||||
onExpandAreaSelectedKeyboard: (
|
||||
key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
|
||||
) => void;
|
||||
onEditKeyPressStart: (initText: string) => void;
|
||||
onCellEditStart: () => void;
|
||||
onBold: () => void;
|
||||
onItalic: () => void;
|
||||
onUnderline: () => void;
|
||||
onNavigationToEdge: (direction: NavigationKey) => void;
|
||||
onPageDown: () => void;
|
||||
onPageUp: () => void;
|
||||
onArrowDown: () => void;
|
||||
onArrowUp: () => void;
|
||||
onArrowLeft: () => void;
|
||||
onArrowRight: () => void;
|
||||
onKeyHome: () => void;
|
||||
onKeyEnd: () => void;
|
||||
onUndo: () => void;
|
||||
onRedo: () => void;
|
||||
onNextSheet: () => void;
|
||||
onPreviousSheet: () => void;
|
||||
root: RefObject<HTMLDivElement>;
|
||||
}
|
||||
|
||||
// # IronCalc Keyboard accessibility:
|
||||
// * ArrowKeys: navigation
|
||||
// * Enter: ArrowDown (Excel behaviour not g-sheets)
|
||||
// * Tab: arrow right
|
||||
// * Shift+Tab: arrow left
|
||||
// * Home/End: First/last column
|
||||
// * Shift+Arrows: selection
|
||||
// * Ctrl+Arrows: navigating to edge
|
||||
// * Ctrl+Home/End: navigation to end
|
||||
// * PagDown/Up scroll Down/Up
|
||||
// * Alt+ArrowDown/Up: next/previous sheet
|
||||
// (NB: Excel uses Ctrl+PageUp/Down for this but that highjacks a browser behaviour,
|
||||
// go to next/previous tab)
|
||||
// * Ctrl+u/i/b: style
|
||||
// * Ctrl+z/y: undo/redo
|
||||
// * F2: start editing
|
||||
|
||||
// References:
|
||||
// In Google Sheets: Ctrl+/ shows the list of keyboard shortcuts
|
||||
// https://support.google.com/docs/answer/181110
|
||||
// https://support.microsoft.com/en-us/office/keyboard-shortcuts-in-excel-1798d9d5-842a-42b8-9c99-9b7213f0040f
|
||||
|
||||
const useKeyboardNavigation = (
|
||||
options: Options,
|
||||
): { onKeyDown: (event: KeyboardEvent) => void } => {
|
||||
const onKeyDown = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
const { key } = event;
|
||||
const { root } = options;
|
||||
// Silence the linter
|
||||
if (!root.current) {
|
||||
return;
|
||||
}
|
||||
if (event.target !== root.current) {
|
||||
return;
|
||||
}
|
||||
if (event.metaKey || event.ctrlKey) {
|
||||
switch (key) {
|
||||
case "z": {
|
||||
options.onUndo();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
case "y": {
|
||||
options.onRedo();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
case "b": {
|
||||
options.onBold();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
case "i": {
|
||||
options.onItalic();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
case "u": {
|
||||
options.onUnderline();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
// No default
|
||||
}
|
||||
if (isNavigationKey(key)) {
|
||||
// Ctrl+Arrows, Ctrl+Home/End
|
||||
options.onNavigationToEdge(key);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.altKey) {
|
||||
switch (key) {
|
||||
case "ArrowDown": {
|
||||
// select next sheet
|
||||
options.onNextSheet();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
case "ArrowUp": {
|
||||
// select previous sheet
|
||||
options.onPreviousSheet();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (key === "F2") {
|
||||
options.onCellEditStart();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (isEditingKey(key) || key === "Backspace") {
|
||||
const initText = key === "Backspace" ? "" : key;
|
||||
options.onEditKeyPressStart(initText);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// Worksheet Navigation
|
||||
if (event.shiftKey) {
|
||||
if (
|
||||
key === "ArrowRight" ||
|
||||
key === "ArrowLeft" ||
|
||||
key === "ArrowUp" ||
|
||||
key === "ArrowDown"
|
||||
) {
|
||||
options.onExpandAreaSelectedKeyboard(key);
|
||||
} else if (key === "Tab") {
|
||||
options.onArrowLeft();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
switch (key) {
|
||||
case "ArrowRight":
|
||||
case "Tab": {
|
||||
options.onArrowRight();
|
||||
|
||||
break;
|
||||
}
|
||||
case "ArrowLeft": {
|
||||
options.onArrowLeft();
|
||||
|
||||
break;
|
||||
}
|
||||
case "ArrowDown":
|
||||
case "Enter": {
|
||||
options.onArrowDown();
|
||||
|
||||
break;
|
||||
}
|
||||
case "ArrowUp": {
|
||||
options.onArrowUp();
|
||||
|
||||
break;
|
||||
}
|
||||
case "End": {
|
||||
options.onKeyEnd();
|
||||
|
||||
break;
|
||||
}
|
||||
case "Home": {
|
||||
options.onKeyHome();
|
||||
|
||||
break;
|
||||
}
|
||||
case "Delete": {
|
||||
options.onCellsDeleted();
|
||||
|
||||
break;
|
||||
}
|
||||
case "PageDown": {
|
||||
options.onPageDown();
|
||||
|
||||
break;
|
||||
}
|
||||
case "PageUp": {
|
||||
options.onPageUp();
|
||||
|
||||
break;
|
||||
}
|
||||
// No default
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
[options],
|
||||
);
|
||||
return { onKeyDown };
|
||||
};
|
||||
|
||||
export default useKeyboardNavigation;
|
||||
169
webapp/src/components/usePointer.ts
Normal file
169
webapp/src/components/usePointer.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
import { type PointerEvent, type RefObject, useCallback, useRef } from "react";
|
||||
import type WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
|
||||
import {
|
||||
headerColumnWidth,
|
||||
headerRowHeight,
|
||||
} from "./WorksheetCanvas/worksheetCanvas";
|
||||
import type { Cell } from "./types";
|
||||
|
||||
interface PointerSettings {
|
||||
canvasElement: RefObject<HTMLCanvasElement>;
|
||||
worksheetCanvas: RefObject<WorksheetCanvas | null>;
|
||||
worksheetElement: RefObject<HTMLDivElement>;
|
||||
onCellSelected: (cell: Cell, event: React.MouseEvent) => void;
|
||||
onAreaSelecting: (cell: Cell) => void;
|
||||
onAreaSelected: () => void;
|
||||
onExtendToCell: (cell: Cell) => void;
|
||||
onExtendToEnd: () => void;
|
||||
}
|
||||
|
||||
interface PointerEvents {
|
||||
onPointerDown: (event: PointerEvent) => void;
|
||||
onPointerMove: (event: PointerEvent) => void;
|
||||
onPointerUp: (event: PointerEvent) => void;
|
||||
onPointerHandleDown: (event: PointerEvent) => void;
|
||||
}
|
||||
|
||||
const usePointer = (options: PointerSettings): PointerEvents => {
|
||||
const isSelecting = useRef(false);
|
||||
const isExtending = useRef(false);
|
||||
|
||||
const onPointerMove = useCallback(
|
||||
(event: PointerEvent): void => {
|
||||
// Range selections are disabled on non-mouse devices. Use touch move only
|
||||
// to scroll for now.
|
||||
if (event.pointerType !== "mouse") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSelecting.current) {
|
||||
const { canvasElement, worksheetCanvas } = options;
|
||||
const canvas = canvasElement.current;
|
||||
const worksheet = worksheetCanvas.current;
|
||||
// Silence the linter
|
||||
if (!worksheet || !canvas) {
|
||||
return;
|
||||
}
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
x -= canvasRect.x;
|
||||
y -= canvasRect.y;
|
||||
const cell = worksheet.getCellByCoordinates(x, y);
|
||||
if (cell) {
|
||||
options.onAreaSelecting(cell);
|
||||
} else {
|
||||
console.log("Failed");
|
||||
}
|
||||
} else if (isExtending.current) {
|
||||
const { canvasElement, worksheetCanvas } = options;
|
||||
const canvas = canvasElement.current;
|
||||
const worksheet = worksheetCanvas.current;
|
||||
// Silence the linter
|
||||
if (!worksheet || !canvas) {
|
||||
return;
|
||||
}
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
x -= canvasRect.x;
|
||||
y -= canvasRect.y;
|
||||
const cell = worksheet.getCellByCoordinates(x, y);
|
||||
if (!cell) {
|
||||
return;
|
||||
}
|
||||
options.onExtendToCell(cell);
|
||||
}
|
||||
},
|
||||
[options],
|
||||
);
|
||||
|
||||
const onPointerUp = useCallback(
|
||||
(event: PointerEvent): void => {
|
||||
if (isSelecting.current) {
|
||||
const { worksheetElement } = options;
|
||||
isSelecting.current = false;
|
||||
worksheetElement.current?.releasePointerCapture(event.pointerId);
|
||||
options.onAreaSelected();
|
||||
} else if (isExtending.current) {
|
||||
const { worksheetElement } = options;
|
||||
isExtending.current = false;
|
||||
worksheetElement.current?.releasePointerCapture(event.pointerId);
|
||||
options.onExtendToEnd();
|
||||
}
|
||||
},
|
||||
[options],
|
||||
);
|
||||
|
||||
const onPointerDown = useCallback(
|
||||
(event: PointerEvent) => {
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
const { canvasElement, worksheetElement, worksheetCanvas } = options;
|
||||
const worksheet = worksheetCanvas.current;
|
||||
const canvas = canvasElement.current;
|
||||
const worksheetWrapper = worksheetElement.current;
|
||||
// Silence the linter
|
||||
if (!canvas || !worksheet || !worksheetWrapper) {
|
||||
return;
|
||||
}
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
x -= canvasRect.x;
|
||||
y -= canvasRect.y;
|
||||
// Makes sure is in the sheet area
|
||||
if (
|
||||
x > canvasRect.width ||
|
||||
x < headerColumnWidth ||
|
||||
y < headerRowHeight ||
|
||||
y > canvasRect.height
|
||||
) {
|
||||
if (
|
||||
x > 0 &&
|
||||
x < headerColumnWidth &&
|
||||
y > headerRowHeight &&
|
||||
y < canvasRect.height
|
||||
) {
|
||||
// Click on a row number
|
||||
const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
|
||||
if (cell) {
|
||||
// TODO
|
||||
// Row selected
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
const cell = worksheet.getCellByCoordinates(x, y);
|
||||
if (cell) {
|
||||
options.onCellSelected(cell, event);
|
||||
isSelecting.current = true;
|
||||
worksheetWrapper.setPointerCapture(event.pointerId);
|
||||
}
|
||||
},
|
||||
[options],
|
||||
);
|
||||
|
||||
const onPointerHandleDown = useCallback(
|
||||
(event: PointerEvent) => {
|
||||
const worksheetWrapper = options.worksheetElement.current;
|
||||
// Silence the linter
|
||||
if (!worksheetWrapper) {
|
||||
return;
|
||||
}
|
||||
isExtending.current = true;
|
||||
worksheetWrapper.setPointerCapture(event.pointerId);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
[options],
|
||||
);
|
||||
|
||||
return {
|
||||
onPointerDown,
|
||||
onPointerMove,
|
||||
onPointerUp,
|
||||
onPointerHandleDown,
|
||||
// onContextMenu,
|
||||
};
|
||||
};
|
||||
|
||||
export default usePointer;
|
||||
42
webapp/src/components/util.ts
Normal file
42
webapp/src/components/util.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { Area, Cell } from "./types";
|
||||
|
||||
import { columnNameFromNumber } from "@ironcalc/wasm";
|
||||
|
||||
/**
|
||||
* Returns true if the keypress should start editing
|
||||
*/
|
||||
export function isEditingKey(key: string): boolean {
|
||||
if (key.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
const code = key.codePointAt(0) ?? 0;
|
||||
if (code > 0 && code < 255) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export type NavigationKey =
|
||||
| "ArrowRight"
|
||||
| "ArrowLeft"
|
||||
| "ArrowDown"
|
||||
| "ArrowUp"
|
||||
| "Home"
|
||||
| "End";
|
||||
|
||||
export const isNavigationKey = (key: string): key is NavigationKey =>
|
||||
["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(
|
||||
key,
|
||||
);
|
||||
|
||||
export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
|
||||
const isSingleCell =
|
||||
selectedArea.rowStart === selectedArea.rowEnd &&
|
||||
selectedArea.columnEnd === selectedArea.columnStart;
|
||||
|
||||
return isSingleCell && selectedCell
|
||||
? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
|
||||
: `${columnNameFromNumber(selectedArea.columnStart)}${
|
||||
selectedArea.rowStart
|
||||
}:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
|
||||
};
|
||||
378
webapp/src/components/workbook.tsx
Normal file
378
webapp/src/components/workbook.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
import type { BorderOptions, Model, WorksheetProperties } from "@ironcalc/wasm";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { LAST_COLUMN } from "./WorksheetCanvas/constants";
|
||||
import FormulaBar from "./formulabar";
|
||||
import Navigation from "./navigation/navigation";
|
||||
import Toolbar from "./toolbar";
|
||||
import useKeyboardNavigation from "./useKeyboardNavigation";
|
||||
import { type NavigationKey, getCellAddress } from "./util";
|
||||
import type { WorkbookState } from "./workbookState";
|
||||
import Worksheet from "./worksheet";
|
||||
|
||||
const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
|
||||
const { model, workbookState } = props;
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Calling `setRedrawId((id) => id + 1);` forces a redraw
|
||||
// This is needed because `model` can change without React being aware of it
|
||||
const setRedrawId = useState(0)[1];
|
||||
const info = model
|
||||
.getWorksheetsProperties()
|
||||
.map(({ name, color, sheet_id }: WorksheetProperties) => {
|
||||
return { name, color: color ? color : "#FFF", sheetId: sheet_id };
|
||||
});
|
||||
|
||||
const onRedo = () => {
|
||||
model.redo();
|
||||
setRedrawId((id) => id + 1);
|
||||
};
|
||||
|
||||
const onUndo = () => {
|
||||
model.undo();
|
||||
setRedrawId((id) => id + 1);
|
||||
};
|
||||
|
||||
const updateRangeStyle = (stylePath: string, value: string) => {
|
||||
const {
|
||||
sheet,
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
const row = Math.min(rowStart, rowEnd);
|
||||
const column = Math.min(columnStart, columnEnd);
|
||||
const range = {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
width: Math.abs(columnEnd - columnStart) + 1,
|
||||
height: Math.abs(rowEnd - rowStart) + 1,
|
||||
};
|
||||
model.updateRangeStyle(range, stylePath, value);
|
||||
setRedrawId((id) => id + 1);
|
||||
};
|
||||
|
||||
const onToggleUnderline = (value: boolean) => {
|
||||
updateRangeStyle("font.u", `${value}`);
|
||||
};
|
||||
|
||||
const onToggleItalic = (value: boolean) => {
|
||||
updateRangeStyle("font.i", `${value}`);
|
||||
};
|
||||
|
||||
const onToggleBold = (value: boolean) => {
|
||||
updateRangeStyle("font.b", `${value}`);
|
||||
};
|
||||
|
||||
const onToggleStrike = (value: boolean) => {
|
||||
updateRangeStyle("font.strike", `${value}`);
|
||||
};
|
||||
|
||||
const onToggleHorizontalAlign = (value: string) => {
|
||||
updateRangeStyle("alignment.horizontal", value);
|
||||
};
|
||||
|
||||
const onToggleVerticalAlign = (value: string) => {
|
||||
updateRangeStyle("alignment.vertical", value);
|
||||
};
|
||||
|
||||
const onTextColorPicked = (hex: string) => {
|
||||
updateRangeStyle("font.color", hex);
|
||||
};
|
||||
|
||||
const onFillColorPicked = (hex: string) => {
|
||||
updateRangeStyle("fill.fg_color", hex);
|
||||
};
|
||||
|
||||
const onNumberFormatPicked = (numberFmt: string) => {
|
||||
updateRangeStyle("num_fmt", numberFmt);
|
||||
};
|
||||
|
||||
const onCopyStyles = () => {
|
||||
const {
|
||||
sheet,
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
const row1 = Math.min(rowStart, rowEnd);
|
||||
const column1 = Math.min(columnStart, columnEnd);
|
||||
const row2 = Math.max(rowStart, rowEnd);
|
||||
const column2 = Math.max(columnStart, columnEnd);
|
||||
|
||||
const styles = [];
|
||||
for (let row = row1; row <= row2; row++) {
|
||||
const styleRow = [];
|
||||
for (let column = column1; column <= column2; column++) {
|
||||
styleRow.push(model.getCellStyle(sheet, row, column));
|
||||
}
|
||||
styles.push(styleRow);
|
||||
}
|
||||
workbookState.setCopyStyles(styles);
|
||||
// FIXME: This is so that the cursor indicates there are styles to be pasted
|
||||
const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
|
||||
if (el) {
|
||||
(el as HTMLElement).style.cursor =
|
||||
`url('data:image/svg+xml;utf8,<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paintbrush-vertical"><path d="M10 2v2"></path><path d="M14 2v4"></path><path d="M17 2a1 1 0 0 1 1 1v9H6V3a1 1 0 0 1 1-1z"></path><path d="M6 12a1 1 0 0 0-1 1v1a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1v2.9a2 2 0 1 0 4 0V17a1 1 0 0 1 1-1h2a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1"></path></svg>'), auto`;
|
||||
}
|
||||
};
|
||||
|
||||
// FIXME: I *think* we should have only one on onKeyPressed function that goes to
|
||||
// the Rust end
|
||||
const { onKeyDown } = useKeyboardNavigation({
|
||||
onCellsDeleted: (): void => {
|
||||
const {
|
||||
sheet,
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
const row = Math.min(rowStart, rowEnd);
|
||||
const column = Math.min(columnStart, columnEnd);
|
||||
|
||||
const width = Math.abs(columnEnd - columnStart) + 1;
|
||||
const height = Math.abs(rowEnd - rowStart) + 1;
|
||||
model.rangeClearContents(
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
row + height,
|
||||
column + width,
|
||||
);
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onExpandAreaSelectedKeyboard: (
|
||||
key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
|
||||
): void => {
|
||||
model.onExpandSelectedRange(key);
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onEditKeyPressStart: (initText: string): void => {
|
||||
console.log(initText);
|
||||
throw new Error("Function not implemented.");
|
||||
},
|
||||
onCellEditStart: (): void => {
|
||||
throw new Error("Function not implemented.");
|
||||
},
|
||||
onBold: () => {
|
||||
const { sheet, row, column } = model.getSelectedView();
|
||||
const value = !model.getCellStyle(sheet, row, column).font.b;
|
||||
onToggleBold(!value);
|
||||
},
|
||||
onItalic: () => {
|
||||
const { sheet, row, column } = model.getSelectedView();
|
||||
const value = !model.getCellStyle(sheet, row, column).font.i;
|
||||
onToggleItalic(!value);
|
||||
},
|
||||
onUnderline: () => {
|
||||
const { sheet, row, column } = model.getSelectedView();
|
||||
const value = !model.getCellStyle(sheet, row, column).font.u;
|
||||
onToggleUnderline(!value);
|
||||
},
|
||||
onNavigationToEdge: (direction: NavigationKey): void => {
|
||||
console.log(direction);
|
||||
throw new Error("Function not implemented.");
|
||||
},
|
||||
onPageDown: (): void => {
|
||||
model.onPageDown();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onPageUp: (): void => {
|
||||
model.onPageUp();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onArrowDown: (): void => {
|
||||
model.onArrowDown();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onArrowUp: (): void => {
|
||||
model.onArrowUp();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onArrowLeft: (): void => {
|
||||
model.onArrowLeft();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onArrowRight: (): void => {
|
||||
model.onArrowRight();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onKeyHome: (): void => {
|
||||
const view = model.getSelectedView();
|
||||
const cell = model.getSelectedCell();
|
||||
model.setSelectedCell(cell[1], 1);
|
||||
model.setTopLeftVisibleCell(view.top_row, 1);
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onKeyEnd: (): void => {
|
||||
const view = model.getSelectedView();
|
||||
const cell = model.getSelectedCell();
|
||||
model.setSelectedCell(cell[1], LAST_COLUMN);
|
||||
model.setTopLeftVisibleCell(view.top_row, LAST_COLUMN - 5);
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onUndo: (): void => {
|
||||
model.undo();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onRedo: (): void => {
|
||||
model.redo();
|
||||
setRedrawId((id) => id + 1);
|
||||
},
|
||||
onNextSheet: (): void => {
|
||||
const nextSheet = model.getSelectedSheet() + 1;
|
||||
if (nextSheet >= model.getWorksheetsProperties().length) {
|
||||
model.setSelectedSheet(0);
|
||||
} else {
|
||||
model.setSelectedSheet(nextSheet);
|
||||
}
|
||||
},
|
||||
onPreviousSheet: (): void => {
|
||||
const nextSheet = model.getSelectedSheet() - 1;
|
||||
if (nextSheet < 0) {
|
||||
model.setSelectedSheet(model.getWorksheetsProperties().length - 1);
|
||||
} else {
|
||||
model.setSelectedSheet(nextSheet);
|
||||
}
|
||||
},
|
||||
root: rootRef,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!rootRef.current) {
|
||||
return;
|
||||
}
|
||||
rootRef.current.focus();
|
||||
});
|
||||
|
||||
const {
|
||||
sheet,
|
||||
row,
|
||||
column,
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
|
||||
const cellAddress = getCellAddress(
|
||||
{ rowStart, rowEnd, columnStart, columnEnd },
|
||||
{ row, column },
|
||||
);
|
||||
const formulaValue = model.getCellContent(sheet, row, column);
|
||||
|
||||
const style = model.getCellStyle(sheet, row, column);
|
||||
|
||||
return (
|
||||
<Container ref={rootRef} onKeyDown={onKeyDown} tabIndex={0}>
|
||||
<Toolbar
|
||||
canUndo={model.canUndo()}
|
||||
canRedo={model.canRedo()}
|
||||
onRedo={onRedo}
|
||||
onUndo={onUndo}
|
||||
onToggleUnderline={onToggleUnderline}
|
||||
onToggleBold={onToggleBold}
|
||||
onToggleItalic={onToggleItalic}
|
||||
onToggleStrike={onToggleStrike}
|
||||
onToggleHorizontalAlign={onToggleHorizontalAlign}
|
||||
onToggleVerticalAlign={onToggleVerticalAlign}
|
||||
onCopyStyles={onCopyStyles}
|
||||
onTextColorPicked={onTextColorPicked}
|
||||
onFillColorPicked={onFillColorPicked}
|
||||
onNumberFormatPicked={onNumberFormatPicked}
|
||||
onBorderChanged={(border: BorderOptions): void => {
|
||||
const {
|
||||
sheet,
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
const row = Math.min(rowStart, rowEnd);
|
||||
const column = Math.min(columnStart, columnEnd);
|
||||
|
||||
const width = Math.abs(columnEnd - columnStart) + 1;
|
||||
const height = Math.abs(rowEnd - rowStart) + 1;
|
||||
const borderArea = {
|
||||
type: border.border,
|
||||
item: border,
|
||||
};
|
||||
model.setAreaWithBorder(
|
||||
{ sheet, row, column, width, height },
|
||||
borderArea,
|
||||
);
|
||||
setRedrawId((id) => id + 1);
|
||||
}}
|
||||
fillColor={style.fill.fg_color || "#FFF"}
|
||||
fontColor={style.font.color}
|
||||
bold={style.font.b}
|
||||
underline={style.font.u}
|
||||
italic={style.font.i}
|
||||
strike={style.font.strike}
|
||||
horizontalAlign={
|
||||
style.alignment ? style.alignment.horizontal : "general"
|
||||
}
|
||||
verticalAlign={style.alignment ? style.alignment.vertical : "center"}
|
||||
canEdit={true}
|
||||
numFmt={style.num_fmt}
|
||||
showGridLines={model.getShowGridLines(sheet)}
|
||||
onToggleShowGridLines={(show) => {
|
||||
model.setShowGridLines(sheet, show);
|
||||
setRedrawId((id) => id + 1);
|
||||
}}
|
||||
/>
|
||||
<FormulaBar
|
||||
cellAddress={cellAddress}
|
||||
formulaValue={formulaValue}
|
||||
onChange={(value) => {
|
||||
model.setUserInput(sheet, row, column, value);
|
||||
setRedrawId((id) => id + 1);
|
||||
}}
|
||||
/>
|
||||
<Worksheet
|
||||
model={model}
|
||||
workbookState={workbookState}
|
||||
refresh={(): void => {
|
||||
setRedrawId((id) => id + 1);
|
||||
}}
|
||||
/>
|
||||
<Navigation
|
||||
sheets={info}
|
||||
selectedIndex={model.getSelectedSheet()}
|
||||
onSheetSelected={(sheet: number): void => {
|
||||
model.setSelectedSheet(sheet);
|
||||
setRedrawId((value) => value + 1);
|
||||
}}
|
||||
onAddBlankSheet={(): void => {
|
||||
model.newSheet();
|
||||
setRedrawId((value) => value + 1);
|
||||
}}
|
||||
onSheetColorChanged={(hex: string): void => {
|
||||
try {
|
||||
model.setSheetColor(model.getSelectedSheet(), hex);
|
||||
setRedrawId((value) => value + 1);
|
||||
} catch (e) {
|
||||
// TODO: Show a proper modal dialog
|
||||
alert(`${e}`);
|
||||
}
|
||||
}}
|
||||
onSheetRenamed={(name: string): void => {
|
||||
try {
|
||||
model.renameSheet(model.getSelectedSheet(), name);
|
||||
setRedrawId((value) => value + 1);
|
||||
} catch (e) {
|
||||
// TODO: Show a proper modal dialog
|
||||
alert(`${e}`);
|
||||
}
|
||||
}}
|
||||
onSheetDeleted={(): void => {
|
||||
const selectedSheet = model.getSelectedSheet();
|
||||
model.deleteSheet(selectedSheet);
|
||||
setRedrawId((value) => value + 1);
|
||||
}}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const Container = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
font-family: ${({ theme }) => theme.typography.fontFamily};
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Workbook;
|
||||
48
webapp/src/components/workbookState.ts
Normal file
48
webapp/src/components/workbookState.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import type { CellStyle } from "@ironcalc/wasm";
|
||||
|
||||
export enum AreaType {
|
||||
rowsDown = 0,
|
||||
columnsRight = 1,
|
||||
rowsUp = 2,
|
||||
columnsLeft = 3,
|
||||
}
|
||||
|
||||
export interface Area {
|
||||
type: AreaType;
|
||||
rowStart: number;
|
||||
rowEnd: number;
|
||||
columnStart: number;
|
||||
columnEnd: number;
|
||||
}
|
||||
|
||||
type AreaStyles = CellStyle[][];
|
||||
|
||||
export class WorkbookState {
|
||||
private extendToArea: Area | null;
|
||||
private copyStyles: AreaStyles | null;
|
||||
|
||||
constructor() {
|
||||
this.extendToArea = null;
|
||||
this.copyStyles = null;
|
||||
}
|
||||
|
||||
getExtendToArea(): Area | null {
|
||||
return this.extendToArea;
|
||||
}
|
||||
|
||||
clearExtendToArea(): void {
|
||||
this.extendToArea = null;
|
||||
}
|
||||
|
||||
setExtendToArea(area: Area): void {
|
||||
this.extendToArea = area;
|
||||
}
|
||||
|
||||
setCopyStyles(styles: AreaStyles | null): void {
|
||||
this.copyStyles = styles;
|
||||
}
|
||||
|
||||
getCopyStyles(): AreaStyles | null {
|
||||
return this.copyStyles;
|
||||
}
|
||||
}
|
||||
464
webapp/src/components/worksheet.tsx
Normal file
464
webapp/src/components/worksheet.tsx
Normal file
@@ -0,0 +1,464 @@
|
||||
import type { Model } from "@ironcalc/wasm";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import {
|
||||
outlineBackgroundColor,
|
||||
outlineColor,
|
||||
} from "./WorksheetCanvas/constants";
|
||||
import WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
|
||||
import type { Cell } from "./types";
|
||||
import usePointer from "./usePointer";
|
||||
import { AreaType, type WorkbookState } from "./workbookState";
|
||||
|
||||
function useWindowSize() {
|
||||
const [size, setSize] = useState([0, 0]);
|
||||
useLayoutEffect(() => {
|
||||
function updateSize() {
|
||||
setSize([window.innerWidth, window.innerHeight]);
|
||||
}
|
||||
window.addEventListener("resize", updateSize);
|
||||
updateSize();
|
||||
return () => window.removeEventListener("resize", updateSize);
|
||||
}, []);
|
||||
return size;
|
||||
}
|
||||
|
||||
function Worksheet(props: {
|
||||
model: Model;
|
||||
workbookState: WorkbookState;
|
||||
refresh: () => void;
|
||||
}) {
|
||||
const canvasElement = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const worksheetElement = useRef<HTMLDivElement>(null);
|
||||
const scrollElement = useRef<HTMLDivElement>(null);
|
||||
// const rootElement = useRef<HTMLDivElement>(null);
|
||||
const spacerElement = useRef<HTMLDivElement>(null);
|
||||
const cellOutline = useRef<HTMLDivElement>(null);
|
||||
const areaOutline = useRef<HTMLDivElement>(null);
|
||||
const cellOutlineHandle = useRef<HTMLDivElement>(null);
|
||||
const extendToOutline = useRef<HTMLDivElement>(null);
|
||||
const columnResizeGuide = useRef<HTMLDivElement>(null);
|
||||
const rowResizeGuide = useRef<HTMLDivElement>(null);
|
||||
const columnHeaders = useRef<HTMLDivElement>(null);
|
||||
const worksheetCanvas = useRef<WorksheetCanvas | null>(null);
|
||||
|
||||
const ignoreScrollEventRef = useRef(false);
|
||||
|
||||
const { model, workbookState, refresh } = props;
|
||||
const [clientWidth, clientHeight] = useWindowSize();
|
||||
useEffect(() => {
|
||||
const canvasRef = canvasElement.current;
|
||||
const columnGuideRef = columnResizeGuide.current;
|
||||
const rowGuideRef = rowResizeGuide.current;
|
||||
const columnHeadersRef = columnHeaders.current;
|
||||
const worksheetRef = worksheetElement.current;
|
||||
|
||||
const outline = cellOutline.current;
|
||||
const handle = cellOutlineHandle.current;
|
||||
const area = areaOutline.current;
|
||||
const extendTo = extendToOutline.current;
|
||||
|
||||
if (
|
||||
!canvasRef ||
|
||||
!columnGuideRef ||
|
||||
!rowGuideRef ||
|
||||
!columnHeadersRef ||
|
||||
!worksheetRef ||
|
||||
!outline ||
|
||||
!handle ||
|
||||
!area ||
|
||||
!extendTo ||
|
||||
!scrollElement.current
|
||||
)
|
||||
return;
|
||||
model.setWindowWidth(clientWidth - 37);
|
||||
model.setWindowHeight(clientHeight - 149);
|
||||
const canvas = new WorksheetCanvas({
|
||||
width: worksheetRef.clientWidth,
|
||||
height: worksheetRef.clientHeight,
|
||||
model,
|
||||
workbookState,
|
||||
elements: {
|
||||
canvas: canvasRef,
|
||||
columnGuide: columnGuideRef,
|
||||
rowGuide: rowGuideRef,
|
||||
columnHeaders: columnHeadersRef,
|
||||
cellOutline: outline,
|
||||
cellOutlineHandle: handle,
|
||||
areaOutline: area,
|
||||
extendToOutline: extendTo,
|
||||
},
|
||||
onColumnWidthChanges(sheet, column, width) {
|
||||
model.setColumnWidth(sheet, column, width);
|
||||
worksheetCanvas.current?.renderSheet();
|
||||
},
|
||||
onRowHeightChanges(sheet, row, height) {
|
||||
model.setRowHeight(sheet, row, height);
|
||||
worksheetCanvas.current?.renderSheet();
|
||||
},
|
||||
});
|
||||
const scrollX = model.getScrollX();
|
||||
const scrollY = model.getScrollY();
|
||||
const [sheetWidth, sheetHeight] = [scrollX + 100_000, scrollY + 500_000]; //canvas.getSheetDimensions();
|
||||
if (spacerElement.current) {
|
||||
spacerElement.current.style.height = `${sheetHeight}px`;
|
||||
spacerElement.current.style.width = `${sheetWidth}px`;
|
||||
}
|
||||
const left = scrollElement.current.scrollLeft;
|
||||
const top = scrollElement.current.scrollTop;
|
||||
if (scrollX !== left) {
|
||||
ignoreScrollEventRef.current = true;
|
||||
scrollElement.current.scrollLeft = scrollX;
|
||||
setTimeout(() => {
|
||||
ignoreScrollEventRef.current = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
if (scrollY !== top) {
|
||||
ignoreScrollEventRef.current = true;
|
||||
scrollElement.current.scrollTop = scrollY;
|
||||
setTimeout(() => {
|
||||
ignoreScrollEventRef.current = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
canvas.renderSheet();
|
||||
worksheetCanvas.current = canvas;
|
||||
});
|
||||
|
||||
const sheetNames = model
|
||||
.getWorksheetsProperties()
|
||||
.map((s: { name: string }) => s.name);
|
||||
|
||||
const {
|
||||
onPointerMove,
|
||||
onPointerDown,
|
||||
onPointerHandleDown,
|
||||
onPointerUp,
|
||||
// onContextMenu,
|
||||
} = usePointer({
|
||||
onCellSelected: (cell: Cell, event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
model.setSelectedCell(cell.row, cell.column);
|
||||
refresh();
|
||||
},
|
||||
onAreaSelecting: (cell: Cell) => {
|
||||
const canvas = worksheetCanvas.current;
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
const { row, column } = cell;
|
||||
model.onAreaSelecting(row, column);
|
||||
canvas.renderSheet();
|
||||
},
|
||||
onAreaSelected: () => {
|
||||
const styles = workbookState.getCopyStyles();
|
||||
if (styles?.length) {
|
||||
model.onPasteStyles(styles);
|
||||
const canvas = worksheetCanvas.current;
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
canvas.renderSheet();
|
||||
}
|
||||
workbookState.setCopyStyles(null);
|
||||
if (worksheetElement.current) {
|
||||
worksheetElement.current.style.cursor = "auto";
|
||||
}
|
||||
},
|
||||
onExtendToCell: (cell) => {
|
||||
const canvas = worksheetCanvas.current;
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
const { row, column } = cell;
|
||||
const {
|
||||
range: [rowStart, columnStart, rowEnd, columnEnd],
|
||||
} = model.getSelectedView();
|
||||
// We are either extending by rows or by columns
|
||||
// And we could be doing it in the positive direction (downwards or right)
|
||||
// or the negative direction (upwards or left)
|
||||
|
||||
if (
|
||||
row > rowEnd &&
|
||||
((column <= columnEnd && column >= columnStart) ||
|
||||
(column < columnStart && columnStart - column < row - rowEnd) ||
|
||||
(column > columnEnd && column - columnEnd < row - rowEnd))
|
||||
) {
|
||||
// rows downwards
|
||||
const area = {
|
||||
type: AreaType.rowsDown,
|
||||
rowStart: rowEnd + 1,
|
||||
rowEnd: row,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
};
|
||||
workbookState.setExtendToArea(area);
|
||||
canvas.renderSheet();
|
||||
} else if (
|
||||
row < rowStart &&
|
||||
((column <= columnEnd && column >= columnStart) ||
|
||||
(column < columnStart && columnStart - column < rowStart - row) ||
|
||||
(column > columnEnd && column - columnEnd < rowStart - row))
|
||||
) {
|
||||
// rows upwards
|
||||
const area = {
|
||||
type: AreaType.rowsUp,
|
||||
rowStart: row,
|
||||
rowEnd: rowStart,
|
||||
columnStart,
|
||||
columnEnd,
|
||||
};
|
||||
workbookState.setExtendToArea(area);
|
||||
canvas.renderSheet();
|
||||
} else if (
|
||||
column > columnEnd &&
|
||||
((row <= rowEnd && row >= rowStart) ||
|
||||
(row < rowStart && rowStart - row < column - columnEnd) ||
|
||||
(row > rowEnd && row - rowEnd < column - columnEnd))
|
||||
) {
|
||||
// columns right
|
||||
const area = {
|
||||
type: AreaType.columnsRight,
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: columnEnd + 1,
|
||||
columnEnd: column,
|
||||
};
|
||||
workbookState.setExtendToArea(area);
|
||||
canvas.renderSheet();
|
||||
} else if (
|
||||
column < columnStart &&
|
||||
((row <= rowEnd && row >= rowStart) ||
|
||||
(row < rowStart && rowStart - row < columnStart - column) ||
|
||||
(row > rowEnd && row - rowEnd < columnStart - column))
|
||||
) {
|
||||
// columns left
|
||||
const area = {
|
||||
type: AreaType.columnsLeft,
|
||||
rowStart,
|
||||
rowEnd,
|
||||
columnStart: column,
|
||||
columnEnd: columnStart,
|
||||
};
|
||||
workbookState.setExtendToArea(area);
|
||||
canvas.renderSheet();
|
||||
}
|
||||
},
|
||||
onExtendToEnd: () => {
|
||||
const canvas = worksheetCanvas.current;
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
const { sheet, range } = model.getSelectedView();
|
||||
const extendedArea = workbookState.getExtendToArea();
|
||||
if (!extendedArea) {
|
||||
return;
|
||||
}
|
||||
const rowStart = Math.min(range[0], range[2]);
|
||||
const height = Math.abs(range[2] - range[0]) + 1;
|
||||
const width = Math.abs(range[3] - range[1]) + 1;
|
||||
const columnStart = Math.min(range[1], range[3]);
|
||||
|
||||
const area = { sheet, row: rowStart, column: columnStart, width, height };
|
||||
|
||||
switch (extendedArea.type) {
|
||||
case AreaType.rowsDown:
|
||||
model.autoFillRows(area, extendedArea.rowEnd);
|
||||
break;
|
||||
case AreaType.rowsUp: {
|
||||
model.autoFillRows(area, extendedArea.rowStart);
|
||||
break;
|
||||
}
|
||||
case AreaType.columnsRight: {
|
||||
model.autoFillColumns(area, extendedArea.columnEnd);
|
||||
break;
|
||||
}
|
||||
case AreaType.columnsLeft: {
|
||||
model.autoFillColumns(area, extendedArea.columnStart);
|
||||
break;
|
||||
}
|
||||
}
|
||||
workbookState.clearExtendToArea();
|
||||
canvas.renderSheet();
|
||||
},
|
||||
canvasElement,
|
||||
worksheetElement,
|
||||
worksheetCanvas,
|
||||
});
|
||||
|
||||
const onScroll = (): void => {
|
||||
if (!scrollElement.current || !worksheetCanvas.current) {
|
||||
return;
|
||||
}
|
||||
if (ignoreScrollEventRef.current) {
|
||||
// Programmatic scroll ignored
|
||||
return;
|
||||
}
|
||||
const left = scrollElement.current.scrollLeft;
|
||||
const top = scrollElement.current.scrollTop;
|
||||
|
||||
worksheetCanvas.current.setScrollPosition({ left, top });
|
||||
worksheetCanvas.current.renderSheet();
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper ref={scrollElement} onScroll={onScroll} className="scroll">
|
||||
<Spacer ref={spacerElement} />
|
||||
<SheetContainer
|
||||
className="sheet-container"
|
||||
ref={worksheetElement}
|
||||
onPointerDown={(event) => {
|
||||
onPointerDown(event);
|
||||
}}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onDoubleClick={(event) => {
|
||||
const { sheet, row, column } = model.getSelectedView();
|
||||
const _text = model.getCellContent(sheet, row, column) || "";
|
||||
// TODO
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<SheetCanvas ref={canvasElement} />
|
||||
<CellOutline ref={cellOutline} />
|
||||
<AreaOutline ref={areaOutline} />
|
||||
<ExtendToOutline ref={extendToOutline} />
|
||||
<CellOutlineHandle
|
||||
ref={cellOutlineHandle}
|
||||
onPointerDown={onPointerHandleDown}
|
||||
/>
|
||||
<ColumnResizeGuide ref={columnResizeGuide} />
|
||||
<RowResizeGuide ref={rowResizeGuide} />
|
||||
<ColumnHeaders ref={columnHeaders} />
|
||||
</SheetContainer>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const Spacer = styled("div")`
|
||||
position: absolute;
|
||||
height: 5000px;
|
||||
width: 5000px;
|
||||
`;
|
||||
|
||||
const SheetContainer = styled("div")`
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
|
||||
.column-resize-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 3px;
|
||||
opacity: 0;
|
||||
background: ${outlineColor};
|
||||
border-radius: 5px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.column-resize-handle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.row-resize-handle {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 3px;
|
||||
opacity: 0;
|
||||
background: ${outlineColor};
|
||||
border-radius: 5px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.row-resize-handle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const Wrapper = styled("div")({
|
||||
position: "absolute",
|
||||
overflow: "scroll",
|
||||
top: 71,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 41,
|
||||
});
|
||||
|
||||
const SheetCanvas = styled("canvas")`
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 40px;
|
||||
`;
|
||||
|
||||
const ColumnResizeGuide = styled("div")`
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
border-left: 1px dashed ${outlineColor};
|
||||
`;
|
||||
|
||||
const ColumnHeaders = styled("div")`
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
& .column-header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const RowResizeGuide = styled("div")`
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0px;
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px dashed ${outlineColor};
|
||||
`;
|
||||
|
||||
const AreaOutline = styled("div")`
|
||||
position: absolute;
|
||||
border: 1px solid ${outlineColor};
|
||||
border-radius: 3px;
|
||||
background-color: ${outlineBackgroundColor};
|
||||
`;
|
||||
|
||||
const CellOutline = styled("div")`
|
||||
position: absolute;
|
||||
border: 2px solid ${outlineColor};
|
||||
border-radius: 3px;
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const CellOutlineHandle = styled("div")`
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: ${outlineColor};
|
||||
cursor: crosshair;
|
||||
// border: 1px solid white;
|
||||
border-radius: 1px;
|
||||
`;
|
||||
|
||||
const ExtendToOutline = styled("div")`
|
||||
position: absolute;
|
||||
border: 1px dashed ${outlineColor};
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
export default Worksheet;
|
||||
Reference in New Issue
Block a user