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

graph layout

This commit is contained in:
Orion Reed 2024-12-15 23:52:41 -05:00
parent 0c07abac02
commit 6f80ca89f9
4 changed files with 191 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
demo/graph layout.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Physics</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
inset: 0;
overscroll-behavior: none;
}
folk-shape {
position: absolute;
background-color: rgba(100, 100, 100, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<folk-graph>
<folk-shape id="shape1" x="250" y="50" width="120" height="30" rotation="30"></folk-shape>
<folk-shape id="shape2" x="450" y="350" width="40" height="120" rotation="45"></folk-shape>
<folk-shape id="shape3" x="150" y="150" width="70" height="70" rotation="15"></folk-shape>
<folk-shape id="shape4" x="350" y="300" width="90" height="45" rotation="-20"></folk-shape>
<folk-shape id="shape5" x="550" y="200" width="35" height="85" rotation="60"></folk-shape>
<folk-shape id="shape6" x="180" y="250" width="65" height="55" rotation="-40"></folk-shape>
<folk-shape id="shape7" x="420" y="150" width="110" height="25" rotation="10"></folk-shape>
<folk-shape id="shape8" x="280" y="380" width="75" height="95" rotation="-50"></folk-shape>
<folk-arrow source="#shape1" target="#shape2"></folk-arrow>
<folk-arrow source="#shape1" target="#shape3"></folk-arrow>
<folk-arrow source="#shape2" target="#shape3"></folk-arrow>
<folk-arrow source="#shape3" target="#shape4"></folk-arrow>
<folk-arrow source="#shape4" target="#shape8"></folk-arrow>
<folk-arrow source="#shape5" target="#shape8"></folk-arrow>
</folk-graph>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-graph.ts';
import '../src/standalone/folk-arrow.ts';
</script>
</body>
</html>

4
package.json
View File

@ -15,7 +15,9 @@
"@lit/reactive-element": "^2.0.4", "@lit/reactive-element": "^2.0.4",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"perfect-arrows": "^0.3.7", "perfect-arrows": "^0.3.7",
"perfect-freehand": "^1.2.2" "perfect-freehand": "^1.2.2",
"vite-plugin-wasm": "^3.3.0",
"webcola": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
"@types/leaflet": "^1.9.14", "@types/leaflet": "^1.9.14",

131
src/folk-graph.ts Normal file
View File

@ -0,0 +1,131 @@
import { DOMRectTransform } from './common/DOMRectTransform.ts';
import { FolkBaseSet } from './folk-base-set.ts';
import { PropertyValues } from '@lit/reactive-element';
import { Layout } from 'webcola';
import { FolkShape } from './folk-shape.ts';
import { FolkArrow } from './folk-arrow.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 {
static override tagName = 'folk-graph';
private graphSim: Layout;
private animationFrameId?: number;
private colaNodes: Map<FolkShape, ColaNode> = new Map();
private colaLinks: Map<FolkArrow, ColaLink> = new Map();
constructor() {
super();
this.graphSim = new Layout();
}
connectedCallback() {
super.connectedCallback();
this.startSimulation();
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
this.colaNodes.clear();
this.colaLinks.clear();
}
override update(changedProperties: PropertyValues<this>) {
super.update(changedProperties);
this.updateGraph();
}
private updateGraph() {
// Clear existing nodes and links
this.colaNodes.clear();
this.colaLinks.clear();
// Create nodes for shapes
for (const element of this.sourceElements) {
if (!(element instanceof FolkShape)) continue;
const rect = this.sourcesMap.get(element);
if (!(rect instanceof DOMRectTransform)) continue;
const node: ColaNode = {
id: element,
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2,
width: rect.width,
height: rect.height,
rotation: rect.rotation,
};
this.colaNodes.set(element, node);
}
// Create links from arrows
const arrows = Array.from(this.sourceElements).filter(
(element): element is FolkArrow => element instanceof FolkArrow
);
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);
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);
}
private startSimulation() {
const step = () => {
this.graphSim.start(1, 0, 0, 0, true, false);
for (const node of this.graphSim.nodes() as ColaNode[]) {
const shape = node.id;
const rect = this.sourcesMap.get(shape);
if (!(rect instanceof DOMRectTransform)) continue;
if (shape !== document.activeElement) {
shape.x = node.x - rect.width / 2;
shape.y = node.y - rect.height / 2;
} else {
node.x = rect.x + rect.width / 2;
node.y = rect.y + rect.height / 2;
}
}
this.animationFrameId = requestAnimationFrame(step);
};
this.animationFrameId = requestAnimationFrame(step);
}
}

5
src/standalone/folk-graph.ts Normal file
View File

@ -0,0 +1,5 @@
import { FolkGraph } from '../folk-graph';
FolkGraph.define();
export { FolkGraph };