diff --git a/pages/appendix_tools.md b/pages/appendix_tools.md index b9fe73d..f8fa85f 100644 --- a/pages/appendix_tools.md +++ b/pages/appendix_tools.md @@ -22,6 +22,8 @@ g 1 1 5 4 #0ff{ --- +完整功能支持请前往[此处](https://view.obugs.cn)。 +
diff --git a/pages/classicbeat.md b/pages/classicbeat.md index 40abb2c..2f7c987 100644 --- a/pages/classicbeat.md +++ b/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 }, diff --git a/script/View.js b/script/rdtkview.js similarity index 73% rename from script/View.js rename to script/rdtkview.js index 52c6413..a5aea5e 100644 --- a/script/View.js +++ b/script/rdtkview.js @@ -1,4 +1,4 @@ -// AssetManager.ts +// assetManager.ts var Point = class _Point { x = 0; y = 0; @@ -266,12 +266,34 @@ var Color = class _Color { return new _Color(this.a, this.r, this.g, blue); } }; +var canvas = new OffscreenCanvas(1, 1); +var blobs = /* @__PURE__ */ new Map(); var SliceInfo = class { bounds = new Rect(); center = new Rect(); pivot = new Point(); scale = 1; - blobUrl = ""; + async blobUrl() { + const key = `${this.bounds.left},${this.bounds.top},${this.bounds.width},${this.bounds.height}`; + const blob = blobs.get(key); + if (blob) { + return blob; + } else { + canvas.width = this.bounds.width; + canvas.height = this.bounds.height; + const ctx = canvas.getContext("2d"); + if (ctx === null) { + throw new Error("Failed to get 2D context"); + } + ctx.clearRect(0, 0, this.bounds.width, this.bounds.height); + ctx.drawImage(assetFile, this.bounds.left, this.bounds.top, this.bounds.width, this.bounds.height, 0, 0, this.bounds.width, this.bounds.height); + const blob2 = await canvas.convertToBlob({ + type: "image/png" + }); + blobs.set(key, URL.createObjectURL(blob2)); + return blobs.get(key); + } + } get isNinePatch() { return !this.center.isEmpty; } @@ -289,7 +311,6 @@ async function loadAssetFile() { }); } async function readFromStream(stream) { - const canvas = new OffscreenCanvas(1, 1); let offset = 0; const count = stream.getUint8(0); offset += 1; @@ -333,18 +354,6 @@ async function readFromStream(stream) { } sliceInfo.pivot = new Point(pivotLeft, pivotTop); } - canvas.width = width; - canvas.height = height; - const ctx = canvas.getContext("2d"); - if (ctx === null) { - throw new Error("Failed to get 2D context"); - } - ctx.clearRect(0, 0, width, height); - ctx.drawImage(assetFile, sliceInfo.bounds.left, sliceInfo.bounds.top, width, height, 0, 0, width, height); - const blob = await canvas.convertToBlob({ - type: "image/png" - }); - sliceInfo.blobUrl = URL.createObjectURL(blob); sliceInfos.set(key, sliceInfo); } return sliceInfos; @@ -355,15 +364,15 @@ var slices = await readFromStream(new DataView(await (await fetch(directoryPath assetLoaded = true; }); -// Consts.ts +// consts.ts var Tab = /* @__PURE__ */ function(Tab2) { - Tab2["Sounds"] = "sounds"; - Tab2["Rows"] = "rows"; - Tab2["Actions"] = "actions"; - Tab2["Decorations"] = "decorations"; - Tab2["Rooms"] = "rooms"; - Tab2["Windows"] = "windows"; - Tab2["Unknown"] = "unknown"; + Tab2["Sounds"] = "Sounds"; + Tab2["Rows"] = "Rows"; + Tab2["Actions"] = "Actions"; + Tab2["Decorations"] = "Sprites"; + Tab2["Rooms"] = "Rooms"; + Tab2["Windows"] = "Windows"; + Tab2["Unknown"] = "Unknown"; return Tab2; }({}); var SayReadyGetSetGoWords = /* @__PURE__ */ function(SayReadyGetSetGoWords2) { @@ -478,9 +487,18 @@ var EventType = /* @__PURE__ */ function(EventType2) { EventType2["Tile"] = "Tile"; EventType2["Tint"] = "Tint"; EventType2["TintRows"] = "TintRows"; + EventType2["Unknown"] = "Unknown"; EventType2["WindowResize"] = "WindowResize"; return EventType2; }({}); +var hiddenEventType = [ + EventType.ForwardDecorationEvent, + EventType.ForwardEvent, + EventType.ForwardRowEvent, + EventType.MacroEvent, + EventType.SpinningRows, + EventType.ShowSubdivisionsRows +]; var EventAttriblte = /* @__PURE__ */ function(EventAttriblte2) { EventAttriblte2[EventAttriblte2["None"] = 0] = "None"; EventAttriblte2[EventAttriblte2["DurationEvent"] = 1] = "DurationEvent"; @@ -545,29 +563,29 @@ var EventInfos = { AddFreeTimeBeat: new EventInfo(Tab.Rows), AddOneshotBeat: new EventInfo(Tab.Rows), AdvanceText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"), - BassDrop: new EventInfo(Tab.Actions), + BassDrop: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), 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, "duration"), + CustomFlash: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "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), + Flash: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), + FlipScreen: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), FloatingText: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"), ForwardDecorationEvent: new EventInfo(Tab.Decorations), - ForwardEvent: new EventInfo(Tab.Unknown), + ForwardEvent: new EventInfo(Tab.Unknown, EventAttriblte.RoomEvent), ForwardRowEvent: new EventInfo(Tab.Rows), HideRow: new EventInfo(Tab.Actions), HideWindow: new EventInfo(Tab.Windows), - InvertColors: new EventInfo(Tab.Actions), + InvertColors: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), MacroEvent: new EventInfo(Tab.Unknown), MaskRoom: new EventInfo(Tab.Rooms), Move: new EventInfo(Tab.Decorations, EventAttriblte.DurationEvent, "duration"), - MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"), + MoveCamera: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"), MoveRoom: new EventInfo(Tab.Rooms, EventAttriblte.DurationEvent, "duration"), MoveRow: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration"), NarrateRowInfo: new EventInfo(Tab.Sounds), @@ -577,15 +595,15 @@ var EventInfos = { PlayExpression: new EventInfo(Tab.Actions), PlaySong: new EventInfo(Tab.Sounds), PlaySound: new EventInfo(Tab.Sounds), - PulseCamera: new EventInfo(Tab.Actions), + PulseCamera: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), PulseFreeTimeBeat: new EventInfo(Tab.Rows), ReadNarration: new EventInfo(Tab.Sounds), RenameWindow: new EventInfo(Tab.Windows), ReorderRooms: new EventInfo(Tab.Rooms), - ReorderRow: new EventInfo(Tab.Rows), + ReorderRow: new EventInfo(Tab.Actions), ReorderSprite: new EventInfo(Tab.Decorations), ReorderWindows: new EventInfo(Tab.Windows), - SayReadyGetSetGo: new EventInfo(Tab.Sounds), + SayReadyGetSetGo: new EventInfo(Tab.Sounds, EventAttriblte.RoomEvent), SetBackgroundColor: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"), SetBeatSound: new EventInfo(Tab.Sounds), SetBeatsPerMinute: new EventInfo(Tab.Sounds), @@ -594,7 +612,7 @@ var EventInfos = { SetCrotchetsPerBar: new EventInfo(Tab.Sounds), SetForeground: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent | EventAttriblte.RoomEvent, "duration"), SetGameSound: new EventInfo(Tab.Sounds), - SetHandOwner: new EventInfo(Tab.Actions), + SetHandOwner: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), SetHeartExplodeInterval: new EventInfo(Tab.Sounds), SetHeartExplodeVolume: new EventInfo(Tab.Sounds), SetMainWindow: new EventInfo(Tab.Windows), @@ -610,22 +628,23 @@ var EventInfos = { 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), + ShowDialogue: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), + ShowHands: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), 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, "duration"), - Stutter: new EventInfo(Tab.Actions), + Stutter: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), TagAction: new EventInfo(Tab.Actions), - TextExplosion: new EventInfo(Tab.Actions), + TextExplosion: new EventInfo(Tab.Actions, EventAttriblte.RoomEvent), 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"), + Unknown: new EventInfo(Tab.Unknown), WindowResize: new EventInfo(Tab.Actions, EventAttriblte.DurationEvent, "duration") }; -// View.ts +// rdtkview.ts var lineHeight = 6; var charHeight = 8; var iconSize = 14; @@ -636,11 +655,37 @@ var IconStyle = class { scale = 1; showDuration = false; }; +var FilterData = class { + color; + hue = 0; + saturation = 1; + brightness = 1; + getFilter() { + let filter = ""; + if (this.color) { + filter += `url(#${getColorMatrixId(this.color)}) `; + } + if (this.hue !== 0) { + filter += `hue-rotate(${this.hue * 360}deg) `; + } + if (this.saturation !== 1) { + filter += `saturate(${this.saturation}) `; + } + if (this.brightness !== 1) { + filter += `brightness(${this.brightness}) `; + } + return filter.trim() || "none"; + } +}; function withState(color, active, enabled) { return (enabled ? color : new Color(4286874756)).withAlpha(active ? 192 : 91); } -function createLayer(key, bound, color, style) { +async function createLayer(key, bound, color, style) { const layer = document.createElement("div"); + layer.filterData = new FilterData(); + layer.updateFilter = () => { + layer.style.filter = layer.filterData.getFilter(); + }; const info = slices.get(key); layer.style.position = "absolute"; layer.style.boxSizing = "content-box"; @@ -652,7 +697,7 @@ function createLayer(key, bound, color, style) { layer.style.top = `${(bound?.top ?? bound?.y ?? 0) * style.scale}px`; layer.style.borderStyle = "solid"; layer.style.borderWidth = `${center.top * style.scale}px ${(info.bounds.width - center.right) * style.scale}px ${(info.bounds.height - center.bottom) * style.scale}px ${center.left * style.scale}px`; - layer.style.borderImageSource = `url(${info.blobUrl})`; + layer.style.borderImageSource = `url(${await info.blobUrl()})`; layer.style.borderImageSlice = `${center.top} ${info.bounds.width - center.right} ${info.bounds.height - center.bottom} ${center.left} fill`; layer.style.borderImageWidth = `1`; layer.style.borderImageOutset = `0`; @@ -666,7 +711,7 @@ function createLayer(key, bound, color, style) { 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.backgroundImage = `url(${await info.blobUrl()})`; } layer.style.backgroundSize = `${(bound.width ?? info?.bounds.width ?? 0) * style.scale}px ${(bound.height ?? info?.bounds.height ?? 0) * style.scale}px`; } else { @@ -675,21 +720,20 @@ function createLayer(key, bound, color, style) { 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.backgroundImage = `url(${await 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); - layer.style.filter = `url(#${filterId})`; layer.onColorChange = (color2) => { if (!color2) { return; } - const newFilterId = getColorMatrixId(color2); - layer.style.filter = `url(#${newFilterId})`; + layer.filterData.color = color2; + layer.updateFilter(); }; + layer.onColorChange(color); } else { } return layer; @@ -707,7 +751,7 @@ function getColorMatrixId(rgba) { const g = rgba.g / 255; const b = rgba.b / 255; const a = rgba.a / 255; - feColorMatrix.setAttribute("values", `${r} 0 0 0 0 0 ${g} 0 0 0 0 0 ${b} 0 0 0 0 0 ${a} 0`); + feColorMatrix.setAttribute("values", `${r * r} 0 0 0 0 0 ${g * g} 0 0 0 0 0 ${b * b} 0 0 0 0 0 ${a} 0`); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", `filter_${rgba.toHexString()}`); filter.appendChild(feColorMatrix); @@ -734,10 +778,11 @@ function measureRDFontText(text) { } return len; } -function createRDFontLayer(text, style, color) { +async function createRDFontLayer(text, style, color) { const lineHead = new Point(0, -charHeight); const start = lineHead.clone(); const layer = document.createElement("div"); + const charLayers = []; layer.style.position = "absolute"; for (let i = 0; i < text.length; i++) { const char = text.charAt(i); @@ -749,25 +794,37 @@ function createRDFontLayer(text, style, color) { const charKey = `char_${charCode.toString(16).padStart(4, "0")}`; const charInfo = slices.get(charKey); if (charInfo) { - const charLayer = createLayer(charKey, new Point(start.x, start.y), color, style); + const charLayer = await createLayer(charKey, new Point(start.x, start.y), color, style); start.x += charInfo.bounds.width * style.scale; - layer.appendChild(charLayer); + charLayers.push(charLayer); } } } + layer.updateFilter = () => { + charLayers.forEach((cl) => { + cl.updateFilter(); + }); + }; + charLayers.forEach((cl) => { + layer.appendChild(cl); + }); return layer; } function createBackLayer(size, color, style) { const outline = "event_outline"; const back = "event_back"; - const backLayer = createLayer(back, new Rect(1, 1, (size?.width ?? iconSize) - 2, (size?.height ?? iconSize) - 2), withState(color, style.active, style.enabled), style); - const outlineLayer = createLayer(outline, size ? new Rect(size) : null, new Color(style.active ? 4294967295 : 4289243304), style); - if (backLayer.onColorChange) { - backLayer.onStateChange = (style2) => backLayer.onColorChange(withState(color, style2.active, style2.enabled)); - } - if (outlineLayer.onColorChange) { - outlineLayer.onStateChange = (style2) => outlineLayer.onColorChange(new Color(style2.active ? 4294967295 : 4289243304)); - } + const backLayer = createLayer(back, new Rect(1, 1, (size?.width ?? iconSize) - 2, (size?.height ?? iconSize) - 2), withState(color, style.active, style.enabled), style).then((layer) => { + if (layer.onColorChange) { + layer.onStateChange = (style2) => layer.onColorChange(withState(color, style2.active, style2.enabled)); + } + return layer; + }); + const outlineLayer = createLayer(outline, size ? new Rect(size) : null, new Color(style.active ? 4294967295 : 4289243304), style).then((layer) => { + if (layer.onColorChange) { + layer.onStateChange = (style2) => layer.onColorChange(new Color(style2.active ? 4294967295 : 4289243304)); + } + return layer; + }); return [ backLayer, outlineLayer @@ -833,26 +890,29 @@ function createHintLayer(hint, width, color) { }; return hintLayer; } -function createElementEvent(obj, style) { +async function createElementEvent(obj, style) { style = { ...new IconStyle(), ...style }; - const evttype = obj.type ?? EventType.ForwardEvent; let key0 = `event_${obj.type}`; + const hasType = EventType.hasOwnProperty(obj.type); + if (!hasType) { + console.warn(obj.type ? `Unknown event type: ${obj.type}` : `Event type missing`); + } if (!slices.has(key0)) { if (!slices.has("event_Unknown")) { return null; } key0 = "event_Unknown"; } - const info = slices.get(key0); - if (!info) { + const evttype = obj.type ?? EventType.Unknown; + const slcinfo = slices.get(key0) ?? slices.get("event_Unknown"); + if (!slcinfo) { console.warn(`Slice info for event type ${evttype} not found.`); return null; } - const evttypeEnum = EventType[evttype]; - const evinfo = EventInfos[evttypeEnum]; + const evinfo = EventInfos[evttype] ?? EventInfos[EventType.Unknown]; const key = "event_" + evttype; const pulse = "event_beat_pulse"; const hit = "event_beat_hit"; @@ -867,18 +927,10 @@ function createElementEvent(obj, style) { 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) { - element.appendChild(layer); - internalLayers.push(layer); - } - } - } + element.eventStyle = { + ...style + }; + const layersToAdd = []; element.style.imageRendering = "pixelated"; switch (evttype) { case EventType.AddClassicBeat: @@ -886,31 +938,30 @@ function createElementEvent(obj, style) { const tick = obj.tick ?? 1; const swing = (obj.swing ?? 0) || 1; const hold = obj.hold ?? 0; - const syncoSwing = obj.syncoSwing ?? 0; const prexs = obj.preXs ?? { syncoBeat: -1, syncoSwing: 0 }; const length = obj.length ?? 7; const iconWidth = iconSize * (tick * (length - 1 - prexs.syncoSwing)); - const holdBar = hold > 0 ? createLayer(evbarea, new Rect(iconWidth, 0, iconSize * hold, iconSize), new Color(style.active ? 4291839731 : 4286462352), style) : null; - if (holdBar) { - holdBar.style.pointerEvents = "none"; - } + const holdBar = hold > 0 ? createLayer(evbarea, new Rect(iconWidth, 0, iconSize * hold, iconSize), new Color(style.active ? 4291839731 : 4286462352), style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; const backLayers2 = createBackLayer(new Size(iconWidth, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style); const pulses = []; for (let i = 0; i < length - 1; i++) { - const pulseLayer = createLayer(pulse, new Point(iconSize * (tick * (i + i % 2 * (1 - swing) - (i <= prexs.syncoBeat ? 0 : prexs.syncoSwing))), 0), null, style); - layerHoverInit(pulseLayer); + const pulseLayer = createLayer(pulse, new Point(iconSize * (tick * (i + i % 2 * (1 - swing) - (i <= prexs.syncoBeat ? 0 : prexs.syncoSwing))), 0), null, style).then((layer) => { + layerHoverInit(layer); + return layer; + }); pulses.push(pulseLayer); } const hitLayer = createLayer(hit, new Point(iconSize * (tick * (length - 1 - (prexs.syncoSwing ?? 0))) - 1, 0), null, style); - addLayers([ - holdBar, - ...backLayers2, - ...pulses, - hitLayer - ]); + layersToAdd.push(holdBar); + layersToAdd.push(...backLayers2); + layersToAdd.push(...pulses); + layersToAdd.push(hitLayer); } break; case EventType.AddOneshotBeat: @@ -928,114 +979,119 @@ function createElementEvent(obj, style) { const off = interval - tick; const backLayers2 = createBackLayer(new Size(eventWidth, iconSize), colorOf(obj.tab ?? evinfo.defaultTab), style); 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 = 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 holdLayer = hold && holdWidth - subdivWidth > 0 ? createLayer(evbarea, new Rect(eventWidth + subdivWidth, 0, holdWidth - subdivWidth, iconSize), new Color(style.enabled ? 4291839731 : 4285493103), style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; + const subdivLayer = subdiv > 1 ? createLayer(evbarea, new Rect(eventWidth, 0, subdivWidth, iconSize), new Color(style.enabled ? 4279480353 : 4285493103), style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : 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).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; + const skipHitLayer = skip ? createLayer(evbskip, new Point(eventWidth + iconSize * (interval - delay) - 1, 0), null, style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; const pulses = []; const crossLayers = []; const posx = -off * iconSize; - const hittype = mode === "Freezeshot" ? hitf : hitb; + const hittype = mode === "Freezeshot" ? hitf : mode === "Burnshot" ? hitb : null; for (let l = 0; l <= loop; l++) { for (let i = 0; i < subdiv; i++) { - const pulseLayer = createLayer(pulse, new Point(iconSize * (l * interval + i * tick / subdiv), 0), null, style); - layerHoverInit(pulseLayer); + const pulseLayer = createLayer(pulse, new Point(iconSize * (l * interval + i * tick / subdiv), 0), null, style).then((layer) => { + layerHoverInit(layer); + return layer; + }); pulses.push(pulseLayer); } for (let i = 0; i < subdiv; i++) { const hitLayer2 = createLayer(hit, new Point(iconSize * (l * interval + delay + tick + i * tick / subdiv) - 1, 0), null, style); pulses.push(hitLayer2); } - const crossLayer1 = mode || hold ? createLayer(beatcross, new Point(iconSize * l * interval + posx - 1, 0), null, style) : null; - const crossLayer2 = mode ? createLayer(beatcross, new Point(iconSize * (l - (mode === "Freezeshot" ? 0 : 1)) * interval - 1, 0), null, style) : null; - const hitLayer = createLayer(hittype, new Point(iconSize * (l * interval + tick) - 1, 0), null, style); - if (crossLayer1) { - layerHoverInit(crossLayer1); - crossLayers.push(crossLayer1); - } - if (crossLayer2) { - layerHoverInit(crossLayer2); - crossLayers.push(crossLayer2); - } + const crossLayer1 = mode || hold ? createLayer(beatcross, new Point(iconSize * l * interval + posx - 1, 0), null, style).then((layer) => { + layerHoverInit(layer); + return layer; + }) : null; + const crossLayer2 = mode ? createLayer(beatcross, new Point(iconSize * (l - (mode === "Freezeshot" ? 0 : 1)) * interval - 1, 0), null, style).then((layer) => { + layerHoverInit(layer); + return layer; + }) : null; + const hitLayer = hittype ? createLayer(hittype, new Point(iconSize * (l * interval + tick) - 1, 0), null, style) : null; + crossLayers.push(crossLayer1); + crossLayers.push(crossLayer2); pulses.push(hitLayer); } - 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"; - } else { - loopLayer.style.opacity = "0"; - } - }; - addLayers([ - ...backLayers2, - holdLayer, - subdivLayer, - skipshotLayer, - skipHitLayer, - ...pulses, - loopLayer, - ...crossLayers - ]); + const loopLayer = createLayer("event_beat_loop", new Point(eventWidth, 0), null, style).then((loopLayer2) => { + loopLayer2.style.opacity = "0"; + loopLayer2.style.zIndex = "5"; + loopLayer2.onStateChange = (style2) => { + if (style2.hover) { + loopLayer2.style.opacity = "1.0"; + } else { + loopLayer2.style.opacity = "0"; + } + }; + return loopLayer2; + }); + layersToAdd.push(...backLayers2); + layersToAdd.push(holdLayer); + layersToAdd.push(subdivLayer); + layersToAdd.push(skipshotLayer); + layersToAdd.push(skipHitLayer); + layersToAdd.push(...pulses); + layersToAdd.push(loopLayer); + layersToAdd.push(...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 holdLayer = hold > 0 ? createLayer(evbarea, new Rect(slcinfo.bounds.width, 0, iconSize * hold - slcinfo.bounds.width, iconSize), new Color(style.active ? 4291839731 : 4286462352), style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; + const backLayers2 = createBackLayer(new Size(slcinfo.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 - ]); + const textLayer = createRDFontLayer(((obj.pulse ?? 0) + 1).toString(), style, null).then((textLayer2) => { + textLayer2.style.left = `${1.5 * style.scale}px`; + textLayer2.style.top = `${10 * style.scale}px`; + return textLayer2; + }); + layersToAdd.push(holdLayer); + layersToAdd.push(...backLayers2); + layersToAdd.push(hitLayer); + layersToAdd.push(textLayer); } break; case EventType.Comment: { - const backLayers2 = createBackLayer(info.bounds.size, new Color(obj.color ?? "7d7d7d"), style); + const backLayers2 = createBackLayer(slcinfo.bounds.size, new Color(obj.color ?? "7d7d7d"), style); const iconLayer = createLayer(key, null, null, style); - addLayers([ - ...backLayers2, - iconLayer - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(iconLayer); } break; case EventType.DesktopColor: { - const backLayers2 = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); - console.log(info.bounds.size); + const backLayers2 = createBackLayer(slcinfo.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); 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, - iconColorLayer, - iconLayer - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(iconColorLayer); + layersToAdd.push(iconLayer); } break; case EventType.PulseFreeTimeBeat: { const hold = obj.hold ?? 0; - const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(info.bounds.width, 0, iconSize * hold - info.bounds.width, info.bounds.height), new Color(style.active ? 4291839731 : 4286462352), style) : null; - if (holdLayer) { - holdLayer.style.pointerEvents = "none"; - } - const backLayers2 = createBackLayer(new Size(info.bounds.width, info.bounds.height), beatColor, style); + const holdLayer = hold > 0 ? createLayer(evbarea, new Rect(slcinfo.bounds.width, 0, iconSize * hold - slcinfo.bounds.width, slcinfo.bounds.height), new Color(style.active ? 4291839731 : 4286462352), style).then((layer) => { + layer.style.pointerEvents = "none"; + return layer; + }) : null; + const backLayers2 = createBackLayer(new Size(slcinfo.bounds.width, slcinfo.bounds.height), beatColor, style); const hitLayer = obj.pulse === 6 ? createLayer(hit, new Point(0, 0), null, style) : null; let text = ""; switch (obj.action) { @@ -1052,21 +1108,21 @@ function createElementEvent(obj, style) { text = "x"; break; } - const textLayer = createRDFontLayer(text, style, null); - textLayer.style.left = `${1.5 * style.scale}px`; - textLayer.style.top = `${10 * style.scale}px`; - addLayers([ - holdLayer, - ...backLayers2, - hitLayer, - textLayer - ]); + const textLayer = createRDFontLayer(text, style, null).then((textLayer2) => { + textLayer2.style.left = `${1.5 * style.scale}px`; + textLayer2.style.top = `${10 * style.scale}px`; + return textLayer2; + }); + layersToAdd.push(holdLayer); + layersToAdd.push(...backLayers2); + layersToAdd.push(hitLayer); + layersToAdd.push(textLayer); } break; case EventType.ReorderRooms: case EventType.ReorderWindows: { - const backLayers2 = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); + const backLayers2 = createBackLayer(slcinfo.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); const orderLayers = []; const order = obj.order ?? [ 0, @@ -1080,10 +1136,8 @@ function createElementEvent(obj, style) { orderLayers.push(orderLayer); } } - addLayers([ - ...backLayers2, - ...orderLayers - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(...orderLayers); } break; case EventType.SayReadyGetSetGo: @@ -1117,38 +1171,36 @@ function createElementEvent(obj, style) { 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`; + }, null).then((wordLayer2) => { + wordLayer2.style.left = `${p.x * style.scale}px`; + wordLayer2.style.top = `${p.y * style.scale}px`; + return wordLayer2; + }); wordLayers.push(wordLayer); } - addLayers([ - ...backLayers2, - ...wordLayers - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(...wordLayers); } break; case EventType.SetRowXs: { const syncoBeat = obj.syncoBeat ?? -1; - const width = info.bounds.width / 6; + const width = slcinfo.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 backLayers2 = createBackLayer(new Size(slcinfo.bounds.width, slcinfo.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 - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(...patternLayers); + layersToAdd.push(syncoBeatLayer); } break; case EventType.ShowRooms: @@ -1156,49 +1208,41 @@ function createElementEvent(obj, style) { 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, { + 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 - ]); + layersToAdd.push(...backLayers2); + layersToAdd.push(...roomLayers); } break; default: - const backLayers = createBackLayer(info.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); - addLayers(backLayers); + const backLayers = createBackLayer(slcinfo.bounds.size, colorOf(obj.tab ?? evinfo.defaultTab), style); + layersToAdd.push(...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([ - iconLayer, - startColorLayer, - endColorLayer - ]); + layersToAdd.push(iconLayer); + layersToAdd.push(startColorLayer); + layersToAdd.push(endColorLayer); break; case EventType.FlipScreen: { const flip = (obj.flipX ? 1 : 0) | (obj.flipY ? 2 : 0); const iconLayer2 = createLayer(flip === 0 ? `${key}_0` : `${key}_${flip - 1}`, null, null, style); - addLayers([ - iconLayer2 - ]); + layersToAdd.push(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 - ]); + layersToAdd.push(backColorLayer); + layersToAdd.push(foreColorLayer); } break; case EventType.MoveRoom: @@ -1213,7 +1257,10 @@ function createElementEvent(obj, style) { 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); + const roomLayer = createLayer(key, new Rect(iconSize / 2, iconSize / 2, iconSize * width, iconSize * height), null, style).then((roomLayer2) => { + roomLayer2.style.transform = `translate(-50%, -50%) rotate(${-degree}deg)`; + return roomLayer2; + }); let pivotx = width * (1 - pleft * 2); let pivoty = height * (1 - ptop * 2); const widthrotated = pivotx * Math.cos(radius) + pivoty * Math.sin(radius); @@ -1225,11 +1272,8 @@ function createElementEvent(obj, style) { 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 - ]); + layersToAdd.push(roomLayer); + layersToAdd.push(Promise.resolve(pointLayer)); } break; case EventType.PaintHands: @@ -1239,10 +1283,8 @@ function createElementEvent(obj, style) { 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 - ]); + layersToAdd.push(backColorLayer); + layersToAdd.push(foreColorLayer); } break; case EventType.SetBackgroundColor: @@ -1253,34 +1295,36 @@ function createElementEvent(obj, style) { 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 - ]); + const contentLayer = backType === "Image" ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style).then((contentLayer2) => { + if (backType === "Image" && contentLayer2) { + contentLayer2.style.backgroundImage = `url(${imagePath})`; + contentLayer2.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`; + contentLayer2.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`; + } + return contentLayer2; + }) : null; + layersToAdd.push(iconLayer2); + layersToAdd.push(colorLayer); + layersToAdd.push(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 - ]); + const cpbLayer = createRDFontLayer(cpb > 9 ? "-" : cpb.toString(), style, Color.Black).then((cpbLayer2) => { + cpbLayer2.style.left = `${2 * style.scale}px`; + cpbLayer2.style.top = `${9 * style.scale}px`; + return cpbLayer2; + }); + const bLayer = createRDFontLayer("4", style, Color.Black).then((bLayer2) => { + bLayer2.style.left = `${8 * style.scale}px`; + bLayer2.style.top = `${14 * style.scale}px`; + return bLayer2; + }); + layersToAdd.push(iconLayer2); + layersToAdd.push(cpbLayer); + layersToAdd.push(bLayer); } break; case EventType.SetForeground: @@ -1290,24 +1334,22 @@ function createElementEvent(obj, style) { 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 - ]); + const contentLayer = imagePath ? createLayer("", contentInfo?.bounds ? new Rect(contentInfo?.bounds.size) : null, null, style).then((contentLayer2) => { + if (contentLayer2) { + contentLayer2.style.backgroundImage = `url(${imagePath})`; + contentLayer2.style.left = `${-(contentInfo?.pivot.x ?? 0) * style.scale}px`; + contentLayer2.style.top = `${-(contentInfo?.pivot.y ?? 0) * style.scale}px`; + } + return contentLayer2; + }) : null; + layersToAdd.push(iconLayer2); + layersToAdd.push(colorLayer); + layersToAdd.push(contentLayer); } break; default: - const layer = createLayer(key, null, null, style); - addLayers([ - layer - ]); + const layer = createLayer(hasType ? key : "event_Unknown", null, null, style); + layersToAdd.push(layer); break; } break; @@ -1315,14 +1357,12 @@ function createElementEvent(obj, style) { 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 durationLayer = durWidth > slcinfo.bounds.width ? createLayer(evbarea, new Rect(slcinfo.bounds.width, 0, durWidth - slcinfo.bounds.width, slcinfo.bounds.height), colorOf(obj.tab ?? evinfo.defaultTab), style).then((layer) => { + layer.style.pointerEvents = "none"; + layerHoverInit(layer); + return layer; + }) : null; + layersToAdd.push(durationLayer); } const rooms = obj.rooms ?? []; const roomEnabled = new Color(4292392977); @@ -1330,37 +1370,36 @@ function createElementEvent(obj, style) { 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); - } + const roomLayer = createLayer(`room_${i}`, new Point(iconSize, 0), rooms.indexOf(i) > -1 ? roomEnabled : roomDisabled, style).then((roomLayer2) => { + if (roomLayer2) { + layerHoverInit(roomLayer2); + } + return roomLayer2; + }); roomLayers.push(roomLayer); } - const roomTopLayer = rooms.indexOf(4) > -1 ? createLayer(`room_top`, new Point(iconSize, 0), roomEnabled, style) : null; - if (roomTopLayer) { - layerHoverInit(roomTopLayer); - } + const roomTopLayer = rooms.indexOf(4) > -1 ? createLayer(`room_top`, new Point(iconSize, 0), roomEnabled, style).then((roomTopLayer2) => { + if (roomTopLayer2) { + layerHoverInit(roomTopLayer2); + } + return roomTopLayer2; + }) : null; roomLayers.push(roomTopLayer); - addLayers(roomLayers); + layersToAdd.push(...roomLayers); } const condition = obj.if ?? ""; if (condition.length > 0) { const positive = /(? 0 ? `Error: Unknown type: ${obj.type}` : "Error: Type missing", slcinfo.bounds.width * style.scale, colorOf(obj.tab ?? evinfo.defaultTab)); + } + break; + } + if (hintLayer) { + layersToAdd.push(Promise.resolve(hintLayer)); + } + if (obj["$style"]) { + const hsb = obj["$style"].hsb ?? [ + 0, + 0, + 0 + ]; + if (hsb[0] !== 0 || hsb[1] !== 0 || hsb[2] !== 0) { + layersToAdd.forEach((layer) => layer?.then((layer2) => { + layer2.filterData.hue = hsb[0]; + layer2.filterData.saturation = hsb[1]; + layer2.filterData.brightness = hsb[2]; + })); + } + layersToAdd.forEach((layer) => layer?.then((layer2) => { + layer2.updateFilter(); + })); } element.onStateChange = (style2) => { style2 = { ...style2 }; - internalLayers.forEach((layer) => { - if (layer.onStateChange) { - layer.onStateChange(style2); + layersToAdd.forEach((layer) => layer?.then((layer2) => { + if (layer2.onStateChange) { + layer2.onStateChange(style2); } - }); + })); }; + element.moveTo = function(x, y) { + this.style.left = `${x}px`; + this.style.top = `${y}px`; + }; + for await (const layer of layersToAdd) { + if (layer) { + element.appendChild(layer); + } + } + element.eventData = obj; return element; } export { + IconStyle, + colorOf, createElementEvent }; diff --git a/script/special.js b/script/special.js index 1bf3445..536258a 100644 --- a/script/special.js +++ b/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); + elemPromises.push(elem); + Promise.all(elemPromises).then((elems) => { + elems.forEach((elem) => { + rdcanvas.appendChild(elem); + }); }); - 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); - } } + rdcanvas.style.position = "relative"; + rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`; } initCanvas(); initLineNumbers();