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

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

web/src/editor/ObjectShape.tsx

@@ -1,4 +1,5 @@
 import { memo, type PointerEvent } from 'react'
+import { objectTransform } from './shared'
 import type { EditorObject } from './types'
 
 const DEFAULT_FILL = '#8a8a8a'
@@ -60,11 +61,7 @@ export const ObjectShape = memo(function ObjectShape({
   const strokeWidth = selected ? 2 : 1
 
   return (
-    <g
-      transform={`translate(${object.xCm} ${object.yCm}) rotate(${object.rotationDeg})`}
-      onPointerDown={handleDown}
-      style={{ cursor: 'pointer' }}
-    >
+    <g transform={objectTransform(object)} onPointerDown={handleDown} style={{ cursor: 'pointer' }}>
       {object.shape === 'circle' ? (
         <ellipse
           cx={0}