From 45c0febdad944f33724ba54ae1e70649f1266bd7 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 9 Dec 2021 22:55:52 +0000
Subject: [PATCH] fix selection for filled shapes

---
 .../state/shapes/EllipseUtil/EllipseUtil.tsx  | 10 +++++-----
 .../shapes/RectangleUtil/RectangleUtil.tsx    | 19 ++++++++++---------
 .../shapes/TriangleUtil/TriangleUtil.tsx      |  5 +----
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/tldraw/src/state/shapes/EllipseUtil/EllipseUtil.tsx b/packages/tldraw/src/state/shapes/EllipseUtil/EllipseUtil.tsx
index f2c131433..32eec9c67 100644
--- a/packages/tldraw/src/state/shapes/EllipseUtil/EllipseUtil.tsx
+++ b/packages/tldraw/src/state/shapes/EllipseUtil/EllipseUtil.tsx
@@ -112,13 +112,13 @@ export class EllipseUtil extends TDShapeUtil<T, E> {
               className="tl-binding-indicator"
               cx={radiusX}
               cy={radiusY}
-              rx={rx}
-              ry={ry}
+              rx={radiusX}
+              ry={radiusY}
               strokeWidth={this.bindingDistance}
             />
           )}
           <ellipse
-            className={isSelected ? 'tl-fill-hitarea' : 'tl-stroke-hitarea'}
+            className={style.isFilled || isSelected ? 'tl-fill-hitarea' : 'tl-stroke-hitarea'}
             cx={radiusX}
             cy={radiusY}
             rx={radiusX}
@@ -127,8 +127,8 @@ export class EllipseUtil extends TDShapeUtil<T, E> {
           <ellipse
             cx={radiusX}
             cy={radiusY}
-            rx={radiusX}
-            ry={radiusY}
+            rx={rx}
+            ry={ry}
             fill={styles.fill}
             stroke={styles.stroke}
             strokeWidth={sw}
diff --git a/packages/tldraw/src/state/shapes/RectangleUtil/RectangleUtil.tsx b/packages/tldraw/src/state/shapes/RectangleUtil/RectangleUtil.tsx
index 240cc1f68..805727b3c 100644
--- a/packages/tldraw/src/state/shapes/RectangleUtil/RectangleUtil.tsx
+++ b/packages/tldraw/src/state/shapes/RectangleUtil/RectangleUtil.tsx
@@ -123,18 +123,19 @@ export class RectangleUtil extends TDShapeUtil<T, E> {
             {isBinding && (
               <rect
                 className="tl-binding-indicator"
-                x={sw / 2 - 32}
-                y={sw / 2 - 32}
-                width={w + 64}
-                height={h + 64}
+                x={0}
+                y={0}
+                width={size[0]}
+                height={size[1]}
+                strokeWidth={this.bindingDistance}
               />
             )}
             <rect
-              className="tl-binding-indicator"
-              x={sw / 2 - 32}
-              y={sw / 2 - 32}
-              width={w + 64}
-              height={h + 64}
+              className={isSelected || style.isFilled ? 'tl-fill-hitarea' : 'tl-stroke-hitarea'}
+              x={sw / 2}
+              y={sw / 2}
+              width={w}
+              height={h}
               strokeWidth={this.bindingDistance}
             />
             {style.isFilled && (
diff --git a/packages/tldraw/src/state/shapes/TriangleUtil/TriangleUtil.tsx b/packages/tldraw/src/state/shapes/TriangleUtil/TriangleUtil.tsx
index b63f51d71..f8e1b265b 100644
--- a/packages/tldraw/src/state/shapes/TriangleUtil/TriangleUtil.tsx
+++ b/packages/tldraw/src/state/shapes/TriangleUtil/TriangleUtil.tsx
@@ -125,11 +125,8 @@ export class TriangleUtil extends TDShapeUtil<T, E> {
             />
           )}
           <polygon
+            className={style.isFilled || isSelected ? 'tl-fill-hitarea' : 'tl-stroke-hitarea'}
             points={points.join()}
-            fill={styles.fill}
-            strokeWidth={sw}
-            stroke="none"
-            pointerEvents="all"
           />
           <g pointerEvents="stroke">{paths}</g>
         </SVGContainer>