Improve sidebar

Author: ricktu288

src/app/components/sidebar/ModuleEditor.vue

@@ -87,6 +87,8 @@
               :max="item.max"
               :step="item.step"
               :default-val="item.defaultVal"
+              :focus-name="item.id === paramFocusNameId"
+              @focus-name-done="paramFocusNameId = null"
               @update:name="(v) => onParamNameUpdate(index, v)"
               @update:min="(v) => onParamMinUpdate(index, v)"
               @update:max="(v) => onParamMaxUpdate(index, v)"
@@ -125,6 +127,8 @@
               :module-name="moduleName"
               :name="item.name"
               :expression="item.expression"
+              :focus-name="item.id === variableFocusNameId"
+              @focus-name-done="variableFocusNameId = null"
               @update:name="(v) => onVarNameUpdate(index, v)"
               @update:expression="(v) => onVarExprUpdate(index, v)"
               @commit="commitVariableDefs"
@@ -427,7 +431,7 @@ function serializeVarDef(name, expression) {
     return e
   }
   if (!e) {
-    return n
+    return `${n} =`
   }
   return `${n} = ${e}`
 }
@@ -481,10 +485,14 @@ export default {
     })
     const paramItems = ref([])
     const paramActiveId = ref(null)
+    /** Row id whose name field should receive focus after create (cleared by child emit). */
+    const paramFocusNameId = ref(null)
     /** True only after an explicit param row click; cleared on row mouse-leave so hover never re-highlights the slider. */
     const paramSliderHighlightActive = ref(false)
     const variableItems = ref([])
     const variableActiveId = ref(null)
+    /** Row id whose name field should receive focus after create (cleared by child emit). */
+    const variableFocusNameId = ref(null)
     const maxLoopLengthInput = ref(String(DEFAULT_MODULE_MAX_LOOP_LENGTH))
     const maxLoopLengthCommittedSnapshot = ref(maxLoopLengthInput.value)
 
