🆙 Cleanup Furni-Edit & Fix the avatar-editor

src/components/MainView.tsx

@@ -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 />
         </>

src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -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" /> }

src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx

@@ -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;
 

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx

@@ -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 */ }

src/components/toolbar/ToolbarView.tsx

@@ -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">