feat: editable element stats (#6382)
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>pull/8127/head
Ryan Di
8 months ago
committed by
GitHub
parent
22b39277f5
commit
d2f67e619f
@ -1,54 +0,0 @@
|
|||||||
@import "../css/variables.module.scss";
|
|
||||||
|
|
||||||
.excalidraw {
|
|
||||||
.Stats {
|
|
||||||
position: absolute;
|
|
||||||
top: 64px;
|
|
||||||
right: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
z-index: 10;
|
|
||||||
pointer-events: var(--ui-pointerEvents);
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 24px 8px 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
float: right;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
th {
|
|
||||||
border-bottom: 1px solid var(--input-border-color);
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
tr {
|
|
||||||
td:nth-child(2) {
|
|
||||||
min-width: 24px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[dir="rtl"] & {
|
|
||||||
left: 12px;
|
|
||||||
right: initial;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 8px 24px;
|
|
||||||
}
|
|
||||||
.close {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { getCommonBounds } from "../element/bounds";
|
|
||||||
import type { NonDeletedExcalidrawElement } from "../element/types";
|
|
||||||
import { t } from "../i18n";
|
|
||||||
import { getTargetElements } from "../scene";
|
|
||||||
import type { ExcalidrawProps, UIAppState } from "../types";
|
|
||||||
import { CloseIcon } from "./icons";
|
|
||||||
import { Island } from "./Island";
|
|
||||||
import "./Stats.scss";
|
|
||||||
|
|
||||||
export const Stats = (props: {
|
|
||||||
appState: UIAppState;
|
|
||||||
setAppState: React.Component<any, UIAppState>["setState"];
|
|
||||||
elements: readonly NonDeletedExcalidrawElement[];
|
|
||||||
onClose: () => void;
|
|
||||||
renderCustomStats: ExcalidrawProps["renderCustomStats"];
|
|
||||||
}) => {
|
|
||||||
const boundingBox = getCommonBounds(props.elements);
|
|
||||||
const selectedElements = getTargetElements(props.elements, props.appState);
|
|
||||||
const selectedBoundingBox = getCommonBounds(selectedElements);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="Stats">
|
|
||||||
<Island padding={2}>
|
|
||||||
<div className="close" onClick={props.onClose}>
|
|
||||||
{CloseIcon}
|
|
||||||
</div>
|
|
||||||
<h3>{t("stats.title")}</h3>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th colSpan={2}>{t("stats.scene")}</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.elements")}</td>
|
|
||||||
<td>{props.elements.length}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.width")}</td>
|
|
||||||
<td>{Math.round(boundingBox[2]) - Math.round(boundingBox[0])}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.height")}</td>
|
|
||||||
<td>{Math.round(boundingBox[3]) - Math.round(boundingBox[1])}</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{selectedElements.length === 1 && (
|
|
||||||
<tr>
|
|
||||||
<th colSpan={2}>{t("stats.element")}</th>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedElements.length > 1 && (
|
|
||||||
<>
|
|
||||||
<tr>
|
|
||||||
<th colSpan={2}>{t("stats.selected")}</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.elements")}</td>
|
|
||||||
<td>{selectedElements.length}</td>
|
|
||||||
</tr>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{selectedElements.length > 0 && (
|
|
||||||
<>
|
|
||||||
<tr>
|
|
||||||
<td>{"x"}</td>
|
|
||||||
<td>{Math.round(selectedBoundingBox[0])}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{"y"}</td>
|
|
||||||
<td>{Math.round(selectedBoundingBox[1])}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.width")}</td>
|
|
||||||
<td>
|
|
||||||
{Math.round(
|
|
||||||
selectedBoundingBox[2] - selectedBoundingBox[0],
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.height")}</td>
|
|
||||||
<td>
|
|
||||||
{Math.round(
|
|
||||||
selectedBoundingBox[3] - selectedBoundingBox[1],
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{selectedElements.length === 1 && (
|
|
||||||
<tr>
|
|
||||||
<td>{t("stats.angle")}</td>
|
|
||||||
<td>
|
|
||||||
{`${Math.round(
|
|
||||||
(selectedElements[0].angle * 180) / Math.PI,
|
|
||||||
)}°`}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{props.renderCustomStats?.(props.elements, props.appState)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</Island>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import { getBoundTextElement } from "../../element/textElement";
|
||||||
|
import { isArrowElement } from "../../element/typeChecks";
|
||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import { degreeToRadian, radianToDegree } from "../../math";
|
||||||
|
import { angleIcon } from "../icons";
|
||||||
|
import DragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, isPropertyEditable } from "./utils";
|
||||||
|
|
||||||
|
interface AngleProps {
|
||||||
|
element: ExcalidrawElement;
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 15;
|
||||||
|
|
||||||
|
const Angle = ({ element, elementsMap }: AngleProps) => {
|
||||||
|
const handleDegreeChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
const origElement = originalElements[0];
|
||||||
|
if (origElement) {
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
const nextAngle = degreeToRadian(nextValue);
|
||||||
|
mutateElement(element, {
|
||||||
|
angle: nextAngle,
|
||||||
|
});
|
||||||
|
|
||||||
|
const boundTextElement = getBoundTextElement(element, elementsMap);
|
||||||
|
if (boundTextElement && !isArrowElement(element)) {
|
||||||
|
mutateElement(boundTextElement, { angle: nextAngle });
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalAngleInDegrees =
|
||||||
|
Math.round(radianToDegree(origElement.angle) * 100) / 100;
|
||||||
|
const changeInDegrees = Math.round(accumulatedChange);
|
||||||
|
let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
nextAngleInDegrees =
|
||||||
|
nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
|
||||||
|
|
||||||
|
const nextAngle = degreeToRadian(nextAngleInDegrees);
|
||||||
|
|
||||||
|
mutateElement(element, {
|
||||||
|
angle: nextAngle,
|
||||||
|
});
|
||||||
|
|
||||||
|
const boundTextElement = getBoundTextElement(element, elementsMap);
|
||||||
|
if (boundTextElement && !isArrowElement(element)) {
|
||||||
|
mutateElement(boundTextElement, { angle: nextAngle });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DragInput
|
||||||
|
label="A"
|
||||||
|
icon={angleIcon}
|
||||||
|
value={Math.round((radianToDegree(element.angle) % 360) * 100) / 100}
|
||||||
|
elements={[element]}
|
||||||
|
dragInputCallback={handleDegreeChange}
|
||||||
|
editable={isPropertyEditable(element, "angle")}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Angle;
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import { InlineIcon } from "../InlineIcon";
|
||||||
|
import { collapseDownIcon, collapseUpIcon } from "../icons";
|
||||||
|
|
||||||
|
interface CollapsibleProps {
|
||||||
|
label: React.ReactNode;
|
||||||
|
// having it controlled so that the state is managed outside
|
||||||
|
// this is to keep the user's previous choice even when the
|
||||||
|
// Collapsible is unmounted
|
||||||
|
open: boolean;
|
||||||
|
openTrigger: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Collapsible = ({
|
||||||
|
label,
|
||||||
|
open,
|
||||||
|
openTrigger,
|
||||||
|
children,
|
||||||
|
}: CollapsibleProps) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
cursor: "pointer",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onClick={openTrigger}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
<InlineIcon icon={open ? collapseUpIcon : collapseDownIcon} />
|
||||||
|
</div>
|
||||||
|
{open && <>{children}</>}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Collapsible;
|
||||||
@ -0,0 +1,126 @@
|
|||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import DragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
|
||||||
|
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
|
||||||
|
|
||||||
|
interface DimensionDragInputProps {
|
||||||
|
property: "width" | "height";
|
||||||
|
element: ExcalidrawElement;
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 10;
|
||||||
|
const _shouldKeepAspectRatio = (element: ExcalidrawElement) => {
|
||||||
|
return element.type === "image";
|
||||||
|
};
|
||||||
|
|
||||||
|
const DimensionDragInput = ({
|
||||||
|
property,
|
||||||
|
element,
|
||||||
|
elementsMap,
|
||||||
|
}: DimensionDragInputProps) => {
|
||||||
|
const handleDimensionChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldKeepAspectRatio,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
const origElement = originalElements[0];
|
||||||
|
if (origElement) {
|
||||||
|
const keepAspectRatio =
|
||||||
|
shouldKeepAspectRatio || _shouldKeepAspectRatio(element);
|
||||||
|
const aspectRatio = origElement.width / origElement.height;
|
||||||
|
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
const nextWidth = Math.max(
|
||||||
|
property === "width"
|
||||||
|
? nextValue
|
||||||
|
: keepAspectRatio
|
||||||
|
? nextValue * aspectRatio
|
||||||
|
: origElement.width,
|
||||||
|
MIN_WIDTH_OR_HEIGHT,
|
||||||
|
);
|
||||||
|
const nextHeight = Math.max(
|
||||||
|
property === "height"
|
||||||
|
? nextValue
|
||||||
|
: keepAspectRatio
|
||||||
|
? nextValue / aspectRatio
|
||||||
|
: origElement.height,
|
||||||
|
MIN_WIDTH_OR_HEIGHT,
|
||||||
|
);
|
||||||
|
|
||||||
|
resizeElement(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
keepAspectRatio,
|
||||||
|
element,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const changeInWidth = property === "width" ? accumulatedChange : 0;
|
||||||
|
const changeInHeight = property === "height" ? accumulatedChange : 0;
|
||||||
|
|
||||||
|
let nextWidth = Math.max(0, origElement.width + changeInWidth);
|
||||||
|
if (property === "width") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextHeight = Math.max(0, origElement.height + changeInHeight);
|
||||||
|
if (property === "height") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextHeight = Math.round(nextHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keepAspectRatio) {
|
||||||
|
if (property === "width") {
|
||||||
|
nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
|
||||||
|
nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
|
||||||
|
|
||||||
|
resizeElement(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
keepAspectRatio,
|
||||||
|
element,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const value =
|
||||||
|
Math.round((property === "width" ? element.width : element.height) * 100) /
|
||||||
|
100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DragInput
|
||||||
|
label={property === "width" ? "W" : "H"}
|
||||||
|
elements={[element]}
|
||||||
|
dragInputCallback={handleDimensionChange}
|
||||||
|
value={value}
|
||||||
|
editable={isPropertyEditable(element, property)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DimensionDragInput;
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
.excalidraw {
|
||||||
|
.drag-input-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
box-shadow: 0 0 0 1px var(--color-primary-darkest);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-input-label {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 1px solid var(--default-border-color);
|
||||||
|
border-right: 0;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: var(--popup-text-color);
|
||||||
|
|
||||||
|
:root[dir="ltr"] & {
|
||||||
|
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[dir="rtl"] & {
|
||||||
|
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
|
||||||
|
border-right: 1px solid var(--default-border-color);
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-primary-color);
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
height: 2rem;
|
||||||
|
border: 1px solid var(--default-border-color);
|
||||||
|
border-left: 0;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
|
||||||
|
:root[dir="ltr"] & {
|
||||||
|
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[dir="rtl"] & {
|
||||||
|
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
|
||||||
|
border-left: 1px solid var(--default-border-color);
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0.5rem;
|
||||||
|
padding-left: 0.25rem;
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { EVENT } from "../../constants";
|
||||||
|
import { KEYS } from "../../keys";
|
||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import { deepCopyElement } from "../../element/newElement";
|
||||||
|
|
||||||
|
import "./DragInput.scss";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { useApp } from "../App";
|
||||||
|
import { InlineIcon } from "../InlineIcon";
|
||||||
|
import { SMALLEST_DELTA } from "./utils";
|
||||||
|
import { StoreAction } from "../../store";
|
||||||
|
|
||||||
|
export type DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
instantChange,
|
||||||
|
originalElements,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldKeepAspectRatio,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}: {
|
||||||
|
accumulatedChange: number;
|
||||||
|
instantChange: number;
|
||||||
|
originalElements: readonly ExcalidrawElement[];
|
||||||
|
originalElementsMap: ElementsMap;
|
||||||
|
shouldKeepAspectRatio: boolean;
|
||||||
|
shouldChangeByStepSize: boolean;
|
||||||
|
nextValue?: number;
|
||||||
|
}) => void;
|
||||||
|
|
||||||
|
interface StatsDragInputProps {
|
||||||
|
label: string | React.ReactNode;
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
value: number | "Mixed";
|
||||||
|
elements: readonly ExcalidrawElement[];
|
||||||
|
editable?: boolean;
|
||||||
|
shouldKeepAspectRatio?: boolean;
|
||||||
|
dragInputCallback: DragInputCallbackType;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatsDragInput = ({
|
||||||
|
label,
|
||||||
|
icon,
|
||||||
|
dragInputCallback,
|
||||||
|
value,
|
||||||
|
elements,
|
||||||
|
editable = true,
|
||||||
|
shouldKeepAspectRatio,
|
||||||
|
}: StatsDragInputProps) => {
|
||||||
|
const app = useApp();
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const labelRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const [inputValue, setInputValue] = useState(value.toString());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setInputValue(value.toString());
|
||||||
|
}, [value, elements]);
|
||||||
|
|
||||||
|
const handleInputValue = (v: string) => {
|
||||||
|
const parsed = Number(v);
|
||||||
|
if (isNaN(parsed)) {
|
||||||
|
setInputValue(value.toString());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rounded = Number(parsed.toFixed(2));
|
||||||
|
const original = Number(value);
|
||||||
|
|
||||||
|
// only update when
|
||||||
|
// 1. original was "Mixed" and we have a new value
|
||||||
|
// 2. original was not "Mixed" and the difference between a new value and previous value is greater
|
||||||
|
// than the smallest delta allowed, which is 0.01
|
||||||
|
// reason: idempotent to avoid unnecessary
|
||||||
|
if (isNaN(original) || Math.abs(rounded - original) >= SMALLEST_DELTA) {
|
||||||
|
dragInputCallback({
|
||||||
|
accumulatedChange: 0,
|
||||||
|
instantChange: 0,
|
||||||
|
originalElements: elements,
|
||||||
|
originalElementsMap: app.scene.getNonDeletedElementsMap(),
|
||||||
|
shouldKeepAspectRatio: shouldKeepAspectRatio!!,
|
||||||
|
shouldChangeByStepSize: false,
|
||||||
|
nextValue: rounded,
|
||||||
|
});
|
||||||
|
app.syncActionResult({ storeAction: StoreAction.CAPTURE });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputValueRef = useRef(handleInputValue);
|
||||||
|
handleInputValueRef.current = handleInputValue;
|
||||||
|
|
||||||
|
// make sure that clicking on canvas (which umounts the component)
|
||||||
|
// updates current input value (blur isn't triggered)
|
||||||
|
useEffect(() => {
|
||||||
|
const input = inputRef.current;
|
||||||
|
return () => {
|
||||||
|
const nextValue = input?.value;
|
||||||
|
if (nextValue) {
|
||||||
|
handleInputValueRef.current(nextValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return editable ? (
|
||||||
|
<div
|
||||||
|
className={clsx("drag-input-container", !editable && "disabled")}
|
||||||
|
data-testid={label}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="drag-input-label"
|
||||||
|
ref={labelRef}
|
||||||
|
onPointerDown={(event) => {
|
||||||
|
if (inputRef.current && editable) {
|
||||||
|
let startValue = Number(inputRef.current.value);
|
||||||
|
if (isNaN(startValue)) {
|
||||||
|
startValue = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastPointer: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
} | null = null;
|
||||||
|
|
||||||
|
let originalElements: ExcalidrawElement[] | null = null;
|
||||||
|
let originalElementsMap: Map<string, ExcalidrawElement> | null =
|
||||||
|
null;
|
||||||
|
|
||||||
|
let accumulatedChange: number | null = null;
|
||||||
|
|
||||||
|
document.body.classList.add("excalidraw-cursor-resize");
|
||||||
|
|
||||||
|
const onPointerMove = (event: PointerEvent) => {
|
||||||
|
if (!originalElementsMap) {
|
||||||
|
originalElementsMap = app.scene
|
||||||
|
.getNonDeletedElements()
|
||||||
|
.reduce((acc, element) => {
|
||||||
|
acc.set(element.id, deepCopyElement(element));
|
||||||
|
return acc;
|
||||||
|
}, new Map() as ElementsMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!originalElements) {
|
||||||
|
originalElements = elements.map(
|
||||||
|
(element) => originalElementsMap!.get(element.id)!,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!accumulatedChange) {
|
||||||
|
accumulatedChange = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
lastPointer &&
|
||||||
|
originalElementsMap !== null &&
|
||||||
|
accumulatedChange !== null
|
||||||
|
) {
|
||||||
|
const instantChange = event.clientX - lastPointer.x;
|
||||||
|
accumulatedChange += instantChange;
|
||||||
|
|
||||||
|
dragInputCallback({
|
||||||
|
accumulatedChange,
|
||||||
|
instantChange,
|
||||||
|
originalElements,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldKeepAspectRatio: shouldKeepAspectRatio!!,
|
||||||
|
shouldChangeByStepSize: event.shiftKey,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lastPointer = {
|
||||||
|
x: event.clientX,
|
||||||
|
y: event.clientY,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
|
||||||
|
window.addEventListener(
|
||||||
|
EVENT.POINTER_UP,
|
||||||
|
() => {
|
||||||
|
window.removeEventListener(
|
||||||
|
EVENT.POINTER_MOVE,
|
||||||
|
onPointerMove,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
|
||||||
|
app.syncActionResult({ storeAction: StoreAction.CAPTURE });
|
||||||
|
|
||||||
|
lastPointer = null;
|
||||||
|
accumulatedChange = null;
|
||||||
|
originalElements = null;
|
||||||
|
originalElementsMap = null;
|
||||||
|
|
||||||
|
document.body.classList.remove("excalidraw-cursor-resize");
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onPointerEnter={() => {
|
||||||
|
if (labelRef.current) {
|
||||||
|
labelRef.current.style.cursor = "ew-resize";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{icon ? <InlineIcon icon={icon} /> : label}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
className="drag-input"
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck="false"
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (editable) {
|
||||||
|
const eventTarget = event.target;
|
||||||
|
if (
|
||||||
|
eventTarget instanceof HTMLInputElement &&
|
||||||
|
event.key === KEYS.ENTER
|
||||||
|
) {
|
||||||
|
handleInputValue(eventTarget.value);
|
||||||
|
app.focusContainer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
ref={inputRef}
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(event) => {
|
||||||
|
setInputValue(event.target.value);
|
||||||
|
}}
|
||||||
|
onFocus={(event) => {
|
||||||
|
event.target.select();
|
||||||
|
}}
|
||||||
|
onBlur={(event) => {
|
||||||
|
if (!inputValue) {
|
||||||
|
setInputValue(value.toString());
|
||||||
|
} else if (editable) {
|
||||||
|
handleInputValue(event.target.value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!editable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StatsDragInput;
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import type { ElementsMap, ExcalidrawTextElement } from "../../element/types";
|
||||||
|
import { refreshTextDimensions } from "../../element/newElement";
|
||||||
|
import StatsDragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import { getStepSizedValue } from "./utils";
|
||||||
|
import { fontSizeIcon } from "../icons";
|
||||||
|
|
||||||
|
interface FontSizeProps {
|
||||||
|
element: ExcalidrawTextElement;
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MIN_FONT_SIZE = 4;
|
||||||
|
const STEP_SIZE = 4;
|
||||||
|
|
||||||
|
const FontSize = ({ element, elementsMap }: FontSizeProps) => {
|
||||||
|
const handleFontSizeChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
const origElement = originalElements[0];
|
||||||
|
if (origElement) {
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
|
||||||
|
|
||||||
|
const newElement = {
|
||||||
|
...element,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
};
|
||||||
|
const updates = refreshTextDimensions(newElement, null, elementsMap);
|
||||||
|
mutateElement(element, {
|
||||||
|
...updates,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (origElement.type === "text") {
|
||||||
|
const originalFontSize = Math.round(origElement.fontSize);
|
||||||
|
const changeInFontSize = Math.round(accumulatedChange);
|
||||||
|
let nextFontSize = Math.max(
|
||||||
|
originalFontSize + changeInFontSize,
|
||||||
|
MIN_FONT_SIZE,
|
||||||
|
);
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
|
||||||
|
}
|
||||||
|
const newElement = {
|
||||||
|
...element,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
};
|
||||||
|
const updates = refreshTextDimensions(newElement, null, elementsMap);
|
||||||
|
mutateElement(element, {
|
||||||
|
...updates,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsDragInput
|
||||||
|
label="F"
|
||||||
|
value={Math.round(element.fontSize * 10) / 10}
|
||||||
|
elements={[element]}
|
||||||
|
dragInputCallback={handleFontSizeChange}
|
||||||
|
icon={fontSizeIcon}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FontSize;
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import { getBoundTextElement } from "../../element/textElement";
|
||||||
|
import { isArrowElement } from "../../element/typeChecks";
|
||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import { isInGroup } from "../../groups";
|
||||||
|
import { degreeToRadian, radianToDegree } from "../../math";
|
||||||
|
import type Scene from "../../scene/Scene";
|
||||||
|
import { angleIcon } from "../icons";
|
||||||
|
import DragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, isPropertyEditable } from "./utils";
|
||||||
|
|
||||||
|
interface MultiAngleProps {
|
||||||
|
elements: readonly ExcalidrawElement[];
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
scene: Scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 15;
|
||||||
|
|
||||||
|
const MultiAngle = ({ elements, elementsMap, scene }: MultiAngleProps) => {
|
||||||
|
const handleDegreeChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
const editableLatestIndividualElements = elements.filter(
|
||||||
|
(el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
|
||||||
|
);
|
||||||
|
const editableOriginalIndividualElements = originalElements.filter(
|
||||||
|
(el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
const nextAngle = degreeToRadian(nextValue);
|
||||||
|
|
||||||
|
for (const element of editableLatestIndividualElements) {
|
||||||
|
mutateElement(
|
||||||
|
element,
|
||||||
|
{
|
||||||
|
angle: nextAngle,
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
|
||||||
|
const boundTextElement = getBoundTextElement(element, elementsMap);
|
||||||
|
if (boundTextElement && !isArrowElement(element)) {
|
||||||
|
mutateElement(boundTextElement, { angle: nextAngle }, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < editableLatestIndividualElements.length; i++) {
|
||||||
|
const latestElement = editableLatestIndividualElements[i];
|
||||||
|
const originalElement = editableOriginalIndividualElements[i];
|
||||||
|
const originalAngleInDegrees =
|
||||||
|
Math.round(radianToDegree(originalElement.angle) * 100) / 100;
|
||||||
|
const changeInDegrees = Math.round(accumulatedChange);
|
||||||
|
let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
|
nextAngleInDegrees =
|
||||||
|
nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
|
||||||
|
|
||||||
|
const nextAngle = degreeToRadian(nextAngleInDegrees);
|
||||||
|
|
||||||
|
mutateElement(
|
||||||
|
latestElement,
|
||||||
|
{
|
||||||
|
angle: nextAngle,
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
|
||||||
|
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
|
||||||
|
if (boundTextElement && !isArrowElement(latestElement)) {
|
||||||
|
mutateElement(boundTextElement, { angle: nextAngle }, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
scene.triggerUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
|
const editableLatestIndividualElements = elements.filter(
|
||||||
|
(el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
|
||||||
|
);
|
||||||
|
const angles = editableLatestIndividualElements.map(
|
||||||
|
(el) => Math.round((radianToDegree(el.angle) % 360) * 100) / 100,
|
||||||
|
);
|
||||||
|
const value = new Set(angles).size === 1 ? angles[0] : "Mixed";
|
||||||
|
|
||||||
|
const editable = editableLatestIndividualElements.some((el) =>
|
||||||
|
isPropertyEditable(el, "angle"),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DragInput
|
||||||
|
label="A"
|
||||||
|
icon={angleIcon}
|
||||||
|
value={value}
|
||||||
|
elements={elements}
|
||||||
|
dragInputCallback={handleDegreeChange}
|
||||||
|
editable={editable}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MultiAngle;
|
||||||
@ -0,0 +1,377 @@
|
|||||||
|
import { useMemo } from "react";
|
||||||
|
import { getCommonBounds, isTextElement } from "../../element";
|
||||||
|
import { updateBoundElements } from "../../element/binding";
|
||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import { rescalePointsInElement } from "../../element/resizeElements";
|
||||||
|
import {
|
||||||
|
getBoundTextElement,
|
||||||
|
handleBindTextResize,
|
||||||
|
} from "../../element/textElement";
|
||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import type Scene from "../../scene/Scene";
|
||||||
|
import type { Point } from "../../types";
|
||||||
|
import DragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, isPropertyEditable } from "./utils";
|
||||||
|
import { getElementsInAtomicUnit, resizeElement } from "./utils";
|
||||||
|
import type { AtomicUnit } from "./utils";
|
||||||
|
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
|
||||||
|
|
||||||
|
interface MultiDimensionProps {
|
||||||
|
property: "width" | "height";
|
||||||
|
elements: readonly ExcalidrawElement[];
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
atomicUnits: AtomicUnit[];
|
||||||
|
scene: Scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 10;
|
||||||
|
|
||||||
|
const getResizedUpdates = (
|
||||||
|
anchorX: number,
|
||||||
|
anchorY: number,
|
||||||
|
scale: number,
|
||||||
|
origElement: ExcalidrawElement,
|
||||||
|
) => {
|
||||||
|
const offsetX = origElement.x - anchorX;
|
||||||
|
const offsetY = origElement.y - anchorY;
|
||||||
|
const nextWidth = origElement.width * scale;
|
||||||
|
const nextHeight = origElement.height * scale;
|
||||||
|
const x = anchorX + offsetX * scale;
|
||||||
|
const y = anchorY + offsetY * scale;
|
||||||
|
|
||||||
|
return {
|
||||||
|
width: nextWidth,
|
||||||
|
height: nextHeight,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
...rescalePointsInElement(origElement, nextWidth, nextHeight, false),
|
||||||
|
...(isTextElement(origElement)
|
||||||
|
? { fontSize: origElement.fontSize * scale }
|
||||||
|
: {}),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const resizeElementInGroup = (
|
||||||
|
anchorX: number,
|
||||||
|
anchorY: number,
|
||||||
|
property: MultiDimensionProps["property"],
|
||||||
|
scale: number,
|
||||||
|
latestElement: ExcalidrawElement,
|
||||||
|
origElement: ExcalidrawElement,
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: ElementsMap,
|
||||||
|
) => {
|
||||||
|
const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
|
||||||
|
|
||||||
|
mutateElement(latestElement, updates, false);
|
||||||
|
const boundTextElement = getBoundTextElement(
|
||||||
|
origElement,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
if (boundTextElement) {
|
||||||
|
const newFontSize = boundTextElement.fontSize * scale;
|
||||||
|
updateBoundElements(latestElement, elementsMap, {
|
||||||
|
newSize: { width: updates.width, height: updates.height },
|
||||||
|
});
|
||||||
|
const latestBoundTextElement = elementsMap.get(boundTextElement.id);
|
||||||
|
if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
|
||||||
|
mutateElement(
|
||||||
|
latestBoundTextElement,
|
||||||
|
{
|
||||||
|
fontSize: newFontSize,
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
handleBindTextResize(
|
||||||
|
latestElement,
|
||||||
|
elementsMap,
|
||||||
|
property === "width" ? "e" : "s",
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resizeGroup = (
|
||||||
|
nextWidth: number,
|
||||||
|
nextHeight: number,
|
||||||
|
initialHeight: number,
|
||||||
|
aspectRatio: number,
|
||||||
|
anchor: Point,
|
||||||
|
property: MultiDimensionProps["property"],
|
||||||
|
latestElements: ExcalidrawElement[],
|
||||||
|
originalElements: ExcalidrawElement[],
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: ElementsMap,
|
||||||
|
) => {
|
||||||
|
// keep aspect ratio for groups
|
||||||
|
if (property === "width") {
|
||||||
|
nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
const scale = nextHeight / initialHeight;
|
||||||
|
|
||||||
|
for (let i = 0; i < originalElements.length; i++) {
|
||||||
|
const origElement = originalElements[i];
|
||||||
|
const latestElement = latestElements[i];
|
||||||
|
|
||||||
|
resizeElementInGroup(
|
||||||
|
anchor[0],
|
||||||
|
anchor[1],
|
||||||
|
property,
|
||||||
|
scale,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const MultiDimension = ({
|
||||||
|
property,
|
||||||
|
elements,
|
||||||
|
elementsMap,
|
||||||
|
atomicUnits,
|
||||||
|
scene,
|
||||||
|
}: MultiDimensionProps) => {
|
||||||
|
const sizes = useMemo(
|
||||||
|
() =>
|
||||||
|
atomicUnits.map((atomicUnit) => {
|
||||||
|
const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap);
|
||||||
|
|
||||||
|
if (elementsInUnit.length > 1) {
|
||||||
|
const [x1, y1, x2, y2] = getCommonBounds(
|
||||||
|
elementsInUnit.map((el) => el.latest),
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
Math.round((property === "width" ? x2 - x1 : y2 - y1) * 100) / 100
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const [el] = elementsInUnit;
|
||||||
|
|
||||||
|
return (
|
||||||
|
Math.round(
|
||||||
|
(property === "width" ? el.latest.width : el.latest.height) * 100,
|
||||||
|
) / 100
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
[elementsMap, atomicUnits, property],
|
||||||
|
);
|
||||||
|
|
||||||
|
const value =
|
||||||
|
new Set(sizes).size === 1 ? Math.round(sizes[0] * 100) / 100 : "Mixed";
|
||||||
|
|
||||||
|
const editable = sizes.length > 0;
|
||||||
|
|
||||||
|
const handleDimensionChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
for (const atomicUnit of atomicUnits) {
|
||||||
|
const elementsInUnit = getElementsInAtomicUnit(
|
||||||
|
atomicUnit,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (elementsInUnit.length > 1) {
|
||||||
|
const latestElements = elementsInUnit.map((el) => el.latest!);
|
||||||
|
const originalElements = elementsInUnit.map((el) => el.original!);
|
||||||
|
const [x1, y1, x2, y2] = getCommonBounds(originalElements);
|
||||||
|
const initialWidth = x2 - x1;
|
||||||
|
const initialHeight = y2 - y1;
|
||||||
|
const aspectRatio = initialWidth / initialHeight;
|
||||||
|
const nextWidth = Math.max(
|
||||||
|
MIN_WIDTH_OR_HEIGHT,
|
||||||
|
property === "width" ? Math.max(0, nextValue) : initialWidth,
|
||||||
|
);
|
||||||
|
const nextHeight = Math.max(
|
||||||
|
MIN_WIDTH_OR_HEIGHT,
|
||||||
|
property === "height" ? Math.max(0, nextValue) : initialHeight,
|
||||||
|
);
|
||||||
|
|
||||||
|
resizeGroup(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
initialHeight,
|
||||||
|
aspectRatio,
|
||||||
|
[x1, y1],
|
||||||
|
property,
|
||||||
|
latestElements,
|
||||||
|
originalElements,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const [el] = elementsInUnit;
|
||||||
|
const latestElement = el?.latest;
|
||||||
|
const origElement = el?.original;
|
||||||
|
|
||||||
|
if (
|
||||||
|
latestElement &&
|
||||||
|
origElement &&
|
||||||
|
isPropertyEditable(latestElement, property)
|
||||||
|
) {
|
||||||
|
let nextWidth =
|
||||||
|
property === "width"
|
||||||
|
? Math.max(0, nextValue)
|
||||||
|
: latestElement.width;
|
||||||
|
if (property === "width") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextHeight =
|
||||||
|
property === "height"
|
||||||
|
? Math.max(0, nextValue)
|
||||||
|
: latestElement.height;
|
||||||
|
if (property === "height") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextHeight = Math.round(nextHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
|
||||||
|
nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
|
||||||
|
|
||||||
|
resizeElement(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
false,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeInWidth = property === "width" ? accumulatedChange : 0;
|
||||||
|
const changeInHeight = property === "height" ? accumulatedChange : 0;
|
||||||
|
|
||||||
|
for (const atomicUnit of atomicUnits) {
|
||||||
|
const elementsInUnit = getElementsInAtomicUnit(
|
||||||
|
atomicUnit,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (elementsInUnit.length > 1) {
|
||||||
|
const latestElements = elementsInUnit.map((el) => el.latest!);
|
||||||
|
const originalElements = elementsInUnit.map((el) => el.original!);
|
||||||
|
|
||||||
|
const [x1, y1, x2, y2] = getCommonBounds(originalElements);
|
||||||
|
const initialWidth = x2 - x1;
|
||||||
|
const initialHeight = y2 - y1;
|
||||||
|
const aspectRatio = initialWidth / initialHeight;
|
||||||
|
let nextWidth = Math.max(0, initialWidth + changeInWidth);
|
||||||
|
if (property === "width") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextHeight = Math.max(0, initialHeight + changeInHeight);
|
||||||
|
if (property === "height") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextHeight = Math.round(nextHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
|
||||||
|
nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
|
||||||
|
|
||||||
|
resizeGroup(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
initialHeight,
|
||||||
|
aspectRatio,
|
||||||
|
[x1, y1],
|
||||||
|
property,
|
||||||
|
latestElements,
|
||||||
|
originalElements,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const [el] = elementsInUnit;
|
||||||
|
const latestElement = el?.latest;
|
||||||
|
const origElement = el?.original;
|
||||||
|
|
||||||
|
if (
|
||||||
|
latestElement &&
|
||||||
|
origElement &&
|
||||||
|
isPropertyEditable(latestElement, property)
|
||||||
|
) {
|
||||||
|
let nextWidth = Math.max(0, origElement.width + changeInWidth);
|
||||||
|
if (property === "width") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextWidth = Math.round(nextWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextHeight = Math.max(0, origElement.height + changeInHeight);
|
||||||
|
if (property === "height") {
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
|
||||||
|
} else {
|
||||||
|
nextHeight = Math.round(nextHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
|
||||||
|
nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
|
||||||
|
|
||||||
|
resizeElement(
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
false,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DragInput
|
||||||
|
label={property === "width" ? "W" : "H"}
|
||||||
|
elements={elements}
|
||||||
|
dragInputCallback={handleDimensionChange}
|
||||||
|
value={value}
|
||||||
|
editable={editable}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MultiDimension;
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import { isTextElement, refreshTextDimensions } from "../../element";
|
||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import { isBoundToContainer } from "../../element/typeChecks";
|
||||||
|
import type {
|
||||||
|
ElementsMap,
|
||||||
|
ExcalidrawElement,
|
||||||
|
ExcalidrawTextElement,
|
||||||
|
} from "../../element/types";
|
||||||
|
import { isInGroup } from "../../groups";
|
||||||
|
import type Scene from "../../scene/Scene";
|
||||||
|
import { fontSizeIcon } from "../icons";
|
||||||
|
import StatsDragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue } from "./utils";
|
||||||
|
|
||||||
|
interface MultiFontSizeProps {
|
||||||
|
elements: readonly ExcalidrawElement[];
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
scene: Scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MIN_FONT_SIZE = 4;
|
||||||
|
const STEP_SIZE = 4;
|
||||||
|
|
||||||
|
const MultiFontSize = ({
|
||||||
|
elements,
|
||||||
|
elementsMap,
|
||||||
|
scene,
|
||||||
|
}: MultiFontSizeProps) => {
|
||||||
|
const latestTextElements = elements.filter(
|
||||||
|
(el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
|
||||||
|
) as ExcalidrawTextElement[];
|
||||||
|
const fontSizes = latestTextElements.map(
|
||||||
|
(textEl) => Math.round(textEl.fontSize * 10) / 10,
|
||||||
|
);
|
||||||
|
const value = new Set(fontSizes).size === 1 ? fontSizes[0] : "Mixed";
|
||||||
|
const editable = fontSizes.length > 0;
|
||||||
|
|
||||||
|
const handleFontSizeChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
if (nextValue) {
|
||||||
|
const nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
|
||||||
|
|
||||||
|
for (const textElement of latestTextElements) {
|
||||||
|
const newElement = {
|
||||||
|
...textElement,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
};
|
||||||
|
const updates = refreshTextDimensions(newElement, null, elementsMap);
|
||||||
|
mutateElement(
|
||||||
|
textElement,
|
||||||
|
{
|
||||||
|
...updates,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalTextElements = originalElements.filter(
|
||||||
|
(el) => !isInGroup(el) && isTextElement(el) && !isBoundToContainer(el),
|
||||||
|
) as ExcalidrawTextElement[];
|
||||||
|
|
||||||
|
for (let i = 0; i < latestTextElements.length; i++) {
|
||||||
|
const latestElement = latestTextElements[i];
|
||||||
|
const originalElement = originalTextElements[i];
|
||||||
|
|
||||||
|
const originalFontSize = Math.round(originalElement.fontSize);
|
||||||
|
const changeInFontSize = Math.round(accumulatedChange);
|
||||||
|
let nextFontSize = Math.max(
|
||||||
|
originalFontSize + changeInFontSize,
|
||||||
|
MIN_FONT_SIZE,
|
||||||
|
);
|
||||||
|
if (shouldChangeByStepSize) {
|
||||||
|
nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
|
||||||
|
}
|
||||||
|
const newElement = {
|
||||||
|
...latestElement,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
};
|
||||||
|
const updates = refreshTextDimensions(newElement, null, elementsMap);
|
||||||
|
mutateElement(
|
||||||
|
latestElement,
|
||||||
|
{
|
||||||
|
...updates,
|
||||||
|
fontSize: nextFontSize,
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsDragInput
|
||||||
|
label="F"
|
||||||
|
icon={fontSizeIcon}
|
||||||
|
elements={elements}
|
||||||
|
dragInputCallback={handleFontSizeChange}
|
||||||
|
value={value}
|
||||||
|
editable={editable}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MultiFontSize;
|
||||||
@ -0,0 +1,239 @@
|
|||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import { rotate } from "../../math";
|
||||||
|
import type Scene from "../../scene/Scene";
|
||||||
|
import StatsDragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, isPropertyEditable } from "./utils";
|
||||||
|
import { getCommonBounds, isTextElement } from "../../element";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import { getElementsInAtomicUnit, moveElement } from "./utils";
|
||||||
|
import type { AtomicUnit } from "./utils";
|
||||||
|
|
||||||
|
interface MultiPositionProps {
|
||||||
|
property: "x" | "y";
|
||||||
|
elements: readonly ExcalidrawElement[];
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
atomicUnits: AtomicUnit[];
|
||||||
|
scene: Scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 10;
|
||||||
|
|
||||||
|
const moveElements = (
|
||||||
|
property: MultiPositionProps["property"],
|
||||||
|
changeInTopX: number,
|
||||||
|
changeInTopY: number,
|
||||||
|
elements: readonly ExcalidrawElement[],
|
||||||
|
originalElements: readonly ExcalidrawElement[],
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: ElementsMap,
|
||||||
|
) => {
|
||||||
|
for (let i = 0; i < elements.length; i++) {
|
||||||
|
const origElement = originalElements[i];
|
||||||
|
const latestElement = elements[i];
|
||||||
|
|
||||||
|
const [cx, cy] = [
|
||||||
|
origElement.x + origElement.width / 2,
|
||||||
|
origElement.y + origElement.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
origElement.x,
|
||||||
|
origElement.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
origElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
const newTopLeftX =
|
||||||
|
property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
|
||||||
|
|
||||||
|
const newTopLeftY =
|
||||||
|
property === "y" ? Math.round(topLeftY + changeInTopY) : topLeftY;
|
||||||
|
|
||||||
|
moveElement(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveGroupTo = (
|
||||||
|
nextX: number,
|
||||||
|
nextY: number,
|
||||||
|
latestElements: ExcalidrawElement[],
|
||||||
|
originalElements: ExcalidrawElement[],
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: ElementsMap,
|
||||||
|
) => {
|
||||||
|
const [x1, y1, ,] = getCommonBounds(originalElements);
|
||||||
|
const offsetX = nextX - x1;
|
||||||
|
const offsetY = nextY - y1;
|
||||||
|
|
||||||
|
for (let i = 0; i < latestElements.length; i++) {
|
||||||
|
const origElement = originalElements[i];
|
||||||
|
const latestElement = latestElements[i];
|
||||||
|
|
||||||
|
// bound texts are moved with their containers
|
||||||
|
if (!isTextElement(latestElement) || !latestElement.containerId) {
|
||||||
|
const [cx, cy] = [
|
||||||
|
latestElement.x + latestElement.width / 2,
|
||||||
|
latestElement.y + latestElement.height / 2,
|
||||||
|
];
|
||||||
|
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
latestElement.x,
|
||||||
|
latestElement.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
latestElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
moveElement(
|
||||||
|
topLeftX + offsetX,
|
||||||
|
topLeftY + offsetY,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const MultiPosition = ({
|
||||||
|
property,
|
||||||
|
elements,
|
||||||
|
elementsMap,
|
||||||
|
atomicUnits,
|
||||||
|
scene,
|
||||||
|
}: MultiPositionProps) => {
|
||||||
|
const positions = useMemo(
|
||||||
|
() =>
|
||||||
|
atomicUnits.map((atomicUnit) => {
|
||||||
|
const elementsInUnit = Object.keys(atomicUnit)
|
||||||
|
.map((id) => elementsMap.get(id))
|
||||||
|
.filter((el) => el !== undefined) as ExcalidrawElement[];
|
||||||
|
|
||||||
|
// we're dealing with a group
|
||||||
|
if (elementsInUnit.length > 1) {
|
||||||
|
const [x1, y1] = getCommonBounds(elementsInUnit);
|
||||||
|
return Math.round((property === "x" ? x1 : y1) * 100) / 100;
|
||||||
|
}
|
||||||
|
const [el] = elementsInUnit;
|
||||||
|
const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
|
||||||
|
|
||||||
|
const [topLeftX, topLeftY] = rotate(el.x, el.y, cx, cy, el.angle);
|
||||||
|
|
||||||
|
return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
|
||||||
|
}),
|
||||||
|
[atomicUnits, elementsMap, property],
|
||||||
|
);
|
||||||
|
|
||||||
|
const value = new Set(positions).size === 1 ? positions[0] : "Mixed";
|
||||||
|
|
||||||
|
const handlePositionChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
for (const atomicUnit of atomicUnits) {
|
||||||
|
const elementsInUnit = getElementsInAtomicUnit(
|
||||||
|
atomicUnit,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (elementsInUnit.length > 1) {
|
||||||
|
const [x1, y1, ,] = getCommonBounds(
|
||||||
|
elementsInUnit.map((el) => el.latest!),
|
||||||
|
);
|
||||||
|
const newTopLeftX = property === "x" ? nextValue : x1;
|
||||||
|
const newTopLeftY = property === "y" ? nextValue : y1;
|
||||||
|
|
||||||
|
moveGroupTo(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
elementsInUnit.map((el) => el.latest),
|
||||||
|
elementsInUnit.map((el) => el.original),
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const origElement = elementsInUnit[0]?.original;
|
||||||
|
const latestElement = elementsInUnit[0]?.latest;
|
||||||
|
if (
|
||||||
|
origElement &&
|
||||||
|
latestElement &&
|
||||||
|
isPropertyEditable(latestElement, property)
|
||||||
|
) {
|
||||||
|
const [cx, cy] = [
|
||||||
|
origElement.x + origElement.width / 2,
|
||||||
|
origElement.y + origElement.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
origElement.x,
|
||||||
|
origElement.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
origElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
const newTopLeftX = property === "x" ? nextValue : topLeftX;
|
||||||
|
const newTopLeftY = property === "y" ? nextValue : topLeftY;
|
||||||
|
moveElement(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
latestElement,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const change = shouldChangeByStepSize
|
||||||
|
? getStepSizedValue(accumulatedChange, STEP_SIZE)
|
||||||
|
: accumulatedChange;
|
||||||
|
|
||||||
|
const changeInTopX = property === "x" ? change : 0;
|
||||||
|
const changeInTopY = property === "y" ? change : 0;
|
||||||
|
|
||||||
|
moveElements(
|
||||||
|
property,
|
||||||
|
changeInTopX,
|
||||||
|
changeInTopY,
|
||||||
|
elements,
|
||||||
|
originalElements,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
|
scene.triggerUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsDragInput
|
||||||
|
label={property === "x" ? "X" : "Y"}
|
||||||
|
elements={elements}
|
||||||
|
dragInputCallback={handlePositionChange}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MultiPosition;
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
|
||||||
|
import { rotate } from "../../math";
|
||||||
|
import StatsDragInput from "./DragInput";
|
||||||
|
import type { DragInputCallbackType } from "./DragInput";
|
||||||
|
import { getStepSizedValue, moveElement } from "./utils";
|
||||||
|
|
||||||
|
interface PositionProps {
|
||||||
|
property: "x" | "y";
|
||||||
|
element: ExcalidrawElement;
|
||||||
|
elementsMap: ElementsMap;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_SIZE = 10;
|
||||||
|
|
||||||
|
const Position = ({ property, element, elementsMap }: PositionProps) => {
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
element.x,
|
||||||
|
element.y,
|
||||||
|
element.x + element.width / 2,
|
||||||
|
element.y + element.height / 2,
|
||||||
|
element.angle,
|
||||||
|
);
|
||||||
|
const value =
|
||||||
|
Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
|
||||||
|
|
||||||
|
const handlePositionChange: DragInputCallbackType = ({
|
||||||
|
accumulatedChange,
|
||||||
|
originalElements,
|
||||||
|
originalElementsMap,
|
||||||
|
shouldChangeByStepSize,
|
||||||
|
nextValue,
|
||||||
|
}) => {
|
||||||
|
const origElement = originalElements[0];
|
||||||
|
const [cx, cy] = [
|
||||||
|
origElement.x + origElement.width / 2,
|
||||||
|
origElement.y + origElement.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
origElement.x,
|
||||||
|
origElement.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
origElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
const newTopLeftX = property === "x" ? nextValue : topLeftX;
|
||||||
|
const newTopLeftY = property === "y" ? nextValue : topLeftY;
|
||||||
|
moveElement(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
element,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeInTopX = property === "x" ? accumulatedChange : 0;
|
||||||
|
const changeInTopY = property === "y" ? accumulatedChange : 0;
|
||||||
|
|
||||||
|
const newTopLeftX =
|
||||||
|
property === "x"
|
||||||
|
? Math.round(
|
||||||
|
shouldChangeByStepSize
|
||||||
|
? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
|
||||||
|
: topLeftX + changeInTopX,
|
||||||
|
)
|
||||||
|
: topLeftX;
|
||||||
|
|
||||||
|
const newTopLeftY =
|
||||||
|
property === "y"
|
||||||
|
? Math.round(
|
||||||
|
shouldChangeByStepSize
|
||||||
|
? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
|
||||||
|
: topLeftY + changeInTopY,
|
||||||
|
)
|
||||||
|
: topLeftY;
|
||||||
|
|
||||||
|
moveElement(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
element,
|
||||||
|
origElement,
|
||||||
|
elementsMap,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsDragInput
|
||||||
|
label={property === "x" ? "X" : "Y"}
|
||||||
|
elements={[element]}
|
||||||
|
dragInputCallback={handlePositionChange}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Position;
|
||||||
@ -0,0 +1,306 @@
|
|||||||
|
import { useEffect, useMemo, useState, memo } from "react";
|
||||||
|
import { getCommonBounds } from "../../element/bounds";
|
||||||
|
import type { NonDeletedExcalidrawElement } from "../../element/types";
|
||||||
|
import { t } from "../../i18n";
|
||||||
|
import type { AppState, ExcalidrawProps } from "../../types";
|
||||||
|
import { CloseIcon } from "../icons";
|
||||||
|
import { Island } from "../Island";
|
||||||
|
import { throttle } from "lodash";
|
||||||
|
import Dimension from "./Dimension";
|
||||||
|
import Angle from "./Angle";
|
||||||
|
|
||||||
|
import FontSize from "./FontSize";
|
||||||
|
import MultiDimension from "./MultiDimension";
|
||||||
|
import {
|
||||||
|
elementsAreInSameGroup,
|
||||||
|
getElementsInGroup,
|
||||||
|
getSelectedGroupIds,
|
||||||
|
isInGroup,
|
||||||
|
} from "../../groups";
|
||||||
|
import MultiAngle from "./MultiAngle";
|
||||||
|
import MultiFontSize from "./MultiFontSize";
|
||||||
|
import Position from "./Position";
|
||||||
|
import MultiPosition from "./MultiPosition";
|
||||||
|
import Collapsible from "./Collapsible";
|
||||||
|
import type Scene from "../../scene/Scene";
|
||||||
|
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
|
||||||
|
import type { AtomicUnit } from "./utils";
|
||||||
|
import { STATS_PANELS } from "../../constants";
|
||||||
|
|
||||||
|
interface StatsProps {
|
||||||
|
scene: Scene;
|
||||||
|
onClose: () => void;
|
||||||
|
renderCustomStats: ExcalidrawProps["renderCustomStats"];
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATS_TIMEOUT = 50;
|
||||||
|
|
||||||
|
export const Stats = (props: StatsProps) => {
|
||||||
|
const appState = useExcalidrawAppState();
|
||||||
|
const sceneNonce = props.scene.getSceneNonce() || 1;
|
||||||
|
const selectedElements = props.scene.getSelectedElements({
|
||||||
|
selectedElementIds: appState.selectedElementIds,
|
||||||
|
includeBoundTextElement: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsInner
|
||||||
|
{...props}
|
||||||
|
appState={appState}
|
||||||
|
sceneNonce={sceneNonce}
|
||||||
|
selectedElements={selectedElements}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StatsInner = memo(
|
||||||
|
({
|
||||||
|
scene,
|
||||||
|
onClose,
|
||||||
|
renderCustomStats,
|
||||||
|
selectedElements,
|
||||||
|
appState,
|
||||||
|
sceneNonce,
|
||||||
|
}: StatsProps & {
|
||||||
|
sceneNonce: number;
|
||||||
|
selectedElements: readonly NonDeletedExcalidrawElement[];
|
||||||
|
appState: AppState;
|
||||||
|
}) => {
|
||||||
|
const elements = scene.getNonDeletedElements();
|
||||||
|
const elementsMap = scene.getNonDeletedElementsMap();
|
||||||
|
const setAppState = useExcalidrawSetAppState();
|
||||||
|
|
||||||
|
const singleElement =
|
||||||
|
selectedElements.length === 1 ? selectedElements[0] : null;
|
||||||
|
|
||||||
|
const multipleElements =
|
||||||
|
selectedElements.length > 1 ? selectedElements : null;
|
||||||
|
|
||||||
|
const [sceneDimension, setSceneDimension] = useState<{
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}>({
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const throttledSetSceneDimension = useMemo(
|
||||||
|
() =>
|
||||||
|
throttle((elements: readonly NonDeletedExcalidrawElement[]) => {
|
||||||
|
const boundingBox = getCommonBounds(elements);
|
||||||
|
setSceneDimension({
|
||||||
|
width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
|
||||||
|
height: Math.round(boundingBox[3]) - Math.round(boundingBox[1]),
|
||||||
|
});
|
||||||
|
}, STATS_TIMEOUT),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
throttledSetSceneDimension(elements);
|
||||||
|
}, [sceneNonce, elements, throttledSetSceneDimension]);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => () => throttledSetSceneDimension.cancel(),
|
||||||
|
[throttledSetSceneDimension],
|
||||||
|
);
|
||||||
|
|
||||||
|
const atomicUnits = useMemo(() => {
|
||||||
|
const selectedGroupIds = getSelectedGroupIds(appState);
|
||||||
|
const _atomicUnits = selectedGroupIds.map((gid) => {
|
||||||
|
return getElementsInGroup(selectedElements, gid).reduce((acc, el) => {
|
||||||
|
acc[el.id] = true;
|
||||||
|
return acc;
|
||||||
|
}, {} as AtomicUnit);
|
||||||
|
});
|
||||||
|
selectedElements
|
||||||
|
.filter((el) => !isInGroup(el))
|
||||||
|
.forEach((el) => {
|
||||||
|
_atomicUnits.push({
|
||||||
|
[el.id]: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return _atomicUnits;
|
||||||
|
}, [selectedElements, appState]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="Stats">
|
||||||
|
<Island padding={3}>
|
||||||
|
<div className="title">
|
||||||
|
<h2>{t("stats.title")}</h2>
|
||||||
|
<div className="close" onClick={onClose}>
|
||||||
|
{CloseIcon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Collapsible
|
||||||
|
label={<h3>{t("stats.generalStats")}</h3>}
|
||||||
|
open={!!(appState.stats.panels & STATS_PANELS.generalStats)}
|
||||||
|
openTrigger={() =>
|
||||||
|
setAppState((state) => {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
stats: {
|
||||||
|
open: true,
|
||||||
|
panels: state.stats.panels ^ STATS_PANELS.generalStats,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th colSpan={2}>{t("stats.scene")}</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{t("stats.elements")}</td>
|
||||||
|
<td>{elements.length}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{t("stats.width")}</td>
|
||||||
|
<td>{sceneDimension.width}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{t("stats.height")}</td>
|
||||||
|
<td>{sceneDimension.height}</td>
|
||||||
|
</tr>
|
||||||
|
{renderCustomStats?.(elements, appState)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
{selectedElements.length > 0 && (
|
||||||
|
<div
|
||||||
|
id="elementStats"
|
||||||
|
style={{
|
||||||
|
marginTop: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Collapsible
|
||||||
|
label={<h3>{t("stats.elementProperties")}</h3>}
|
||||||
|
open={
|
||||||
|
!!(appState.stats.panels & STATS_PANELS.elementProperties)
|
||||||
|
}
|
||||||
|
openTrigger={() =>
|
||||||
|
setAppState((state) => {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
stats: {
|
||||||
|
open: true,
|
||||||
|
panels:
|
||||||
|
state.stats.panels ^ STATS_PANELS.elementProperties,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{singleElement && (
|
||||||
|
<div className="sectionContent">
|
||||||
|
<div className="elementType">
|
||||||
|
{t(`element.${singleElement.type}`)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="statsItem">
|
||||||
|
<Position
|
||||||
|
element={singleElement}
|
||||||
|
property="x"
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
<Position
|
||||||
|
element={singleElement}
|
||||||
|
property="y"
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
<Dimension
|
||||||
|
property="width"
|
||||||
|
element={singleElement}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
<Dimension
|
||||||
|
property="height"
|
||||||
|
element={singleElement}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
<Angle
|
||||||
|
element={singleElement}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
{singleElement.type === "text" && (
|
||||||
|
<FontSize
|
||||||
|
element={singleElement}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{multipleElements && (
|
||||||
|
<div className="sectionContent">
|
||||||
|
{elementsAreInSameGroup(multipleElements) && (
|
||||||
|
<div className="elementType">{t("element.group")}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="elementsCount">
|
||||||
|
<div>{t("stats.elements")}</div>
|
||||||
|
<div>{selectedElements.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="statsItem">
|
||||||
|
<MultiPosition
|
||||||
|
property="x"
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
atomicUnits={atomicUnits}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
<MultiPosition
|
||||||
|
property="y"
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
atomicUnits={atomicUnits}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
<MultiDimension
|
||||||
|
property="width"
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
atomicUnits={atomicUnits}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
<MultiDimension
|
||||||
|
property="height"
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
atomicUnits={atomicUnits}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
<MultiAngle
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
<MultiFontSize
|
||||||
|
elements={multipleElements}
|
||||||
|
elementsMap={elementsMap}
|
||||||
|
scene={scene}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Collapsible>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Island>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
(prev, next) => {
|
||||||
|
return (
|
||||||
|
prev.sceneNonce === next.sceneNonce &&
|
||||||
|
prev.selectedElements === next.selectedElements &&
|
||||||
|
prev.appState.stats.panels === next.appState.stats.panels
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
@ -0,0 +1,658 @@
|
|||||||
|
import { fireEvent, queryByTestId } from "@testing-library/react";
|
||||||
|
import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
|
||||||
|
import { getStepSizedValue } from "./utils";
|
||||||
|
import {
|
||||||
|
GlobalTestState,
|
||||||
|
mockBoundingClientRect,
|
||||||
|
render,
|
||||||
|
restoreOriginalGetBoundingClientRect,
|
||||||
|
} from "../../tests/test-utils";
|
||||||
|
import * as StaticScene from "../../renderer/staticScene";
|
||||||
|
import { vi } from "vitest";
|
||||||
|
import { reseed } from "../../random";
|
||||||
|
import { setDateTimeForTests } from "../../utils";
|
||||||
|
import { Excalidraw } from "../..";
|
||||||
|
import { t } from "../../i18n";
|
||||||
|
import type {
|
||||||
|
ExcalidrawElement,
|
||||||
|
ExcalidrawTextElement,
|
||||||
|
} from "../../element/types";
|
||||||
|
import { degreeToRadian, rotate } from "../../math";
|
||||||
|
import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
|
||||||
|
import { getCommonBounds, isTextElement } from "../../element";
|
||||||
|
import { API } from "../../tests/helpers/api";
|
||||||
|
import { actionGroup } from "../../actions";
|
||||||
|
import { isInGroup } from "../../groups";
|
||||||
|
|
||||||
|
const { h } = window;
|
||||||
|
const mouse = new Pointer("mouse");
|
||||||
|
const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
|
||||||
|
let stats: HTMLElement | null = null;
|
||||||
|
let elementStats: HTMLElement | null | undefined = null;
|
||||||
|
|
||||||
|
const getStatsProperty = (label: string) => {
|
||||||
|
if (elementStats) {
|
||||||
|
const properties = elementStats?.querySelector(".statsItem");
|
||||||
|
return properties?.querySelector?.(
|
||||||
|
`.drag-input-container[data-testid="${label}"]`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const testInputProperty = (
|
||||||
|
element: ExcalidrawElement,
|
||||||
|
property: "x" | "y" | "width" | "height" | "angle" | "fontSize",
|
||||||
|
label: string,
|
||||||
|
initialValue: number,
|
||||||
|
nextValue: number,
|
||||||
|
) => {
|
||||||
|
const input = getStatsProperty(label)?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(input).not.toBeNull();
|
||||||
|
expect(input.value).toBe(initialValue.toString());
|
||||||
|
input?.focus();
|
||||||
|
input.value = nextValue.toString();
|
||||||
|
input?.blur();
|
||||||
|
if (property === "angle") {
|
||||||
|
expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
|
||||||
|
} else if (property === "fontSize" && isTextElement(element)) {
|
||||||
|
expect(element[property]).toBe(Number(nextValue));
|
||||||
|
} else if (property !== "fontSize") {
|
||||||
|
expect(element[property]).toBe(Number(nextValue));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("step sized value", () => {
|
||||||
|
it("should return edge values correctly", () => {
|
||||||
|
const steps = [10, 15, 20, 25, 30];
|
||||||
|
const values = [10, 15, 20, 25, 30];
|
||||||
|
|
||||||
|
steps.forEach((step, idx) => {
|
||||||
|
expect(getStepSizedValue(values[idx], step)).toEqual(values[idx]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("step sized value lies in the middle", () => {
|
||||||
|
let stepSize = 15;
|
||||||
|
let values = [7.5, 9, 12, 14.99, 15, 22.49];
|
||||||
|
|
||||||
|
values.forEach((value) => {
|
||||||
|
expect(getStepSizedValue(value, stepSize)).toEqual(15);
|
||||||
|
});
|
||||||
|
|
||||||
|
stepSize = 10;
|
||||||
|
values = [-5, 4.99, 0, 1.23];
|
||||||
|
values.forEach((value) => {
|
||||||
|
expect(getStepSizedValue(value, stepSize)).toEqual(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// single element
|
||||||
|
describe("stats for a generic element", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
localStorage.clear();
|
||||||
|
renderStaticScene.mockClear();
|
||||||
|
reseed(7);
|
||||||
|
setDateTimeForTests("201933152653");
|
||||||
|
|
||||||
|
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||||
|
|
||||||
|
h.elements = [];
|
||||||
|
|
||||||
|
fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
|
||||||
|
button: 2,
|
||||||
|
clientX: 1,
|
||||||
|
clientY: 1,
|
||||||
|
});
|
||||||
|
const contextMenu = UI.queryContextMenu();
|
||||||
|
fireEvent.click(queryByTestId(contextMenu!, "stats")!);
|
||||||
|
stats = UI.queryStats();
|
||||||
|
|
||||||
|
UI.clickTool("rectangle");
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(200, 100);
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
mockBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
restoreOriginalGetBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should open stats", () => {
|
||||||
|
expect(stats).not.toBeNull();
|
||||||
|
expect(elementStats).not.toBeNull();
|
||||||
|
|
||||||
|
// title
|
||||||
|
const title = elementStats?.querySelector("h3");
|
||||||
|
expect(title?.lastChild?.nodeValue)?.toBe(t("stats.elementProperties"));
|
||||||
|
|
||||||
|
// element type
|
||||||
|
const elementType = elementStats?.querySelector(".elementType");
|
||||||
|
expect(elementType).not.toBeNull();
|
||||||
|
expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));
|
||||||
|
|
||||||
|
// properties
|
||||||
|
const properties = elementStats?.querySelector(".statsItem");
|
||||||
|
expect(properties?.childNodes).not.toBeNull();
|
||||||
|
["X", "Y", "W", "H", "A"].forEach((label) => () => {
|
||||||
|
expect(
|
||||||
|
properties?.querySelector?.(
|
||||||
|
`.drag-input-container[data-testid="${label}"]`,
|
||||||
|
),
|
||||||
|
).not.toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should be able to edit all properties for a general element", () => {
|
||||||
|
const rectangle = h.elements[0];
|
||||||
|
const initialX = rectangle.x;
|
||||||
|
const initialY = rectangle.y;
|
||||||
|
|
||||||
|
testInputProperty(rectangle, "width", "W", 200, 100);
|
||||||
|
testInputProperty(rectangle, "height", "H", 100, 200);
|
||||||
|
testInputProperty(rectangle, "x", "X", initialX, 230);
|
||||||
|
testInputProperty(rectangle, "y", "Y", initialY, 220);
|
||||||
|
testInputProperty(rectangle, "angle", "A", 0, 45);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should keep only two decimal places", () => {
|
||||||
|
const rectangle = h.elements[0];
|
||||||
|
const rectangleId = rectangle.id;
|
||||||
|
|
||||||
|
const input = getStatsProperty("W")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(input).not.toBeNull();
|
||||||
|
expect(input.value).toBe(rectangle.width.toString());
|
||||||
|
input?.focus();
|
||||||
|
input.value = "123.123";
|
||||||
|
input?.blur();
|
||||||
|
expect(h.elements.length).toBe(1);
|
||||||
|
expect(rectangle.id).toBe(rectangleId);
|
||||||
|
expect(input.value).toBe("123.12");
|
||||||
|
expect(rectangle.width).toBe(123.12);
|
||||||
|
|
||||||
|
input?.focus();
|
||||||
|
input.value = "88.98766";
|
||||||
|
input?.blur();
|
||||||
|
expect(input.value).toBe("88.99");
|
||||||
|
expect(rectangle.width).toBe(88.99);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should update input x and y when angle is changed", () => {
|
||||||
|
const rectangle = h.elements[0];
|
||||||
|
const [cx, cy] = [
|
||||||
|
rectangle.x + rectangle.width / 2,
|
||||||
|
rectangle.y + rectangle.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
const xInput = getStatsProperty("X")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
|
||||||
|
const yInput = getStatsProperty("Y")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
|
||||||
|
expect(xInput.value).toBe(topLeftX.toString());
|
||||||
|
expect(yInput.value).toBe(topLeftY.toString());
|
||||||
|
|
||||||
|
testInputProperty(rectangle, "angle", "A", 0, 45);
|
||||||
|
|
||||||
|
let [newTopLeftX, newTopLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(newTopLeftX.toString()).not.toEqual(xInput.value);
|
||||||
|
expect(newTopLeftY.toString()).not.toEqual(yInput.value);
|
||||||
|
|
||||||
|
testInputProperty(rectangle, "angle", "A", 45, 66);
|
||||||
|
|
||||||
|
[newTopLeftX, newTopLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
expect(newTopLeftX.toString()).not.toEqual(xInput.value);
|
||||||
|
expect(newTopLeftY.toString()).not.toEqual(yInput.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should fix top left corner when width or height is changed", () => {
|
||||||
|
const rectangle = h.elements[0];
|
||||||
|
|
||||||
|
testInputProperty(rectangle, "angle", "A", 0, 45);
|
||||||
|
let [cx, cy] = [
|
||||||
|
rectangle.x + rectangle.width / 2,
|
||||||
|
rectangle.y + rectangle.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
testInputProperty(rectangle, "width", "W", rectangle.width, 400);
|
||||||
|
[cx, cy] = [
|
||||||
|
rectangle.x + rectangle.width / 2,
|
||||||
|
rectangle.y + rectangle.height / 2,
|
||||||
|
];
|
||||||
|
let [currentTopLeftX, currentTopLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
|
||||||
|
expect(currentTopLeftY).toBeCloseTo(topLeftY, 4);
|
||||||
|
|
||||||
|
testInputProperty(rectangle, "height", "H", rectangle.height, 400);
|
||||||
|
[cx, cy] = [
|
||||||
|
rectangle.x + rectangle.width / 2,
|
||||||
|
rectangle.y + rectangle.height / 2,
|
||||||
|
];
|
||||||
|
[currentTopLeftX, currentTopLeftY] = rotate(
|
||||||
|
rectangle.x,
|
||||||
|
rectangle.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
rectangle.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
|
||||||
|
expect(currentTopLeftY).toBeCloseTo(topLeftY, 4);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("stats for a non-generic element", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
localStorage.clear();
|
||||||
|
renderStaticScene.mockClear();
|
||||||
|
reseed(7);
|
||||||
|
setDateTimeForTests("201933152653");
|
||||||
|
|
||||||
|
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||||
|
|
||||||
|
h.elements = [];
|
||||||
|
|
||||||
|
fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
|
||||||
|
button: 2,
|
||||||
|
clientX: 1,
|
||||||
|
clientY: 1,
|
||||||
|
});
|
||||||
|
const contextMenu = UI.queryContextMenu();
|
||||||
|
fireEvent.click(queryByTestId(contextMenu!, "stats")!);
|
||||||
|
stats = UI.queryStats();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
mockBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
restoreOriginalGetBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("text element", async () => {
|
||||||
|
UI.clickTool("text");
|
||||||
|
mouse.clickAt(20, 30);
|
||||||
|
const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
|
||||||
|
const editor = await getTextEditor(textEditorSelector, true);
|
||||||
|
await new Promise((r) => setTimeout(r, 0));
|
||||||
|
updateTextEditor(editor, "Hello!");
|
||||||
|
editor.blur();
|
||||||
|
|
||||||
|
const text = h.elements[0] as ExcalidrawTextElement;
|
||||||
|
mouse.clickOn(text);
|
||||||
|
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
|
||||||
|
// can change font size
|
||||||
|
const input = getStatsProperty("F")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(input).not.toBeNull();
|
||||||
|
expect(input.value).toBe(text.fontSize.toString());
|
||||||
|
input?.focus();
|
||||||
|
input.value = "36";
|
||||||
|
input?.blur();
|
||||||
|
expect(text.fontSize).toBe(36);
|
||||||
|
|
||||||
|
// cannot change width or height
|
||||||
|
const width = getStatsProperty("W")?.querySelector(".drag-input");
|
||||||
|
expect(width).toBeUndefined();
|
||||||
|
const height = getStatsProperty("H")?.querySelector(".drag-input");
|
||||||
|
expect(height).toBeUndefined();
|
||||||
|
|
||||||
|
// min font size is 4
|
||||||
|
input.focus();
|
||||||
|
input.value = "0";
|
||||||
|
input.blur();
|
||||||
|
expect(text.fontSize).not.toBe(0);
|
||||||
|
expect(text.fontSize).toBe(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("frame element", () => {
|
||||||
|
const frame = API.createElement({
|
||||||
|
id: "id0",
|
||||||
|
type: "frame",
|
||||||
|
x: 150,
|
||||||
|
width: 150,
|
||||||
|
});
|
||||||
|
h.elements = [frame];
|
||||||
|
h.setState({
|
||||||
|
selectedElementIds: {
|
||||||
|
[frame.id]: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
|
||||||
|
expect(elementStats).not.toBeNull();
|
||||||
|
|
||||||
|
// cannot change angle
|
||||||
|
const angle = getStatsProperty("A")?.querySelector(".drag-input");
|
||||||
|
expect(angle).toBeUndefined();
|
||||||
|
|
||||||
|
// can change width or height
|
||||||
|
testInputProperty(frame, "width", "W", frame.width, 250);
|
||||||
|
testInputProperty(frame, "height", "H", frame.height, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("image element", () => {
|
||||||
|
const image = API.createElement({ type: "image", width: 200, height: 100 });
|
||||||
|
h.elements = [image];
|
||||||
|
mouse.clickOn(image);
|
||||||
|
h.setState({
|
||||||
|
selectedElementIds: {
|
||||||
|
[image.id]: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
expect(elementStats).not.toBeNull();
|
||||||
|
const widthToHeight = image.width / image.height;
|
||||||
|
|
||||||
|
// when width or height is changed, the aspect ratio is preserved
|
||||||
|
testInputProperty(image, "width", "W", image.width, 400);
|
||||||
|
expect(image.width).toBe(400);
|
||||||
|
expect(image.width / image.height).toBe(widthToHeight);
|
||||||
|
|
||||||
|
testInputProperty(image, "height", "H", image.height, 80);
|
||||||
|
expect(image.height).toBe(80);
|
||||||
|
expect(image.width / image.height).toBe(widthToHeight);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// multiple elements
|
||||||
|
describe("stats for multiple elements", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
mouse.reset();
|
||||||
|
localStorage.clear();
|
||||||
|
renderStaticScene.mockClear();
|
||||||
|
reseed(7);
|
||||||
|
setDateTimeForTests("201933152653");
|
||||||
|
|
||||||
|
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||||
|
|
||||||
|
h.elements = [];
|
||||||
|
|
||||||
|
fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
|
||||||
|
button: 2,
|
||||||
|
clientX: 1,
|
||||||
|
clientY: 1,
|
||||||
|
});
|
||||||
|
const contextMenu = UI.queryContextMenu();
|
||||||
|
fireEvent.click(queryByTestId(contextMenu!, "stats")!);
|
||||||
|
stats = UI.queryStats();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
mockBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
restoreOriginalGetBoundingClientRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should display MIXED for elements with different values", () => {
|
||||||
|
UI.clickTool("rectangle");
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(200, 100);
|
||||||
|
|
||||||
|
UI.clickTool("ellipse");
|
||||||
|
mouse.down(50, 50);
|
||||||
|
mouse.up(100, 100);
|
||||||
|
|
||||||
|
UI.clickTool("diamond");
|
||||||
|
mouse.down(-100, -100);
|
||||||
|
mouse.up(125, 145);
|
||||||
|
|
||||||
|
h.setState({
|
||||||
|
selectedElementIds: h.elements.reduce((acc, el) => {
|
||||||
|
acc[el.id] = true;
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, true>),
|
||||||
|
});
|
||||||
|
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
|
||||||
|
const width = getStatsProperty("W")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(width?.value).toBe("Mixed");
|
||||||
|
const height = getStatsProperty("H")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(height?.value).toBe("Mixed");
|
||||||
|
const angle = getStatsProperty("A")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(angle.value).toBe("0");
|
||||||
|
|
||||||
|
width.focus();
|
||||||
|
width.value = "250";
|
||||||
|
width.blur();
|
||||||
|
h.elements.forEach((el) => {
|
||||||
|
expect(el.width).toBe(250);
|
||||||
|
});
|
||||||
|
|
||||||
|
height.focus();
|
||||||
|
height.value = "450";
|
||||||
|
height.blur();
|
||||||
|
h.elements.forEach((el) => {
|
||||||
|
expect(el.height).toBe(450);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should display a property when one of the elements is editable for that property", async () => {
|
||||||
|
// text, rectangle, frame
|
||||||
|
UI.clickTool("text");
|
||||||
|
mouse.clickAt(20, 30);
|
||||||
|
const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
|
||||||
|
const editor = await getTextEditor(textEditorSelector, true);
|
||||||
|
await new Promise((r) => setTimeout(r, 0));
|
||||||
|
updateTextEditor(editor, "Hello!");
|
||||||
|
editor.blur();
|
||||||
|
|
||||||
|
UI.clickTool("rectangle");
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(200, 100);
|
||||||
|
|
||||||
|
const frame = API.createElement({
|
||||||
|
id: "id0",
|
||||||
|
type: "frame",
|
||||||
|
x: 150,
|
||||||
|
width: 150,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [...h.elements, frame];
|
||||||
|
|
||||||
|
const text = h.elements.find((el) => el.type === "text");
|
||||||
|
const rectangle = h.elements.find((el) => el.type === "rectangle");
|
||||||
|
|
||||||
|
h.setState({
|
||||||
|
selectedElementIds: h.elements.reduce((acc, el) => {
|
||||||
|
acc[el.id] = true;
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, true>),
|
||||||
|
});
|
||||||
|
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
|
||||||
|
const width = getStatsProperty("W")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(width).not.toBeNull();
|
||||||
|
expect(width.value).toBe("Mixed");
|
||||||
|
|
||||||
|
const height = getStatsProperty("H")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(height).not.toBeNull();
|
||||||
|
expect(height.value).toBe("Mixed");
|
||||||
|
|
||||||
|
const angle = getStatsProperty("A")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(angle).not.toBeNull();
|
||||||
|
expect(angle.value).toBe("0");
|
||||||
|
|
||||||
|
const fontSize = getStatsProperty("F")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(fontSize).not.toBeNull();
|
||||||
|
|
||||||
|
// changing width does not affect text
|
||||||
|
width.focus();
|
||||||
|
width.value = "200";
|
||||||
|
width.blur();
|
||||||
|
|
||||||
|
expect(rectangle?.width).toBe(200);
|
||||||
|
expect(frame.width).toBe(200);
|
||||||
|
expect(text?.width).not.toBe(200);
|
||||||
|
|
||||||
|
angle.focus();
|
||||||
|
angle.value = "40";
|
||||||
|
angle.blur();
|
||||||
|
|
||||||
|
const angleInRadian = degreeToRadian(40);
|
||||||
|
expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
|
||||||
|
expect(text?.angle).toBeCloseTo(angleInRadian, 4);
|
||||||
|
expect(frame.angle).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should treat groups as single units", () => {
|
||||||
|
const createAndSelectGroup = () => {
|
||||||
|
UI.clickTool("rectangle");
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(100, 100);
|
||||||
|
|
||||||
|
UI.clickTool("rectangle");
|
||||||
|
mouse.down(0, 0);
|
||||||
|
mouse.up(100, 100);
|
||||||
|
|
||||||
|
mouse.reset();
|
||||||
|
Keyboard.withModifierKeys({ shift: true }, () => {
|
||||||
|
mouse.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
h.app.actionManager.executeAction(actionGroup);
|
||||||
|
};
|
||||||
|
|
||||||
|
createAndSelectGroup();
|
||||||
|
|
||||||
|
const elementsInGroup = h.elements.filter((el) => isInGroup(el));
|
||||||
|
let [x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
|
||||||
|
|
||||||
|
elementStats = stats?.querySelector("#elementStats");
|
||||||
|
|
||||||
|
const x = getStatsProperty("X")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
|
||||||
|
expect(x).not.toBeNull();
|
||||||
|
expect(Number(x.value)).toBe(x1);
|
||||||
|
|
||||||
|
x.focus();
|
||||||
|
x.value = "300";
|
||||||
|
x.blur();
|
||||||
|
|
||||||
|
expect(h.elements[0].x).toBe(300);
|
||||||
|
expect(h.elements[1].x).toBe(400);
|
||||||
|
expect(x.value).toBe("300");
|
||||||
|
|
||||||
|
const y = getStatsProperty("Y")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
|
||||||
|
expect(y).not.toBeNull();
|
||||||
|
expect(Number(y.value)).toBe(y1);
|
||||||
|
|
||||||
|
y.focus();
|
||||||
|
y.value = "200";
|
||||||
|
y.blur();
|
||||||
|
|
||||||
|
expect(h.elements[0].y).toBe(200);
|
||||||
|
expect(h.elements[1].y).toBe(300);
|
||||||
|
expect(y.value).toBe("200");
|
||||||
|
|
||||||
|
const width = getStatsProperty("W")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(width).not.toBeNull();
|
||||||
|
expect(Number(width.value)).toBe(200);
|
||||||
|
|
||||||
|
const height = getStatsProperty("H")?.querySelector(
|
||||||
|
".drag-input",
|
||||||
|
) as HTMLInputElement;
|
||||||
|
expect(height).not.toBeNull();
|
||||||
|
expect(Number(height.value)).toBe(200);
|
||||||
|
|
||||||
|
width.focus();
|
||||||
|
width.value = "400";
|
||||||
|
width.blur();
|
||||||
|
|
||||||
|
[x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
|
||||||
|
let newGroupWidth = x2 - x1;
|
||||||
|
|
||||||
|
expect(newGroupWidth).toBeCloseTo(400, 4);
|
||||||
|
|
||||||
|
width.focus();
|
||||||
|
width.value = "300";
|
||||||
|
width.blur();
|
||||||
|
|
||||||
|
[x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
|
||||||
|
newGroupWidth = x2 - x1;
|
||||||
|
expect(newGroupWidth).toBeCloseTo(300, 4);
|
||||||
|
|
||||||
|
height.focus();
|
||||||
|
height.value = "500";
|
||||||
|
height.blur();
|
||||||
|
|
||||||
|
[x1, y1, x2, y2] = getCommonBounds(elementsInGroup);
|
||||||
|
const newGroupHeight = y2 - y1;
|
||||||
|
expect(newGroupHeight).toBeCloseTo(500, 4);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,238 @@
|
|||||||
|
import { updateBoundElements } from "../../element/binding";
|
||||||
|
import { mutateElement } from "../../element/mutateElement";
|
||||||
|
import {
|
||||||
|
measureFontSizeFromWidth,
|
||||||
|
rescalePointsInElement,
|
||||||
|
} from "../../element/resizeElements";
|
||||||
|
import {
|
||||||
|
getApproxMinLineHeight,
|
||||||
|
getApproxMinLineWidth,
|
||||||
|
getBoundTextElement,
|
||||||
|
getBoundTextMaxWidth,
|
||||||
|
handleBindTextResize,
|
||||||
|
} from "../../element/textElement";
|
||||||
|
import { isFrameLikeElement, isTextElement } from "../../element/typeChecks";
|
||||||
|
import type {
|
||||||
|
ElementsMap,
|
||||||
|
ExcalidrawElement,
|
||||||
|
NonDeletedExcalidrawElement,
|
||||||
|
} from "../../element/types";
|
||||||
|
import { rotate } from "../../math";
|
||||||
|
import { getFontString } from "../../utils";
|
||||||
|
|
||||||
|
export const SMALLEST_DELTA = 0.01;
|
||||||
|
|
||||||
|
export const isPropertyEditable = (
|
||||||
|
element: ExcalidrawElement,
|
||||||
|
property: keyof ExcalidrawElement,
|
||||||
|
) => {
|
||||||
|
if (property === "height" && isTextElement(element)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (property === "width" && isTextElement(element)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (property === "angle" && isFrameLikeElement(element)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getStepSizedValue = (value: number, stepSize: number) => {
|
||||||
|
const v = value + stepSize / 2;
|
||||||
|
return v - (v % stepSize);
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AtomicUnit = Record<string, true>;
|
||||||
|
export const getElementsInAtomicUnit = (
|
||||||
|
atomicUnit: AtomicUnit,
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap?: ElementsMap,
|
||||||
|
) => {
|
||||||
|
return Object.keys(atomicUnit)
|
||||||
|
.map((id) => ({
|
||||||
|
original: (originalElementsMap ?? elementsMap).get(id),
|
||||||
|
latest: elementsMap.get(id),
|
||||||
|
}))
|
||||||
|
.filter((el) => el.original !== undefined && el.latest !== undefined) as {
|
||||||
|
original: NonDeletedExcalidrawElement;
|
||||||
|
latest: NonDeletedExcalidrawElement;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const newOrigin = (
|
||||||
|
x1: number,
|
||||||
|
y1: number,
|
||||||
|
w1: number,
|
||||||
|
h1: number,
|
||||||
|
w2: number,
|
||||||
|
h2: number,
|
||||||
|
angle: number,
|
||||||
|
) => {
|
||||||
|
/**
|
||||||
|
* The formula below is the result of solving
|
||||||
|
* rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
|
||||||
|
* where rotate is the function defined in math.ts
|
||||||
|
*
|
||||||
|
* This is so that the new origin (x2, y2),
|
||||||
|
* when rotated against the new center (cx2, cy2),
|
||||||
|
* coincides with (x1, y1) rotated against (cx1, cy1)
|
||||||
|
*
|
||||||
|
* The reason for doing this computation is so the element's top left corner
|
||||||
|
* on the canvas remains fixed after any changes in its dimension.
|
||||||
|
*/
|
||||||
|
|
||||||
|
return {
|
||||||
|
x:
|
||||||
|
x1 +
|
||||||
|
(w1 - w2) / 2 +
|
||||||
|
((w2 - w1) / 2) * Math.cos(angle) +
|
||||||
|
((h1 - h2) / 2) * Math.sin(angle),
|
||||||
|
y:
|
||||||
|
y1 +
|
||||||
|
(h1 - h2) / 2 +
|
||||||
|
((w2 - w1) / 2) * Math.sin(angle) +
|
||||||
|
((h2 - h1) / 2) * Math.cos(angle),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const resizeElement = (
|
||||||
|
nextWidth: number,
|
||||||
|
nextHeight: number,
|
||||||
|
keepAspectRatio: boolean,
|
||||||
|
latestElement: ExcalidrawElement,
|
||||||
|
origElement: ExcalidrawElement,
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: Map<string, ExcalidrawElement>,
|
||||||
|
shouldInformMutation = true,
|
||||||
|
) => {
|
||||||
|
let boundTextFont: { fontSize?: number } = {};
|
||||||
|
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
|
||||||
|
|
||||||
|
if (boundTextElement) {
|
||||||
|
const minWidth = getApproxMinLineWidth(
|
||||||
|
getFontString(boundTextElement),
|
||||||
|
boundTextElement.lineHeight,
|
||||||
|
);
|
||||||
|
const minHeight = getApproxMinLineHeight(
|
||||||
|
boundTextElement.fontSize,
|
||||||
|
boundTextElement.lineHeight,
|
||||||
|
);
|
||||||
|
nextWidth = Math.max(nextWidth, minWidth);
|
||||||
|
nextHeight = Math.max(nextHeight, minHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
mutateElement(
|
||||||
|
latestElement,
|
||||||
|
{
|
||||||
|
...newOrigin(
|
||||||
|
latestElement.x,
|
||||||
|
latestElement.y,
|
||||||
|
latestElement.width,
|
||||||
|
latestElement.height,
|
||||||
|
nextWidth,
|
||||||
|
nextHeight,
|
||||||
|
latestElement.angle,
|
||||||
|
),
|
||||||
|
width: nextWidth,
|
||||||
|
height: nextHeight,
|
||||||
|
...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
|
||||||
|
},
|
||||||
|
shouldInformMutation,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (boundTextElement) {
|
||||||
|
boundTextFont = {
|
||||||
|
fontSize: boundTextElement.fontSize,
|
||||||
|
};
|
||||||
|
if (keepAspectRatio) {
|
||||||
|
const updatedElement = {
|
||||||
|
...latestElement,
|
||||||
|
width: nextWidth,
|
||||||
|
height: nextHeight,
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextFont = measureFontSizeFromWidth(
|
||||||
|
boundTextElement,
|
||||||
|
elementsMap,
|
||||||
|
getBoundTextMaxWidth(updatedElement, boundTextElement),
|
||||||
|
);
|
||||||
|
boundTextFont = {
|
||||||
|
fontSize: nextFont?.size ?? boundTextElement.fontSize,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBoundElements(latestElement, elementsMap, {
|
||||||
|
newSize: {
|
||||||
|
width: nextWidth,
|
||||||
|
height: nextHeight,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (boundTextElement && boundTextFont) {
|
||||||
|
mutateElement(boundTextElement, {
|
||||||
|
fontSize: boundTextFont.fontSize,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const moveElement = (
|
||||||
|
newTopLeftX: number,
|
||||||
|
newTopLeftY: number,
|
||||||
|
latestElement: ExcalidrawElement,
|
||||||
|
originalElement: ExcalidrawElement,
|
||||||
|
elementsMap: ElementsMap,
|
||||||
|
originalElementsMap: ElementsMap,
|
||||||
|
shouldInformMutation = true,
|
||||||
|
) => {
|
||||||
|
const [cx, cy] = [
|
||||||
|
originalElement.x + originalElement.width / 2,
|
||||||
|
originalElement.y + originalElement.height / 2,
|
||||||
|
];
|
||||||
|
const [topLeftX, topLeftY] = rotate(
|
||||||
|
originalElement.x,
|
||||||
|
originalElement.y,
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
originalElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
const changeInX = newTopLeftX - topLeftX;
|
||||||
|
const changeInY = newTopLeftY - topLeftY;
|
||||||
|
|
||||||
|
const [x, y] = rotate(
|
||||||
|
newTopLeftX,
|
||||||
|
newTopLeftY,
|
||||||
|
cx + changeInX,
|
||||||
|
cy + changeInY,
|
||||||
|
-originalElement.angle,
|
||||||
|
);
|
||||||
|
|
||||||
|
mutateElement(
|
||||||
|
latestElement,
|
||||||
|
{
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
},
|
||||||
|
shouldInformMutation,
|
||||||
|
);
|
||||||
|
|
||||||
|
const boundTextElement = getBoundTextElement(
|
||||||
|
originalElement,
|
||||||
|
originalElementsMap,
|
||||||
|
);
|
||||||
|
if (boundTextElement) {
|
||||||
|
const latestBoundTextElement = elementsMap.get(boundTextElement.id);
|
||||||
|
latestBoundTextElement &&
|
||||||
|
mutateElement(
|
||||||
|
latestBoundTextElement,
|
||||||
|
{
|
||||||
|
x: boundTextElement.x + changeInX,
|
||||||
|
y: boundTextElement.y + changeInY,
|
||||||
|
},
|
||||||
|
shouldInformMutation,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue