Add shape fills for ellipse, rectangle (#145)

packages/dev/src/core/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Renderer } from '@tldraw/core'
-import { Rectangle } from './rectangle'
+import { Rectangle } from './box'
 import { Label } from './label'
 import { appState } from './state'
 

packages/tldraw/src/shape/shapes/ellipse/ellipse.tsx

@@ -61,11 +61,8 @@ export const Ellipse = new ShapeUtil<EllipseShape, SVGSVGElement, TLDrawMeta>(()
               ry={ry + 2}
             />
           )}
-          <ellipse
-            cx={radiusX}
-            cy={radiusY}
-            rx={rx}
-            ry={ry}
+          <path
+            d={getEllipseIndicatorPathData(shape, this.getCenter(shape))}
             stroke="none"
             fill={style.isFilled ? styles.fill : 'none'}
             pointerEvents="all"
@@ -124,17 +121,7 @@ export const Ellipse = new ShapeUtil<EllipseShape, SVGSVGElement, TLDrawMeta>(()
   },
 
   Indicator({ shape }) {
-    const {
-      style,
-      radius: [rx, ry],
-    } = shape
-
-    const styles = getShapeStyle(style, false)
-    const strokeWidth = +styles.strokeWidth
-
-    const sw = strokeWidth
-
-    return <ellipse cx={rx} cy={ry} rx={rx - sw / 2} ry={ry - sw / 2} />
+    return <path d={getEllipseIndicatorPathData(shape, this.getCenter(shape))} />
   },
 
   shouldRender(prev, next) {
@@ -381,3 +368,10 @@ function getEllipsePath(shape: EllipseShape, boundsCenter: number[]) {
     })
   )
 }
+
+function getEllipseIndicatorPathData(shape: EllipseShape, boundsCenter: number[]) {
+  return Utils.getSvgPathFromStroke(
+    getEllipseStrokePoints(shape, boundsCenter).map((pt) => pt.point.slice(0, 2)),
+    false
+  )
+}

packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx

@@ -51,11 +51,8 @@ export const Rectangle = new ShapeUtil<RectangleShape, SVGSVGElement, TLDrawMeta
               height={Math.max(0, size[1] - strokeWidth / 2) + 64}
             />
           )}
-          <rect
-            x={styles.strokeWidth / 2}
-            y={styles.strokeWidth / 2}
-            width={Math.max(0, size[0] - strokeWidth)}
-            height={Math.max(0, size[1] - strokeWidth)}
+          <path
+            d={getRectangleIndicatorPathData(shape)}
             fill={style.isFilled ? styles.fill : 'none'}
             radius={strokeWidth}
             stroke="none"