matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Add and delete actions

Browse Source
This commit is contained in:
Robert Kossessa
2024-05-30 13:12:43 +02:00
parent 92857ff0e4
commit 57ef8ec821
4 changed files with 88 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/src/components/config/actions/ActionCard.vue
View File

@@ -72,6 +72,7 @@
<template v-else>
<Button
class="aspect-square bg-orange-950 p-1 text-zinc-200 hover:bg-orange-900 hover:text-zinc-100"
@click="$emit('delete')"
><Check class="size-4"
/></Button>
<Button
@@ -121,6 +122,8 @@ import { useAppStore } from '@renderer/appStore'
const deviceStore = useDeviceStore()
const appStore = useAppStore()
defineEmits(['delete'])
const props = defineProps({
actionIndex: {
type: Number,

10
src/renderer/src/components/config/actions/ActionGroup.vue
View File

@@ -11,12 +11,17 @@
>
<template #item="dragAction">
<div :key="dragAction.element.id">
<ActionCard :action-index="dragAction.index + 1" :action="dragAction.element" />
<ActionCard
:action-index="dragAction.index + 1"
:action="dragAction.element"
@delete="$emit('delete', dragAction.index)"
/>
</div>
</template>
</draggable>
<button
class="flex flex-1 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900/50 p-2 text-sm text-muted-foreground hover:bg-zinc-800 hover:text-zinc-200"
@click="$emit('add')"
>
<Plus class="mr-2" /> Add an action
</button>
@@ -28,6 +33,9 @@ import { Plus } from 'lucide-vue-next'
import ActionCard from '@renderer/components/config/actions/ActionCard.vue'
import draggable from 'vuedraggable'
import { ref } from 'vue'
defineEmits(['add', 'delete'])
defineProps({
actions: {
type: Array,

21
src/renderer/src/components/config/keys/KeyMappingConfig.vue
View File

@@ -3,19 +3,34 @@
<template #title>
<span class="text-zinc-500">&nbsp;({{ pressedActions.length }})</span></template
>
<ActionGroup :actions="pressedActions" class="p-2" />
<ActionGroup
:actions="pressedActions"
class="p-2"
@add="deviceStore.addKeyAction(null, appStore.selectedKey, 0)"
@delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 0)"
/>
</ConfigSection>
<ConfigSection :title="`${appStore.selectedKey} Released`" :icon-component="PanelBottomOpen">
<template #title>
<span class="text-zinc-500">&nbsp;({{ releasedActions.length }})</span></template
>
<ActionGroup :actions="releasedActions" class="p-2" />
<ActionGroup
:actions="releasedActions"
class="p-2"
@add="deviceStore.addKeyAction(null, appStore.selectedKey, 1)"
@delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 1)"
/>
</ConfigSection>
<ConfigSection :title="`${appStore.selectedKey} Held`" :icon-component="Clock2">
<template #title>
<span class="text-zinc-500">&nbsp;({{ heldActions.length }})</span></template
>
<ActionGroup :actions="heldActions" class="p-2" />
<ActionGroup
:actions="heldActions"
class="p-2"
@add="deviceStore.addKeyAction(null, appStore.selectedKey, 2)"
@delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 3)"
/>
</ConfigSection>
</template>
<script setup lang="ts">

58
src/renderer/src/deviceStore.ts
View File

@@ -149,6 +149,7 @@ export const useDeviceStore = defineStore('device', {
vernier: 10
}
} as Value,
defaultKeyAction: { type: 'next_profile' } as Action,
orientationLabels: [270, 0, 90, 180]
}),
getters: {
@@ -542,6 +543,63 @@ export const useDeviceStore = defineStore('device', {
this.setDirtyState(true)
}
},
addKeyAction(
action: Action | null = null,
key: string,
trigger: number,
updateDevice: boolean = true
) {
if (!action) {
action = JSON.parse(JSON.stringify(this.defaultKeyAction)) as Action
}
const keyIndex = this.keyLabels.indexOf(key)
if (trigger === 0) {
if (!this.currentProfile!.keys[keyIndex].pressed) {
this.currentProfile!.keys[keyIndex].pressed = []
}
this.currentProfile!.keys[keyIndex].pressed!.push(action)
} else if (trigger === 1) {
if (!this.currentProfile!.keys[keyIndex].released) {
this.currentProfile!.keys[keyIndex].released = []
}
this.currentProfile!.keys[keyIndex].released!.push(action)
} else if (trigger === 2) {
if (!this.currentProfile!.keys[keyIndex].held) {
this.currentProfile!.keys[keyIndex].held = []
}
this.currentProfile!.keys[keyIndex].held!.push(action)
}
if (updateDevice) {
sendDebounced(
this.currentDeviceId!,
JSON.stringify({
profile: this.currentProfileName,
updates: { keys: this.currentProfile!.keys }
})
)
this.setDirtyState(true)
}
},
removeKeyAction(index: number, key: string, trigger: number, updateDevice: boolean = true) {
const keyIndex = this.keyLabels.indexOf(key)
if (trigger === 0) {
this.currentProfile!.keys[keyIndex].pressed!.splice(index, 1)
} else if (trigger === 1) {
this.currentProfile!.keys[keyIndex].released!.splice(index, 1)
} else if (trigger === 2) {
this.currentProfile!.keys[keyIndex].held!.splice(index, 1)
}
if (updateDevice) {
sendDebounced(
this.currentDeviceId!,
JSON.stringify({
profile: this.currentProfileName,
updates: { keys: this.currentProfile!.keys }
})
)
this.setDirtyState(true)
}
},
updateKeyActionParameter(index: number, updates: object, updateDevice: boolean = true) {
Object.assign(this.currentProfile!.keys[index], updates)
if (updateDevice) {