giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor interaction links rendering in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-03-31 06:49:10 +02:00
parent eea783d44a
commit 17fbe2fadc
1 changed files with 6 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/app/App.tsx
View File

@@ -2892,146 +2892,12 @@ export function App({ store, initialStatusMessage }: AppProps) {
</div>
</div>
<div className="form-section">
<div className="label">Links</div>
{selectedTriggerVolumeLinks.length === 0 ? (
<div className="outliner-empty">No trigger links authored yet.</div>
) : (
<div className="outliner-list">
{selectedTriggerVolumeLinks.map((link, index) => (
<div key={link.id} className="outliner-item">
<div className="outliner-item__select">
<span className="outliner-item__title">{`Link ${index + 1}`}</span>
<span className="outliner-item__meta">{getInteractionActionLabel(link)}</span>
</div>
<div className="form-section">
<div className="vector-inputs vector-inputs--two">
<label className="form-field">
<span className="label">Trigger</span>
<select
data-testid={`interaction-link-trigger-${link.id}`}
className="text-input"
value={link.trigger}
onChange={(event) =>
updateInteractionLinkTrigger(link, event.currentTarget.value as InteractionTriggerKind)
}
>
<option value="enter">On Enter</option>
<option value="exit">On Exit</option>
</select>
</label>
<label className="form-field">
<span className="label">Action</span>
<select
data-testid={`interaction-link-action-${link.id}`}
className="text-input"
value={link.action.type}
onChange={(event) =>
updateInteractionLinkActionType(link, event.currentTarget.value as InteractionLink["action"]["type"])
}
>
<option value="teleportPlayer">Teleport Player</option>
<option value="toggleVisibility">Toggle Visibility</option>
</select>
</label>
</div>
</div>
{link.action.type === "teleportPlayer" ? (
<div className="form-section">
<label className="form-field">
<span className="label">Target</span>
<select
data-testid={`interaction-link-teleport-target-${link.id}`}
className="text-input"
value={link.action.targetEntityId}
onChange={(event) => updateTeleportInteractionLinkTarget(link, event.currentTarget.value)}
>
{teleportTargetOptions.map(({ entity, label }) => (
<option key={entity.id} value={entity.id}>
{label}
</option>
))}
</select>
</label>
</div>
) : (
<div className="form-section">
<div className="vector-inputs vector-inputs--two">
<label className="form-field">
<span className="label">Brush</span>
<select
data-testid={`interaction-link-visibility-target-${link.id}`}
className="text-input"
value={link.action.targetBrushId}
onChange={(event) => updateVisibilityInteractionLinkTarget(link, event.currentTarget.value)}
>
{visibilityBrushOptions.map(({ brush, label }) => (
<option key={brush.id} value={brush.id}>
{label}
</option>
))}
</select>
</label>
<label className="form-field">
<span className="label">Mode</span>
<select
data-testid={`interaction-link-visibility-mode-${link.id}`}
className="text-input"
value={getVisibilityModeSelectValue(link.action.visible)}
onChange={(event) =>
updateVisibilityInteractionMode(
link,
event.currentTarget.value as ReturnType<typeof getVisibilityModeSelectValue>
)
}
>
<option value="toggle">Toggle</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</label>
</div>
</div>
)}
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid={`delete-interaction-link-${link.id}`}
onClick={() => handleDeleteInteractionLink(link.id)}
>
Delete Link
</button>
</div>
</div>
))}
</div>
)}
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid="add-trigger-teleport-link"
disabled={teleportTargetOptions.length === 0}
onClick={handleAddTeleportInteractionLink}
>
Add Teleport Link
</button>
<button
className="toolbar__button"
type="button"
data-testid="add-trigger-visibility-link"
disabled={visibilityBrushOptions.length === 0}
onClick={handleAddVisibilityInteractionLink}
>
Add Visibility Link
</button>
</div>
</div>
{renderInteractionLinksSection(
selectedTriggerVolume,
selectedTriggerVolumeLinks,
"add-trigger-teleport-link",
"add-trigger-visibility-link"
)}
</>
) : null}