smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Canvas zooming (#716)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

56
src/actions/actionCanvas.tsx
View file

@ -2,7 +2,7 @@ import React from "react";
import { Action } from "./types";
import { ColorPicker } from "../components/ColorPicker";
import { getDefaultAppState } from "../appState";
import { trash } from "../components/icons";
import { trash, zoomIn, zoomOut } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
@ -53,3 +53,57 @@ export const actionClearCanvas: Action = {
/>
),
};
const ZOOM_STEP = 0.1;
function getNormalizedZoom(zoom: number): number {
const normalizedZoom = parseFloat(zoom.toFixed(2));
const clampedZoom = Math.max(0.1, Math.min(normalizedZoom, 2));
return clampedZoom;
}
export const actionZoomIn: Action = {
name: "zoomIn",
perform: (elements, appState) => {
return {
appState: {
...appState,
zoom: getNormalizedZoom(appState.zoom + ZOOM_STEP),
},
};
},
PanelComponent: ({ updateData }) => (
<ToolButton
type="button"
icon={zoomIn}
title={t("buttons.zoomIn")}
aria-label={t("buttons.zoomIn")}
onClick={() => {
updateData(null);
}}
/>
),
};
export const actionZoomOut: Action = {
name: "zoomOut",
perform: (elements, appState) => {
return {
appState: {
...appState,
zoom: getNormalizedZoom(appState.zoom - ZOOM_STEP),
},
};
},
PanelComponent: ({ updateData }) => (
<ToolButton
type="button"
icon={zoomOut}
title={t("buttons.zoomOut")}
aria-label={t("buttons.zoomOut")}
onClick={() => {
updateData(null);
}}
/>
),
};