From 38ed641b77bb33dd64ac42fa751fae41d66aefc6 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Fri, 20 Dec 2024 15:36:00 -0500 Subject: [PATCH] stripped down transformed space so we can debug --- labs/folk-transformed-space.ts | 107 +++------------------------- website/canvas/space-transform.html | 27 ++----- 2 files changed, 18 insertions(+), 116 deletions(-) diff --git a/labs/folk-transformed-space.ts b/labs/folk-transformed-space.ts index 267c0fa..063870c 100644 --- a/labs/folk-transformed-space.ts +++ b/labs/folk-transformed-space.ts @@ -4,13 +4,6 @@ import { html } from '@lib/tags'; import { TransformEvent } from '@lib/TransformEvent'; import { css } from '@lit/reactive-element'; -interface TransformRect { - x: number; - y: number; - width: number; - height: number; -} - export class FolkTransformedSpace extends FolkElement { static override tagName = 'folk-transformed-space'; @@ -29,8 +22,7 @@ export class FolkTransformedSpace extends FolkElement { position: absolute; width: 100%; height: 100%; - transform-style: preserve-3d; - transform-origin: center; + transform-origin: 0 0; backface-visibility: hidden; } `; @@ -46,9 +38,6 @@ export class FolkTransformedSpace extends FolkElement { `); - // Listen for transform events from shapes - this.addEventListener('transform', this.#handleTransform); - return root; } @@ -63,93 +52,19 @@ export class FolkTransformedSpace extends FolkElement { Gizmos.clear(); } - #handleTransform = (event: TransformEvent) => { - const previous = this.transformRect(event.previous); - const current = this.transformRect(event.current); + static projectPoint(point: Point, space: FolkTransformedSpace): Point { + // Visualize the click location in screen space + Gizmos.point(point, { color: 'red', size: 2 }); - Gizmos.rect(event.current, { - color: 'rgba(0, 0, 255, 0.1)', - width: 2, - layer: 'default', - }); + // Get the inverse of the current transform matrix + const inverseMatrix = space.#matrix.inverse(); - Gizmos.line(event.current, current, { - color: 'gray', - width: 2, - layer: 'transformed', - }); - Gizmos.point(event.current, { - color: 'blue', - size: 3, - layer: 'transformed', - }); - Gizmos.point(current, { - color: 'red', - size: 3, - layer: 'transformed', - }); + // Transform the screen point back to find where it should be placed on the transformed plane + const pointOnTransformedSpace = inverseMatrix.transformPoint(point); - const delta = { - x: current.x - previous.x, - y: current.y - previous.y, - }; + // Visualize where we'll place the point on the transformed plane + Gizmos.point(pointOnTransformedSpace, { color: 'blue', size: 4, layer: 'transformed' }); - event.current.x += delta.x; - event.current.y += delta.y; - }; - - localToScreen(point: Point): Point { - const spaceRect = this.getBoundingClientRect(); - const centerX = spaceRect.width / 2; - const centerY = spaceRect.height / 2; - - // Use the same matrix we're using for CSS - const matrix = new DOMMatrix().translate(centerX, centerY).multiply(this.#matrix).translate(-centerX, -centerY); - - const transformedPoint = matrix.transformPoint(new DOMPoint(point.x, point.y, 0, 1)); - - const w = transformedPoint.w || 1; - return { - x: transformedPoint.x / w, - y: transformedPoint.y / w, - }; - } - - /** - * Transforms a rect from an element in either face to screen coordinates - */ - transformRect(rect: TransformRect): TransformRect { - // Get center point - const center = { - x: rect.x, - y: rect.y, - }; - - // Transform center point - const transformedCenter = this.localToScreen(center); - - return { - x: transformedCenter.x, - y: transformedCenter.y, - width: rect.width, - height: rect.height, - }; - } - - /** - * Transforms a rect using an instance of FolkTransformedSpace if it exists in the DOM - * @param rect The rectangle to transform - * @param element Any element that might be within a FolkTransformedSpace - * @returns The transformed rect, or the original rect if no FolkTransformedSpace is found - */ - static transformRect(rect: TransformRect, element: Element): TransformRect { - const space = element.closest(this.tagName); - if (space instanceof FolkTransformedSpace) { - Gizmos.point(rect, { color: 'red', size: 2 }); - const transformed = space.transformRect(rect); - Gizmos.point(transformed, { color: 'blue', layer: 'transformed' }); - return transformed; - } - return rect; + return pointOnTransformedSpace; } } diff --git a/website/canvas/space-transform.html b/website/canvas/space-transform.html index 3661ef1..9635e52 100644 --- a/website/canvas/space-transform.html +++ b/website/canvas/space-transform.html @@ -9,10 +9,6 @@ margin: 0; height: 100%; } - folk-transformed-space { - width: 100%; - height: 100%; - } folk-shape { background: rgb(134, 37, 37); border: 1px solid rgba(0, 0, 0, 0.5); @@ -37,40 +33,31 @@ const space = document.querySelector('folk-transformed-space'); - // Track pointer state let isPointerDown = false; - let lastPoint = null; document.addEventListener('pointerdown', (event) => { isPointerDown = true; - lastPoint = { x: event.clientX, y: event.clientY }; }); document.addEventListener('pointermove', (event) => { - if (!isPointerDown || !lastPoint) return; + if (!isPointerDown) return; - const rect = { - x: lastPoint.x, - y: lastPoint.y, - width: 1, - height: 1, + const point = { + x: event.clientX, + y: event.clientY, }; - const transformedRect = FolkTransformedSpace.transformRect(rect, space); - - lastPoint = { x: event.clientX, y: event.clientY }; + const transformedPoint = FolkTransformedSpace.projectPoint(point, space); }); document.addEventListener('pointerup', () => { isPointerDown = false; - lastPoint = null; }); - // Keep existing click handler for rotation document.addEventListener('click', (event) => { if (event.target !== space) return; - const min = 20; - const max = 70; + const min = -50; + const max = 50; const randomRotation = Math.random() * (max - min) + min; space.rotate(randomRotation); });