From c806de4e83b477e3df0403d4c4b4ac3c1d16337a Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 22 Sep 2020 01:49:12 -0700
Subject: [PATCH] rename EaselCanvas to OutfitCanvas, etc

reflecting further on the abstraction, I'm noticing that this isn't an Easel abstraction like I envisioned early, and that we're baking some Neopets stuff into it. And I think that's the right call, esp with the tricky MovieClip stuff coming up, where I think more barriers would hurt more than they help. So, a new name!
---
 .../{EaselCanvas.js => OutfitCanvas.js}       | 10 ++++----
 src/app/components/OutfitPreview.js           | 12 +++++-----
 ...vas.stories.js => OutfitCanvas.stories.js} | 24 ++++++++++---------
 3 files changed, 24 insertions(+), 22 deletions(-)
 rename src/app/components/{EaselCanvas.js => OutfitCanvas.js} (96%)
 rename src/stories/{EaselCanvas.stories.js => OutfitCanvas.stories.js} (68%)

diff --git a/src/app/components/EaselCanvas.js b/src/app/components/OutfitCanvas.js
similarity index 96%
rename from src/app/components/EaselCanvas.js
rename to src/app/components/OutfitCanvas.js
index eb75493..6b4230e 100644
--- a/src/app/components/EaselCanvas.js
+++ b/src/app/components/OutfitCanvas.js
@@ -6,7 +6,7 @@ const EaselContext = React.createContext({
   removeResizeListener: () => {},
 });
 
-function EaselCanvas({ children, width, height }) {
+function OutfitCanvas({ children, width, height }) {
   const [stage, setStage] = React.useState(null);
   const resizeListenersRef = React.useRef([]);
   const canvasRef = React.useRef(null);
@@ -109,7 +109,7 @@ function EaselCanvas({ children, width, height }) {
   );
 }
 
-export function EaselBitmap({ src, zIndex }) {
+export function OutfitCanvasImage({ src, zIndex }) {
   const {
     width,
     height,
@@ -183,8 +183,8 @@ export function EaselBitmap({ src, zIndex }) {
 }
 
 /**
- * useEaselDependenciesLoader loads the CreateJS scripts we use in EaselCanvas.
- * We load it as part of EaselCanvas, but callers can also use this to preload
+ * useEaselDependenciesLoader loads the CreateJS scripts we use in OutfitCanvas.
+ * We load it as part of OutfitCanvas, but callers can also use this to preload
  * the scripts and track loading progress.
  */
 export function useEaselDependenciesLoader() {
@@ -246,4 +246,4 @@ export function loadImage(url) {
   return promise;
 }
 
-export default EaselCanvas;
+export default OutfitCanvas;
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index d571564..e15b34e 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -4,11 +4,11 @@ import { WarningIcon } from "@chakra-ui/icons";
 import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
-import EaselCanvas, {
-  EaselBitmap,
+import OutfitCanvas, {
+  OutfitCanvasImage,
   loadImage,
   useEaselDependenciesLoader,
-} from "./EaselCanvas";
+} from "./OutfitCanvas";
 import HangerSpinner from "./HangerSpinner";
 import useOutfitAppearance from "./useOutfitAppearance";
 
@@ -151,15 +151,15 @@ export function OutfitLayers({
         engine === "canvas" ? (
           !loadingEasel && (
             <FullScreenCenter>
-              <EaselCanvas width={canvasSize} height={canvasSize}>
+              <OutfitCanvas width={canvasSize} height={canvasSize}>
                 {visibleLayers.map((layer) => (
-                  <EaselBitmap
+                  <OutfitCanvasImage
                     key={layer.id}
                     src={getBestImageUrlForLayer(layer)}
                     zIndex={layer.zone.depth}
                   />
                 ))}
-              </EaselCanvas>
+              </OutfitCanvas>
             </FullScreenCenter>
           )
         ) : (
diff --git a/src/stories/EaselCanvas.stories.js b/src/stories/OutfitCanvas.stories.js
similarity index 68%
rename from src/stories/EaselCanvas.stories.js
rename to src/stories/OutfitCanvas.stories.js
index feeaf4a..67e63e5 100644
--- a/src/stories/EaselCanvas.stories.js
+++ b/src/stories/OutfitCanvas.stories.js
@@ -1,37 +1,39 @@
 import React from "react";
 
-import EaselCanvas, { EaselBitmap } from "../app/components/EaselCanvas";
+import OutfitCanvas, {
+  OutfitCanvasImage,
+} from "../app/components/OutfitCanvas";
 
 export default {
-  title: "Dress to Impress/EaselCanvas",
-  component: EaselCanvas,
+  title: "Dress to Impress/OutfitCanvas",
+  component: OutfitCanvas,
 };
 
 export const BlueAcara = () => (
-  <EaselCanvas width={300} height={300}>
-    <EaselBitmap
+  <OutfitCanvas width={300} height={300}>
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/002/2426_898928db88/2426.svg"
       zIndex={10}
     />
-    <EaselBitmap
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/002/2425_501f596cef/2425.svg"
       zIndex={20}
     />
-    <EaselBitmap
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/002/2427_f12853f18a/2427.svg"
       zIndex={30}
     />
-    <EaselBitmap
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/032/32185_dc8f076ae3/32185.svg"
       zIndex={40}
     />
-    <EaselBitmap
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/002/2428_991dcdedc7/2428.svg"
       zIndex={50}
     />
-    <EaselBitmap
+    <OutfitCanvasImage
       src="http://images.neopets.com/cp/bio/data/000/000/002/2430_87edccba4c/2430.svg"
       zIndex={60}
     />
-  </EaselCanvas>
+  </OutfitCanvas>
 );