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 = () => ( - - + - - - - - - + );