Skip to content

Commit

Permalink
Added setToRender and fixed something I think
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pedro270707
Pedro270707 committed Nov 30, 2023
1 parent 94c1968 commit 6c7f343
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 72 deletions.
144 changes: 73 additions & 71 deletions js/minecraft-tip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ class TextRenderer {

while (cursor < line.length) {
textRenderingContext.char = line[cursor];
const originalLeft = textRenderingContext.left;
switch (textRenderingContext.char) {
case '§':
cursor++;
Expand All @@ -205,22 +206,28 @@ class TextRenderer {
ctx.save();
if (shouldConsiderWeight) {
textRenderingContext.formatting.applyFormatting(textRenderingContext, this);
for (const renderFunction of textRenderingContext.setToRender) {
renderFunction(textRenderingContext, this, false);
}
}
lineWidth += parseFloat(textRenderingContext.canvas.dataset.wordSpacing) * settings.pixelScale;
lineWidth += parseFloat(textRenderingContext.canvas.dataset.wordSpacing) * settings.pixelScale + ((textRenderingContext.left - originalLeft));
ctx.restore();
textRenderingContext.charIndex++;
break;
default:
ctx.save();
const originalLeft = textRenderingContext.left;
if (shouldConsiderWeight) {
textRenderingContext.formatting.applyFormatting(textRenderingContext, this);
for (const renderFunction of textRenderingContext.setToRender) {
renderFunction(textRenderingContext, this, false);
}
} else {
setDefaultCanvasSettings(this.canvas);
}
const textMetrics = ctx.measureText(textRenderingContext.char);
lineWidth += textMetrics.width + (textRenderingContext.left - originalLeft);
ctx.restore();
textRenderingContext.setToRender = [];
textRenderingContext.charIndex++;
break;
}
Expand Down Expand Up @@ -273,46 +280,43 @@ class TextRenderer {
}
break;
default:
textRenderingContext.left += this.drawChar(textRenderingContext);
ctx.save();
textRenderingContext.formatting.applyFormatting(textRenderingContext, this);
if (textRenderingContext.shadow) {
const originalColor = textRenderingContext.formatting.getFormattingOption(TextFormatting.FormattingOptions.COLOR)();
const red = Math.round((originalColor >> 16) * (41/168));
const green = Math.round(((originalColor >> 8) & 0xFF) * (41/168));
const blue = Math.round((originalColor & 0xFF) * (41/168));

const textRenderingContextCopy = textRenderingContext.copy();
textRenderingContextCopy.x += settings.pixelScale;
textRenderingContextCopy.y += settings.pixelScale;
this.drawChar(textRenderingContextCopy, red << 16 | green << 8 | blue);
}
this.drawChar(textRenderingContext);
ctx.restore();
textRenderingContext.left += this.getWidth(textRenderingContext.char, false, textRenderingContext.formatting.copy()) * settings.pixelScale;
textRenderingContext.setToRender = [];
textRenderingContext.charIndex++;
break;
}
cursor++;
}
}

