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.
This commit is contained in:
Enzo Ferey 2020-02-15 21:03:32 +01:00 committed by GitHub
parent dd2d7e1a88
commit c7ff4c2ed6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 612 additions and 272 deletions

View file

@ -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,