rename onScaleChange to onRequestScaleChange, wire up in demo

Rename makes it clear the callback is a request, not mandatory.
Wire it up in the demo so +/- keyboard zoom works out of the box.
Update README props table and GitHub issue comment.

Author: mosch

README.md

@@ -207,6 +207,8 @@ function MyEditor() {
 | `onMouseUp`             | `() => void`         |                  | Called when the user releases the mouse after dragging.                                       |
 | `onMouseMove`           | `(event) => void`    |                  | Called on every mouse/touch move while dragging.                                              |
 | `onPositionChange`      | `(position) => void` |                  | Called when the crop position changes. Receives `{ x, y }`.                                   |
+| `onRequestScaleChange`  | `(scale) => void`    |                  | Called when the user presses +/- keys to zoom. Receives the requested new scale value.        |
+| `keyboardStep`          | `number`             | `1`              | Pixels to move per arrow key press. Shift multiplies by 10.                                   |
 
 ## Contributing
 

packages/demo/src/App.tsx

@@ -140,6 +140,7 @@ const App = () => {
               disableCanvasRotation={state.disableCanvasRotation}
               borderColor={hexToRgba(state.borderColor)}
               onPositionChange={(position: Position) => update({ position })}
+              onRequestScaleChange={(scale: number) => update({ scale })}
             />
             <input {...getInputProps()} />
             <span className="dropzone-hint">drop image here</span>

packages/lib/src/__tests__/AvatarEditor.test.tsx

@@ -518,14 +518,14 @@ describe('AvatarEditor', () => {
       expect(canvas.getAttribute('role')).toBe('application')
     })
 
-    it('onScaleChange prop is accepted', () => {
-      const onScaleChange = vi.fn()
+    it('onRequestScaleChange prop is accepted', () => {
+      const onRequestScaleChange = vi.fn()
       const { container } = render(
         <AvatarEditor
           width={200}
           height={200}
           scale={1.5}
-          onScaleChange={onScaleChange}
+          onRequestScaleChange={onRequestScaleChange}
         />,
       )
       expect(container.querySelector('canvas')).toBeInTheDocument()

packages/lib/src/index.ts

@@ -32,7 +32,7 @@ export interface Props extends AvatarEditorConfig {
   onMouseUp?: () => void
   onMouseMove?: (e: TouchEvent | MouseEvent) => void
   onPositionChange?: (position: Position) => void
-  onScaleChange?: (scale: number) => void
+  onRequestScaleChange?: (scale: number) => void
 }
 
 export type { Position, ImageState }
@@ -69,7 +69,7 @@ const AvatarEditor = forwardRef<AvatarEditorRef, Props>((props, ref) => {
     onMouseUp,
     onMouseMove,
     onPositionChange,
-    onScaleChange,
+    onRequestScaleChange,
     borderColor,
     style,
     keyboardStep = 1,
@@ -114,8 +114,8 @@ const AvatarEditor = forwardRef<AvatarEditorRef, Props>((props, ref) => {
   onMouseUpRef.current = onMouseUp
   const onMouseMoveRef = useRef(onMouseMove)
   onMouseMoveRef.current = onMouseMove
-  const onScaleChangeRef = useRef(onScaleChange)
-  onScaleChangeRef.current = onScaleChange
+  const onRequestScaleChangeRef = useRef(onRequestScaleChange)
+  onRequestScaleChangeRef.current = onRequestScaleChange
   const onPositionChangeRef = useRef(onPositionChange)
   onPositionChangeRef.current = onPositionChange
 
@@ -284,13 +284,13 @@ const AvatarEditor = forwardRef<AvatarEditorRef, Props>((props, ref) => {
         case '=': {
           e.preventDefault()
           const zoomStep = e.shiftKey ? 0.5 : 0.1
-          onScaleChangeRef.current?.(scale + zoomStep)
+          onRequestScaleChangeRef.current?.(scale + zoomStep)
           break
         }
         case '-': {
           e.preventDefault()
           const zoomStep = e.shiftKey ? 0.5 : 0.1
-          onScaleChangeRef.current?.(Math.max(0.1, scale - zoomStep))
+          onRequestScaleChangeRef.current?.(Math.max(0.1, scale - zoomStep))
           break
         }
         case 'Escape':