mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 07:19:26 +00:00
WIP: MacroRecorder. Component + parts + subcomponents for capturing keyboard input for macro recording.
This commit is contained in:
Jesse Malotaux
parent
f4a4bc5c4a
commit
68a2eda491
14 changed files with 785 additions and 109 deletions
|
|
@ -1,109 +0,0 @@
|
|||
<template>
|
||||
<div class="macro-input">
|
||||
<div class="macro-input__output" ref="macroOutput"></div>
|
||||
<input class="macro-input__input" type="text" ref="macroInput" @keydown.prevent="keyDown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const macroOutput = ref(null)
|
||||
const macroInput = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
macroInput.value.focus()
|
||||
})
|
||||
|
||||
const keyDown = (e) => {
|
||||
console.log(e)
|
||||
|
||||
const modKeys = {
|
||||
Control: 'Ctrl',
|
||||
Shift: 'Shift',
|
||||
Alt: 'Alt',
|
||||
Meta: 'Win',
|
||||
}
|
||||
|
||||
const specialKeys = {
|
||||
PageUp: 'PgUp',
|
||||
PageDown: 'PgDn',
|
||||
ScrollLock: 'Scr Lk',
|
||||
}
|
||||
|
||||
let key = e.key
|
||||
|
||||
if (e.shiftKey) {
|
||||
key = e.key.toLowerCase()
|
||||
}
|
||||
|
||||
const newKeyEl = document.createElement('kbd')
|
||||
|
||||
if (e.code === 'Space') {
|
||||
newKeyEl.innerHTML = 'Space'
|
||||
} else if (e.location === 1 && Object.keys(modKeys).includes(key)) {
|
||||
newKeyEl.innerHTML = '<sup>left</sup> ' + (modKeys[key] || key)
|
||||
} else if (e.location === 2 && Object.keys(modKeys).includes(key)) {
|
||||
newKeyEl.innerHTML = '<sup>right</sup> ' + (modKeys[key] || key)
|
||||
} else if (e.location === 3) {
|
||||
newKeyEl.innerHTML = '<sup>num</sup> ' + (modKeys[key] || key)
|
||||
} else if (Object.keys(specialKeys).includes(key)) {
|
||||
newKeyEl.innerHTML = specialKeys[key] || key
|
||||
} else {
|
||||
newKeyEl.innerHTML = key
|
||||
}
|
||||
|
||||
macroOutput.value.appendChild(newKeyEl)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.macro-input {
|
||||
@apply relative
|
||||
w-full
|
||||
h-96
|
||||
my-4
|
||||
rounded-lg
|
||||
bg-slate-900/50
|
||||
border
|
||||
border-white/10
|
||||
overflow-auto;
|
||||
|
||||
.macro-input__input,
|
||||
.macro-input__output {
|
||||
@apply absolute
|
||||
inset-0
|
||||
size-full;
|
||||
}
|
||||
|
||||
.macro-input__output {
|
||||
@apply flex
|
||||
flex-wrap
|
||||
items-start
|
||||
gap-2
|
||||
p-4
|
||||
h-fit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@apply flex
|
||||
items-center
|
||||
gap-2
|
||||
px-4 py-1
|
||||
h-9
|
||||
bg-white/10
|
||||
font-sans
|
||||
font-bold
|
||||
text-lg
|
||||
uppercase
|
||||
rounded-md
|
||||
border;
|
||||
|
||||
sup {
|
||||
@apply text-xs font-light -ml-1.5 mt-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
fe/src/components/macros/MacroRecorder.vue
Normal file
76
fe/src/components/macros/MacroRecorder.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="macro-recorder">
|
||||
<!-- Recorder buttons -->
|
||||
<RecorderHeader />
|
||||
|
||||
<!-- Recorder interface container -->
|
||||
<div
|
||||
:class="`recorder-interface__container ${macroRecorder.state.record && 'record'} ${macroRecorder.state.edit && 'edit'}`"
|
||||
>
|
||||
<!-- Shows the macro steps as kbd elements with delay and spacers-->
|
||||
<RecorderOutput />
|
||||
<!-- Input for recording macro steps -->
|
||||
<RecorderInput />
|
||||
</div>
|
||||
|
||||
<RecorderFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// TODO:
|
||||
// X refactor filtering the keys
|
||||
// X add keyup functionality
|
||||
// X add delay between steps
|
||||
// X restyle keys and delay elements
|
||||
// X add lines between steps
|
||||
// X record macro to object
|
||||
// X refactor macro output based on object?
|
||||
// X Make sure keydown is not spamming steps
|
||||
// X Make record button work as a toggle
|
||||
// X Make edit button work
|
||||
// X Make fixed/custom delay work
|
||||
// X Refactor into multiple components and state store
|
||||
// X Make edit key function
|
||||
// X Make edit delay function
|
||||
// X Make delete key function
|
||||
// X Make sure delay is paused when not recording.
|
||||
// X Refactor macro recorder parts.
|
||||
// X X Layout parts should be parts, smaller parts should be components.
|
||||
// X Make reset function
|
||||
// - Make insert button, menu and function
|
||||
|
||||
import RecorderOutput from './parts/RecorderOutput.vue'
|
||||
import RecorderInput from './parts/RecorderInput.vue'
|
||||
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import RecorderHeader from './parts/RecorderHeader.vue'
|
||||
import RecorderFooter from './parts/RecorderFooter.vue'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.recorder-interface__container {
|
||||
@apply relative
|
||||
w-full
|
||||
h-96
|
||||
my-4
|
||||
rounded-lg
|
||||
bg-slate-900/50
|
||||
border-2
|
||||
border-white/10
|
||||
overflow-auto
|
||||
transition-colors;
|
||||
|
||||
&.record {
|
||||
@apply border-rose-300 bg-rose-950/50;
|
||||
}
|
||||
|
||||
&.edit {
|
||||
@apply border-sky-300 bg-sky-900/50;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
fe/src/components/macros/components/DelaySpan.vue
Normal file
39
fe/src/components/macros/components/DelaySpan.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<span :class="`delay ${active ? 'active' : ''}`">
|
||||
{{ value < 10000 ? value + 'ms' : '>10s' }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
value: Number,
|
||||
active: Boolean,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
span.delay {
|
||||
@apply flex
|
||||
items-center
|
||||
px-2 py-1
|
||||
bg-slate-500
|
||||
border
|
||||
border-slate-400
|
||||
text-slate-950
|
||||
font-semibold
|
||||
rounded-sm
|
||||
text-sm
|
||||
cursor-default;
|
||||
}
|
||||
|
||||
.edit span.delay {
|
||||
@apply cursor-pointer;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
@apply bg-lime-700 border-lime-500 text-lime-200;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
fe/src/components/macros/components/DeleteKeyDialog.vue
Normal file
38
fe/src/components/macros/components/DeleteKeyDialog.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div id="delete-key-dialog" class="dialog__content">
|
||||
<h4 class="text-slate-50 mb-4">Delete key</h4>
|
||||
<div class="flex justify-center w-full mb-4">
|
||||
<MacroKey v-if="keyObj" :key-obj="keyObj" />
|
||||
</div>
|
||||
<p class="text-sm text-slate-300">Are you sure you want to delete this key?</p>
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<ButtonComp variant="danger" size="sm" @click="macroRecorder.deleteEditKey()">
|
||||
Delete key
|
||||
</ButtonComp>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import MacroKey from './MacroKey.vue'
|
||||
import { filterKey } from '@/services/MacroRecordService'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const keyObj = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
keyObj.value = filterKey(macroRecorder.getEditKey())
|
||||
console.log(macroRecorder.getEditKey());
|
||||
console.log(keyObj.value);
|
||||
console.log('---------');
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
</style>
|
||||
'
|
||||
57
fe/src/components/macros/components/EditDelayDialog.vue
Normal file
57
fe/src/components/macros/components/EditDelayDialog.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div id="edit-delay-dialog" class="dialog__content">
|
||||
<h4 class="text-slate-50 mb-4">Edit delay</h4>
|
||||
<div v-if="editable.delay.value" class="flex justify-center">
|
||||
<DelaySpan class="!text-lg" :value="editable.delay.value" />
|
||||
</div>
|
||||
<form class="grid gap-4 mt-6" submit.prevent>
|
||||
<div v-if="editable.newDelay.value">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="3600000"
|
||||
step="10"
|
||||
v-model="editable.newDelay.value"
|
||||
autofocus
|
||||
/>
|
||||
<span>ms</span>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<ButtonComp variant="primary" size="sm" @click.prevent="changeDelay()">
|
||||
Change delay
|
||||
</ButtonComp>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import { reactive, onMounted } from 'vue'
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import DelaySpan from './DelaySpan.vue'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const editable = reactive({
|
||||
delay: {},
|
||||
newDelay: { value: 0 },
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
editable.delay = macroRecorder.getEditDelay()
|
||||
editable.newDelay.value = editable.delay.value
|
||||
console.log(editable)
|
||||
})
|
||||
|
||||
const changeDelay = () => {
|
||||
if (!editable.newDelay.value) return
|
||||
|
||||
macroRecorder.recordStep(editable.newDelay.value, false, macroRecorder.state.editDelay)
|
||||
macroRecorder.state.editDelay = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
</style>
|
||||
103
fe/src/components/macros/components/EditKeyDialog.vue
Normal file
103
fe/src/components/macros/components/EditKeyDialog.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div id="edit-key-dialog" class="dialog__content">
|
||||
<h4 class="text-slate-50 mb-4">Press a key</h4>
|
||||
<div class="flex justify-center" @click="$refs.newKeyInput.focus()">
|
||||
<MacroKey
|
||||
v-if="editable.key.keyObj"
|
||||
:key-obj="editable.key.keyObj"
|
||||
:direction="editable.key.direction"
|
||||
/>
|
||||
|
||||
<template v-if="typeof editable.newKey.keyObj === 'object'">
|
||||
<span class="px-4 flex items-center text-white"> >>> </span>
|
||||
<MacroKey :key-obj="editable.newKey.keyObj" :direction="editable.newKey.direction" />
|
||||
</template>
|
||||
</div>
|
||||
<form class="grid gap-4" submit.prevent>
|
||||
<input
|
||||
class="size-0 opacity-0"
|
||||
type="text"
|
||||
min="0"
|
||||
max="1"
|
||||
ref="newKeyInput"
|
||||
placeholder="New key"
|
||||
autofocus
|
||||
@keydown.prevent="handleNewKey($event)"
|
||||
/>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<ButtonComp
|
||||
variant="secondary"
|
||||
:class="editable.newKey.direction === 'down' ? 'selected' : ''"
|
||||
size="sm"
|
||||
@click.prevent="handleNewDirection('down')"
|
||||
>
|
||||
↓ Down
|
||||
</ButtonComp>
|
||||
<ButtonComp
|
||||
variant="secondary"
|
||||
:class="editable.newKey.direction === 'up' ? 'selected' : ''"
|
||||
size="sm"
|
||||
@click.prevent="handleNewDirection('up')"
|
||||
>
|
||||
↑ Up
|
||||
</ButtonComp>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<ButtonComp variant="primary" size="sm" @click.prevent="changeKey()">
|
||||
Change key
|
||||
</ButtonComp>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MacroKey from './MacroKey.vue'
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import { filterKey } from '@/services/MacroRecordService'
|
||||
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
|
||||
const editable = reactive({
|
||||
key: {},
|
||||
newKey: {},
|
||||
})
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const newKeyInput = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
editable.key = macroRecorder.getEditKey()
|
||||
editable.newKey.direction = editable.key.direction
|
||||
})
|
||||
|
||||
const handleNewKey = (e) => {
|
||||
editable.newKey.e = e
|
||||
editable.newKey.keyObj = filterKey(e)
|
||||
}
|
||||
|
||||
const handleNewDirection = (direction) => {
|
||||
editable.newKey.direction = direction
|
||||
editable.newKey.keyObj = filterKey(editable.key)
|
||||
}
|
||||
|
||||
const changeKey = () => {
|
||||
macroRecorder.recordStep(
|
||||
editable.newKey.e,
|
||||
editable.newKey.direction,
|
||||
macroRecorder.state.editKey,
|
||||
)
|
||||
|
||||
macroRecorder.state.editKey = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
button.selected {
|
||||
@apply ring-2 ring-offset-1 ring-sky-500 bg-sky-500;
|
||||
}
|
||||
</style>
|
||||
64
fe/src/components/macros/components/FixedDelayMenu.vue
Normal file
64
fe/src/components/macros/components/FixedDelayMenu.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<ContextMenu>
|
||||
<template #trigger>
|
||||
<ButtonComp variant="secondary" size="sm"> <IconAlarmFilled />Fixed delay </ButtonComp>
|
||||
</template>
|
||||
<template #content>
|
||||
<ul>
|
||||
<li @click="macroRecorder.changeDelay(0)">0ms</li>
|
||||
<li @click="macroRecorder.changeDelay(15)">15ms</li>
|
||||
<li @click="macroRecorder.changeDelay(50)">50ms</li>
|
||||
<li @click="macroRecorder.changeDelay(100)">100ms</li>
|
||||
<li>
|
||||
<DialogComp>
|
||||
<template #trigger>
|
||||
<span>Custom delay</span>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<h4 class="text-slate-50 mb-4">Custom delay</h4>
|
||||
<form
|
||||
class="grid gap-4 w-44"
|
||||
@submit.prevent="macroRecorder.changeDelay(parseInt($refs.customDelayInput.value))"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
step="10"
|
||||
min="0"
|
||||
max="3600000"
|
||||
ref="customDelayInput"
|
||||
placeholder="100"
|
||||
/>
|
||||
<span>ms</span>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<ButtonComp variant="primary" size="sm">Set custom delay</ButtonComp>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogComp>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ContextMenu from '@/components/base/ContextMenu.vue'
|
||||
import { IconAlarmFilled } from '@tabler/icons-vue'
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import DialogComp from '@/components/base/DialogComp.vue'
|
||||
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const delayMenu = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
</style>
|
||||
41
fe/src/components/macros/components/InsertKeyDialog.vue
Normal file
41
fe/src/components/macros/components/InsertKeyDialog.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div id="insert-key-dialog" class="dialog__content w-80">
|
||||
<h4 class="text-slate-50 mb-4">Insert key {{ position }}</h4>
|
||||
<div class="flex justify-center w-full mb-4">
|
||||
<MacroKey v-if="keyObjs.selected" :key-obj="keyObjs.selected" />
|
||||
<MacroKey v-if="keyObjs.adjacent" :key-obj="keyObjs.adjacent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import MacroKey from './MacroKey.vue'
|
||||
import { filterKey } from '@/services/MacroRecordService'
|
||||
|
||||
const props = defineProps({
|
||||
position: String,
|
||||
})
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const keyObjs = reactive({
|
||||
selected: null,
|
||||
insert: null,
|
||||
adjacent: null,
|
||||
adjacentDelay: null,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
keyObjs.selected = filterKey(macroRecorder.getEditKey())
|
||||
|
||||
const adjacentKey = macroRecorder.getAdjacentKey(props.position, true)
|
||||
if (adjacentKey) keyObjs.adjacent = filterKey(adjacentKey.key)
|
||||
if (adjacentKey.delay) keyObjs.adjacentDelay = adjacentKey.delay
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
</style>
|
||||
77
fe/src/components/macros/components/MacroKey.vue
Normal file
77
fe/src/components/macros/components/MacroKey.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<kbd :class="active ? 'active' : ''">
|
||||
<sup v-if="keyObj.loc">
|
||||
{{ keyObj.loc }}
|
||||
</sup>
|
||||
<span :innerHTML="keyObj.str" />
|
||||
<span class="dir">{{ dir.value === 'down' ? '↓' : '↑' }}</span>
|
||||
</kbd>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
keyObj: Object,
|
||||
direction: String,
|
||||
active: Boolean,
|
||||
})
|
||||
|
||||
const dir = reactive({
|
||||
value: false,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (props.direction) dir.value = props.direction
|
||||
else dir.value = props.keyObj.direction
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
kbd {
|
||||
@apply flex
|
||||
items-center
|
||||
gap-2
|
||||
pl-4 pr-2 py-1
|
||||
h-9
|
||||
bg-slate-700
|
||||
font-sans
|
||||
font-bold
|
||||
text-lg
|
||||
text-white
|
||||
uppercase
|
||||
rounded-md
|
||||
border
|
||||
border-slate-500
|
||||
transition-all
|
||||
shadow-slate-500;
|
||||
box-shadow: 0 0.2rem 0 0.2rem var(--tw-shadow-color);
|
||||
|
||||
&:has(sup) {
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
sup {
|
||||
@apply text-slate-200 text-xs font-light mt-1;
|
||||
}
|
||||
|
||||
span.dir {
|
||||
@apply text-slate-200 pl-1;
|
||||
}
|
||||
}
|
||||
|
||||
:has(kdb):not(.edit) kbd {
|
||||
@apply pointer-events-none cursor-default;
|
||||
}
|
||||
|
||||
.edit kbd {
|
||||
@apply cursor-pointer pointer-events-auto;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
@apply bg-sky-900 border-sky-400 shadow-sky-700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
fe/src/components/macros/parts/EditDialogs.vue
Normal file
95
fe/src/components/macros/parts/EditDialogs.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div class="macro-edit__dialogs" v-if="macroRecorder.state.edit !== false">
|
||||
<div
|
||||
class="flex gap-2"
|
||||
v-if="macroRecorder.state.editKey !== false && typeof macroRecorder.getEditKey() === 'object'"
|
||||
>
|
||||
<ContextMenu>
|
||||
<template #trigger>
|
||||
<ButtonComp variant="success" size="sm"> <IconPlus /> Insert key </ButtonComp>
|
||||
</template>
|
||||
<template #content>
|
||||
<ul>
|
||||
<li @click="insertPosition = 'before'"><IconArrowLeftCircle /> Before</li>
|
||||
<li @click="insertPosition = 'after'"><IconArrowRightCircle /> After</li>
|
||||
</ul>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
<DialogComp v-if="insertPosition !== null" :open="true" @on-close="insertPosition = null">
|
||||
<template #content>
|
||||
<InsertKeyDialog :position="insertPosition" />
|
||||
</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"
|
||||
>
|
||||
<template #trigger>
|
||||
<ButtonComp variant="primary" size="sm"> <IconKeyboard />Edit key </ButtonComp>
|
||||
</template>
|
||||
<template #content>
|
||||
<EditKeyDialog />
|
||||
</template>
|
||||
</DialogComp>
|
||||
</div>
|
||||
<DialogComp
|
||||
v-if="
|
||||
macroRecorder.state.editDelay !== false && typeof macroRecorder.getEditDelay() === 'object'
|
||||
"
|
||||
@on-close="macroRecorder.state.editDelay = false"
|
||||
>
|
||||
<template #trigger>
|
||||
<ButtonComp variant="primary" size="sm"> <IconAlarm />Edit delay </ButtonComp>
|
||||
</template>
|
||||
<template #content>
|
||||
<EditDelayDialog />
|
||||
</template>
|
||||
</DialogComp>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
IconAlarm,
|
||||
IconArrowLeftCircle,
|
||||
IconArrowRightCircle,
|
||||
IconKeyboard,
|
||||
IconPlus,
|
||||
IconTrash,
|
||||
} from '@tabler/icons-vue'
|
||||
import DialogComp from '@/components/base/DialogComp.vue'
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import EditKeyDialog from '../components/EditKeyDialog.vue'
|
||||
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'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
const insertPosition = ref(null)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.macro-edit__dialogs {
|
||||
@apply flex
|
||||
flex-grow
|
||||
justify-end;
|
||||
}
|
||||
</style>
|
||||
25
fe/src/components/macros/parts/RecorderFooter.vue
Normal file
25
fe/src/components/macros/parts/RecorderFooter.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="macro-recorder__footer">
|
||||
<ButtonComp
|
||||
v-if="macroRecorder.steps.length > 0"
|
||||
variant="danger"
|
||||
size="sm"
|
||||
@click="macroRecorder.reset()"
|
||||
>
|
||||
<IconRestore /> Reset
|
||||
</ButtonComp>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import { IconRestore } from '@tabler/icons-vue'
|
||||
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
</style>
|
||||
70
fe/src/components/macros/parts/RecorderHeader.vue
Normal file
70
fe/src/components/macros/parts/RecorderHeader.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="macro-recorder__header">
|
||||
<div :class="`recording__buttons ${macroRecorder.state.edit ? 'disabled' : ''}`">
|
||||
<ButtonComp
|
||||
v-if="!macroRecorder.state.record"
|
||||
variant="primary"
|
||||
@click="macroRecorder.state.record = true"
|
||||
>
|
||||
<IconPlayerRecordFilled class="text-red-500" />Start recording
|
||||
</ButtonComp>
|
||||
<ButtonComp
|
||||
v-if="macroRecorder.state.record"
|
||||
variant="danger"
|
||||
@click="macroRecorder.state.record = false"
|
||||
>
|
||||
<IconPlayerStopFilled class="text-white" />Stop recording
|
||||
</ButtonComp>
|
||||
</div>
|
||||
<div :class="`edit__buttons ${macroRecorder.state.record ? 'disabled' : ''}`">
|
||||
<div>
|
||||
<ButtonComp
|
||||
v-if="!macroRecorder.state.edit"
|
||||
variant="secondary"
|
||||
@click="macroRecorder.state.edit = true"
|
||||
>
|
||||
<IconPencil />Edit macro
|
||||
</ButtonComp>
|
||||
<ButtonComp
|
||||
v-if="macroRecorder.state.edit"
|
||||
variant="dark"
|
||||
@click="macroRecorder.resetEdit()"
|
||||
>
|
||||
<IconPlayerStopFilled />Stop editing
|
||||
</ButtonComp>
|
||||
</div>
|
||||
<FixedDelayMenu v-if="macroRecorder.state.edit" />
|
||||
<EditDialogs />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IconPencil, IconPlayerRecordFilled, IconPlayerStopFilled } from '@tabler/icons-vue'
|
||||
import ButtonComp from '@/components/base/ButtonComp.vue'
|
||||
import FixedDelayMenu from '../components/FixedDelayMenu.vue'
|
||||
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import EditDialogs from './EditDialogs.vue'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.macro-recorder__header {
|
||||
@apply grid
|
||||
grid-cols-[auto_1fr]
|
||||
items-end
|
||||
gap-4;
|
||||
|
||||
> div {
|
||||
@apply flex gap-4 items-end;
|
||||
|
||||
&.disabled {
|
||||
@apply opacity-50 pointer-events-none cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
fe/src/components/macros/parts/RecorderInput.vue
Normal file
46
fe/src/components/macros/parts/RecorderInput.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div :class="`recorder-input__container ${macroRecorder.state.record && 'record'}`">
|
||||
<input
|
||||
v-if="macroRecorder.state.record"
|
||||
:class="`macro-recorder__input ${macroRecorder.state.record && 'record'}`"
|
||||
type="text"
|
||||
ref="macroInput"
|
||||
@focus="console.log('focus')"
|
||||
@keydown.prevent="macroRecorder.recordStep($event, 'down')"
|
||||
@keyup.prevent="macroRecorder.recordStep($event, 'up')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import { ref, onUpdated } from 'vue'
|
||||
|
||||
const macroInput = ref(null)
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
|
||||
onUpdated(() => {
|
||||
if (macroRecorder.state.record) {
|
||||
macroInput.value.focus()
|
||||
if (macroRecorder.delay.start !== 0) macroRecorder.restartDelay()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.recorder-input__container,
|
||||
.macro-recorder__input {
|
||||
@apply absolute
|
||||
inset-0
|
||||
size-full
|
||||
opacity-0
|
||||
hidden;
|
||||
|
||||
&.record {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
fe/src/components/macros/parts/RecorderOutput.vue
Normal file
54
fe/src/components/macros/parts/RecorderOutput.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div
|
||||
:class="`macro-recorder__output ${macroRecorder.state.record && 'record'} ${macroRecorder.state.edit && 'edit'}`"
|
||||
>
|
||||
<template v-for="(step, key) in macroRecorder.steps">
|
||||
<!-- Key element -->
|
||||
<template v-if="step.type === 'key'">
|
||||
<MacroKey
|
||||
:key="key"
|
||||
:key-obj="step.keyObj"
|
||||
:direction="step.direction"
|
||||
:active="macroRecorder.state.editKey === key"
|
||||
@click="macroRecorder.state.edit ? macroRecorder.toggleEdit('key', key) : false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Delay element -->
|
||||
<template v-else-if="step.type === 'delay'">
|
||||
<DelaySpan
|
||||
:key="key"
|
||||
:value="step.value"
|
||||
:active="macroRecorder.state.editDelay === key"
|
||||
@click="macroRecorder.toggleEdit('delay', key)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Spacer element -->
|
||||
<hr class="spacer" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMacroRecorderStore } from '@/stores/macrorecorder'
|
||||
import MacroKey from '../components/MacroKey.vue'
|
||||
import DelaySpan from '../components/DelaySpan.vue'
|
||||
|
||||
const macroRecorder = useMacroRecorderStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
|
||||
.macro-recorder__output {
|
||||
@apply flex
|
||||
flex-wrap
|
||||
items-center
|
||||
gap-y-4
|
||||
p-4
|
||||
absolute
|
||||
top-0 left-0
|
||||
h-fit;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue