diff --git a/src/element/index.ts b/src/element/index.ts index 1f6722f9f..2a96d8cf9 100644 --- a/src/element/index.ts +++ b/src/element/index.ts @@ -13,4 +13,3 @@ export { hitTest } from "./collision"; export { resizeTest } from "./resizeTest"; export { generateDraw } from "./generateDraw"; export { isTextElement } from "./typeChecks"; -export { textWysiwyg } from "./textWysiwyg"; diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx deleted file mode 100644 index e31a59415..000000000 --- a/src/element/textWysiwyg.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { KEYS } from "../index"; - -export function textWysiwyg( - x: number, - y: number, - onSubmit: (text: string) => void -) { - const input = document.createElement("input"); - - Object.assign(input.style, { - position: "absolute", - top: y - 8 + "px", - left: x + "px", - transform: "translate(-50%, -50%)", - boxShadow: "none", - textAlign: "center", - width: (window.innerWidth - x) * 2 + "px", - fontSize: "20px", - fontFamily: "Virgil", - border: "none", - background: "transparent" - }); - - input.onkeydown = ev => { - if (ev.key === KEYS.ESCAPE) { - cleanup(); - return; - } - if (ev.key === KEYS.ENTER) { - handleSubmit(); - } - }; - input.onblur = handleSubmit; - - function stopEvent(ev: Event) { - ev.stopPropagation(); - } - - function handleSubmit() { - if (input.value) { - onSubmit(input.value); - } - cleanup(); - } - - function cleanup() { - window.removeEventListener("wheel", stopEvent, true); - document.body.removeChild(input); - } - - window.addEventListener("wheel", stopEvent, true); - document.body.appendChild(input); - input.focus(); -} diff --git a/src/index.tsx b/src/index.tsx index 6abafda03..70ebcdc54 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,13 +4,7 @@ import rough from "roughjs/bin/wrappers/rough"; import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex"; import { randomSeed } from "./random"; -import { - newElement, - resizeTest, - generateDraw, - isTextElement, - textWysiwyg -} from "./element"; +import { newElement, resizeTest, generateDraw, isTextElement } from "./element"; import { renderScene, clearSelection, @@ -54,13 +48,12 @@ const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`; const CANVAS_WINDOW_OFFSET_LEFT = 250; const CANVAS_WINDOW_OFFSET_TOP = 0; -export const KEYS = { +const KEYS = { ARROW_LEFT: "ArrowLeft", ARROW_RIGHT: "ArrowRight", ARROW_DOWN: "ArrowDown", ARROW_UP: "ArrowUp", ESCAPE: "Escape", - ENTER: "Enter", DELETE: "Delete", BACKSPACE: "Backspace" }; @@ -84,8 +77,9 @@ function resetCursor() { document.documentElement.style.cursor = ""; } -function addTextElement(element: ExcalidrawTextElement, text = "") { +function addTextElement(element: ExcalidrawTextElement) { resetCursor(); + const text = prompt("What text do you want?"); if (text === null || text === "") { return false; } @@ -737,23 +731,22 @@ class App extends React.Component<{}, AppState> { } if (isTextElement(element)) { - textWysiwyg(e.clientX, e.clientY, text => { - addTextElement(element, text); - generateDraw(element); - elements.push(element); - element.isSelected = true; - - this.setState({ - draggingElement: null, - elementType: "selection" - }); - }); - return; + if (!addTextElement(element)) { + return; + } } generateDraw(element); elements.push(element); - this.setState({ draggingElement: element }); + if (this.state.elementType === "text") { + this.setState({ + draggingElement: null, + elementType: "selection" + }); + element.isSelected = true; + } else { + this.setState({ draggingElement: element }); + } let lastX = x; let lastY = y; @@ -974,17 +967,20 @@ class App extends React.Component<{}, AppState> { 100 ); - textWysiwyg(e.clientX, e.clientY, text => { - addTextElement(element as ExcalidrawTextElement, text); - generateDraw(element); - elements.push(element); - element.isSelected = true; + if (!addTextElement(element as ExcalidrawTextElement)) { + return; + } - this.setState({ - draggingElement: null, - elementType: "selection" - }); + generateDraw(element); + elements.push(element); + + this.setState({ + draggingElement: null, + elementType: "selection" }); + element.isSelected = true; + + this.forceUpdate(); }} />