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`
+
+
+
+ `);
+
+ // 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 @@
+
+
+
+
+ Simple Space Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+