From d125e827f33fd7f7a25260152016e639f3975a4b Mon Sep 17 00:00:00 2001
From: OLDREDSTONE <OLDRedstone@users.noreply.github.com>
Date: Wed, 14 Jan 2026 22:20:06 +0800
Subject: [PATCH] =?UTF-8?q?[RDView2]=20DOM=20=E6=B8=B2=E6=9F=93=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=8C=E5=B7=A5=EF=BC=8C=E8=BF=9B=E5=85=A5=E5=8F=AF?=
 =?UTF-8?q?=E8=A1=8C=E6=80=A7=E6=B5=8B=E8=AF=95=E9=98=B6=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html           |    4 +-
 script/Extensions.js | 1176 ------------------------------------------
 script/View.js       |  576 +++++++++++++++++----
 script/assets.bin    |  Bin 4299 -> 0 bytes
 script/assets.png    |  Bin 6653 -> 0 bytes
 script/rdview2.js    |  143 -----
 6 files changed, 483 insertions(+), 1416 deletions(-)
 delete mode 100644 script/Extensions.js
 delete mode 100644 script/assets.bin
 delete mode 100644 script/assets.png
 delete mode 100644 script/rdview2.js
diff --git a/index.html b/index.html
index 50660a9..5461011 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,8 @@
         <link rel="stylesheet" href="/style/special.css">
     </head>
 
