OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

split and simplify OutfitPreview & OutfitControls

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-05-02 13:40:37 -07:00
parent fa92101b58
commit 6b70df7e5e
7 changed files with 342 additions and 305 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

227
src/app/OutfitControls.js Normal file
View file

@ -0,0 +1,227 @@
import React from "react";
import { css } from "emotion";
import {
Box,
Flex,
IconButton,
PseudoBox,
Stack,
Tooltip,
useClipboard,
} from "@chakra-ui/core";
import OutfitResetModal from "./OutfitResetModal";
import SpeciesColorPicker from "./SpeciesColorPicker";
import useOutfitAppearance from "./useOutfitAppearance";
/**
* OutfitControls is the set of controls layered over the outfit preview, to
* control things like species/color and sharing links!
*/
function OutfitControls({ outfitState, dispatchToOutfit }) {
return (
<PseudoBox
role="group"
pos="absolute"
left="0"
right="0"
top="0"
bottom="0"
padding={{ base: 2, lg: 6 }}
display="grid"
overflow="auto"
gridTemplateAreas={`"back sharing"
"space space"
"picker picker"`}
gridTemplateRows="auto minmax(1rem, 1fr) auto"
className={css`
opacity: 0;
transition: opacity 0.2s;
&:hover,
&:focus-within {
opacity: 1;
}
`}
>
<Box gridArea="back">
<BackButton dispatchToOutfit={dispatchToOutfit} />
</Box>
<Stack
gridArea="sharing"
alignSelf="flex-end"
spacing={{ base: "2", lg: "4" }}
align="flex-end"
>
<Box>
<DownloadButton outfitState={outfitState} />
</Box>
<Box>
<CopyLinkButton outfitState={outfitState} />
</Box>
</Stack>
<Box gridArea="space" />
<Flex gridArea="picker" justify="center">
<SpeciesColorPicker
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Flex>
</PseudoBox>
);
}
/**
* DownloadButton downloads the outfit as an image!
*/
function DownloadButton({ outfitState }) {
const { visibleLayers } = useOutfitAppearance(outfitState);
const [downloadImageUrl, prepareDownload] = useDownloadableImage(
visibleLayers
);
return (
<Tooltip label="Download" placement="left">
<Box>
<ControlButton
icon="download"
aria-label="Download"
as="a"
// eslint-disable-next-line no-script-url
href={downloadImageUrl || "javascript:void 0"}
download={(outfitState.name || "Outfit") + ".png"}
onMouseEnter={prepareDownload}
onFocus={prepareDownload}
cursor={!downloadImageUrl && "wait"}
/>
</Box>
</Tooltip>
);
}
/**
* CopyLinkButton copies the outfit URL to the clipboard!
*/
function CopyLinkButton({ outfitState }) {
const { onCopy, hasCopied } = useClipboard(outfitState.url);
return (
<Tooltip label={hasCopied ? "Copied!" : "Copy link"} placement="left">
<Box>
<ControlButton
icon={hasCopied ? "check" : "link"}
aria-label="Copy link"
onClick={onCopy}
/>
</Box>
</Tooltip>
);
}
/**
* BackButton opens a reset modal to let you clear the outfit or enter a new
* pet's name to start from!
*/
function BackButton({ dispatchToOutfit }) {
const [showResetModal, setShowResetModal] = React.useState(false);
return (
<>
<ControlButton
icon="arrow-back"
aria-label="Leave this outfit"
onClick={() => setShowResetModal(true)}
/>
<OutfitResetModal
isOpen={showResetModal}
onClose={() => setShowResetModal(false)}
dispatchToOutfit={dispatchToOutfit}
/>
</>
);
}
/**
* ControlButton is a UI helper to render the cute round buttons we use in
* OutfitControls!
*/
function ControlButton({ icon, "aria-label": ariaLabel, ...props }) {
return (
<IconButton
icon={icon}
aria-label={ariaLabel}
isRound
variant="unstyled"
backgroundColor="gray.600"
color="gray.50"
boxShadow="md"
d="flex"
alignItems="center"
justifyContent="center"
transition="backgroundColor 0.2s"
_focus={{ backgroundColor: "gray.500" }}
_hover={{ backgroundColor: "gray.500" }}
outline="initial"
{...props}
/>
);
}
/**
* useDownloadableImage loads the image data and generates the downloadable
* image URL.
*/
function useDownloadableImage(visibleLayers) {
const [downloadImageUrl, setDownloadImageUrl] = React.useState(null);
const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
const prepareDownload = React.useCallback(async () => {
// Skip if the current image URL is already correct for these layers.
const layerIds = visibleLayers.map((l) => l.id);
if (layerIds.join(",") === preparedForLayerIds.join(",")) {
return;
}
// Skip if there are no layers. (This probably means we're still loading!)
if (layerIds.length === 0) {
return;
}
setDownloadImageUrl(null);
const imagePromises = visibleLayers.map(
(layer) =>
new Promise((resolve, reject) => {
const image = new window.Image();
image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
image.addEventListener("load", () => resolve(image), false);
image.addEventListener("error", (e) => reject(e), false);
image.src = layer.imageUrl + "&xoxo";
})
);
const images = await Promise.all(imagePromises);
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
for (const image of images) {
context.drawImage(image, 0, 0);
}
console.log(
"Generated image for download",
layerIds,
canvas.toDataURL("image/png")
);
setDownloadImageUrl(canvas.toDataURL("image/png"));
setPreparedForLayerIds(layerIds);
}, [preparedForLayerIds, visibleLayers]);
return [downloadImageUrl, prepareDownload];
}
export default OutfitControls;

