diff --git a/src/appState.ts b/src/appState.ts index 52576b32..e0b750c7 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -26,6 +26,7 @@ export function getDefaultAppState(): AppState { cursorY: 0, scrolledOutside: false, name: DEFAULT_PROJECT_NAME, + isResizing: false, }; } diff --git a/src/components/HintViewer.css b/src/components/HintViewer.css new file mode 100644 index 00000000..89eb9ab0 --- /dev/null +++ b/src/components/HintViewer.css @@ -0,0 +1,6 @@ +.HintViewer { + position: absolute; + left: 0.5em; + bottom: 0.5em; + font-size: 0.8rem; +} diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx new file mode 100644 index 00000000..ad25562d --- /dev/null +++ b/src/components/HintViewer.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { t } from "../i18n"; +import { ExcalidrawElement } from "../element/types"; + +import "./HintViewer.css"; + +interface Hint { + elementType: string; + multiMode: boolean; + isResizing: boolean; + elements: readonly ExcalidrawElement[]; +} + +const getHints = ({ elementType, multiMode, isResizing, elements }: Hint) => { + if (elementType === "arrow" || elementType === "line") { + if (!multiMode) { + return t("hints.linearElement"); + } + return t("hints.linearElementMulti"); + } + + if (isResizing) { + const selectedElements = elements.filter(el => el.isSelected); + if ( + selectedElements.length === 1 && + (selectedElements[0].type === "arrow" || + selectedElements[0].type === "line") && + selectedElements[0].points.length > 2 + ) { + return null; + } + return t("hints.resize"); + } + + return null; +}; + +export const HintViewer = ({ + elementType, + multiMode, + isResizing, + elements, +}: Hint) => { + const hint = getHints({ + elementType, + multiMode, + isResizing, + elements, + }); + if (!hint) { + return null; + } + + return