From f6303b7d23c6a839aeed156fde5778e85bc247cd Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Mon, 16 Dec 2024 00:11:44 -0500 Subject: [PATCH] simplify --- src/folk-graph.ts | 118 +++++++++++++++++----------------------------- 1 file changed, 43 insertions(+), 75 deletions(-) diff --git a/src/folk-graph.ts b/src/folk-graph.ts index 001ecb0..59f9867 100644 --- a/src/folk-graph.ts +++ b/src/folk-graph.ts @@ -5,45 +5,26 @@ import { FolkShape } from './folk-shape.ts'; import { FolkArrow } from './folk-arrow.ts'; import { AnimationFrameController, AnimationFrameControllerHost } from './common/animation-frame-controller.ts'; -type ColaNode = { - id: FolkShape; - x: number; - y: number; - width: number; - height: number; - rotation: number; -}; - -type ColaLink = { - source: FolkShape; - target: FolkShape; -}; - export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost { static override tagName = 'folk-graph'; - private graphSim: Layout; - private colaNodes: Map = new Map(); - private colaLinks: Map = new Map(); + private graphSim = new Layout(); + private nodes = new Map(); + private arrows = new Set(); #rAF = new AnimationFrameController(this); - constructor() { - super(); - this.graphSim = new Layout(); - } - - render() {} - connectedCallback() { super.connectedCallback(); this.#rAF.start(); } + render() {} + disconnectedCallback() { super.disconnectedCallback(); this.#rAF.stop(); - this.colaNodes.clear(); - this.colaLinks.clear(); + this.nodes.clear(); + this.arrows.clear(); } override update(changedProperties: PropertyValues) { @@ -54,68 +35,55 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo tick() { this.graphSim.start(1, 0, 0, 0, true, false); - for (const node of this.graphSim.nodes() as ColaNode[]) { + this.graphSim.nodes().forEach((node: any) => { const shape = node.id; - if (shape !== document.activeElement) { - shape.x = node.x - shape.width / 2; - shape.y = node.y - shape.height / 2; - } else { + if (shape === document.activeElement) { const rect = shape.getTransformDOMRect(); node.x = rect.center.x; node.y = rect.center.y; + } else { + shape.x = node.x - shape.width / 2; + shape.y = node.y - shape.height / 2; } - } + }); } private updateGraph() { - this.colaNodes.clear(); - this.colaLinks.clear(); + this.nodes.clear(); + this.arrows.clear(); - // Create nodes for shapes - for (const element of this.sourceElements) { - if (!(element instanceof FolkShape)) continue; - const rect = element.getTransformDOMRect(); + const colaNodes = this.createNodes(); + const colaLinks = this.createLinks(); - const node: ColaNode = { - id: element, - x: rect.center.x, - y: rect.center.y, - width: rect.width, - height: rect.height, - rotation: rect.rotation, - }; - this.colaNodes.set(element, node); - } + this.graphSim.nodes(colaNodes).links(colaLinks).linkDistance(250).avoidOverlaps(true).handleDisconnected(true); + } - // Create links from arrows - const arrows = Array.from(this.sourceElements).filter( - (element): element is FolkArrow => element instanceof FolkArrow - ); + private createNodes() { + return Array.from(this.sourceElements) + .filter((element): element is FolkShape => element instanceof FolkShape) + .map((shape, index) => { + this.nodes.set(shape, index); + const rect = shape.getTransformDOMRect(); + return { + id: shape, + x: rect.center.x, + y: rect.center.y, + width: rect.width, + height: rect.height, + rotation: rect.rotation, + }; + }); + } - for (const arrow of arrows) { - const source = arrow.sourceElement as FolkShape; - const target = arrow.targetElement as FolkShape; - if (!source || !target) continue; - if (!this.colaNodes.has(source) || !this.colaNodes.has(target)) continue; - - const link: ColaLink = { - source, - target, - }; - this.colaLinks.set(arrow, link); - } - - const nodes = [...this.colaNodes.values()]; - const nodeIdToIndex = new Map(nodes.map((n, i) => [n.id, i])); - - const links = Array.from(this.colaLinks.values()) - .map((l) => { - const source = nodeIdToIndex.get(l.source); - const target = nodeIdToIndex.get(l.target); + private createLinks() { + return Array.from(this.sourceElements) + .filter((element): element is FolkArrow => element instanceof FolkArrow) + .map((arrow) => { + this.arrows.add(arrow); + const source = this.nodes.get(arrow.sourceElement as FolkShape); + const target = this.nodes.get(arrow.targetElement as FolkShape); return source !== undefined && target !== undefined ? { source, target } : null; }) - .filter((l): l is { source: number; target: number } => l !== null); - - this.graphSim.nodes(nodes).links(links).linkDistance(250).avoidOverlaps(true).handleDisconnected(true); + .filter((link): link is { source: number; target: number } => link !== null); } }