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

simplify

This commit is contained in:
Orion Reed 2024-12-16 00:11:44 -05:00
parent 3270b18597
commit f6303b7d23
1 changed files with 43 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/folk-graph.ts
View File

@ -5,45 +5,26 @@ import { FolkShape } from './folk-shape.ts';
import { FolkArrow } from './folk-arrow.ts'; import { FolkArrow } from './folk-arrow.ts';
import { AnimationFrameController, AnimationFrameControllerHost } from './common/animation-frame-controller.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 { export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost {
static override tagName = 'folk-graph'; static override tagName = 'folk-graph';
private graphSim: Layout; private graphSim = new Layout();
private colaNodes: Map<FolkShape, ColaNode> = new Map(); private nodes = new Map<FolkShape, number>();
private colaLinks: Map<FolkArrow, ColaLink> = new Map(); private arrows = new Set<FolkArrow>();
#rAF = new AnimationFrameController(this); #rAF = new AnimationFrameController(this);
constructor() {
super();
this.graphSim = new Layout();
}
render() {}
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.#rAF.start(); this.#rAF.start();
} }
render() {}
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.#rAF.stop(); this.#rAF.stop();
this.colaNodes.clear(); this.nodes.clear();
this.colaLinks.clear(); this.arrows.clear();
} }
override update(changedProperties: PropertyValues<this>) { override update(changedProperties: PropertyValues<this>) {
@ -54,68 +35,55 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
tick() { tick() {
this.graphSim.start(1, 0, 0, 0, true, false); 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; const shape = node.id;
if (shape !== document.activeElement) { if (shape === document.activeElement) {
shape.x = node.x - shape.width / 2;
shape.y = node.y - shape.height / 2;
} else {
const rect = shape.getTransformDOMRect(); const rect = shape.getTransformDOMRect();
node.x = rect.center.x; node.x = rect.center.x;
node.y = rect.center.y; node.y = rect.center.y;
} else {
shape.x = node.x - shape.width / 2;
shape.y = node.y - shape.height / 2;
} }
} });
} }
private updateGraph() { private updateGraph() {
this.colaNodes.clear(); this.nodes.clear();
this.colaLinks.clear(); this.arrows.clear();
// Create nodes for shapes const colaNodes = this.createNodes();
for (const element of this.sourceElements) { const colaLinks = this.createLinks();
if (!(element instanceof FolkShape)) continue;
const rect = element.getTransformDOMRect();
const node: ColaNode = { this.graphSim.nodes(colaNodes).links(colaLinks).linkDistance(250).avoidOverlaps(true).handleDisconnected(true);
id: element, }
x: rect.center.x,
y: rect.center.y,
width: rect.width,
height: rect.height,
rotation: rect.rotation,
};
this.colaNodes.set(element, node);
}
// Create links from arrows private createNodes() {
const arrows = Array.from(this.sourceElements).filter( return Array.from(this.sourceElements)
(element): element is FolkArrow => element instanceof FolkArrow .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) { private createLinks() {
const source = arrow.sourceElement as FolkShape; return Array.from(this.sourceElements)
const target = arrow.targetElement as FolkShape; .filter((element): element is FolkArrow => element instanceof FolkArrow)
if (!source || !target) continue; .map((arrow) => {
if (!this.colaNodes.has(source) || !this.colaNodes.has(target)) continue; this.arrows.add(arrow);
const source = this.nodes.get(arrow.sourceElement as FolkShape);
const link: ColaLink = { const target = this.nodes.get(arrow.targetElement as FolkShape);
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);
return source !== undefined && target !== undefined ? { source, target } : null; return source !== undefined && target !== undefined ? { source, target } : null;
}) })
.filter((l): l is { source: number; target: number } => l !== null); .filter((link): link is { source: number; target: number } => link !== null);
this.graphSim.nodes(nodes).links(links).linkDistance(250).avoidOverlaps(true).handleDisconnected(true);
} }
} }