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

setup

This commit is contained in:
Orion Reed 2024-12-16 03:39:28 -05:00
parent 9cd67a25f7
commit 6774e83774
4 changed files with 187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
demo/effect-integrator.html Normal file
View File

@ -0,0 +1,61 @@
<!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);
}
folk-rope {
pointer-events: none;
}
</style>
</head>
<body>
<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-rope id="rope1" source="#shape1" target="#shape2"></folk-rope>
<folk-rope id="rope2" source="#shape1" target="#shape3"></folk-rope>
<folk-rope id="rope3" source="#shape2" target="#shape3"></folk-rope>
<folk-rope id="rope4" source="#shape3" target="#shape4"></folk-rope>
<folk-rope id="rope5" source="#shape4" target="#shape8"></folk-rope>
<folk-rope id="rope6" source="#shape5" target="#shape8"></folk-rope>
<!-- <folk-graph
sources="#shape1, #shape2, #shape3, #shape4, #shape5, #shape6, #shape7, #shape8, #rope1, #rope2, #rope3, #rope4, #rope5, #rope6"
></folk-graph> -->
<folk-physics
sources="#shape1, #shape2, #shape3, #shape4, #shape5, #shape6, #shape7, #shape8, #rope1, #rope2, #rope3, #rope4, #rope5, #rope6"
></folk-physics>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-arrow.ts';
import '../src/standalone/folk-rope.ts';
import '../src/standalone/folk-graph.ts';
import '../src/standalone/folk-physics.ts';
</script>
</body>
</html>

119
src/common/EffectIntegrator.ts Normal file
View File

@ -0,0 +1,119 @@
import type { FolkShape } from '../folk-shape';
/**
* Coordinates effects between multiple systems, integrating their proposals into a single result.
* Systems register, yield effects, and await integration when all systems are ready.
*/
export class EffectIntegrator<T> {
private pending = new Map<Element, T[] | T>();
private systems = new Set<string>();
private waiting = new Set<string>();
private resolvers: ((value: Map<Element, T>) => void)[] = [];
/** Register a system to participate in effect integration */
register(id: string) {
this.systems.add(id);
return {
yield: (element: Element, effect: T) => {
if (!this.pending.has(element)) {
this.pending.set(element, []);
}
(this.pending.get(element)! as T[]).push(effect);
},
/** Wait for all systems to submit effects, then receive integrated results */
integrate: async (): Promise<Map<Element, T>> => {
this.waiting.add(id);
if (this.waiting.size === this.systems.size) {
// Last system to call integrate - do integration
for (const [element, effects] of this.pending) {
this.pending.set(element, (this.constructor as typeof EffectIntegrator).integrate(element, effects as T[]));
}
const results = this.pending as Map<Element, T>;
// Reset for next frame
this.pending = new Map();
this.waiting.clear();
// Resolve all waiting systems
this.resolvers.forEach((resolve) => resolve(results));
this.resolvers = [];
return results;
}
// Not all systems ready - wait for integration
return new Promise((resolve) => {
this.resolvers.push(resolve);
});
},
};
}
/** Integrate multiple effects into a single result. Must be implemented by derived classes. */
protected static integrate(element: Element, effects: any[]): any {
throw new Error('Derived class must implement static integrate');
}
}
// Transform-specific integrator
interface TransformEffect {
x: number;
y: number;
rotation: number;
width: number;
height: number;
}
export class TransformIntegrator extends EffectIntegrator<TransformEffect> {
private static instance: TransformIntegrator;
static register(id: string) {
if (!TransformIntegrator.instance) {
TransformIntegrator.instance = new TransformIntegrator();
}
return TransformIntegrator.instance.register(id);
}
/** If the element is focused, return the elements rect, otherwise average the effects */
protected static override integrate(element: FolkShape, effects: TransformEffect[]): TransformEffect {
if (element === document.activeElement) {
// If the element is focused, we don't want to apply any effects and just return the current state
const rect = element.getTransformDOMRect();
return {
x: rect.x,
y: rect.y,
rotation: rect.rotation,
width: rect.width,
height: rect.height,
};
}
// Accumulate all effects
const result = effects.reduce(
(acc, effect) => ({
x: acc.x + effect.x,
y: acc.y + effect.y,
rotation: acc.rotation + effect.rotation,
width: effect.width,
height: effect.height,
}),
{ x: 0, y: 0, rotation: 0, width: effects[0].width, height: effects[0].height }
);
// Average all effects
const count = effects.length;
result.x /= count;
result.y /= count;
result.rotation /= count;
// Apply averaged results to element
element.x = result.x;
element.y = result.y;
element.rotation = result.rotation;
// Return averaged result
return result;
}
}

5
src/folk-base-set.ts
View File

@ -63,12 +63,17 @@ export class FolkBaseSet extends FolkElement {
#onSlotchange = () => this.#observeSources(); #onSlotchange = () => this.#observeSources();
#observeSources() { #observeSources() {
console.log('observeSources');
const childElements = new Set(this.children); const childElements = new Set(this.children);
const elements = this.sources ? document.querySelectorAll(this.sources) : []; const elements = this.sources ? document.querySelectorAll(this.sources) : [];
const sourceElements = new Set(elements).union(childElements); const sourceElements = new Set(elements).union(childElements);
const elementsToObserve = sourceElements.difference(this.sourceElements); const elementsToObserve = sourceElements.difference(this.sourceElements);
const elementsToUnobserve = this.sourceElements.difference(sourceElements); const elementsToUnobserve = this.sourceElements.difference(sourceElements);
console.log('sourceElements', sourceElements);
console.log('elementsToObserve', elementsToObserve);
console.log('elementsToUnobserve', elementsToUnobserve);
this.unobserveSources(elementsToUnobserve); this.unobserveSources(elementsToUnobserve);
for (const el of elementsToObserve) { for (const el of elementsToObserve) {

2
src/folk-graph.ts
View File

@ -58,6 +58,8 @@ export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHo
const colaNodes = this.createNodes(); const colaNodes = this.createNodes();
const colaLinks = this.createLinks(); 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);
} }