refactor: Remove the grid size and have a boolean instead

This commit is contained in:
Panayiotis Lipiridis 2020-12-23 17:13:03 +02:00
parent 39e7b8cf4f
commit c12dab7a60
10 changed files with 111 additions and 113 deletions

View file

@ -1036,7 +1036,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const dy = y - elementsCenterY;
const groupIdMap = new Map();
const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
const [gridX, gridY] = getGridPoint(dx, dy, this.state.showGrid);
const oldIdToDuplicatedId = new Map();
const newElements = clipboardElements.map((element) => {
@ -1149,7 +1149,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
toggleGridMode = () => {
this.setState({
gridSize: this.state.gridSize ? null : GRID_SIZE,
showGrid: !this.state.showGrid,
});
};
@ -1275,8 +1275,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
if (isArrowKey(event.key)) {
const step =
(this.state.gridSize &&
(event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize)) ||
(this.state.showGrid &&
(event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : GRID_SIZE)) ||
(event.shiftKey
? ELEMENT_SHIFT_TRANSLATE_AMOUNT
: ELEMENT_TRANSLATE_AMOUNT);
@ -1819,7 +1819,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
scenePointerX,
scenePointerY,
this.state.editingLinearElement,
this.state.gridSize,
this.state.showGrid,
);
if (editingLinearElement !== this.state.editingLinearElement) {
this.setState({ editingLinearElement });
@ -2249,7 +2249,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
return {
origin,
originInGrid: tupleToCoors(
getGridPoint(origin.x, origin.y, this.state.gridSize),
getGridPoint(origin.x, origin.y, this.state.showGrid),
),
scrollbars: isOverScrollBars(
currentScrollBars,
@ -2607,7 +2607,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [gridX, gridY] = getGridPoint(
pointerDownState.origin.x,
pointerDownState.origin.y,
elementType === "draw" ? null : this.state.gridSize,
elementType === "draw" ? false : this.state.showGrid,
);
/* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
@ -2669,7 +2669,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [gridX, gridY] = getGridPoint(
pointerDownState.origin.x,
pointerDownState.origin.y,
this.state.gridSize,
this.state.showGrid,
);
const element = newElement({
type: elementType,
@ -2758,7 +2758,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [gridX, gridY] = getGridPoint(
pointerCoords.x,
pointerCoords.y,
this.state.gridSize,
this.state.showGrid,
);
// for arrows/lines, don't start dragging until a given threshold
@ -2830,7 +2830,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [dragX, dragY] = getGridPoint(
pointerCoords.x - pointerDownState.drag.offset.x,
pointerCoords.y - pointerDownState.drag.offset.y,
this.state.gridSize,
this.state.showGrid,
);
const [dragDistanceX, dragDistanceY] = [
@ -2882,7 +2882,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [originDragX, originDragY] = getGridPoint(
pointerDownState.origin.x - pointerDownState.drag.offset.x,
pointerDownState.origin.y - pointerDownState.drag.offset.y,
this.state.gridSize,
this.state.showGrid,
);
mutateElement(duplicatedElement, {
x: duplicatedElement.x + (originDragX - dragX),
@ -3542,7 +3542,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [gridX, gridY] = getGridPoint(
pointerCoords.x,
pointerCoords.y,
this.state.gridSize,
this.state.showGrid,
);
dragNewElement(
draggingElement,
@ -3580,7 +3580,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const [resizeX, resizeY] = getGridPoint(
pointerCoords.x - pointerDownState.resize.offset.x,
pointerCoords.y - pointerDownState.resize.offset.y,
this.state.gridSize,
this.state.showGrid,
);
if (
transformElements(
@ -3644,7 +3644,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
CANVAS_ONLY_ACTIONS.includes(action.name),
),
{
checked: this.state.gridSize !== null,
checked: this.state.showGrid,
shortcutName: "gridMode",
label: t("labels.gridMode"),
action: this.toggleGridMode,