smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Wysiwyg text (#200)

Browse source
This commit is contained in:
Timur Khazamov 2020-01-07 08:03:05 +05:00 • committed by Christopher Chedeau
parent b2eb2807cc
commit abbc04df0e
3 changed files with 87 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/index.tsx
View file

@ -4,7 +4,13 @@ import rough from "roughjs/bin/wrappers/rough";
import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
import { randomSeed } from "./random";
import { newElement, resizeTest, generateDraw, isTextElement } from "./element";
import {
newElement,
resizeTest,
generateDraw,
isTextElement,
textWysiwyg
} from "./element";
import {
renderScene,
clearSelection,
@ -46,12 +52,13 @@ const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
const CANVAS_WINDOW_OFFSET_LEFT = 250;
const CANVAS_WINDOW_OFFSET_TOP = 0;
const KEYS = {
export const KEYS = {
ARROW_LEFT: "ArrowLeft",
ARROW_RIGHT: "ArrowRight",
ARROW_DOWN: "ArrowDown",
ARROW_UP: "ArrowUp",
ESCAPE: "Escape",
ENTER: "Enter",
DELETE: "Delete",
BACKSPACE: "Backspace"
};
@ -75,9 +82,8 @@ function resetCursor() {
document.documentElement.style.cursor = "";
}
function addTextElement(element: ExcalidrawTextElement) {
function addTextElement(element: ExcalidrawTextElement, text = "") {
resetCursor();
const text = prompt("What text do you want?");
if (text === null || text === "") {
return false;
}
@ -728,22 +734,23 @@ class App extends React.Component<{}, AppState> {
}
if (isTextElement(element)) {
if (!addTextElement(element)) {
return;
}
textWysiwyg(e.clientX, e.clientY, text => {
addTextElement(element, text);
generateDraw(element);
elements.push(element);
element.isSelected = true;
this.setState({
draggingElement: null,
elementType: "selection"
});
});
return;
}
generateDraw(element);
elements.push(element);
if (this.state.elementType === "text") {
this.setState({
draggingElement: null,
elementType: "selection"
});
element.isSelected = true;
} else {
this.setState({ draggingElement: element });
}
this.setState({ draggingElement: element });
let lastX = x;
let lastY = y;
@ -964,20 +971,17 @@ class App extends React.Component<{}, AppState> {
100
);
if (!addTextElement(element as ExcalidrawTextElement)) {
return;
}
textWysiwyg(e.clientX, e.clientY, text => {
addTextElement(element as ExcalidrawTextElement, text);
generateDraw(element);
elements.push(element);
element.isSelected = true;
generateDraw(element);
elements.push(element);
this.setState({
draggingElement: null,
elementType: "selection"
this.setState({
draggingElement: null,
elementType: "selection"
});
});
element.isSelected = true;
this.forceUpdate();
}}
/>
</div>