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 {
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 @@
</head>
<body>
<folk-toolset>
<folk-distance-field>
<folk-sand>
<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="s3" x="100" y="300" width="50" height="50"></folk-shape>
@ -48,13 +48,14 @@
<folk-shape x="500" y="300">
<folk-propagator-tool></folk-propagator-tool>
</folk-shape>
</folk-distance-field>
</folk-sand>
</folk-toolset>
<script type="module">
import '../src/standalone/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-distance-field.ts';
import '../src/standalone/folk-sand.ts';
import '../src/standalone/folk-toolset.ts';
</script>
</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 }) 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<this>): 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();
}

4
src/folk-sand.ts
View File

@ -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 = [

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 { 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;
}