zoeynoort/Macrame
1
0
Fork 0
mirror of https://github.com/Macrame-App/Macrame synced 2025-12-29 07:19:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Macro Recorder added

Browse source
This commit is contained in:
Jesse Malotaux 2025-03-23 14:46:50 +01:00
parent c514ba151e
commit a6024f22e7
12 changed files with 510 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

72
fe/src/components/macros/parts/EditDialogs.vue
View file

@ -4,53 +4,60 @@
class="flex gap-2"
v-if="macroRecorder.state.editKey !== false && typeof macroRecorder.getEditKey() === 'object'"
>
<ContextMenu>
<ContextMenu ref="ctxtMenu">
<template #trigger>
<ButtonComp variant="success" size="sm"> <IconPlus /> Insert key </ButtonComp>
<ButtonComp variant="dark" size="sm"> <IconPlus /> Insert </ButtonComp>
</template>
<template #content>
<ul>
<li @click="insertPosition = 'before'"><IconArrowLeftCircle /> Before</li>
<li @click="insertPosition = 'after'"><IconArrowRightCircle /> After</li>
<li @click="insert.position = 'before'"><IconArrowLeftCircle /> Before</li>
<li @click="insert.position = 'after'"><IconArrowRightCircle /> After</li>
</ul>
</template>
</ContextMenu>
<DialogComp v-if="insertPosition !== null" :open="true" @on-close="insertPosition = null">
<DialogComp
v-if="insert.position !== null"
:open="insert.position !== null"
@on-open="onOpenDialog"
@on-close="onCloseDialog"
>
<template #content>
<InsertKeyDialog :position="insertPosition" />
<InsertKeyDialog :position="insert.position" />
</template>
</DialogComp>
<DialogComp>
<template #trigger>
<ButtonComp size="sm" variant="danger" @click="console.log('delete')">
<IconTrash />Delete key
</ButtonComp>
</template>
<template #content>
<DeleteKeyDialog />
</template>
</DialogComp>
<DialogComp
:id="`edit-key-${macroRecorder.state.editKey}`"
@on-close="macroRecorder.state.editKey = false"
@on-open="onOpenDialog"
@on-close="onCloseDialog"
>
<template #trigger>
<ButtonComp variant="primary" size="sm"> <IconKeyboard />Edit key </ButtonComp>
<ButtonComp variant="secondary" size="sm"> <IconPencil />Edit </ButtonComp>
</template>
<template #content>
<EditKeyDialog />
</template>
</DialogComp>
<DialogComp @on-open="onOpenDialog" @on-close="onCloseDialog">
<template #trigger>
<ButtonComp size="sm" variant="danger"> <IconTrash />Delete </ButtonComp>
</template>
<template #content>
<DeleteKeyDialog />
</template>
</DialogComp>
</div>
<DialogComp
v-if="
macroRecorder.state.editDelay !== false && typeof macroRecorder.getEditDelay() === 'object'
"
@on-close="macroRecorder.state.editDelay = false"
@on-open="onOpenDialog"
@on-close="onCloseDialog"
>
<template #trigger>
<ButtonComp variant="primary" size="sm"> <IconAlarm />Edit delay </ButtonComp>
<ButtonComp variant="secondary" size="sm"> <IconAlarm />Edit </ButtonComp>
</template>
<template #content>
<EditDelayDialog />
@ -64,7 +71,7 @@ import {
IconAlarm,
IconArrowLeftCircle,
IconArrowRightCircle,
IconKeyboard,
IconPencil,
IconPlus,
IconTrash,
} from '@tabler/icons-vue'
@ -77,11 +84,30 @@ import EditDelayDialog from '../components/EditDelayDialog.vue'
import DeleteKeyDialog from '../components/DeleteKeyDialog.vue'
import ContextMenu from '@/components/base/ContextMenu.vue'
import InsertKeyDialog from '../components/InsertKeyDialog.vue'
import { ref } from 'vue'
import { onMounted, reactive, ref } from 'vue'
const macroRecorder = useMacroRecorderStore()
const insertPosition = ref(null)
const insert = reactive({ position: null })
const ctxtMenu = ref()
onMounted(() => {
macroRecorder.$subscribe((mutation) => {
if (mutation.events && mutation.events.key == 'editKey' && mutation.events.newValue === false) {
insert.position = null
}
})
})
function onOpenDialog() {
if (insert.position !== null) ctxtMenu.value.toggle()
}
function onCloseDialog() {
macroRecorder.state.editKey = false
macroRecorder.state.editDelay = false
insert.position = null
}
</script>
<style scoped>