Canvas zooming (#716)

* Zoom icons.

* Actions.

* Min zoom of 0 does not make sense.

* Zoom logic.

* Modify how zoom affects selection rendering.

* More precise scrollbar dimensions.

* Adjust elements visibility and scrollbars.

* Normalized canvas width and height.

* Apply zoom to resize test.

* [WIP] Zoom using canvas center as an origin.

* Undo zoom on `getScrollBars`.

* WIP: center zoom origin via scroll

* This was wrong for sure.

* Finish scaling using center as origin.

* Almost there.

* Scroll offset should be not part of zoom transforms.

* Better naming.

* Wheel movement should be the same no matter the zoom level.

* Panning movement should be the same no matter the zoom level.

* Fix elements pasting.

* Fix text WYSIWGT.

* Fix scrollbars and visibility.

src/scene/zoom.ts

@@ -0,0 +1,30 @@
+export function getZoomOrigin(canvas: HTMLCanvasElement | null) {
+  if (canvas === null) {
+    return { x: 0, y: 0 };
+  }
+  const context = canvas.getContext("2d");
+  if (context === null) {
+    return { x: 0, y: 0 };
+  }
+
+  const normalizedCanvasWidth = canvas.width / context.getTransform().a;
+  const normalizedCanvasHeight = canvas.height / context.getTransform().d;
+
+  return {
+    x: normalizedCanvasWidth / 2,
+    y: normalizedCanvasHeight / 2,
+  };
+}
+
+export function getZoomTranslation(canvas: HTMLCanvasElement, zoom: number) {
+  const diffMiddleOfTheCanvas = {
+    x: (canvas.width / 2) * (zoom - 1),
+    y: (canvas.height / 2) * (zoom - 1),
+  };
+
+  // Due to JavaScript float precision, we fix to fix decimals count to have symmetric zoom
+  return {
+    x: parseFloat(diffMiddleOfTheCanvas.x.toFixed(8)),
+    y: parseFloat(diffMiddleOfTheCanvas.y.toFixed(8)),
+  };
+}