33016bf6bf
* 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>
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { ExcalidrawElement } from "./types";
|
|
|
|
export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
|
|
if (element.type === "arrow" || element.type === "line") {
|
|
return element.points.length < 2;
|
|
}
|
|
return element.width === 0 && element.height === 0;
|
|
}
|
|
|
|
/**
|
|
* Makes a perfect shape or diagonal/horizontal/vertical line
|
|
*/
|
|
export function getPerfectElementSize(
|
|
elementType: string,
|
|
width: number,
|
|
height: number,
|
|
): { width: number; height: number } {
|
|
const absWidth = Math.abs(width);
|
|
const absHeight = Math.abs(height);
|
|
|
|
if (elementType === "line" || elementType === "arrow") {
|
|
if (absHeight < absWidth / 2) {
|
|
height = 0;
|
|
} else if (absWidth < absHeight / 2) {
|
|
width = 0;
|
|
} else {
|
|
height = absWidth * Math.sign(height);
|
|
}
|
|
} else if (elementType !== "selection") {
|
|
height = absWidth * Math.sign(height);
|
|
}
|
|
|
|
return { width, height };
|
|
}
|
|
|
|
export function resizePerfectLineForNWHandler(
|
|
element: ExcalidrawElement,
|
|
x: number,
|
|
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) {
|
|
element.x = anchorX;
|
|
element.width = 0;
|
|
element.y = y;
|
|
element.height = -distanceToAnchorY;
|
|
} else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
|
|
element.y = anchorY;
|
|
element.height = 0;
|
|
} else {
|
|
element.x = x;
|
|
element.width = -distanceToAnchorX;
|
|
element.height =
|
|
Math.sign(distanceToAnchorY) *
|
|
Math.sign(distanceToAnchorX) *
|
|
element.width;
|
|
element.y = anchorY - element.height;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {boolean} whether element was normalized
|
|
*/
|
|
export function normalizeDimensions(
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawElement {
|
|
if (
|
|
!element ||
|
|
(element.width >= 0 && element.height >= 0) ||
|
|
element.type === "line" ||
|
|
element.type === "arrow"
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
if (element.width < 0) {
|
|
element.width = Math.abs(element.width);
|
|
element.x -= element.width;
|
|
}
|
|
|
|
if (element.height < 0) {
|
|
element.height = Math.abs(element.height);
|
|
element.y -= element.height;
|
|
}
|
|
|
|
element.shape = null;
|
|
|
|
return true;
|
|
}
|