302
src/app/OutfitPreview.js
View file

@ -1,75 +1,17 @@
import React from "react";
import { css } from "emotion";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import {
Box,
Flex,
Icon,
IconButton,
Image,
PseudoBox,
Spinner,
Stack,
Text,
Tooltip,
useClipboard,
} from "@chakra-ui/core";
import { Box, Flex, Icon, Image, Spinner, Text } from "@chakra-ui/core";
import { Delay } from "./util";
import OutfitResetModal from "./OutfitResetModal";
import SpeciesColorPicker from "./SpeciesColorPicker";
import useOutfitAppearance from "./useOutfitAppearance";
export const itemAppearanceFragment = gql`
fragment AppearanceForOutfitPreview on Appearance {
layers {
id
imageUrl(size: SIZE_600)
zone {
id
depth
}
}
restrictedZones {
id
}
}
`;
function OutfitPreview({ outfitState, dispatchToOutfit }) {
const { wornItemIds, speciesId, colorId } = outfitState;
const [hasFocus, setHasFocus] = React.useState(false);
const [showResetModal, setShowResetModal] = React.useState(false);
const { loading, error, data } = useQuery(
gql`
query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
petAppearance(speciesId: $speciesId, colorId: $colorId) {
...AppearanceForOutfitPreview
}
items(ids: $wornItemIds) {
id
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
...AppearanceForOutfitPreview
}
}
}
${itemAppearanceFragment}
`,
{
variables: { wornItemIds, speciesId, colorId },
}
);
const visibleLayers = getVisibleLayers(data);
const [downloadImageUrl, prepareDownload] = useDownloadableImage(
visibleLayers
);
const { onCopy, hasCopied } = useClipboard(outfitState.url);
/**
* OutfitPreview renders the actual image layers for the outfit we're viewing!
*/
function OutfitPreview({ outfitState }) {
const { loading, error, visibleLayers } = useOutfitAppearance(outfitState);
if (error) {
return (
@ -84,9 +26,11 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
}
return (
<PseudoBox role="group" pos="relative" height="100%" width="100%">
<Box pos="relative" height="100%" width="100%">
<TransitionGroup>
{visibleLayers.map((layer) => (
// We manage the fade-in and fade-out separately! The fade-out
// happens here, when the layer exits the DOM.
<CSSTransition
key={layer.id}
classNames={css`
@ -107,6 +51,9 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
objectFit="contain"
maxWidth="100%"
maxHeight="100%"
// We manage the fade-in and fade-out separately! The fade-in
// happens here, when the <Image> finishes preloading and
// applies the src to the underlying <img>.
className={css`
opacity: 0.01;
@ -127,7 +74,7 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
))}
</TransitionGroup>
{loading && (
<Delay>
<Delay ms={0}>
<FullScreenCenter>
<Box
width="100%"
@ -141,180 +88,10 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
</FullScreenCenter>
</Delay>
)}
<Box
pos="absolute"
left="0"
right="0"
top="0"
bottom="0"
padding={{ base: 2, lg: 6 }}
display="grid"
overflow="auto"
gridTemplateAreas={`"back sharing"
"space space"
"picker picker"`}
gridTemplateRows="auto minmax(1rem, 1fr) auto"
>
<Box gridArea="back">
<IconButton
icon="arrow-back"
aria-label="Leave this outfit"
variant="unstyled"
backgroundColor="gray.600"
isRound={true}
d="flex"
alignItems="center"
justifyContent="center"
color="gray.50"
opacity={hasFocus ? 1 : 0}
transition="all 0.2s"
_groupHover={{
opacity: 1,
}}
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
onClick={() => setShowResetModal(true)}
/>
</Box>
<Stack
gridArea="sharing"
alignSelf="flex-end"
spacing={{ base: "2", lg: "4" }}
align="flex-end"
>
<Box>
<Tooltip label="Download" placement="left">
<IconButton
icon="download"
aria-label="Download"
isRound
as="a"
// eslint-disable-next-line no-script-url
href={downloadImageUrl || "javascript:void 0"}
download={(outfitState.name || "Outfit") + ".png"}
onMouseEnter={prepareDownload}
onFocus={() => {
prepareDownload();
setHasFocus(true);
}}
onBlur={() => setHasFocus(false)}
cursor={!downloadImageUrl && "wait"}
variant="unstyled"
backgroundColor="gray.600"
color="gray.50"
boxShadow="md"
d="flex"
alignItems="center"
justifyContent="center"
opacity={hasFocus ? 1 : 0}
transition="all 0.2s"
_groupHover={{
opacity: 1,
}}
_focus={{
opacity: 1,
backgroundColor: "gray.500",
}}
_hover={{
backgroundColor: "gray.500",
}}
outline="initial"
/>
</Tooltip>
</Box>
<Box>
<Tooltip
label={hasCopied ? "Copied!" : "Copy link"}
placement="left"
>
<IconButton
icon={hasCopied ? "check" : "link"}
aria-label="Copy link"
isRound
onClick={onCopy}
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
variant="unstyled"
backgroundColor="gray.600"
color="gray.50"
boxShadow="md"
d="flex"
alignItems="center"
justifyContent="center"
opacity={hasFocus ? 1 : 0}
transition="all 0.2s"
_groupHover={{
opacity: 1,
}}
_focus={{
opacity: 1,
backgroundColor: "gray.500",
}}
_hover={{
backgroundColor: "gray.500",
}}
outline="initial"
/>
</Tooltip>
</Box>
</Stack>
<Box gridArea="space"></Box>
<PseudoBox
gridArea="picker"
opacity={hasFocus ? 1 : 0}
_groupHover={{ opacity: 1 }}
transition="opacity 0.2s"
display="flex"
justifyContent="center"
>
<SpeciesColorPicker
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
/>
</PseudoBox>
</Box>
<OutfitResetModal
isOpen={showResetModal}
onClose={() => setShowResetModal(false)}
dispatchToOutfit={dispatchToOutfit}
/>
</PseudoBox>
</Box>
);
}
function getVisibleLayers(data) {
if (!data) {
return [];
}
const allAppearances = [
data.petAppearance,
...(data.items || []).map((i) => i.appearanceOn),
].filter((a) => a);
let allLayers = allAppearances.map((a) => a.layers).flat();
// Clean up our data a bit, by ensuring only one layer per zone. This
// shouldn't happen in theory, but sometimes our database doesn't clean up
// after itself correctly :(
allLayers = allLayers.filter((l, i) => {
return allLayers.findIndex((l2) => l2.zone.id === l.zone.id) === i;
});
const allRestrictedZoneIds = allAppearances
.map((l) => l.restrictedZones)
.flat()
.map((z) => z.id);
const visibleLayers = allLayers.filter(
(l) => !allRestrictedZoneIds.includes(l.zone.id)
);
visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
return visibleLayers;
}
function FullScreenCenter({ children }) {
return (
<Flex
@ -331,51 +108,4 @@ function FullScreenCenter({ children }) {
);
}
function useDownloadableImage(visibleLayers) {
const [downloadImageUrl, setDownloadImageUrl] = React.useState(null);
const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
const prepareDownload = React.useCallback(async () => {
// Skip if the current image URL is already correct for these layers.
const layerIds = visibleLayers.map((l) => l.id);
if (layerIds.join(",") === preparedForLayerIds.join(",")) {
return;
}
setDownloadImageUrl(null);
const imagePromises = visibleLayers.map(
(layer) =>
new Promise((resolve, reject) => {
const image = new window.Image();
image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
image.addEventListener("load", () => resolve(image), false);
image.addEventListener("error", (e) => reject(e), false);
image.src = layer.imageUrl + "&xoxo";
})
);
const images = await Promise.all(imagePromises);
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
for (const image of images) {
context.drawImage(image, 0, 0);
}
console.log(
"Generated image for download",
layerIds,
canvas.toDataURL("image/png")
);
setDownloadImageUrl(canvas.toDataURL("image/png"));
setPreparedForLayerIds(layerIds);
}, [preparedForLayerIds, visibleLayers]);
return [downloadImageUrl, prepareDownload];
}
export default OutfitPreview;

2
src/app/SearchPanel.js
View file

@ -5,7 +5,7 @@ import { useQuery } from "@apollo/react-hooks";
import { Delay, Heading1, useDebounce } from "./util";
import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
import { itemAppearanceFragment } from "./OutfitPreview";
import { itemAppearanceFragment } from "./useOutfitAppearance";
/**
* SearchPanel shows item search results to the user, so they can preview them

11
src/app/SpeciesColorPicker.js
View file

@ -11,12 +11,7 @@ import { Delay } from "./util";
* It preloads all species, colors, and valid species/color pairs; and then
* ensures that the outfit is always in a valid state.
*/
function SpeciesColorPicker({
outfitState,
dispatchToOutfit,
onFocus,
onBlur,
}) {
function SpeciesColorPicker({ outfitState, dispatchToOutfit }) {
const toast = useToast();
const { loading, error, data } = useQuery(gql`
query {
@ -121,8 +116,6 @@ function SpeciesColorPicker({
border="none"
boxShadow="md"
width="auto"
onFocus={onFocus}
onBlur={onBlur}
>
{allColors.map((color) => (
<option key={color.id} value={color.id}>
@ -140,8 +133,6 @@ function SpeciesColorPicker({
border="none"
boxShadow="md"
width="auto"
onFocus={onFocus}
onBlur={onBlur}
>
{allSpecies.map((species) => (
<option key={species.id} value={species.id}>

20
src/app/WardrobePage.js
View file

@ -3,6 +3,7 @@ import { Box, Grid, useToast } from "@chakra-ui/core";
import { Helmet } from "react-helmet";
import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
import OutfitControls from "./OutfitControls";
import OutfitPreview from "./OutfitPreview";
import useOutfitState from "./useOutfitState.js";
@ -46,9 +47,9 @@ function WardrobePage() {
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<Grid
templateAreas={{
base: `"preview"
base: `"previewAndControls"
"itemsAndSearch"`,
lg: `"preview itemsAndSearch"`,
lg: `"previewAndControls itemsAndSearch"`,
}}
templateRows={{
base: "minmax(100px, 45%) minmax(300px, 55%)",
@ -61,11 +62,16 @@ function WardrobePage() {
height="100%"
width="100%"
>
<Box gridArea="preview" backgroundColor="gray.900">
<OutfitPreview
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
<Box gridArea="previewAndControls" bg="gray.900" pos="relative">
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitPreview outfitState={outfitState} />
</Box>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitControls
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Box>
<Box gridArea="itemsAndSearch">
<ItemsAndSearchPanels

83
src/app/useOutfitAppearance.js Normal file
View file

@ -0,0 +1,83 @@
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
/**
* useOutfitAppearance downloads the outfit's appearance data, and returns
* visibleLayers for rendering.
*/
export default function useOutfitAppearance(outfitState) {
const { wornItemIds, speciesId, colorId } = outfitState;
const { loading, error, data } = useQuery(
gql`
query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
petAppearance(speciesId: $speciesId, colorId: $colorId) {
...AppearanceForOutfitPreview
}
items(ids: $wornItemIds) {
id
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
...AppearanceForOutfitPreview
}
}
}
${itemAppearanceFragment}
`,
{
variables: { wornItemIds, speciesId, colorId },
}
);
const visibleLayers = getVisibleLayers(data);
return { loading, error, visibleLayers };
}
function getVisibleLayers(data) {
if (!data) {
return [];
}
const allAppearances = [
data.petAppearance,
...(data.items || []).map((i) => i.appearanceOn),
].filter((a) => a);
let allLayers = allAppearances.map((a) => a.layers).flat();
// Clean up our data a bit, by ensuring only one layer per zone. This
// shouldn't happen in theory, but sometimes our database doesn't clean up
// after itself correctly :(
allLayers = allLayers.filter((l, i) => {
return allLayers.findIndex((l2) => l2.zone.id === l.zone.id) === i;
});
const allRestrictedZoneIds = allAppearances
.map((l) => l.restrictedZones)
.flat()
.map((z) => z.id);
const visibleLayers = allLayers.filter(
(l) => !allRestrictedZoneIds.includes(l.zone.id)
);
visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
return visibleLayers;
}
export const itemAppearanceFragment = gql`
fragment AppearanceForOutfitPreview on Appearance {
layers {
id
imageUrl(size: SIZE_600)
zone {
id
depth
}
}
restrictedZones {
id
}
}
`;

2
src/app/useOutfitState.js
View file

@ -3,7 +3,7 @@ import gql from "graphql-tag";
import produce, { enableMapSet } from "immer";
import { useQuery, useApolloClient } from "@apollo/react-hooks";
import { itemAppearanceFragment } from "./OutfitPreview";
import { itemAppearanceFragment } from "./useOutfitAppearance";
enableMapSet();