Skip to content

Commit

Permalink
add entity Name editing from EntityInspector
Browse files Browse the repository at this point in the history
  • Loading branch information
nicoecheza committed Sep 26, 2024
1 parent 7e87395 commit 3bab9a1
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@
gap: 4px;
}

.EntityHeader .title {
display: flex;
align-items: center;
width: 100%;
}

.EntityHeader .title > svg {
margin-left: 5px;
cursor: pointer;
}

.EntityHeader > .RightContent {
display: flex;
flex-grow: 1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { AiOutlinePlus as AddIcon } from 'react-icons/ai'
import { VscSettings as SettingsIcon, VscDebugRestart as RevertIcon, VscClose as CloseIcon } from 'react-icons/vsc'
import { IoMdInformationCircleOutline as InfoIcon } from 'react-icons/io'
import { MdOutlineDriveFileRenameOutline as RenameIcon } from 'react-icons/md'

import { Entity } from '@dcl/ecs'

Expand All @@ -16,6 +17,7 @@ import { analytics, Event } from '../../../lib/logic/analytics'
import { EditorComponentsTypes } from '../../../lib/sdk/components'
import { SdkContextEvents, SdkContextValue } from '../../../lib/sdk/context'

import { Edit as EditInput } from '../../Tree/Edit'
import { Button } from '../../Button'
import { Modal } from '../../Modal'
import { Dropdown } from '../../ui'
Expand Down Expand Up @@ -57,6 +59,7 @@ export default React.memo(
)
const [label, setLabel] = useState<string | null>()
const [modal, setModal] = useState<ModalState>({ isOpen: false })
const [editMode, setEditMode] = useState(false)

useEffect(() => {
setLabel(getLabel(sdk, entity))
Expand Down Expand Up @@ -286,6 +289,20 @@ export default React.memo(
return options.filter((option) => !option.id || availableIds.has(option.id))
}, [sdk, availableComponents, isComponentDisabled, handleClickAddComponent])

const quitEditMode = useCallback(() => setEditMode(false), [])
const enterEditMode = useCallback(() => setEditMode(true), [])

const handleRenameEntity = useCallback(
async (value: string) => {
if (isRoot(entity)) return;

Check failure on line 297 in packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx

View workflow job for this annotation

GitHub Actions / lint

Delete `;`
const { Name } = sdk.components
sdk.operations.updateValue(Name, entity, { value })
await sdk.operations.dispatch()
quitEditMode()
},
[entity, sdk]
)

const handleRemoveEntity = useCallback(async () => {
sdk.operations.removeEntity(entity)
await sdk.operations.dispatch()
Expand Down Expand Up @@ -402,7 +419,16 @@ export default React.memo(

return (
<div className="EntityHeader">
{label}
<div className="title">
{!editMode ? (
<>
{label}
{!editMode && !isRoot(entity) ? <RenameIcon onClick={enterEditMode} /> : null}
</>
) : typeof label === 'string' ? (
<EditInput value={label} onCancel={quitEditMode} onSubmit={handleRenameEntity} />
) : null}
</div>
<div className="RightContent">
{componentOptions.some((option) => !option.header) ? (
<Dropdown className="AddComponent" options={componentOptions} trigger={<AddIcon />} />
Expand Down
4 changes: 2 additions & 2 deletions packages/@dcl/inspector/src/components/Tree/Edit/Edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Props } from './types'
import './Edit.css'

export function Edit({ value, onCancel, onSubmit }: Props) {
const [tmpValue, setTmpValue] = useState('')
const [tmpValue, setTmpValue] = useState(value)
const [isOpen, setIsOpen] = useState(false)

const handleModalClose = useCallback(() => {
Expand All @@ -31,7 +31,7 @@ export function Edit({ value, onCancel, onSubmit }: Props) {

return (
<>
<Modal isOpen={isOpen} onRequestClose={handleModalClose} className="EditTree">
<Modal isOpen={isOpen && tmpValue !== value} onRequestClose={handleModalClose} className="EditTree">
<h2>⚠️ Rename</h2>
<span>
Do you want to rename "{value}" to "{tmpValue}"
Expand Down
4 changes: 2 additions & 2 deletions packages/@dcl/inspector/src/hooks/sdk/useEntityComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { SdkContextValue } from '../../lib/sdk/context'
import { useSdk } from './useSdk'
import { CoreComponents } from '../../lib/sdk/components'
import { getConfig } from '../../lib/logic/config'
import { CAMERA, PLAYER, ROOT } from '../../lib/sdk/tree'
import { CAMERA, EDITOR_ENTITIES, PLAYER, ROOT } from '../../lib/sdk/tree'

export const DISABLED_COMPONENTS: string[] = [
CoreComponents.ANIMATOR,
Expand All @@ -33,7 +33,7 @@ export const ROOT_COMPONENTS: Record<Entity, string[]> = {
}

export function isRoot(entity: Entity) {
return entity === ROOT || entity === PLAYER || entity === CAMERA
return EDITOR_ENTITIES.includes(entity)
}

export function getEnabledComponents(disabledComponents = DISABLED_COMPONENTS) {
Expand Down
6 changes: 3 additions & 3 deletions packages/@dcl/inspector/src/lib/sdk/tree.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Entity, engine, IEngine } from '@dcl/ecs'
import { EditorComponents } from './components'

export const ROOT = engine.RootEntity
export const PLAYER = engine.PlayerEntity
export const CAMERA = engine.CameraEntity
export const EDITOR_ENTITIES = [engine.RootEntity, engine.PlayerEntity, engine.CameraEntity]

export const [ROOT, PLAYER, CAMERA] = EDITOR_ENTITIES

/**
* Returns a tree in the shape of Map<Entity, Set<Entity>> where the key is the parent and the value is the children
Expand Down

0 comments on commit 3bab9a1

Please sign in to comment.