@@ -1135,6 +1143,7 @@ export default {
       if (last) {
         clearOtherModuleSidebarLists(MODULE_EDITOR_LIST.PARAMS)
         paramActiveId.value = last.id
+        paramFocusNameId.value = last.id
         paramSliderHighlightActive.value = true
         applyModuleParamHighlight(last.name)
       }
@@ -1196,6 +1205,7 @@ export default {
       if (last) {
         clearOtherModuleSidebarLists(MODULE_EDITOR_LIST.VARIABLES)
         variableActiveId.value = last.id
+        variableFocusNameId.value = last.id
       }
     }
 
@@ -1583,8 +1593,10 @@ export default {
       handleControlPointSelect,
       paramItems,
       paramActiveId,
+      paramFocusNameId,
       variableItems,
       variableActiveId,
+      variableFocusNameId,
       commitParamDefs,
       onParamNameUpdate,
       onParamMinUpdate,

src/app/components/sidebar/ModuleParamListItem.vue

@@ -23,6 +23,7 @@
     @mouseleave="onItemMouseLeave"
   >
     <input
+      ref="nameRef"
       class="module-param-input module-param-input--name"
       :value="name"
       :style="{ width: Math.max(name.length, 1) + 'ch' }"
@@ -85,7 +86,7 @@
 </template>
 
 <script>
-import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import * as bootstrap from 'bootstrap'
 import { useSceneStore } from '../../store/scene'
 import { app } from '../../services/app'
@@ -99,10 +100,12 @@ export default {
     min: { type: String, default: '0' },
     step: { type: String, default: '1' },
     max: { type: String, default: '0' },
-    defaultVal: { type: String, default: '0' }
+    defaultVal: { type: String, default: '0' },
+    focusName: { type: Boolean, default: false }
   },
-  emits: ['update:name', 'update:min', 'update:step', 'update:max', 'update:defaultVal', 'commit'],
+  emits: ['update:name', 'update:min', 'update:step', 'update:max', 'update:defaultVal', 'commit', 'focus-name-done'],
   setup(props, { emit }) {
+    const nameRef = ref(null)
     const tooltipHostRef = ref(null)
     const sceneStore = useSceneStore()
     const editorSelectedObjIndex = ref(-1)
@@ -217,6 +220,27 @@ export default {
       })
     }
 
+    const focusNameInput = () => {
+      const el = nameRef.value
+      if (!el) {
+        return
+      }
+      el.focus()
+      el.select()
+      emit('focus-name-done')
+    }
+
+    watch(
+      () => props.focusName,
+      (shouldFocus) => {
+        if (!shouldFocus) {
+          return
+        }
+        nextTick(focusNameInput)
+      },
+      { immediate: true, flush: 'post' }
+    )
+
     const syncEditorSelection = () => {
       editorSelectedObjIndex.value = app.editor?.selectedObjIndex ?? -1
     }
@@ -246,6 +270,7 @@ export default {
     })
 
     return {
+      nameRef,
       tooltipHostRef,
       onRowFocusOut,
       onEnterCommit,

src/app/components/sidebar/ModuleVariableListItem.vue

@@ -23,7 +23,7 @@
         :value="name"
         rows="1"
         spellcheck="false"
-        @keydown.stop
+        @keydown="onNameKeydown"
         @keydown.enter.prevent="onEnterCommit"
         @input="onNameInput"
         @focus="onNameFocus"
@@ -81,9 +81,10 @@ export default {
   props: {
     moduleName: { type: String, default: '' },
     name: { type: String, default: '' },
-    expression: { type: String, default: '' }
+    expression: { type: String, default: '' },
+    focusName: { type: Boolean, default: false }
   },
-  emits: ['update:name', 'update:expression', 'commit'],
+  emits: ['update:name', 'update:expression', 'commit', 'focus-name-done'],
   setup(props, { emit }) {
     const nameRef = ref(null)
     const exprRef = ref(null)
@@ -218,6 +219,30 @@ export default {
       reshowTooltipIfFocused()
     }
 
+    const focusNameInput = () => {
+      const el = nameRef.value
+      if (!el) {
+        return
+      }
+      el.focus()
+      el.select()
+      emit('focus-name-done')
+    }
+
+    watch(
+      () => props.focusName,
+      (shouldFocus) => {
+        if (!shouldFocus) {
+          return
+        }
+        nextTick(() => {
+          focusNameInput()
+          autoResize()
+        })
+      },
+      { immediate: true, flush: 'post' }
+    )
+
     const autoResize = () => {
       for (const el of [nameRef.value, exprRef.value]) {
         applyTextareaAutoResize(el)
@@ -234,6 +259,20 @@ export default {
       nextTick(autoResize)
     }
 
+    const onNameKeydown = (e) => {
+      e.stopPropagation()
+      if (e.key !== '=') {
+        return
+      }
+      e.preventDefault()
+      const el = exprRef.value
+      if (!el) {
+        return
+      }
+      el.focus()
+      el.select()
+    }
+
     const onExprFocus = (e) => {
       exprFocused.value = true
       autoResize()
@@ -324,6 +363,7 @@ export default {
       onEnterCommit,
       onNameFocus,
       onNameBlur,
+      onNameKeydown,
       onExprFocus,
       onExprBlur,
       onModuleInstancesMouseLeave,

src/app/components/sidebar/VisualTab.vue

@@ -199,6 +199,27 @@ export default {
       document.dispatchEvent(new CustomEvent('clearVisualEditorSelection'))
     }
 
+    // Firefox may scroll a visible overflow panel on arrow keys even when focus is on the
+    // canvas/body (Chromium does not). Block that default unless focus is inside the panel.
+    const onVisualSubtabArrowScrollKey = (event) => {
+      if (event.keyCode < 37 || event.keyCode > 40) {
+        return
+      }
+      const panel =
+        activeTabId.value === 'scene'
+          ? scenePanelEl.value
+          : activeModuleName.value != null
+            ? modulePanelEl.value
+            : null
+      if (!panel?.offsetParent) {
+        return
+      }
+      const active = document.activeElement
+      if (!active || !panel.contains(active)) {
+        event.preventDefault()
+      }
+    }
+
     // If the selected module disappears, fall back to Scene.
     watch(moduleNames, (names) => {
       if (activeTabId.value === 'scene') return
@@ -212,12 +233,14 @@ export default {
       document.addEventListener('selectVisualModuleTab', handleSelectModuleTab)
       document.addEventListener('selectVisualSceneTab', handleSelectSceneTab)
       document.addEventListener('applyVisualNewModule', handleApplyVisualNewModule)
+      document.addEventListener('keydown', onVisualSubtabArrowScrollKey, true)
     })
 
     onUnmounted(() => {
       document.removeEventListener('selectVisualModuleTab', handleSelectModuleTab)
       document.removeEventListener('selectVisualSceneTab', handleSelectSceneTab)
       document.removeEventListener('applyVisualNewModule', handleApplyVisualNewModule)
+      document.removeEventListener('keydown', onVisualSubtabArrowScrollKey, true)
     })
 
     return {

src/app/components/sidebar/controls/FormulaInput.vue

@@ -309,7 +309,7 @@ export default {
           autoResize()
         }
 
-        if (parentUnchanged && draft !== synced) {
+        if (rejectedNonEmptyEdit) {
           return
         }
         const el = textareaRef.value