14a66956d7
* implement line editing * line editing with rotation * ensure adding new points is disabled on point dragging * fix hotkey replacement * don't paint bounding box when creating new multipoint * tweak points style, account for zoom and z-index * don't persist editingLinearElement to localStorage * don't mutate on noop points updates * account for rotation when adding new point * ensure clicking on points doesn't deselect element * tweak history handling around editingline element * update snapshots * refactor pointerMove handling * factor out point dragging * factor out pointerDown * improve positioning with rotation * revert to use roughjs for calculating points bounds * migrate from storing editingLinearElement.element to id * make GlobalScene.getElement into O(1) * use Alt for adding new points * fix adding and deleting a point with rotation * disable resize handlers & bounding box on line edit Co-authored-by: daishi <daishi@axlight.com>
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { t } from "../i18n";
|
|
import { NonDeletedExcalidrawElement } from "../element/types";
|
|
import { getSelectedElements } from "../scene";
|
|
|
|
import "./HintViewer.scss";
|
|
import { AppState } from "../types";
|
|
import { isLinearElement } from "../element/typeChecks";
|
|
import { getShortcutKey } from "../utils";
|
|
|
|
interface Hint {
|
|
appState: AppState;
|
|
elements: readonly NonDeletedExcalidrawElement[];
|
|
}
|
|
|
|
const getHints = ({ appState, elements }: Hint) => {
|
|
const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
|
|
const multiMode = appState.multiElement !== null;
|
|
if (elementType === "arrow" || elementType === "line") {
|
|
if (!multiMode) {
|
|
return t("hints.linearElement");
|
|
}
|
|
return t("hints.linearElementMulti");
|
|
}
|
|
|
|
if (elementType === "draw") {
|
|
return t("hints.freeDraw");
|
|
}
|
|
|
|
const selectedElements = getSelectedElements(elements, appState);
|
|
if (
|
|
isResizing &&
|
|
lastPointerDownWith === "mouse" &&
|
|
selectedElements.length === 1
|
|
) {
|
|
const targetElement = selectedElements[0];
|
|
if (isLinearElement(targetElement) && targetElement.points.length > 2) {
|
|
return null;
|
|
}
|
|
return t("hints.resize");
|
|
}
|
|
|
|
if (isRotating && lastPointerDownWith === "mouse") {
|
|
return t("hints.rotate");
|
|
}
|
|
|
|
if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
|
|
if (appState.editingLinearElement) {
|
|
return appState.editingLinearElement.activePointIndex
|
|
? t("hints.lineEditor_pointSelected")
|
|
: t("hints.lineEditor_nothingSelected");
|
|
}
|
|
return t("hints.lineEditor_info");
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export const HintViewer = ({ appState, elements }: Hint) => {
|
|
let hint = getHints({
|
|
appState,
|
|
elements,
|
|
});
|
|
if (!hint) {
|
|
return null;
|
|
}
|
|
|
|
hint = getShortcutKey(hint);
|
|
|
|
return (
|
|
<div className="HintViewer">
|
|
<span>{hint}</span>
|
|
</div>
|
|
);
|
|
};
|