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 {
static override tagName = 'folk-graph';
private graphSim = new Layout();
private nodes = new Map<FolkShape, number>();
private arrows = new Set<FolkBaseConnection>();
private integrator = TransformIntegrator.register('graph');
#graphSim = new Layout();
#nodes = new Map<FolkShape, number>();
#arrows = new Set<FolkBaseConnection>();
#integrator = TransformIntegrator.register('graph');
#rAF = new AnimationFrameController(this);
connectedCallback() {
@ -24,24 +24,24 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
disconnectedCallback() {
super.disconnectedCallback();
this.#rAF.stop();
this.nodes.clear();
this.arrows.clear();
this.#nodes.clear();
this.#arrows.clear();
}
override update(changedProperties: PropertyValues<this>) {
super.update(changedProperties);
if (changedProperties.has('sourceElements')) {
this.createGraph();
this.#createGraph();
}
}
async tick() {
this.graphSim.start(1, 0, 0, 0, true, false);
this.#graphSim.start(1, 0, 0, 0, true, false);
// 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;
this.integrator.yield(shape, {
this.#integrator.yield(shape, {
x: node.x - shape.width / 2,
y: node.y - shape.height / 2,
rotation: shape.rotation,
@ -51,10 +51,10 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
}
// 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) {
// 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) {
node.x = result.x + shape.width / 2;
node.y = result.y + shape.height / 2;
@ -62,23 +62,23 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
}
}
private createGraph() {
this.nodes.clear();
this.arrows.clear();
#createGraph() {
this.#nodes.clear();
this.#arrows.clear();
const colaNodes = this.createNodes();
const colaLinks = this.createLinks();
const colaNodes = this.#createNodes();
const colaLinks = this.#createLinks();
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)
.filter((element): element is FolkShape => element instanceof FolkShape)
.map((shape, index) => {
this.nodes.set(shape, index);
this.#nodes.set(shape, index);
const rect = shape.getTransformDOMRect();
return {
id: shape,
@ -91,13 +91,13 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
});
}
private createLinks() {
#createLinks() {
return Array.from(this.sourceElements)
.filter((element): element is FolkBaseConnection => element instanceof FolkBaseConnection)
.map((arrow) => {
this.arrows.add(arrow);
const source = this.nodes.get(arrow.sourceElement as FolkShape);
const target = this.nodes.get(arrow.targetElement as FolkShape);
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((link): link is { source: number; target: number } => link !== null);