修改部分音频内容

Reviewed-on: RDCNWebs/rd.rdlevel.cn#45

README.md

@@ -1,12 +1,32 @@
 # 节奏医生中文编辑器教程网站
 
-## 预览和编辑
+## 预览
 
 ### [Visual Studio Code](https://code.visualstudio.com/)
 
-此项目基于 [docsify](https://docsify.js.org/#/) 编辑，并使用 [RDView](https://github.com/OLDRedstone/RDView) 显示编辑器可交互模块。  
+此项目基于 [docsify](https://docsify.js.org/#/) 编辑，并使用 [RDView](https://github.com/OLDRedstone/RDView) 和 [RhythmBase.View(RDTKView)](https://github.com/OLDRedstone/RhythmBase.View) 显示编辑器可交互模块。  
+可以参考以下多种方案预览编辑效果。  
 
-- 确保 [安装 markdown-rdview-support](https://github.com/OLDRedstone/markdown-rdview-support) 即可预览 RDView 内容。  
+- [安装 docsify](https://docsify.js.org/#/quickstart) 以实时预览页面。
+
+    ```bash
+    npm i docsify-cli -g
+    ```
+
+    - 运行以下命令以启动本地服务器实时预览。  
+
+    ```bash
+    docsify s
+    ```
+
+- 在 Visual Studio Code 插件商店[安装 Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 以预览。
+
+### RDView
+
+> ### 此条目即将废弃。  
+> 请优先使用 RhythmBase.View 格式。  
+
+- [安装 markdown-rdview-support](https://github.com/OLDRedstone/markdown-rdview-support) 以预览 RDView 内容。  
 如果成功安装，那么以下内容的 markdown 预览应当是一个事件栏。  
 
 ```rdview 7 5 1
@@ -15,16 +35,18 @@ es.SetCrotchetsPerBar_4 0 1[];
 eb.AddClassicBeat 0 2[tick=6];
 ```
 
-- 确保 [安装 docsify](https://docsify.js.org/#/quickstart) 以实时预览页面。
+### RhythmBase.View
 
-```bash
-npm i docsify-cli -g
-```
+RDView 的替代。  
+可以直接使用关卡文件内格式进行展示。  
+暂无计划支持 Visual Studio Code 内预览。（~~感觉没必要支持~~）  
+可以访问[此处](https://view.obugs.cn/)以预览效果和获得额外属性说明。
 
-- 运行以下命令以启动本地服务器实时预览。  
+## 编辑
 
-```bash
-docsify s
-```
+请尽量使用 [RhythmBase.View(RDTKView)](https://github.com/OLDRedstone/RhythmBase.View) 格式展示事件。  
+本教程后期将会逐步迁移模块指此格式。
+
+## 其他
 
 Game assets courtesy of [7th Beat Games](https://7thbe.at/). Game assets are excluded from this site's license.

_sidebar.md

@@ -13,7 +13,7 @@
 - [<img src="/indexicon/Intro.png"/><p>序</p>](/pages/intro.md)
 - [<img src="/indexicon/changelog.png"/><p>更新信息</p>](/pages/changelog.md)
 - 基础：熟悉编辑器
-  - [<img src="/indexicon/changegameversion.png"/><p>修改游戏版本</p>](/pages/changegameversion.md)
+  - [<img src="/indexicon/changegameversion.png"/><p>修改游戏配置</p>](/pages/changegameversion.md)
   - [<img src="/indexicon/editorinterface.png"/><p>编辑器界面与快捷键</p>](/pages/editorinterface.md)
   - [<img src="/indexicon/importandexport.png"/><p>导入与导出</p>](/pages/importandexport.md)
 - 基础：游戏机制
@@ -41,7 +41,7 @@
   - [<img src="/indexicon/vfxpro.png"/><p>视觉干扰</p>](/pages/vfxpro.md)
   - [<img src="/indexicon/camerafx.png"/><p>摄像机视效</p>](/pages/camerafx.md)
   - [<img src="/indexicon/hallofmirror.png"/><p>镜厅</p>](/pages/hallofmirror.md)
-  - [<img src="/indexicon/windowmove.png"/><p>窗口移动</p>](/pages/windowmove.md)
+  - [<img src="/indexicon/windowmove.png"/><p>窗口相关的动画</p>](/pages/WindowDance.md)
   - [<img src="/indexicon/hand.png"/><p>手</p>](/pages/hand.md)
   - [<img src="/indexicon/character.png"/><p>自制角色与精灵资源</p>](/pages/spritesheet.md)
   - [<img src="/indexicon/decoration.png"/><p>使用精灵</p>](/pages/decoration.md)

index.html

@@ -35,7 +35,8 @@
             };
         </script>
         <script type="module">
-            import "/script/rdview.js";
+            import "./script/rdview.js";
+            import {render} from "./script/rdtkview_render.js";
 
             function escapeHtml(unsafe) {
                 return unsafe
@@ -48,29 +49,32 @@
             loadRDView();
             const originalCodeRenderer = $docsify.markdown
                 ?.renderer?.code;
+            function codeblockRender(code, lang) {
+                if (lang.trim().startsWith("rdview")) {
+                    return RDViewRender(lang, code);
+                }
+                // else if (lang.trim().startsWith("rdtkview")) {
+                //     const args = lang.slice(8).trim().split(" ");
+                //     const width = parseInt(args[0]) || 8;
+                //     const height = parseInt(args[1]) || 4;
+                //     const scale = parseFloat(args[2]) || 2.0;
+                //     const result = render(code, width, height, scale);
+                //     result.toString = () => result;
+                //     return result;
+                // }
+                return originalCodeRenderer
+                    ? originalCodeRenderer(code, lang)
+                    : `<pre data-lang="${lang}"><code>${
+                        escapeHtml(code)
+                    }</code></pre>`;
+            }
             $docsify = {
                 ...$docsify,
                 ...{
                     markdown: {
                         renderer: {
-                            code: function (code, lang) {if (
-                                    lang.trim().startsWith(
-                                        "rdview",
-                                    )
-                                ) {
-                                    return RDViewRender(
-                                        lang,
-                                        code,
-                                    );
-                                }
-                                return originalCodeRenderer
-                                    ? originalCodeRenderer(
-                                        code,
-                                        lang,
-                                    )
-                                    : `<pre data-lang="${lang}"><code>${
-                                        escapeHtml(code)
-                                    }</code></pre>`;
+                            code: (code, lang) => {
+                                return codeblockRender(code, lang);
                             },
                             image: function (src, title, alt) {
                                 return `<div class="image-tip"><img class="medium-zoom-image" src="${src}" alt="${alt}">${
@@ -103,7 +107,7 @@
         <script src="/script/zoom-image.min.js"></script>
         <script src="/script/search.min.js"></script>
         <script src="/script/emoji.min.js"></script>
-        <script src="/script/docsify-copy-code.min.js"></script>
+        <!-- <script src="/script/docsify-copy-code.min.js"></script> -->
         <script src="/script/switchLightDarkMode.js"></script>
         <script src="/script/otto.js"></script>
         <script src="/script/custommethod-search.js"></script>

pages/WindowDance.md

@@ -0,0 +1,92 @@
+# 窗口相关的动画
+
+在1.0正式版更新后，窗口被单独提取成了一个独立的板块：**窗口板块**。为了避免剧透，这个板块默认是隐藏的，要让这个板块显示出来，我们需要在动作板块先放一个窗口动效事件，或者在编辑器设置中的显示窗口标签栏设置为**总是报告**，这个板块才会显示出来。
+
+![“总是报告”设置](../images/Window_Dance_Always_Active.png)
+
+我们可以看到，窗口事件比以前多了很多。而且4个窗口都像房间板块一样每个窗口都占了一行。所有事件都只会对其所在行对应的窗口生效。接下来将会介绍这些事件的作用和使用方法。
+
+## 隐藏窗口
+
+窗口的显示和隐藏都在这个事件中，窗口默认只有窗口1是显示，其他窗口默认都是隐藏的，所以如果你需要操作其他窗口，需要把窗口显示出来再进行操作。
+
+窗口板块中隐藏状态的窗口会显示灰色，可以通过这个判断你的窗口有没有忘记显示出来。
+![默认状态下只有窗口1是显示的，其他窗口都是隐藏的，所以呈现灰色](../images/Window_Dance_Window_Hidden.png)
+
+## 窗口动效
+
+(谁会，来补充一下，我只用过移动2333)
+
+## 窗口大小重置
+
+想要让窗口大小发生变化，或调整窗口的轴点，都需要借助**窗口大小重置**事件。这个事件的设置项目是这样的：
+![](../images/Window_Dance_Window_Resize.gif)
+
+**大小：** 窗口的目标大小，最大可以设置为`200%， 200%`，如果`x`和`y`同时被设置为了0，则窗口会立刻被重置为初始的大小（即`100%， 100%`）。
+
+**缩放模式：** 窗口大小发生变化时内容的缩放模式，具体如下：
+<ul>
+<li><strong>填充：</strong>将画面中的内容尽可能的填满窗口</li>
+<li><strong>适应：</strong>将画面中的内容尽可能放进窗口</li>
+<li><strong>无：</strong>保持窗口中原来内容的大小不变</li>
+</ul>
+
+![填充模式](../images/Window_Dance_fill.gif)
+![适应模式](../images/Window_Dance_fit.gif)
+![无模式](../images/Window_Dance_none.gif)
+
+> 如果你的窗口在大小发生变化前后长宽比不变，那么**填充**和**适应**在效果上没有区别。
+
+**轴点模式：** 有**默认**和**锚点边缘**两种模式，选择**默认**即和房间移动的轴点没有区别，选择**锚点边缘**则表示选择一条边缘固定不动的情况下进行大小的缩放。
+
+> 实际上选择锚点边缘的情况下就是由系统计算轴点的位置，因此在锚点边缘选择左或右时不要把`x`设置为`0%`，在锚点边缘选择上或下时不要把`y`设置为`0%`，否则会出现bug，表现为对应窗口会消失且**无法被任何方式**移动回来，即使通过事件恢复了窗口的大小和轴点。
+
+**轴点：** 设置位置和缩放的基准点，类似于精灵图和房间的轴点，此处不再赘述。
+
+**动画时长和缓速：** 见过多次了，不再赘述。
+
+> 如果你想直观地看看各种移动方式的速度区别，可以[看看这里](https://easings.net/zh-cn)。
+
+### 轴点的使用技巧
+我们知道，在窗口大小发生变化时，调整轴点可以改变其缩放的中心。但是实际上，即使窗口不需要缩放，我们也可以通过调整轴点来改变窗口的位置，那么这种操作从效果上看和直接使用窗口移动看似没有什么区别，实际上在一些特殊的需求中，这个方法可以被很巧妙地使用。
+
+窗口在移动时，使用的坐标是相对整个屏幕的，而由于不同设备的屏幕分辨率不同，导致有些效果如果用窗口移动来做会在不同分辨率下有不同效果，尤其是当多个窗口之间的位置有配合的时候（如两个窗口紧贴的效果）。
+如在16:9的分辨率下制作的两个窗口紧挨着的效果：
+![16:9分辨率下两个窗口紧贴](../images/Window_Dance_169ratio.png)
+在其他分辨率下，即使不改变窗口的位置，也可能会有不同的效果（如在22:9分辨率下）：
+![在更宽的屏幕下，两个窗口无法紧贴](../images/Window_Dance_229ratio.png)
+如果想要做出在类似`2-XN`中两个窗口相撞的效果，窗口中间有距离会导致表演效果大打折扣。这时我们可能会想，能不能不以屏幕为基准定位，而是以窗口的大小为基准定位，是不是就可以做到了呢？事实上，**轴点**就解决了这样的问题。
+试想，如果两个窗口在同一个位置，而一个窗口的轴点在左边缘，另一个窗口在右边缘，就可以保证无论在什么样的分辨率下，这两个窗口都一定是紧挨着的。
+![](../images/Window_Dance_169ratio_pivot.png)
+![使用轴点后，无论在哪个分辨率下两个窗口都是紧挨的](../images/Window_Dance_229ratio_pivot.png)
+所以当你的动画需要多个窗口之间的位置配合时，不妨试试用轴点的移动来代替直接移动窗口。
+
+## 设置窗口数量
+
+首先需要纠正一个翻译问题，这个事件的正确翻译应为**设置窗口内容**(英文原文: Set Window Content)。真正可以设置窗口数量的事件是前面提到的**隐藏窗口**事件(显示或者隐藏窗口)，请大家不要搞错了。
+
+这个事件的设置项目是这样的：
+![](../images/Window_Content.png)
+**内容模式：** 可以选择**一个房间**或**全部房间**，在选择**一个房间**时，下面会出现**房间目录**选项，可以从4个房间里面选择一个，随后这个窗口中只会显示这个房间的内容。在选择全部房间时，这个窗口将会像平常一样显示全部4个房间的内容。
+
+> 注意，在选择**一个房间**时，这个房间中的所有房间事件都不会在这个窗口中生效，包括房间移动，淡入淡出房间，房间遮罩等。
+
+![左侧窗口是全部房间，右侧房间是一个房间(房间1)，可以发现房间移动和房间遮罩在右侧房间都没有生效](../images/Window_Dance_All_or_One.png)
+
+**位置，缩放和角度：** 类似于摄像头移动的对应参数。在内容模式为**一个房间**时，位置是对应房间区域的对应坐标(左下角是`(0%, 0%)`，右上角是`(100%, 100%)`)，在选择**全部房间**时，位置是在一个**长宽均为一个房间默认长宽的2倍的大区域**中的位置(如果需要定位到一个处于默认位置和默认大小的房间的左下角，位置是`(25%, 25%)`，右上角则是`(75%，75%)`，正中心依然是`(50%, 50%)`)，但是由于窗口默认大小和一个窗口的默认大小是相同的，因此如果不改变窗口的大小，依然只能显示一个房间大小的区域。
+![上图中黄色区域是一个处于默认位置和默认大小的房间，蓝色区域是全部房间的坐标区域](../images/Window_Dance_Coordinate_of_All_Room.png)
+无论选择哪种内容模式，超出区域范围的内容都会被裁剪。
+
+**时长和缓速：** 略
+
+## 重新排列窗口
+类似于房间板块的**重新排列房间**，可以设置窗口的上下关系。
+
+## 设置主窗口
+将对应的窗口设置为主窗口，对话，顶部护士灯光，状态牌等内容将在主窗口显示。
+
+## 设置窗口名称
+修改窗口的标题。在动作选择**设置**的时候，会直接设置窗口的标题；在动作选择**增补**的时候，会在原来标题的后面增加内容；在动作选择**重置**的时候，会将标题重置为`Rhythm Doctor`。
+
+## 设置桌面颜色
+修改模拟移动时桌面的颜色，如果不打开起始颜色，则表示从当前颜色渐变为结束颜色，如果打开起始颜色，效果将类似于**自定义闪烁**。

pages/appendix_audios.md

@@ -161,8 +161,17 @@
 | sndWhistle7 | 口哨声第7拍 |
 | sndApplause | 鼓掌声 |
 | sndRowShrink | 轨道缩短声 |
+| sndSkate1 | <code>MD-3</code>内布若拍子用到的提示音（准备） |
+| sndSkate2 | <code>MD-3</code>内布若拍子用到的提示音（释放） |
+| sndSquareshot | 哐啷声 |
+| sndTriangleshot1 | 三角拍子声（后面的数字可改为1~10） |
+| sndSleighHi | 圣诞树节拍器 - 高 |
+| sndSleighLo | 圣诞树节拍器 - 低 |
 | sndCalibrationBeep | 校准界面哔声 |
 | sndMelonMorse | Melon 摩尔斯电码 |
+| sndVividStasisResultsRiser | <code>X-FTS</code>恋恋群星S+评价前摇 |
+| sndVividStasisScratch | <code>X-FTS</code>恋恋群星V评价出现 |
+| sndWingFlap | 鸟儿扇动翅膀 |
 
 ### 未在正式版本中使用的音效
 
@@ -287,6 +296,7 @@
 | sndOrientalTechnodown | <code>1-1N</code>东方回响贝斯的开头部分 | |
 | sndOrientalDubstep | <code>1-1N</code>东方回响贝斯 | 130 |
 | sndIntimate | <code>1-2</code>亲密 | 90 |
+| sndIntimate2P | 在双人模式下的<code>1-2N</code>亲密 | 90 |
 | sndOrientalInsomniac | <code>1-X</code>东方不眠夜 | 180 |
 | sndOrientalInsomniac1 | <code>1-X</code> 东方不眠夜 第一部分 | |
 | sndOrientalInsomniac2 | <code>1-X</code> 东方不眠夜 第二部分 | |
@@ -295,8 +305,8 @@
 | sndGongXi | <code>1-CNY</code>春节贺岁片 | 145 |
 | sndHalloween | <code>1-BOO</code>恐怖鸟主题 | 100 |
 | sndLofi | <code>2-1</code>Lo-fi Hip-Hop Beats To Treat Patients To | 75 |
-| sndCareless | <code>2-1N</code>wish i could care less | 75~81 |
-| sndCarelessCN | <code>2-1N</code>wish i could care less中文版 | 75~81 |
+| sndCareless | <code>2-1N</code>wish i could care less | 75->81 |
+| sndCarelessCN | <code>2-1N</code>wish i could care less中文版 | 75->81 |
 | sndSupraventricular88 | <code>2-2</code>室上性心动过速 | 88 |
 | sndUnreachable | <code>2-2N</code>Unreachable | 180 |
 | sndPuffPiece | <code>2-3</code>缭绕 | 127 |
@@ -304,8 +314,8 @@
 | song_of_the_sea | <code>2-4</code>与<code>2-4N</code>的背景音乐 | 60 |
 | sndAllTheTimes | <code>2-X</code>All The Times 咖啡之歌 | 145 |
 | sndAllTheTimesCN | <code>2-X</code>All The Times 咖啡之歌中文版 | 145 |
-| sndBitterness | <code>2-XN</code>Bitter Times 爱情是苦和甜的交错前半段 | 112~195 |
-| sndBitternessCutscene | <code>2-XN</code>Bitter Times 爱情是苦和甜的交错后半段 | 112->195->264->195 |
+| sndBitterness | <code>2-XN</code>Bitter Times 爱情是苦和甜的交错前半段 | 112->196-->231->255-->196 |
+| sndBitternessCutscene | <code>2-XN</code>Bitter Times 爱情是苦和甜的交错后半段 | |
 | sndTutorialBeans | <code>2-B1</code>武士豆子跳 | 110 |
 | sndSleepyGarden | <code>3-1</code>沉睡花园 | 158 |
 | sndLounge | <code>3-1N</code>休息室 | 75 |
@@ -314,26 +324,27 @@
 | sndDistantDuetNight | <code>3-3</code>分离二重唱·夜 | 194 |
 | sndLesMisBar1 | <code>3-X</code>轮班之歌 | 100 |
 | sndLesMisBar39 | <code>3-X</code>轮班之歌 从第39小节开始 | |
-| sndMinersong | <code>4-1</code>实习医生培训演练表现评估 | 128->225.9->140~110? |
+| sndLesmisDog | 节奏狗生 | 100 |
+| sndMinersong | <code>4-1</code>实习医生培训演练表现评估 | 128 |
 | sndRollerdisco | <code>4-1N</code>滑板迪斯科震颤 | 125.5 |
 | sndInvisible | <code>4-2</code>和<code>4-2N</code> | 190 |
 | sndSteinway | <code>4-3</code>斯坦威 | 80 |
 | sndKnowYou | <code>4-4</code>懂你 | 157 |
 | sndMurmurs | <code>4-4N</code>喃喃细语 | 65 |
 | sndLuckyBreak | <code>5-1</code>路吉摔了一跤 | 156 |
-| sndOSTL | <code>5-1N</code>One Slip Too Late 创伤之歌 | 175~150 |
-| sndOSTLCN | <code>5-1N</code>One Slip Too Late 创伤之歌中文版 | 175~150 |
+| sndOSTL | <code>5-1N</code>One Slip Too Late 创伤之歌 | 175->150->175 |
+| sndOSTLCN | <code>5-1N</code>One Slip Too Late 创伤之歌中文版 | 175->150->175 |
 | sndFreezeshot | <code>5-2</code>Lo-fi Beats For Patients To Chill To | 140 |
 | sndFreezeshotH | <code>5-2N</code>无以为继的伤心欲绝 | 176->100->80 |
 | sndTherapy1 | <code>5-3</code>七局伸展操第一部分 | 128 |
 | sndTherapy2 | <code>5-3</code>七局伸展操第二部分 | 124 |
 | sndTherapy3 | <code>5-3</code>七局伸展操第三部分 | 136 |
 | sndTherapyEnding | <code>5-3</code>七局伸展操结尾 | 136 |
-| sndCorazonesViejos | <code>5-3N</code>偕老 | 249? |
+| sndCorazonesViejos | <code>5-3N</code>偕老 | 248 |
 | sndDDS | <code>5-X</code>梦想永不歇 | 95->62.6->102.5 |
 | sndDDSCN | <code>5-X</code>梦想永不歇中文版 | 95->62.6->102.5 |
-| sndHaileyDuet | <code>6-1</code>想把心事和你说 | 94.5->190->220->181->206? |
-| sndHaileyDuetCN | <code>6-1</code>想把心事和你说中文版 | 94.5->190->220->181->206? |
+| sndHaileyDuet | <code>6-1</code>想把心事和你说 | 94.5-->190-->200->210-->181->198? |
+| sndHaileyDuetCN | <code>6-1</code>想把心事和你说中文版 | 94.5-->190-->200->210-->181->198? |
 | sndEdegaRave | <code>6-2</code>欢迎回来 | 200->85->200 |
 | sndBossStage_Main | <code>6-X</code>Boss战（包括埃德加批评佩奇的一段） | 150~255 |
 | sndBossStage_NoCutscene | <code>6-X</code>Boss战（不包括埃德加批评佩奇的一段） | 150~255 |
@@ -354,8 +365,19 @@
 | sndWornOutTapes | <code>X-WOT</code>Worn Out Tapes | 149 |
 | sndSparkLine | <code>X-KOB</code>气球王国 | 124 |
 | sndVividStasis | <code>X-FTS</code>恋恋群星 | 150 |
+| sndVividStasisResults | <code>X-FTS</code>恋恋群星V评价结算音乐 | 150 |
 | sndOsmBluesRadio | 夜间的病房内过剧情 | 98? |
+| sndOsmBluesNormal | 袖管涂鸦背景音乐 | 98? |
+| sndInsomniacCutscene | 1-X后过剧情 | 140 |
 | SoftPianoIntimate | 第一章末尾的过剧情 | 88 |
+| sndDistantDuetCutsceneLoop | 3-3后过剧情 | 165 |
+| sndDDSPianoCutsceneLoop | 5-X后过剧情第一部分 | 130 |
+| sndDDSEdegaCutscene | 5-X后过剧情第一部分（埃德加来） | 140 |
+| sndDDSVirusTalkCutsceneLoop | 5-X后过剧情（伊恩来） | 105 |
+| sndMarksTheme | 病历间音乐 | 110 |
+| sndBlurredCutscene | 7-1后过剧情 | 63? |
+| sndPaigeReturnsCutscene | 佩奇回来 | 157? |
+| sndEdegaBedsidePaigeCutscene | 7-X2后埃德加住院 | 58? |
 
 ### 未在正式版本中出现的音乐
 
@@ -369,4 +391,5 @@
 | sndChopin | Op.10 No.4 | |
 | sndOrientalInsomniacHardRepOld | 超东方不眠夜（旧版） | |
 | sndGreenlightInsomniac | 超东方不眠夜（预告片版） | |
-| sndOpeningCredits | |
+| sndLanterns | | 150 |
+| sndOpeningCredits | | 187.9 |

pages/appendix_gimmicks.md

@@ -98,6 +98,12 @@
 
 在`5-2N 无以为继的伤心欲绝`中被首次引入。
 
+### 长按单发拍子
+
+当听到咻噗的声音时，说明下一次击拍需要长按到下一个出拍点。
+
+在`7-1 模糊`中被首次引入。
+
 ### 冲击拍子
 
 单发拍子根据哨声提示在脉冲和按拍时全都按拍。

pages/appendix_tools.md

@@ -22,6 +22,8 @@ g 1 1 5 4 #0ff{
 
 ---
 
+完整功能支持请前往[此处](https://view.obugs.cn)。
+
 <div class="rdview2"><div class="canvas"></div><div class="editor"><div class="number"></div><textarea class="area" spellcheck="false" placeholder="Enter code here">
 { "bar": 1, "beat": 1, "y": 0, "type": "MoveRoom", "if": "1d0", "roomPosition": [50, 50], "scale": [70, 100], "angle": 20, "pivot": [0, 0], "duration": 1, "ease": "Linear" },
 { "bar": 1, "beat": 1, "y": 6, "type": "AddOneshotBeat", "pulseType": "Triangle", "tick": 2, "subdivisions": 2, "subdivSound": true },
@@ -29,62 +31,62 @@ g 1 1 5 4 #0ff{
 { "bar": 1, "beat": 2, "y": 1, "type": "ReorderRooms", "order": [1, 3, 2, 0] },
 { "bar": 1, "beat": 2, "y": 5, "type": "SetSpeed", "speed": 1, "duration": 0, "ease": "Linear" },
 { "bar": 1, "beat": 3, "y": 3, "type": "AddOneshotBeat", "pulseType": "Wave", "tick": 2 },
+{ "bar": 1, "beat": 4, "y": 4, "type": "AddOneshotBeat", "pulseType": "Wave", "freezeBurnMode": "Burnshot", "interval": 2, "tick": 1 },
 { "bar": 1, "beat": 5, "y": 1, "type": "SetBeatsPerMinute", "if": "~3d0", "beatsPerMinute": 100 },
+{ "bar": 1, "beat": 5, "y": 2, "type": "SetBackgroundColor", "rooms": [0], "backgroundType": "Color", "color": "FFFFFFFF", "filter": "NearestNeighbor" },
 { "bar": 1, "beat": 5, "y": 5, "type": "SetGameSound", "soundType": "SmallMistake", "filename": "" },
 { "bar": 1, "beat": 5, "y": 6, "type": "SetHeartExplodeInterval", "intervalType": "GatherAndCeil", "interval": 1 },
-{ "bar": 1, "beat": 4, "y": 4, "type": "AddOneshotBeat", "pulseType": "Wave", "freezeBurnMode": "Burnshot", "interval": 2, "tick": 1 },
-{ "bar": 1, "beat": 5, "y": 2, "type": "SetBackgroundColor", "rooms": [0], "backgroundType": "Color", "color": "FFFFFFFF", "filter": "NearestNeighbor" },
 { "bar": 1, "beat": 7, "y": 0, "type": "AddClassicBeat", "tag": "1", "tick": 0.5, "hold": 1, "swing": 0.5, "setXs": "NoChange" },
 { "bar": 1, "beat": 7, "y": 6, "type": "AddOneshotBeat", "pulseType": "Wave", "freezeBurnMode": "Freezeshot", "interval": 2, "tick": 1, "delay": 0.5, "skipshot": true },
-{ "bar": 1, "beat": 8, "y": 4, "type": "SetCountingSound", "voiceSource": "JyiCount", "enabled": true, "volume": 100, "subdivOffset": 0.5 },
 { "bar": 1, "beat": 8, "y": 1, "type": "SetVisible", "visible": true },
 { "bar": 1, "beat": 8, "y": 2, "type": "ShowStatusSign", "if": "1d0", "text": "RhythmBase.View!", "duration": 5, "useBeats": true, "narrate": true },
 { "bar": 1, "beat": 8, "y": 3, "type": "Tint", "border": "Glow", "borderColor": "FF0000FF", "tint": true, "tintColor": "001BFFFF", "opacity": 100, "duration": 3, "ease": "Linear" },
+{ "bar": 1, "beat": 8, "y": 4, "type": "SetCountingSound", "voiceSource": "JyiCount", "enabled": true, "volume": 100, "subdivOffset": 0.5 },
 { "bar": 1, "beat": 8, "y": 5, "type": "TextExplosion", "rooms": [0], "text": "Explosion", "color": "000000", "mode": "OneColor", "direction": "Left", "speed": 100, "ease": "Linear" },
 { "bar": 2, "beat": 2, "y": 5, "type": "SayReadyGetSetGo", "tag": "1", "rooms": [4], "phraseToSay": "JustSayRea", "voiceSource": "Nurse", "tick": 1, "volume": 100 },
-{ "bar": 2, "beat": 3, "y": 4, "type": "SetOneshotWave", "waveType": "BoomAndRush", "height": 100, "width": 100 },
 { "bar": 2, "beat": 3, "y": 1, "type": "Move", "position": [50, 50], "duration": 1, "ease": "Linear" },
-{ "bar": 2, "beat": 3, "y": 3, "type": "PlayAnimation", "expression": "neutral" },
 { "bar": 2, "beat": 3, "y": 2, "type": "NewWindowDance", "tab": "Windows", "preset": "Move", "position": [50, 50], "reference": "Center", "easingDuration": 1, "ease": "Linear" },
+{ "bar": 2, "beat": 3, "y": 3, "type": "PlayAnimation", "expression": "neutral" },
+{ "bar": 2, "beat": 3, "y": 4, "type": "SetOneshotWave", "waveType": "BoomAndRush", "height": 100, "width": 100 },
 { "bar": 2, "beat": 5, "y": 0, "type": "BassDrop", "if": "1&~2d0", "rooms": [0], "strength": "High" },
 { "bar": 2, "beat": 5, "y": 1, "type": "ShowDialogue", "rooms": [4], "text": "Samurai_Happy: SAMURAI!", "speed": 1, "panelSide": "Bottom", "portraitSide": "Left", "playTextSounds": true },
 { "bar": 2, "beat": 5, "y": 2, "type": "FloatingText", "rooms": [0], "id": 0, "text": "等/呀/等/得/好/心/慌……", "times": "", "color": "00F4FFFF", "outlineColor": "0011FFFF", "textPosition": [50, 50], "font": "Default", "size": 8, "angle": 0, "showChildren": true, "fadeOutRate": 3, "mode": "FadeOut", "anchor": "MiddleCenter", "narrate": true, "narrationCategory": "Subtitles" },
+{ "bar": 2, "beat": 6, "y": 3, "type": "SetRoomPerspective", "cornerPositions": [[0, 0], [100, 0], [0, 100], [100, 100]], "duration": 1, "ease": "Linear" },
 { "bar": 2, "beat": 6, "y": 4, "type": "SetPlayStyle", "PlayStyle": "Normal", "NextBar": 1, "Relative": true },
+{ "bar": 2, "beat": 7, "y": 5, "type": "SetCrotchetsPerBar", "crotchetsPerBar": 7, "visualBeatMultiplier": 1 },
 { "bar": 2, "beat": 7, "y": 6, "type": "SetHandOwner", "rooms": [0], "hand": "Right", "character": "Player" },
 { "bar": 2, "beat": 8, "y": 3, "type": "SetBeatSound", "row": 0, "sound": {"filename": "Shaker"} },
 { "bar": 2, "beat": 8, "y": 4, "type": "TintRows", "if" : "1&~2d1", "rooms": [0], "border": "Outline", "borderColor": "2BFF00FF", "tint": true, "tintColor": "007E0EFF", "opacity": 100, "duration": 0, "ease": "Linear", "effect": "None" },
-{ "bar": 3, "beat": 1, "y": 2, "type": "PulseCamera", "rooms": [0], "strength": 1, "count": 1, "frequency": 1 },
-{ "bar": 3, "beat": 1, "y": 1, "type": "ShowHands", "rooms": [0], "hand": "Right", "action": "Show", "extent": "Full", "forceRaise": true, "align": false, "instant": false },
 { "bar": 3, "beat": 1, "y": 0, "type": "MoveCamera", "rooms": [0], "cameraPosition": [50, 50], "duration": 1, "ease": "Linear" },
-{ "bar": 2, "beat": 7, "y": 5, "type": "SetCrotchetsPerBar", "crotchetsPerBar": 7, "visualBeatMultiplier": 1 },
-{ "bar": 2, "beat": 6, "y": 3, "type": "SetRoomPerspective", "cornerPositions": [[0, 0], [100, 0], [0, 100], [100, 100]], "duration": 1, "ease": "Linear" },
+{ "bar": 3, "beat": 1, "y": 1, "type": "ShowHands", "rooms": [0], "hand": "Right", "action": "Show", "extent": "Full", "forceRaise": true, "align": false, "instant": false },
+{ "bar": 3, "beat": 1, "y": 2, "type": "PulseCamera", "rooms": [0], "strength": 1, "count": 1, "frequency": 1 },
 { "bar": 3, "beat": 3, "y": 2, "type": "SayReadyGetSetGo", "if": "1d0", "rooms": [4], "phraseToSay": "SayGetSetOne", "voiceSource": "Nurse", "tick": 1, "volume": 100 },
 { "bar": 3, "beat": 3, "y": 6, "type": "FlipScreen", "rooms": [0], "flipX": false, "flipY": true },
 { "bar": 3, "beat": 4, "y": 6, "type": "InvertColors", "rooms": [0], "enable": true },
-{ "bar": 3, "beat": 6, "y": 6, "type": "SayReadyGetSetGo", "rooms": [4], "phraseToSay": "JustSayAndStop", "voiceSource": "Nurse", "tick": 1, "volume": 100 },
 { "bar": 3, "beat": 5, "y": 3, "type": "DesktopColor", "endColor": "00ffff", "duration": 2, "ease": "Linear" },
+{ "bar": 3, "beat": 6, "y": 6, "type": "SayReadyGetSetGo", "rooms": [4], "phraseToSay": "JustSayAndStop", "voiceSource": "Nurse", "tick": 1, "volume": 100 },
 { "bar": 3, "beat": 5, "y": -1, "type": "AdvanceText", "id": 0, "text": "text 字段不存在于原事件中，但是 RDView 提供了支持。" },
 { "bar": 3, "beat": 5.5, "y": -1, "type": "PulseFreeTimeBeat", "row": 0, "action": "Increment", "hold": 0 },
-{ "bar": 3, "beat": 8, "y": 4, "type": "NarrateRowInfo", "row": 0, "infoType": "Connect", "soundOnly": false, "narrateSkipBeats": "On", "skipsUnstable": false, "customPlayer": "AutoDetect" },
-{ "bar": 4, "beat": 1, "y": 2, "type": "PaintHands", "rooms": [0], "hands": "Right", "border": "Outline", "borderColor": "AFFF00FF", "tint": true, "tintColor": "4FAF00FF", "opacity": 100, "duration": 0 },
 { "bar": 3, "beat": 8, "y": 3, "type": "HideWindow", "show": false },
+{ "bar": 3, "beat": 8, "y": 4, "type": "NarrateRowInfo", "row": 0, "infoType": "Connect", "soundOnly": false, "narrateSkipBeats": "On", "skipsUnstable": false, "customPlayer": "AutoDetect" },
 { "bar": 3, "beat": 8, "y": 5, "type": "Comment", "tab": "Actions", "text": "五彩斑斓的黑", "color": "8C00FF", "show": false },
-{ "bar": 4, "beat": 1, "y": 6, "type": "SetWindowContent", "contentMode": "OnTop" },
-{ "bar": 4, "beat": 2, "y": 4, "type": "PlaySong", "song": {"filename": "sndOrientalTechno"}, "bpm": 100, "loop": false },
+{ "bar": 4, "beat": 1, "y": 2, "type": "PaintHands", "rooms": [0], "hands": "Right", "border": "Outline", "borderColor": "AFFF00FF", "tint": true, "tintColor": "4FAF00FF", "opacity": 100, "duration": 0 },
 { "bar": 4, "beat": 1, "y": 4, "type": "CallCustomMethod", "methodName": "", "executionTime": "OnBar", "sortOffset": 0 },
+{ "bar": 4, "beat": 1, "y": 6, "type": "SetWindowContent", "contentMode": "OnTop" },
 { "bar": 4, "beat": 2, "y": 2, "type": "FadeRoom", "opacity": 100, "duration": 2, "ease": "Linear" },
+{ "bar": 4, "beat": 2, "y": 4, "type": "PlaySong", "song": {"filename": "sndOrientalTechno"}, "bpm": 100, "loop": false },
 { "bar": 4, "beat": 2, "y": 6, "type": "SetRowXs", "pattern": "-x--x-", "syncoBeat": 3, "syncoSwing": 0, "syncoVolume": 70, "syncoPitch": 100, "syncoStyle": "Chirp", "syncoPlayModifierSound": true, "syncoPlayModifierOffSound": true },
 { "bar": 4, "beat": 3, "y": 3, "type": "ChangeCharacter", "row": 0, "character": "Samurai", "transition": "Instant" },
 { "bar": 4, "beat": 5, "y": 2, "type": "ShowRooms", "rooms": [1, 3], "heights": [0, 0, 0, 0], "transitionTime": 1, "ease": "InOutSine" },
 { "bar": 4, "beat": 6, "y": 6, "type": "RenameWindow", "action": "Set", "text": "Minecraft 1.21.1 NeoForge" },
 { "bar": 4, "beat": 7, "y": 2, "type": "SetVFXPreset", "rooms": [0], "preset": "Vignette", "enable": true },
-{ "bar": 4, "beat": 7, "y": 4, "type": "SetTheme", "rooms": [0], "preset": "None", "skipPaintEffects": false },
 { "bar": 4, "beat": 7, "y": 3, "type": "PlaySound", "sound": {"filename": "Shaker"}, "customSoundType": "CueSound" },
+{ "bar": 4, "beat": 7, "y": 4, "type": "SetTheme", "rooms": [0], "preset": "None", "skipPaintEffects": false },
 { "bar": 4, "beat": 7, "y": 5, "type": "SetRoomContentMode", "mode": "Center" },
 { "bar": 4, "beat": 8, "y": 6, "type": "TagAction", "Action": "Run", "Tag": "Nothing" },
+{ "bar": 5, "beat": 1, "y": 2, "type": "PulseCamera", "rooms": [0], "strength": 1, "count": 1, "frequency": 1 },
 { "bar": 5, "beat": 1, "y": 3, "type": "SetClapSounds", "rowType": "Classic", "p1Sound": {"filename": "ClapHit"} },
 { "bar": 5, "beat": 1, "y": 4, "type": "ChangePlayersRows", "playerMode": "OneOrTwoPlayers", "players": ["NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange", "NoChange"], "cpuMarkers": ["Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto", "Otto"] },
-{ "bar": 5, "beat": 1, "y": 2, "type": "PulseCamera", "rooms": [0], "strength": 1, "count": 1, "frequency": 1 },
 { "bar": 5, "beat": 1, "y": 5, "type": "ReadNarration", "text": "一名身穿红色盔甲的武士跟着音乐节拍点头。", "category": "Description" }
 </textarea></div></div>
 

pages/changegameversion.md

@@ -1,4 +1,4 @@
-# 修改游戏版本
+# 修改游戏配置
 
 ## 说明
 
@@ -13,7 +13,7 @@
 
 最后说明的是，不论你使用的是哪个版本，由于近期官方对编辑器的更新极为频繁，请务必将游戏更新设置为**始终保持此游戏为最新**，否则真的是……脑壳痛。
 
-## 进入方式
+## 修改游戏版本
 
 接下来介绍进入Beta版本的方法：
 
@@ -31,4 +31,20 @@
 
 第四步，直接打开游戏即可。
 
-> 一切准备就绪，那么开始我们的节奏医生编辑器中文教程吧！
+> 一切准备就绪，那么开始我们的节奏医生编辑器中文教程吧！
+
+## 启用高级编辑器功能
+
+从 v1.0.4 版本开始，高级编辑器功能被加入。其中包含一些在剧情关卡中使用，但之前不能在编辑器直接使用的功能。
+
+要启用高级编辑器功能，首先按住 `tab`，然后你就会看到这个界面：
+
+![没错，右下角的凹兔在盯着你](../images/changegameversion-tab.png)
+
+然后狂点右下角的凹兔，直到弹出这个窗口：
+
+![启用高级编辑器功能的窗口](../images/changegameversion-advanced-feature.png)
+
+点击接受，此时高级编辑器功能就启用了。
+
+如果你想关闭高级编辑器功能，只需要点一下 `tab` 界面右下角的凹兔即可。

pages/changelog.md

@@ -1,5 +1,11 @@
 # 更新信息
 
+#### 2026-01-24
+- 制作人员表增加了
+
+#### 2026-01-16
+- RDTKView(~~RDView2~~) 已完成部署
+
 #### 2026-01-14
 - 制作人员表增加了
 - RDView 对正式版编辑器新特性的部分适配

pages/classicbeat.md

@@ -10,7 +10,7 @@
 
 第二个选项“**摇摆**”就是剧情模式里老奶奶那样的摇摆普通拍子，可以使用拖动条来调节，对照下方绿色竖线的移动可以很直观地看到摇摆效果。不过拖动滑条你只能得到一些倍数十分规整的摇摆拍子，例如摇摆值为0.25，0.5，0.75等，如果你的音乐里真的有些更为不同寻常的摇摆幅度，那就要直接在框里填写数字了。
 
-```rdview2 8 9
+```rdtkview 8 9
 {"beat": 2, "y": 1, "type": "AddClassicBeat", "row": 0, "tick": 1, "swing": 0.25, "hold": 0 },
 {"beat": 2, "y": 2, "type": "AddClassicBeat", "row": 0, "tick": 1, "swing": 0.5, "hold": 0 },
 {"beat": 2, "y": 3, "type": "AddClassicBeat", "row": 0, "tick": 1, "swing": 0.75, "hold": 0 },
@@ -36,6 +36,8 @@
 
 > 尽量不要在第一拍设置`X`记号，这对纯音押玩家是不可预知的，在轨道数量多的情况下也会显得比较难理清节奏。如果你觉得你的音乐中这段节奏第一拍不放`X`就浑身难受，那也需要打开护士数拍（参考`X-WOT`这关中的`xx-----`）。
 
+> 此外像马克的短轨道，需调用自定义方法来完成，语句为`SetRowLength(轨道编号[0索引的], 轨道长度[1~7的整数])`。如果你还不明白自定义方法是什么，需要先翻到[自定义方法](../pages/custommethod.md)看看。考虑到这玩意问的人比较多，所以就先写在此处了。
+
 最后的选项“**分解为自由时长节拍**”较为复杂，我们放到[这里](/pages/moreclassicbeats)再介绍。
 
 ## 护士节奏提示

pages/credits.md

@@ -13,6 +13,7 @@
 	- [NoMathExpectation](https://space.bilibili.com/184862524)  
     - [0x4D2](https://space.bilibili.com/478595264)  
     - [正宗的小绿君](https://space.bilibili.com/1782518253)
+    - [kuanpan](https://space.bilibili.com/1928620300)
 - 视频制作：
     - [吾夜犹明](https://space.bilibili.com/29219948)
     - [山不转水到渠成](https://space.bilibili.com/4870582)

pages/moreoneshotbeats.md

@@ -179,7 +179,7 @@ es.SayReadyGetSetGo_Go 3 1[];
 
 与方块单发拍的概念类似，**细分拍**也是“一次性”的单发拍，但是会产生多次等间距的心跳脉冲，按键的次数也变为多次。
 
-细分拍最早出现于`MD-1`，当时官方谱面没有官方名称，且最多仅有两个三角拍；后来第五章更新后三角拍首次出现在`5-1`并正式更名为**细分拍**，并出现了多个细分。
+细分拍最早出现于`MD-1`，当时官方谱面没有官方名称，且最多仅有两个三角拍；后来第五章更新后三角拍首次出现在`5-1`并正式更名为**细分拍**，并出现了多个细分；在关卡`5-2N`中最多涉及到了五级细分；正式版更新后，在关卡`7-X2`中甚至有了八细分。
 
 在修饰符中选择方块后，将细分数量设为大于 1 的值或者点击细分符号`△`，即可创建细分拍。特殊音效的添加与方块单发拍类似。最多可以将细分数量设置为 10 。
 
@@ -338,6 +338,52 @@ g 0 -1 3 2 #0000[offset=0 1]{
 };
 ```
 
+## 长按单发拍
+
+长按单发拍第一次出现在`7-1`
+
+当听到`咻噗`的声音时，说明下一次击拍需要长按到下一个出拍点。
+
+在修饰符中选中进度条符号就创建了一个长按单发拍，会多出`间隔`与`长按提示选项`选项。
+
+![](../images/moreoneshothold.png)
+
+对于长按单发拍，一共有四个关键的时间点：十字，出拍点（绿线），按拍点（黄线），长按（紫色格子）。
+```rdtkview 5 3
+  { "bar": 1, "beat": 3, "y": 2, "type": "AddOneshotBeat","interval": 2, "tick": 1, "hold": true }
+```
+
+- **十字**显示长按单发拍子的提示音。
+- **绿线**代表单发拍会在此响一次。
+- **黄线**表示长按的起始点，也就是说玩家应当从这里开始长按。
+- **紫格**就是此次长按所需的时间。
+- **绿线**与**黄线**之间的间隔就是`拍长`的时间。
+- **十字**与**黄线**或者**绿线**与**紫格**末端之间的间隔就是`间隔`的时间。
+
+在`长按提示`有三个选项，分别是：自动、偏早、偏晚。
+
+- 选择**偏早**时，`十字`的位置会在`绿线`之前。
+- 选择**偏晚**时，`十字`不会显示，但提示音会与`绿线`重合。
+- 选择**自动**时：
+-  若**拍长**小于或等于1，则像`偏早`一样，长按单发拍子的提示音会在`绿线`之前；
+-  若**拍长**大于1，则像`偏晚`一样，`十字`不会显示，但提示音会与`绿线`重合。
+
+```rdtkview 5 5
+    { "bar": 1, "beat": 3, "y": 2, "type": "AddOneshotBeat","interval": 2, "tick": 1, "hold": true },
+    { "bar": 1, "beat": 3, "y": 3, "type": "AddOneshotBeat","interval": 2, "tick": 1, "hold": true },
+    { "bar": 1, "beat": 3, "y": 4, "type": "AddOneshotBeat","interval": 2, "tick": 1, "hold": true }
+```
+
+若设计长按单发拍，还必须满足松手音效与提示音不可重叠
+
+如果需要在长按单发拍上叠加多个拍子来凸显鼓点，可以将他们的按拍点放在同一位置。
+
+```rdtkview 5 3
+    { "bar": 1, "beat": 1.5, "y": 2, "tick": 2.5, "type": "AddOneshotBeat" },
+    { "bar": 1, "beat": 2.5, "y": 2, "tick": 1.5, "type": "AddOneshotBeat" },
+    { "bar": 1, "beat": 3, "y": 2, "type": "AddOneshotBeat","interval": 2, "tick": 1, "hold": true }
+```
+
 最后我们针对细分拍、冻结拍、灼热拍做一个技术总结：
 
 ```rdview 19 7

pages/moverow.md

@@ -116,6 +116,19 @@
 
 5、**移动角色和心脏：**角色和心脏的移动是以他们在轨道中的位置为原点来移动的，比如填写`x: 0, y: 20px`则角色或者心脏向上移动20个像素。你可以使用这个功能把整个轨道挪到屏幕外面去，再以此为原点把心脏挪回来，就可以做到在屏幕内只显示心脏。
 
+## 旋转轨道
+
+> 目前该事件还不稳定，部分动作可能与轨道移动有冲突。
+
+如果想要实现`6-2`马克一人多轨的情况就可以使旋转轨道事件。
+
+先准备两个轨道，使用`连接`将轨道2连接到轨道1上，此时心会自动变成裂纹状态，如果不想要这个效果，可以用下一章轨道涂色里的`心`设置回默认。
+
+在连接后，通过`分割`可以将两个轨道都显示出来，这两个轨道都会对被连接到的轨道对应角色产生影响。
+
+`断开`后这些轨道都会回复正常状态。
+
+
 ## 演示关卡
 
 版面已经占的有些多了，更多的轨道移动脑洞我们留在演示关卡中间。

pages/oneshotbeat.md

@@ -1,4 +1,4 @@
-# 05 单发拍子
+# 单发拍子
 
 ## 单发拍子功能介绍
 

script/rdtkview_render.js

@@ -0,0 +1,79 @@
+import { createElementEvent } from "./rdtkview.js";
+export function render(data, width, height, scale = 2.0) {
+    const canvas = document.createElement("div");
+    let objs = [];
+    try {
+        objs = JSON.parse(`[${data}]`);
+        canvas.innerHTML = "";
+    } catch (e) {
+        canvas.innerHTML =
+            `<div style="color: red; font-weight: bold;">JSON解析错误：${e.message}</div>`;
+        return canvas;
+    }
+    const eventStyle = { "scale": scale, "showDuration": false };
+    const elems = [];
+    for (let obj of objs) {
+        const style = { ...eventStyle, enabled: obj.active ?? true };
+        const elem = createElementEvent(obj, style);
+        if (!elem) continue;
+        elem.eventStyle = style;
+        elem.style.position = "absolute";
+        elem.style.left = `${
+            ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
+            scale
+        }px`;
+        elem.style.top = `${(obj.y ?? obj.row ?? 0) * 14 * scale}px`;
+        elem.addEventListener("mousedown", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.active = true;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseover", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.hover = true;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseout", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.hover = false;
+            eStyle.active = false;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseup", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.active = false;
+            elem.onStateChange(eStyle);
+        });
+        elems.push(elem);
+    }
+    canvas.style.position = "relative";
+    canvas.style.width = `${width * 14 * scale}px`;
+    canvas.style.height = `${height * 14 * scale}px`;
+    elems.forEach((elem) => {
+        canvas.appendChild(elem);
+    });
+    return canvas;
+}
+
+window.$docsify.plugins = [].concat(window.$docsify.plugins, (hook) => {
+    hook.doneEach(() => {
+        const pres = document.querySelectorAll("pre");
+        pres.forEach((codeBlock) => {
+            const lang = codeBlock.getAttribute("data-lang") || "";
+            if (lang.startsWith("rdtkview")) {
+            const code = codeBlock.querySelector("code").innerText || "";
+                const args = lang.slice(8).trim().split(" ");
+                const width = parseInt(args[0]) || 8;
+                const height = parseInt(args[1]) || 4;
+                const scale = parseFloat(args[2]) || 2.0;
+                const result = render(code, width, height, scale);
+                const parent = document.createElement("div");
+                parent.style.width = 100 + "%";
+                parent.style.display = "flex";
+                parent.style.justifyContent = "center";
+                parent.appendChild(result);
+                codeBlock.replaceWith(parent);
+            }
+        });
+    });
+});

script/special.js

@@ -1,4 +1,4 @@
-import { createElementEvent } from "./View.js";
+import { createElementEvent } from "./rdtkview.js";
 
 let curx = 0;
 let cury = 0;
@@ -322,52 +322,58 @@ function rdview2() {
         }
         const eventStyle = { "scale": 2.0, "showDuration": false };
         let maxy = 0;
+        const elemPromises = [];
         for (let obj of objs) {
             const style = { ...eventStyle, enabled: obj.active ?? true };
-            const elem = createElementEvent(obj, style);
-            elem.eventStyle = style;
-            elem.style.position = "absolute";
-            elem.style.left = `${
-                ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
-                eventStyle.scale
-            }px`;
-            elem.style.top = `${
-                (obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale
-            }px`;
-            if (
-                ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
-                        elem.offsetHeight > maxy
-            ) {
-                maxy = ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
-                    elem.offsetHeight;
-            }
-            elem.addEventListener("mousedown", (event) => {
-                const eStyle = elem.eventStyle;
-                eStyle.active = true;
-                elem.onStateChange(eStyle);
+            const elem = createElementEvent(obj, style).then((elem) => {
+                elem.eventStyle = style;
+                elem.style.position = "absolute";
+                elem.style.left = `${
+                    ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
+                    eventStyle.scale
+                }px`;
+                elem.style.top = `${
+                    (obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale
+                }px`;
+                if (
+                    ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
+                            elem.offsetHeight > maxy
+                ) {
+                    maxy = ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
+                        elem.offsetHeight;
+                }
+                elem.addEventListener("mousedown", (event) => {
+                    const eStyle = elem.eventStyle;
+                    eStyle.active = true;
+                    elem.onStateChange(eStyle);
+                });
+                elem.addEventListener("mouseover", (event) => {
+                    const eStyle = elem.eventStyle;
+                    eStyle.hover = true;
+                    elem.onStateChange(eStyle);
+                });
+                elem.addEventListener("mouseout", (event) => {
+                    const eStyle = elem.eventStyle;
+                    eStyle.hover = false;
+                    eStyle.active = false;
+                    elem.onStateChange(eStyle);
+                });
+                elem.addEventListener("mouseup", (event) => {
+                    const eStyle = elem.eventStyle;
+                    eStyle.active = false;
+                    elem.onStateChange(eStyle);
+                });
+                return elem;
             });
-            elem.addEventListener("mouseover", (event) => {
-                const eStyle = elem.eventStyle;
-                eStyle.hover = true;
-                elem.onStateChange(eStyle);
-            });
-            elem.addEventListener("mouseout", (event) => {
-                const eStyle = elem.eventStyle;
-                eStyle.hover = false;
-                eStyle.active = false;
-                elem.onStateChange(eStyle);
-            });
-            elem.addEventListener("mouseup", (event) => {
-                const eStyle = elem.eventStyle;
-                eStyle.active = false;
-                elem.onStateChange(eStyle);
-            });
-            rdcanvas.style.position = "relative";
-            rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;
-            if (elem) {
-                rdcanvas.appendChild(elem);
-            }
+            elemPromises.push(elem);
         }
+        Promise.all(elemPromises).then((elems) => {
+            elems.forEach((elem) => {
+                rdcanvas.appendChild(elem);
+            });
+        });
+        rdcanvas.style.position = "relative";
+        rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;
     }
     initCanvas();
     initLineNumbers();