Further simplifies shape tree

state/shape-utils/dot.tsx

@@ -20,13 +20,9 @@ const dot = registerShapeUtils<DotShape>({
   },
 
   render(shape) {
-    const { id } = shape
-
     const styles = getShapeStyle(shape.style)
 
-    return (
+    return <use href="#dot" stroke={styles.stroke} fill={styles.stroke} />
-      <use id={id} href="#dot" stroke={styles.stroke} fill={styles.stroke} />
-    )
   },
 
   getBounds(shape) {

state/shape-utils/ellipse.tsx

@@ -42,8 +42,8 @@ const ellipse = registerShapeUtils<EllipseShape>({
     )
   },
 
-  render(shape, { isHovered }) {
+  render(shape) {
-    const { id, radiusX, radiusY, style } = shape
+    const { radiusX, radiusY, style } = shape
     const styles = getShapeStyle(style)
     const strokeWidth = +styles.strokeWidth
 
@@ -58,7 +58,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
       const path = pathCache.get(shape)
 
       return (
-        <g id={id} pointerEvents={style.isFilled ? 'all' : 'stroke'}>
+        <>
           {style.isFilled && (
             <ellipse
               cx={radiusX}
@@ -76,9 +76,8 @@ const ellipse = registerShapeUtils<EllipseShape>({
             stroke={styles.stroke}
             strokeWidth={strokeWidth}
             pointerEvents="all"
-            filter={isHovered ? 'url(#expand)' : 'none'}
           />
-        </g>
+        </>
       )
     }
 
@@ -108,7 +107,6 @@ const ellipse = registerShapeUtils<EllipseShape>({
         strokeDasharray={strokeDasharray}
         strokeDashoffset={strokeDashoffset}
         pointerEvents={style.isFilled ? 'all' : 'stroke'}
-        filter={isHovered ? 'url(#expand)' : 'none'}
       />
     )
   },

state/shape-utils/group.tsx

@@ -26,11 +26,10 @@ const group = registerShapeUtils<GroupShape>({
   },
 
   render(shape) {
-    const { id, size } = shape
+    const { size } = shape
 
     return (
       <StyledGroupShape
-        id={id}
         width={size[0]}
         height={size[1]}
         data-shy={true}

state/shape-utils/ray.tsx

@@ -25,19 +25,19 @@ const ray = registerShapeUtils<RayShape>({
   shouldRender(shape, prev) {
     return shape.direction !== prev.direction || shape.style !== prev.style
   },
-  render(shape, { isHovered }) {
+  render(shape) {
-    const { id, direction } = shape
+    const { direction } = shape
 
     const styles = getShapeStyle(shape.style)
 
     const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
 
     return (
-      <g id={id} filter={isHovered ? 'url(#expand)' : 'none'}>
+      <>
         <ThinLine x1={0} y1={0} x2={x2} y2={y2} stroke={styles.stroke} />
         <circle r={4} fill="transparent" />
         <use href="#dot" />
-      </g>
+      </>
     )
   },
 

state/shape-utils/text.tsx

@@ -70,7 +70,7 @@ const text = registerShapeUtils<TextShape>({
     )
   },
 
-  render(shape, { isEditing, isHovered, ref }) {
+  render(shape, { isEditing, ref }) {
     const { id, text, style } = shape
     const styles = getShapeStyle(style)
     const font = getFontStyle(shape.scale, shape.style)
@@ -131,11 +131,7 @@ const text = registerShapeUtils<TextShape>({
 
     if (!isEditing) {
       return (
-        <g
+        <>
-          id={id}
-          pointerEvents="all"
-          filter={isHovered ? 'url(#expand)' : 'none'}
-        >
           {text.split('\n').map((str, i) => (
             <text
               key={i}
@@ -157,7 +153,7 @@ const text = registerShapeUtils<TextShape>({
               {str}
             </text>
           ))}
-        </g>
+        </>
       )
     }
 
@@ -167,7 +163,6 @@ const text = registerShapeUtils<TextShape>({
 
     return (
       <foreignObject
-        id={id}
         width={bounds.width}
         height={bounds.height}
         pointerEvents="none"