drawChar(textRenderingContext) {
drawChar(textRenderingContext, color = textRenderingContext.formatting.getFormattingOption(TextFormatting.FormattingOptions.COLOR)()) {
const ctx = textRenderingContext.canvas.getContext('2d');
ctx.save();

const originalLeft = textRenderingContext.left;

if (textRenderingContext.shadow) {
const originalColor = textRenderingContext.formatting.getFormattingOption(TextFormatting.FormattingOptions.COLOR)();
const red = Math.round((originalColor >> 16) * (41/168));
const green = Math.round(((originalColor >> 8) & 0xFF) * (41/168));
const blue = Math.round((originalColor & 0xFF) * (41/168));

const textRenderingContextCopy = textRenderingContext.copy();
textRenderingContextCopy.x += settings.pixelScale;
textRenderingContextCopy.y += settings.pixelScale;
textRenderingContextCopy.shadow = false;
textRenderingContextCopy.formatting.setFormattingOption(TextFormatting.FormattingOptions.COLOR, () => red << 16 | green << 8 | blue);
this.drawChar(textRenderingContextCopy);
ctx.save();
ctx.fillStyle = "#" + ('000000' + color.toString(16).toUpperCase()).slice(-6);
for (const renderFunction of textRenderingContext.setToRender) {
renderFunction(textRenderingContext, this, true);
}

textRenderingContext.formatting.applyFormatting(textRenderingContext, this);

// CanvasRenderingContext2D.wordSpacing doesn't seem to work on Chromium-based browsers, so we have a special condition for spaces
if (textRenderingContext.char === ' ') {
ctx.restore();
return parseFloat(textRenderingContext.canvas.dataset.wordSpacing) * settings.pixelScale;
} else {
if (textRenderingContext.char !== ' ') {
ctx.fillText(textRenderingContext.char, textRenderingContext.x + textRenderingContext.left, textRenderingContext.y + (textRenderingContext.line * this.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0));
const width = textRenderingContext.left - originalLeft + (this.getWidth(textRenderingContext.char + ".") - this.getWidth(".")) * settings.pixelScale;
ctx.restore();
return width;
}
ctx.restore();
}

getRandomTextFrom(originalText) {
Expand Down Expand Up @@ -341,6 +345,7 @@ class TextRenderingContext {
this.left = left;
this.line = line;
this.shadow = shadow;
this.setToRender = [];
}

copy() {
Expand Down Expand Up @@ -399,83 +404,80 @@ class TextFormatting {
o: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.setFormattingOption(TextFormatting.FormattingOptions.ITALIC, true), type: TextFormatting.FormattingOptions.ITALIC},
p: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.setFormattingOption(TextFormatting.FormattingOptions.VERTICAL_BOBBING, true), type: TextFormatting.FormattingOptions.VERTICAL_BOBBING},
q: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.setFormattingOption(TextFormatting.FormattingOptions.HORIZONTAL_BOBBING, true), type: TextFormatting.FormattingOptions.HORIZONTAL_BOBBING},
r: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.reset(textRenderingContext), type: TextFormatting.FormattingOptions.RESET},
r: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.setFormattingOption(TextFormatting.FormattingOptions.RESET, true), type: TextFormatting.FormattingOptions.RESET},
s: {formatFunction: (textRenderingContext) => textRenderingContext.formatting.setFormattingOption(TextFormatting.FormattingOptions.RANDOM_BOBBING, true), type: TextFormatting.FormattingOptions.RANDOM_BOBBING}
}

