zooniverse / front-end-monorepo / 13440953185 / 1

77%

master: 77%

push

github

refactor(drawing-tools): replace scale prop with useScale hook (#6697)

* refactor(drawing-tools): replace scale prop with useScale hook

Replace the `scale` prop with a `useScale` hook in the drawing tools. It's useful to imitate `vector-effect: non-scaling-size` by inverting any scaling applied to a parent SVG element. The drawing tools remain the same size on the screen, no matter whether the subject image is zoomed in or zoomed out.

The scale it returns is the scale factor of the current subject, calculated from the size of the drawing canvas (client width / intrinsic width.)

```jsx
const scale = useScale();

return (
  <g ref={root} transform={`scale(1 / ${scale})`}>
    <circle cx={0} cy={0} r={10} />
  </g>
);
```

* add useScale to subject viewers

* Docs and example

* type annotations for useScale and SVGContext

* use stored svgContext.rotate in scale calculation

* Remove scale from drawing API readme

* Add DragHandle props for polygon onPointerDown

* clean up DragHandle props

---------

Co-authored-by: Mark Bouslog <mark@zooniverse.org>

10839 of 16550 branches covered (65.49%)

Branch coverage included in aggregate %.

16952 of 20252 relevant lines covered (83.71%)

398.47 hits per line