Improves outlines

components/canvas/shapes/rectangle.tsx

@@ -1,5 +1,5 @@
-import { useSelector } from "state"
 import { RectangleShape, ShapeProps } from "types"
+import { HoverIndicator, Indicator } from "./indicator"
 import ShapeGroup from "./shape-g"
 
 function BaseRectangle({
@@ -9,26 +9,38 @@ function BaseRectangle({
   strokeWidth = 0,
 }: ShapeProps<RectangleShape>) {
   return (
-    <rect
-      x={strokeWidth}
-      y={strokeWidth}
-      width={size[0] - strokeWidth * 2}
-      height={size[1] - strokeWidth * 2}
-      fill={fill}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-    />
+    <>
+      <HoverIndicator
+        as="rect"
+        x={1}
+        y={1}
+        width={size[0] - 2}
+        height={size[1] - 2}
+      />
+      <rect
+        x={strokeWidth / 2}
+        y={strokeWidth / 2}
+        width={size[0] - strokeWidth}
+        height={size[1] - strokeWidth}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+      <Indicator
+        as="rect"
+        x={1}
+        y={1}
+        width={size[0] - 2}
+        height={size[1] - 2}
+      />
+    </>
   )
 }
 
 export default function Rectangle({ id, point, size }: RectangleShape) {
-  const isSelected = useSelector((state) => state.values.selectedIds.has(id))
   return (
     <ShapeGroup id={id} point={point}>
       <BaseRectangle size={size} />
-      {isSelected && (
-        <BaseRectangle size={size} fill="none" stroke="blue" strokeWidth={1} />
-      )}
     </ShapeGroup>
   )
 }