From 9bbc37c72905ecb85ae486fc0e149f72638de868 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Thu, 19 Dec 2024 18:40:38 -0500
Subject: [PATCH] first thing that kinda works

---
 labs/folk-shape.ts               |  2 +
 labs/simple-space.ts             | 70 ++++++++++++++++++++++++++++++++
 labs/standalone/simple-space.ts  |  5 +++
 website/canvas/simple-space.html | 43 ++++++++++++++++++++
 4 files changed, 120 insertions(+)
 create mode 100644 labs/simple-space.ts
 create mode 100644 labs/standalone/simple-space.ts
 create mode 100644 website/canvas/simple-space.html

diff --git a/labs/folk-shape.ts b/labs/folk-shape.ts
index cd7f2ed..7e15caa 100644
--- a/labs/folk-shape.ts
+++ b/labs/folk-shape.ts
@@ -477,6 +477,7 @@ export class FolkShape extends HTMLElement {
 
   #dispatchTransformEvent() {
     const emmittedRect = new DOMRectTransform(this.#rect);
+    console.log('emit X', this.#rect.x);
     const event = new TransformEvent(emmittedRect, this.#previousRect);
     this.dispatchEvent(event);
 
@@ -496,6 +497,7 @@ export class FolkShape extends HTMLElement {
       emmittedRect.rotation = this.#previousRect.rotation;
     }
 
+    console.log('applied X', emmittedRect.x);
     this.style.transform = emmittedRect.toCssString();
     this.style.width = this.#attrWidth === 'auto' ? '' : `${emmittedRect.width}px`;
     this.style.height = this.#attrHeight === 'auto' ? '' : `${emmittedRect.height}px`;
diff --git a/labs/simple-space.ts b/labs/simple-space.ts
new file mode 100644
index 0000000..1a35650
--- /dev/null
+++ b/labs/simple-space.ts
@@ -0,0 +1,70 @@
+import { FolkElement } from '@lib';
+import { html } from '@lib/tags';
+import { TransformEvent } from '@lib/TransformEvent';
+import { css } from '@lit/reactive-element';
+
+export class SimpleSpace extends FolkElement {
+  static override tagName = 'simple-space';
+
+  static styles = css`
+    :host {
+      display: block;
+      // perspective: 1000px;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .space {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      transform-origin: center;
+      backface-visibility: hidden;
+    }
+  `;
+
+  #matrix = new DOMMatrix();
+
+  override createRenderRoot() {
+    const root = super.createRenderRoot() as ShadowRoot;
+
+    root.setHTMLUnsafe(html`
+      <div class="space" style="transform: ${this.#matrix}">
+        <slot></slot>
+      </div>
+    `);
+
+    // Listen for transform events from shapes
+    this.addEventListener('transform', this.#handleTransform);
+
+    return root;
+  }
+
+  rotate(angle: number = 45) {
+    this.#matrix = new DOMMatrix().rotateAxisAngle(1, 0, 0, angle);
+
+    const space = this.shadowRoot?.querySelector('.space');
+    if (space instanceof HTMLElement) {
+      space.style.transform = this.#matrix.toString();
+    }
+  }
+
+  #handleTransform = (event: TransformEvent) => {
+    // Extract rotation angles from the transformation matrix
+    const rotationX = Math.atan2(this.#matrix.m32, this.#matrix.m33);
+    const rotationY = Math.atan2(
+      -this.#matrix.m31,
+      Math.sqrt(this.#matrix.m32 * this.#matrix.m32 + this.#matrix.m33 * this.#matrix.m33),
+    );
+
+    // Calculate projection factors for both axes
+    const projectionFactorY = 1 / Math.cos(rotationX);
+    const projectionFactorX = 1 / Math.cos(rotationY);
+
+    // Apply the transformed movement with both projection factors
+    event.current.x *= projectionFactorX;
+    event.current.y *= projectionFactorY;
+  };
+}
diff --git a/labs/standalone/simple-space.ts b/labs/standalone/simple-space.ts
new file mode 100644
index 0000000..254f71a
--- /dev/null
+++ b/labs/standalone/simple-space.ts
@@ -0,0 +1,5 @@
+import { SimpleSpace } from '../simple-space';
+
+SimpleSpace.define();
+
+export { SimpleSpace };
diff --git a/website/canvas/simple-space.html b/website/canvas/simple-space.html
new file mode 100644
index 0000000..734f901
--- /dev/null
+++ b/website/canvas/simple-space.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Simple Space Demo</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+      }
+      simple-space {
+        width: 100%;
+        height: 100%;
+      }
+      folk-shape {
+        background: rgb(134, 37, 37);
+        border: 1px solid rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <simple-space id="space">
+      <folk-shape x="250" y="100" width="50" height="50"></folk-shape>
+      <folk-shape x="200" y="200" width="75" height="75" rotation="90"></folk-shape>
+      <folk-shape x="50" y="250" width="25" height="25" rotation="180"></folk-shape>
+      <folk-shape x="350" y="50" width="100" height="100" rotation="270"></folk-shape>
+      <folk-shape x="500" y="500" width="150" height="150" rotation="360"></folk-shape>
+    </simple-space>
+
+    <script type="module">
+      import '@labs/standalone/simple-space.ts';
+      import '@labs/standalone/folk-shape.ts';
+
+      const space = document.getElementById('space');
+      document.addEventListener('click', () => {
+        // Random rotation between 30 and 75 degrees
+        const randomRotation = Math.random() * 45 + 30;
+        space.rotate(randomRotation);
+      });
+    </script>
+  </body>
+</html>