Move picker responsibility to key component

5 files changed, 114 insertions, 90 deletions

diff --git a/application/components/app.vue b/application/components/app.vue
index 32d4c84..a6de16a 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -49,7 +49,7 @@ export default {
     }
   },
   methods: {
-    handleKeymapUpdated(keymap) {
+    handleUpdateKeymap(keymap) {
       Object.assign(this.keymap, keymap)
     },
     handleGithubAuthorize() {
@@ -73,11 +73,7 @@ export default {
 
 <template>
   <div>
-    <keymap
-      :layout="layout"
-      :keymap="keymap"
-      @keymap-updated="handleKeymapUpdated"
-    />
+    <keymap :layout="layout" :keymap="keymap" @update="handleUpdateKeymap" />
     <terminal
       :open="terminalOpen"
       :socket="socket"
diff --git a/application/components/key.vue b/application/components/key.vue
index 991585c..90c45c8 100644
--- a/application/components/key.vue
+++ b/application/components/key.vue
@@ -16,7 +16,7 @@
       v-if="parsed.behaviour"
       v-text="parsed.behaviour.code"
       class="behaviour-binding"
-      @click.stop="handleSelectBinding"
+      @click.stop="handleSelectBehaviour"
     />
     <key-paramlist
       :root="true"
@@ -24,20 +24,52 @@
       :values="parsed.params"
       :onSelect="handleSelectCode"
     />
+    <teleport to="body">
+      <search
+        v-if="editing"
+        :target="editing.target"
+        :code="editing.code"
+        :param="editing.param"
+        :targets="editing.targets"
+        @select="handleSelectValue"
+        @cancel="editing = null"
+      />
+    </teleport>
   </div>
 </template>
 
 <script>
+import pick from 'lodash/pick'
+
 import KeyValue from './key-value.vue'
 import KeyParamlist from './key-paramlist.vue'
+import Search from './search.vue'
+
+import { updateKeyCode } from '../keymap'
 
 export default {
-  props: ['position', 'rotation', 'size', 'label', 'parsed', 'mapping'],
-  emits: ['select-key'],
+  props: [
+    'position',
+    'rotation',
+    'size',
+    'label',
+    'parsed',
+    'mapping',
+    'layerIndex',
+    'keyIndex'
+  ],
+  emits: ['update'],
   components: {
     'key-value': KeyValue,
-    'key-paramlist': KeyParamlist
+    'key-paramlist': KeyParamlist,
+    'search': Search
+  },
+  data () {
+    return {
+      editing: null
+    }
   },
+  inject: ['getSearchTargets', 'sources'],
   computed: {
     uClass() { return `key-${this.size.u}u` },
     hClass() { return `key-${this.size.h}h` },
@@ -45,8 +77,8 @@ export default {
       // TODO: fix padding
       const x = this.position.x * 65
       const y = this.position.y * 65
-      const u = this.size.u * 60;
-      const h = this.size.h * 60;
+      const u = this.size.u * 60 + 5 * (this.size.u - 1);
+      const h = this.size.h * 60 + 5 * (this.size.h - 1);
       const rx = (this.position.x - (this.rotation.x || this.position.x)) * -65
       const ry = (this.position.y - (this.rotation.y || this.position.y)) * -65
 
@@ -94,21 +126,25 @@ export default {
       event.target.classList.remove('highlight')
     },
     handleSelectCode(event) {
-      this.$emit('select-key', {
-        layer: this.mapping.layer,
-        index: this.mapping.index,
-        ...event
-      })
+      this.editing = pick(event, ['target', 'codeIndex', 'code', 'param'])
+      this.editing.targets = this.getSearchTargets(this.editing.param)
     },
-    handleSelectBinding(event) {
-      this.$emit('select-key', {
-        layer: this.mapping.layer,
-        index: this.mapping.index,
+    handleSelectBehaviour(event) {
+      this.editing = {
         target: event.target,
+        targets: this.getSearchTargets('behaviour'),
         codeIndex: 0,
         code: this.parsed.bindCode,
         param: 'behaviour'
-      })
+      }
+    },
+    handleSelectValue(source) {
+      const { parsed, sources } = this
+      const { codeIndex } = this.editing
+      const updated = updateKeyCode({ parsed }, codeIndex, source, sources)
+
+      this.editing = null
+      this.$emit('update', updated)
     }
   }
 }
diff --git a/application/components/keyboard-layout.vue b/application/components/keyboard-layout.vue
index 6300650..4bc0ac2 100644
--- a/application/components/keyboard-layout.vue
+++ b/application/components/keyboard-layout.vue
@@ -10,7 +10,7 @@
       :label="key.label"
       :mapping="keys[i]"
       :parsed="keys[i].parsed"
-      @select-key="onSelectKey"
+      @update="handleUpdateBind(i, $event)"
     >
     </key-thing>
   </div>
@@ -20,7 +20,7 @@
 import Key from './key.vue'
 export default {
   props: ['layout', 'keys'],
-  inject: ['onSelectKey'],
+  emits: ['update'],
   components: {
     'key-thing': Key,
   },
@@ -36,6 +36,13 @@ export default {
     size(key) {
       const { u, h } = key
       return { u, h }
+    },
+    handleUpdateBind(keyIndex, { binding, parsed }) {
+      this.$emit('update', [
+        ...this.keys.slice(0, keyIndex),
+        { ...this.keys[keyIndex], binding, parsed },
+        ...this.keys.slice(keyIndex + 1)
+      ])
     }
   }
 }
diff --git a/application/components/keymap.vue b/application/components/keymap.vue
index 7fdf12c..b2b49d2 100644
--- a/application/components/keymap.vue
+++ b/application/components/keymap.vue
@@ -6,11 +6,9 @@ import times from 'lodash/times'
 
 import KeyboardLayout from './keyboard-layout.vue'
 import LayerSelector from './layer-selector.vue'
-import Search from './search.vue'
 
 import {
   parseKeyBinding,
-  updateKeyCode,
   encode
 } from '../keymap'
 
@@ -18,11 +16,10 @@ export default {
   name: 'keymap',
   components: {
     'layer-selector': LayerSelector,
-    'keyboard-layout': KeyboardLayout,
-    'search': Search
+    'keyboard-layout': KeyboardLayout
   },
   props: ['layout', 'keymap'],
-  emits: ['keymap-updated'],
+  emits: ['update'],
   inject: [
     'keycodes',
     'behaviours',
@@ -31,7 +28,8 @@ export default {
   ],
   provide() {
     return {
-      onSelectKey: this.handleSelectKey
+      getSearchTargets: this.getSearchTargets,
+      sources: this.sources
     }
   },
   data() {
@@ -41,8 +39,11 @@ export default {
     }
   },
   computed: {
-    layers() {
-      return this.keymap.layers.map((_, i) => ({ code: i, description: `Layer ${i}` }))
+    availableLayers() {
+      return !isEmpty(this.keymap) && this.keymap.layers.map((_, i) => ({
+        code: i,
+        description: this.keymap.layer_names[i] || `Layer ${i}`
+      }))
     },
     sources() {
       return {
@@ -50,7 +51,7 @@ export default {
         code: this.indexedKeycodes,
         mod: keyBy(filter(this.keycodes, 'isModifier'), 'code'),
         behaviours: this.indexedBehaviours,
-        layer: keyBy(this.layers, 'code')
+        layer: keyBy(this.availableLayers, 'code')
       }
     },
     parsedLayers() {
@@ -69,11 +70,6 @@ export default {
     }
   },
   methods: {
-    handleSelectKey(event) {
-      const key = this.parsedLayers[event.layer][event.index]
-      const targets = this.getSearchTargets(event.param, key)
-      this.editing = { ...event, targets }
-    },
     getSearchTargets(param, key) {
       const { keycodes } = this
       if (param.enum) {
@@ -83,7 +79,7 @@ export default {
         case 'behaviour':
           return this.behaviours
         case 'layer':
-          return this.layers
+          return this.availableLayers
         case 'mod':
           return filter(keycodes, 'isModifier')
         case 'command':
@@ -93,40 +89,32 @@ export default {
           return keycodes
       }
     },
-    handleChangeBinding(source) {
-      const { index, codeIndex } = this.editing
-      const layer = this.parsedLayers[this.activeLayer]
-      const key = layer[index]
-
-      const updatedKey = updateKeyCode(key, codeIndex, source, this.sources)
-      const updatedLayer = [...layer.slice(0, index), updatedKey, ...layer.slice(index + 1)]
-      const updatedLayers = [
-        ...this.parsedLayers.slice(0, this.activeLayer),
-        updatedLayer,
-        ...this.parsedLayers.slice(this.activeLayer + 1)
-      ]
-
-      this.editing = null
-      this.$emit('keymap-updated', Object.assign({}, this.keymap, {
-        layers: encode(updatedLayers)
-      }))
-    },
     handleCreateLayer() {
       const layer = this.parsedLayers.length
       const binding = '&trans'
+      const makeKeycode = index => ({
+        layer, index, binding, parsed: parseKeyBinding(binding, this.sources)
+      })
 
+      const newLayer = times(this.layout.length, makeKeycode)
       const updatedLayerNames = [ ...this.keymap.layer_names, `Layer #${layer}` ]
-      const updatedLayers = [
-        ...this.parsedLayers,
-        times(this.layout.length, index => ({
-          layer, index, binding, parsed: parseKeyBinding(binding, this.sources)
-        }))
-      ]
+      const updatedLayers = [ ...this.parsedLayers, newLayer ]
 
-      this.$emit('keymap-updated', Object.assign({}, this.keymap, {
+      this.$emit('update', {
+        ...this.keymap,
         layer_names: updatedLayerNames,
         layers: encode(updatedLayers)
-      }))
+      })
+    },
+    handleUpdateLayer(layerIndex, updatedLayer) {
+      this.$emit('update', {
+        ...this.keymap,
+        layers: encode([
+          ...this.parsedLayers.slice(0, layerIndex),
+          updatedLayer,
+          ...this.parsedLayers.slice(layerIndex + 1)
+        ])
+      })
     }
   }
 }
@@ -145,17 +133,8 @@ export default {
       :data-layer="activeLayer"
       :layout="layout"
       :keys="parsedLayers[activeLayer]"
+      @update="handleUpdateLayer(activeLayer, $event)"
       class="active"
     />
-    <search
-      v-if="editing"
-      :target="editing.target"
-      :code="editing.code"
-      :param="editing.param"
-      :targets="editing.targets"
-      :keycodes="keycodes"
-      @select="handleChangeBinding"
-      @cancel="editing = null"
-    />
   </div>
 </template>
\ No newline at end of file
diff --git a/application/keymap.js b/application/keymap.js
index 21e1ea9..1a43c46 100644
--- a/application/keymap.js
+++ b/application/keymap.js
@@ -110,24 +110,30 @@ export function indexKeyBinding(tree) {
 }
 
 export function updateKeyCode(key, index, source, sources) {
-  const updated = cloneDeep(key)
-  const code = updated.parsed._index[index]
-  code.value = source.code
-  code.params.splice(0, code.params.length)
-  hydrateParsedKeyBinding(updated.parsed, sources, updated.parsed)
-  return updated
+  const updatedKey = cloneDeep(key)
+  const targetCode = updatedKey.parsed._index[index]
+
+  targetCode.value = source.code
+  targetCode.params.splice(0, targetCode.params.length)
+  hydrateParsedKeyBinding(updatedKey.parsed, sources, updatedKey.parsed)
+
+  return updatedKey
 }
 
-export function encode(parsedKeymap) {
-  function encodeBinding(parsed) {
-    const params = (parsed.params || []).map(encodeBinding)
-    const paramString = params.length > 0 ? `(${params.join(',')})` : ''
-    return parsed.value + paramString
-  }
+function encodeBindValue(parsed) {
+  const params = (parsed.params || []).map(encodeBindValue)
+  const paramString = params.length > 0 ? `(${params.join(',')})` : ''
+  return parsed.value + paramString
+}
 
-  return parsedKeymap.map(layer => layer.map(key => {
-    const { behaviour, params } = key.parsed
+function encodeKeyBinding(parsed) {
+  const { behaviour, params } = parsed
+
+  return `${behaviour.code} ${params.map(encodeBindValue).join(' ')}`.trim()
+}
 
-    return `${behaviour.code} ${params.map(encodeBinding).join(' ')}`.trim()
+export function encode(parsedKeymap) {
+  return parsedKeymap.map(layer => layer.map(key => {
+    return encodeKeyBinding(key.parsed)
   }))
 }