From f8da732d201312f2e30bbb87ba7f75c2a00ec621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Mon, 2 Dec 2024 20:32:06 -0800
Subject: [PATCH] fix move dragging

---
 src/folk-shape.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index 82a4cb3..5041782 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -80,7 +80,12 @@ styles.replaceSync(css`
     height: 100%;
     width: 100%;
     overflow: hidden;
+    pointer-events: none;
+  }
+
+  ::slotted(*) {
     cursor: default;
+    pointer-events: auto;
   }
 
   :host(:focus-within) {
@@ -188,6 +193,8 @@ export class FolkShape extends HTMLElement {
     customElements.define(this.tagName, this);
   }
 
+  #shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
+
   #internals = this.attachInternals();
 
   #type = (this.getAttribute('type') || 'rectangle') as Shape;
@@ -288,15 +295,11 @@ export class FolkShape extends HTMLElement {
 
     this.addEventListener('pointerdown', this);
 
-    const shadowRoot = this.attachShadow({
-      mode: 'open',
-      delegatesFocus: true,
-    });
-    shadowRoot.adoptedStyleSheets.push(styles);
+    this.#shadow.adoptedStyleSheets.push(styles);
     // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work.
     // Maybe can add the first resize handler here, and lazily instantiate the rest when needed?
     // I can see it becoming important at scale
-    shadowRoot.innerHTML = html` <button part="rotation"></button>
+    this.#shadow.innerHTML = html` <button part="rotation"></button>
       <button part="resize-nw"></button>
       <button part="resize-ne"></button>
       <button part="resize-se"></button>