From 8b568ee0276858bad93aefbfc299ceacb1f787fc Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Fri, 6 Jun 2025 11:38:53 +0200 Subject: [PATCH] ui: use slot name as target --- .../app/player/web/managers/DOM/DOMManager.ts | 43 +++------ .../app/player/web/managers/DOM/VirtualDOM.ts | 96 ++----------------- 2 files changed, 18 insertions(+), 121 deletions(-) diff --git a/frontend/app/player/web/managers/DOM/DOMManager.ts b/frontend/app/player/web/managers/DOM/DOMManager.ts index 554e3da75..d649b8472 100644 --- a/frontend/app/player/web/managers/DOM/DOMManager.ts +++ b/frontend/app/player/web/managers/DOM/DOMManager.ts @@ -9,7 +9,6 @@ import FocusManager from './FocusManager'; import SelectionManager from './SelectionManager'; import { StyleElement, - VSpriteMap, OnloadStyleSheet, VDocument, VElement, @@ -55,14 +54,12 @@ export default class DOMManager extends ListWalker { */ private olStyleSheets: Map = new Map(); /** @depreacted since tracker 4.0.2 Mapping by nodeID */ - private olStyleSheetsDeprecated: Map = new Map(); private upperBodyId: number = -1; private nodeScrollManagers: Map> = new Map(); private stylesManager: StylesManager; private focusManager: FocusManager = new FocusManager(this.vElements); private selectionManager: SelectionManager; - private nodeSlots: Map = new Map(); private readonly screen: Screen; private readonly isMobile: boolean; private readonly stringDict: Record; @@ -72,7 +69,7 @@ export default class DOMManager extends ListWalker { }; public readonly time: number; private virtualMode = false; - private hasSlots = false + private hasSlots = false; private showVModeBadge?: () => void; constructor(params: { @@ -286,42 +283,26 @@ export default class DOMManager extends ListWalker { logger.error('SetNodeSlot: Node not found', msg); return; } + if (msg.slotID > 0) { const slotElem = this.vElements.get(msg.slotID); if (!(slotElem instanceof VSlot)) { logger.error('SetNodeSlot: Slot not found', msg); return; } - const host = vChild.parentNode; - if (host && (vChild as any).assignedSlot !== slotElem) { - if (vChild.node.parentNode === (host as any).node) { - host.node.removeChild(vChild.node); + + if (vChild instanceof VElement) { + const slotName = (slotElem.node as HTMLSlotElement).name; + if (slotName && slotName !== 'default') { + vChild.setAttribute('slot', slotName); + } else { + // if el goes to default slot, we don't need attr + vChild.removeAttribute('slot'); } - (host as any).notMontedChildren?.delete(vChild); - slotElem.addAssigned(vChild); - (vChild as any).assignedSlot = slotElem; - this.nodeSlots.set(msg.id, { slotID: msg.slotID, host }); } } else { - if (vChild.assignedSlot) { - const slotElem = vChild.assignedSlot as VSlot; - slotElem.removeAssigned(vChild); - if (vChild.parentNode) { - const host = vChild.parentNode; - const siblings = host['children'] as any[]; - const index = siblings.indexOf(vChild); - let next: Node | null = null; - for (let i = index + 1; i < siblings.length; i++) { - const sib = siblings[i]; - if (!sib.assignedSlot) { - next = sib.node; - break; - } - } - host.node.insertBefore(vChild.node, next); - } - vChild.assignedSlot = null; - this.nodeSlots.delete(msg.id); + if (vChild instanceof VElement) { + vChild.removeAttribute('slot'); } } return; diff --git a/frontend/app/player/web/managers/DOM/VirtualDOM.ts b/frontend/app/player/web/managers/DOM/VirtualDOM.ts index 0fa71ff6b..2c016222f 100644 --- a/frontend/app/player/web/managers/DOM/VirtualDOM.ts +++ b/frontend/app/player/web/managers/DOM/VirtualDOM.ts @@ -58,7 +58,7 @@ export abstract class VNode { public abstract applyChanges(): void; } -type VChild = VElement | VText | VSpriteMap; +type VChild = VElement | VText; abstract class VParent extends VNode { /** */ @@ -163,46 +163,6 @@ export class VShadowRoot extends VParent { export type VRoot = VDocument | VShadowRoot; -export class VSpriteMap extends VParent { - parentNode: VParent | null = - null; /** Should be modified only by he parent itself */ - - private newAttributes: Map = new Map(); - - constructor( - readonly tagName: string, - readonly isSVG = true, - public readonly index: number, - private readonly nodeId: number, - ) { - super(); - this.createNode(); - } - - protected createNode() { - try { - const element = document.createElementNS( - 'http://www.w3.org/2000/svg', - this.tagName, - ); - element.dataset.openreplayId = this.nodeId.toString(); - return element; - } catch (e) { - console.error( - 'Openreplay: Player received invalid html tag', - this.tagName, - e, - ); - return document.createElement(this.tagName.replace(/[^a-z]/gi, '')); - } - } - - applyChanges() { - // this is a hack to prevent the sprite map from being removed from the DOM - return null; - } -} - export class VElement extends VParent { parentNode: VParent | null = null; /** Should be modified only by he parent itself */ @@ -298,58 +258,14 @@ export class VElement extends VParent { } export class VSlot extends VElement { - assignedNodes: VChild[] = []; - - addAssigned(child: VChild) { - if (this.assignedNodes.indexOf(child) === -1) { - this.assignedNodes.push(child); - this.notMontedChildren.add(child); - } - } - - removeAssigned(child: VChild) { - this.assignedNodes = this.assignedNodes.filter((c) => c !== child); - this.notMontedChildren.delete(child); - } - - private mountAssigned() { - let nextMounted: VChild | null = null; - for (let i = this.assignedNodes.length - 1; i >= 0; i--) { - const child = this.assignedNodes[i]; - if (this.notMontedChildren.has(child)) { - this.node.insertBefore( - child.node, - nextMounted ? nextMounted.node : null, - ); - this.notMontedChildren.delete(child); - } - if (!this.notMontedChildren.has(child)) { - nextMounted = child; - } - } + protected createNode() { + const element = super.createNode() as HTMLSlotElement; + return element; } applyChanges() { - if (this.assignedNodes.length > 0) { - this.assignedNodes.forEach((c) => c.applyChanges()); - this.mountAssigned(); - const { node } = this; - const realChildren = node.childNodes; - if (realChildren.length > 0) { - for (let j = 0; j < this.assignedNodes.length; j++) { - while (realChildren[j] !== this.assignedNodes[j].node) { - if (isNode(realChildren[j])) { - node.removeChild(realChildren[j]); - } - } - } - } - while (realChildren.length > this.assignedNodes.length) { - node.removeChild(node.lastChild as Node); - } - } else { - super.applyChanges(); - } + super.applyChanges(); + // todo safety checks here ? } }