Plops editor: focus mode, place/move/resize, semantic zoom (#15)

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/editor/SelectionOverlay.tsx

@@ -1,14 +1,13 @@
 import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react'
 import { localToWorld, screenToWorld, worldToLocal, type Point } from '@/lib/geometry'
 import { useUpdateObject } from '@/lib/objects'
+import { HANDLE_PX, SELECT_COLOR, objectTransform } from './shared'
 import { useEditorStore } from './store'
 import type { EditorObject } from './types'
 
-const HANDLE_PX = 12 // on-screen size of the resize handles
 const ROTATE_OFFSET_PX = 28 // distance of the rotate knob above the object
 const MIN_OBJ_CM = 1 // smallest allowed dimension
 const ROTATE_SNAP_DEG = 15
-const SELECT_COLOR = '#2f7a3e'
 
 const corners: [number, number][] = [
   [-1, -1],
@@ -162,7 +161,7 @@ export function SelectionOverlay({
   }
 
   return (
-    <g transform={`translate(${object.xCm} ${object.yCm}) rotate(${object.rotationDeg})`}>
+    <g transform={objectTransform(object)}>
       {/* Transparent body: drag to move. */}
       {object.shape === 'circle' ? (
         <ellipse cx={0} cy={0} rx={halfW} ry={halfH} fill="transparent" pointerEvents="all" style={{ cursor: 'move' }} onPointerDown={startMove} />