From 1e420194b563630e2abb6885145c4ea7693db22e Mon Sep 17 00:00:00 2001 From: Pat Needham Date: Thu, 23 May 2024 17:02:25 -0400 Subject: [PATCH] canvas component pulled out so it can be loaded in starred versions table dialog --- .../templates/canvas/artwork-canvas.tsx | 28 +++++++++++++ app/components/templates/canvas/index.ts | 1 + .../artwork-version.get.server.ts | 4 +- .../artwork-version/artwork-version.server.ts | 11 +++++ .../artwork-version.update.starred.tsx | 2 + .../__components/canvas-content.tsx | 29 +------------ .../artworks+/$artworkId/_index/route.tsx | 32 +++++++++++--- .../$artworkId/_index/starred-versions.tsx | 42 +++++++++++++++++-- 8 files changed, 112 insertions(+), 37 deletions(-) create mode 100644 app/components/templates/canvas/artwork-canvas.tsx create mode 100644 app/components/templates/canvas/index.ts diff --git a/app/components/templates/canvas/artwork-canvas.tsx b/app/components/templates/canvas/artwork-canvas.tsx new file mode 100644 index 00000000..0ad95c30 --- /dev/null +++ b/app/components/templates/canvas/artwork-canvas.tsx @@ -0,0 +1,28 @@ +import { memo, useEffect, useRef } from 'react' +import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator' +import { canvasDrawService } from '#app/services/canvas/draw.service' + +export const ArtworkCanvas = memo( + ({ generator }: { generator: IArtworkVersionGenerator }) => { + const { width, height, background } = generator.settings + const canvasRef = useRef(null) + + useEffect(() => { + const canvas = canvasRef.current + if (canvas) { + canvasDrawService({ canvas, generator }) + } + }, [canvasRef, generator]) + + return ( + + ) + }, +) +ArtworkCanvas.displayName = 'ArtworkCanvas' diff --git a/app/components/templates/canvas/index.ts b/app/components/templates/canvas/index.ts new file mode 100644 index 00000000..f23b7856 --- /dev/null +++ b/app/components/templates/canvas/index.ts @@ -0,0 +1 @@ +export * from './artwork-canvas' diff --git a/app/models/artwork-version/artwork-version.get.server.ts b/app/models/artwork-version/artwork-version.get.server.ts index 236b0f7b..2f40b072 100644 --- a/app/models/artwork-version/artwork-version.get.server.ts +++ b/app/models/artwork-version/artwork-version.get.server.ts @@ -4,7 +4,6 @@ import { prisma } from '#app/utils/db.server' import { type IArtworkVersionWithDesignsAndLayers, type IArtworkVersion, - type IArtworkVersionWithBranch, } from './artwork-version.server' export type queryArtworkVersionWhereArgsType = z.infer @@ -107,7 +106,7 @@ export const getStarredArtworkVersions = async ({ artworkId, }: { artworkId: string -}): Promise => { +}): Promise => { const starredVersions = await prisma.artworkVersion.findMany({ where: { branch: { @@ -116,6 +115,7 @@ export const getStarredArtworkVersions = async ({ starred: true, }, include: { + ...includeDesignsAndLayers, branch: true, }, orderBy: { diff --git a/app/models/artwork-version/artwork-version.server.ts b/app/models/artwork-version/artwork-version.server.ts index 38eedcba..4dcc3947 100644 --- a/app/models/artwork-version/artwork-version.server.ts +++ b/app/models/artwork-version/artwork-version.server.ts @@ -1,4 +1,5 @@ import { type ArtworkVersion } from '@prisma/client' +import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator' import { type DateOrString } from '#app/definitions/prisma-helper' import { type IArtworkBranch } from '../artwork-branch/artwork-branch.server' import { type IDesignWithType } from '../design/design.server' @@ -20,8 +21,18 @@ export interface IArtworkVersion extends BaseArtworkVersion { export interface IArtworkVersionWithDesignsAndLayers extends IArtworkVersion { designs: IDesignWithType[] layers: ILayerWithDesigns[] + branch?: IArtworkBranch } +// created this for profile artwork view to review starred versions +// now wanting to display canvas from dialog +// canvas requires designs and layers to compute +// temp fix is to include branch for its name in table display export interface IArtworkVersionWithBranch extends IArtworkVersion { branch: IArtworkBranch } + +export interface IArtworkVersionWithGenerator + extends IArtworkVersionWithDesignsAndLayers { + generator: IArtworkVersionGenerator +} diff --git a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx index 1380a843..f0b90a39 100644 --- a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx +++ b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx @@ -27,6 +27,8 @@ import { Routes } from '#app/utils/routes.const' // https://www.epicweb.dev/full-stack-components +// TODO: prevent starring if artwork doesn't have all design types set + const route = Routes.RESOURCES.API.V1.ARTWORK_VERSION.UPDATE.STARRED const schema = ArtworkVersionStarredSchema diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/canvas-content.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/canvas-content.tsx index e44f2173..31a81f8b 100644 --- a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/canvas-content.tsx +++ b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/canvas-content.tsx @@ -1,4 +1,4 @@ -import { memo, useEffect, useMemo, useRef } from 'react' +import { useMemo } from 'react' import { ReactFlow, type Node, @@ -10,8 +10,8 @@ import { type NodeProps, } from 'reactflow' import { ContainerIndex } from '#app/components/shared' +import { ArtworkCanvas } from '#app/components/templates/canvas' import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator' -import { canvasDrawService } from '#app/services/canvas/draw.service' import 'reactflow/dist/style.css' const initialNodes = [ @@ -23,31 +23,6 @@ const initialNodes = [ }, ] satisfies Node[] -const ArtworkCanvas = memo( - ({ generator }: { generator: IArtworkVersionGenerator }) => { - const { width, height, background } = generator.settings - const canvasRef = useRef(null) - - useEffect(() => { - const canvas = canvasRef.current - if (canvas) { - canvasDrawService({ canvas, generator }) - } - }, [canvasRef, generator]) - - return ( - - ) - }, -) -ArtworkCanvas.displayName = 'ArtworkCanvas' - export const CanvasContent = ({ generator, }: { diff --git a/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx b/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx index 53d0bca7..1e6b2fdf 100644 --- a/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx +++ b/app/routes/users+/$username_+/artworks+/$artworkId/_index/route.tsx @@ -10,7 +10,13 @@ import { formatDistanceToNow } from 'date-fns' import { z } from 'zod' import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx' import { ContainerDetails } from '#app/components/shared/container.tsx' +import { type IArtworkVersionGenerator } from '#app/definitions/artwork-generator.ts' import { getStarredArtworkVersions } from '#app/models/artwork-version/artwork-version.get.server.ts' +import { + type IArtworkVersionWithGenerator, + type IArtworkVersionWithDesignsAndLayers, +} from '#app/models/artwork-version/artwork-version.server.ts' +import { artworkVersionGeneratorBuildService } from '#app/services/artwork/version/generator/build.service.ts' import { requireUserId } from '#app/utils/auth.server' import { validateCSRF } from '#app/utils/csrf.server' import { prisma } from '#app/utils/db.server' @@ -27,16 +33,32 @@ export async function loader({ params, request }: LoaderFunctionArgs) { const artwork = await getArtwork(userId, params.artworkId as string) invariantResponse(artwork, 'Not found', { status: 404 }) - const starredVersions = await getStarredArtworkVersions({ - artworkId: artwork.id, - }) + // get all starred versions for this artwork + const starredVersions: IArtworkVersionWithDesignsAndLayers[] = + await getStarredArtworkVersions({ + artworkId: artwork.id, + }) + + // get all generators for these versions + const generators: IArtworkVersionGenerator[] = await Promise.all( + starredVersions.map(version => + artworkVersionGeneratorBuildService({ version }), + ), + ) + + // combine versions and generators + const versionsWithGenerators: IArtworkVersionWithGenerator[] = + starredVersions.map((version, index) => ({ + ...version, + generator: generators[index], + })) const date = new Date(artwork.updatedAt) const timeAgo = formatDistanceToNow(date) return json({ artwork, - starredVersions, + versionsWithGenerators, timeAgo, breadcrumb: artwork.name, project: artwork.project, @@ -116,7 +138,7 @@ export default function ArtworkDetailsRoute() {
- + {displayBar ?