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!

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;

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>
           )
         ) : (

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>
 );