morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish catalog

Browse Source
This commit is contained in:
wass08
2026-02-17 14:23:02 +09:00
parent 101db7b34d
commit 13fd1848d1
5 changed files with 439 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/ui/action-menu/index.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ export function ActionMenu({ className }: { className?: string }) {
{mode === "build" && tool === "item" && catalogCategory && (
<motion.div
className={cn(
"overflow-hidden border-zinc-800 max-h-96 border-b px-2 py-2",
"overflow-hidden border-zinc-800 border-b px-2 py-2",
)}
initial={{
opacity: 0,
@@ -45,7 +45,7 @@ export function ActionMenu({ className }: { className?: string }) {
}}
animate={{
opacity: 1,
maxHeight: 80,
maxHeight: 160,
paddingTop: 8,
paddingBottom: 8,
borderBottomWidth: 1,
apps/editor/components/ui/item-catalog/catalog-items.tsx
+253 -404
View File
File diff suppressed because it is too large Load Diff
apps/editor/components/ui/item-catalog/item-catalog.tsx
+132 -6
View File
@@ -1,27 +1,69 @@
"use client";
import { AssetInput } from "@pascal-app/core";
import { resolveCdnUrl } from "@pascal-app/viewer";
import Image from "next/image";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/primitives/tooltip";
import { cn } from "@/lib/utils";
import useEditor, { CatalogCategory } from "@/store/use-editor";
import { CATALOG_ITEMS } from "./catalog-items";
import { AssetInput } from "@pascal-app/core";
import { resolveCdnUrl } from "@pascal-app/viewer";
const PLACEMENT_TAGS = new Set(["floor", "wall", "ceiling", "countertop"]);
export function ItemCatalog({ category }: { category: CatalogCategory }) {
const selectedItem = useEditor((state) => state.selectedItem);
const setSelectedItem = useEditor((state) => state.setSelectedItem);
const [activePlacementTag, setActivePlacementTag] = useState<string | null>(null);
const [activeFunctionalTag, setActiveFunctionalTag] = useState<string | null>(null);
const filteredItems = CATALOG_ITEMS.filter(
// Reset tag filters when category changes
useEffect(() => {
setActivePlacementTag(null);
setActiveFunctionalTag(null);
}, [category]);
const categoryItems = CATALOG_ITEMS.filter(
(item) => item.category === category,
);
// Collect tags available in this category
const allTags = Array.from(
new Set(categoryItems.flatMap((item) => item.tags ?? [])),
);
const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t));
const functionalTags = allTags.filter((t) => !PLACEMENT_TAGS.has(t));
const hasFilters = allTags.length > 1;
// Count items for a placement tag given the current functional filter
const placementCount = (tag: string | null) =>
categoryItems.filter((item) => {
const tags = item.tags ?? [];
if (tag !== null && !tags.includes(tag)) return false;
if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false;
return true;
}).length;
// Count items for a functional tag given the current placement filter
const functionalCount = (tag: string) =>
categoryItems.filter((item) => {
const tags = item.tags ?? [];
if (!tags.includes(tag)) return false;
if (activePlacementTag && !tags.includes(activePlacementTag)) return false;
return true;
}).length;
const filteredItems = categoryItems.filter((item) => {
const tags = item.tags ?? [];
if (activePlacementTag && !tags.includes(activePlacementTag)) return false;
if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false;
return true;
});
// Auto-select first item if current selection is not in the filtered list
useEffect(() => {
const isCurrentItemInCategory = filteredItems.some(
@@ -44,6 +86,89 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
};
return (
<div className="flex flex-col gap-2">
{/* Filter chips */}
{hasFilters && (
<div className="flex flex-col gap-1.5">
{/* Placement row */}
{placementTags.length > 0 && (
<div className="flex flex-wrap gap-1">
<button
type="button"
onClick={() => setActivePlacementTag(null)}
className={cn(
"cursor-pointer rounded-md px-2 py-0.5 text-xs font-medium transition-colors",
activePlacementTag === null
? "bg-blue-500 text-white"
: "bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200",
)}
>
All
</button>
{placementTags.map((tag) => {
const count = placementCount(tag);
const isActive = activePlacementTag === tag;
const isEmpty = count === 0 && !isActive;
return (
<button
key={tag}
type="button"
disabled={isEmpty}
onClick={() => setActivePlacementTag(isActive ? null : tag)}
className={cn(
"inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
isActive
? "bg-blue-500 text-white"
: isEmpty
? "cursor-not-allowed bg-zinc-800 text-zinc-500"
: "bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200",
)}
>
{tag}
<span className={cn("text-[10px]", isActive ? "text-blue-200" : isEmpty ? "text-zinc-600" : "text-blue-500/70")}>
{count}
</span>
</button>
);
})}
</div>
)}
{/* Functional row */}
{functionalTags.length > 0 && (
<div className="flex flex-wrap gap-1">
{functionalTags.map((tag) => {
const count = functionalCount(tag);
const isActive = activeFunctionalTag === tag;
const isEmpty = count === 0 && !isActive;
return (
<button
key={tag}
type="button"
disabled={isEmpty}
onClick={() => setActiveFunctionalTag(isActive ? null : tag)}
className={cn(
"inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
isActive
? "bg-violet-500 text-white"
: isEmpty
? "cursor-not-allowed bg-zinc-800 text-zinc-500"
: "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
)}
>
{tag}
<span className={cn("text-[10px]", isActive ? "text-violet-200" : isEmpty ? "text-zinc-600" : "text-zinc-500/70")}>
{count}
</span>
</button>
);
})}
</div>
)}
</div>
)}
{/* Items */}
<div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
{filteredItems.map((item, index) => {
const isSelected = selectedItem?.src === item?.src;
@@ -63,7 +188,7 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
alt={item.name}
className="rounded-lg object-cover"
fill
src={resolveCdnUrl(item.thumbnail) || ''}
src={resolveCdnUrl(item.thumbnail) || ""}
/>
{attachmentIcon && (
<div className="absolute right-0.5 bottom-0.5 flex h-4 w-4 items-center justify-center rounded bg-black/60">
@@ -89,5 +214,6 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
);
})}
</div>
</div>
);
}
packages/core/src/schema/nodes/item.ts
+2
View File
@@ -10,6 +10,7 @@ const assetSchema = z.object({
src: z.string(),
dimensions: z.tuple([z.number(), z.number(), z.number()]).default([1, 1, 1]), // [w, h, d]
attachTo: z.enum(['wall', 'wall-side', 'ceiling']).optional(),
tags: z.array(z.string()).optional(),
// These are "Corrective" transforms to normalize the GLB
offset: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
@@ -42,6 +43,7 @@ export const ItemNode = BaseNode.extend({
- offset: corrective position offset for the model
- rotation: corrective rotation for the model
- scale: corrective scale for the model
- tags: tags associated with the item
`)
export type ItemNode = z.infer<typeof ItemNode>
packages/viewer/src/components/viewer/post-processing.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import useViewer from '../../store/use-viewer'
// SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
export const SSGI_PARAMS = {
enabled: true,
sliceCount: 1,
sliceCount: 2,
stepCount: 8,
radius: 1,
expFactor: 1.5,