Inspector behaviour

browser/vue-flow/src/components/flow/manager.vue

@@ -39,7 +39,7 @@
           :selected="nodeSelection[n.id]?true:false"
           @nodePointerDown.prevent="nodePointerDown($event,i)"
           @socketPointerDown="socketPointerDown(n.id,...arguments)"
-          @nodeDoubleClick="$emit('nodeInspect',n)"
+          @nodeDoubleClick="$emit('nodeDblClick',n)"
         />
         <!-- mouse link-->
         <flow-link

browser/vue-flow/src/components/main.vue

@@ -51,7 +51,7 @@
           <div class="flow-panel__container">
             <div class="flow-panel__selector">
               <button @click="panel='palette'">Funcs</button>
-              <button @click="panel='inspector'">Inspector</button>
+              <button @click="panel='inspector';nodeInspect = nodeActive">Inspector</button>
             </div>
             <transition name="fade">
               <flow-funcs
@@ -59,15 +59,18 @@
                 :registry="registry"
                 @toggleResizeable="funcsResizeable=!funcsResizeable"
                 @toggleStickySockets="managerStickySockets=!managerStickySockets"
-            /></transition>
+              />
+            </transition>
             <transition name="fade">
               <flow-inspector
+                ref="inspector"
                 v-show="panel=='inspector'"
                 :registry="registry"
                 :activity="activity"
                 :node-inspect="nodeInspect"
                 @nodeProcess="nodeProcess($event)"
-            /></transition>
+              />
+            </transition>
           </div>
           <flow-manager
             ref="flowManager"
@@ -75,6 +78,7 @@
             :registry="registry"
             @funcsPanelToggle="funcsActive=!funcsActive"
             @nodeInspect="nodeInspectStart(...arguments)"
+            @nodeDblClick="nodeInspectStart(...arguments,true)"
             @documentSave="documentSave"
 
             width="100%"
@@ -184,6 +188,7 @@ export default {
 
       panel: 'palette',
 
+      nodeActive: null,
       nodeInspect: null,
 
       funcsSize: '250px',
@@ -249,15 +254,22 @@ export default {
     })
   },
   methods: {
-    nodeInspectStart (node) { // node
+    nodeInspectStart (node, changePane) { // node
+      this.nodeActive = node
+      if (changePane) this.panel = 'inspector'
+      if (this.panel !== 'inspector') {
+        return
+      }
       this.nodeInspect = node
-      this.panel = 'inspector'
+
+      // if (!changePane) { return }
       this.$nextTick(() => {
         // panel input
-        if (!this.$refs.modalInput) { return }
-        let targetInput = this.$refs.modalInput
-        if (this.$refs.nodeInspectProp && this.$refs.nodeInspectProp.length > 0) {
-          targetInput = this.$refs.nodeInspectProp[0]
+        if (!this.$refs.inspector) { return }
+        const insp = this.$refs.inspector
+        let targetInput = this.$refs.inspector.$refs.labelInput
+        if (insp.$refs.props && insp.$refs.props.length > 0) {
+          targetInput = insp.$refs.props[0]
         }
 
         targetInput.setSelectionRange(0, targetInput.value.length)

browser/vue-flow/src/components/panel-inspector.vue

@@ -51,17 +51,15 @@
           <div class="flow-inspector__param" v-for="(v,k) in nodeInspect.prop">
             <label>{{ k }}</label>
             <input
-              ref="nodeInspectProp"
+              ref="props"
               type="text"
-              @keydown.prevent.stop.enter="nodeInspect=null;"
-              @keydown.esc="nodeInspect=null"
               v-model="nodeInspect.prop[k]">
           </div>
         </div>
 
         <div class="flow-inspector__area  flow-inspector--static">
           <label>label</label>
-          <input type="text" v-model="nodeInspect.label">
+          <input ref="labelInput" type="text" v-model="nodeInspect.label">
         </div>
       <!-- STATIC PARAM -->
       </div>
@@ -88,6 +86,11 @@ export default {
     nodeInspect: {type: Object, default: null},
     activity: {type: Object, default: null},
     registry: {type: Object, default: null}
+  },
+  watch: {
+    nodeInspect () {
+      this.$nextTick(() => this.$forceUpdate())
+    }
   }
 }
 </script>