Merge pull request #178 from goodeats/171-images-in-artwork

arrange when image is on canvas for pixel data and whether to hide on…

app/components/templates/panel/dashboard-entity-panel.values.asset.image.tsx

@@ -4,6 +4,7 @@ import { SidebarPanelPopoverFormContainer } from '#app/components/layout/popover
 import { type IAssetImage } from '#app/models/asset/image/image.server'
 import { getAssetImgSrc } from '#app/models/asset/image/utils'
 import { AssetImageUpdateFit } from '#app/routes/resources+/api.v1+/asset.image.update.fit'
+import { AssetImageUpdateHideOnDraw } from '#app/routes/resources+/api.v1+/asset.image.update.hide-on-draw'
 import { AssetUpdateName } from '#app/routes/resources+/api.v1+/asset.update.name'
 import { SidebarPanelRowValuesContainer } from '..'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
@@ -31,6 +32,10 @@ const EntityPopover = memo(({ image }: EntityProps) => {
 				<span>Fit</span>
 				<AssetImageUpdateFit image={image} formLocation="popover" />
 			</SidebarPanelPopoverFormContainer>
+			<SidebarPanelPopoverFormContainer>
+				<span>Hide on Draw</span>
+				<AssetImageUpdateHideOnDraw image={image} formLocation="popover" />
+			</SidebarPanelPopoverFormContainer>
 		</PanelEntityPopover>
 	)
 })

app/definitions/artwork-generator.ts

@@ -1,8 +1,8 @@
 import { type IArtwork } from '#app/models/artwork/artwork.server'
 import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
+import { type IAssetGenerationByType } from '#app/models/asset/asset.generation.server'
 import { type IAssetByType } from '#app/models/asset/asset.server'
-import { type IAssetImageGeneration } from '#app/models/asset/image/image.generate.server'
 import { type IFill } from '#app/models/design-type/fill/fill.server'
 import { type ILayout } from '#app/models/design-type/layout/layout.server'
 import { type ILine } from '#app/models/design-type/line/line.server'
