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 && (
-
+
{visibleLayers.map((layer) => (
-
))}
-
+
)
) : (
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 = () => (
-
-
+
-
-
-
-
-
-
+
);