enhance clone handles

tldraw/packages/react/src/components/ui/SelectionForeground/SelectionForeground.tsx

@@ -21,6 +21,7 @@ export const SelectionForeground = observer(function SelectionForeground<S exten
   const size = 8 / zoom
   const targetSize = 6 / zoom
   const clonePadding = 30 / zoom
+  const cloneHandleSize = size * 2
 
   const canResize = shapes.length === 1 ? shapes[0].canResize : [true, true]
 
@@ -112,31 +113,24 @@ export const SelectionForeground = observer(function SelectionForeground<S exten
           <CloneHandle
             cx={- clonePadding}
             cy={height / 2}
-            size={size}
+            size={cloneHandleSize}
             direction={TLCloneDirection.Left}
             isHidden={!showCloneHandles}
           />
           <CloneHandle
             cx={width + clonePadding}
             cy={height / 2}
-            size={size}
+            size={cloneHandleSize}
             direction={TLCloneDirection.Right}
             isHidden={!showCloneHandles}
           />
           <CloneHandle
             cx={width / 2}
             cy={height + clonePadding}
-            size={size}
+            size={cloneHandleSize}
             direction={TLCloneDirection.Bottom}
             isHidden={!showCloneHandles}
           />
-          <CloneHandle
-            cx={width / 2}
-            cy={- clonePadding}
-            size={size}
-            direction={TLCloneDirection.Top}
-            isHidden={!showCloneHandles}
-          />
           {canResize?.every(r => r) && (
             <>
               <CornerHandle

tldraw/packages/react/src/components/ui/SelectionForeground/handles/CloneHandle.tsx

@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react-lite'
-import type { TLCloneDirection } from '@tldraw/core'
+import type { TLCloneDirection, } from '@tldraw/core'
 import { useApp } from '../../../../hooks'
-
 interface CloneHandleProps {
     cx: number
     cy: number
@@ -20,15 +19,27 @@ export const CloneHandle = observer(function CloneHandle({
     const app = useApp()
 
     return (
-        <circle
-            pointerEvents="all"
-            onPointerDown={() => app.api.clone(direction)}
-            opacity={isHidden ? 0 : 1}
-            className="tl-clone-handle"
-            aria-label={`${direction} handle`}
-            cx={cx}
-            cy={cy}
-            r={size}
-        />
+        <g className="tl-clone-handle" opacity={isHidden ? 0 : 1}>
+            <circle
+                aria-label={`${direction} handle`}
+                pointerEvents="all"
+                onPointerDown={(e) => app.api.cloneTo(direction)}
+                cx={cx}
+                cy={cy}
+                r={size}
+            />
+            <line 
+                x1={cx - size / 2}
+                y1={cy}
+                x2={cx + size / 2}
+                y2={cy} 
+            />
+            <line 
+                x1={cx}
+                y1={cy - size / 2}
+                x2={cx}
+                y2={cy + size / 2} 
+            />
+        </g>
     )
 })

tldraw/packages/react/src/hooks/useStylesheet.ts

@@ -232,6 +232,15 @@ const tlcss = css`
     stroke-width: calc(1.5px * var(--tl-scale));
   }
 
+  .tl-clone-handle:hover {
+    fill: var(--tl-selectStroke);
+    cursor: pointer; 
+  }
+
+  .tl-clone-handle:hover line {
+    stroke: var(--tl-background);
+  }
+
   .tl-user {
     left: -4px;
     top: -4px;