-    <body style="background-color: #1f1f1f;">
-        <div id="app" style="color: white;">加载中...</div>
+    <body>
+        <div id="app">加载中...</div>
         <script>
             $docsify = {
                 name: "节奏医生编辑器教程",
diff --git a/script/Extensions.js b/script/Extensions.js
deleted file mode 100644
index f8103b2..0000000
--- a/script/Extensions.js
+++ /dev/null
@@ -1,1176 +0,0 @@
-// RhythmBase.View/Assets/AssetManager.ts
-var Point = class _Point {
-  x = 0;
-  y = 0;
-  constructor(x, y) {
-    if (x !== void 0 && y !== void 0) {
-      this.x = x;
-      this.y = y;
-      return;
-    }
-  }
-  clone() {
-    return new _Point(this.x, this.y);
-  }
-};
-var Rect = class _Rect {
-  left = 0;
-  top = 0;
-  right = 0;
-  bottom = 0;
-  get x() {
-    return this.left;
-  }
-  set x(value) {
-    const diff = value - this.left;
-    this.left += diff;
-    this.right += diff;
-  }
-  get y() {
-    return this.top;
-  }
-  set y(value) {
-    const diff = value - this.top;
-    this.top += diff;
-    this.bottom += diff;
-  }
-  get width() {
-    return this.right - this.left;
-  }
-  set width(value) {
-    this.right = this.left + value;
-  }
-  get height() {
-    return this.bottom - this.top;
-  }
-  set height(value) {
-    this.bottom = this.top + value;
-  }
-  get centerX() {
-    return (this.left + this.right) / 2;
-  }
-  get centerY() {
-    return (this.top + this.bottom) / 2;
-  }
-  get location() {
-    let point = new Point();
-    point.x = this.centerX;
-    point.y = this.centerY;
-    return point;
-  }
-  set location(point) {
-    let w = this.width;
-    let h = this.height;
-    this.left = point.x;
-    this.right = this.left + w;
-    this.top = point.y;
-    this.bottom = this.top + h;
-  }
-  get isEmpty() {
-    return this.width <= 0 || this.height <= 0;
-  }
-  constructor(arg0, arg1, arg2, arg3) {
-    if (arg0 !== void 0 && arg1 !== void 0) {
-      if (arg2 !== void 0 && arg3 !== void 0) {
-        this.left = arg0;
-        this.top = arg1;
-        this.right = arg0 + arg2;
-        this.bottom = arg1 + arg3;
-        return;
-      }
-      this.right = arg0;
-      this.bottom = arg1;
-      return;
-    }
-  }
-  inflate(dx, dy) {
-    this.left -= dx;
-    this.right += dx;
-    this.top -= dy;
-    this.bottom += dy;
-  }
-  clone() {
-    return new _Rect(this.left, this.top, this.width, this.height);
-  }
-  union(rect) {
-    const left = Math.min(this.left, rect.left);
-    const top = Math.min(this.top, rect.top);
-    const right = Math.max(this.right, rect.right);
-    const bottom = Math.max(this.bottom, rect.bottom);
-    return new _Rect(left, top, right - left, bottom - top);
-  }
-  contains(point) {
-    return point.x >= this.left && point.x <= this.right && point.y >= this.top && point.y <= this.bottom;
-  }
-};
-var Color = class _Color {
-  red;
-  green;
-  blue;
-  alpha;
-  constructor(r, g, b, a) {
-    if (typeof r === "string") {
-      if (r.startsWith("#")) {
-        r = r.substring(1);
-      }
-      r = r.trim();
-      switch (r.length) {
-        case 3:
-          r = r.split("").map((c) => c + c).join("");
-          break;
-        case 4:
-          r = "ff" + r.split("").map((c) => c + c).join("");
-          break;
-        case 6:
-          r = "ff" + r;
-          break;
-        case 8:
-          break;
-        default:
-          r = "ffffffff";
-      }
-      const u = parseInt(r, 16);
-      this.alpha = u >> 24 & 255;
-      this.red = u >> 16 & 255;
-      this.green = u >> 8 & 255;
-      this.blue = u & 255;
-      return;
-    }
-    if (r !== void 0 && g === void 0 && b === void 0 && a === void 0) {
-      this.alpha = r >> 24 & 255;
-      this.red = r >> 16 & 255;
-      this.green = r >> 8 & 255;
-      this.blue = r & 255;
-      return;
-    }
-    if (r !== void 0 && g !== void 0 && b !== void 0 && a === void 0) {
-      this.red = r;
-      this.green = g;
-      this.blue = b;
-      this.alpha = 255;
-      return;
-    }
-    this.red = r ?? 0;
-    this.green = g ?? 0;
-    this.blue = b ?? 0;
-    this.alpha = a ?? 0;
-  }
-  toUint32() {
-    return ((this.alpha & 255) << 24 | (this.red & 255) << 16 | (this.green & 255) << 8 | this.blue & 255) >>> 0;
-  }
-  clone() {
-    return new _Color(this.red, this.green, this.blue, this.alpha);
-  }
-};
-var Paint = class {
-  color = new Color(255, 255, 255, 255);
-};
-var SliceInfo = class {
-  bounds = new Rect();
-  center = new Rect();
-  pivot = new Point();
-  scale = 1;
-  get isNinePatch() {
-    return !this.center.isEmpty;
-  }
-};
-var AssetManager = class _AssetManager {
-  static AssetFilePath = "assets.png";
-  static SlicesFilePath = "assets.json";
-  static DirectoryPath = ".";
-  static assetFile = null;
-  static slices = /* @__PURE__ */ new Map();
-  static _isLoaded = false;
-  constructor(dirpath) {
-    _AssetManager.DirectoryPath = dirpath;
-    _AssetManager.initialize();
-  }
-  static get isLoaded() {
-    return this._isLoaded;
-  }
-  static async loadAssetFile() {
-    const pngPath = _AssetManager.DirectoryPath + "/" + this.AssetFilePath;
-    return await new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.onerror = (e) => reject(new Error(`Failed to load asset file: ${pngPath}`));
-      img.src = pngPath;
-    });
-  }
-  static async loadSlices() {
-    if (this._isLoaded) {
-      return /* @__PURE__ */ new Map();
-    }
-    const jsonPath = _AssetManager.DirectoryPath + "/" + this.SlicesFilePath;
-    const response = await fetch(jsonPath);
-    const json = await response.json();
-    const slices = json["meta"]["slices"];
-    const sliceInfos = /* @__PURE__ */ new Map();
-    for (const slice of slices) {
-      const name = slice["name"];
-      const keys = slice["keys"];
-      const sliceInfo = new SliceInfo();
-      for (const key of keys) {
-        const bounds = key["bounds"];
-        sliceInfo.bounds.left = bounds["x"];
-        sliceInfo.bounds.top = bounds["y"];
-        sliceInfo.bounds.right = bounds["x"] + bounds["w"];
-        sliceInfo.bounds.bottom = bounds["y"] + bounds["h"];
-        const center = key["center"];
-        if (center) {
-          sliceInfo.center.left = center["x"];
-          sliceInfo.center.top = center["y"];
-          sliceInfo.center.right = center["x"] + center["w"];
-          sliceInfo.center.bottom = center["y"] + center["h"];
-        }
-        const pivot = key["pivot"];
-        if (pivot) {
-          sliceInfo.pivot.x = pivot["x"];
-          sliceInfo.pivot.y = pivot["y"];
-        }
-        const data = key["data"];
-        if (data) {
-        }
-        sliceInfos.set(name, sliceInfo);
-      }
-    }
-    return sliceInfos;
-  }
-  static async initialize() {
-    if (this._isLoaded) {
-      return;
-    }
-    this.assetFile = await this.loadAssetFile();
-    this.slices = await this.loadSlices();
-    this._isLoaded = true;
-  }
-};
-
-// RhythmBase.View/Assets/Consts.ts
-var Tab = /* @__PURE__ */ function(Tab2) {
-  Tab2["Sounds"] = "sounds";
-  Tab2["Rows"] = "rows";
-  Tab2["Actions"] = "actions";
-  Tab2["Decorations"] = "decorations";
-  Tab2["Rooms"] = "rooms";
-  Tab2["Windows"] = "windows";
-  Tab2["Unknown"] = "unknown";
-  return Tab2;
-}({});
-var EventType = /* @__PURE__ */ function(EventType2) {
-  EventType2["AddClassicBeat"] = "AddClassicBeat";
-  EventType2["AddFreeTimeBeat"] = "AddFreeTimeBeat";
-  EventType2["AddOneshotBeat"] = "AddOneshotBeat";
-  EventType2["AdvanceText"] = "AdvanceText";
-  EventType2["BassDrop"] = "BassDrop";
-  EventType2["Blend"] = "Blend";
-  EventType2["CallCustomMethod"] = "CallCustomMethod";
-  EventType2["ChangeCharacter"] = "ChangeCharacter";
-  EventType2["ChangePlayersRows"] = "ChangePlayersRows";
-  EventType2["Comment"] = "Comment";
-  EventType2["CustomFlash"] = "CustomFlash";
-  EventType2["DesktopColor"] = "DesktopColor";
-  EventType2["FadeRoom"] = "FadeRoom";
-  EventType2["FinishLevel"] = "FinishLevel";
-  EventType2["Flash"] = "Flash";
-  EventType2["FlipScreen"] = "FlipScreen";
-  EventType2["FloatingText"] = "FloatingText";
-  EventType2["ForwardDecorationEvent"] = "ForwardDecorationEvent";
-  EventType2["ForwardEvent"] = "ForwardEvent";
-  EventType2["ForwardRowEvent"] = "ForwardRowEvent";
-  EventType2["HideRow"] = "HideRow";
-  EventType2["HideWindow"] = "HideWindow";
-  EventType2["InvertColors"] = "InvertColors";
-  EventType2["MacroEvent"] = "MacroEvent";
-  EventType2["MaskRoom"] = "MaskRoom";
-  EventType2["Move"] = "Move";
-  EventType2["MoveCamera"] = "MoveCamera";
-  EventType2["MoveRoom"] = "MoveRoom";
-  EventType2["MoveRow"] = "MoveRow";
-  EventType2["NarrateRowInfo"] = "NarrateRowInfo";
-  EventType2["NewWindowDance"] = "NewWindowDance";
-  EventType2["PaintHands"] = "PaintHands";
-  EventType2["PlayAnimation"] = "PlayAnimation";
-  EventType2["PlayExpression"] = "PlayExpression";
-  EventType2["PlaySong"] = "PlaySong";
-  EventType2["PlaySound"] = "PlaySound";
-  EventType2["PulseCamera"] = "PulseCamera";
-  EventType2["PulseFreeTimeBeat"] = "PulseFreeTimeBeat";
-  EventType2["ReadNarration"] = "ReadNarration";
-  EventType2["RenameWindow"] = "RenameWindow";
-  EventType2["ReorderRooms"] = "ReorderRooms";
-  EventType2["ReorderRow"] = "ReorderRow";
-  EventType2["ReorderSprite"] = "ReorderSprite";
-  EventType2["ReorderWindows"] = "ReorderWindows";
-  EventType2["SayReadyGetSetGo"] = "SayReadyGetSetGo";
-  EventType2["SetBackgroundColor"] = "SetBackgroundColor";
-  EventType2["SetBeatSound"] = "SetBeatSound";
-  EventType2["SetBeatsPerMinute"] = "SetBeatsPerMinute";
-  EventType2["SetClapSounds"] = "SetClapSounds";
-  EventType2["SetCountingSound"] = "SetCountingSound";
-  EventType2["SetCrotchetsPerBar"] = "SetCrotchetsPerBar";
-  EventType2["SetForeground"] = "SetForeground";
-  EventType2["SetGameSound"] = "SetGameSound";
-  EventType2["SetHandOwner"] = "SetHandOwner";
-  EventType2["SetHeartExplodeInterval"] = "SetHeartExplodeInterval";
-  EventType2["SetHeartExplodeVolume"] = "SetHeartExplodeVolume";
-  EventType2["SetMainWindow"] = "SetMainWindow";
-  EventType2["SetOneshotWave"] = "SetOneshotWave";
-  EventType2["SetPlayStyle"] = "SetPlayStyle";
-  EventType2["SetRoomContentMode"] = "SetRoomContentMode";
-  EventType2["SetRoomPerspective"] = "SetRoomPerspective";
-  EventType2["SetRowXs"] = "SetRowXs";
-  EventType2["SetSpeed"] = "SetSpeed";
-  EventType2["SetTheme"] = "SetTheme";
-  EventType2["SetVFXPreset"] = "SetVFXPreset";
-  EventType2["SetVisible"] = "SetVisible";
-  EventType2["SetWindowContent"] = "SetWindowContent";
-  EventType2["ShakeScreen"] = "ShakeScreen";
-  EventType2["ShakeScreenCustom"] = "ShakeScreenCustom";
-  EventType2["ShowDialogue"] = "ShowDialogue";
-  EventType2["ShowHands"] = "ShowHands";
-  EventType2["ShowRooms"] = "ShowRooms";
-  EventType2["ShowStatusSign"] = "ShowStatusSign";
-  EventType2["ShowSubdivisionsRows"] = "ShowSubdivisionsRows";
-  EventType2["SpinningRows"] = "SpinningRows";
-  EventType2["Stutter"] = "Stutter";
-  EventType2["TagAction"] = "TagAction";
-  EventType2["TextExplosion"] = "TextExplosion";
-  EventType2["Tile"] = "Tile";
-  EventType2["Tint"] = "Tint";
-  EventType2["TintRows"] = "TintRows";
-  EventType2["WindowResize"] = "WindowResize";
-  return EventType2;
-}({});
-var EventAttriblte = /* @__PURE__ */ function(EventAttriblte2) {
-  EventAttriblte2[EventAttriblte2["None"] = 0] = "None";
-  EventAttriblte2[EventAttriblte2["DurationEvent"] = 1] = "DurationEvent";
-  EventAttriblte2[EventAttriblte2["RoomEvent"] = 2] = "RoomEvent";
-  return EventAttriblte2;
-}({});
-var EventInfo = class {
-  defaultTab;
-  durationKey = "duration";
-  attr;
-  get isDurationEvent() {
-    return (this.attr & EventAttriblte.DurationEvent) !== 0;
-  }
-  get isRoomEvent() {
-    return (this.attr & EventAttriblte.RoomEvent) !== 0;
-  }
-  constructor(tab, enumAttriblte, durationKey) {
-    this.defaultTab = tab;
-    this.attr = enumAttriblte ?? EventAttriblte.None;
-    if (durationKey !== void 0) {
-      this.durationKey = durationKey;
-    }
-  }
-};
-var WordInfo = class {
-  phrase;
-  length;
-  constructor(phrase, length) {
-    this.phrase = phrase;
-    this.length = length;
-  }
-};
-var WordInfos = {
-  SayReaDyGetSetGoNew: new WordInfo("Rea, Dy, Get, Set, Go!", 4),
-  SayReaDyGetSetOne: new WordInfo("Rea, Dy, Get, Set, One!", 4),
-  SayGetSetGo: new WordInfo("Get, Set, Go!", 2),
-  SayGetSetOne: new WordInfo("Get, Set, One!", 2),
-  JustSayRea: new WordInfo("Rea", 0),
-  JustSayDy: new WordInfo("Dy", 0),
-  JustSayGet: new WordInfo("Get", 0),
-  JustSaySet: new WordInfo("Set", 0),
-  JustSayAnd: new WordInfo("And", 0),
-  JustSayGo: new WordInfo("Go!", 0),
-  JustSayStop: new WordInfo("Stop", 0),
-  JustSayAndStop: new WordInfo("And Stop!", 0),
-  SaySwitch: new WordInfo("Switch", 0),
-  SayWatch: new WordInfo("Watch", 0),
-  SayListen: new WordInfo("Listen", 0),
-  Count1: new WordInfo("1", 0),
-  Count2: new WordInfo("2", 0),
-  Count3: new WordInfo("3", 0),
-  Count4: new WordInfo("4", 0),
-  Count5: new WordInfo("5", 0),
-  Count6: new WordInfo("6", 0),
-  Count7: new WordInfo("7", 0),
-  Count8: new WordInfo("8", 0),
-  Count9: new WordInfo("9", 0),
-  Count10: new WordInfo("10", 0),
-  SayReadyGetSetGo: new WordInfo("Ready, Get, Set, Go!", 4),
-  JustSayReady: new WordInfo("Ready", 0)
-};
-var EventInfos = {
-  AddClassicBeat: new EventInfo(Tab.Rows),
-  AddFreeTimeBeat: new EventInfo(Tab.Rows),
-  AddOneshotBeat: new EventInfo(Tab.Rows),
-  AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  BassDrop: new EventInfo(Tab.Actions),
-  Blend: new EventInfo(Tab.Decorations),
-  CallCustomMethod: new EventInfo(Tab.Actions),
-  ChangeCharacter: new EventInfo(Tab.Actions),
-  ChangePlayersRows: new EventInfo(Tab.Actions),
-  Comment: new EventInfo(Tab.Unknown),
-  CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  DesktopColor: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
-  FadeRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  FinishLevel: new EventInfo(Tab.Actions),
-  Flash: new EventInfo(Tab.Actions),
-  FlipScreen: new EventInfo(Tab.Actions),
-  FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  ForwardDecorationEvent: new EventInfo(Tab.Decorations),
-  ForwardEvent: new EventInfo(Tab.Unknown),
-  ForwardRowEvent: new EventInfo(Tab.Rows),
-  HideRow: new EventInfo(Tab.Actions),
-  HideWindow: new EventInfo(Tab.Windows),
-  InvertColors: new EventInfo(Tab.Actions),
-  MacroEvent: new EventInfo(Tab.Unknown),
-  MaskRoom: new EventInfo(Tab.Rooms),
-  Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  MoveRow: new EventInfo(Tab.Rows, EventAttriblte.DurationEvent),
-  NarrateRowInfo: new EventInfo(Tab.Sounds),
-  NewWindowDance: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  PaintHands: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  PlayAnimation: new EventInfo(Tab.Decorations),
-  PlayExpression: new EventInfo(Tab.Actions),
-  PlaySong: new EventInfo(Tab.Sounds),
-  PlaySound: new EventInfo(Tab.Sounds),
-  PulseCamera: new EventInfo(Tab.Actions),
-  PulseFreeTimeBeat: new EventInfo(Tab.Rows),
-  ReadNarration: new EventInfo(Tab.Sounds),
-  RenameWindow: new EventInfo(Tab.Windows),
-  ReorderRooms: new EventInfo(Tab.Rooms),
-  ReorderRow: new EventInfo(Tab.Rows),
-  ReorderSprite: new EventInfo(Tab.Decorations),
-  ReorderWindows: new EventInfo(Tab.Windows),
-  SayReadyGetSetGo: new EventInfo(Tab.Sounds),
-  SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetBeatSound: new EventInfo(Tab.Sounds),
-  SetBeatsPerMinute: new EventInfo(Tab.Sounds),
-  SetClapSounds: new EventInfo(Tab.Sounds),
-  SetCountingSound: new EventInfo(Tab.Sounds),
-  SetCrotchetsPerBar: new EventInfo(Tab.Sounds),
-  SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetGameSound: new EventInfo(Tab.Sounds),
-  SetHandOwner: new EventInfo(Tab.Actions),
-  SetHeartExplodeInterval: new EventInfo(Tab.Sounds),
-  SetHeartExplodeVolume: new EventInfo(Tab.Sounds),
-  SetMainWindow: new EventInfo(Tab.Windows),
-  SetOneshotWave: new EventInfo(Tab.Rows),
-  SetPlayStyle: new EventInfo(Tab.Actions),
-  SetRoomContentMode: new EventInfo(Tab.Rooms),
-  SetRoomPerspective: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  SetRowXs: new EventInfo(Tab.Rows),
-  SetSpeed: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetTheme: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetVFXPreset: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetVisible: new EventInfo(Tab.Decorations),
-  SetWindowContent: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
-  ShakeScreen: new EventInfo(Tab.Actions),
-  ShakeScreenCustom: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  ShowDialogue: new EventInfo(Tab.Actions),
-  ShowHands: new EventInfo(Tab.Actions),
-  ShowRooms: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  ShowStatusSign: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  ShowSubdivisionsRows: new EventInfo(Tab.Actions),
-  SpinningRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  Stutter: new EventInfo(Tab.Actions),
-  TagAction: new EventInfo(Tab.Actions),
-  TextExplosion: new EventInfo(Tab.Actions),
-  Tile: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  Tint: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  TintRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent)
-};
-
-// RhythmBase.View/Extensions.ts
-var PatchStyle = /* @__PURE__ */ function(PatchStyle2) {
-  PatchStyle2[PatchStyle2["Repeat"] = 0] = "Repeat";
-  PatchStyle2[PatchStyle2["Strentch"] = 1] = "Strentch";
-  return PatchStyle2;
-}(PatchStyle || {});
-var IconStyle = class {
-  Enabled;
-  Active = false;
-  Hover = false;
-  Scale = 2;
-};
-var Extensions = class {
-  static lineHeight = 6;
-  static charHeight = 8;
-  static iconSize = 14;
-  static evtag = "event_tag";
-  static evbarea = "event_beat_area";
-  static asm = new AssetManager("./rdviewAssets");
-  constructor() {
-    AssetManager.initialize();
-  }
-  static DrawSlice(canvas, src, dest, scale = 1, style = PatchStyle.Strentch, color) {
-    const ctx = canvas;
-    if (!ctx) return;
-    if (!AssetManager.slices.has(src)) {
-      return;
-    }
-    const info = AssetManager.slices.get(src);
-    if (dest instanceof Point) {
-      const destRect = new Rect(dest.x - info.pivot.x * scale, dest.y - info.pivot.y * scale, info.bounds.width * scale, info.bounds.height * scale);
-      if (color) {
-        if (color.alpha === 0) {
-          return destRect;
-        }
-        this.drawSliceWithColor(ctx, info, destRect, color);
-      } else {
-        this.drawSliceNormal(ctx, info, destRect);
-      }
-      return destRect;
-    } else {
-      if (info.isNinePatch) {
-        this.DrawNinePatch(canvas, info, dest, color, scale, style);
-      } else {
-        if (color) {
-          this.drawSliceWithColor(ctx, info, dest, color);
-        } else {
-          this.drawSliceNormal(ctx, info, dest);
-        }
-      }
-    }
-  }
-  static drawSliceNormal(ctx, info, destRect) {
-    const bitmap = AssetManager.assetFile;
-    if (!bitmap) return;
-    ctx.imageSmoothingEnabled = false;
-    ctx.drawImage(bitmap, info.bounds.x, info.bounds.y, info.bounds.width, info.bounds.height, destRect.x, destRect.y, destRect.width, destRect.height);
-  }
-  static drawSliceWithColor(ctx, info, destRect, color) {
-    const bitmap = AssetManager.assetFile;
-    if (!bitmap) return;
-    if (color.alpha === 0) {
-      return;
-    }
-    const tr = color.red / 255;
-    const tg = color.green / 255;
-    const tb = color.blue / 255;
-    const ta = color.alpha / 255;
-    ctx.save();
-    const tempCanvas = typeof document !== "undefined" ? document.createElement("canvas") : {};
-    tempCanvas.width = info.bounds.width;
-    tempCanvas.height = info.bounds.height;
-    const tempCtx = tempCanvas.getContext("2d");
-    tempCtx.imageSmoothingEnabled = false;
-    tempCtx.drawImage(bitmap, info.bounds.x, info.bounds.y, info.bounds.width, info.bounds.height, 0, 0, info.bounds.width, info.bounds.height);
-    const imageData = tempCtx.getImageData(0, 0, info.bounds.width, info.bounds.height);
-    const data = imageData.data;
-    for (let i = 0; i < data.length; i += 4) {
-      const originalAlpha = data[i + 3];
-      const gray = data[i] * 0.2126 + data[i + 1] * 0.7152 + data[i + 2] * 0.0722;
-      data[i] = gray * tr;
-      data[i + 1] = gray * tg;
-      data[i + 2] = gray * tb;
-      data[i + 3] = originalAlpha * ta;
-    }
-    tempCtx.putImageData(imageData, 0, 0);
-    ctx.imageSmoothingEnabled = false;
-    ctx.globalAlpha = 1;
-    ctx.drawImage(tempCanvas, 0, 0, info.bounds.width, info.bounds.height, destRect.x, destRect.y, destRect.width, destRect.height);
-    ctx.restore();
-  }
-  static DrawNinePatch(canvas, info, dest, color, scale = 1, style = PatchStyle.Strentch) {
-    const ctx = canvas;
-    if (!ctx) return;
-    const bitmap = AssetManager.assetFile;
-    if (!bitmap) return;
-    const srcBounds = info.bounds;
-    const destRect = dest;
-    const centerBounds = info.center;
-    const sx0 = srcBounds.left;
-    const sx3 = srcBounds.right;
-    const sy0 = srcBounds.top;
-    const sy3 = srcBounds.bottom;
-    const sx1 = sx0 + centerBounds.left;
-    const sx2 = sx0 + centerBounds.right;
-    const sy1 = sy0 + centerBounds.top;
-    const sy2 = sy0 + centerBounds.bottom;
-    const swLeft = sx1 - sx0;
-    const swCenter = sx2 - sx1;
-    const swRight = sx3 - sx2;
-    const shTop = sy1 - sy0;
-    const shCenter = sy2 - sy1;
-    const shBottom = sy3 - sy2;
-    const dwLeft = swLeft * scale;
-    let dwRight = swRight * scale;
-    let dwCenter = destRect.width - dwLeft - dwRight;
-    if (dwCenter < 0) {
-      const scaleX = destRect.width / Math.max(1, swLeft + swRight);
-      dwRight = Math.max(0, destRect.width - Math.round(swLeft * scaleX));
-      dwCenter = 0;
-    }
-    const dhTop = shTop * scale;
-    let dhBottom = shBottom * scale;
-    let dhCenter = destRect.height - dhTop - dhBottom;
-    if (dhCenter < 0) {
-      const scaleY = destRect.height / Math.max(1, shTop + shBottom);
-      dhBottom = Math.max(0, destRect.height - Math.round(shTop * scaleY));
-      dhCenter = 0;
-    }
-    const srcXs = [
-      sx0,
-      sx1,
-      sx2,
-      sx3
-    ];
-    const srcYs = [
-      sy0,
-      sy1,
-      sy2,
-      sy3
-    ];
-    const dx0 = destRect.left;
-    const dx1 = dx0 + dwLeft;
-    const dx2 = dx1 + dwCenter;
-    const dx3 = destRect.right;
-    const dy0 = destRect.top;
-    const dy1 = dy0 + dhTop;
-    const dy2 = dy1 + dhCenter;
-    const dy3 = destRect.bottom;
-    const dstXs = [
-      dx0,
-      dx1,
-      dx2,
-      dx3
-    ];
-    const dstYs = [
-      dy0,
-      dy1,
-      dy2,
-      dy3
-    ];
-    for (let row = 0; row < 3; row++) {
-      for (let col = 0; col < 3; col++) {
-        const sLeft = srcXs[col];
-        const sTop = srcYs[row];
-        const sRight = srcXs[col + 1];
-        const sBottom = srcYs[row + 1];
-        const sW = sRight - sLeft;
-        const sH = sBottom - sTop;
-        if (sW <= 0 || sH <= 0) continue;
-        const dLeft = dstXs[col];
-        const dTop = dstYs[row];
-        const dRight = dstXs[col + 1];
-        const dBottom = dstYs[row + 1];
-        const dW = dRight - dLeft;
-        const dH = dBottom - dTop;
-        if (dW <= 0 || dH <= 0) continue;
-        if (style === PatchStyle.Repeat) {
-          for (let y = dTop; y < dBottom; y += sH * scale) {
-            const th = Math.min(sH, (dBottom - y) / scale);
-            for (let x = dLeft; x < dRight; x += sW * scale) {
-              const tw = Math.min(sW, (dRight - x) / scale);
-              var sRect = new Rect(sLeft, sTop, tw, th);
-              var dRect = new Rect(x, y, tw * scale, th * scale);
-              if (color && color.alpha > 0) {
-                this.drawSliceWithColor(ctx, {
-                  bounds: sRect,
-                  pivot: new Point(0, 0),
-                  isNinePatch: false,
-                  center: new Rect(),
-                  scale: 1
-                }, dRect, color);
-              } else {
-                this.drawSliceNormal(ctx, {
-                  bounds: sRect,
-                  pivot: new Point(0, 0),
-                  isNinePatch: false,
-                  center: new Rect(),
-                  scale: 1
-                }, dRect);
-              }
-            }
-          }
-        } else {
-          if (color && color.alpha > 0) {
-            this.drawSliceWithColor(ctx, {
-              bounds: new Rect(sLeft, sTop, sW, sH),
-              pivot: new Point(0, 0),
-              isNinePatch: false,
-              center: new Rect(),
-              scale: 1
-            }, new Rect(dLeft, dTop, dW, dH), color);
-          } else {
-            ctx.imageSmoothingEnabled = false;
-            ctx.drawImage(bitmap, sLeft, sTop, sW, sH, dLeft, dTop, dW, dH);
-          }
-        }
-      }
-    }
-  }
-  static MeasureRDFontText(canvas, text, scale = 1) {
-    let len = 0;
-    for (let i = 0; i < text.length; i++) {
-      const c = text.charAt(i);
-      if (c === "\n") {
-        len = 0;
-      } else {
-        const info = AssetManager.slices.get(`char_${c.charCodeAt(0).toString(16).padStart(4, "0")}`);
-        if (info) {
-          len += info.bounds.width * scale;
-        }
-      }
-    }
-    return len;
-  }
-  static DrawRDFontText(canvas, text, dest, color, scale = 1) {
-    const start = dest.clone();
-    const result = new Rect();
-    start.y -= this.lineHeight * scale;
-    for (let i = 0; i < text.length; i++) {
-      const c = text.charAt(i);
-      if (c === "\n") {
-        start.x = dest.x;
-        start.y += this.lineHeight * scale;
-        continue;
-      } else {
-        const charcode = c.charCodeAt(0).toString(16).padStart(4, "0");
-        const area = this.DrawSlice(canvas, `char_${charcode}`, start, scale, PatchStyle.Strentch, color);
-        result.union(area);
-        start.x += area.width * scale;
-      }
-    }
-    return result;
-  }
-  static DrawEventIcon(canvas, evt, dest, style) {
-    let destRect = new Rect();
-    const key = `event_${evt.type}`;
-    const evttype = evt.type;
-    const info = AssetManager.slices.get(key) ?? AssetManager.slices.get("event_Unknown") ?? (() => {
-      throw new Error("information not found.");
-    });
-    if (!(info instanceof SliceInfo)) {
-      return new Rect();
-    }
-    const pulse = "event_beat_pulse";
-    const hit = "event_beat_hit";
-    const hitf = "event_beat_hit_freeze";
-    const hitb = "event_beat_hit_burn";
-    const beatcross = "event_beat_cross";
-    const beatx = "event_beat_x";
-    const beatsynco = "event_beat_synco";
-    const beatline = "event_beat_line";
-    const beatcolor = new Color(4284539717);
-    const evtInfo = EventInfos[evt.type];
-    evt.tab = evt.tab ?? evtInfo.defaultTab;
-    switch (evt.type) {
-      case EventType.AddClassicBeat:
-        {
-          const tick = evt.tick ?? 1;
-          const swing = evt.swing === 0 ? 1 : evt.swing;
-          const hold = evt.hold ?? 0;
-          const syncoswing = evt.syncoSwing ?? 0;
-          const syncobeat = evt.syncoBeat ?? -1;
-          const classicbeatlength = evt.length ?? 7;
-          destRect = new Rect(dest.x, dest.y, this.iconSize * style.Scale * (tick * (classicbeatlength - 1 - (syncoswing ?? 0))), this.iconSize * style.Scale);
-          if (hold > 0) {
-            this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width, dest.y, this.iconSize * style.Scale * hold, this.iconSize * style.Scale), style.Scale, PatchStyle.Repeat, new Color(style.Active ? 4291839731 : 4286462352));
-          }
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          if (style.Hover) {
-            for (let i = 0; i < classicbeatlength - 1; i++) {
-              this.DrawSlice(canvas, pulse, new Point(dest.x + this.iconSize * style.Scale * (tick * (i + i % 2 * (1 - (swing ?? 1)) - (i <= (syncobeat ?? -1) ? 0 : syncoswing ?? 0))), dest.y), style.Scale);
-            }
-          }
-          this.DrawSlice(canvas, hit, new Point(dest.x + style.Scale * (this.iconSize * (tick * (classicbeatlength - 1 - (syncoswing ?? 0))) - 1), dest.y), style.Scale);
-        }
-        break;
-      case EventType.AddFreeTimeBeat:
-        {
-          const hold = (evt.hold ?? 0) - info.bounds.width / this.iconSize;
-          destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(beatcolor.clone(), style.Active, style.Enabled ?? evt.active ?? true), style);
-          this.DrawRDFontText(canvas, ((evt.pulse ?? 0) + 1).toString(), new Point(dest.x + 1.5 * style.Scale, dest.y + 10 * style.Scale), new Color(4294967295), style.Scale);
-          if ((evt.pulse ?? 0) == 6) {
-            this.DrawSlice(canvas, hit, new Point(dest.x, dest.y), style.Scale);
-          }
-          if (hold > 0) {
-            this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width, dest.y, this.iconSize * style.Scale * hold, info.bounds.height * style.Scale), style.Scale, PatchStyle.Repeat, new Color(style.Active ? 4284539717 : 4281299234));
-          }
-        }
-        break;
-      case EventType.AddOneshotBeat:
-        {
-          const tick = evt.tick ?? 1;
-          const interval = evt.interval ?? 1;
-          const loop = Math.floor(evt.loops ?? 0);
-          const subdiv = evt.subdivisions ?? 1;
-          const freezeBurnMode = evt.freezeBurnMode ?? "Wave";
-          const delay = freezeBurnMode === "Freezeshot" ? evt.delay ?? 0 : 0;
-          destRect = new Rect(dest.x, dest.y, this.iconSize * style.Scale * (loop * interval + tick + delay), this.iconSize * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          const subdivwidth = this.iconSize * style.Scale * (subdiv - 1) / subdiv * tick;
-          if (subdiv > 1) {
-            this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width, dest.y, subdivwidth, info.bounds.height * style.Scale), style.Scale, PatchStyle.Repeat, new Color(4279480353));
-          }
-          if (evt.skipshot ?? false) {
-            this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width + subdivwidth, dest.y, style.Scale * this.iconSize * interval - subdivwidth, info.bounds.height * style.Scale), style.Scale, PatchStyle.Repeat, new Color(4291115835));
-          }
-          if (style.Hover) {
-            for (let l = 0; l <= loop; l++) {
-              for (let i = 0; i < subdiv; i++) {
-                this.DrawSlice(canvas, pulse, new Point(dest.x + this.iconSize * style.Scale * (l * interval + i * tick / subdiv), dest.y), style.Scale);
-              }
-            }
-          }
-          for (let l = 0; l <= loop; l++) {
-            for (let i = 0; i < subdiv; i++) {
-              this.DrawSlice(canvas, hit, new Point(dest.x + style.Scale * (this.iconSize * (l * interval + delay + tick + i * tick / subdiv) - 1), dest.y), style.Scale);
-            }
-          }
-          const off = interval - tick;
-          if (freezeBurnMode !== "Wave") {
-            let posx = dest.x - off * style.Scale * this.iconSize;
-            this.DrawSlice(canvas, beatcross, new Point(posx, dest.y), style.Scale);
-            switch (freezeBurnMode) {
-              case "Freezeshot":
-                posx += delay * style.Scale * this.iconSize;
-                this.DrawSlice(canvas, beatcross, new Point(posx, dest.y), style.Scale);
-                for (let l = 0; l <= loop; l++) {
-                  this.DrawSlice(canvas, hitf, new Point(dest.x + style.Scale * (this.iconSize * (l * interval + tick) - 1), dest.y), style.Scale);
-                }
-                break;
-              case "Burnshot":
-                posx -= tick * style.Scale * this.iconSize;
-                this.DrawSlice(canvas, beatcross, new Point(posx, dest.y), style.Scale);
-                for (let l = 0; l <= loop; l++) {
-                  this.DrawSlice(canvas, hitb, new Point(dest.x + style.Scale * (this.iconSize * (l * interval + tick) - 1), dest.y), style.Scale);
-                }
-                break;
-              default:
-                break;
-            }
-          }
-          if (style.Active && style.Hover) {
-            this.DrawSlice(canvas, "event_beat_loop", new Point(destRect.right, destRect.top), style.Scale);
-          }
-        }
-        break;
-      case EventType.Comment:
-        {
-          const commentColor = new Color(evt.color);
-          console.log(evt.color, commentColor);
-          destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(commentColor, style.Active, style.Enabled ?? evt.active ?? true), style);
-          this.DrawSlice(canvas, key, dest, style.Scale);
-        }
-        break;
-      case EventType.DesktopColor:
-        {
-          destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * 4 * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          const endColor = new Color(evt.endColor);
-          this.DrawSlice(canvas, `${key}_0`, new Point(dest.x, dest.y + info.bounds.height * style.Scale), style.Scale, PatchStyle.Strentch, endColor);
-          this.DrawSlice(canvas, key, new Point(dest.x, dest.y + info.bounds.height * style.Scale), style.Scale);
-        }
-        break;
-      case EventType.PulseFreeTimeBeat:
-        {
-          const hold = (evt.hold ?? 0) - info.bounds.width / this.iconSize;
-          destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(beatcolor.clone(), style.Active, style.Enabled ?? evt.active ?? true), style);
-          let actionText;
-          switch (evt.action) {
-            case "Increment":
-              actionText = ">";
-              break;
-            case "Decrement":
-              actionText = "<";
-              break;
-            case "Remove":
-              actionText = "x";
-              break;
-            case "Custom":
-            default:
-              actionText = ((evt.customPulse ?? 0) + 1).toString();
-              break;
-          }
-          this.DrawRDFontText(canvas, actionText, new Point(dest.x + 1.5 * style.Scale, dest.y + 8 * style.Scale), new Color(4294967295), style.Scale);
-          if (evt.action === "Custom" && (evt.customPulse ?? 0) === 7) {
-            this.DrawSlice(canvas, hit, new Rect(dest.x - 2 * style.Scale, dest.y, 5 * style.Scale, info.bounds.height * style.Scale), style.Scale, PatchStyle.Strentch);
-          }
-          if (hold > 0) {
-            this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width, dest.y, this.iconSize * style.Scale * hold, info.bounds.height * style.Scale), style.Scale, PatchStyle.Repeat, new Color(style.Active ? 4291839731 : 4286462352));
-          }
-        }
-        break;
-      case EventType.ReorderRooms:
-        {
-          destRect = new Rect(dest.x, dest.y, this.iconSize * style.Scale, this.iconSize * 4 * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          let currentDest = dest.clone();
-          if (evt.order && Array.isArray(evt.order)) {
-            for (const r of evt.order) {
-              this.DrawSlice(canvas, `${key}_${r}`, currentDest.clone(), style.Scale);
-              currentDest.y += this.iconSize * style.Scale;
-            }
-          }
-        }
-        break;
-      case EventType.ReorderWindows:
-        {
-          destRect = new Rect(dest.x, dest.y, this.iconSize * style.Scale, this.iconSize * 4 * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          let currentDest = dest.clone();
-          if (evt.order && Array.isArray(evt.order)) {
-            for (const r of evt.order) {
-              this.DrawSlice(canvas, `${key}_${r}`, currentDest.clone(), style.Scale);
-              currentDest.y += this.iconSize * style.Scale;
-            }
-          }
-        }
-        break;
-      case EventType.SayReadyGetSetGo:
-        {
-          const wordInfo = WordInfos[evt.phraseToSay];
-          const len = wordInfo.length * evt.tick + 1;
-          destRect = new Rect(dest.x, dest.y, len * this.iconSize * style.Scale, this.iconSize * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          const stringToJion = wordInfo.phrase.split(" ");
-          let stringToDraw = [
-            stringToJion[0]
-          ];
-          let lw = this.MeasureRDFontText(canvas, stringToJion[0]);
-          const sw = this.MeasureRDFontText(canvas, " ");
-          for (let i = 1; i < stringToJion.length; i++) {
-            const part = stringToJion[i];
-            const w = this.MeasureRDFontText(canvas, part);
-            if (lw + sw + w > (len * this.iconSize - 2) * style.Scale) {
-              lw = w;
-              stringToDraw.push(part);
-            } else {
-              lw += sw + w;
-              stringToDraw[stringToDraw.length - 1] += " " + part;
-            }
-          }
-          stringToDraw.splice(3);
-          const c = stringToDraw.length;
-          const top = dest.y + (this.iconSize - this.charHeight * c / 2) * style.Scale / 2;
-          for (let i = 0; i < c; i++) {
-            const line = stringToDraw[i];
-            const p = new Point(dest.x + (len * this.iconSize * style.Scale - this.MeasureRDFontText(canvas, line, style.Scale / 2)) / 2, top + (i * this.charHeight + this.lineHeight) * style.Scale / 2);
-            this.DrawRDFontText(canvas, line, p, new Color(4294967295), style.Scale / 2);
-          }
-        }
-        break;
-      case EventType.SetRowXs:
-        {
-          destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          const width = info.bounds.width * style.Scale / 6;
-          const beatxInfo = AssetManager.slices.get(beatx);
-          if (!beatxInfo) break;
-          const iconwidth = beatxInfo.bounds.width;
-          const s = width / iconwidth;
-          let left = 0;
-          const top = this.iconSize * style.Scale / 2 - beatxInfo.bounds.height * s / 2;
-          if (evt.pattern) {
-            const pattern = evt.pattern;
-            for (const p of pattern) {
-              const patternKey = p === "x" ? beatx : beatline;
-              this.DrawSlice(canvas, patternKey, new Rect(dest.x + left, dest.y + top, width, beatxInfo.bounds.height * s), style.Scale, PatchStyle.Strentch);
-              left += width;
-            }
-          }
-          if ((evt.syncoBeat ?? -1) >= 0) {
-            this.DrawSlice(canvas, beatsynco, new Rect(dest.x + width * (evt.syncoBeat ?? 0), dest.y + top, width, beatxInfo.bounds.height * s), style.Scale, PatchStyle.Strentch);
-          }
-        }
-        break;
-      case EventType.ShowRooms:
-        {
-          destRect = new Rect(dest.x, dest.y, this.iconSize * style.Scale, this.iconSize * 4 * style.Scale);
-          this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-          if (evt.rooms && Array.isArray(evt.rooms)) {
-            for (let i = 0; i < 4; i++) {
-              const roomState = evt.rooms[i] ? "1" : "0";
-              this.DrawSlice(canvas, `${key}_${roomState}`, new Point(dest.x, dest.y + i * this.iconSize * style.Scale), style.Scale / 2);
-            }
-          }
-        }
-        break;
-      default:
-        destRect = new Rect(dest.x, dest.y, info.bounds.width * style.Scale, info.bounds.height * style.Scale);
-        this.DrawBack(canvas, destRect.clone(), this.WithState(this.ColorOf(evt.tab), style.Active, style.Enabled ?? evt.active ?? true), style);
-        switch (evt.type) {
-          case EventType.CustomFlash:
-            {
-              this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.startColor ?? 0));
-              this.DrawSlice(canvas, `${key}_1`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.endColor ?? 0));
-            }
-            break;
-          case EventType.FlipScreen:
-            {
-              let suffix = "";
-              const flipX = evt.flipX ?? false;
-              const flipY = evt.flipY ?? false;
-              if (flipX && flipY) {
-                suffix = "_2";
-              } else if (flipX && !flipY) {
-                suffix = "_1";
-              } else if (!flipX && flipY) {
-                suffix = "_0";
-              }
-              this.DrawSlice(canvas, key + suffix, dest, style.Scale);
-            }
-            break;
-          case EventType.FloatingText:
-            {
-              this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.color ?? 0));
-              this.DrawSlice(canvas, `${key}_1`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.outlineColor ?? 0));
-            }
-            break;
-          case EventType.MoveRoom:
-            {
-              canvas.save();
-              const degree = evt.angle ?? 0;
-              const scaleWidth = evt.scale?.width ?? 0;
-              const scaleHeight = evt.scale?.height ?? 0;
-              if (scaleWidth === 0 || scaleHeight === 0) {
-                canvas.restore();
-                break;
-              }
-              const pleft = (evt.pivot?.x ?? 0) / 100;
-              const ptop = 1 - (evt.pivot?.y ?? 0) / 100;
-              const uniform = Math.sqrt(scaleWidth * scaleWidth + scaleHeight * scaleHeight);
-              const w = scaleWidth / uniform;
-              const h = scaleHeight / uniform;
-              canvas.translate(dest.x + destRect.width / 2, dest.y + destRect.height / 2);
-              canvas.rotate(-degree * Math.PI / 180);
-              canvas.scale(w, h);
-              this.DrawSlice(canvas, key, new Point(-destRect.width / 2, -destRect.height / 2), style.Scale);
-              if (!(pleft < 0 || pleft > 1 || ptop < 0 || ptop > 1)) {
-                canvas.fillStyle = "rgb(255, 0, 0)";
-                canvas.fillRect((pleft - 0.5) * destRect.width - 1, (ptop - 0.5) * destRect.height - 1, 2, 2);
-              }
-              canvas.restore();
-            }
-            break;
-          case EventType.PaintHands:
-            {
-              this.DrawSlice(canvas, key, dest, style.Scale, PatchStyle.Strentch, new Color(evt.tintColor ?? 0));
-              const border = evt.border ?? "None";
-              if (border === "Outline") {
-                this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              } else if (border === "Glow") {
-                this.DrawSlice(canvas, `${key}_1`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              }
-            }
-            break;
-          case EventType.SetBackgroundColor:
-            {
-              this.DrawSlice(canvas, key, dest, style.Scale);
-              const bgType = evt.backgroundType ?? "Color";
-              if (bgType === "Color") {
-                this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.color ?? 0));
-              } else if (bgType === "Image") {
-                this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(4294967295));
-              }
-            }
-            break;
-          case EventType.SetCrotchetsPerBar:
-            {
-              const cpb = evt.crotchetsPerBar ?? 4;
-              this.DrawSlice(canvas, key, dest, style.Scale);
-              this.DrawRDFontText(canvas, cpb > 9 ? "-" : cpb.toString(), new Point(dest.x + 2 * style.Scale, dest.y + 7 * style.Scale), new Color(4278190080), style.Scale);
-              this.DrawRDFontText(canvas, "4", new Point(dest.x + 8 * style.Scale, dest.y + 12 * style.Scale), new Color(4278190080), style.Scale);
-            }
-            break;
-          case EventType.SetForeground:
-            {
-              this.DrawSlice(canvas, key, dest, style.Scale);
-            }
-            break;
-          case EventType.Tint:
-            {
-              this.DrawSlice(canvas, key, dest, style.Scale, PatchStyle.Strentch, new Color(evt.tintColor ?? 0));
-              const border = evt.border ?? "None";
-              if (border === "Outline") {
-                this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              } else if (border === "Glow") {
-                this.DrawSlice(canvas, `${key}_1`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              }
-            }
-            break;
-          case EventType.TintRows:
-            {
-              this.DrawSlice(canvas, key, dest, style.Scale, PatchStyle.Strentch, new Color(evt.tintColor ?? 0));
-              const border = evt.border ?? "None";
-              if (border === "Outline") {
-                this.DrawSlice(canvas, `${key}_0`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              } else if (border === "Glow") {
-                this.DrawSlice(canvas, `${key}_1`, dest, style.Scale, PatchStyle.Strentch, new Color(evt.borderColor ?? 0));
-              }
-            }
-            break;
-          default:
-            this.drawSliceNormal(canvas, info, destRect);
-            break;
-        }
-        break;
-    }
-    if (evtInfo.isDurationEvent) {
-      evt.duration = 2;
-    }
-    if (evt.duration && evt.duration > 0 && style.Active) {
-      const duration = evt[evtInfo.durationKey];
-      const durWidth = style.Scale * this.iconSize * duration - destRect.width;
-      const c = this.ColorOf(evt.tab);
-      c.alpha = style.Active ? 192 : 91;
-      if (durWidth > 0) {
-        this.DrawSlice(canvas, this.evbarea, new Rect(dest.x + destRect.width, dest.y, durWidth, destRect.height), style.Scale, PatchStyle.Repeat, c);
-      }
-    }
-    return destRect;
-  }
-  static ColorOf(tab) {
-    switch (tab) {
-      case "sounds":
-        return new Color(4292355123);
-      case "rows":
-        return new Color(4281094105);
-      case "actions":
-        return new Color(4291118003);
-      case "decorations":
-        return new Color(4278240345);
-      case "rooms":
-        return new Color(4292392978);
-      case "windows":
-        return new Color(4283479511);
-      default:
-        return new Color(4286874756);
-    }
-  }
-  static DrawBack(canvas, destRect, color, style) {
-    const outline = "event_outline";
-    const back = "event_back";
-    this.DrawSlice(canvas, outline, destRect, style.Scale, PatchStyle.Strentch, new Color(style.Active ? 4294967295 : 4289243304));
-    destRect.inflate(-style.Scale, -style.Scale);
-    this.DrawSlice(canvas, back, destRect, style.Scale, PatchStyle.Strentch, color);
-  }
-  static WithState(color, active, enabled) {
-    const c = enabled ? color.clone() : new Color(4286874756);
-    c.alpha = active ? 192 : 91;
-    return c;
-  }
-};
-export {
-  AssetManager,
-  Color,
-  Extensions,
-  IconStyle,
-  Paint,
-  Point,
-  Rect,
-  SliceInfo
-};
diff --git a/script/View.js b/script/View.js
index 57d27c6..52c6413 100644
--- a/script/View.js
+++ b/script/View.js
@@ -213,7 +213,22 @@ var Color = class _Color {
     return new _Color(this.argb);
   }
   static FromRgba(r, g, b, a) {
-    return new _Color(a, r, g, b);
+    if (typeof r === "string" && g === void 0 && b === void 0 && a === void 0) {
+      r = r.trim();
+      if (r[0] === "#") r = r.slice(1);
+      if (r.length === 8) {
+        return new _Color(r.slice(6, 8) + r.slice(0, 6));
+      } else if (r.length === 6) return new _Color(r);
+      else if (r.length === 4) {
+        return new _Color(r[3] + r[3] + r.slice(0, 3).split("").map((i) => i + i).join(""));
+      } else if (r.length === 3) {
+        return new _Color("FF" + r.split("").map((i) => i + i).join(""));
+      } else return new _Color();
+    } else if (typeof r === "number" && typeof g === "number" && typeof b === "number" && typeof a === "number") {
+      return new _Color(a, r, g, b);
+    } else {
+      return new _Color();
+    }
   }
   toRgbaString() {
     return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a / 255})`;
@@ -263,7 +278,7 @@ var SliceInfo = class {
 };
 var assetFilePath = "assets.png";
 var slicesFilePath = "assets.bin";
-var directoryPath = "./script";
+var directoryPath = "./rdviewAssets";
 async function loadAssetFile() {
   const pngPath = directoryPath + "/" + assetFilePath;
   return await new Promise((resolve, reject) => {
@@ -351,6 +366,36 @@ var Tab = /* @__PURE__ */ function(Tab2) {
   Tab2["Unknown"] = "unknown";
   return Tab2;
 }({});
+var SayReadyGetSetGoWords = /* @__PURE__ */ function(SayReadyGetSetGoWords2) {
+  SayReadyGetSetGoWords2["SayReaDyGetSetGoNew"] = "SayReaDyGetSetGoNew";
+  SayReadyGetSetGoWords2["SayReaDyGetSetOne"] = "SayReaDyGetSetOne";
+  SayReadyGetSetGoWords2["SayGetSetGo"] = "SayGetSetGo";
+  SayReadyGetSetGoWords2["SayGetSetOne"] = "SayGetSetOne";
+  SayReadyGetSetGoWords2["JustSayRea"] = "JustSayRea";
+  SayReadyGetSetGoWords2["JustSayDy"] = "JustSayDy";
+  SayReadyGetSetGoWords2["JustSayGet"] = "JustSayGet";
+  SayReadyGetSetGoWords2["JustSaySet"] = "JustSaySet";
+  SayReadyGetSetGoWords2["JustSayAnd"] = "JustSayAnd";
+  SayReadyGetSetGoWords2["JustSayGo"] = "JustSayGo";
+  SayReadyGetSetGoWords2["JustSayStop"] = "JustSayStop";
+  SayReadyGetSetGoWords2["JustSayAndStop"] = "JustSayAndStop";
+  SayReadyGetSetGoWords2["SaySwitch"] = "SaySwitch";
+  SayReadyGetSetGoWords2["SayWatch"] = "SayWatch";
+  SayReadyGetSetGoWords2["SayListen"] = "SayListen";
+  SayReadyGetSetGoWords2["Count1"] = "Count1";
+  SayReadyGetSetGoWords2["Count2"] = "Count2";
+  SayReadyGetSetGoWords2["Count3"] = "Count3";
+  SayReadyGetSetGoWords2["Count4"] = "Count4";
+  SayReadyGetSetGoWords2["Count5"] = "Count5";
+  SayReadyGetSetGoWords2["Count6"] = "Count6";
+  SayReadyGetSetGoWords2["Count7"] = "Count7";
+  SayReadyGetSetGoWords2["Count8"] = "Count8";
+  SayReadyGetSetGoWords2["Count9"] = "Count9";
+  SayReadyGetSetGoWords2["Count10"] = "Count10";
+  SayReadyGetSetGoWords2["SayReadyGetSetGo"] = "SayReadyGetSetGo";
+  SayReadyGetSetGoWords2["JustSayReady"] = "JustSayReady";
+  return SayReadyGetSetGoWords2;
+}({});
 var EventType = /* @__PURE__ */ function(EventType2) {
   EventType2["AddClassicBeat"] = "AddClassicBeat";
   EventType2["AddFreeTimeBeat"] = "AddFreeTimeBeat";
@@ -455,9 +500,7 @@ var EventInfo = class {
   constructor(tab, enumAttriblte, durationKey) {
     this.defaultTab = tab;
     this.attr = enumAttriblte ?? EventAttriblte.None;
-    if (durationKey !== void 0) {
-      this.durationKey = durationKey;
-    }
+    this.durationKey = durationKey ?? "duration";
   }
 };
 var WordInfo = class {
@@ -501,20 +544,20 @@ var EventInfos = {
   AddClassicBeat: new EventInfo(Tab.Rows),
   AddFreeTimeBeat: new EventInfo(Tab.Rows),
   AddOneshotBeat: new EventInfo(Tab.Rows),
-  AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
   BassDrop: new EventInfo(Tab.Actions),
   Blend: new EventInfo(Tab.Decorations),
   CallCustomMethod: new EventInfo(Tab.Actions),
   ChangeCharacter: new EventInfo(Tab.Actions),
   ChangePlayersRows: new EventInfo(Tab.Actions),
   Comment: new EventInfo(Tab.Unknown),
-  CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  DesktopColor: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
-  FadeRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
+  CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
+  DesktopColor: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent, "duration"),
+  FadeRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
   FinishLevel: new EventInfo(Tab.Actions),
   Flash: new EventInfo(Tab.Actions),
   FlipScreen: new EventInfo(Tab.Actions),
-  FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   ForwardDecorationEvent: new EventInfo(Tab.Decorations),
   ForwardEvent: new EventInfo(Tab.Unknown),
   ForwardRowEvent: new EventInfo(Tab.Rows),
@@ -523,13 +566,13 @@ var EventInfos = {
   InvertColors: new EventInfo(Tab.Actions),
   MacroEvent: new EventInfo(Tab.Unknown),
   MaskRoom: new EventInfo(Tab.Rooms),
-  Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  MoveRow: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
+  MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
+  MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
+  MoveRow: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
   NarrateRowInfo: new EventInfo(Tab.Sounds),
-  NewWindowDance: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  PaintHands: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  NewWindowDance: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
+  PaintHands: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   PlayAnimation: new EventInfo(Tab.Decorations),
   PlayExpression: new EventInfo(Tab.Actions),
   PlaySong: new EventInfo(Tab.Sounds),
@@ -543,13 +586,13 @@ var EventInfos = {
   ReorderSprite: new EventInfo(Tab.Decorations),
   ReorderWindows: new EventInfo(Tab.Windows),
   SayReadyGetSetGo: new EventInfo(Tab.Sounds),
-  SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   SetBeatSound: new EventInfo(Tab.Sounds),
   SetBeatsPerMinute: new EventInfo(Tab.Sounds),
   SetClapSounds: new EventInfo(Tab.Sounds),
   SetCountingSound: new EventInfo(Tab.Sounds),
   SetCrotchetsPerBar: new EventInfo(Tab.Sounds),
-  SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   SetGameSound: new EventInfo(Tab.Sounds),
   SetHandOwner: new EventInfo(Tab.Actions),
   SetHeartExplodeInterval: new EventInfo(Tab.Sounds),
@@ -558,28 +601,28 @@ var EventInfos = {
   SetOneshotWave: new EventInfo(Tab.Rows),
   SetPlayStyle: new EventInfo(Tab.Actions),
   SetRoomContentMode: new EventInfo(Tab.Rooms),
-  SetRoomPerspective: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
+  SetRoomPerspective: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
   SetRowXs: new EventInfo(Tab.Rows),
-  SetSpeed: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetTheme: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  SetVFXPreset: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  SetSpeed: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
+  SetTheme: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
+  SetVFXPreset: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   SetVisible: new EventInfo(Tab.Decorations),
-  SetWindowContent: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
-  ShakeScreen: new EventInfo(Tab.Actions),
-  ShakeScreenCustom: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  SetWindowContent: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent, "duration"),
+  ShakeScreen: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent),
+  ShakeScreenCustom: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
   ShowDialogue: new EventInfo(Tab.Actions),
   ShowHands: new EventInfo(Tab.Actions),
-  ShowRooms: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
-  ShowStatusSign: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  ShowRooms: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
+  ShowStatusSign: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
   ShowSubdivisionsRows: new EventInfo(Tab.Actions),
-  SpinningRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
+  SpinningRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
   Stutter: new EventInfo(Tab.Actions),
   TagAction: new EventInfo(Tab.Actions),
   TextExplosion: new EventInfo(Tab.Actions),
-  Tile: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  Tint: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
-  TintRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
-  WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent)
+  Tile: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
+  Tint: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
+  TintRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
+  WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration")
 };
 
 // View.ts
@@ -600,8 +643,8 @@ function createLayer(key, bound, color, style) {
   const layer = document.createElement("div");
   const info = slices.get(key);
   layer.style.position = "absolute";
-    layer.style.boxSizing = "content-box";
-  if (info.isNinePatch) {
+  layer.style.boxSizing = "content-box";
+  if (info?.isNinePatch) {
     const center = info.center;
     const width = bound?.width ?? info.bounds.width;
     const height = bound?.height ?? info.bounds.height;
@@ -617,12 +660,25 @@ function createLayer(key, bound, color, style) {
     layer.style.width = `${(width - center.left - (info.bounds.width - center.right)) * style.scale}px`;
     layer.style.height = `${(height - center.top - (info.bounds.height - center.bottom)) * style.scale}px`;
   } else {
-    layer.style.left = `${((bound?.left ?? bound?.x ?? 0) - info.pivot.x) * style.scale}px`;
-    layer.style.top = `${((bound?.top ?? bound?.y ?? 0) - info.pivot.y) * style.scale}px`;
-    layer.style.width = `${(bound?.width ?? info.bounds.width) * style.scale}px`;
-    layer.style.height = `${(bound?.height ?? info.bounds.height) * style.scale}px`;
-    layer.style.backgroundImage = `url(${info.blobUrl})`;
-    layer.style.backgroundSize = `${bound?.width ?? info.bounds.width * style.scale}px ${bound?.height ?? info.bounds.height * style.scale}px`;
+    if (bound instanceof Rect) {
+      layer.style.left = `${(bound.left - (info?.pivot.x ?? 0)) * style.scale}px`;
+      layer.style.top = `${(bound.top - (info?.pivot.y ?? 0)) * style.scale}px`;
+      layer.style.width = `${(bound.width ?? info?.bounds.width ?? 0) * style.scale}px`;
+      layer.style.height = `${(bound.height ?? info?.bounds.height ?? 0) * style.scale}px`;
+      if (info) {
+        layer.style.backgroundImage = `url(${info.blobUrl})`;
+      }
+      layer.style.backgroundSize = `${(bound.width ?? info?.bounds.width ?? 0) * style.scale}px ${(bound.height ?? info?.bounds.height ?? 0) * style.scale}px`;
+    } else {
+      layer.style.left = `${((bound?.x ?? 0) - (info?.pivot.x ?? 0)) * style.scale}px`;
+      layer.style.top = `${((bound?.y ?? 0) - (info?.pivot.y ?? 0)) * style.scale}px`;
+      layer.style.width = `${(info?.bounds.width ?? 0) * style.scale}px`;
+      layer.style.height = `${(info?.bounds.height ?? 0) * style.scale}px`;
+      if (info) {
+        layer.style.backgroundImage = `url(${info.blobUrl})`;
+      }
+      layer.style.backgroundSize = `${(info?.bounds.width ?? 0) * style.scale}px ${(info?.bounds.height ?? 0) * style.scale}px`;
+    }
   }
   if (color && Color.White.equals(color) === false) {
     const filterId = getColorMatrixId(color);
@@ -663,7 +719,22 @@ function getColorMatrixId(rgba) {
   colorMatrixIds.set(rgba.toUint32(), filter.getAttribute("id"));
   return filter.getAttribute("id");
 }
-function createRDFontLayer(text, style) {
+function measureRDFontText(text) {
+  let len = 0;
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charAt(i);
+    if (char === "\n") {
+      len = 0;
+    } else {
+      const charCode = char.charCodeAt(0);
+      const charKey = `char_${charCode.toString(16).padStart(4, "0")}`;
+      const charInfo = slices.get(charKey);
+      len += charInfo?.bounds.width ?? 0;
+    }
+  }
+  return len;
+}
+function createRDFontLayer(text, style, color) {
   const lineHead = new Point(0, -charHeight);
   const start = lineHead.clone();
   const layer = document.createElement("div");
@@ -677,9 +748,11 @@ function createRDFontLayer(text, style) {
       const charCode = char.charCodeAt(0);
       const charKey = `char_${charCode.toString(16).padStart(4, "0")}`;
       const charInfo = slices.get(charKey);
-      const charLayer = createLayer(charKey, new Point(start.x, start.y), null, style);
-      start.x += (charInfo?.bounds.width ?? charHeight) * style.scale;
-      layer.appendChild(charLayer);
+      if (charInfo) {
+        const charLayer = createLayer(charKey, new Point(start.x, start.y), color, style);
+        start.x += charInfo.bounds.width * style.scale;
+        layer.appendChild(charLayer);
+      }
     }
   }
   return layer;
@@ -719,6 +792,7 @@ function colorOf(tab) {
   }
 }
 function layerHoverInit(layer) {
+  layer.style.opacity = "0";
   layer.onStateChange = (style) => {
     if (style.hover) {
       layer.style.opacity = "1.0";
@@ -727,15 +801,46 @@ function layerHoverInit(layer) {
     }
   };
 }
+function createHintLayer(hint, width, color) {
+  const hintLayer = document.createElement("div");
+  hintLayer.style.position = "absolute";
+  hintLayer.style.left = `${width}px`;
+  hintLayer.style.width = `max-content`;
+  hintLayer.innerHTML = hint;
+  hintLayer.style.fontSize = `${18}px`;
+  hintLayer.style.fontFamily = "d9, Arial, sans-serif";
+  hintLayer.style.color = color.toRgbaString();
+  hintLayer.style.fontWeight = "bold";
+  hintLayer.style.textShadow = `
+    2px 2px 0 black,
+    2px 0px 0 black,
+    2px -2px 0 black,
+    0px -2px 0 black,
+    -2px -2px 0 black,
+    -2px 0px 0 black,
+    -2px 2px 0 black,
+    0px 2px 0 black
+    `;
+  hintLayer.style.pointerEvents = "none";
+  hintLayer.style.opacity = "0";
+  hintLayer.style.zIndex = "10";
+  hintLayer.onStateChange = (style) => {
+    if (style.hover) {
+      hintLayer.style.opacity = "1.0";
+    } else {
+      hintLayer.style.opacity = "0";
+    }
+  };
+  return hintLayer;
+}
 function createElementEvent(obj, style) {
   style = {
     ...new IconStyle(),
     ...style
   };
-  const evttype = obj.type;
+  const evttype = obj.type ?? EventType.ForwardEvent;
   let key0 = `event_${obj.type}`;
   if (!slices.has(key0)) {
-    console.warn(`Slice for event type ${evttype} not found, using Unknown.`);
     if (!slices.has("event_Unknown")) {
       return null;
     }
@@ -759,9 +864,13 @@ function createElementEvent(obj, style) {
   const beatline = "event_beat_line";
   const evtag = "event_tag";
   const evbarea = "event_beat_area";
+  const evbskip = "event_beat_skip";
   const beatColor = new Color(4284539717);
   const element = document.createElement("div");
   const internalLayers = [];
+  if (evttype === EventType.NewWindowDance) {
+    obj.tab = obj.customTab ?? Tab.Windows;
+  }
   function addLayers(layers) {
     for (const layer of layers) {
       if (layer) {
@@ -811,19 +920,22 @@ function createElementEvent(obj, style) {
         const loop = obj.loops ?? 0;
         const subdiv = obj.subdivisions ?? 1;
         const hold = obj.hold ?? false;
+        const skip = obj.skipshot ?? false;
         const mode = obj.freezeBurnMode ?? null;
         const delay = obj.freezeBurnMode === "Freezeshot" ? obj.delay ?? 0 : 0;
         const subdivWidth = iconSize * (subdiv - 1) / subdiv * tick;
         const eventWidth = iconSize * (interval * loop + tick + delay);
         const off = interval - tick;
         const backLayers2 = createBackLayer(new Size(eventWidth, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style);
-        const holdWidth = iconSize * (interval - tick - delay);
+        const holdWidth = hold ? iconSize * (interval - tick - delay) : 0;
         const holdLayer = hold && holdWidth - subdivWidth > 0 ? createLayer(evbarea, new Rect(eventWidth + subdivWidth, 0, holdWidth - subdivWidth, iconSize), new Color(style.enabled ? 4291839731 : 4285493103), style) : null;
         const subdivLayer = subdiv > 1 ? createLayer(evbarea, new Rect(eventWidth, 0, subdivWidth, iconSize), new Color(style.enabled ? 4279480353 : 4285493103), style) : null;
-        const skipshotLayer = obj.skipshot ?? false ? createLayer(evbarea, new Rect(eventWidth + Math.max(subdivWidth, holdWidth), 0, iconSize * interval - Math.max(subdivWidth, holdWidth), iconSize), new Color(style.enabled ? 4291115835 : 4285493103), style) : null;
+        const skipshotLayer = skip ? createLayer(evbarea, new Rect(eventWidth + Math.max(subdivWidth, holdWidth), 0, iconSize * (interval - delay) - Math.max(subdivWidth, holdWidth), iconSize), new Color(style.enabled ? 4291115835 : 4285493103), style) : null;
+        const skipHitLayer = skip ? createLayer(evbskip, new Point(eventWidth + iconSize * (interval - delay) - 1, 0), null, style) : null;
         if (holdLayer) holdLayer.style.pointerEvents = "none";
         if (subdivLayer) subdivLayer.style.pointerEvents = "none";
         if (skipshotLayer) skipshotLayer.style.pointerEvents = "none";
+        if (skipHitLayer) skipHitLayer.style.pointerEvents = "none";
         const pulses = [];
         const crossLayers = [];
         const posx = -off * iconSize;
@@ -853,6 +965,7 @@ function createElementEvent(obj, style) {
         }
         const loopLayer = createLayer("event_beat_loop", new Point(eventWidth, 0), null, style);
         loopLayer.style.opacity = "0";
+        loopLayer.style.zIndex = "5";
         loopLayer.onStateChange = (style2) => {
           if (style2.hover) {
             loopLayer.style.opacity = "1.0";
@@ -865,12 +978,33 @@ function createElementEvent(obj, style) {
           holdLayer,
           subdivLayer,
           skipshotLayer,
+          skipHitLayer,
           ...pulses,
           loopLayer,
           ...crossLayers
         ]);
       }
       break;
+    case EventType.AddFreeTimeBeat:
+      {
+        const hold = obj.hold ?? 0;
+        const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null;
+        if (holdLayer) {
+          holdLayer.style.pointerEvents = "none";
+        }
+        const backLayers2 = createBackLayer(new Size(info.bounds.width, iconSize), beatColor, style);
+        const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null;
+        const textLayer = createRDFontLayer(((obj.pulse ?? 0) + 1).toString(), style, null);
+        textLayer.style.left = `${1.5 * style.scale}px`;
+        textLayer.style.top = `${10 * style.scale}px`;
+        addLayers([
+          holdLayer,
+          ...backLayers2,
+          hitLayer,
+          textLayer
+        ]);
+      }
+      break;
     case EventType.Comment:
       {
         const backLayers2 = createBackLayer(info.bounds.size, new Color(obj.color ?? "7d7d7d"), style);
@@ -881,38 +1015,16 @@ function createElementEvent(obj, style) {
         ]);
       }
       break;
-    case EventType.AddFreeTimeBeat:
-      {
-        const hold = obj.hold ?? 0;
-        const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null;
-        if (holdLayer) {
-          holdLayer.style.pointerEvents = "none";
-        }
-        const backLayers2 = createBackLayer(new Size(info.bounds.width, iconSize), beatColor, style);
-        const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null;
-        const textLayer = createRDFontLayer(((obj.pulse ?? 0) + 1).toString(), style);
-        textLayer.style.left = `${1.5 * style.scale}px`;
-        textLayer.style.top = `${10 * style.scale}px`;
-        addLayers([
-          holdLayer,
-          ...backLayers2,
-          hitLayer,
-          textLayer
-        ]);
-      }
-      break;
     case EventType.DesktopColor:
       {
-        const duration = obj.duration ?? 0;
-        const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height * 4), colorOf(obj.tab ?? evinfo.defaultTab), style);
-        const iconLayer = createLayer(`${key}_0`, new Point(0, info.bounds.height), null, style);
-        const iconColorLayer = createLayer(key, new Point(0, info.bounds.height), null, style);
-        const durationLayer = obj.duration > 1 ? createLayer(evbarea, new Rect(iconSize, 0, (duration - 1) * iconSize, info.bounds.height * 4), new Color(4283471790), style) : null;
+        const backLayers2 = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
+        console.log(info.bounds.size);
+        const iconColorLayer = createLayer(`${key}_0`, new Point(0, iconSize), new Color(obj.endColor ?? "ffffff"), style);
+        const iconLayer = createLayer(`${key}_1`, new Point(0, iconSize), null, style);
         addLayers([
           ...backLayers2,
-          durationLayer,
-          iconLayer,
-          iconColorLayer
+          iconColorLayer,
+          iconLayer
         ]);
       }
       break;
@@ -940,7 +1052,7 @@ function createElementEvent(obj, style) {
             text = "x";
             break;
         }
-        const textLayer = createRDFontLayer(text, style);
+        const textLayer = createRDFontLayer(text, style, null);
         textLayer.style.left = `${1.5 * style.scale}px`;
         textLayer.style.top = `${10 * style.scale}px`;
         addLayers([
@@ -974,41 +1086,315 @@ function createElementEvent(obj, style) {
         ]);
       }
       break;
+    case EventType.SayReadyGetSetGo:
+      {
+        const wordInfo = WordInfos[obj.phraseToSay ?? SayReadyGetSetGoWords.JustSayGo];
+        const len = wordInfo.length * (obj.tick ?? 0) + 1;
+        const stringToJoin = wordInfo.phrase.split(" ");
+        const stringToDraw = [
+          stringToJoin[0]
+        ];
+        let lw = measureRDFontText(stringToJoin[0]);
+        const sw = measureRDFontText(" ");
+        const backLayers2 = createBackLayer(new Size(len * iconSize, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style);
+        const wordLayers = [];
+        for (let i = 1; i < stringToJoin.length; i++) {
+          const part = stringToJoin[i];
+          const w = measureRDFontText(part);
+          if (lw + sw + w > len * iconSize * style.scale) {
+            lw = w;
+            stringToDraw.push(part);
+          } else {
+            lw += sw + w;
+            stringToDraw[stringToDraw.length - 1] += " " + part;
+          }
+        }
+        const c = Math.min(stringToDraw.length, 3);
+        let top = iconSize / 2 - charHeight * c / 4 + 1;
+        for (let i = 0; i < c; i++) {
+          const line = stringToDraw[i];
+          const p = new Point((len * iconSize - measureRDFontText(line) / 2) / 2, top + (i * charHeight + lineHeight) / 2);
+          const wordLayer = createRDFontLayer(line, {
+            ...style,
+            scale: style.scale / 2
+          }, null);
+          wordLayer.style.left = `${p.x * style.scale}px`;
+          wordLayer.style.top = `${p.y * style.scale}px`;
+          wordLayers.push(wordLayer);
+        }
+        addLayers([
+          ...backLayers2,
+          ...wordLayers
+        ]);
+      }
+      break;
+    case EventType.SetRowXs:
+      {
+        const syncoBeat = obj.syncoBeat ?? -1;
+        const width = info.bounds.width / 6;
+        const iconBounds = slices.get(beatx).bounds;
+        const s = width / iconBounds.width;
+        let left = 0;
+        const top = iconSize / 2 - iconBounds.height * s / 2;
+        const patternLayers = [];
+        const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height), colorOf(obj.tab ?? evinfo.defaultTab), style);
+        for (let p of obj.pattern) {
+          const beatxLayer = createLayer(p === "x" ? beatx : beatline, new Rect(left, top, width, iconBounds.height * s), null, style);
+          patternLayers.push(beatxLayer);
+          left += width;
+        }
+        const syncoBeatLayer = syncoBeat >= 0 ? createLayer(beatsynco, new Rect(width * syncoBeat, top, width, iconBounds.height * s), null, style) : null;
+        addLayers([
+          ...backLayers2,
+          ...patternLayers,
+          syncoBeatLayer
+        ]);
+      }
+      break;
+    case EventType.ShowRooms:
+      {
+        const backLayers2 = createBackLayer(new Size(iconSize, iconSize * 4), colorOf(obj.tab ?? evinfo.defaultTab), style);
+        const roomLayers = [];
+        for (let i = 0; i < 4; i++) {
+          const roomLayer = createLayer(`${key}_${obj.rooms.indexOf(i) >= 0 ? "1" : "0"}`, new Point(0, i * iconSize * style.scale), null, {
+            ...style,
+            scale: style.scale / 2
+          });
+          roomLayers.push(roomLayer);
+        }
+        addLayers([
+          ...backLayers2,
+          ...roomLayers
+        ]);
+      }
+      break;
     default:
       const backLayers = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
       addLayers(backLayers);
       switch (evttype) {
         case EventType.CustomFlash:
+          const iconLayer = createLayer(key, null, null, style);
+          const startColorLayer = createLayer(`${key}_0`, null, new Color(obj.startColor ?? "000000").withAlpha((obj.startOpacity ?? 0) * 255), style);
+          const endColorLayer = createLayer(`${key}_1`, null, new Color(obj.endColor ?? "000000").withAlpha((obj.endOpacity ?? 0) * 255), style);
           addLayers([
-            createLayer(`${key}_0`, null, new Color(obj.startColor ?? "000000"), style),
-            createLayer(`${key}_1`, null, new Color(obj.endColor ?? "000000"), style)
+            iconLayer,
+            startColorLayer,
+            endColorLayer
           ]);
           break;
         case EventType.FlipScreen:
-          const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 1 : 0);
-          if (flip === 0) {
+          {
+            const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 2 : 0);
+            const iconLayer2 = createLayer(flip === 0 ? `${key}_0` : `${key}_${flip - 1}`, null, null, style);
             addLayers([
-              createLayer(key, null, null, style)
-            ]);
-          } else {
-            addLayers([
-              createLayer(`${key}_${flip - 1}`, null, null, style)
+              iconLayer2
             ]);
           }
+          break;
+        case EventType.FloatingText:
+          {
+            const backColorLayer = createLayer(`${key}_0`, null, Color.FromRgba(obj.color ?? "FFFFFFFF"), style);
+            const foreColorLayer = createLayer(`${key}_1`, null, Color.FromRgba(obj.outlineColor ?? "FFFFFFFF"), style);
+            addLayers([
+              backColorLayer,
+              foreColorLayer
+            ]);
+          }
+          break;
+        case EventType.MoveRoom:
+          {
+            const degree = obj.angle ?? 0;
+            const radius = -degree * Math.PI / 180;
+            let width = (obj.scale ? obj.scale[0] ?? 0 : 100) / 100;
+            let height = (obj.scale ? obj.scale[1] ?? 0 : 100) / 100;
+            const pleft = (obj.pivot ? obj.pivot[0] ?? 0 : 50) / 100;
+            const ptop = (obj.pivot ? obj.pivot[1] ?? 0 : 50) / 100;
+            if (width === 0 || height === 0) break;
+            const uniform = Math.sqrt(width * width + height * height);
+            width /= uniform;
+            height /= uniform;
+            const roomLayer = createLayer(key, new Rect(iconSize / 2, iconSize / 2, iconSize * width, iconSize * height), null, style);
+            let pivotx = width * (1 - pleft * 2);
+            let pivoty = height * (1 - ptop * 2);
+            const widthrotated = pivotx * Math.cos(radius) + pivoty * Math.sin(radius);
+            const heightrotated = -pivotx * Math.sin(radius) + pivoty * Math.cos(radius);
+            const pointLayer = document.createElement("div");
+            pointLayer.style.position = "absolute";
+            pointLayer.style.width = `${style.scale}px`;
+            pointLayer.style.height = `${style.scale}px`;
+            pointLayer.style.left = `${iconSize * (1 - widthrotated) * style.scale / 2}px`;
+            pointLayer.style.top = `${iconSize * (1 + heightrotated) * style.scale / 2}px`;
+            pointLayer.style.backgroundColor = "#FF0000";
+            roomLayer.style.transform = `translate(-50%, -50%) rotate(${-degree}deg)`;
+            addLayers([
+              roomLayer,
+              pointLayer
+            ]);
+          }
+          break;
+        case EventType.PaintHands:
+        case EventType.Tint:
+        case EventType.TintRows:
+          {
+            const border = obj.border;
+            const backColorLayer = createLayer(key, null, Color.FromRgba(obj.tintColor ?? "FFFFFFFF"), style);
+            const foreColorLayer = border ? createLayer(border === "Outline" ? `${key}_0` : border === "Glow" ? `${key}_1` : "", null, Color.FromRgba(obj.borderColor ?? "FFFFFFFF"), style) : null;
+            addLayers([
+              backColorLayer,
+              foreColorLayer
+            ]);
+          }
+          break;
+        case EventType.SetBackgroundColor:
+          {
+            const backType = obj.backgroundType ?? "Color";
+            const iconLayer2 = createLayer(key, null, null, style);
+            const images = obj.image ?? [];
+            const imagePath = images.length > 0 ? images[0] : "";
+            const contentInfo = slices.get(`${key}_1`);
+            const colorLayer = createLayer(`${key}_0`, null, Color.FromRgba((backType === "Color" ? obj.color : null) ?? "FFFFFF"), style);
+            const contentLayer = backType === "Image" ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style) : null;
+            if (backType === "Image" && contentLayer) {
+              contentLayer.style.backgroundImage = `url(${imagePath})`;
+              contentLayer.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`;
+              contentLayer.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`;
+            }
+            addLayers([
+              iconLayer2,
+              colorLayer,
+              contentLayer
+            ]);
+          }
+          break;
+        case EventType.SetCrotchetsPerBar:
+          {
+            const cpb = obj.crotchetsPerBar ?? 0;
+            const iconLayer2 = createLayer(key, null, null, style);
+            const cpbLayer = createRDFontLayer(cpb > 9 ? "-" : cpb.toString(), style, Color.Black);
+            const bLayer = createRDFontLayer("4", style, Color.Black);
+            cpbLayer.style.left = `${2 * style.scale}px`;
+            cpbLayer.style.top = `${9 * style.scale}px`;
+            bLayer.style.left = `${8 * style.scale}px`;
+            bLayer.style.top = `${14 * style.scale}px`;
+            addLayers([
+              iconLayer2,
+              cpbLayer,
+              bLayer
+            ]);
+          }
+          break;
+        case EventType.SetForeground:
+          {
+            const iconLayer2 = createLayer(key, null, null, style);
+            const images = obj.image ?? [];
+            const imagePath = images.length > 0 ? images[0] : "";
+            const contentInfo = slices.get(`${key}_1`);
+            const colorLayer = imagePath ? createLayer(`${key}_0`, null, Color.Black, style) : null;
+            const contentLayer = imagePath ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style) : null;
+            if (contentLayer) {
+              contentLayer.style.backgroundImage = `url(${imagePath})`;
+              contentLayer.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`;
+              contentLayer.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`;
+            }
+            addLayers([
+              iconLayer2,
+              colorLayer,
+              contentLayer
+            ]);
+          }
+          break;
         default:
-          const layer = document.createElement("div");
-          layer.style.position = "absolute";
-          layer.style.left = "0";
-          layer.style.top = "0";
-          layer.style.width = `${info.bounds.width * style.scale}px`;
-          layer.style.height = `${info.bounds.height * style.scale}px`;
-          layer.style.backgroundSize = `${info.bounds.width * style.scale}px ${info.bounds.height * style.scale}px`;
-          layer.style.backgroundImage = `url(${info.blobUrl})`;
-          element.appendChild(layer);
+          const layer = createLayer(key, null, null, style);
+          addLayers([
+            layer
+          ]);
           break;
       }
       break;
   }
+  if (evinfo.isDurationEvent) {
+    const duration = obj[evinfo.durationKey] ?? 0;
+    const durWidth = iconSize * duration;
+    const durationLayer = durWidth > info.bounds.width ? createLayer(evbarea, new Rect(info.bounds.width, 0, durWidth - info.bounds.width, info.bounds.height), colorOf(obj.tab ?? evinfo.defaultTab), style) : null;
+    if (durationLayer) {
+      durationLayer.style.pointerEvents = "none";
+      layerHoverInit(durationLayer);
+    }
+    addLayers([
+      durationLayer
+    ]);
+  }
+  const rooms = obj.rooms ?? [];
+  const roomEnabled = new Color(4292392977);
+  const roomDisabled = new Color(4284177243);
+  if (evinfo.isRoomEvent) {
+    const roomLayers = [];
+    for (let i = 0; i < 4; i++) {
+      const roomLayer = createLayer(`room_${i}`, new Point(iconSize, 0), rooms.indexOf(i) > -1 ? roomEnabled : roomDisabled, style);
+      if (roomLayer) {
+        layerHoverInit(roomLayer);
+      }
+      roomLayers.push(roomLayer);
+    }
+    const roomTopLayer = rooms.indexOf(4) > -1 ? createLayer(`room_top`, new Point(iconSize, 0), roomEnabled, style) : null;
+    if (roomTopLayer) {
+      layerHoverInit(roomTopLayer);
+    }
+    roomLayers.push(roomTopLayer);
+    addLayers(roomLayers);
+  }
+  const condition = obj.if ?? "";
+  if (condition.length > 0) {
+    const positive = /(?<!~)\d(?!$)/g.test(condition);
+    const negative = /~\d(?!$)/g.test(condition);
+    const conditionLayer = createLayer(evtag, null, positive ? negative ? new Color(4294967040) : new Color(4278255615) : negative ? new Color(4294901760) : null, style);
+    addLayers([
+      conditionLayer
+    ]);
+  }
+  const tagLayer = obj.tag ? createLayer(`${evtag}_0`, new Point(0, info.bounds.height), new Color(4294952838), style) : null;
+  addLayers([
+    tagLayer
+  ]);
+  switch (evttype) {
+    case EventType.Comment:
+      addLayers([
+        createHintLayer(obj.text ?? "", info.bounds.width * style.scale, new Color(obj.color ?? "7d7d7d"))
+      ]);
+      break;
+    case EventType.FloatingText:
+    case EventType.AdvanceText:
+    case EventType.ShowStatusSign:
+    case EventType.TextExplosion:
+    case EventType.ShowDialogue:
+    case EventType.ReadNarration:
+    case EventType.RenameWindow:
+      addLayers([
+        createHintLayer(obj.text ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
+      ]);
+      break;
+    case EventType.PlaySong:
+      addLayers([
+        createHintLayer(obj.song?.filename ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
+      ]);
+      break;
+    case EventType.CallCustomMethod:
+      addLayers([
+        createHintLayer(obj.methodName ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
+      ]);
+      break;
+    case EventType.TagAction:
+      addLayers([
+        createHintLayer(obj.Tag ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
+      ]);
+      break;
+    case EventType.PlayAnimation:
+    case EventType.PlayExpression:
+      addLayers([
+        createHintLayer(obj.expression ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
+      ]);
+      break;
+  }
   element.onStateChange = (style2) => {
     style2 = {
       ...style2
diff --git a/script/assets.bin b/script/assets.bin
deleted file mode 100644
index 92ef7480c903dbd28478251478cce7f84cf1ab7a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4299
zcmZ`-&2Jk;6kn4zw1K##q?Aw>)B>e-6xj8*`4CB*E-fMu#cqQ*u$tYS*h|(k%kDZ(
z5waq2podh-v5Gi?$gQ{BI6+%Z`3rih5aP@~z?<E%=Y^)1Xn*g$dEam5#ebcOiEVif
zXI8{}%#8;2{mkTu7V>^H;P*49M-<}39%s?u`}>*fh!}F-jqbw9sS(Mg4i8Bpd-srn
zzQ<h9dKVNZtv$BRc%S_QDozMxR?LH0&zbvrJV6EBTbSeNcTs%%>9--iTj{qhzE{uC
z4a#Dx8F-9&ti1x3{-_;fUY2AUFA<NeCNBJuKgdY&70O7LN^<TXGnI-j(r6tVX>gy1
zmi}mJZ|+}t0CV=?!0GhBb<dSr_Ol0>S5o2%<)KT%RC{C<gVwWHg}{6k%LpKfqZR4_
z1R^~?Y%9oTpFhl45rwjfHn?yUqhNyrM==Z=%pb+jZ7?pg+vr6x@0vb|I+nf-2V_>3
zh!gT_qAoeGD>G>FuunoaA!mV{OOqwZi=*yI1Zv>c*+T+Q*o2c;8Eeuw&2fXXSQrBj
zq_LE~LL=`xng#Mis;lMs)CBlK3Kx9JTn(^{M<%lwgkDT*KtGqtH9KUTHl2`CmWI3!
zIgqi+GvHnx4#<psPC^(33d9?1jSnE&kp<$WOqi){?I3d!22uEK8Lxly%hp#TSa{R>
zd&`<k?KgP03o@EY=Ey2k*M_3MDjlV9BjmBup>ecK!vzxNz(zJ@F8kzmle4y_J<goM
zB)A2(A*;h+X}my5a(>BUy_oK)f<wj|J_(xX#R2s5BfHlr3FB*<fzMrfi~GGUZGpQN
zj^y8fki!k)x4=1BFwp!7Ok|?jK13GIB;)|dav+2s;6n@ppRfkNlBoyQ7mP+79<P!O
znuDp7eKha7CRDKHb*WH!Uwbr+c)90C6!Z4AABRZ;b*&EVQVnKaxq8d|ayg_Cjki^4
zK@xhIwnLGe7UWaaWPv#ADLuJaT97zd6FAfiD0O#1k8H|hoVG#ar8IYF$aaA`>@eC-
zdwh{FhiYJMID349HXxHB89+Zu9Z7^K)dU@~8C!HStyl!j*g^qzcz@9&K5zG^tuDtV
zkee}ydr{MCvj7-U`@Fj$oDk~vAgeO8md9do8|R@mqw!;L4WR747HQ8Xk4pemlC9p1
zdoeUe4!o37!t8Yd4^<9=loruI?!s9aIwbR!7kRc%Yj9kpU)+H(4N*YB+6K)&#gzBQ
z611)fMpT`Xk%@2n)CMbxEZq5`&uG|E#+Tuli4#9f)r{gi%mlQGNO28{ER(YYRT6G#
z;LDIiqIE&aL1JYxQmOu~^63WKpds`=yid`d%9?nF#0>=6q?e}e1?i1t8G9;mrpLUf
z^BHuOzYTWe$TvEKwW)9xvLtFY0G@Pffke?_$b)ULCa14Kd_V2VB^r0QI{=n!DWPMY
zdEI0W$V0rc@*<J}xFMCAMEJ|QSrzNebRo!skSwPSQ)&fbHZ}YA`Qg!o+VSEs`@#Hk
zFQy}s&^9mG|7a(j4uO|jFBr#y=iqXcs4yNJQ>Zu*j4M<+9UNDvd=~R6=P{~Y#5!wl
z24m`6{W3=6Dz<0OV&oWD(k)>gtzipm?<4C)UE5TC7LDVZ%6hSI0`rQK7?sXoR6d7M
zC5KV<B1W~#7}aMmBKoGvZqY7a<dim5u8VFBBl;mmYja3vN!PYiRZ7PAmWsAicmbp0
z=`CfURGPxP@-*gEE?`u>h$U;6F{;mCN%9`%*(HpeI+k=l!d}w`mR!4zP+8aRsEEqO
zaf}KR7!^-pRGPY@qAizS#k|S|jH;LJs0@~CS1_+WixDYcop$Ap>ZP(%$6DNvF^?|b
zb89BjS<$r}rKMtw?Wkxgg%cPRCwEjtmC{R?SAGSf%6TkVeFO7qZ(&rwx}!R>LT0cp
z_PbcpDPl>tyrXhfp&ww$wK;^Ux^_=RR5gxcRG7G@BB~a%m{)ok^UCKiuad*4dhwp}
zrCNIjpR3PcNupz9m$9T%zo#-$bw9v7`Y}3J&^2-Qq*rK6+P`TJHMxTTvh?4^A8PUq
zPA*uV^I+OOIsZ1kpJCCDqS>x9_pN*ZhWE2&_d+&lKbjxI;?Zs9@EN$M<x)11UW3)_
zJ9<J~>eyzq?gdl!gW)cah?9_#y!XS_&sfm+7%hQb=>=MvEMpfIp{JikeILluH}zWX
z9VuJbhi6G{UZ&6Cbz^O@?pXRRykJK$j6GmTqiQv<bQ9jnr^$v1(yyhJfGy^K`=X_{
zz^iAojnxnToO>cOdT0%`jMYznoqHmmNwJYxdJR0l1fvGFWgdn*o2BPL>i<L|50aw|
zjQ7P09$AKM|1|a#RX2euT}syr_#47+2{bg-8U)V5y76VCWgicB9^Q*ZEvLnQLvner
WVSUbbovoV_;>QLjS$?MZ741JXRIeHU

diff --git a/script/assets.png b/script/assets.png
deleted file mode 100644
index e4d05383beeade28a733a02a4342c3c46f1dc9e4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6653
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
Hu0mjfFf!)X

diff --git a/script/rdview2.js b/script/rdview2.js
deleted file mode 100644
index a3f2c52..0000000
--- a/script/rdview2.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Extensions, IconStyle } from "/script/Extensions.js";
-function rend() {
-    const codeBlocks = document.querySelectorAll("canvas.rdview2-canvas");
-    codeBlocks.forEach((block) => {
-        // 清理旧的实例
-        if (block.cleanup) {
-            block.cleanup();
-        }
-        
-        const width = block.getAttribute("data-width") || 8;
-        const height = block.getAttribute("data-height") || 4;
-        const scale = block.getAttribute("data-scale") || 2;
-        const data = block.getAttribute("data");
-        const ctx = block.getContext("2d", { alpha: false, desynchronized: true });
-        block.width = width * scale * 14;
-        block.height = height * scale * 14;
-        if (!data) {
-            return;
-        }
-        const jsonData = JSON.parse(`[${JSON.parse(data)}]`);
-        
-        let lastActive = false;
-        let evtId = 0;
-        let frameId = null;
-        let cachedRect = null;
-        let mdown = false;
-        
-        const eventPositions = jsonData.map(evt => ({
-            evt,
-            x: ((evt.beat ?? 1) - 1) * scale * 14,
-            y: (evt.y ?? 0) * scale * 14
-        }));
-        
-        const style = new IconStyle();
-        style.Scale = scale;
-        
-        const updateRect = () => {
-            cachedRect = block.getBoundingClientRect();
-        };
-        updateRect();
-        
-        let rectTimeout;
-        const debouncedUpdateRect = () => {
-            clearTimeout(rectTimeout);
-            rectTimeout = setTimeout(updateRect, 100);
-        };
-        
-        const observer = new ResizeObserver(debouncedUpdateRect);
-        observer.observe(block);
-        
-        window.addEventListener("resize", debouncedUpdateRect, { passive: true });
-        window.addEventListener("scroll", debouncedUpdateRect, { passive: true });
-        
-        block.render = (x, y, active) => {
-            const point = { x, y };
-            let currentEvtId = null;
-            for (let i = 0; i < eventPositions.length; i++) {
-                const { evt } = eventPositions[i];
-                if (evt.area?.contains(point)) {
-                    currentEvtId = i;
-                    break;
-                }
-            }
-            
-            if (currentEvtId === evtId && active === lastActive) {
-                return;
-            }
-            evtId = currentEvtId;
-            lastActive = active;
-            
-            ctx.clearRect(0, 0, block.width, block.height);
-            
-            for (const { evt, x: posX, y: posY } of eventPositions) {
-                const isHovered = evt.area?.contains(point) ?? false;
-                style.Hover = isHovered;
-                style.Active = isHovered ? active : false;
-                evt.area = Extensions.DrawEventIcon(ctx, evt, { x: posX, y: posY }, style);
-            }
-        }
-        
-        const throttledRender = (x, y, active) => {
-            if (frameId !== null) {
-                return;
-            }
-            frameId = requestAnimationFrame(() => {
-                block.render(x, y, active);
-                frameId = null;
-            });
-        }
-        
-        const getMousePos = (e) => ({
-            x: e.clientX - cachedRect.left,
-            y: e.clientY - cachedRect.top
-        });
-        
-        block.addEventListener("mousemove", (e) => {
-            const { x, y } = getMousePos(e);
-            console.log(x, y);
-            throttledRender(x, y, mdown);
-        }, { passive: true });
-        
-        block.addEventListener("mousedown", (e) => {
-            const { x, y } = getMousePos(e);
-            mdown = true;
-            block.render(x, y, mdown);
-        });
-        
-        block.addEventListener("mouseup", (e) => {
-            const { x, y } = getMousePos(e);
-            mdown = false;
-            block.render(x, y, mdown);
-        });
-        
-        block.addEventListener("mouseleave", () => {
-            if (frameId !== null) {
-                cancelAnimationFrame(frameId);
-                frameId = null;
-            }
-            mdown = false;
-            evtId = null;
-            lastActive = false;
-            block.render(-1, -1, mdown);
-        }, { passive: true });
-        
-        block.cleanup = () => {
-            observer.disconnect();
-            window.removeEventListener("resize", debouncedUpdateRect);
-            window.removeEventListener("scroll", debouncedUpdateRect);
-            clearTimeout(rectTimeout);
-            if (frameId !== null) {
-                cancelAnimationFrame(frameId);
-            }
-        };
-        
-        block.render(-1, -1, mdown);
-    });
-}
-
-window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
-    hook.doneEach(function () {
-        rend();
-    });
-});
