From ae55b1b851eae2ff5f9386e12e5d4ab8c0d9f06e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sat, 7 Dec 2024 12:21:16 -0800
Subject: [PATCH] hoist handle maps

---
 src/folk-shape.ts | 57 ++++++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index ca75acf..d4db10d 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -6,12 +6,6 @@ import { Vector } from './common/Vector';
 import { getResizeCursorUrl, getRotateCursorUrl } from './common/cursors';
 import { TransformEvent } from './common/TransformEvent';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'folk-shape': FolkShape;
-  }
-}
-
 const resizeObserver = new ResizeObserverManager();
 
 type ResizeHandle = 'resize-top-left' | 'resize-top-right' | 'resize-bottom-right' | 'resize-bottom-left';
@@ -19,6 +13,29 @@ type RotateHandle = 'rotation-top-left' | 'rotation-top-right' | 'rotation-botto
 type Handle = ResizeHandle | RotateHandle | 'move';
 export type Dimension = number | 'auto';
 
+type HandleMap = Record<ResizeHandle, ResizeHandle>;
+
+const oppositeHandleMap: HandleMap = {
+  'resize-bottom-right': 'resize-top-left',
+  'resize-bottom-left': 'resize-top-right',
+  'resize-top-left': 'resize-bottom-right',
+  'resize-top-right': 'resize-bottom-left',
+};
+
+const flipXHandleMap: HandleMap = {
+  'resize-bottom-right': 'resize-bottom-left',
+  'resize-bottom-left': 'resize-bottom-right',
+  'resize-top-left': 'resize-top-right',
+  'resize-top-right': 'resize-top-left',
+};
+
+const flipYHandleMap: HandleMap = {
+  'resize-bottom-right': 'resize-top-right',
+  'resize-bottom-left': 'resize-top-left',
+  'resize-top-left': 'resize-bottom-left',
+  'resize-top-right': 'resize-bottom-right',
+};
+
 const styles = css`
   :host {
     display: block;
@@ -159,7 +176,12 @@ const styles = css`
   }
 `;
 
-// TODO: add z coordinate?
+declare global {
+  interface HTMLElementTagNameMap {
+    'folk-shape': FolkShape;
+  }
+}
+
 export class FolkShape extends HTMLElement {
   static tagName = 'folk-shape';
 
@@ -617,31 +639,10 @@ export class FolkShape extends HTMLElement {
     const flipHeight = this.#rect.height < 0;
 
     if (flipWidth && flipHeight) {
-      // Both axes flipped
-      const oppositeHandleMap: Record<ResizeHandle, ResizeHandle> = {
-        'resize-bottom-right': 'resize-top-left',
-        'resize-bottom-left': 'resize-top-right',
-        'resize-top-left': 'resize-bottom-right',
-        'resize-top-right': 'resize-bottom-left',
-      };
       nextHandle = oppositeHandleMap[handle];
     } else if (flipWidth) {
-      // Only X axis flipped
-      const flipXHandleMap: Record<ResizeHandle, ResizeHandle> = {
-        'resize-bottom-right': 'resize-bottom-left',
-        'resize-bottom-left': 'resize-bottom-right',
-        'resize-top-left': 'resize-top-right',
-        'resize-top-right': 'resize-top-left',
-      };
       nextHandle = flipXHandleMap[handle];
     } else if (flipHeight) {
-      // Only Y axis flipped
-      const flipYHandleMap: Record<ResizeHandle, ResizeHandle> = {
-        'resize-bottom-right': 'resize-top-right',
-        'resize-bottom-left': 'resize-top-left',
-        'resize-top-left': 'resize-bottom-left',
-        'resize-top-right': 'resize-bottom-right',
-      };
       nextHandle = flipYHandleMap[handle];
     }