Various Studio Bug Fixes

packages/client-core/i18n/en/editor.json

@@ -821,6 +821,7 @@
       "description": "Adds an interactable that opens links or navigates scene"
     },
     "spotLight": {
+      "name": "Spot Light",
       "description": "A light which emits along a direction, illuminating objects within a cone.",
       "lbl-color": "Color",
       "lbl-intensity": "Intensity",
@@ -1090,7 +1091,7 @@
       "components": "Components",
       "components-search": "Search Components ...",
       "component-detail": {
-        "gltf-model": "Creates objects in the hierarchy. Drag a model from the assets folder into the URL box or drag assets directly from project files into the hierarchy.",
+        "model": "Creates objects in the hierarchy. Drag a model from the assets folder into the URL box or drag assets directly from project files into the hierarchy.",
         "volumetric": "Import volumetric files. Accepts DRCS, UVOL, or Manifest Files. Links to cloud hosting.",
         "video": "Imports a 2D plane that accepts .mp4, .mkv, .avi",
         "variant": "Add model variant for level of detail",
@@ -1130,6 +1131,7 @@
       "copyAsset": "Copy",
       "pasteAsset": "Paste",
       "renameAsset": "Rename",
+      "renameFile": "Rename File",
       "viewAssetProperties": "View Properties",
       "refresh": "Refresh",
       "back": "Back",

packages/ui/src/components/editor/input/Euler/index.tsx

@@ -64,7 +64,7 @@ export const EulerInput = (props: EulerInputProps) => {
   )
 
   return (
-    <div className="flex flex-row justify-start gap-1.5">
+    <div className="flex flex-wrap justify-start gap-1.5">
       <NumericInput
         value={euler.x.value * RAD2DEG}
         onChange={onSetEuler('x')}

packages/ui/src/components/editor/input/Vector3/index.tsx

@@ -124,9 +124,14 @@ export const Vector3Input = ({
   const vz = value.z
 
   return (
-    <div className="flex flex-row flex-wrap justify-start gap-1.5">
+    <div className="flex flex-wrap justify-start gap-1.5">
       {uniformScaling && (
-        <Button startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />} onClick={onToggleUniform} />
+        <Button
+          title="Uniform Scaling"
+          variant="transparent"
+          startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />}
+          onClick={onToggleUniform}
+        />
       )}
       <NumericInput
         {...rest}

packages/ui/src/components/editor/panels/Files/browserGrid/RenameFileModal.tsx

@@ -0,0 +1,63 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
+import { fileBrowserPath } from '@etherealengine/common/src/schema.type.module'
+import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
+import { useHookstate } from '@etherealengine/hyperflux'
+import { useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import Input from '../../../../../primitives/tailwind/Input'
+import Modal from '../../../../../primitives/tailwind/Modal'
+
+export default function RenameFileModal({ file }: { file: FileDataType }) {
+  const { t } = useTranslation()
+  const newFileName = useHookstate(file.name)
+  const fileService = useMutation(fileBrowserPath)
+
+  const handleSubmit = async () => {
+    fileService.update(null, {
+      oldName: file.fullName,
+      newName: file.isFolder ? newFileName.value : `${newFileName.value}.${file.type}`,
+      oldPath: file.path,
+      newPath: file.path,
+      isCopy: false
+    })
+    PopoverState.hidePopupover()
+  }
+
+  return (
+    <Modal
+      title={t('editor:layout.filebrowser.renameFile')}
+      className="w-[50vw] max-w-2xl"
+      onSubmit={handleSubmit}
+      onClose={PopoverState.hidePopupover}
+    >
+      <Input value={newFileName.value} onChange={(event) => newFileName.set(event.target.value)} />
+    </Modal>
+  )
+}

packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx

@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { fileBrowserPath, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import {
   FilesViewModeSettings,
@@ -35,34 +36,17 @@ import { getSpawnPositionAtCenter } from '@etherealengine/editor/src/functions/s
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
-import React, { MouseEventHandler, MutableRefObject, useEffect, useState } from 'react'
+import React, { MouseEventHandler, MutableRefObject, useEffect } from 'react'
 import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import { useTranslation } from 'react-i18next'
 import { IoIosArrowForward } from 'react-icons/io'
 import { VscBlank } from 'react-icons/vsc'
 import { Vector3 } from 'three'
 import Button from '../../../../../primitives/tailwind/Button'
-import Input from '../../../../../primitives/tailwind/Input'
 import { ContextMenu } from '../../../layout/ContextMenu'
 import { FileIcon } from '../icon'
-
-const RenameInput = ({ fileName, onNameChanged }: { fileName: string; onNameChanged: (newName: string) => void }) => {
-  const newFileName = useHookstate(fileName)
-
-  return (
-    <Input
-      autoFocus={true}
-      value={newFileName.value}
-      onChange={(event) => newFileName.set(event.target.value)}
-      onKeyUp={async (e) => {
-        if (e.key == 'Enter') {
-          onNameChanged(newFileName.value)
-        }
-      }}
-    />
-  )
-}
+import RenameFileModal from './RenameFileModal'
 
 export const canDropItemOverFolder = (folderName: string) =>
   folderName.endsWith('/assets') ||
@@ -103,8 +87,6 @@ export const FileTableWrapper = ({ wrap, children }: { wrap: boolean; children:
 export const FileTableListBody = ({
   file,
   onContextMenu,
-  isRenaming,
-  onNameChanged,
   onClick,
   onDoubleClick,
   modifiedDate,
@@ -114,8 +96,6 @@ export const FileTableListBody = ({
 }: {
   file: FileDataType
   onContextMenu: React.MouseEventHandler
-  isRenaming: boolean
-  onNameChanged: (newName: string) => void
   onClick?: MouseEventHandler<HTMLDivElement>
   onDoubleClick?: MouseEventHandler<HTMLDivElement>
   modifiedDate?: string
@@ -136,7 +116,7 @@ export const FileTableListBody = ({
       <span className="flex max-h-7 flex-row items-center gap-2 text-[#e7e7e7]">
         {file.isFolder ? <IoIosArrowForward /> : <VscBlank />}
         <FileIcon thumbnailURL={null} type={file.type} isFolder={file.isFolder} />
-        {isRenaming ? <RenameInput fileName={file.name} onNameChanged={onNameChanged} /> : file.fullName}
+        {file.fullName}
       </span>
     ),
     type: file.type.toUpperCase(),
@@ -148,8 +128,8 @@ export const FileTableListBody = ({
       key={file.key}
       className={`h-[${fontSize * 3}px] text-[${fontSize}px] text-[#a3a3a3] hover:bg-theme-surfaceInput`}
       onContextMenu={onContextMenu}
-      onClick={isRenaming ? () => {} : onClick}
-      onDoubleClick={isRenaming ? () => {} : onDoubleClick}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
       ref={(ref) => dragFn(dropFn(ref))}
     >
       {availableTableColumns
@@ -165,10 +145,8 @@ export const FileTableListBody = ({
 
 type FileGridItemProps = {
   item: FileDataType
-  isRenaming: boolean
   onDoubleClick?: MouseEventHandler<HTMLDivElement>
   onClick?: MouseEventHandler<HTMLDivElement>
-  onNameChanged: (newName: string) => void
 }
 
 export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
@@ -196,14 +174,9 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
           color="text-[#375DAF]"
         />
       </div>
-      {props.isRenaming ? (
-        <></>
-      ) : (
-        /*<RenameInput fileName={props.item.name} onNameChanged={props.onNameChanged} />*/
-        <div className="text-secondary mb-[8px] line-clamp-1 w-full text-wrap break-all text-[14px]">
-          {props.item.fullName}
-        </div>
-      )}
+      <div className="text-secondary mb-[8px] line-clamp-1 w-full text-wrap break-all text-[14px]">
+        {props.item.fullName}
+      </div>
     </div>
   )
 }
@@ -220,7 +193,6 @@ type FileBrowserItemType = {
   deleteContent: (contentPath: string, type: string) => void
   onClick: (params: FileDataType) => void
   dropItemsOnPanel: (data: any, dropOn?: FileDataType) => void
-  moveContent: (oldName: string, newName: string, oldPath: string, newPath: string, isCopy?: boolean) => Promise<void>
   addFolder: () => void
   isListView: boolean
   staticResourceModifiedDates: Record<string, string>
@@ -237,7 +209,6 @@ export function FileBrowserItem({
   deleteContent,
   onClick,
   dropItemsOnPanel,
-  moveContent,
   isFilesLoading,
   addFolder,
   isListView,
@@ -247,7 +218,6 @@ export function FileBrowserItem({
   const [anchorPosition, setAnchorPosition] = React.useState<any>(undefined)
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
-  const [renamingAsset, setRenamingAsset] = useState(false)
 
   const fileService = useMutation(fileBrowserPath)
 
@@ -339,17 +309,6 @@ export function FileBrowserItem({
     handleClose()
   }
 
-  const onNameChanged = async (fileName: string): Promise<void> => {
-    setRenamingAsset(false)
-
-    await moveContent(item.fullName, item.isFolder ? fileName : `${fileName}.${item.type}`, item.path, item.path, false)
-  }
-
-  const rename = () => {
-    setRenamingAsset(true)
-    handleClose()
-  }
-
   const [_dragProps, drag, preview] = disableDnD
     ? [undefined, undefined, undefined]
     : useDrag(() => ({
@@ -382,8 +341,6 @@ export function FileBrowserItem({
           onContextMenu={handleContextMenu}
           onClick={onClickItem}
           onDoubleClick={onClickItem}
-          isRenaming={renamingAsset}
-          onNameChanged={onNameChanged}
           modifiedDate={staticResourceModifiedDates[item.key]}
           drop={drop}
           isOver={isOver}
@@ -393,15 +350,7 @@ export function FileBrowserItem({
         <div ref={drop} style={{ border: isOver ? '3px solid #ccc' : '' }}>
           <div ref={drag}>
             <div onContextMenu={handleContextMenu}>
-              {
-                <FileGridItem
-                  item={item}
-                  onClick={onClickItem}
-                  onDoubleClick={onClickItem}
-                  isRenaming={renamingAsset}
-                  onNameChanged={onNameChanged}
-                />
-              }
+              {<FileGridItem item={item} onClick={onClickItem} onDoubleClick={onClickItem} />}
             </div>
           </div>
         </div>
@@ -445,7 +394,12 @@ export function FileBrowserItem({
         <Button variant="outline" size="small" fullWidth disabled={!currentContent.current} onClick={pasteContent}>
           {t('editor:layout.filebrowser.pasteAsset')}
         </Button>
-        <Button variant="outline" size="small" fullWidth onClick={rename}>
+        <Button
+          variant="outline"
+          size="small"
+          fullWidth
+          onClick={() => PopoverState.showPopupover(<RenameFileModal file={item} />)}
+        >
           {t('editor:layout.filebrowser.renameAsset')}
         </Button>
         <Button variant="outline" size="small" fullWidth onClick={deleteContentCallback}>

packages/ui/src/components/editor/panels/Files/container/index.tsx

@@ -420,7 +420,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
                   item={file}
                   disableDnD={props.disableDnD}
                   onClick={onSelect}
-                  moveContent={moveContent}
                   deleteContent={handleConfirmDelete}
                   currentContent={currentContentRef}
                   setOpenPropertiesModal={openProperties.set}

packages/ui/src/components/editor/panels/Properties/container/index.tsx

@@ -110,7 +110,7 @@ const EntityEditor = (props: { entityUUID: EntityUUID; multiEdit: boolean }) =>
         anchorPosition={anchorPosition}
         className="h-[60%] w-full min-w-[300px] overflow-y-auto"
       >
-        {<ElementList />}
+        <ElementList />
       </Popover>
       <TransformPropertyGroup entity={entity} />
       {components.map((c, i) => (