Allow multiline text (#535)
* Allow multiline text * Figure out offset correctly * Run prettier
This commit is contained in:
parent
54f9c296b5
commit
d65e90209c
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user