Skip to content

Commit

Permalink
patch various bugs (0.2.2)
Browse files Browse the repository at this point in the history
  • Loading branch information
@luxluth
luxluth committed Jul 11, 2023
1 parent d6bc47c commit a51ae35
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 18 deletions.
6 changes: 6 additions & 0 deletions .changeset/violet-rockets-explain.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'ass-html5': patch
---

- Inline Changes in normal text display fix (with this bug, an inline transformation on a text while result in an overlapping on other drawn text)
- Mutilines Texts Tweaks fix (End of Line Shifts)
4 changes: 4 additions & 0 deletions src/animate.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import type { ASSAnimation } from "./types";
export class Animate {
constructor() {}
}
73 changes: 57 additions & 16 deletions src/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ export class Renderer {
playerResX: number
playerResY: number
styles: SingleStyle[]

previousTextWidth = 0;
previousTextPos = { x: 0, y: 0 }
startBaseline = 0;
constructor(
parsedASS: ParsedASS,
canvas: HTMLCanvasElement,
Expand Down Expand Up @@ -63,10 +67,8 @@ export class Renderer {
}

showText(Text: ParsedASSEventText, style: SingleStyle, shift: Shift) {
console.debug(Text)
const textsInline = Text.parsed.map(textEvent => textEvent.text);
let previousTextWidth = 0;
let startBaseline = 0;
// console.debug(textsInline.join(''))
let pos = [0, 0] as [number, number];
// console.debug(textsInline)
let communTags: Tag = {}
Expand Down Expand Up @@ -118,7 +120,7 @@ export class Renderer {
// |_____| this is the width of "Hello "
// |__________ this is the new x position
if (typeof communTags.pos !== "undefined") {
pos = [previousTextWidth, 0]
pos = [this.previousTextWidth, 0]
// console.debug("pos", pos.toString())
tweaks = this.teawksDrawSettings(tags, fontDescriptor, true, communTags, pos)

Expand Down Expand Up @@ -158,19 +160,31 @@ export class Renderer {
textAlign = this.getAlignment(tweaks.alignment) as CanvasTextAlign;
textBaseline = this.getBaseLine(tweaks.alignment as number) as CanvasTextBaseline;
}

if (tweaks.animations.length > 0) {
// console.debug("tweaks.animations", tweaks.animations)
}

if (typeof tweaks.position !== "undefined") {
this.drawTextAtPosition(text, tweaks.position, textAlign, textBaseline, startBaseline);
this.drawTextAtPosition(text, tweaks.position, textAlign, textBaseline);
alreadyDrawn = true;
}
}

if (!alreadyDrawn) {
this.drawText(text, textAlign, textBaseline, marginL, marginV, marginR);
this.drawText(text, textAlign, textBaseline, marginL, marginV, marginR, textsInline, index);
}

previousTextWidth += this.ctx.measureText(text).width;
this.previousTextWidth += this.ctx.measureText(text).width;
// if text ends with a \N, we need to reset the baseline
if (text.endsWith("\\N") || index === textsInline.length - 1) {
this.startBaseline = 0;
this.previousTextWidth = 0;
this.previousTextPos.x = 0;
this.previousTextPos.y = 0;
}
if (textsInline.length > 1 && index === 0) {
startBaseline = this.ctx.measureText(text).actualBoundingBoxAscent;
this.startBaseline = this.ctx.measureText(text).actualBoundingBoxAscent;
// console.debug("startBaseline", startBaseline)
}
})
Expand Down Expand Up @@ -226,14 +240,18 @@ export class Renderer {
const orgAnimation = typeof tagsCombined.org !== "undefined" ? tagsCombined.org : undefined;

const fadeAnimation = typeof simpleFadeAnimation !== "undefined" ? {
name: "fad",
values: simpleFadeAnimation
} as ASSAnimation.Fade : typeof complexFadeAnimation !== "undefined" ? {
name: "fad",
values: complexFadeAnimation
} as ASSAnimation.Fade : undefined;
const moveAnimation = typeof MoveAnimation !== "undefined" ? {
name: "move",
values: MoveAnimation
} as ASSAnimation.Move : undefined;
const orgAnimationParsed = typeof orgAnimation !== "undefined" ? {
name: "org",
values: orgAnimation
} as ASSAnimation.Org : undefined;

Expand Down Expand Up @@ -296,6 +314,8 @@ export class Renderer {
marginL: number,
marginV: number,
marginR: number,
parsedBatch: string[],
parsedBatchIdx: number,
) {
let lines = text.split("\\N");
let lineHeights = lines.map(line => this.ctx.measureText(line).actualBoundingBoxAscent + this.ctx.measureText(line).actualBoundingBoxDescent);
Expand All @@ -317,9 +337,12 @@ export class Renderer {
default:
y = marginV + lineHeight;
break;
}

if (this.previousTextPos.y > 0) {
y = this.previousTextPos.y
}

lines.forEach(line => {
lines.forEach((line, index) => {
let lineWidth = this.ctx.measureText(line).width;
let x = 0;
switch (textAlign) {
Expand All @@ -336,8 +359,27 @@ export class Renderer {
x = marginL;
break;
}
if (this.previousTextPos.x > 0) {
x = this.previousTextPos.x
}
// need to reserve space for the following words or not
if (parsedBatchIdx < parsedBatch.length - 1 && index === lines.length - 1) {
let nextWordsWidth = 0;
for (let i = parsedBatchIdx + 1; i < parsedBatch.length; i++) {
if (parsedBatch[i] === "\\N") {
break;
}
nextWordsWidth += this.ctx.measureText(parsedBatch[i] as string).width;
}
// console.debug("next word", parsedBatch[parsedBatchIdx + 1], nextWordsWidth)
x -= nextWordsWidth / 2;
let currentWordsWidth = this.ctx.measureText(line).width;
// console.debug("current word", `"${line}"`)
this.previousTextWidth += currentWordsWidth;
this.previousTextPos.x = x + currentWordsWidth;
this.previousTextPos.y = y;
}
if (this.ctx.lineWidth > 0) {
// console.debug("strokeText", lineWidth);
this.ctx.strokeText(line, x, y);
}
this.ctx.fillText(line, x, y);
Expand All @@ -352,7 +394,6 @@ export class Renderer {
position: [number, number],
textAlign: CanvasTextAlign,
textBaseline: CanvasTextBaseline,
alignOnBaseline: number=0,
) {
let lines = text.split("\\N");
let lineHeights = lines.map(line => this.ctx.measureText(line).actualBoundingBoxAscent + this.ctx.measureText(line).actualBoundingBoxDescent);
Expand Down Expand Up @@ -395,14 +436,14 @@ export class Renderer {
const lineBaseline = this.ctx.measureText(line).actualBoundingBoxAscent;
if (this.ctx.lineWidth > 0) {
// console.debug("strokeText", lineWidth);
if (alignOnBaseline > 0) {
this.ctx.strokeText(line, x, y + (alignOnBaseline - lineBaseline));
if (this.startBaseline > 0) {
this.ctx.strokeText(line, x, y + (this.startBaseline - lineBaseline));
} else {
this.ctx.strokeText(line, x, y);
}
}
if (alignOnBaseline > 0) {
this.ctx.fillText(line, x, y + (alignOnBaseline - lineBaseline));
if (this.startBaseline > 0) {
this.ctx.fillText(line, x, y + (this.startBaseline - lineBaseline));
} else {
this.ctx.fillText(line, x, y);
}
Expand Down
13 changes: 11 additions & 2 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function convertAegisubToRGBA(aegisubColor: string, tags: Tag) {
const colorValue = aegisubColor.replace(/&H|&/g, '');

// Extract the individual color components from the Aegisub color value
const alpha = getAlpha(tags);
const alpha = getAlphaFromTag(tags);
const blue = parseInt(colorValue.slice(2, 4), 16);
const green = parseInt(colorValue.slice(4, 6), 16);
const red = parseInt(colorValue.slice(6, 8), 16);
Expand All @@ -19,6 +19,15 @@ export function convertAegisubToRGBA(aegisubColor: string, tags: Tag) {
return rgba;
}

export function changeAlpha(color: string, alpha: number) {
return color.replace(/rgba\((\d+), (\d+), (\d+), (\d+)\)/, `rgba($1, $2, $3, ${alpha})`);
}

export function getAlphaFromColor(color: string) {
const alpha = color.replace(/rgba\((\d+), (\d+), (\d+), (\d+)\)/, '$4');
return parseFloat(alpha);
}

export function insertTags(tags: Tag[], tag: Tag) {
tags.forEach((singleTag) => {
// if the tag is already present, it will be overwritten
Expand All @@ -31,7 +40,7 @@ export function insertTags(tags: Tag[], tag: Tag) {
return tag;
}

export function getAlpha(tags: Tag) {
export function getAlphaFromTag(tags: Tag) {
let alpha = 1;
if (typeof tags.alpha !== 'undefined') {alpha = parseFloat(tags.alpha);}
// console.debug(`Alpha: ${alpha}`);
Expand Down

0 comments on commit a51ae35

Please sign in to comment.