constructor() {
this.formattingOptions = {}

this.addColorOption(TextFormatting.FormattingOptions.COLOR, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
ctx.fillStyle = "#" + ('000000' + value().toString(16).toUpperCase()).slice(-6);
}, () => 0xFFFFFF);
this.addFormattingOption(TextFormatting.FormattingOptions.OBFUSCATED, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.RESET, (textRenderingContext, textRenderer, value) => {
if (value) {
textRenderingContext.char = textRenderer.getRandomTextFrom(textRenderingContext.char);
this.reset(textRenderingContext);
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.BOLD, (textRenderingContext, textRenderer, value) => {
this.addColorOption(TextFormatting.FormattingOptions.COLOR, () => {}, () => 0xFFFFFF);
this.addFormattingOption(TextFormatting.FormattingOptions.OBFUSCATED, (textRenderingContext, textRenderer, value) => {
if (value) {
textRenderingContext.canvas.dataset.wordSpacing = (settings.style.wordSpacing + settings.pixelScale) + "px";
const textRenderingContextCopy = textRenderingContext.copy();
textRenderingContextCopy.formatting.setFormattingOption(TextFormatting.FormattingOptions.BOLD, false);
textRenderingContextCopy.formatting.setFormattingOption(TextFormatting.FormattingOptions.OBFUSCATED, false);
textRenderer.drawChar(textRenderingContextCopy);
textRenderingContext.left += 2;
textRenderingContext.char = textRenderer.getRandomTextFrom(textRenderingContext.char);
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.UNDERLINE, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.VERTICAL_BOBBING, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (value) {
let originalFillStyle = ctx.fillStyle;
ctx.fillStyle = "#" + ('000000' + this.getFormattingOption(TextFormatting.FormattingOptions.COLOR)().toString(16).toUpperCase()).slice(-6);
ctx.fillRect((textRenderingContext.x + textRenderingContext.left) - settings.pixelScale, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) + settings.pixelScale, textRenderer.getWidth(textRenderingContext.char) * settings.pixelScale + settings.pixelScale, settings.pixelScale);
ctx.fillStyle = originalFillStyle;
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, 0, Math.sin(time + textRenderingContext.charIndex) * settings.pixelScale);
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.STRIKETHROUGH, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.HORIZONTAL_BOBBING, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (value) {
let originalFillStyle = ctx.fillStyle;
ctx.fillStyle = "#" + ('000000' + this.getFormattingOption(TextFormatting.FormattingOptions.COLOR)().toString(16).toUpperCase()).slice(-6);
ctx.fillRect((textRenderingContext.x + textRenderingContext.left) - settings.pixelScale, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) - 3.5 * settings.pixelScale, textRenderer.getWidth(textRenderingContext.char) * settings.pixelScale + settings.pixelScale, settings.pixelScale);
ctx.fillStyle = originalFillStyle;
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, Math.cos(time + textRenderingContext.charIndex) * settings.pixelScale / 2, 0);
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.ITALIC, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.RANDOM_BOBBING, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (value) {
const verticalPosition = (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) - 3.5 * settings.pixelScale;
ctx.transform(1, 0, 0, 1, 0, verticalPosition);
ctx.transform(1, 0, -0.2, 1, 0, 0);
ctx.transform(1, 0, 0, 1, 0, -verticalPosition);
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, ((Math.random() * 2) - 1) * settings.pixelScale / 2, ((Math.random() * 2) - 1) * settings.pixelScale / 2);
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.VERTICAL_BOBBING, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
this.addFormattingOption(TextFormatting.FormattingOptions.BOLD, (textRenderingContext, textRenderer, value) => {
if (value) {
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, 0, Math.sin(time + textRenderingContext.charIndex) * settings.pixelScale);
textRenderingContext.left += settings.pixelScale;
textRenderingContext.setToRender.push((textRenderingContext, textRenderer, shouldDraw) => {
const textRenderingContextCopy = textRenderingContext.copy();
textRenderingContextCopy.left -= settings.pixelScale;
textRenderingContextCopy.formatting.setFormattingOption(TextFormatting.FormattingOptions.BOLD, false);
textRenderingContextCopy.formatting.setFormattingOption(TextFormatting.FormattingOptions.OBFUSCATED, false);
if (shouldDraw) textRenderer.drawChar(textRenderingContextCopy);
});
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.HORIZONTAL_BOBBING, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
this.addFormattingOption(TextFormatting.FormattingOptions.UNDERLINE, (textRenderingContext, textRenderer, value) => {
if (value) {
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, Math.cos(time + textRenderingContext.charIndex) * settings.pixelScale / 2, 0);
textRenderingContext.setToRender.push((textRenderingContext, textRenderer, shouldDraw) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (shouldDraw) ctx.fillRect((textRenderingContext.x + textRenderingContext.left) - settings.pixelScale, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) + settings.pixelScale, textRenderer.getWidth(textRenderingContext.char) * settings.pixelScale + settings.pixelScale, settings.pixelScale);
})
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.RANDOM_BOBBING, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.STRIKETHROUGH, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (value) {
const time = performance.now() * 0.01;
ctx.transform(1, 0, 0, 1, ((Math.random() * 2) - 1) * settings.pixelScale / 2, ((Math.random() * 2) - 1) * settings.pixelScale / 2);
textRenderingContext.setToRender.push((textRenderingContext, textRenderer, shouldDraw) => {
if (shouldDraw) ctx.fillRect((textRenderingContext.x + textRenderingContext.left) - settings.pixelScale, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) - 3.5 * settings.pixelScale, textRenderer.getWidth(textRenderingContext.char) * settings.pixelScale + settings.pixelScale, settings.pixelScale);
});
}
}, false);
this.addFormattingOption(TextFormatting.FormattingOptions.RESET, (textRenderingContext, textRenderer, value) => {
this.addFormattingOption(TextFormatting.FormattingOptions.ITALIC, (textRenderingContext, textRenderer, value) => {
const ctx = textRenderingContext.canvas.getContext('2d');
if (value) {
this.reset(textRenderingContext);
const verticalPosition = (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight() * settings.pixelScale) + (textRenderingContext.line > 0 && settings.style.firstLineIsHigher ? 2 * settings.pixelScale : 0)) - 3.5 * settings.pixelScale;
ctx.transform(1, 0, 0, 1, 0, verticalPosition);
ctx.transform(1, 0, -0.2, 1, 0, 0);
ctx.transform(1, 0, 0, 1, 0, -verticalPosition);
}
}, false);
}
Expand Down
2 changes: 1 addition & 1 deletion minecrafttooltips.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,5 +172,5 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
<script src="{{ site.baseurl }}/js/canvas2apng.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apng2webp"></script>
<script src="{{ site.baseurl }}/js/minecraft-tip.js"></script>
<script defer src="{{ site.baseurl }}/js/minecraft-tip-impl.js"></script>
<script src="{{ site.baseurl }}/js/minecraft-tip-impl.js"></script>
<script src="/modules/dom-to-image.js"></script>

0 comments on commit 6c7f343

Please sign in to comment.