diff --git a/demo/event-propagator.html b/demo/event-propagator.html
index 4559f36..3e076dd 100644
--- a/demo/event-propagator.html
+++ b/demo/event-propagator.html
@@ -33,7 +33,7 @@
- Hello World
+ Hello World
-
-
+
+
{};
}
}
@@ -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.#textarea.value = this.getAttribute('expression') || '';
+ this.shadowRoot?.adoptedStyleSheets.push(styles);
+
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() {
diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts
index 9589507..72039c3 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/fc-rope.ts
@@ -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;