forked from RDCNWebs/rd.rdlevel.cn
[RDView2] DOM 渲染基本完工，进入可行性测试阶段
This commit is contained in:
OLDREDSTONE
parent
fb2e0e124b
commit
758645041b
35
index.html
35
index.html
@ -19,8 +19,8 @@
|
||||
<link rel="stylesheet" href="/style/special.css">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #1f1f1f;">
|
||||
<div id="app" style="color: white;">加载中...</div>
|
||||
<body>
|
||||
<div id="app">加载中...</div>
|
||||
<script>
|
||||
$docsify = {
|
||||
name: "节奏医生编辑器教程",
|
||||
@ -36,11 +36,6 @@
|
||||
</script>
|
||||
<script type="module">
|
||||
import "/script/rdview.js";
|
||||
import {
|
||||
Extensions,
|
||||
IconStyle,
|
||||
Point,
|
||||
} from "/script/Extensions.js";
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
@ -58,30 +53,7 @@
|
||||
...{
|
||||
markdown: {
|
||||
renderer: {
|
||||
code: function (code, lang) {
|
||||
if (
|
||||
lang.trim().startsWith(
|
||||
"rdview2",
|
||||
)
|
||||
) {
|
||||
const langParts = lang
|
||||
.trim().split(" ");
|
||||
const width =
|
||||
parseInt(
|
||||
langParts[1],
|
||||
) || 8;
|
||||
const height =
|
||||
parseInt(
|
||||
langParts[2],
|
||||
) || 4;
|
||||
const scale =
|
||||
(parseFloat(
|
||||
langParts[3],
|
||||
) || 1) * 2;
|
||||
return `<div class="rdview2-container"><canvas class="rdview2-canvas" image-rendering: pixelated;" data-width="${width}" data-height="${height}" data-scale="${scale}"" data='${
|
||||
JSON.stringify(code)
|
||||
}'></canvas></div>`;
|
||||
} else if (
|
||||
code: function (code, lang) {if (
|
||||
lang.trim().startsWith(
|
||||
"rdview",
|
||||
)
|
||||
@ -127,7 +99,6 @@
|
||||
};
|
||||
</script>
|
||||
<script type="module" src="./script/special.js"></script>
|
||||
<script type="module" src="./script/rdview2.js"></script>
|
||||
<!-- <script src="/script/docsify.min.js"></script> -->
|
||||
<script src="/script/zoom-image.min.js"></script>
|
||||
<script src="/script/search.min.js"></script>
|
||||
|
||||
@ -23,22 +23,69 @@ g 1 1 5 4 #0ff{
|
||||
---
|
||||
|
||||
<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": 1, "type": "SetTheme", "rooms": [0], "preset": "OrientalTechno", "skipPaintEffects": false },
|
||||
{ "bar": 1, "y": 0, "type": "PlaySong", "song": {"filename": "sndOrientalTechno"}, "bpm": 100, "loop": false },
|
||||
{ "bar": 1, "beat": 2, "y": 3, "type": "Comment", "tab": "Actions", "text": "", "color": "F2E644", "show": false },
|
||||
{ "bar": 1, "beat": 3, "y": 0, "type": "AddOneshotBeat", "active": false, "row": 0, "pulseType": "Triangle", "freezeBurnMode": "Burnshot", "interval": 2, "tick": 1.5, "loops": 3, "subdivisions": 3, "subdivSound": true },
|
||||
{ "bar": 1, "beat": 3, "y": 2, "type": "Comment", "tab": "Actions", "text": "", "color": "FF002F", "show": false },
|
||||
{ "bar": 1, "beat": 3.75, "y": 1, "type": "ReorderWindows", "order": [1, 3, 2, 0] },
|
||||
{ "bar": 1, "beat": 4, "y": 3, "type": "Comment", "tab": "Actions", "text": "", "color": "pal14", "show": false },
|
||||
{ "bar": 1, "beat": 5, "y": 2, "type": "ReorderRooms", "order": [3, 0, 2, 1] },
|
||||
{ "bar": 1, "beat": 7, "y": 1, "type": "AddClassicBeat", "row": 1, "tick": 1, "swing": 0, "hold": 0 },
|
||||
{ "bar": 2, "beat": 5.5, "y": 2, "type": "AddFreeTimeBeat", "row": 1, "pulse": 4, "hold": 2 },
|
||||
{ "bar": 2, "beat": 6.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
|
||||
{ "bar": 2, "beat": 7.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
|
||||
{ "bar": 2, "beat": 8.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Custom", "hold": 1, "customPulse": 0 },
|
||||
{ "bar": 3, "beat": 1.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Decrement", "hold": 0 },
|
||||
{ "bar": 3, "beat": 2.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
|
||||
{ "bar": 3, "beat": 3.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 }
|
||||
{ "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 },
|
||||
{ "bar": 1, "beat": 2, "y": 0, "type": "AddClassicBeat", "tick": 0.5, "swing": 0, "hold": 0 },
|
||||
{ "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": 5, "y": 1, "type": "SetBeatsPerMinute", "if": "~3d0", "beatsPerMinute": 100 },
|
||||
{ "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": 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": 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": 4, "type": "SetPlayStyle", "PlayStyle": "Normal", "NextBar": 1, "Relative": true },
|
||||
{ "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": 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": 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": 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": 4, "type": "CallCustomMethod", "methodName": "", "executionTime": "OnBar", "sortOffset": 0 },
|
||||
{ "bar": 4, "beat": 2, "y": 2, "type": "FadeRoom", "opacity": 100, "duration": 2, "ease": "Linear" },
|
||||
{ "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": 5, "type": "SetRoomContentMode", "mode": "Center" },
|
||||
{ "bar": 4, "beat": 8, "y": 6, "type": "TagAction", "Action": "Run", "Tag": "Nothing" },
|
||||
{ "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>
|
||||
|
||||
---
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 6.5 KiB |
1176
script/Extensions.js
1176
script/Extensions.js
File diff suppressed because it is too large
Load Diff
576
script/View.js
576
script/View.js
@ -213,7 +213,22 @@ var Color = class _Color {
|
||||
return new _Color(this.argb);
|
||||
}
|
||||
static FromRgba(r, g, b, a) {
|
||||
return new _Color(a, r, g, b);
|
||||
if (typeof r === "string" && g === void 0 && b === void 0 && a === void 0) {
|
||||
r = r.trim();
|
||||
if (r[0] === "#") r = r.slice(1);
|
||||
if (r.length === 8) {
|
||||
return new _Color(r.slice(6, 8) + r.slice(0, 6));
|
||||
} else if (r.length === 6) return new _Color(r);
|
||||
else if (r.length === 4) {
|
||||
return new _Color(r[3] + r[3] + r.slice(0, 3).split("").map((i) => i + i).join(""));
|
||||
} else if (r.length === 3) {
|
||||
return new _Color("FF" + r.split("").map((i) => i + i).join(""));
|
||||
} else return new _Color();
|
||||
} else if (typeof r === "number" && typeof g === "number" && typeof b === "number" && typeof a === "number") {
|
||||
return new _Color(a, r, g, b);
|
||||
} else {
|
||||
return new _Color();
|
||||
}
|
||||
}
|
||||
toRgbaString() {
|
||||
return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a / 255})`;
|
||||
@ -263,7 +278,7 @@ var SliceInfo = class {
|
||||
};
|
||||
var assetFilePath = "assets.png";
|
||||
var slicesFilePath = "assets.bin";
|
||||
var directoryPath = "./script";
|
||||
var directoryPath = "./rdviewAssets";
|
||||
async function loadAssetFile() {
|
||||
const pngPath = directoryPath + "/" + assetFilePath;
|
||||
return await new Promise((resolve, reject) => {
|
||||
@ -351,6 +366,36 @@ var Tab = /* @__PURE__ */ function(Tab2) {
|
||||
Tab2["Unknown"] = "unknown";
|
||||
return Tab2;
|
||||
}({});
|
||||
var SayReadyGetSetGoWords = /* @__PURE__ */ function(SayReadyGetSetGoWords2) {
|
||||
SayReadyGetSetGoWords2["SayReaDyGetSetGoNew"] = "SayReaDyGetSetGoNew";
|
||||
SayReadyGetSetGoWords2["SayReaDyGetSetOne"] = "SayReaDyGetSetOne";
|
||||
SayReadyGetSetGoWords2["SayGetSetGo"] = "SayGetSetGo";
|
||||
SayReadyGetSetGoWords2["SayGetSetOne"] = "SayGetSetOne";
|
||||
SayReadyGetSetGoWords2["JustSayRea"] = "JustSayRea";
|
||||
SayReadyGetSetGoWords2["JustSayDy"] = "JustSayDy";
|
||||
SayReadyGetSetGoWords2["JustSayGet"] = "JustSayGet";
|
||||
SayReadyGetSetGoWords2["JustSaySet"] = "JustSaySet";
|
||||
SayReadyGetSetGoWords2["JustSayAnd"] = "JustSayAnd";
|
||||
SayReadyGetSetGoWords2["JustSayGo"] = "JustSayGo";
|
||||
SayReadyGetSetGoWords2["JustSayStop"] = "JustSayStop";
|
||||
SayReadyGetSetGoWords2["JustSayAndStop"] = "JustSayAndStop";
|
||||
SayReadyGetSetGoWords2["SaySwitch"] = "SaySwitch";
|
||||
SayReadyGetSetGoWords2["SayWatch"] = "SayWatch";
|
||||
SayReadyGetSetGoWords2["SayListen"] = "SayListen";
|
||||
SayReadyGetSetGoWords2["Count1"] = "Count1";
|
||||
SayReadyGetSetGoWords2["Count2"] = "Count2";
|
||||
SayReadyGetSetGoWords2["Count3"] = "Count3";
|
||||
SayReadyGetSetGoWords2["Count4"] = "Count4";
|
||||
SayReadyGetSetGoWords2["Count5"] = "Count5";
|
||||
SayReadyGetSetGoWords2["Count6"] = "Count6";
|
||||
SayReadyGetSetGoWords2["Count7"] = "Count7";
|
||||
SayReadyGetSetGoWords2["Count8"] = "Count8";
|
||||
SayReadyGetSetGoWords2["Count9"] = "Count9";
|
||||
SayReadyGetSetGoWords2["Count10"] = "Count10";
|
||||
SayReadyGetSetGoWords2["SayReadyGetSetGo"] = "SayReadyGetSetGo";
|
||||
SayReadyGetSetGoWords2["JustSayReady"] = "JustSayReady";
|
||||
return SayReadyGetSetGoWords2;
|
||||
}({});
|
||||
var EventType = /* @__PURE__ */ function(EventType2) {
|
||||
EventType2["AddClassicBeat"] = "AddClassicBeat";
|
||||
EventType2["AddFreeTimeBeat"] = "AddFreeTimeBeat";
|
||||
@ -455,9 +500,7 @@ var EventInfo = class {
|
||||
constructor(tab, enumAttriblte, durationKey) {
|
||||
this.defaultTab = tab;
|
||||
this.attr = enumAttriblte ?? EventAttriblte.None;
|
||||
if (durationKey !== void 0) {
|
||||
this.durationKey = durationKey;
|
||||
}
|
||||
this.durationKey = durationKey ?? "duration";
|
||||
}
|
||||
};
|
||||
var WordInfo = class {
|
||||
@ -501,20 +544,20 @@ var EventInfos = {
|
||||
AddClassicBeat: new EventInfo(Tab.Rows),
|
||||
AddFreeTimeBeat: new EventInfo(Tab.Rows),
|
||||
AddOneshotBeat: new EventInfo(Tab.Rows),
|
||||
AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
BassDrop: new EventInfo(Tab.Actions),
|
||||
Blend: new EventInfo(Tab.Decorations),
|
||||
CallCustomMethod: new EventInfo(Tab.Actions),
|
||||
ChangeCharacter: new EventInfo(Tab.Actions),
|
||||
ChangePlayersRows: new EventInfo(Tab.Actions),
|
||||
Comment: new EventInfo(Tab.Unknown),
|
||||
CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
DesktopColor: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
|
||||
FadeRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
|
||||
CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
DesktopColor: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent, "duration"),
|
||||
FadeRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
|
||||
FinishLevel: new EventInfo(Tab.Actions),
|
||||
Flash: new EventInfo(Tab.Actions),
|
||||
FlipScreen: new EventInfo(Tab.Actions),
|
||||
FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
ForwardDecorationEvent: new EventInfo(Tab.Decorations),
|
||||
ForwardEvent: new EventInfo(Tab.Unknown),
|
||||
ForwardRowEvent: new EventInfo(Tab.Rows),
|
||||
@ -523,13 +566,13 @@ var EventInfos = {
|
||||
InvertColors: new EventInfo(Tab.Actions),
|
||||
MacroEvent: new EventInfo(Tab.Unknown),
|
||||
MaskRoom: new EventInfo(Tab.Rooms),
|
||||
Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
|
||||
MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
|
||||
MoveRow: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
|
||||
MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
|
||||
MoveRow: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
NarrateRowInfo: new EventInfo(Tab.Sounds),
|
||||
NewWindowDance: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
PaintHands: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
NewWindowDance: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
PaintHands: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
PlayAnimation: new EventInfo(Tab.Decorations),
|
||||
PlayExpression: new EventInfo(Tab.Actions),
|
||||
PlaySong: new EventInfo(Tab.Sounds),
|
||||
@ -543,13 +586,13 @@ var EventInfos = {
|
||||
ReorderSprite: new EventInfo(Tab.Decorations),
|
||||
ReorderWindows: new EventInfo(Tab.Windows),
|
||||
SayReadyGetSetGo: new EventInfo(Tab.Sounds),
|
||||
SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
SetBeatSound: new EventInfo(Tab.Sounds),
|
||||
SetBeatsPerMinute: new EventInfo(Tab.Sounds),
|
||||
SetClapSounds: new EventInfo(Tab.Sounds),
|
||||
SetCountingSound: new EventInfo(Tab.Sounds),
|
||||
SetCrotchetsPerBar: new EventInfo(Tab.Sounds),
|
||||
SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
SetGameSound: new EventInfo(Tab.Sounds),
|
||||
SetHandOwner: new EventInfo(Tab.Actions),
|
||||
SetHeartExplodeInterval: new EventInfo(Tab.Sounds),
|
||||
@ -558,28 +601,28 @@ var EventInfos = {
|
||||
SetOneshotWave: new EventInfo(Tab.Rows),
|
||||
SetPlayStyle: new EventInfo(Tab.Actions),
|
||||
SetRoomContentMode: new EventInfo(Tab.Rooms),
|
||||
SetRoomPerspective: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
|
||||
SetRoomPerspective: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
|
||||
SetRowXs: new EventInfo(Tab.Rows),
|
||||
SetSpeed: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetTheme: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetVFXPreset: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetSpeed: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
SetTheme: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
SetVFXPreset: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
SetVisible: new EventInfo(Tab.Decorations),
|
||||
SetWindowContent: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent),
|
||||
ShakeScreen: new EventInfo(Tab.Actions),
|
||||
ShakeScreenCustom: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SetWindowContent: new EventInfo(Tab.Windows, EventAttriblte.DurationEvent, "duration"),
|
||||
ShakeScreen: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent),
|
||||
ShakeScreenCustom: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
ShowDialogue: new EventInfo(Tab.Actions),
|
||||
ShowHands: new EventInfo(Tab.Actions),
|
||||
ShowRooms: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent),
|
||||
ShowStatusSign: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
ShowRooms: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"),
|
||||
ShowStatusSign: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
ShowSubdivisionsRows: new EventInfo(Tab.Actions),
|
||||
SpinningRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
SpinningRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"),
|
||||
Stutter: new EventInfo(Tab.Actions),
|
||||
TagAction: new EventInfo(Tab.Actions),
|
||||
TextExplosion: new EventInfo(Tab.Actions),
|
||||
Tile: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
|
||||
Tint: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent),
|
||||
TintRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent),
|
||||
WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent)
|
||||
Tile: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
|
||||
Tint: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"),
|
||||
TintRows: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"),
|
||||
WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration")
|
||||
};
|
||||
|
||||
// View.ts
|
||||
@ -600,8 +643,8 @@ function createLayer(key, bound, color, style) {
|
||||
const layer = document.createElement("div");
|
||||
const info = slices.get(key);
|
||||
layer.style.position = "absolute";
|
||||
layer.style.boxSizing = "content-box";
|
||||
if (info.isNinePatch) {
|
||||
layer.style.boxSizing = "content-box";
|
||||
if (info?.isNinePatch) {
|
||||
const center = info.center;
|
||||
const width = bound?.width ?? info.bounds.width;
|
||||
const height = bound?.height ?? info.bounds.height;
|
||||
@ -617,12 +660,25 @@ function createLayer(key, bound, color, style) {
|
||||
layer.style.width = `${(width - center.left - (info.bounds.width - center.right)) * style.scale}px`;
|
||||
layer.style.height = `${(height - center.top - (info.bounds.height - center.bottom)) * style.scale}px`;
|
||||
} else {
|
||||
layer.style.left = `${((bound?.left ?? bound?.x ?? 0) - info.pivot.x) * style.scale}px`;
|
||||
layer.style.top = `${((bound?.top ?? bound?.y ?? 0) - info.pivot.y) * style.scale}px`;
|
||||
layer.style.width = `${(bound?.width ?? info.bounds.width) * style.scale}px`;
|
||||
layer.style.height = `${(bound?.height ?? info.bounds.height) * style.scale}px`;
|
||||
layer.style.backgroundImage = `url(${info.blobUrl})`;
|
||||
layer.style.backgroundSize = `${bound?.width ?? info.bounds.width * style.scale}px ${bound?.height ?? info.bounds.height * style.scale}px`;
|
||||
if (bound instanceof Rect) {
|
||||
layer.style.left = `${(bound.left - (info?.pivot.x ?? 0)) * style.scale}px`;
|
||||
layer.style.top = `${(bound.top - (info?.pivot.y ?? 0)) * style.scale}px`;
|
||||
layer.style.width = `${(bound.width ?? info?.bounds.width ?? 0) * style.scale}px`;
|
||||
layer.style.height = `${(bound.height ?? info?.bounds.height ?? 0) * style.scale}px`;
|
||||
if (info) {
|
||||
layer.style.backgroundImage = `url(${info.blobUrl})`;
|
||||
}
|
||||
layer.style.backgroundSize = `${(bound.width ?? info?.bounds.width ?? 0) * style.scale}px ${(bound.height ?? info?.bounds.height ?? 0) * style.scale}px`;
|
||||
} else {
|
||||
layer.style.left = `${((bound?.x ?? 0) - (info?.pivot.x ?? 0)) * style.scale}px`;
|
||||
layer.style.top = `${((bound?.y ?? 0) - (info?.pivot.y ?? 0)) * style.scale}px`;
|
||||
layer.style.width = `${(info?.bounds.width ?? 0) * style.scale}px`;
|
||||
layer.style.height = `${(info?.bounds.height ?? 0) * style.scale}px`;
|
||||
if (info) {
|
||||
layer.style.backgroundImage = `url(${info.blobUrl})`;
|
||||
}
|
||||
layer.style.backgroundSize = `${(info?.bounds.width ?? 0) * style.scale}px ${(info?.bounds.height ?? 0) * style.scale}px`;
|
||||
}
|
||||
}
|
||||
if (color && Color.White.equals(color) === false) {
|
||||
const filterId = getColorMatrixId(color);
|
||||
@ -663,7 +719,22 @@ function getColorMatrixId(rgba) {
|
||||
colorMatrixIds.set(rgba.toUint32(), filter.getAttribute("id"));
|
||||
return filter.getAttribute("id");
|
||||
}
|
||||
function createRDFontLayer(text, style) {
|
||||
function measureRDFontText(text) {
|
||||
let len = 0;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text.charAt(i);
|
||||
if (char === "\n") {
|
||||
len = 0;
|
||||
} else {
|
||||
const charCode = char.charCodeAt(0);
|
||||
const charKey = `char_${charCode.toString(16).padStart(4, "0")}`;
|
||||
const charInfo = slices.get(charKey);
|
||||
len += charInfo?.bounds.width ?? 0;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
function createRDFontLayer(text, style, color) {
|
||||
const lineHead = new Point(0, -charHeight);
|
||||
const start = lineHead.clone();
|
||||
const layer = document.createElement("div");
|
||||
@ -677,9 +748,11 @@ function createRDFontLayer(text, style) {
|
||||
const charCode = char.charCodeAt(0);
|
||||
const charKey = `char_${charCode.toString(16).padStart(4, "0")}`;
|
||||
const charInfo = slices.get(charKey);
|
||||
const charLayer = createLayer(charKey, new Point(start.x, start.y), null, style);
|
||||
start.x += (charInfo?.bounds.width ?? charHeight) * style.scale;
|
||||
layer.appendChild(charLayer);
|
||||
if (charInfo) {
|
||||
const charLayer = createLayer(charKey, new Point(start.x, start.y), color, style);
|
||||
start.x += charInfo.bounds.width * style.scale;
|
||||
layer.appendChild(charLayer);
|
||||
}
|
||||
}
|
||||
}
|
||||
return layer;
|
||||
@ -719,6 +792,7 @@ function colorOf(tab) {
|
||||
}
|
||||
}
|
||||
function layerHoverInit(layer) {
|
||||
layer.style.opacity = "0";
|
||||
layer.onStateChange = (style) => {
|
||||
if (style.hover) {
|
||||
layer.style.opacity = "1.0";
|
||||
@ -727,15 +801,46 @@ function layerHoverInit(layer) {
|
||||
}
|
||||
};
|
||||
}
|
||||
function createHintLayer(hint, width, color) {
|
||||
const hintLayer = document.createElement("div");
|
||||
hintLayer.style.position = "absolute";
|
||||
hintLayer.style.left = `${width}px`;
|
||||
hintLayer.style.width = `max-content`;
|
||||
hintLayer.innerHTML = hint;
|
||||
hintLayer.style.fontSize = `${18}px`;
|
||||
hintLayer.style.fontFamily = "d9, Arial, sans-serif";
|
||||
hintLayer.style.color = color.toRgbaString();
|
||||
hintLayer.style.fontWeight = "bold";
|
||||
hintLayer.style.textShadow = `
|
||||
2px 2px 0 black,
|
||||
2px 0px 0 black,
|
||||
2px -2px 0 black,
|
||||
0px -2px 0 black,
|
||||
-2px -2px 0 black,
|
||||
-2px 0px 0 black,
|
||||
-2px 2px 0 black,
|
||||
0px 2px 0 black
|
||||
`;
|
||||
hintLayer.style.pointerEvents = "none";
|
||||
hintLayer.style.opacity = "0";
|
||||
hintLayer.style.zIndex = "10";
|
||||
hintLayer.onStateChange = (style) => {
|
||||
if (style.hover) {
|
||||
hintLayer.style.opacity = "1.0";
|
||||
} else {
|
||||
hintLayer.style.opacity = "0";
|
||||
}
|
||||
};
|
||||
return hintLayer;
|
||||
}
|
||||
function createElementEvent(obj, style) {
|
||||
style = {
|
||||
...new IconStyle(),
|
||||
...style
|
||||
};
|
||||
const evttype = obj.type;
|
||||
const evttype = obj.type ?? EventType.ForwardEvent;
|
||||
let key0 = `event_${obj.type}`;
|
||||
if (!slices.has(key0)) {
|
||||
console.warn(`Slice for event type ${evttype} not found, using Unknown.`);
|
||||
if (!slices.has("event_Unknown")) {
|
||||
return null;
|
||||
}
|
||||
@ -759,9 +864,13 @@ function createElementEvent(obj, style) {
|
||||
const beatline = "event_beat_line";
|
||||
const evtag = "event_tag";
|
||||
const evbarea = "event_beat_area";
|
||||
const evbskip = "event_beat_skip";
|
||||
const beatColor = new Color(4284539717);
|
||||
const element = document.createElement("div");
|
||||
const internalLayers = [];
|
||||
if (evttype === EventType.NewWindowDance) {
|
||||
obj.tab = obj.customTab ?? Tab.Windows;
|
||||
}
|
||||
function addLayers(layers) {
|
||||
for (const layer of layers) {
|
||||
if (layer) {
|
||||
@ -811,19 +920,22 @@ function createElementEvent(obj, style) {
|
||||
const loop = obj.loops ?? 0;
|
||||
const subdiv = obj.subdivisions ?? 1;
|
||||
const hold = obj.hold ?? false;
|
||||
const skip = obj.skipshot ?? false;
|
||||
const mode = obj.freezeBurnMode ?? null;
|
||||
const delay = obj.freezeBurnMode === "Freezeshot" ? obj.delay ?? 0 : 0;
|
||||
const subdivWidth = iconSize * (subdiv - 1) / subdiv * tick;
|
||||
const eventWidth = iconSize * (interval * loop + tick + delay);
|
||||
const off = interval - tick;
|
||||
const backLayers2 = createBackLayer(new Size(eventWidth, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
const holdWidth = iconSize * (interval - tick - delay);
|
||||
const holdWidth = hold ? iconSize * (interval - tick - delay) : 0;
|
||||
const holdLayer = hold && holdWidth - subdivWidth > 0 ? createLayer(evbarea, new Rect(eventWidth + subdivWidth, 0, holdWidth - subdivWidth, iconSize), new Color(style.enabled ? 4291839731 : 4285493103), style) : null;
|
||||
const subdivLayer = subdiv > 1 ? createLayer(evbarea, new Rect(eventWidth, 0, subdivWidth, iconSize), new Color(style.enabled ? 4279480353 : 4285493103), style) : null;
|
||||
const skipshotLayer = obj.skipshot ?? false ? createLayer(evbarea, new Rect(eventWidth + Math.max(subdivWidth, holdWidth), 0, iconSize * interval - Math.max(subdivWidth, holdWidth), iconSize), new Color(style.enabled ? 4291115835 : 4285493103), style) : null;
|
||||
const skipshotLayer = skip ? createLayer(evbarea, new Rect(eventWidth + Math.max(subdivWidth, holdWidth), 0, iconSize * (interval - delay) - Math.max(subdivWidth, holdWidth), iconSize), new Color(style.enabled ? 4291115835 : 4285493103), style) : null;
|
||||
const skipHitLayer = skip ? createLayer(evbskip, new Point(eventWidth + iconSize * (interval - delay) - 1, 0), null, style) : null;
|
||||
if (holdLayer) holdLayer.style.pointerEvents = "none";
|
||||
if (subdivLayer) subdivLayer.style.pointerEvents = "none";
|
||||
if (skipshotLayer) skipshotLayer.style.pointerEvents = "none";
|
||||
if (skipHitLayer) skipHitLayer.style.pointerEvents = "none";
|
||||
const pulses = [];
|
||||
const crossLayers = [];
|
||||
const posx = -off * iconSize;
|
||||
@ -853,6 +965,7 @@ function createElementEvent(obj, style) {
|
||||
}
|
||||
const loopLayer = createLayer("event_beat_loop", new Point(eventWidth, 0), null, style);
|
||||
loopLayer.style.opacity = "0";
|
||||
loopLayer.style.zIndex = "5";
|
||||
loopLayer.onStateChange = (style2) => {
|
||||
if (style2.hover) {
|
||||
loopLayer.style.opacity = "1.0";
|
||||
@ -865,12 +978,33 @@ function createElementEvent(obj, style) {
|
||||
holdLayer,
|
||||
subdivLayer,
|
||||
skipshotLayer,
|
||||
skipHitLayer,
|
||||
...pulses,
|
||||
loopLayer,
|
||||
...crossLayers
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.AddFreeTimeBeat:
|
||||
{
|
||||
const hold = obj.hold ?? 0;
|
||||
const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null;
|
||||
if (holdLayer) {
|
||||
holdLayer.style.pointerEvents = "none";
|
||||
}
|
||||
const backLayers2 = createBackLayer(new Size(info.bounds.width, iconSize), beatColor, style);
|
||||
const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null;
|
||||
const textLayer = createRDFontLayer(((obj.pulse ?? 0) + 1).toString(), style, null);
|
||||
textLayer.style.left = `${1.5 * style.scale}px`;
|
||||
textLayer.style.top = `${10 * style.scale}px`;
|
||||
addLayers([
|
||||
holdLayer,
|
||||
...backLayers2,
|
||||
hitLayer,
|
||||
textLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.Comment:
|
||||
{
|
||||
const backLayers2 = createBackLayer(info.bounds.size, new Color(obj.color ?? "7d7d7d"), style);
|
||||
@ -881,38 +1015,16 @@ function createElementEvent(obj, style) {
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.AddFreeTimeBeat:
|
||||
{
|
||||
const hold = obj.hold ?? 0;
|
||||
const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null;
|
||||
if (holdLayer) {
|
||||
holdLayer.style.pointerEvents = "none";
|
||||
}
|
||||
const backLayers2 = createBackLayer(new Size(info.bounds.width, iconSize), beatColor, style);
|
||||
const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null;
|
||||
const textLayer = createRDFontLayer(((obj.pulse ?? 0) + 1).toString(), style);
|
||||
textLayer.style.left = `${1.5 * style.scale}px`;
|
||||
textLayer.style.top = `${10 * style.scale}px`;
|
||||
addLayers([
|
||||
holdLayer,
|
||||
...backLayers2,
|
||||
hitLayer,
|
||||
textLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.DesktopColor:
|
||||
{
|
||||
const duration = obj.duration ?? 0;
|
||||
const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height * 4), colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
const iconLayer = createLayer(`${key}_0`, new Point(0, info.bounds.height), null, style);
|
||||
const iconColorLayer = createLayer(key, new Point(0, info.bounds.height), null, style);
|
||||
const durationLayer = obj.duration > 1 ? createLayer(evbarea, new Rect(iconSize, 0, (duration - 1) * iconSize, info.bounds.height * 4), new Color(4283471790), style) : null;
|
||||
const backLayers2 = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
console.log(info.bounds.size);
|
||||
const iconColorLayer = createLayer(`${key}_0`, new Point(0, iconSize), new Color(obj.endColor ?? "ffffff"), style);
|
||||
const iconLayer = createLayer(`${key}_1`, new Point(0, iconSize), null, style);
|
||||
addLayers([
|
||||
...backLayers2,
|
||||
durationLayer,
|
||||
iconLayer,
|
||||
iconColorLayer
|
||||
iconColorLayer,
|
||||
iconLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
@ -940,7 +1052,7 @@ function createElementEvent(obj, style) {
|
||||
text = "x";
|
||||
break;
|
||||
}
|
||||
const textLayer = createRDFontLayer(text, style);
|
||||
const textLayer = createRDFontLayer(text, style, null);
|
||||
textLayer.style.left = `${1.5 * style.scale}px`;
|
||||
textLayer.style.top = `${10 * style.scale}px`;
|
||||
addLayers([
|
||||
@ -974,41 +1086,315 @@ function createElementEvent(obj, style) {
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.SayReadyGetSetGo:
|
||||
{
|
||||
const wordInfo = WordInfos[obj.phraseToSay ?? SayReadyGetSetGoWords.JustSayGo];
|
||||
const len = wordInfo.length * (obj.tick ?? 0) + 1;
|
||||
const stringToJoin = wordInfo.phrase.split(" ");
|
||||
const stringToDraw = [
|
||||
stringToJoin[0]
|
||||
];
|
||||
let lw = measureRDFontText(stringToJoin[0]);
|
||||
const sw = measureRDFontText(" ");
|
||||
const backLayers2 = createBackLayer(new Size(len * iconSize, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
const wordLayers = [];
|
||||
for (let i = 1; i < stringToJoin.length; i++) {
|
||||
const part = stringToJoin[i];
|
||||
const w = measureRDFontText(part);
|
||||
if (lw + sw + w > len * iconSize * style.scale) {
|
||||
lw = w;
|
||||
stringToDraw.push(part);
|
||||
} else {
|
||||
lw += sw + w;
|
||||
stringToDraw[stringToDraw.length - 1] += " " + part;
|
||||
}
|
||||
}
|
||||
const c = Math.min(stringToDraw.length, 3);
|
||||
let top = iconSize / 2 - charHeight * c / 4 + 1;
|
||||
for (let i = 0; i < c; i++) {
|
||||
const line = stringToDraw[i];
|
||||
const p = new Point((len * iconSize - measureRDFontText(line) / 2) / 2, top + (i * charHeight + lineHeight) / 2);
|
||||
const wordLayer = createRDFontLayer(line, {
|
||||
...style,
|
||||
scale: style.scale / 2
|
||||
}, null);
|
||||
wordLayer.style.left = `${p.x * style.scale}px`;
|
||||
wordLayer.style.top = `${p.y * style.scale}px`;
|
||||
wordLayers.push(wordLayer);
|
||||
}
|
||||
addLayers([
|
||||
...backLayers2,
|
||||
...wordLayers
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.SetRowXs:
|
||||
{
|
||||
const syncoBeat = obj.syncoBeat ?? -1;
|
||||
const width = info.bounds.width / 6;
|
||||
const iconBounds = slices.get(beatx).bounds;
|
||||
const s = width / iconBounds.width;
|
||||
let left = 0;
|
||||
const top = iconSize / 2 - iconBounds.height * s / 2;
|
||||
const patternLayers = [];
|
||||
const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height), colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
for (let p of obj.pattern) {
|
||||
const beatxLayer = createLayer(p === "x" ? beatx : beatline, new Rect(left, top, width, iconBounds.height * s), null, style);
|
||||
patternLayers.push(beatxLayer);
|
||||
left += width;
|
||||
}
|
||||
const syncoBeatLayer = syncoBeat >= 0 ? createLayer(beatsynco, new Rect(width * syncoBeat, top, width, iconBounds.height * s), null, style) : null;
|
||||
addLayers([
|
||||
...backLayers2,
|
||||
...patternLayers,
|
||||
syncoBeatLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.ShowRooms:
|
||||
{
|
||||
const backLayers2 = createBackLayer(new Size(iconSize, iconSize * 4), colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
const roomLayers = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const roomLayer = createLayer(`${key}_${obj.rooms.indexOf(i) >= 0 ? "1" : "0"}`, new Point(0, i * iconSize * style.scale), null, {
|
||||
...style,
|
||||
scale: style.scale / 2
|
||||
});
|
||||
roomLayers.push(roomLayer);
|
||||
}
|
||||
addLayers([
|
||||
...backLayers2,
|
||||
...roomLayers
|
||||
]);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
const backLayers = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style);
|
||||
addLayers(backLayers);
|
||||
switch (evttype) {
|
||||
case EventType.CustomFlash:
|
||||
const iconLayer = createLayer(key, null, null, style);
|
||||
const startColorLayer = createLayer(`${key}_0`, null, new Color(obj.startColor ?? "000000").withAlpha((obj.startOpacity ?? 0) * 255), style);
|
||||
const endColorLayer = createLayer(`${key}_1`, null, new Color(obj.endColor ?? "000000").withAlpha((obj.endOpacity ?? 0) * 255), style);
|
||||
addLayers([
|
||||
createLayer(`${key}_0`, null, new Color(obj.startColor ?? "000000"), style),
|
||||
createLayer(`${key}_1`, null, new Color(obj.endColor ?? "000000"), style)
|
||||
iconLayer,
|
||||
startColorLayer,
|
||||
endColorLayer
|
||||
]);
|
||||
break;
|
||||
case EventType.FlipScreen:
|
||||
const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 1 : 0);
|
||||
if (flip === 0) {
|
||||
{
|
||||
const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 2 : 0);
|
||||
const iconLayer2 = createLayer(flip === 0 ? `${key}_0` : `${key}_${flip - 1}`, null, null, style);
|
||||
addLayers([
|
||||
createLayer(key, null, null, style)
|
||||
]);
|
||||
} else {
|
||||
addLayers([
|
||||
createLayer(`${key}_${flip - 1}`, null, null, style)
|
||||
iconLayer2
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.FloatingText:
|
||||
{
|
||||
const backColorLayer = createLayer(`${key}_0`, null, Color.FromRgba(obj.color ?? "FFFFFFFF"), style);
|
||||
const foreColorLayer = createLayer(`${key}_1`, null, Color.FromRgba(obj.outlineColor ?? "FFFFFFFF"), style);
|
||||
addLayers([
|
||||
backColorLayer,
|
||||
foreColorLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.MoveRoom:
|
||||
{
|
||||
const degree = obj.angle ?? 0;
|
||||
const radius = -degree * Math.PI / 180;
|
||||
let width = (obj.scale ? obj.scale[0] ?? 0 : 100) / 100;
|
||||
let height = (obj.scale ? obj.scale[1] ?? 0 : 100) / 100;
|
||||
const pleft = (obj.pivot ? obj.pivot[0] ?? 0 : 50) / 100;
|
||||
const ptop = (obj.pivot ? obj.pivot[1] ?? 0 : 50) / 100;
|
||||
if (width === 0 || height === 0) break;
|
||||
const uniform = Math.sqrt(width * width + height * height);
|
||||
width /= uniform;
|
||||
height /= uniform;
|
||||
const roomLayer = createLayer(key, new Rect(iconSize / 2, iconSize / 2, iconSize * width, iconSize * height), null, style);
|
||||
let pivotx = width * (1 - pleft * 2);
|
||||
let pivoty = height * (1 - ptop * 2);
|
||||
const widthrotated = pivotx * Math.cos(radius) + pivoty * Math.sin(radius);
|
||||
const heightrotated = -pivotx * Math.sin(radius) + pivoty * Math.cos(radius);
|
||||
const pointLayer = document.createElement("div");
|
||||
pointLayer.style.position = "absolute";
|
||||
pointLayer.style.width = `${style.scale}px`;
|
||||
pointLayer.style.height = `${style.scale}px`;
|
||||
pointLayer.style.left = `${iconSize * (1 - widthrotated) * style.scale / 2}px`;
|
||||
pointLayer.style.top = `${iconSize * (1 + heightrotated) * style.scale / 2}px`;
|
||||
pointLayer.style.backgroundColor = "#FF0000";
|
||||
roomLayer.style.transform = `translate(-50%, -50%) rotate(${-degree}deg)`;
|
||||
addLayers([
|
||||
roomLayer,
|
||||
pointLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.PaintHands:
|
||||
case EventType.Tint:
|
||||
case EventType.TintRows:
|
||||
{
|
||||
const border = obj.border;
|
||||
const backColorLayer = createLayer(key, null, Color.FromRgba(obj.tintColor ?? "FFFFFFFF"), style);
|
||||
const foreColorLayer = border ? createLayer(border === "Outline" ? `${key}_0` : border === "Glow" ? `${key}_1` : "", null, Color.FromRgba(obj.borderColor ?? "FFFFFFFF"), style) : null;
|
||||
addLayers([
|
||||
backColorLayer,
|
||||
foreColorLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.SetBackgroundColor:
|
||||
{
|
||||
const backType = obj.backgroundType ?? "Color";
|
||||
const iconLayer2 = createLayer(key, null, null, style);
|
||||
const images = obj.image ?? [];
|
||||
const imagePath = images.length > 0 ? images[0] : "";
|
||||
const contentInfo = slices.get(`${key}_1`);
|
||||
const colorLayer = createLayer(`${key}_0`, null, Color.FromRgba((backType === "Color" ? obj.color : null) ?? "FFFFFF"), style);
|
||||
const contentLayer = backType === "Image" ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style) : null;
|
||||
if (backType === "Image" && contentLayer) {
|
||||
contentLayer.style.backgroundImage = `url(${imagePath})`;
|
||||
contentLayer.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`;
|
||||
contentLayer.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`;
|
||||
}
|
||||
addLayers([
|
||||
iconLayer2,
|
||||
colorLayer,
|
||||
contentLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.SetCrotchetsPerBar:
|
||||
{
|
||||
const cpb = obj.crotchetsPerBar ?? 0;
|
||||
const iconLayer2 = createLayer(key, null, null, style);
|
||||
const cpbLayer = createRDFontLayer(cpb > 9 ? "-" : cpb.toString(), style, Color.Black);
|
||||
const bLayer = createRDFontLayer("4", style, Color.Black);
|
||||
cpbLayer.style.left = `${2 * style.scale}px`;
|
||||
cpbLayer.style.top = `${9 * style.scale}px`;
|
||||
bLayer.style.left = `${8 * style.scale}px`;
|
||||
bLayer.style.top = `${14 * style.scale}px`;
|
||||
addLayers([
|
||||
iconLayer2,
|
||||
cpbLayer,
|
||||
bLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case EventType.SetForeground:
|
||||
{
|
||||
const iconLayer2 = createLayer(key, null, null, style);
|
||||
const images = obj.image ?? [];
|
||||
const imagePath = images.length > 0 ? images[0] : "";
|
||||
const contentInfo = slices.get(`${key}_1`);
|
||||
const colorLayer = imagePath ? createLayer(`${key}_0`, null, Color.Black, style) : null;
|
||||
const contentLayer = imagePath ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style) : null;
|
||||
if (contentLayer) {
|
||||
contentLayer.style.backgroundImage = `url(${imagePath})`;
|
||||
contentLayer.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`;
|
||||
contentLayer.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`;
|
||||
}
|
||||
addLayers([
|
||||
iconLayer2,
|
||||
colorLayer,
|
||||
contentLayer
|
||||
]);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
const layer = document.createElement("div");
|
||||
layer.style.position = "absolute";
|
||||
layer.style.left = "0";
|
||||
layer.style.top = "0";
|
||||
layer.style.width = `${info.bounds.width * style.scale}px`;
|
||||
layer.style.height = `${info.bounds.height * style.scale}px`;
|
||||
layer.style.backgroundSize = `${info.bounds.width * style.scale}px ${info.bounds.height * style.scale}px`;
|
||||
layer.style.backgroundImage = `url(${info.blobUrl})`;
|
||||
element.appendChild(layer);
|
||||
const layer = createLayer(key, null, null, style);
|
||||
addLayers([
|
||||
layer
|
||||
]);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (evinfo.isDurationEvent) {
|
||||
const duration = obj[evinfo.durationKey] ?? 0;
|
||||
const durWidth = iconSize * duration;
|
||||
const durationLayer = durWidth > info.bounds.width ? createLayer(evbarea, new Rect(info.bounds.width, 0, durWidth - info.bounds.width, info.bounds.height), colorOf(obj.tab ?? evinfo.defaultTab), style) : null;
|
||||
if (durationLayer) {
|
||||
durationLayer.style.pointerEvents = "none";
|
||||
layerHoverInit(durationLayer);
|
||||
}
|
||||
addLayers([
|
||||
durationLayer
|
||||
]);
|
||||
}
|
||||
const rooms = obj.rooms ?? [];
|
||||
const roomEnabled = new Color(4292392977);
|
||||
const roomDisabled = new Color(4284177243);
|
||||
if (evinfo.isRoomEvent) {
|
||||
const roomLayers = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const roomLayer = createLayer(`room_${i}`, new Point(iconSize, 0), rooms.indexOf(i) > -1 ? roomEnabled : roomDisabled, style);
|
||||
if (roomLayer) {
|
||||
layerHoverInit(roomLayer);
|
||||
}
|
||||
roomLayers.push(roomLayer);
|
||||
}
|
||||
const roomTopLayer = rooms.indexOf(4) > -1 ? createLayer(`room_top`, new Point(iconSize, 0), roomEnabled, style) : null;
|
||||
if (roomTopLayer) {
|
||||
layerHoverInit(roomTopLayer);
|
||||
}
|
||||
roomLayers.push(roomTopLayer);
|
||||
addLayers(roomLayers);
|
||||
}
|
||||
const condition = obj.if ?? "";
|
||||
if (condition.length > 0) {
|
||||
const positive = /(?<!~)\d(?!$)/g.test(condition);
|
||||
const negative = /~\d(?!$)/g.test(condition);
|
||||
const conditionLayer = createLayer(evtag, null, positive ? negative ? new Color(4294967040) : new Color(4278255615) : negative ? new Color(4294901760) : null, style);
|
||||
addLayers([
|
||||
conditionLayer
|
||||
]);
|
||||
}
|
||||
const tagLayer = obj.tag ? createLayer(`${evtag}_0`, new Point(0, info.bounds.height), new Color(4294952838), style) : null;
|
||||
addLayers([
|
||||
tagLayer
|
||||
]);
|
||||
switch (evttype) {
|
||||
case EventType.Comment:
|
||||
addLayers([
|
||||
createHintLayer(obj.text ?? "", info.bounds.width * style.scale, new Color(obj.color ?? "7d7d7d"))
|
||||
]);
|
||||
break;
|
||||
case EventType.FloatingText:
|
||||
case EventType.AdvanceText:
|
||||
case EventType.ShowStatusSign:
|
||||
case EventType.TextExplosion:
|
||||
case EventType.ShowDialogue:
|
||||
case EventType.ReadNarration:
|
||||
case EventType.RenameWindow:
|
||||
addLayers([
|
||||
createHintLayer(obj.text ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
|
||||
]);
|
||||
break;
|
||||
case EventType.PlaySong:
|
||||
addLayers([
|
||||
createHintLayer(obj.song?.filename ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
|
||||
]);
|
||||
break;
|
||||
case EventType.CallCustomMethod:
|
||||
addLayers([
|
||||
createHintLayer(obj.methodName ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
|
||||
]);
|
||||
break;
|
||||
case EventType.TagAction:
|
||||
addLayers([
|
||||
createHintLayer(obj.Tag ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
|
||||
]);
|
||||
break;
|
||||
case EventType.PlayAnimation:
|
||||
case EventType.PlayExpression:
|
||||
addLayers([
|
||||
createHintLayer(obj.expression ?? "", info.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab))
|
||||
]);
|
||||
break;
|
||||
}
|
||||
element.onStateChange = (style2) => {
|
||||
style2 = {
|
||||
...style2
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
@ -1,143 +0,0 @@
|
||||
import { Extensions, IconStyle } from "/script/Extensions.js";
|
||||
function rend() {
|
||||
const codeBlocks = document.querySelectorAll("canvas.rdview2-canvas");
|
||||
codeBlocks.forEach((block) => {
|
||||
// 清理旧的实例
|
||||
if (block.cleanup) {
|
||||
block.cleanup();
|
||||
}
|
||||
|
||||
const width = block.getAttribute("data-width") || 8;
|
||||
const height = block.getAttribute("data-height") || 4;
|
||||
const scale = block.getAttribute("data-scale") || 2;
|
||||
const data = block.getAttribute("data");
|
||||
const ctx = block.getContext("2d", { alpha: false, desynchronized: true });
|
||||
block.width = width * scale * 14;
|
||||
block.height = height * scale * 14;
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
const jsonData = JSON.parse(`[${JSON.parse(data)}]`);
|
||||
|
||||
let lastActive = false;
|
||||
let evtId = 0;
|
||||
let frameId = null;
|
||||
let cachedRect = null;
|
||||
let mdown = false;
|
||||
|
||||
const eventPositions = jsonData.map(evt => ({
|
||||
evt,
|
||||
x: ((evt.beat ?? 1) - 1) * scale * 14,
|
||||
y: (evt.y ?? 0) * scale * 14
|
||||
}));
|
||||
|
||||
const style = new IconStyle();
|
||||
style.Scale = scale;
|
||||
|
||||
const updateRect = () => {
|
||||
cachedRect = block.getBoundingClientRect();
|
||||
};
|
||||
updateRect();
|
||||
|
||||
let rectTimeout;
|
||||
const debouncedUpdateRect = () => {
|
||||
clearTimeout(rectTimeout);
|
||||
rectTimeout = setTimeout(updateRect, 100);
|
||||
};
|
||||
|
||||
const observer = new ResizeObserver(debouncedUpdateRect);
|
||||
observer.observe(block);
|
||||
|
||||
window.addEventListener("resize", debouncedUpdateRect, { passive: true });
|
||||
window.addEventListener("scroll", debouncedUpdateRect, { passive: true });
|
||||
|
||||
block.render = (x, y, active) => {
|
||||
const point = { x, y };
|
||||
let currentEvtId = null;
|
||||
for (let i = 0; i < eventPositions.length; i++) {
|
||||
const { evt } = eventPositions[i];
|
||||
if (evt.area?.contains(point)) {
|
||||
currentEvtId = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentEvtId === evtId && active === lastActive) {
|
||||
return;
|
||||
}
|
||||
evtId = currentEvtId;
|
||||
lastActive = active;
|
||||
|
||||
ctx.clearRect(0, 0, block.width, block.height);
|
||||
|
||||
for (const { evt, x: posX, y: posY } of eventPositions) {
|
||||
const isHovered = evt.area?.contains(point) ?? false;
|
||||
style.Hover = isHovered;
|
||||
style.Active = isHovered ? active : false;
|
||||
evt.area = Extensions.DrawEventIcon(ctx, evt, { x: posX, y: posY }, style);
|
||||
}
|
||||
}
|
||||
|
||||
const throttledRender = (x, y, active) => {
|
||||
if (frameId !== null) {
|
||||
return;
|
||||
}
|
||||
frameId = requestAnimationFrame(() => {
|
||||
block.render(x, y, active);
|
||||
frameId = null;
|
||||
});
|
||||
}
|
||||
|
||||
const getMousePos = (e) => ({
|
||||
x: e.clientX - cachedRect.left,
|
||||
y: e.clientY - cachedRect.top
|
||||
});
|
||||
|
||||
block.addEventListener("mousemove", (e) => {
|
||||
const { x, y } = getMousePos(e);
|
||||
console.log(x, y);
|
||||
throttledRender(x, y, mdown);
|
||||
}, { passive: true });
|
||||
|
||||
block.addEventListener("mousedown", (e) => {
|
||||
const { x, y } = getMousePos(e);
|
||||
mdown = true;
|
||||
block.render(x, y, mdown);
|
||||
});
|
||||
|
||||
block.addEventListener("mouseup", (e) => {
|
||||
const { x, y } = getMousePos(e);
|
||||
mdown = false;
|
||||
block.render(x, y, mdown);
|
||||
});
|
||||
|
||||
block.addEventListener("mouseleave", () => {
|
||||
if (frameId !== null) {
|
||||
cancelAnimationFrame(frameId);
|
||||
frameId = null;
|
||||
}
|
||||
mdown = false;
|
||||
evtId = null;
|
||||
lastActive = false;
|
||||
block.render(-1, -1, mdown);
|
||||
}, { passive: true });
|
||||
|
||||
block.cleanup = () => {
|
||||
observer.disconnect();
|
||||
window.removeEventListener("resize", debouncedUpdateRect);
|
||||
window.removeEventListener("scroll", debouncedUpdateRect);
|
||||
clearTimeout(rectTimeout);
|
||||
if (frameId !== null) {
|
||||
cancelAnimationFrame(frameId);
|
||||
}
|
||||
};
|
||||
|
||||
block.render(-1, -1, mdown);
|
||||
});
|
||||
}
|
||||
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
|
||||
hook.doneEach(function () {
|
||||
rend();
|
||||
});
|
||||
});
|
||||
@ -311,17 +311,10 @@ function rdview2() {
|
||||
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)
|
||||
// try {
|
||||
// JSON.parse(`[${textarea.value}]`);
|
||||
// } catch (e) {
|
||||
// rdcanvas.innerHTML = `<div style="color: red; font-weight: bold;">JSON解析错误：${e.message}</div>`;
|
||||
// }
|
||||
let objs = [];
|
||||
try {
|
||||
objs = JSON.parse(`[${textarea.value}]`);
|
||||
rdcanvas.innerHTML = "";
|
||||
} catch (e) {
|
||||
rdcanvas.innerHTML =
|
||||
`<div style="color: red; font-weight: bold;">JSON解析错误：${e.message}</div>`;
|
||||
@ -376,7 +369,6 @@ function rdview2() {
|
||||
}
|
||||
}
|
||||
}
|
||||
//rdcanvas.innerHTML = RDView2Render(json);
|
||||
initCanvas();
|
||||
initLineNumbers();
|
||||
textarea.addEventListener("input", initLineNumbers);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user