@@ -72,6 +72,11 @@ export interface ILayerGenerator extends IGeneratorDesigns {
 	name?: ILayer['name']
 	description?: ILayer['description']
 
+	// layer always has access to the background color
+	// if drawing image to get pixel data
+	// this allows the background to be redrawn
+	background: string
+
 	// create this design type
 	container: ILayerGeneratorContainer
 
@@ -94,14 +99,10 @@ export interface ILayerGeneratorContainer {
 
 export interface IGenerationLayer {
 	generator: ILayerGenerator
-	assets: IGenerationAssets
+	assets: IAssetGenerationByType
 	items: IGenerationItem[]
 }
 
-export interface IGenerationAssets {
-	image: IAssetImageGeneration | null
-}
-
 export interface IGenerationItem {
 	id: string
 	fillStyle: string

app/models/asset/asset.generation.server.ts

@@ -0,0 +1,5 @@
+import { type IAssetImageGeneration } from './image/image.generate.server'
+
+export interface IAssetGenerationByType {
+	assetImages: IAssetImageGeneration[]
+}

app/models/asset/image/image.generate.server.ts

@@ -1,10 +1,19 @@
+import { type IAssetImage } from './image.server'
+
+export interface IAssetImageSrcGeneration {
+	id: IAssetImage['id']
+	src: string
+}
+
 export interface IAssetImageDrawGeneration {
 	x: number
 	y: number
 	width: number
 	height: number
 }
 
-export interface IAssetImageGeneration extends IAssetImageDrawGeneration {
-	src: string
+export interface IAssetImageGeneration
+	extends IAssetImageSrcGeneration,
+		IAssetImageDrawGeneration {
+	hideOnDraw: boolean
 }

app/models/asset/image/image.server.ts

@@ -24,6 +24,7 @@ export interface IAssetImageFileData {
 	lastModified?: number
 	filename: string
 	fit?: IAssetImageFit
+	hideOnDraw?: boolean
 }
 
 // when adding attributes to an asset type,

app/models/asset/image/image.update.hide-on-draw.server.ts

@@ -0,0 +1,49 @@
+import { type IntentActionArgs } from '#app/definitions/intent-action-args'
+import { type IUser } from '#app/models/user/user.server'
+import { EditAssetImageHideOnDrawSchema } from '#app/schema/asset/image'
+import { ValidateAssetSubmissionStrategy } from '#app/strategies/validate-submission.strategy'
+import { validateEntitySubmission } from '#app/utils/conform-utils'
+import { prisma } from '#app/utils/db.server'
+import { type IAssetImage, type IAssetImageFileData } from './image.server'
+import { stringifyAssetImageAttributes } from './utils'
+
+export const validateEditHideOnDrawAssetImageSubmission = async ({
+	userId,
+	formData,
+}: IntentActionArgs) => {
+	const strategy = new ValidateAssetSubmissionStrategy()
+
+	return await validateEntitySubmission({
+		userId,
+		formData,
+		schema: EditAssetImageHideOnDrawSchema,
+		strategy,
+	})
+}
+
+export interface IAssetImageUpdateHideOnDrawSubmission {
+	userId: IUser['id']
+	id: IAssetImage['id']
+	hideOnDraw: boolean
+}
+
+interface IAssetImageUpdateHideOnDrawData {
+	attributes: IAssetImageFileData
+}
+
+export const updateAssetImageHideOnDraw = ({
+	id,
+	data,
+}: {
+	id: IAssetImage['id']
+	data: IAssetImageUpdateHideOnDrawData
+}) => {
+	const { attributes } = data
+	const jsonAttributes = stringifyAssetImageAttributes(attributes)
+	return prisma.asset.update({
+		where: { id },
+		data: {
+			attributes: jsonAttributes,
+		},
+	})
+}

app/models/asset/utils.ts

@@ -65,6 +65,14 @@ export const validateAssetAttributes = ({
 	}
 }
 
+export const filterAssetsVisible = ({
+	assets,
+}: {
+	assets: IAssetParsed[]
+}): IAssetType[] => {
+	return assets.filter(asset => asset.visible)
+}
+
 export const filterAssetType = ({
 	assets,
 	type,

app/routes/resources+/api.v1+/asset.image.update.hide-on-draw.tsx

@@ -0,0 +1,101 @@
+import {
+	json,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+} from '@remix-run/node'
+import { useFetcher } from '@remix-run/react'
+import { redirectBack } from 'remix-utils/redirect-back'
+import { useHydrated } from 'remix-utils/use-hydrated'
+import { FetcherIconButton } from '#app/components/templates/form/fetcher-icon-button'
+import { type IAssetImage } from '#app/models/asset/image/image.server'
+import { validateEditHideOnDrawAssetImageSubmission } from '#app/models/asset/image/image.update.hide-on-draw.server'
+import { EditAssetImageHideOnDrawSchema } from '#app/schema/asset/image'
+import { validateNoJS } from '#app/schema/form-data'
+import { assetImageUpdateHideOnDrawService } from '#app/services/asset.image.update.hide-on-draw.service'
+import { requireUserId } from '#app/utils/auth.server'
+import { Routes } from '#app/utils/routes.const'
+
+// https://www.epicweb.dev/full-stack-components
+
+const route = Routes.RESOURCES.API.V1.ASSET.IMAGE.UPDATE.HIDE_ON_DRAW
+const schema = EditAssetImageHideOnDrawSchema
+
+// auth GET request to endpoint
+export async function loader({ request }: LoaderFunctionArgs) {
+	await requireUserId(request)
+	return json({})
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const userId = await requireUserId(request)
+	const formData = await request.formData()
+	const noJS = validateNoJS({ formData })
+
+	let updateSuccess = false
+	let errorMessage = ''
+	const { status, submission } =
+		await validateEditHideOnDrawAssetImageSubmission({
+			userId,
+			formData,
+		})
+
+	if (status === 'success') {
+		const { success, message } = await assetImageUpdateHideOnDrawService({
+			userId,
+			...submission.value,
+		})
+		updateSuccess = success
+		errorMessage = message || ''
+	}
+
+	if (noJS) {
+		throw redirectBack(request, {
+			fallback: '/',
+		})
+	}
+
+	return json(
+		{ status, submission, message: errorMessage },
+		{
+			status: status === 'error' || !updateSuccess ? 404 : 200,
+		},
+	)
+}
+
+export const AssetImageUpdateHideOnDraw = ({
+	image,
+	formLocation = '',
+}: {
+	image: IAssetImage
+	formLocation?: string
+}) => {
+	const assetId = image.id
+	const field = 'hideOnDraw'
+	const isHiddenOnDraw = image.attributes[field] || false
+	const icon = isHiddenOnDraw ? 'eye-none' : 'eye-open'
+	const iconText = `${isHiddenOnDraw ? 'Show' : 'Show'} on draw`
+	const fetcherKey = `asset-image-update-${field}-${assetId}`
+	const formId = `${fetcherKey}${formLocation ? `-${formLocation}` : ''}`
+
+	let isHydrated = useHydrated()
+	const fetcher = useFetcher<typeof action>({
+		key: fetcherKey,
+	})
+
+	return (
+		<FetcherIconButton
+			fetcher={fetcher}
+			route={route}
+			schema={schema}
+			formId={formId}
+			icon={icon}
+			iconText={iconText}
+			tooltipText={iconText}
+			isHydrated={isHydrated}
+		>
+			<div className="hidden">
+				<input type="hidden" name="id" value={assetId} />
+			</div>
+		</FetcherIconButton>
+	)
+}

app/schema/asset/image.ts

@@ -61,6 +61,7 @@ export const AssetAttributesImageSchema = z.object({
 	lastModified: z.number().optional(),
 	filename: z.string(),
 	fit: z.nativeEnum(AssetImageFitTypeEnum).optional(),
+	hideOnDraw: z.boolean().optional(),
 })
 
 // zod schema for blob Buffer/File is not working
@@ -94,6 +95,10 @@ export const EditAssetImageFitSchema = z.object({
 	fit: z.nativeEnum(AssetImageFitTypeEnum),
 })
 
+export const EditAssetImageHideOnDrawSchema = z.object({
+	id: z.string(),
+})
+
 export const DeleteAssetImageSchema = z.object({
 	id: z.string(),
 })

app/services/artwork/version/generator/build.container.service.ts

@@ -0,0 +1,20 @@
+import { type IArtworkVersionWithChildren } from '#app/models/artwork-version/artwork-version.server'
+
+export const getArtworkVersionContainer = ({
+	version,
+}: {
+	version: IArtworkVersionWithChildren
+}) => {
+	const { width, height } = version
+	return {
+		width,
+		height,
+		top: 0,
+		left: 0,
+		margin: 0,
+		canvas: {
+			width,
+			height,
+		},
+	}
+}