🆙 Cleanup Furni-Edit & Fix the avatar-editor

This commit is contained in:
duckietm
2026-03-27 13:38:03 +01:00
parent a4d4764105
commit bbe71e9753
8 changed files with 27 additions and 283 deletions
+2 -18
View File
@@ -109,22 +109,6 @@ export class AvatarEditorThumbnailsHelper
container.addChild(sprite);
}
if(container.children.length > 0)
{
const isPetPart = parts.some(p => p.type === 'pt' || p.type === 'ptl' || p.type === 'ptr');
if(isPetPart)
{
const bounds = container.getBounds();
for(const child of container.children)
{
(child as NitroSprite).position.x -= bounds.x;
(child as NitroSprite).position.y -= bounds.y;
}
}
}
return container;
};
@@ -133,9 +117,9 @@ export class AvatarEditorThumbnailsHelper
const resetFigure = async (figure: string) =>
{
const container = buildContainer(part, useColors, partColors, isDisabled);
const imageUrl = await TextureUtils.generateImageUrl(container);
const imageUrl = await TextureUtils.generateImageUrl({ target: container, resolution: 1 });
AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
if(imageUrl) AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
resolve(imageUrl);
};
-2
View File
@@ -9,7 +9,6 @@ import { CampaignView } from './campaign/CampaignView';
import { CatalogView } from './catalog/CatalogView';
import { ChatHistoryView } from './chat-history/ChatHistoryView';
import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
import { FurniEditorView } from './furni-editor/FurniEditorView';
import { FriendsView } from './friends/FriendsView';
import { GameCenterView } from './game-center/GameCenterView';
import { GroupsView } from './groups/GroupsView';
@@ -121,7 +120,6 @@ export const MainView: FC<{}> = props =>
<CampaignView />
<GameCenterView />
<FloorplanEditorView />
<FurniEditorView />
<YoutubeTvView />
<ExternalPluginLoader />
</>
@@ -1,4 +1,3 @@
import { AvatarEditorFigureCategory, AvatarFigurePartType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
@@ -15,7 +14,7 @@ export const AvatarEditorFigureSetItemView: FC<{
{
const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
const [ assetUrl, setAssetUrl ] = useState<string>('');
const { activeModelKey = '', selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
const clubLevel = partItem.partSet?.clubLevel ?? 0;
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
@@ -24,7 +23,9 @@ export const AvatarEditorFigureSetItemView: FC<{
useEffect(() =>
{
if(!setType || !setType.length || !partItem) return;
setAssetUrl('');
if(!setType || !setType.length || !partItem || partItem.isClear) return;
const loadImage = async () =>
{
@@ -34,7 +35,7 @@ export const AvatarEditorFigureSetItemView: FC<{
let url: string = null;
if(setType === AvatarFigurePartType.HEAD && activeModelKey !== AvatarEditorFigureCategory.NFT)
if(setType === 'hd')
{
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked || isSellableNotOwned);
}
@@ -53,12 +54,27 @@ export const AvatarEditorFigureSetItemView: FC<{
};
loadImage();
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned, activeModelKey ]);
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);
if(!partItem) return null;
const isHead = (setType === 'hd');
return (
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD && activeModelKey !== AvatarEditorFigureCategory.NFT) ? 'center -35px' : 'center' } } { ...rest }>
<InfiniteGrid.Item
itemActive={ isSelected }
itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
{ ...rest }
>
{ !partItem.isClear && assetUrl && !isHead &&
<img
src={ assetUrl }
alt=""
className="absolute inset-0 w-full h-full object-contain pointer-events-none image-rendering-pixelated"
draggable={ false }
/> }
{ !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
{ partItem.isClear && <AvatarEditorIcon icon="clear" /> }
{ !partItem.isClear && partItem.partSet.isSellable && !isSellableNotOwned && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
@@ -7,9 +7,10 @@ import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
export const AvatarEditorFigureSetView: FC<{
category: IAvatarEditorCategory;
columnCount: number;
estimateSize?: number;
}> = props =>
{
const { category = null, columnCount = 3 } = props;
const { category = null, columnCount = 3, estimateSize = 50 } = props;
const { selectedParts = null, selectEditorPart } = useAvatarEditor();
const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
@@ -29,7 +30,7 @@ export const AvatarEditorFigureSetView: FC<{
};
return (
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
{
if(!item) return null;
@@ -574,19 +574,6 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
onClick={ () => setDropdownOpen(!dropdownOpen) }>
{ dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
</button>
<button
className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
onClick={ () =>
{
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
CreateLinkEvent('furni-editor/show');
if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
} }>
Edit Furni
</button>
{ dropdownOpen &&
<div className="flex gap-[4px] w-full">
{ /* Left panel: position + rotation */ }
-2
View File
@@ -96,8 +96,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
<ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
{ isMod &&
<ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
{ isMod &&
<ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
</Flex>
<Flex alignItems="center" justifyContent="center" className="flex-1 min-w-0 max-w-[600px] mx-auto" id="toolbar-chat-input-container" />
<Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
-1
View File
@@ -1 +0,0 @@
export * from './useFurniEditor';
-239
View File
@@ -1,239 +0,0 @@
import { useCallback, useState } from 'react';
export interface FurniItem
{
id: number;
spriteId: number;
itemName: string;
publicName: string;
type: string;
width: number;
length: number;
stackHeight: number;
allowStack: boolean;
allowWalk: boolean;
allowSit: boolean;
allowLay: boolean;
interactionType: string;
interactionModesCount: number;
}
export interface FurniDetail extends FurniItem
{
allowGift: boolean;
allowTrade: boolean;
allowRecycle: boolean;
allowMarketplaceSell: boolean;
allowInventoryStack: boolean;
vendingIds: string;
customparams: string;
effectIdMale: number;
effectIdFemale: number;
clothingOnWalk: string;
multiheight: string;
description: string;
usageCount: number;
}
export interface CatalogRef
{
id: number;
catalogName: string;
costCredits: number;
costPoints: number;
pointsType: number;
pageId: number;
pageName: string;
}
const API_BASE = '/api/admin/furni-editor';
async function apiFetch<T>(url: string, options?: RequestInit): Promise<T>
{
const res = await fetch(url, { credentials: 'include', ...options });
const data = await res.json();
if(!res.ok || data.error) throw new Error(data.error || 'API error');
return data;
}
export const useFurniEditor = () =>
{
const [ items, setItems ] = useState<FurniItem[]>([]);
const [ total, setTotal ] = useState(0);
const [ page, setPage ] = useState(1);
const [ loading, setLoading ] = useState(false);
const [ error, setError ] = useState<string | null>(null);
const [ selectedItem, setSelectedItem ] = useState<FurniDetail | null>(null);
const [ catalogItems, setCatalogItems ] = useState<CatalogRef[]>([]);
const [ interactions, setInteractions ] = useState<string[]>([]);
const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
const clearError = useCallback(() => setError(null), []);
const searchItems = useCallback(async (query: string, type: string, pg: number) =>
{
setLoading(true);
setError(null);
try
{
const params = new URLSearchParams({ q: query, limit: '20', page: String(pg) });
if(type) params.set('type', type);
const data = await apiFetch<{ items: FurniItem[]; total: number; page: number }>(`${ API_BASE }?${ params }`);
setItems(data.items);
setTotal(data.total);
setPage(data.page);
}
catch(e: any)
{
setError(e.message);
}
finally
{
setLoading(false);
}
}, []);
const loadDetail = useCallback(async (id: number): Promise<boolean> =>
{
setLoading(true);
setError(null);
try
{
const data = await apiFetch<{ item: FurniDetail; catalogItems: CatalogRef[]; furniDataEntry: Record<string, unknown> | null }>(`${ API_BASE }/detail?id=${ id }`);
setSelectedItem(data.item);
setCatalogItems(data.catalogItems);
setFurniDataEntry(data.furniDataEntry);
return true;
}
catch(e: any)
{
setError(e.message);
return false;
}
finally
{
setLoading(false);
}
}, []);
const updateItem = useCallback(async (id: number, fields: Record<string, unknown>) =>
{
setLoading(true);
setError(null);
try
{
await apiFetch(`${ API_BASE }/update?id=${ id }`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(fields)
});
return true;
}
catch(e: any)
{
setError(e.message);
return false;
}
finally
{
setLoading(false);
}
}, []);
const createItem = useCallback(async (fields: Record<string, unknown>) =>
{
setLoading(true);
setError(null);
try
{
const data = await apiFetch<{ id: number }>(`${ API_BASE }`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(fields)
});
return data.id;
}
catch(e: any)
{
setError(e.message);
return null;
}
finally
{
setLoading(false);
}
}, []);
const deleteItem = useCallback(async (id: number) =>
{
setLoading(true);
setError(null);
try
{
await apiFetch(`${ API_BASE }/delete?id=${ id }`, { method: 'POST' });
return true;
}
catch(e: any)
{
setError(e.message);
return false;
}
finally
{
setLoading(false);
}
}, []);
const loadInteractions = useCallback(async () =>
{
try
{
const data = await apiFetch<{ interactions: Array<string | { name: string }> }>(`${ API_BASE }/interactions`);
setInteractions(data.interactions.map(i => typeof i === 'string' ? i : i.name));
}
catch {}
}, []);
const loadBySpriteId = useCallback(async (spriteId: number): Promise<boolean> =>
{
try
{
const data = await apiFetch<{ id: number }>(`${ API_BASE }/by-sprite?spriteId=${ spriteId }`);
return await loadDetail(data.id);
}
catch(e: any)
{
setError(e.message);
return false;
}
}, [ loadDetail ]);
return {
items, total, page, loading, error, clearError,
selectedItem, setSelectedItem, catalogItems, furniDataEntry,
interactions,
searchItems, loadDetail, loadBySpriteId, updateItem, createItem, deleteItem, loadInteractions
};
};