OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

fix bug that reloaded all layers on resize

Browse source
This commit is contained in:
Emi Matchu 2020-09-22 05:01:56 -07:00
parent 185d6acc88
commit d50d1ecacc
1 changed files with 14 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/app/components/OutfitCanvas.js
View file

@ -78,11 +78,6 @@ function OutfitCanvas({ children, width, height }) {
} }
}, [stage, width, height]); }, [stage, width, height]);
// Set the canvas's internal dimensions to be higher, if the device has high
// DPI like retina. But we'll keep the layout width/height as expected!
const internalWidth = width * window.devicePixelRatio;
const internalHeight = height * window.devicePixelRatio;
if (loading) { if (loading) {
return null; return null;
} }
@ -90,8 +85,7 @@ function OutfitCanvas({ children, width, height }) {
return ( return (
<EaselContext.Provider <EaselContext.Provider
value={{ value={{
width: internalWidth, canvasRef,
height: internalHeight,
addChild, addChild,
removeChild, removeChild,
addResizeListener, addResizeListener,
@ -101,8 +95,11 @@ function OutfitCanvas({ children, width, height }) {
> >
<canvas <canvas
ref={canvasRef} ref={canvasRef}
width={internalWidth} // Set the canvas's internal dimensions to be higher, if the device has
height={internalHeight} // high DPI like retina. But we'll keep the layout width/height as
// expected!
width={width * window.devicePixelRatio}
height={height * window.devicePixelRatio}
style={{ style={{
width: width + "px", width: width + "px",
height: height + "px", height: height + "px",
@ -115,8 +112,7 @@ function OutfitCanvas({ children, width, height }) {
export function OutfitCanvasImage({ src, zIndex }) { export function OutfitCanvasImage({ src, zIndex }) {
const { const {
width, canvasRef,
height,
addChild, addChild,
removeChild, removeChild,
addResizeListener, addResizeListener,
@ -130,8 +126,8 @@ export function OutfitCanvasImage({ src, zIndex }) {
let canceled = false; let canceled = false;
function setBitmapSize() { function setBitmapSize() {
bitmap.scaleX = width / image.width; bitmap.scaleX = canvasRef.current.width / image.width;
bitmap.scaleY = height / image.height; bitmap.scaleY = canvasRef.current.height / image.height;
} }
async function addBitmap() { async function addBitmap() {
@ -181,8 +177,7 @@ export function OutfitCanvasImage({ src, zIndex }) {
}, [ }, [
src, src,
zIndex, zIndex,
width, canvasRef,
height,
addChild, addChild,
removeChild, removeChild,
addResizeListener, addResizeListener,
@ -194,8 +189,7 @@ export function OutfitCanvasImage({ src, zIndex }) {
export function OutfitCanvasMovie({ librarySrc, zIndex }) { export function OutfitCanvasMovie({ librarySrc, zIndex }) {
const { const {
width, canvasRef,
height,
addChild, addChild,
removeChild, removeChild,
addResizeListener, addResizeListener,
@ -209,8 +203,8 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
let canceled = false; let canceled = false;
function updateSize() { function updateSize() {
movieClip.scaleX = width / library.properties.width; movieClip.scaleX = canvasRef.current.width / library.properties.width;
movieClip.scaleY = height / library.properties.height; movieClip.scaleY = canvasRef.current.height / library.properties.height;
} }
async function addMovieClip() { async function addMovieClip() {
@ -303,8 +297,7 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
}, [ }, [
librarySrc, librarySrc,
zIndex, zIndex,
width, canvasRef,
height,
addChild, addChild,
removeChild, removeChild,
addResizeListener, addResizeListener,