Show scene title and allow editing from editor

[kfarr]

As a user creating, saving or sharing a scene I'd like to be able to name or rename the scene to aid in sharing and organizing my scenes.

From the 3dstreet editor -- a scene name should be visible and editable in the normal viewport GUI at a level of UI importance similar to the camera switcher or help menu

• The scene title looks like regular text and when hovered shows a pencil icon on the right
• The scene title uses elippses for overflow and is ~50% of screen width in editor until tablet breakpoint at which it changes to 80% (TBD)
• When clicked the scene title turns editable (such as using input field) and a user can press enter or click the checkbox button to save, or press escape or click the "x" button to cancel and keep existing title.

Storing title:

• use metadata component on scene entity add metadata component to scene 3dstreet#335

Ideally the editor also subscribes to changes to this component property value. How to do this?

Design for editor
https://www.figma.com/file/W9jid3A0jgssnIKBFEvG38/3DStreet-2022?type=design&node-id=5461-59985&mode=design&t=0PBswixNj1m6p5ZK-4

Pasted for convenience:

How to get scene name - state storage notes:

• for now we are using a custom A-Frame component metadata on the scene entity to store global state of sceneId (doc id) and sceneTitle (title)
• When the scene title is edited in React 3DStreet Editor, set the scene title in the same general fashion as setting sceneId using AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', localSceneTitleVariable);
• Question for Rosty: if the scene title is edited in A-Frame (if the value of metadata sceneTitle changes) how to set within toolbar or notify react app? Maybe emit an event?

[kfarr]

Eng feedback:

• mouse cursor type "pointer" when hovering over pencil icon
• hover style for title and pencil - ensure they are lighter when hovered similar to other components
• when visible (while editing a title) the "x" and "checkmark" need hover styles as well
• pressing enter key while editing should save (as though pressing check)
• press escape key while editing should revert changes (as though pressing x)

Not to resolve, question for design:

• invisible on white background - design question how to handle? stroke on letters? shaded background, or only while hovering?

[kfarr]

closed by #302