Upgrade to node 22#594
Conversation
| fabricCanvas.current.clipPath = new Rect({ | ||
| left: img.left, | ||
| top: img.top, | ||
| width: img.getScaledWidth(), | ||
| height: img.getScaledHeight(), | ||
| }); | ||
|
|
There was a problem hiding this comment.
We no longer need a Fabric clipPath because export now crops to the background image bounds using getBoundingRect().
| const eraserBrush = useRef<EraserBrush>(); | ||
| const gestures = useRef({ | ||
| pinchStartAmount: 0, | ||
| pan: new Point(0, 0), |
There was a problem hiding this comment.
Keep our pan position separated so we can use Fabric's public absolutePan API instead of mutating viewportTransform directly
| const syncCanvasDimensions = () => { | ||
| if (!wrapperRef.current || !fabricCanvas.current) return; | ||
|
|
||
| fabricCanvas.current.setDimensions({ | ||
| width: wrapperRef.current.clientWidth, | ||
| height: wrapperRef.current.clientHeight, | ||
| }); | ||
| }; | ||
|
|
There was a problem hiding this comment.
to keep the Fabric canvas dimensions in sync with the wrapper element before fitting or exporting the image.
| // recursively compress image until it fits limit | ||
| const toDataURLWithLimit = (limit = maxSizeInKb, quality = 1): string => { | ||
| if (fabricBackground.current) { | ||
| const backgroundBounds = fabricBackground.current.getBoundingRect(); |
There was a problem hiding this comment.
using getBoundingRect bcos Fabric 7 position/scale calculations are more reliable through object bounds than raw top, left, or scaled width values.
| const oldZoom = fabricCanvas.current.getZoom(); | ||
| const [ox, oy] = origin; | ||
| fabricCanvas.current.zoomToPoint(new Point(ox, oy), zoom); | ||
| const nextPan = new Point( | ||
| ((gestures.current.pan.x + ox) / oldZoom) * zoom - ox, | ||
| ((gestures.current.pan.y + oy) / oldZoom) * zoom - oy | ||
| ); | ||
|
|
||
| fabricCanvas.current.setZoom(zoom); | ||
| applyPan(nextPan, zoom); |
There was a problem hiding this comment.
preserve the pinch focal point by converting the existing pan from the old zoom level to the new zoom level. and use setZoom with our own clamped pan calculation instead of zoomToPoint, because zoomToPoint updates the viewport transform directly.
|
the canvas changes avoid direct |
| const canvasRef = useRef<HTMLCanvasElement>(null); | ||
| const fabricCanvas = useRef<FabricCanvas>(); | ||
| const fabricBackground = useRef<FabricImage>(); | ||
| const fittedImageBounds = useRef<{ left: number; top: number; width: number; height: number }>(); |
There was a problem hiding this comment.
qn: where is fittedImageBounds assigned a value?
There was a problem hiding this comment.
my apologies it seems to be missing. it should have been assigned a value in fitImageToCanvas
3 participants
Changes
Upgrading of node version
Changelog entry
Additional information