perf: Does not compute node related stuff each render https://github.com/pocka/figspec/issues/7 Only performe flattening the node tree, determining outermost bounding rect and construct distance-lines when related values have updated. From what I saw, this change stabilizes an average FPS and makes a memory usage more mild (less GC sweep).

Changes

2 changed files (+50/-9)

• packages/components/src/FigspecViewer/DistanceGuide.ts
  • @@ -136,16 +136,26 @@
    fontSize: number; } + const guidesCache = new Map<string, readonly DistanceGuide[]>(); + export const Guides = ({ node, distanceTo, reverseScale, fontSize, }: GuidesProps) => { - const guides = getDistanceGuides( - node.absoluteBoundingBox, - distanceTo.absoluteBoundingBox - ); + const combinedId = node.id + "\n" + distanceTo.id; + + let guides = guidesCache.get(combinedId); + + if (!guides) { + guides = getDistanceGuides( + node.absoluteBoundingBox, + distanceTo.absoluteBoundingBox + ); + + guidesCache.set(combinedId, guides); + } return [ ...guides.map((guide) => Line({ guide, reverseScale })),
• packages/components/src/FigspecViewer/index.ts
  • @@ -106,6 +106,11 @@ zoomMargin: number = 50;
    #isDragModeOn: boolean = false; + // Computed values. In order to avoid computing each time scale/pan, we + // compute these values only when the source attributes has changed. + #flattenedNodes?: ReturnType<typeof flattenNode>; + #canvasMargin?: ReturnType<typeof getCanvasMargin>; + constructor() { super();
  • @@ -334,11 +339,19 @@ </p>
    `; } - const documentNode = this.documentNode as SizedNode; - - const nodes = flattenNode(documentNode); + if (!this.#flattenedNodes || !this.#canvasMargin) { + return html` + <p class="error"> + <span class="error-title">Computation Error</span> + <span class="error-description"> + Failed to calculate based on given inputs. + </span> + </p> + `; + } - const margin = getCanvasMargin(documentNode, nodes); + const documentNode = this.documentNode as SizedNode; + const margin = this.#canvasMargin; const canvasSize = documentNode.absoluteBoundingBox;
  • @@ -407,7 +420,7 @@ </g>
    ` } - ${nodes.map((node) => { + ${this.#flattenedNodes.map((node) => { if (node.id === this.selectedNode?.id) { return null; }
  • @@ -447,6 +460,24 @@ disconnectedCallback() {
    document.removeEventListener("keyup", this.#keyUp); document.removeEventListener("keydown", this.#keyDown); super.disconnectedCallback(); + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + // Flatten a node tree and calculate outermost boundary rect, + // then save these result. + if (changedProperties.has("nodes")) { + if (!this.documentNode) return; + + this.#flattenedNodes = flattenNode(this.documentNode); + this.#canvasMargin = getCanvasMargin( + this.documentNode, + this.#flattenedNodes + ); + + // Since above properties aren't "attribute", their changes does not + // trigger an update. We need to manually request an update. + this.requestUpdate(); + } } #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => {