[tbolis]

Summary

Adds pinch zoom for 1.1.0 (issue #84).

The branch is rebased on release/1.1.0, which has #197 (polygon), the arrow fixes (#200, #201) and the line style (#202). The commits here are feat: pinch zoom, its docs, and the showcase.

• Two fingers on the canvas zoom and pan its view. The point between the fingers stays under them while the distance between them sets the zoom, and moving them together pans.
• New: the pinchZoom property (default true), minZoom (0.5) and maxZoom (8), the onViewChange({ zoom, x, y }) callback, and the resetView() method. The canvas cannot be taken out of sight: a quarter of its smaller side stays in the window.
• The view is the viewport transform of the canvas, the objects stay where they are. So it is not in toJSON(), it is not an undo step, and onChange is not called for it. It is not zoom(factor), which scales the objects.
• The second finger makes the first one a gesture of the view, so what the first finger started is dropped: the objects it added are taken off the canvas and out of the undo history, a free stroke stops, the eraser erases nothing, the laser line is released, and a polygon in progress keeps its vertices and places none. This needs a cancel() hook on the tools, a cancel() on the eraser and laser brushes, and discard() on the history.
• fabric 7.4 cannot do this: its gestures need a library it no longer has, and it ignores the second finger, so the touch events of the canvas are read in the new pinch.ts.
• README: properties, callback, method and a Pinch zoom section. CHANGELOG: 1.1.0 entry.
• Showcase: a View section (the pinchZoom switch, the smallest and the largest zoom, and the view as onViewChange reports it, also in the chip of the section) and a reset view button next to the zoom buttons of the canvas.

Changes of behavior

• toDataURL() draws the whole drawing, whatever the zoom and pan of the view. Before, the pan tool shifted what the image showed. It is in the CHANGELOG under Changed.
• The eraser brush follows the first finger only, as the other brushes do. Before, a second finger started a second listener.
• With the polygon tool, a second finger is a gesture of the view and places no vertex. The test of the polygon for it is updated.

Checks

yarn format:check, yarn lint, yarn typecheck and yarn build pass. yarn test: 361 passing and 1 todo, on React 19 and on React 18 (27 tests for the gesture: the view, the limits, nothing saved or undone, each tool, the polygon in progress, the export, unmount). Changing the code on purpose made the tests fail in each case I tried (dropping the strokes, aborting the free stroke, the order of the handlers, onChange, the export, the polygon press).

In headless Chrome, with a real two-finger gesture sent through the DevTools protocol, in the middle of a polygon: the view went to the expected zoom and pan, the vertices placed were unchanged, nothing was added to the sketch, the next tap was placed in the zoomed view, and toDataURL() left the view as it was.

The showcase, built and served, in headless Chrome with a two-finger gesture sent through the DevTools protocol: the view went from 1.00 to 4.00 and the readout and the chip showed it, the reset view button took it back to 1.00, and with the switch off the same gesture changed nothing.

Not checked: a physical touch device.

Notes for review

• A drag of the select tool which started before the second finger is not undone, only what the tools add is dropped.
• The mouse wheel and a trackpad do not zoom.
• It's very cool!! but it doesn't support multitouch on mobile device #84 needs to be in the Fixes line of the release PR (Release v1.1.0 #196), as closing keywords do not act on a merge into release/1.1.0.