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

sand

This commit is contained in:
Orion Reed 2024-12-15 07:42:31 -05:00
parent e20620b85e
commit 5ac35f3fa2
4 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo/toolset.html
View File

@ -18,7 +18,7 @@
folk-shape { folk-shape {
background: transparent; background: transparent;
background-color: rgba(255, 255, 255, 0.1); background-color: rgb(140, 140, 140);
border-radius: 2px; border-radius: 2px;
border: 2px solid rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.5);
} }
@ -31,7 +31,7 @@
</head> </head>
<body> <body>
<folk-toolset> <folk-toolset>
<folk-distance-field> <folk-sand>
<folk-shape id="s1" x="100" y="100" width="50" height="50"></folk-shape> <folk-shape id="s1" x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape id="s2" x="100" y="200" width="50" height="50"></folk-shape> <folk-shape id="s2" x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape id="s3" x="100" y="300" width="50" height="50"></folk-shape> <folk-shape id="s3" x="100" y="300" width="50" height="50"></folk-shape>
@ -48,13 +48,14 @@
<folk-shape x="500" y="300"> <folk-shape x="500" y="300">
<folk-propagator-tool></folk-propagator-tool> <folk-propagator-tool></folk-propagator-tool>
</folk-shape> </folk-shape>
</folk-distance-field> </folk-sand>
</folk-toolset> </folk-toolset>
<script type="module"> <script type="module">
import '../src/standalone/folk-event-propagator.ts'; import '../src/standalone/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-distance-field.ts'; import '../src/standalone/folk-distance-field.ts';
import '../src/standalone/folk-sand.ts';
import '../src/standalone/folk-toolset.ts'; import '../src/standalone/folk-toolset.ts';
</script> </script>
</body> </body>

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

@ -42,8 +42,8 @@ export class FolkEventPropagator extends FolkRope {
`, `,
]; ];
@property({ type: String, reflect: true }) trigger = ''; @property({ type: String, reflect: true }) trigger?: string;
@property({ type: String, reflect: true }) expression = ''; @property({ type: String, reflect: true }) expression?: string;
#triggerTextarea = document.createElement('textarea'); #triggerTextarea = document.createElement('textarea');
#expressionTextarea = document.createElement('textarea'); #expressionTextarea = document.createElement('textarea');
@ -72,8 +72,8 @@ export class FolkEventPropagator extends FolkRope {
} }
}); });
this.#triggerTextarea.value = this.trigger; this.#triggerTextarea.value = this.trigger ?? '';
this.#expressionTextarea.value = this.expression; this.#expressionTextarea.value = this.expression ?? '';
this.#container.append(this.#triggerTextarea, this.#expressionTextarea); this.#container.append(this.#triggerTextarea, this.#expressionTextarea);
@ -85,6 +85,13 @@ export class FolkEventPropagator extends FolkRope {
override updated(changedProperties: PropertyValues<this>): void { override updated(changedProperties: PropertyValues<this>): void {
super.update(changedProperties); 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')) { if (changedProperties.has('trigger') || changedProperties.has('expression')) {
this.#initializePropagator(); this.#initializePropagator();
} }

4
src/folk-sand.ts
View File

@ -11,7 +11,7 @@ import {
import { requestAnimationFrame } from './common/rAF.ts'; import { requestAnimationFrame } from './common/rAF.ts';
import { FolkBaseSet } from './folk-base-set.ts'; import { FolkBaseSet } from './folk-base-set.ts';
import { css, PropertyValues } from '@lit/reactive-element'; 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 { export class FolkSand extends FolkBaseSet {
static override tagName = 'folk-sand'; static override tagName = 'folk-sand';
@ -608,7 +608,7 @@ export class FolkSand extends FolkBaseSet {
// Get the transformed vertices in parent space // Get the transformed vertices in parent space
let transformedPoints; let transformedPoints;
if (rect instanceof DOMRectTransformReadonly) { if (rect instanceof DOMRectTransform) {
transformedPoints = rect.vertices().map((point) => rect.toParentSpace(point)); transformedPoints = rect.vertices().map((point) => rect.toParentSpace(point));
} else { } else {
transformedPoints = [ transformedPoints = [

12
src/folk-toolset.ts
View File

@ -1,3 +1,5 @@
import type { DOMRectTransform } from './common/DOMRectTransform';
import { Vector } from './common/Vector';
import { FolkEventPropagator } from './folk-event-propagator'; import { FolkEventPropagator } from './folk-event-propagator';
import { FolkShape } from './folk-shape'; import { FolkShape } from './folk-shape';
@ -42,6 +44,7 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
readonly events = ['pointerdown', 'pointermove', 'pointerup']; readonly events = ['pointerdown', 'pointermove', 'pointerup'];
private currentPropagator: FolkEventPropagator | null = null; private currentPropagator: FolkEventPropagator | null = null;
private startPoint: { x: number; y: number } | null = null;
constructor() { constructor() {
super(); super();
@ -58,6 +61,8 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
event.preventDefault(); event.preventDefault();
this.startPoint = { x: event.clientX, y: event.clientY };
if (!target.id) { if (!target.id) {
target.id = `folk-source-${Date.now()}`; 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 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 ( if (
!finalTarget || !finalTarget ||
finalTarget instanceof FolkEventPropagator || finalTarget instanceof FolkEventPropagator ||
finalTarget instanceof FolkInteractionHandler finalTarget instanceof FolkInteractionHandler ||
distance <= 1
) { ) {
this.currentPropagator.remove(); this.currentPropagator.remove();
} else { } else {
@ -99,6 +107,8 @@ export class FolkPropagatorTool extends FolkInteractionHandler {
this.currentPropagator.target = `#${finalTarget.id}`; this.currentPropagator.target = `#${finalTarget.id}`;
} }
this.currentPropagator.trigger = 'transform';
this.currentPropagator.expression = 'x: from.y';
this.currentPropagator = null; this.currentPropagator = null;
break; break;
} }