diff --git a/dev-todos.txt b/dev-todos.txt index 64ade43..e4ed8a1 100644 --- a/dev-todos.txt +++ b/dev-todos.txt @@ -1,4 +1,5 @@ * Use accessible click targets for item lists! Honestly, can they be checkboxes? * Update skeletons for ItemList and ItemsPanel * Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case +* Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅 diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js index faa70db..8a62619 100644 --- a/src/OutfitPreview.js +++ b/src/OutfitPreview.js @@ -12,7 +12,6 @@ import { Spinner, Text, Tooltip, - useToast, } from "@chakra-ui/core"; import { Delay } from "./util"; @@ -38,7 +37,6 @@ export const itemAppearanceFragment = gql` function OutfitPreview({ outfitState }) { const { wornItemIds, speciesId, colorId } = outfitState; - const toast = useToast(); const { loading, error, data } = useQuery( gql` @@ -99,7 +97,10 @@ function OutfitPreview({ outfitState }) { className="outfit-preview-layer-image" // This sets up the cache to not need to reload images during // download! - crossOrigin="Anonymous" + // TODO: Re-enable this once we get our change into Chakra + // main. For now, this will make Downloads a bit slower, which + // is fine! + // crossOrigin="Anonymous" /> @@ -138,14 +139,7 @@ function OutfitPreview({ outfitState }) { download={(outfitState.name || "Outfit") + ".png"} onMouseEnter={prepareDownload} onFocus={prepareDownload} - onClick={() => { - if (!downloadImageUrl) { - toast({ - title: - "Just a second, try again when the image is done loading!", - }); - } - }} + cursor={!downloadImageUrl && "wait"} variant="unstyled" backgroundColor="gray.600" color="gray.50" @@ -224,6 +218,8 @@ function useDownloadableImage(visibleLayers) { const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]); const prepareDownload = React.useCallback(async () => { + setDownloadImageUrl(null); + // Skip if the current image URL is already correct for these layers. const layerIds = visibleLayers.map((l) => l.id); if (layerIds.join(",") === preparedForLayerIds.join(",")) { @@ -237,7 +233,7 @@ function useDownloadableImage(visibleLayers) { image.crossOrigin = "Anonymous"; // Requires S3 CORS config! image.addEventListener("load", () => resolve(image), false); image.addEventListener("error", (e) => reject(e), false); - image.src = layer.imageUrl; + image.src = layer.imageUrl + "&xoxo"; }) );