Allow multiline text (#535)

* Allow multiline text

* Figure out offset correctly

* Run prettier
This commit is contained in:
Jilles Soeters 2020-01-24 10:35:51 -08:00 committed by Lipis
parent 54f9c296b5
commit d65e90209c
2 changed files with 9 additions and 7 deletions

View File

@ -39,7 +39,7 @@ export function textWysiwyg({
top: y + "px", top: y + "px",
left: x + "px", left: x + "px",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
textAlign: "center", textAlign: "left",
display: "inline-block", display: "inline-block",
font: font, font: font,
padding: "4px", padding: "4px",
@ -59,7 +59,7 @@ export function textWysiwyg({
cleanup(); cleanup();
return; return;
} }
if (ev.key === KEYS.ENTER) { if (ev.key === KEYS.ENTER && !ev.shiftKey) {
ev.preventDefault(); ev.preventDefault();
if (ev.isComposing || ev.keyCode === 229) { if (ev.isComposing || ev.keyCode === 229) {
return; return;

View File

@ -144,11 +144,13 @@ export function renderElement(
context.font = element.font; context.font = element.font;
const fillStyle = context.fillStyle; const fillStyle = context.fillStyle;
context.fillStyle = element.strokeColor; context.fillStyle = element.strokeColor;
context.fillText( // Canvas does not support multiline text by default
element.text, const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
0, const lineHeight = element.height / lines.length;
element.baseline || element.actualBoundingBoxAscent || 0, const offset = element.height - element.baseline;
); for (let i = 0; i < lines.length; i++) {
context.fillText(lines[i], 0, (i + 1) * lineHeight - offset);
}
context.fillStyle = fillStyle; context.fillStyle = fillStyle;
context.font = font; context.font = font;
context.globalAlpha = 1; context.globalAlpha = 1;