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

better text area for propagators

This commit is contained in:
“chrisshank” 2024-11-24 17:44:57 -08:00
parent b8aae90d1b
commit 328442627f
3 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/event-propagator.html
View File

@ -33,7 +33,7 @@
</head>
<body>
<fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
<fc-geometry id="box2" x="200" y="300">Hello World</fc-geometry>
<fc-geometry id="box2" x="200" y="350">Hello World</fc-geometry>
<event-propagator
source="#box1"
target="#box2"
@ -41,8 +41,8 @@
expression="$target.textContent += '!'"
></event-propagator>
<fc-geometry id="box3" x="150" y="200" width="30" height="30"></fc-geometry>
<fc-geometry id="box4" x="300" y="350" width="30" height="30"></fc-geometry>
<fc-geometry id="box3" x="350" y="200" width="30" height="30"></fc-geometry>
<fc-geometry id="box4" x="500" y="250" width="30" height="30"></fc-geometry>
<event-propagator
source="#box3"
target="#box4"

47
src/arrows/event-propagator.ts
View File

@ -1,5 +1,23 @@
import { FolkRope } from './fc-rope.ts';
const styles = new CSSStyleSheet();
styles.replaceSync(`
textarea {
position: absolute;
width: auto;
min-width: 60px;
height: auto;
resize: none;
background: rgba(256, 256, 256, 0.8);
border: 1px solid #ccc;
padding: 4px;
pointer-events: auto;
overflow: hidden;
field-sizing: content;
translate: -50% -50%;
}
`);
export class EventPropagator extends FolkRope {
static override tagName = 'event-propagator';
@ -24,7 +42,7 @@ export class EventPropagator extends FolkRope {
} catch (error) {
console.warn('Failed to parse expression:', error);
// Use no-op function when parsing fails
this.break();
this.cut();
this.#function = () => {};
}
}
@ -34,27 +52,15 @@ export class EventPropagator extends FolkRope {
constructor() {
super();
this.#textarea.style.cssText = `
position: absolute;
width: auto;
min-width: 60px;
height: auto;
resize: none;
background: white;
border: 1px solid #ccc;
padding: 4px;
pointer-events: auto;
overflow: hidden;
field-sizing: content;
`;
this.shadowRoot?.adoptedStyleSheets.push(styles);
this.#textarea.value = this.getAttribute('expression') || '';
this.#textarea.addEventListener('input', () => {
this.expression = this.#textarea.value;
});
this.shadowRoot?.appendChild(this.#textarea);
this.expression = this.#textarea.value;
this.expression = this.#textarea.value = this.getAttribute('expression') || '';
}
override render(sourceRect: DOMRectReadOnly, targetRect: DOMRectReadOnly) {
@ -63,10 +69,15 @@ export class EventPropagator extends FolkRope {
// Position textarea between source and target
const midX = (sourceRect.x + targetRect.x) / 2;
const midY = (sourceRect.y + targetRect.y) / 2;
}
override draw() {
super.draw();
const point = this.points[Math.floor(this.points.length / 2)];
// Center the textarea by subtracting half its width and height
this.#textarea.style.left = `${midX - this.#textarea.offsetWidth / 2}px`;
this.#textarea.style.top = `${midY - this.#textarea.offsetHeight / 2}px`;
this.#textarea.style.left = `${point.pos.x}px`;
this.#textarea.style.top = `${point.pos.y}px`;
}
override observeSource() {

12
src/arrows/fc-rope.ts
View File

@ -61,6 +61,10 @@ export class FolkRope extends AbstractArrow {
#gravity = { x: 0, y: 3000 };
#points: RopePoint[] = [];
get points() {
return this.#points;
}
#stroke = this.getAttribute('stroke') || 'black';
get stroke() {
return this.#stroke;
@ -92,7 +96,7 @@ export class FolkRope extends AbstractArrow {
#onResize = (entry: ResizeObserverEntry) => {
this.#canvas.width = entry.contentRect.width;
this.#canvas.height = entry.contentRect.height;
this.#drawRopePoints();
this.draw();
};
#tick = (timestamp: number = performance.now()) => {
@ -117,7 +121,7 @@ export class FolkRope extends AbstractArrow {
this.#previousDelta = dts;
this.#drawRopePoints();
this.draw();
this.#lastTime = this.#currentTime - (this.#deltaTime % this.#interval);
}
@ -149,7 +153,7 @@ export class FolkRope extends AbstractArrow {
endingPoint.pos.y = targetRect.bottom;
}
#drawRopePoints() {
draw() {
this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
for (let i = 0; i < this.#points.length; i++) {
@ -264,7 +268,7 @@ export class FolkRope extends AbstractArrow {
}
}
break(index = Math.floor(this.#points.length / 2)) {
cut(index = Math.floor(this.#points.length / 2)) {
if (this.#points.length === 0) return;
this.#points[index].next = null;