excalidraw/src/element/sizeHelpers.ts

113 lines
2.8 KiB
TypeScript
Raw Normal View History

import { ExcalidrawElement } from "./types";
import { mutateElement } from "./mutateElement";
import { isFreeDrawElement, isLinearElement } from "./typeChecks";
import { SHIFT_LOCKING_ANGLE } from "../constants";
export const isInvisiblySmallElement = (
element: ExcalidrawElement,
): boolean => {
if (isLinearElement(element) || isFreeDrawElement(element)) {
Fix issues related to history (#701) * Separate UI from Canvas * Explicitly define history recording * ActionManager: Set syncActionState during construction instead of in every call * Add commit to history flag to necessary actions * Disable undoing during multiElement * Write custom equality function for UI component to render it only when specific props and elements change * Remove stale comments about history skipping * Stop undo/redoing when in resizing element mode * wip * correctly reset resizingElement & add undo check * Separate selection element from the rest of the array and stop redrawing the UI when dragging the selection * Remove selectionElement from local storage * Remove unnecessary readonly type casting in actionFinalize * Fix undo / redo for multi points * Fix an issue that did not update history when elements were locked * Disable committing to history for noops - deleteSelected without deleting anything - Basic selection * Use generateEntry only inside history and pass elements and appstate to history * Update component after every history resume * Remove last item from the history only if in multi mode * Resume recording when element type is not selection * ensure we prevent hotkeys only on writable elements * Remove selection clearing from history * Remove one point arrows as they are invisibly small * Remove shape of elements from local storage * Fix removing invisible element from the array * add missing history resuming cases & simplify slice * fix lint * don't regenerate elements if no elements deselected * regenerate elements array on selection * reset state.selectionElement unconditionally * Use getter instead of passing appState and scene data through functions to actions * fix import Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-05 22:47:10 +04:00
return element.points.length < 2;
}
return element.width === 0 && element.height === 0;
};
/**
* Makes a perfect shape or diagonal/horizontal/vertical line
*/
export const getPerfectElementSize = (
elementType: string,
width: number,
2020-01-24 12:04:54 +02:00
height: number,
): { width: number; height: number } => {
const absWidth = Math.abs(width);
const absHeight = Math.abs(height);
2020-05-12 20:10:11 +01:00
if (
elementType === "line" ||
elementType === "arrow" ||
elementType === "freedraw"
2020-05-12 20:10:11 +01:00
) {
const lockedAngle =
Math.round(Math.atan(absHeight / absWidth) / SHIFT_LOCKING_ANGLE) *
SHIFT_LOCKING_ANGLE;
if (lockedAngle === 0) {
height = 0;
} else if (lockedAngle === Math.PI / 2) {
width = 0;
} else {
height =
Math.round(absWidth * Math.tan(lockedAngle)) * Math.sign(height) ||
height;
}
} else if (elementType !== "selection") {
height = absWidth * Math.sign(height);
}
return { width, height };
};
export const resizePerfectLineForNWHandler = (
element: ExcalidrawElement,
x: number,
2020-01-24 12:04:54 +02:00
y: number,
) => {
const anchorX = element.x + element.width;
const anchorY = element.y + element.height;
const distanceToAnchorX = x - anchorX;
const distanceToAnchorY = y - anchorY;
if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
mutateElement(element, {
x: anchorX,
width: 0,
y,
height: -distanceToAnchorY,
});
} else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
mutateElement(element, {
y: anchorY,
height: 0,
});
} else {
const nextHeight =
Math.sign(distanceToAnchorY) *
Math.sign(distanceToAnchorX) *
element.width;
mutateElement(element, {
x,
y: anchorY - nextHeight,
width: -distanceToAnchorX,
height: nextHeight,
});
}
};
export const getNormalizedDimensions = (
element: Pick<ExcalidrawElement, "width" | "height" | "x" | "y">,
): {
width: ExcalidrawElement["width"];
height: ExcalidrawElement["height"];
x: ExcalidrawElement["x"];
y: ExcalidrawElement["y"];
} => {
const ret = {
width: element.width,
height: element.height,
x: element.x,
y: element.y,
};
if (element.width < 0) {
const nextWidth = Math.abs(element.width);
ret.width = nextWidth;
ret.x = element.x - nextWidth;
}
if (element.height < 0) {
const nextHeight = Math.abs(element.height);
ret.height = nextHeight;
ret.y = element.y - nextHeight;
}
return ret;
};