From 479da74bfa29d337fc3e7f155f2932366078a5a2 Mon Sep 17 00:00:00 2001
From: OLDREDSTONE <OLDRedstone@users.noreply.github.com>
Date: Wed, 14 Jan 2026 00:43:51 +0800
Subject: [PATCH] =?UTF-8?q?[rdview2]=20=E6=80=A7=E8=83=BD=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        |    4 +-
 script/View.js    | 1027 +++++++++++++++++++++++++++++++++++++++++++++
 script/assets.bin |  Bin 0 -> 4299 bytes
 script/assets.png |  Bin 0 -> 6653 bytes
 script/special.js |   85 ++++
 5 files changed, 1114 insertions(+), 2 deletions(-)
 create mode 100644 script/View.js
 create mode 100644 script/assets.bin
 create mode 100644 script/assets.png
diff --git a/index.html b/index.html
index 5461011..50660a9 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,8 @@
         <link rel="stylesheet" href="/style/special.css">
     </head>
 
-    <body>
-        <div id="app">加载中...</div>
+    <body style="background-color: #1f1f1f;">
+        <div id="app" style="color: white;">加载中...</div>
         <script>
             $docsify = {
                 name: "节奏医生编辑器教程",
diff --git a/script/View.js b/script/View.js
new file mode 100644
index 0000000..ebf2918
--- /dev/null
+++ b/script/View.js
@@ -0,0 +1,1027 @@
+// 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 Size = class {
+  width = 0;
+  height = 0;
+  constructor(width, height) {
+    if (width !== void 0 && height !== void 0) {
+      this.width = width;
+      this.height = height;
+      return;
+    }
+  }
+  clone() {
+    return new Point(this.width, this.height);
+  }
+};
+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 size() {
+    let size = new Size();
+    size.width = this.width;
+    size.height = this.height;
+    return size;
+  }
+  set size(size) {
+    this.width = size.width;
+    this.height = size.height;
+  }
+  get isEmpty() {
+    return this.width <= 0 || this.height <= 0;
+  }
+  constructor(arg0, arg1, arg2, arg3) {
+    if (typeof arg0 === "number" && typeof arg1 === "number") {
+      if (typeof arg2 === "number" && typeof arg3 === "number") {
+        this.left = arg0;
+        this.top = arg1;
+        this.right = arg0 + arg2;
+        this.bottom = arg1 + arg3;
+        return;
+      }
+      this.right = arg0;
+      this.bottom = arg1;
+      return;
+    } else if (arg0 instanceof Point && arg1 instanceof Size) {
+      this.left = arg0.x;
+      this.top = arg0.y;
+      this.right = arg0.x + arg1.width;
+      this.bottom = arg0.y + arg1.height;
+      return;
+    } else if (arg0 instanceof Size) {
+      this.right = arg0.width;
+      this.bottom = arg0.height;
+      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);
+  }
+};
+var Color = class _Color {
+  argb = 0;
+  constructor(a, r, g, b) {
+    if (typeof a === "string") {
+      let s = a;
+      if (s.startsWith("#")) {
+        s = s.substring(1);
+      }
+      s = s.trim();
+      switch (s.length) {
+        case 3:
+          s = "ff" + s.split("").map((c) => c + c).join("");
+          break;
+        case 4:
+          s = s.split("").map((c) => c + c).join("");
+          break;
+        case 6:
+          s = "ff" + s;
+          break;
+        case 8:
+          break;
+        default:
+          s = "ffffffff";
+      }
+      const u = parseInt(s, 16);
+      this.argb = u;
+      return;
+    }
+    if (a !== void 0 && r === void 0 && g === void 0 && b === void 0) {
+      this.argb = a;
+      return;
+    }
+    if (a === void 0 && r !== void 0 && g !== void 0 && b !== void 0) {
+      const u = 255 << 24 | (r & 255) << 16 | (g & 255) << 8 | b & 255;
+      this.argb = u;
+      return;
+    }
+    if (a !== void 0 && r !== void 0 && g !== void 0 && b !== void 0) {
+      const u = a << 24 | (r & 255) << 16 | (g & 255) << 8 | b & 255;
+      this.argb = u;
+      return;
+    }
+    this.argb = 0;
+  }
+  get a() {
+    return this.argb >>> 24 & 255;
+  }
+  set a(value) {
+    const v = value & 255;
+    this.argb = v << 24 | this.argb & 16777215;
+  }
+  get r() {
+    return this.argb >>> 16 & 255;
+  }
+  set r(value) {
+    const v = value & 255;
+    this.argb = this.argb & 4278255615 | v << 16;
+  }
+  get g() {
+    return this.argb >>> 8 & 255;
+  }
+  set g(value) {
+    const v = value & 255;
+    this.argb = this.argb & 4294902015 | v << 8;
+  }
+  get b() {
+    return this.argb & 255;
+  }
+  set b(value) {
+    const v = value & 255;
+    this.argb = this.argb & 4294967040 | v;
+  }
+  toUint32() {
+    return this.argb;
+  }
+  clone() {
+    return new _Color(this.argb);
+  }
+  static FromRgba(r, g, b, a) {
+    return new _Color(a, r, g, b);
+  }
+  toRgbaString() {
+    return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a / 255})`;
+  }
+  toHexString(includeAlpha = true) {
+    if (includeAlpha) {
+      return `#${this.argb.toString(16).padStart(8, "0")}`;
+    } else {
+      const rgb = this.argb & 16777215;
+      return `#${rgb.toString(16).padStart(6, "0")}`;
+    }
+  }
+  equals(other) {
+    return this.argb === other.argb;
+  }
+  static get Transparent() {
+    return new _Color(0, 0, 0, 0);
+  }
+  static get Black() {
+    return new _Color(255, 0, 0, 0);
+  }
+  static get White() {
+    return new _Color(255, 255, 255, 255);
+  }
+  withAlpha(alpha) {
+    return new _Color(alpha, this.r, this.g, this.b);
+  }
+  withRed(red) {
+    return new _Color(this.a, red, this.g, this.b);
+  }
+  withGreen(green) {
+    return new _Color(this.a, this.r, green, this.b);
+  }
+  withBlue(blue) {
+    return new _Color(this.a, this.r, this.g, blue);
+  }
+};
+var SliceInfo = class {
+  bounds = new Rect();
+  center = new Rect();
+  pivot = new Point();
+  scale = 1;
+  blobUrl = "";
+  get isNinePatch() {
+    return !this.center.isEmpty;
+  }
+};
+var assetFilePath = "assets.png";
+var slicesFilePath = "assets.bin";
+var directoryPath = "./script";
+async function loadAssetFile() {
+  const pngPath = directoryPath + "/" + 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;
+  });
+}
+async function readFromStream(stream) {
+  const canvas = new OffscreenCanvas(1, 1);
+  let offset = 0;
+  const count = stream.getUint8(0);
+  offset += 1;
+  const sliceInfos = /* @__PURE__ */ new Map();
+  for (let i = 0; i < count; i++) {
+    const sliceInfo = new SliceInfo();
+    const keyLength = stream.getUint8(offset);
+    offset += 1;
+    const key = new TextDecoder().decode(new Uint8Array(stream.buffer, offset, keyLength));
+    offset += keyLength;
+    const left = stream.getUint8(offset);
+    offset += 1;
+    const top = stream.getUint8(offset);
+    offset += 1;
+    const wh = stream.getUint16(offset, true);
+    offset += 2;
+    const width = wh & 31;
+    const height = wh >> 5 & 63;
+    sliceInfo.bounds = new Rect(left, top, width, height);
+    const hasCenter = (wh & 32768) !== 0;
+    const hasPivot = (wh & 16384) !== 0;
+    if (hasCenter) {
+      const centerByte = stream.getUint8(offset);
+      offset += 1;
+      const centerLeft = centerByte & 3;
+      const centerTop = centerByte >> 2 & 3;
+      const centerWidth = centerByte >> 4 & 3;
+      const centerHeight = centerByte >> 6 & 3;
+      sliceInfo.center = new Rect(centerLeft, centerTop, centerWidth, centerHeight);
+    }
+    if (hasPivot) {
+      const pivotByte = stream.getUint8(offset);
+      offset += 1;
+      let pivotLeft = pivotByte & 7;
+      let pivotTop = pivotByte >> 3 & 7;
+      if ((pivotByte & 128) !== 0) {
+        pivotLeft *= -1;
+      }
+      if ((pivotByte & 64) !== 0) {
+        pivotTop *= -1;
+      }
+      sliceInfo.pivot = new Point(pivotLeft, pivotTop);
+    }
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) {
+      throw new Error("Failed to get 2D context");
+    }
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(assetFile, sliceInfo.bounds.left, sliceInfo.bounds.top, width, height, 0, 0, width, height);
+    const blob = await canvas.convertToBlob({
+      type: "image/png"
+    });
+    sliceInfo.blobUrl = URL.createObjectURL(blob);
+    sliceInfos.set(key, sliceInfo);
+  }
+  return sliceInfos;
+}
+var assetLoaded = false;
+var assetFile = await loadAssetFile();
+var slices = await readFromStream(new DataView(await (await fetch(directoryPath + "/" + slicesFilePath)).arrayBuffer())).finally(() => {
+  assetLoaded = true;
+});
+
+// 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.Actions, 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)
+};
+
+// View.ts
+var lineHeight = 6;
+var charHeight = 8;
+var iconSize = 14;
+var IconStyle = class {
+  enabled = true;
+  active = false;
+  hover = false;
+  scale = 1;
+  showDuration = false;
+};
+function withState(color, active, enabled) {
+  return (enabled ? color : new Color(4286874756)).withAlpha(active ? 192 : 91);
+}
+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) {
+    const center = info.center;
+    const width = bound?.width ?? info.bounds.width;
+    const height = bound?.height ?? info.bounds.height;
+    layer.style.left = `${(bound?.left ?? bound?.x ?? 0) * style.scale}px`;
+    layer.style.top = `${(bound?.top ?? bound?.y ?? 0) * style.scale}px`;
+    layer.style.borderStyle = "solid";
+    layer.style.borderWidth = `${center.top * style.scale}px ${(info.bounds.width - center.right) * style.scale}px ${(info.bounds.height - center.bottom) * style.scale}px ${center.left * style.scale}px`;
+    layer.style.borderImageSource = `url(${info.blobUrl})`;
+    layer.style.borderImageSlice = `${center.top} ${info.bounds.width - center.right} ${info.bounds.height - center.bottom} ${center.left} fill`;
+    layer.style.borderImageWidth = `1`;
+    layer.style.borderImageOutset = `0`;
+    layer.style.borderImageRepeat = `repeat`;
+    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 (color && Color.White.equals(color) === false) {
+    const filterId = getColorMatrixId(color);
+    layer.style.filter = `url(#${filterId})`;
+    layer.onColorChange = (color2) => {
+      if (!color2) {
+        return;
+      }
+      const newFilterId = getColorMatrixId(color2);
+      layer.style.filter = `url(#${newFilterId})`;
+    };
+  } else {
+  }
+  return layer;
+}
+var colorMatrixIds = /* @__PURE__ */ new Map();
+var colorMatrixCache = document.createElement("div");
+document.body.appendChild(colorMatrixCache);
+function getColorMatrixId(rgba) {
+  if (colorMatrixIds.has(rgba.toUint32())) {
+    return colorMatrixIds.get(rgba.toUint32());
+  }
+  const feColorMatrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
+  feColorMatrix.setAttribute("type", "matrix");
+  const r = rgba.r / 255;
+  const g = rgba.g / 255;
+  const b = rgba.b / 255;
+  const a = rgba.a / 255;
+  feColorMatrix.setAttribute("values", `${r} 0 0 0 0 0 ${g} 0 0 0 0 0 ${b} 0 0 0 0 0 ${a} 0`);
+  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+  filter.setAttribute("id", `filter_${rgba.toHexString()}`);
+  filter.appendChild(feColorMatrix);
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  svg.appendChild(filter);
+  colorMatrixCache.appendChild(svg);
+  colorMatrixIds.set(rgba.toUint32(), filter.getAttribute("id"));
+  return filter.getAttribute("id");
+}
+function createRDFontLayer(text, style) {
+  const lineHead = new Point(0, -charHeight);
+  const start = lineHead.clone();
+  const layer = document.createElement("div");
+  layer.style.position = "absolute";
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charAt(i);
+    if (char === "\n") {
+      start.x = lineHead.x;
+      start.y += lineHeight * style.scale;
+    } else {
+      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);
+    }
+  }
+  return layer;
+}
+function createBackLayer(size, color, style) {
+  const outline = "event_outline";
+  const back = "event_back";
+  const backLayer = createLayer(back, new Rect(1, 1, (size?.width ?? iconSize) - 2, (size?.height ?? iconSize) - 2), withState(color, style.active, style.enabled), style);
+  const outlineLayer = createLayer(outline, size ? new Rect(size) : null, new Color(style.active ? 4294967295 : 4289243304), style);
+  if (backLayer.onColorChange) {
+    backLayer.onStateChange = (style2) => backLayer.onColorChange(withState(color, style2.active, style2.enabled));
+  }
+  if (outlineLayer.onColorChange) {
+    outlineLayer.onStateChange = (style2) => outlineLayer.onColorChange(new Color(style2.active ? 4294967295 : 4289243304));
+  }
+  return [
+    backLayer,
+    outlineLayer
+  ];
+}
+function colorOf(tab) {
+  switch (tab) {
+    case Tab.Sounds:
+      return new Color("d92433");
+    case Tab.Rows:
+      return new Color("2c4fdb");
+    case Tab.Actions:
+      return new Color("c544b3");
+    case Tab.Rooms:
+      return new Color("d8b811");
+    case Tab.Decorations:
+      return new Color("00c459");
+    case Tab.Windows:
+      return new Color("50b5d7");
+    default:
+      return new Color("7d7d7d");
+  }
+}
+function layerHoverInit(layer) {
+  layer.onStateChange = (style) => {
+    if (style.hover) {
+      layer.style.opacity = "1.0";
+    } else {
+      layer.style.opacity = "0";
+    }
+  };
+}
+function createElementEvent(obj, style) {
+  console.log(style);
+  style = {
+    ...new IconStyle(),
+    ...style
+  };
+  const evttype = obj.type;
+  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;
+    }
+    key0 = "event_Unknown";
+  }
+  const info = slices.get(key0);
+  if (!info) {
+    console.warn(`Slice info for event type ${evttype} not found.`);
+    return null;
+  }
+  const evttypeEnum = EventType[evttype];
+  const evinfo = EventInfos[evttypeEnum];
+  const key = "event_" + evttype;
+  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 evtag = "event_tag";
+  const evbarea = "event_beat_area";
+  const beatColor = new Color(4284539717);
+  const element = document.createElement("div");
+  const internalLayers = [];
+  function addLayers(layers) {
+    for (const layer of layers) {
+      if (layer) {
+        element.appendChild(layer);
+        internalLayers.push(layer);
+      }
+    }
+  }
+  element.style.imageRendering = "pixelated";
+  switch (evttype) {
+    case EventType.AddClassicBeat:
+      {
+        const tick = obj.tick ?? 1;
+        const swing = (obj.swing ?? 0) || 1;
+        const hold = obj.hold ?? 0;
+        const syncoSwing = obj.syncoSwing ?? 0;
+        const prexs = obj.preXs ?? {
+          syncoBeat: -1,
+          syncoSwing: 0
+        };
+        const length = obj.length ?? 7;
+        const iconWidth = iconSize * (tick * (length - 1 - prexs.syncoSwing));
+        const holdBar = hold > 0 ? createLayer(evbarea, new Rect(iconWidth, 0, iconSize * hold, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null;
+        if (holdBar) {
+          holdBar.style.pointerEvents = "none";
+        }
+        const backLayers2 = createBackLayer(new Size(iconWidth, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style);
+        const pulses = [];
+        for (let i = 0; i < length - 1; i++) {
+          const pulseLayer = createLayer(pulse, new Point(iconSize * (tick * (i + i % 2 * (1 - swing) - (i <= prexs.syncoBeat ? 0 : prexs.syncoSwing))), 0), null, style);
+          layerHoverInit(pulseLayer);
+          pulses.push(pulseLayer);
+        }
+        const hitLayer = createLayer(hit, new Point(iconSize * (tick * (length - 1 - (prexs.syncoSwing ?? 0))) - 1, 0), null, style);
+        addLayers([
+          holdBar,
+          ...backLayers2,
+          ...pulses,
+          hitLayer
+        ]);
+      }
+      break;
+    case EventType.AddOneshotBeat:
+      {
+        const tick = obj.tick ?? 1;
+        const interval = obj.interval ?? 2;
+        const loop = obj.loops ?? 0;
+        const subdiv = obj.subdivisions ?? 1;
+        const hold = obj.hold ?? 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 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;
+        if (holdLayer) holdLayer.style.pointerEvents = "none";
+        if (subdivLayer) subdivLayer.style.pointerEvents = "none";
+        if (skipshotLayer) skipshotLayer.style.pointerEvents = "none";
+        const pulses = [];
+        const crossLayers = [];
+        const posx = -off * iconSize;
+        const hittype = mode === "Freezeshot" ? hitf : hitb;
+        for (let l = 0; l <= loop; l++) {
+          for (let i = 0; i < subdiv; i++) {
+            const pulseLayer = createLayer(pulse, new Point(iconSize * (l * interval + i * tick / subdiv), 0), null, style);
+            layerHoverInit(pulseLayer);
+            pulses.push(pulseLayer);
+          }
+          for (let i = 0; i < subdiv; i++) {
+            const hitLayer2 = createLayer(hit, new Point(iconSize * (l * interval + delay + tick + i * tick / subdiv) - 1, 0), null, style);
+            pulses.push(hitLayer2);
+          }
+          const crossLayer1 = mode || hold ? createLayer(beatcross, new Point(iconSize * l * interval + posx - 1, 0), null, style) : null;
+          const crossLayer2 = mode ? createLayer(beatcross, new Point(iconSize * (l - (mode === "Freezeshot" ? 0 : 1)) * interval - 1, 0), null, style) : null;
+          const hitLayer = createLayer(hittype, new Point(iconSize * (l * interval + tick) - 1, 0), null, style);
+          if (crossLayer1) {
+            layerHoverInit(crossLayer1);
+            crossLayers.push(crossLayer1);
+          }
+          if (crossLayer2) {
+            layerHoverInit(crossLayer2);
+            crossLayers.push(crossLayer2);
+          }
+          pulses.push(hitLayer);
+        }
+        const loopLayer = createLayer("event_beat_loop", new Point(eventWidth, 0), null, style);
+        loopLayer.style.opacity = "0";
+        loopLayer.onStateChange = (style2) => {
+          if (style2.hover) {
+            loopLayer.style.opacity = "1.0";
+          } else {
+            loopLayer.style.opacity = "0";
+          }
+        };
+        addLayers([
+          ...backLayers2,
+          holdLayer,
+          subdivLayer,
+          skipshotLayer,
+          ...pulses,
+          loopLayer,
+          ...crossLayers
+        ]);
+      }
+      break;
+    case EventType.Comment:
+      {
+        const backLayers2 = createBackLayer(info.bounds.size, new Color(obj.color ?? "7d7d7d"), style);
+        const iconLayer = createLayer(key, null, null, style);
+        addLayers([
+          ...backLayers2,
+          iconLayer
+        ]);
+      }
+      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;
+        addLayers([
+          ...backLayers2,
+          durationLayer,
+          iconLayer,
+          iconColorLayer
+        ]);
+      }
+      break;
+    case EventType.PulseFreeTimeBeat:
+      {
+        const hold = obj.hold ?? 0;
+        const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, info.bounds.height), new Color(style.active ? 4291839731 : 4286462352), style) : null;
+        if (holdLayer) {
+          holdLayer.style.pointerEvents = "none";
+        }
+        const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height), beatColor, style);
+        const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null;
+        let text = "";
+        switch (obj.action) {
+          case "Custom":
+            text = ((obj.customPulse ?? 0) + 1).toString();
+            break;
+          case "Increment":
+            text = ">";
+            break;
+          case "Decrement":
+            text = "<";
+            break;
+          case "Remove":
+            text = "x";
+            break;
+        }
+        const textLayer = createRDFontLayer(text, style);
+        textLayer.style.left = `${1.5 * style.scale}px`;
+        textLayer.style.top = `${10 * style.scale}px`;
+        addLayers([
+          holdLayer,
+          ...backLayers2,
+          hitLayer,
+          textLayer
+        ]);
+      }
+      break;
+    case EventType.ReorderRooms:
+    case EventType.ReorderWindows:
+      {
+        const backLayers2 = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
+        const orderLayers = [];
+        const order = obj.order ?? [
+          0,
+          1,
+          2,
+          3
+        ];
+        for (let i = 0; i < order.length; i++) {
+          {
+            const orderLayer = createLayer(`${key}_${order[i]}`, new Point(0, i * iconSize), null, style);
+            orderLayers.push(orderLayer);
+          }
+        }
+        addLayers([
+          ...backLayers2,
+          ...orderLayers
+        ]);
+      }
+      break;
+    default:
+      const backLayers = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
+      addLayers(backLayers);
+      switch (evttype) {
+        case EventType.CustomFlash:
+          addLayers([
+            createLayer(`${key}_0`, null, new Color(obj.startColor ?? "000000"), style),
+            createLayer(`${key}_1`, null, new Color(obj.endColor ?? "000000"), style)
+          ]);
+          break;
+        case EventType.FlipScreen:
+          const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 1 : 0);
+          if (flip === 0) {
+            addLayers([
+              createLayer(key, null, null, style)
+            ]);
+          } else {
+            addLayers([
+              createLayer(`${key}_${flip - 1}`, null, null, style)
+            ]);
+          }
+        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);
+          break;
+      }
+      break;
+  }
+  element.onStateChange = (style2) => {
+    style2 = {
+      ...style2
+    };
+    internalLayers.forEach((layer) => {
+      if (layer.onStateChange) {
+        layer.onStateChange(style2);
+      }
+    });
+  };
+  return element;
+}
+export {
+  createElementEvent
+};
diff --git a/script/assets.bin b/script/assets.bin
new file mode 100644
index 0000000000000000000000000000000000000000..92ef7480c903dbd28478251478cce7f84cf1ab7a
GIT binary patch
literal 4299
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
WVSUbbovoV_;>QLjS$?MZ741JXRIeHU

