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

Add text improvements

Browse source
This commit is contained in:
Paulo Menezes 2020-01-05 22:18:54 -03:00
parent ebdbcd52f9
commit 8c2a7bdbcb
1 changed files with 39 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/index.tsx
View file

@ -1191,35 +1191,35 @@ function getSelectedBackgroundColor() {
return backgroundColors.length === 1 ? backgroundColors[0] : null; return backgroundColors.length === 1 ? backgroundColors[0] : null;
} }
function addTextElement(element: ExcalidrawElement) { function addTextElement(element: ExcalidrawTextElement) {
if (isTextElement(element)) { resetCursor();
resetCursor(); const text = prompt("What text do you want?");
const text = prompt("What text do you want?"); if (text === null || text === "") {
if (text === null) { return false;
return;
}
const fontSize = 20;
element.text = text;
element.font = `${fontSize}px Virgil`;
const font = context.font;
context.font = element.font;
const textMeasure = context.measureText(element.text);
const width = textMeasure.width;
const actualBoundingBoxAscent =
textMeasure.actualBoundingBoxAscent || fontSize;
const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0;
element.actualBoundingBoxAscent = actualBoundingBoxAscent;
context.font = font;
const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
// Center the text
element.x -= width / 2;
element.y -= actualBoundingBoxAscent;
element.width = width;
element.height = height;
} }
const fontSize = 20;
element.text = text;
element.font = `${fontSize}px Virgil`;
const font = context.font;
context.font = element.font;
const textMeasure = context.measureText(element.text);
const width = textMeasure.width;
const actualBoundingBoxAscent =
textMeasure.actualBoundingBoxAscent || fontSize;
const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0;
element.actualBoundingBoxAscent = actualBoundingBoxAscent;
context.font = font;
const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
// Center the text
element.x -= width / 2;
element.y -= actualBoundingBoxAscent;
element.width = width;
element.height = height;
return true;
} }
function checkHitElement(x: number, y: number) { function getElementAtPosition(x: number, y: number) {
let hitElement = null; let hitElement = null;
// We need to to hit testing from front (end of the array) to back (beginning of the array) // We need to to hit testing from front (end of the array) to back (beginning of the array)
for (let i = elements.length - 1; i >= 0; --i) { for (let i = elements.length - 1; i >= 0; --i) {
@ -1938,7 +1938,7 @@ class App extends React.Component<{}, AppState> {
document.documentElement.style.cursor = `${resizeHandle}-resize`; document.documentElement.style.cursor = `${resizeHandle}-resize`;
isResizingElements = true; isResizingElements = true;
} else { } else {
const hitElement = checkHitElement(x, y); const hitElement = getElementAtPosition(x, y);
// If we click on something // If we click on something
if (hitElement) { if (hitElement) {
@ -1966,7 +1966,11 @@ class App extends React.Component<{}, AppState> {
} }
} }
addTextElement(element); if (isTextElement(element)) {
if (!addTextElement(element)) {
return;
}
}
generateDraw(element); generateDraw(element);
elements.push(element); elements.push(element);
@ -2169,9 +2173,7 @@ class App extends React.Component<{}, AppState> {
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX; e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY; const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const hitElement = checkHitElement(x, y); if (getElementAtPosition(x, y)) {
if (hitElement) {
return; return;
} }
@ -2187,7 +2189,12 @@ class App extends React.Component<{}, AppState> {
100 100
); );
addTextElement(element); if (isTextElement(element)) {
if (!addTextElement(element)) {
return;
}
}
generateDraw(element); generateDraw(element);
elements.push(element); elements.push(element);