scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #1050 from adroitwhiz/recalibratesize-rounding

Browse source 
Move canvas dimension rounding to recalibrateSize
This commit is contained in:
adroitwhiz 2020-05-18 20:14:28 -04:00 committed by GitHub
commit d7888fd2d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/containers/paper-canvas.jsx
View file

@ -224,19 +224,10 @@ class PaperCanvas extends React.Component {
// Without the callback, rasters' load function has not been called yet, and they are
// positioned incorrectly
paperCanvas.queuedImport =
window.setTimeout(() => {
// Detached
if (!paper.view) return;
// Prevent blurriness caused if the "CSS size" of the element is a float--
// setting canvas dimensions to floats floors them, but we need to round instead
const elemSize = paper.DomElement.getSize(paper.view.element);
elemSize.width = Math.round(elemSize.width);
elemSize.height = Math.round(elemSize.height);
paper.view.setViewSize(elemSize);
paperCanvas.props.updateViewBounds(paper.view.matrix);
paperCanvas.initializeSvg(item, rotationCenterX, rotationCenterY, viewBox);
}, 0);
paperCanvas.queuedImport = paperCanvas.recalibrateSize(() => {
paperCanvas.props.updateViewBounds(paper.view.matrix);
paperCanvas.initializeSvg(item, rotationCenterX, rotationCenterY, viewBox);
});
}
});
}
@ -309,13 +300,23 @@ class PaperCanvas extends React.Component {
this.recalibrateSize();
this.props.updateViewBounds(paper.view.matrix);
}
recalibrateSize () {
recalibrateSize (callback) {
// Sets the size that Paper thinks the canvas is to the size the canvas element actually is.
// When these are out of sync, the mouse events in the paint editor don't line up correctly.
window.setTimeout(() => {
return window.setTimeout(() => {
// If the component unmounts, the canvas will be removed from the page, detaching paper.view.
// This could also be called before paper.view exists.
// In either case, return early if so without running the callback.
if (!paper.view) return;
paper.view.setViewSize(paper.DomElement.getSize(paper.view.element));
});
// Prevent blurriness caused if the "CSS size" of the element is a float--
// setting canvas dimensions to floats floors them, but we need to round instead
const elemSize = paper.DomElement.getSize(paper.view.element);
elemSize.width = Math.round(elemSize.width);
elemSize.height = Math.round(elemSize.height);
paper.view.setViewSize(elemSize);
if (callback) callback();
}, 0);
}
setCanvas (canvas) {
this.canvas = canvas;