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

Move canvas dimension rounding to recalibrateSize

Browse source
This commit is contained in:
adroitwhiz 2020-05-16 03:56:12 -04:00
parent b0164e7783
commit 3946cdc5f8
1 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
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 // Without the callback, rasters' load function has not been called yet, and they are
// positioned incorrectly // positioned incorrectly
paperCanvas.queuedImport = paperCanvas.queuedImport = paperCanvas.recalibrateSize(() => {
window.setTimeout(() => { paperCanvas.props.updateViewBounds(paper.view.matrix);
// Detached paperCanvas.initializeSvg(item, rotationCenterX, rotationCenterY, viewBox);
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);
} }
}); });
} }
@ -309,13 +300,20 @@ class PaperCanvas extends React.Component {
this.recalibrateSize(); this.recalibrateSize();
this.props.updateViewBounds(paper.view.matrix); 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. // 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. // When these are out of sync, the mouse events in the paint editor don't line up correctly.
window.setTimeout(() => { return window.setTimeout(() => {
if (!paper.view) return; 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) { setCanvas (canvas) {
this.canvas = canvas; this.canvas = canvas;