class TomNodeRenderer { /** * Entry point to render a TomNode * @returns the rendered DOM Node */ static render(tomNode) { const rendered = html`

` TomNodeRenderer.renderContent(tomNode, rendered) TomNodeRenderer.renderChildren(tomNode, rendered) return rendered } /** * Render given TomNode content */ static renderContent(tomNode, rendered) { if (tomNode && rendered) { const wrapper = rendered.querySelector(":scope > .tom-node-content > .wrapper") wrapper.innerHTML = tomNode.content wrapper.title = `depth: ${tomNode.depth}` } else { console.error( `Provided TomNode ${ tomNode ? "" : `is ${tomNode}` }${ rendered ? "" : " needs to be rendered itself before it can render its content" }` ) } } /** * Render given TomNode children */ static renderChildren(tomNode, rendered) { if (tomNode && rendered) { let childrenContainer = rendered.querySelector(":scope > .tom-node-children") if (childrenContainer) { childrenContainer.innerText = "" } else { childrenContainer = html`

` rendered.append(childrenContainer) } if (tomNode.children.length) { childrenContainer.append(...tomNode.children.map(c => c.render())) } TomNodeRenderer.renderChildConnections(rendered) } else { console.error( `Provided TomNode ${ tomNode ? "" : `is ${tomNode}` }${ rendered ? "" : " needs to be rendered itself before it can render its children" }` ) } } /** * Render the svg used to draw the connections * Positions will be updated when ResizeObserver is fired */ static renderChildConnections(rendered) { if (rendered) { const childrenContent = rendered.querySelectorAll(":scope > .tom-node-children > .tom-node > .tom-node-content") const content = rendered.querySelector(":scope > .tom-node-content") let connectionsSvg = rendered.querySelector(":scope > svg") if (connectionsSvg) { // remove extraneous connections if any while (connectionsSvg.children.length > childrenContent.length) { connectionsSvg.lastChild.remove() } } else { // create and insert svg the first time connectionsSvg = svg`` rendered.insertBefore(connectionsSvg, content) } } else { console.error(`renderChildConnections was called on a ${rendered} render. Can't draw connections`) } } /** * Center the Node content wrapper on the children first and last content wrapper. * This way the Node is centered on its direct children instead of being centered * on the entire subtree it holds. * * TODO * * @called via ResizeObserver */ static centerNodeOnChildren(rendered) { if (rendered) { const content = rendered.querySelector(":scope > .tom-node-content") const chidlrenContent = rendered.querySelectorAll(":scope > .tom-node-children > .tom-node > .tom-node-content") if (chidlrenContent.length > 0) { const [firstChildrenContent, lastChildrenContent] = [ chidlrenContent[0], chidlrenContent[chidlrenContent.length - 1] ] const contentRect = content.getBoundingClientRect() const firstRect = firstChildrenContent.getBoundingClientRect() const lastRect = lastChildrenContent.getBoundingClientRect() const totalWidth = lastRect.x + lastRect.width - firstRect.x const center = firstRect.x + totalWidth / 2 const contentCenter = contentRect.x + contentRect.width / 2 const offset = center - contentCenter content.style.setProperty("transform", offset ? `translateX(${offset}px)`: "") } } else { console.error(`centerNodeOnChildren was called on a ${rendered} render. Can't center the node on children`) } } /** * Position the current **rendered** child connections, including nodes that are * being removed and do not exist in the node children anymore * * TODO - we are still fighting against the tree being changed and this needs to be reworked * * @called via ResizeObserver */ static positionConnections(rendered) { if (rendered) { // Always re-render so we have the proper amount of connections TomNodeRenderer.renderChildConnections(rendered) const rootRect = rendered.getBoundingClientRect() const content = rendered.querySelector(":scope > .tom-node-content") if (content) { const contentRect = content.getBoundingClientRect() const childrenContent = rendered.querySelectorAll( ":scope > .tom-node-children > .tom-node > .tom-node-content" ) const svgElem = rendered.querySelector(":scope > svg") const connections = rendered.querySelectorAll(":scope > svg > line") // Always update svg size to the latest root rect size (so it's always matching) svgElem.setAttribute("viewBox", `0 0 ${Math.round(rootRect.width)} ${Math.round(rootRect.height)}`) // Update connections to their current positions // we are using a "memo" object to remember about the normal size of a Node // because when animating the new ones we can't know in advance const wrapper = content.querySelector(".wrapper") const wrapperRect = wrapper.getBoundingClientRect() const connectionHeight = parseInt(getComputedStyle(content).marginBottom) const marginTop = parseInt(getComputedStyle(wrapper).marginTop) const memo = { marginTop, width: wrapperRect.width // y: wrapperRect.y + wrapperRect.height + marginTop * 2 + wrapperRect.height / 2 + connectionHeight, // height: wrapperRect.height, } // console.log({memo}) childrenContent.forEach((child, i) => { const prevConnection = connections[i] const connection = prevConnection || svg`` connection.classList.toggle( "removing", child.parentNode.classList.contains("removing") ) const updatedConnection = TomNodeRenderer.updateConnectionPosition( child, connection, rootRect, contentRect, memo ) // Append the connection if it's a new one if (!prevConnection) { svgElem.append(updatedConnection) } requestAnimationFrame(() => { if (updatedConnection.isConnected) { // Maintain css variable for svg line animation const length = updatedConnection.getTotalLength() updatedConnection.style.setProperty("--length", `${length}`) } }) }) } if (rendered.getAnimations({subtree: true}).length) { if (window.requestIdleCallback) { window.requestIdleCallback(() => TomNodeRenderer.positionConnections(rendered)) } else { requestAnimationFrame(() => TomNodeRenderer.positionConnections(rendered)) } } } else { console.error( `positionConnections was called on a ${rendered} render. Can't center the node on children` ) } } /** * Update a given svg line connection to its new position * * @returns the updated svg line */ static updateConnectionPosition(child, connection, rootRect, contentRect, memo) { // Get the child to connect to and measurements we need const wrapper = child.querySelector(".wrapper") let marginTop = parseInt(getComputedStyle(wrapper).marginTop) // Compensate root rect position let childRect = wrapper.getBoundingClientRect() childRect = { x: childRect.x - rootRect.x, y: childRect.y - rootRect.y, width: childRect.width, height: childRect.height } // When animating new nodes, they don't know their final size yet, // so since we can only insert new nodes after existing ones, // we use this a cheap way to remember // if (memo.childRect?.y && childRect.y < memo.childRect.y) { // childRect.y = memo.childRect.y // } // if (memo.childRect?.width && childRect.width < memo.childRect.width) { // childRect.width = memo.childRect.width // } if (memo.marginTop && marginTop < memo.marginTop) { marginTop = memo.marginTop } memo.childRect = childRect memo.marginTop = marginTop // Prepare base coordinates for the connection line const contentEdgeY = contentRect.y + contentRect.height const baseLineCoords = { x1: contentRect.x + contentRect.width / 2 - rootRect.x, y1: contentEdgeY - rootRect.y - marginTop, x2: childRect.x + childRect.width / 2 , y2: childRect.y + childRect.height / 2 } if (childRect.x === 0 && childRect.y === 0) { // console.log(child, connection) // console.log(baseLineCoords) // console.warn("Oops, got 0") return connection } Object.entries(baseLineCoords).forEach( ([key, value]) => { if (isNaN(value)) { // TODO, see if it's still relevant console.log("baseLineCoords with NaN", key, value) } } ) // We clip the line to the parent and child bounding boxes, so it's naturally spaced // along the edges of the parent and children, while still pointing towards their center // to do that, we need a rect going from below the parent to the top of the child const belowParent = contentRect.y - rootRect.y + contentRect.height const clippingRect = { y: belowParent, // from below the parent x: contentRect.x - rootRect.x - window.innerWidth, // we make it extra wide so clipping is always width: contentRect.width + window.innerWidth * 2, // horizontal below parent, not distributed around height: (childRect.y - marginTop) - (belowParent) // down to the top of the child (single connection) } const nextLineCoords = TomNodeRenderer.clipLineToRect(baseLineCoords, clippingRect) Object.entries(nextLineCoords).forEach( ([key, value]) => { if (isNaN(value)) { console.log("nextLineCoords with NaN", key, value) } } ) // update new coordinates Object.entries(nextLineCoords).forEach( ([key, value]) => connection.setAttribute(key, value) ) return connection } /** * Clip given line coordinates to a given clipping rect using Liang-Barsky algorithm * * @returns the line coordinates, clipped or not */ static clipLineToRect(lineCoords, clippingRect) { const clipped = liangBarsky( lineCoords.x1, lineCoords.y1, lineCoords.x2, lineCoords.y2, clippingRect ) if (clipped) { const [x1, y1] = clipped[0] const [x2, y2] = clipped[1] return {x1, y1, x2, y2} } return lineCoords } /** * Reconcile two different nodes and animate the transition of the initial tree * to the new tree representation * * @param nodeA * @param nodeB */ static reconcile(nodeA, nodeB) { // We just replace the current node content nodeA.rendered.querySelector(".wrapper").textContent = nodeB.content // Recursively process the diff const processDiff = (diff) => { if (diff) { const diffs = [...diff.modified, ...diff.added, ...diff.removed] diffs.forEach( diffAction => { switch(diffAction.action) { case "added": TomNodeRenderer.reconcileInserted(diffAction) break; case "removed": TomNodeRenderer.reconcileRemoved(diffAction) break; case "modified": TomNodeRenderer.reconcileModified(diffAction) break; } processDiff(diffAction.childrenDiff) } ) } } // Start processing the diff processDiff(diffTrees(nodeA, nodeB)) TomNodeRenderer.positionConnections(nodeA.rendered) } /** * Animate the matching elements in a given TomNode, including nested matching elements * @param tomNode * @param selector - CSS selector to match elements with * @param keyframes - keyframes for the animation * @returns Animation[] */ static animateElements(tomNode, selector, keyframes) { const elems = [ ...Array.from(tomNode.rendered.querySelectorAll(selector)), tomNode.rendered ] return elems.map( t => t.animate(keyframes, { duration: parseFloat(transitionDuration) * 1.75 * 1000, easing: "ease-in-out", id: "reconciliation" }) ) } /** * Execute insertion transition for a given `inserted` reconciliation action * @param diffAction */ static reconcileInserted(diffAction) { const size = getComputedStyle(diffAction.addedTo.rendered).fontSize const keyframes = [{ boxShadow: options.includes("debug") ? "0 0 10px rgba(0, 192, 128, 0.25), 0 0 0 3px rgba(0, 192, 128, 0.25)" : "", fontSize: 0 }, { boxShadow: options.includes("debug") ? "0 0 10px rgba(0, 192, 128, 0), 0 0 0 3px rgba(0, 192, 128, 0)" : "", fontSize: `${size}` }] diffAction.node.render() const wrappers = Array.from(diffAction.node.rendered.querySelectorAll(".tom-node-children .tom-node")) wrappers.push(diffAction.node.rendered) wrappers.forEach(w => w.style.setProperty("font-size", "0")) diffAction.addedTo.rendered.querySelector(".tom-node-children").append(diffAction.node.rendered) const animations = TomNodeRenderer.animateElements(diffAction.node, ".tom-node-children .tom-node", keyframes) animations.forEach(animation => { animation.oncancel = animation.onfinish = (e) => { e.target.effect.target.style.setProperty("font-size", "") } }) TomNodeRenderer.positionConnections(diffAction.node.rendered) TomNodeRenderer.positionConnections(diffAction.addedTo.rendered) } /** * Execute modification transition for a given `modified` reconciliation action * @param diffAction */ static reconcileModified(diffAction) { // console.log(diffAction.node.content, diffAction.node.rendered) // console.log(diffAction.replacedBy.content, diffAction.replacedBy.rendered) diffAction.replacedBy.parentNode = diffAction.node.parentNode const original = diffAction.node.rendered.querySelector(".wrapper") const replacement = diffAction.replacedBy.render().querySelector(".wrapper") const clone = replacement.cloneNode(true) original.replaceWith(clone) clone.onclick = replacement.onclick diffAction.replacedBy.rendered = diffAction.node.rendered // TomNodeRenderer.positionConnections(diffAction.node.rendered) } /** * Execute removal transition for a given `removed` reconciliation action * @param diffAction */ static reconcileRemoved(diffAction) { const size = getComputedStyle(diffAction.node.rendered).fontSize const keyframes = [{ boxShadow: options.includes("debug") ? "0 0 10px rgba(237, 20, 121, 0.25), 0 0 0 3px rgba(237, 20, 121, 0.25)" : "", fontSize: `${size}` }, { boxShadow: options.includes("debug") ? "0 0 10px rgba(237, 20, 121, 0), 0 0 0 3px rgba(237, 20, 121, 0)" : "", fontSize: 0 }] const animations = TomNodeRenderer.animateElements( diffAction.node, ".tom-node-children .tom-node", keyframes ) diffAction.node.rendered.classList.add("removing") TomNodeRenderer.positionConnections(diffAction.removedFrom.rendered) animations.forEach(anim => { anim.effect.target?.classList.add("removing") anim.oncancel = anim.onfinish = () => { // diffAction.removedFrom.children = diffAction.removedFrom.children.filter( // c => c !== diffAction.node // ) anim.effect.target?.remove() } }) } }