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 0000000..92ef748
Binary files /dev/null and b/script/assets.bin differ
diff --git a/script/assets.png b/script/assets.png
new file mode 100644
index 0000000..e4d0538
Binary files /dev/null and b/script/assets.png differ
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;
