jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use private class fields for graph

This commit is contained in:
“chrisshank” 2024-12-19 00:41:27 -08:00
parent 5a597798c8
commit d0567e6d2c
1 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
labs/folk-graph.ts
View File

@ -8,10 +8,10 @@ import { FolkShape } from './folk-shape.ts';
export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost { export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost {
static override tagName = 'folk-graph'; static override tagName = 'folk-graph';
private graphSim = new Layout(); #graphSim = new Layout();
private nodes = new Map<FolkShape, number>(); #nodes = new Map<FolkShape, number>();
private arrows = new Set<FolkBaseConnection>(); #arrows = new Set<FolkBaseConnection>();
private integrator = TransformIntegrator.register('graph'); #integrator = TransformIntegrator.register('graph');
#rAF = new AnimationFrameController(this); #rAF = new AnimationFrameController(this);
connectedCallback() { connectedCallback() {
@ -24,24 +24,24 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.#rAF.stop(); this.#rAF.stop();
this.nodes.clear(); this.#nodes.clear();
this.arrows.clear(); this.#arrows.clear();
} }
override update(changedProperties: PropertyValues<this>) { override update(changedProperties: PropertyValues<this>) {
super.update(changedProperties); super.update(changedProperties);
if (changedProperties.has('sourceElements')) { if (changedProperties.has('sourceElements')) {
this.createGraph(); this.#createGraph();
} }
} }
async tick() { async tick() {
this.graphSim.start(1, 0, 0, 0, true, false); this.#graphSim.start(1, 0, 0, 0, true, false);
// Yield graph layout effects // Yield graph layout effects
for (const node of this.graphSim.nodes() as any[]) { for (const node of this.#graphSim.nodes() as any[]) {
const shape = node.id; const shape = node.id;
this.integrator.yield(shape, { this.#integrator.yield(shape, {
x: node.x - shape.width / 2, x: node.x - shape.width / 2,
y: node.y - shape.height / 2, y: node.y - shape.height / 2,
rotation: shape.rotation, rotation: shape.rotation,
@ -51,10 +51,10 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
} }
// Get integrated results and update graph state // Get integrated results and update graph state
const results = await this.integrator.integrate(); const results = await this.#integrator.integrate();
for (const [shape, result] of results) { for (const [shape, result] of results) {
// TODO: this is a hack to get the node from the graph // TODO: this is a hack to get the node from the graph
const node = this.graphSim.nodes().find((n: any) => n.id === shape); const node = this.#graphSim.nodes().find((n: any) => n.id === shape);
if (node) { if (node) {
node.x = result.x + shape.width / 2; node.x = result.x + shape.width / 2;
node.y = result.y + shape.height / 2; node.y = result.y + shape.height / 2;
@ -62,23 +62,23 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
} }
} }
private createGraph() { #createGraph() {
this.nodes.clear(); this.#nodes.clear();
this.arrows.clear(); this.#arrows.clear();
const colaNodes = this.createNodes(); const colaNodes = this.#createNodes();
const colaLinks = this.createLinks(); const colaLinks = this.#createLinks();
console.log(colaNodes, colaLinks); console.log(colaNodes, colaLinks);
this.graphSim.nodes(colaNodes).links(colaLinks).linkDistance(250).avoidOverlaps(true).handleDisconnected(true); this.#graphSim.nodes(colaNodes).links(colaLinks).linkDistance(250).avoidOverlaps(true).handleDisconnected(true);
} }
private createNodes() { #createNodes() {
return Array.from(this.sourceElements) return Array.from(this.sourceElements)
.filter((element): element is FolkShape => element instanceof FolkShape) .filter((element): element is FolkShape => element instanceof FolkShape)
.map((shape, index) => { .map((shape, index) => {
this.nodes.set(shape, index); this.#nodes.set(shape, index);
const rect = shape.getTransformDOMRect(); const rect = shape.getTransformDOMRect();
return { return {
id: shape, id: shape,
@ -91,13 +91,13 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
}); });
} }
private createLinks() { #createLinks() {
return Array.from(this.sourceElements) return Array.from(this.sourceElements)
.filter((element): element is FolkBaseConnection => element instanceof FolkBaseConnection) .filter((element): element is FolkBaseConnection => element instanceof FolkBaseConnection)
.map((arrow) => { .map((arrow) => {
this.arrows.add(arrow); this.#arrows.add(arrow);
const source = this.nodes.get(arrow.sourceElement as FolkShape); const source = this.#nodes.get(arrow.sourceElement as FolkShape);
const target = this.nodes.get(arrow.targetElement as FolkShape); const target = this.#nodes.get(arrow.targetElement as FolkShape);
return source !== undefined && target !== undefined ? { source, target } : null; return source !== undefined && target !== undefined ? { source, target } : null;
}) })
.filter((link): link is { source: number; target: number } => link !== null); .filter((link): link is { source: number; target: number } => link !== null);