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/element/textWysiwyg.tsx

@@ -8,6 +8,7 @@ type TextWysiwygParams = {
   strokeColor: string;
   font: string;
   opacity: number;
+  zoom: number;
   onSubmit: (text: string) => void;
   onCancel: () => void;
 };
@@ -25,6 +26,7 @@ export function textWysiwyg({
   strokeColor,
   font,
   opacity,
+  zoom,
   onSubmit,
   onCancel,
 }: TextWysiwygParams) {
@@ -43,7 +45,7 @@ export function textWysiwyg({
     opacity: opacity / 100,
     top: `${y}px`,
     left: `${x}px`,
-    transform: "translate(-50%, -50%)",
+    transform: `translate(-50%, -50%) scale(${zoom})`,
     textAlign: "left",
     display: "inline-block",
     font: font,