Skip to content

Commit

Permalink
improve/scale: make comment scalable
Browse files Browse the repository at this point in the history
  • Loading branch information
@xpadev-net
xpadev-net committed Sep 18, 2022
1 parent 6466979 commit 2a7e5dc
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 31 deletions.
8 changes: 8 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,15 @@ <h1>Index</h1>
<li>
<a href="#p_options">options</a>
<ul>
<li><a href="#p_config">config</a></li>
<li><a href="#p_debug">debug</a></li>
<li><a href="#p_drawAllImageOnLoad">drawAllImageOnLoad</a></li>
<li><a href="#p_enableLegacyPiP">enableLegacyPiP</a></li>
<li><a href="#p_format">format</a></li>
<li><a href="#p_formatted">formatted</a></li>
<li><a href="#p_keepCA">keepCA</a></li>
<li><a href="#p_mode">mode</a></li>
<li><a href="#p_scale">scale</a></li>
<li><a href="#p_showCollision">showCollision</a></li>
<li><a href="#p_showCommentCount">showCommentCount</a></li>
<li><a href="#p_showFPS">showFPS</a></li>
Expand Down Expand Up @@ -211,6 +213,7 @@ <h4 id="p_keepCA">keepCA<span class="type">:boolean</span> = <span class="yellow
<p>別のCAや関係ないコメントによってCA(主に積み絵)が崩壊するのを抑制します</p>
<p>デフォルト(<span class="yellow">false</span>)の場合は通常通り位置決定を行います</p>
<p><span class="yellow">true</span>の場合はCAを投稿していると推定されるユーザーのレイヤーを分けて位置決定をおこないます</p>
<p>また、該当CAの拡大縮小を抑制する効果もあります</p>
</div>
<h4 id="p_mode">mode<span class="type"><a href="./type/modules/_types_types.mode.html">:modeType</a></span> = <span class="green">"default"</span></h4>
<div class="item">
Expand All @@ -219,6 +222,11 @@ <h4 id="p_mode">mode<span class="type"><a href="./type/modules/_types_types.mode
<p><span class="green">"html5"</span>の場合は、現行のhtml5プレイヤーに近い動作をします</p>
<p><span class="green">"flash"</span>の場合は、Saccubus/ZenzaWatchなどflash時代の互換プレイヤーに近い動作をします</p>
</div>
<h4 id="p_scale">scale<span class="type">:number</span> = <span class="yellow">1</span></h4>
<div class="item">
<p>表示コメントサイズを拡大縮小します</p>
<p><a href="#p_keepCA">keepCA</a>を併用することを推奨します</p>
</div>
<h4 id="p_showCollision">showCollision<span class="type">:boolean</span> = <span class="yellow">false</span></h4>
<div class="item">
<p><span class="note">初期化後も随時設定の変更が可能です</span></p>
Expand Down
42 changes: 22 additions & 20 deletions src/@types/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,36 @@ type inputFormatType =
| "default";
type modeType = "default" | "html5" | "flash";
type InitOptions = {
mode?: modeType;
useLegacy?: boolean;
formatted?: boolean;
format?: inputFormatType;
video?: HTMLVideoElement | undefined;
showCollision?: boolean;
showFPS?: boolean;
showCommentCount?: boolean;
drawAllImageOnLoad?: boolean;
config?: ConfigNullable;
debug?: boolean;
drawAllImageOnLoad?: boolean;
enableLegacyPiP?: boolean;
format?: inputFormatType;
formatted?: boolean;
keepCA?: boolean;
config?: ConfigNullable;
mode?: modeType;
scale?: number;
showCollision?: boolean;
showCommentCount?: boolean;
showFPS?: boolean;
useLegacy?: boolean;
video?: HTMLVideoElement | undefined;
};
type Options = {
mode: modeType;
useLegacy: boolean;
formatted: boolean;
format: inputFormatType;
video: HTMLVideoElement | undefined;
showCollision: boolean;
showFPS: boolean;
showCommentCount: boolean;
drawAllImageOnLoad: boolean;
config: ConfigNullable;
debug: boolean;
drawAllImageOnLoad: boolean;
enableLegacyPiP: boolean;
format: inputFormatType;
formatted: boolean;
keepCA: boolean;
config: ConfigNullable;
mode: modeType;
scale: number;
showCollision: boolean;
showCommentCount: boolean;
showFPS: boolean;
useLegacy: boolean;
video: HTMLVideoElement | undefined;
};
type rawApiResponse = {
[key: string]: apiPing | apiThread | apiLeaf | apiGlobalNumRes | apiChat;
Expand Down
9 changes: 5 additions & 4 deletions src/definition/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,19 +160,20 @@ const defaultConfig: Config = {
* 既定の設定
*/
const defaultOptions: Options = {
mode: "default",
config: {},
debug: false,
drawAllImageOnLoad: false,
enableLegacyPiP: false,
format: "default",
formatted: false,
debug: false,
enableLegacyPiP: false,
keepCA: false,
mode: "default",
scale: 1,
showCollision: false,
showCommentCount: false,
showFPS: false,
useLegacy: false,
video: undefined,
config: {},
};

let config: Config;
Expand Down
15 changes: 10 additions & 5 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ class NiconiComments {
private readonly canvas: HTMLCanvasElement;
private readonly collision: collision;
private readonly context: CanvasRenderingContext2D;
private readonly keepCA: boolean;
private readonly nicoScripts: nicoScript;
private readonly timeline: { [key: number]: number[] };
private readonly mode: modeType;
Expand Down Expand Up @@ -104,8 +103,6 @@ class NiconiComments {
this.showFPS = options.showFPS;
this.showCommentCount = options.showCommentCount;
this.enableLegacyPiP = options.enableLegacyPiP;
this.keepCA = options.keepCA;
console.log(this.keepCA);

this.cacheIndex = {};
this.timeline = {};
Expand Down Expand Up @@ -137,7 +134,7 @@ class NiconiComments {
*/
preRendering(rawData: formattedComment[], drawAll: boolean) {
const preRenderingStart = performance.now();
if (this.keepCA) {
if (options.keepCA) {
rawData = changeCALayer(rawData);
}
const parsedData: parsedComment[] = this.getCommentPos(
Expand Down Expand Up @@ -185,13 +182,21 @@ class NiconiComments {
}
const measure = this.measureText(comment);
const size = parsedData[comment.index] as formattedCommentWithSize;
if (options.scale !== 1 && size.layer === -1) {
measure.height *= options.scale;
measure.width *= options.scale;
measure.width_max *= options.scale;
measure.width_min *= options.scale;
//measure.lineHeight *= options.scale;
measure.fontSize *= options.scale;
}
size.height = measure.height;
size.width = measure.width;
size.width_max = measure.width_max;
size.width_min = measure.width_min;
size.lineHeight = measure.lineHeight;
size.fontSize = measure.fontSize;
if (measure.resized) {
size.fontSize = measure.fontSize;
this.context.font = parseFont(font, fontSize, this.mode);
}
result[comment.index] = size;
Expand Down
3 changes: 1 addition & 2 deletions src/typeGuard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ const typeGuard = {
debug: isBoolean,
enableLegacyPiP: isBoolean,
keepCA: isBoolean,
scale: isNumber,
config: typeGuard.config.config,
format: (i: unknown) =>
typeof i === "string" &&
Expand All @@ -234,7 +235,6 @@ const typeGuard = {
typeof i === "object" && (i as HTMLVideoElement).nodeName === "VIDEO",
};
for (const key in keys) {
console.log(keys[key]);
if (
(item as { [key: string]: unknown })[key] !== undefined &&
!(keys[key] as (i: unknown) => boolean)(
Expand Down Expand Up @@ -333,7 +333,6 @@ const typeGuard = {
) === 0,
};
for (const key in item) {
console.log(key, item, keys);
if (
(item as { [key: string]: unknown })[key] !== undefined &&
!(keys[key] as (i: unknown) => boolean)(
Expand Down

0 comments on commit 2a7e5dc

Please sign in to comment.