diff --git a/demo/toolset.html b/demo/toolset.html
index 7126fa4..ce10fba 100644
--- a/demo/toolset.html
+++ b/demo/toolset.html
@@ -18,7 +18,7 @@
folk-shape {
background: transparent;
- background-color: rgba(255, 255, 255, 0.1);
+ background-color: rgb(140, 140, 140);
border-radius: 2px;
border: 2px solid rgba(0, 0, 0, 0.5);
}
@@ -31,7 +31,7 @@
-
+
@@ -48,13 +48,14 @@
-
+
diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts
index 2e868be..6748644 100644
--- a/src/folk-event-propagator.ts
+++ b/src/folk-event-propagator.ts
@@ -42,8 +42,8 @@ export class FolkEventPropagator extends FolkRope {
`,
];
- @property({ type: String, reflect: true }) trigger = '';
- @property({ type: String, reflect: true }) expression = '';
+ @property({ type: String, reflect: true }) trigger?: string;
+ @property({ type: String, reflect: true }) expression?: string;
#triggerTextarea = document.createElement('textarea');
#expressionTextarea = document.createElement('textarea');
@@ -72,8 +72,8 @@ export class FolkEventPropagator extends FolkRope {
}
});
- this.#triggerTextarea.value = this.trigger;
- this.#expressionTextarea.value = this.expression;
+ this.#triggerTextarea.value = this.trigger ?? '';
+ this.#expressionTextarea.value = this.expression ?? '';
this.#container.append(this.#triggerTextarea, this.#expressionTextarea);
@@ -85,6 +85,13 @@ export class FolkEventPropagator extends FolkRope {
override updated(changedProperties: PropertyValues): void {
super.update(changedProperties);
+ if (changedProperties.has('trigger')) {
+ this.#triggerTextarea.value = this.trigger ?? '';
+ }
+ if (changedProperties.has('expression')) {
+ this.#expressionTextarea.value = this.expression ?? '';
+ }
+
if (changedProperties.has('trigger') || changedProperties.has('expression')) {
this.#initializePropagator();
}
diff --git a/src/folk-sand.ts b/src/folk-sand.ts
index c5331d3..730a5a0 100644
--- a/src/folk-sand.ts
+++ b/src/folk-sand.ts
@@ -11,7 +11,7 @@ import {
import { requestAnimationFrame } from './common/rAF.ts';
import { FolkBaseSet } from './folk-base-set.ts';
import { css, PropertyValues } from '@lit/reactive-element';
-import { DOMRectTransformReadonly } from './common/DOMRectTransform.ts';
+import { DOMRectTransform, DOMRectTransformReadonly } from './common/DOMRectTransform.ts';
export class FolkSand extends FolkBaseSet {
static override tagName = 'folk-sand';
@@ -608,7 +608,7 @@ export class FolkSand extends FolkBaseSet {
// Get the transformed vertices in parent space
let transformedPoints;
- if (rect instanceof DOMRectTransformReadonly) {
+ if (rect instanceof DOMRectTransform) {
transformedPoints = rect.vertices().map((point) => rect.toParentSpace(point));
} else {
transformedPoints = [
diff --git a/src/folk-toolset.ts b/src/folk-toolset.ts
index 8f37e11..e81b918 100644
--- a/src/folk-toolset.ts
+++ b/src/folk-toolset.ts
@@ -1,3 +1,5 @@
+import type { DOMRectTransform } from './common/DOMRectTransform';
+import { Vector } from './common/Vector';
import { FolkEventPropagator } from './folk-event-propagator';
import { FolkShape } from './folk-shape';
@@ -42,6 +44,7 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
readonly events = ['pointerdown', 'pointermove', 'pointerup'];
private currentPropagator: FolkEventPropagator | null = null;
+ private startPoint: { x: number; y: number } | null = null;
constructor() {
super();
@@ -58,6 +61,8 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
event.stopImmediatePropagation();
event.preventDefault();
+ this.startPoint = { x: event.clientX, y: event.clientY };
+
if (!target.id) {
target.id = `folk-source-${Date.now()}`;
}
@@ -85,10 +90,13 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
const finalTarget = document.elementFromPoint(event.clientX, event.clientY) as HTMLElement;
+ const distance = Vector.distance(this.startPoint || { x: 0, y: 0 }, { x: event.clientX, y: event.clientY });
+ console.log(distance);
if (
!finalTarget ||
finalTarget instanceof FolkEventPropagator ||
- finalTarget instanceof FolkInteractionHandler
+ finalTarget instanceof FolkInteractionHandler ||
+ distance <= 1
) {
this.currentPropagator.remove();
} else {
@@ -99,6 +107,8 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
this.currentPropagator.target = `#${finalTarget.id}`;
}
+ this.currentPropagator.trigger = 'transform';
+ this.currentPropagator.expression = 'x: from.y';
this.currentPropagator = null;
break;
}