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

cut and mend tools

This commit is contained in:
“chrisshank” 2024-12-15 10:23:13 -08:00
parent 3ec653ab96
commit 196d0a11b8
4 changed files with 211 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
demo/cutting-event-propagators.html Normal file
View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Propagator w/ tools</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
folk-shape {
background-color: black;
border-radius: 5px;
color: white;
padding: 0px 5px;
z-index: 10;
}
button {
font-size: 1.5rem;
}
</style>
</head>
<body>
<button id="cut">✂️</button>
<button id="mend">🪢</button>
<folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
<folk-event-propagator
source="#box1"
target="#box2"
trigger="click"
expression="textContent: to.textContent + '!'"
></folk-event-propagator>
<folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
<folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
<folk-event-propagator
source="#box3"
target="#box4"
trigger="transform"
expression="y: from.x,
rotation: from.x/10"
></folk-event-propagator>
<script type="module">
import '../src/standalone/folk-shape.ts';
import { FolkEventPropagator } from '../src/standalone/folk-event-propagator.ts';
class CutTool {
entry() {
document.addEventListener('pointerdown', this, { capture: true });
}
exit() {
document.removeEventListener('pointerdown', this, { capture: true });
}
handleEvent(event) {
// Stop the default focus and pointer capture of geometry elements
event.preventDefault();
event.stopPropagation();
switch (event.type) {
case 'pointerdown': {
document.addEventListener('pointermove', this);
document.addEventListener('pointerup', this);
return;
}
case 'pointermove': {
if (event.target instanceof FolkEventPropagator) {
const percent = event.target.getPercentageFromPoint({ x: event.clientX, y: event.clientY });
event.target.cut(percent);
}
return;
}
case 'pointerup': {
document.removeEventListener('pointermove', this);
document.removeEventListener('pointerup', this);
return;
}
}
}
}
class MendTool {
entry() {
document.addEventListener('pointerdown', this, { capture: true });
}
exit() {
document.removeEventListener('pointerdown', this, { capture: true });
}
handleEvent(event) {
// Stop the default focus and pointer capture of geometry elements
event.preventDefault();
event.stopPropagation();
switch (event.type) {
case 'pointerdown': {
document.addEventListener('pointermove', this, { capture: true });
document.addEventListener('pointerup', this, { capture: true });
return;
}
case 'pointermove': {
if (event.target instanceof FolkEventPropagator) {
event.target.mend();
}
return;
}
case 'pointerup': {
document.removeEventListener('pointermove', this, { capture: true });
document.removeEventListener('pointerup', this, { capture: true });
return;
}
}
}
}
const tools = new Map();
tools.set(window.cut, new CutTool());
tools.set(window.mend, new MendTool());
let activeTool = null;
document.addEventListener('click', (e) => {
const tool = tools.get(event.target);
if (tool === undefined) return;
activeTool?.exit();
if (tool === activeTool) {
activeTool === null;
} else {
activeTool = tool;
activeTool.entry();
}
});
</script>
</body>
</html>

10
src/common/animation-frame-controller.ts
View File

@ -34,9 +34,7 @@ export class AnimationFrameController implements ReactiveController {
} }
hostUpdated() { hostUpdated() {
window.clearTimeout(this.#timeoutId); this.reset();
this.#timeoutId = window.setTimeout(this.stop, this.#timeoutMs);
this.start();
} }
hostDisconnected() { hostDisconnected() {
@ -68,6 +66,12 @@ export class AnimationFrameController implements ReactiveController {
this.#tick(); this.#tick();
} }
reset() {
window.clearTimeout(this.#timeoutId);
this.#timeoutId = window.setTimeout(this.stop, this.#timeoutMs);
this.start();
}
stop = () => { stop = () => {
cancelAnimationFrame(this.#tick); cancelAnimationFrame(this.#tick);
window.clearTimeout(this.#timeoutId); window.clearTimeout(this.#timeoutId);

18
src/folk-event-propagator.ts
View File

@ -68,7 +68,7 @@ export class FolkEventPropagator extends FolkRope {
this.#expressionTextarea.addEventListener('focusout', () => { this.#expressionTextarea.addEventListener('focusout', () => {
if (this.#hasError) { if (this.#hasError) {
this.cut(); super.cut();
} }
}); });
@ -113,8 +113,10 @@ export class FolkEventPropagator extends FolkRope {
this.#hasError = true; this.#hasError = true;
}, },
onParseSuccess: () => { onParseSuccess: () => {
if (this.#hasError) {
super.mend();
}
this.#hasError = false; this.#hasError = false;
this.mend();
}, },
}); });
} }
@ -128,4 +130,16 @@ export class FolkEventPropagator extends FolkRope {
this.#container.style.top = `${point.pos.y}px`; this.#container.style.top = `${point.pos.y}px`;
} }
} }
override cut(atPercentage?: number): void {
super.cut(atPercentage);
this.#propagator?.dispose();
}
override mend(): void {
super.mend();
this.#initializePropagator();
}
} }

46
src/folk-rope.ts
View File

@ -259,18 +259,29 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
if (point.prev) applyConstraint(point, point.prev); if (point.prev) applyConstraint(point, point.prev);
} }
cut(atPercentage = 0.5) { #cutIndex = -1;
const index = this.#getPointIndexAt(atPercentage);
this.#points[index].next = null; get isCut() {
this.#points[index + 1].prev = null; return this.#cutIndex !== -1;
} }
mend(atPercentage = 0.5) { cut(atPercentage = 0.5) {
const index = this.#getPointIndexAt(atPercentage); if (this.isCut) return;
this.#points[index].next = this.#points[index + 1]; this.#cutIndex = this.#getPointIndexAt(atPercentage);
this.#points[index + 1].prev = this.#points[index];
this.#points[this.#cutIndex].next = null;
this.#points[this.#cutIndex + 1].prev = null;
this.#rAF.reset();
}
mend() {
if (!this.isCut) return;
this.#points[this.#cutIndex].next = this.#points[this.#cutIndex + 1];
this.#points[this.#cutIndex + 1].prev = this.#points[this.#cutIndex];
this.#cutIndex = -1;
this.#rAF.reset();
} }
getPointAt(percentage: number) { getPointAt(percentage: number) {
@ -281,6 +292,25 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
const clamped = Math.min(Math.max(percentage, 0), 1); const clamped = Math.min(Math.max(percentage, 0), 1);
return Math.floor(this.#points.length * clamped); return Math.floor(this.#points.length * clamped);
} }
getPercentageFromPoint(hitPoint: Point): number | null {
for (let i = 0; i < this.#points.length - 1; i++) {
const point = this.#points[i];
const nextPoint = point.next;
if (nextPoint === null) return null;
if (
Vector.distance(point.pos, hitPoint) +
Vector.distance(hitPoint, nextPoint.pos) -
Vector.distance(point.pos, nextPoint.pos) <
1
) {
return i / this.#points.length;
}
}
return null;
}
} }
function applyConstraint(p1: RopePoint, p2: RopePoint) { function applyConstraint(p1: RopePoint, p2: RopePoint) {