scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-03-23 03:15:55 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix that zooming from .5 to .333 by scroll wheel is not smooth

Browse source
This commit is contained in:
DD Liu 2020-05-11 18:42:52 -04:00
parent 5230e97903
commit 0e20cd0234
2 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/containers/paint-editor.jsx
View file

@ -20,7 +20,7 @@ import {setLayout} from '../reducers/layout';
import {getSelectedLeafItems} from '../helper/selection'; import {getSelectedLeafItems} from '../helper/selection';
import {convertToBitmap, convertToVector} from '../helper/bitmap'; import {convertToBitmap, convertToVector} from '../helper/bitmap';
import {resetZoom, zoomOnSelection} from '../helper/view'; import {resetZoom, zoomOnSelection, OUTERMOST_ZOOM_LEVEL} from '../helper/view';
import EyeDropperTool from '../helper/tools/eye-dropper'; import EyeDropperTool from '../helper/tools/eye-dropper';
import Modes from '../lib/modes'; import Modes from '../lib/modes';
@ -211,7 +211,13 @@ class PaintEditor extends React.Component {
} }
} }
handleZoomIn () { handleZoomIn () {
zoomOnSelection(PaintEditor.ZOOM_INCREMENT); // Make the "next step" after the outermost zoom level be the default
// zoom level (0.5)
let zoomIncrement = PaintEditor.ZOOM_INCREMENT;
if (paper.view.zoom === OUTERMOST_ZOOM_LEVEL) {
zoomIncrement = 0.5 - OUTERMOST_ZOOM_LEVEL;
}
zoomOnSelection(zoomIncrement);
this.props.updateViewBounds(paper.view.matrix); this.props.updateViewBounds(paper.view.matrix);
this.handleSetSelectedItems(); this.handleSetSelectedItems();
} }

11
src/helper/view.js
View file

@ -18,6 +18,7 @@ const PADDING_PERCENT = 25; // Padding as a percent of the max of width/height o
const BUFFER = 50; // Number of pixels of allowance around objects at the edges of the workspace const BUFFER = 50; // Number of pixels of allowance around objects at the edges of the workspace
const MIN_RATIO = .125; // Zoom in to at least 1/8 of the screen. This way you don't end up incredibly const MIN_RATIO = .125; // Zoom in to at least 1/8 of the screen. This way you don't end up incredibly
// zoomed in for tiny costumes. // zoomed in for tiny costumes.
const OUTERMOST_ZOOM_LEVEL = 0.333;
const ART_BOARD_BOUNDS = new paper.Rectangle(0, 0, ART_BOARD_WIDTH, ART_BOARD_HEIGHT); const ART_BOARD_BOUNDS = new paper.Rectangle(0, 0, ART_BOARD_WIDTH, ART_BOARD_HEIGHT);
const MAX_WORKSPACE_BOUNDS = new paper.Rectangle( const MAX_WORKSPACE_BOUNDS = new paper.Rectangle(
-ART_BOARD_WIDTH / 4, -ART_BOARD_WIDTH / 4,
@ -108,14 +109,7 @@ const resizeCrosshair = () => {
const zoomOnFixedPoint = (deltaZoom, fixedPoint) => { const zoomOnFixedPoint = (deltaZoom, fixedPoint) => {
const view = paper.view; const view = paper.view;
const preZoomCenter = view.center; const preZoomCenter = view.center;
let newZoom; const newZoom = Math.max(OUTERMOST_ZOOM_LEVEL, view.zoom + deltaZoom);
if (view.zoom <= 0.5 && deltaZoom < 0) {
newZoom = 0.333;
} else if (view.zoom <= 0.333 && deltaZoom > 0) {
newZoom = 0.5;
} else {
newZoom = Math.max(0.5, view.zoom + deltaZoom);
}
const scaling = view.zoom / newZoom; const scaling = view.zoom / newZoom;
const preZoomOffset = fixedPoint.subtract(preZoomCenter); const preZoomOffset = fixedPoint.subtract(preZoomCenter);
const postZoomOffset = fixedPoint.subtract(preZoomOffset.multiply(scaling)) const postZoomOffset = fixedPoint.subtract(preZoomOffset.multiply(scaling))
@ -212,6 +206,7 @@ export {
ART_BOARD_HEIGHT, ART_BOARD_HEIGHT,
ART_BOARD_WIDTH, ART_BOARD_WIDTH,
CENTER, CENTER,
OUTERMOST_ZOOM_LEVEL,
SVG_ART_BOARD_WIDTH, SVG_ART_BOARD_WIDTH,
SVG_ART_BOARD_HEIGHT, SVG_ART_BOARD_HEIGHT,
MAX_WORKSPACE_BOUNDS, MAX_WORKSPACE_BOUNDS,