literal 0
HcmV?d00001

diff --git a/script/assets.png b/script/assets.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4d05383beeade28a733a02a4342c3c46f1dc9e4
GIT binary patch
literal 6653
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
Hu0mjfFf!)X

literal 0
HcmV?d00001

diff --git a/script/special.js b/script/special.js
index a3f0a7d..6acea26 100644
--- a/script/special.js
+++ b/script/special.js
@@ -236,6 +236,91 @@ function rdview() {
     textarea.addEventListener("input", initCanvas);
 }
 
+function rdview2() {
+    let rdview = document.getElementsByClassName("rdview2")[0];
+    if (!rdview) return;
+    let rdcanvas = rdview.querySelector(".canvas");
+    let textarea = rdview.querySelector("textarea.area");
+    let number = rdview.querySelector(".number");
+    const textareaStyles = window.getComputedStyle(textarea);
+    [
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "letterSpacing",
+        "lineHeight",
+        "padding",
+    ].forEach((property) => {
+        number.style[property] = textareaStyles[property];
+    });
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
+    context.font = font;
+    function calcStringLines(sentence, width) {
+        if (!width) return 0;
+        const words = sentence.split("");
+        let lineCount = 0;
+
+        let currentLine = "";
+        for (let i = 0; i < words.length; i++) {
+            const wordWidth = context.measureText(words[i]).width;
+            const lineWidth = context.measureText(currentLine).width;
+            if (lineWidth + wordWidth > width) {
+                lineCount++;
+                currentLine = words[i];
+            } else {
+                currentLine += words[i];
+            }
+        }
+        if (currentLine.trim() !== "") lineCount++;
+        return lineCount;
+    }
+    function calcLines() {
+        const lines = textarea.value.split("\n");
+        const textareaWidth = textarea.getBoundingClientRect().width;
+        const textareaScrollWidth = textareaWidth - textarea.clientWidth;
+        const parseNumber = (v) =>
+            v.endsWith("px") ? parseInt(v.slice(0, -2), 10) : 0;
+        const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
+        const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
+        const textareaContentWidth = textareaWidth - textareaPaddingLeft -
+            textareaPaddingRight - textareaScrollWidth;
+        const numLines = lines.map((lineString) =>
+            calcStringLines(lineString, textareaContentWidth)
+        );
+        let lineNumbers = [];
+        let i = 1;
+        while (numLines.length > 0) {
+            const numLinesOfSentence = numLines.shift();
+            lineNumbers.push(i);
+            if (numLinesOfSentence > 1) {
+                Array(numLinesOfSentence - 1)
+                    .fill("")
+                    .forEach((_) => lineNumbers.push(""));
+            }
+            i++;
+        }
+        return lineNumbers;
+    }
+    function initLineNumbers() {
+        const lines = calcLines();
+        const lineDoms = Array.from({
+            length: lines.length,
+        }, (_, i) => `<div>${lines[i] || "&nbsp;"}</div>`);
+        number.innerHTML = lineDoms.join("");
+    }
+    function initCanvas() {
+        const lang = textarea.value.split("\n")[0];
+        const code = textarea.value.split("\n").slice(1).join("\n");
+        rdcanvas.innerHTML = RDViewRender(lang, code);
+    }
+    initCanvas();
+    initLineNumbers();
+    textarea.addEventListener("input", initLineNumbers);
+    textarea.addEventListener("input", initCanvas);
+}
+
 function rdview2() {
     let rdview = document.getElementsByClassName("rdview2")[0];
     if (!rdview) return;
