Merge pull request #9 from tcorzo/develop

Develop

.pre-commit-config.yaml

@@ -35,3 +35,6 @@ repos:
     hooks:
       - id: prettier
         types: [yaml]
+
+ci:
+  autoupdate_branch: "develop"

README.md

@@ -67,8 +67,10 @@ a template for your own programs.
 - [x] Indicate current register in the UI
 - [x] Show execution errors in the UI
 - [ ] Flash register when it's value changes
-- [ ] Address-agnostic register insert/delete
-- [ ] Update starting address in the UI (propagates to all addresses)
+- [x] Register insert/delete
+- [ ] Auto-scroll to the current register
+- [ ] Register re-addressing (when moving registers around)
+- [ ] Update starting address (propagates to all addresses)
 - [ ] Improve editor UX
     - [ ] Add syntax highlighting for operations
     - [ ] Add autocomplete for `#` labels

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     Card: typeof import('primevue/card')['default']
     Column: typeof import('primevue/column')['default']
     ConfirmPopup: typeof import('primevue/confirmpopup')['default']
+    ContextMenu: typeof import('primevue/contextmenu')['default']
     DataRegisters: typeof import('./src/components/emulator/DataRegisters.vue')['default']
     DataTable: typeof import('primevue/datatable')['default']
     DownloadButton: typeof import('./src/components/DownloadButton.vue')['default']

src/components/Editor.vue

@@ -10,9 +10,9 @@ const globalState: GlobalState = inject('globalState') || {} as GlobalState;
 <template>
   <div id="editor">
     <OperationsTable />
-    <RegisterTable :editable="true" :title="'Registros Auxiliares'" :registers="globalState.program.aux_registers" />
-    <RegisterTable :editable="true" :title="'Program'" :registers="globalState.program.registers" />
-    <RegisterTable :editable="true" :title="'Data'" :registers="globalState.program.data_registers" />
+    <RegisterTable editable :title="'Registros Auxiliares'" :registers="globalState.program.aux_registers" />
+    <RegisterTable editable :title="'Program'" :registers="globalState.program.registers" />
+    <RegisterTable editable :title="'Data'" :registers="globalState.program.data_registers" />
   </div>
 </template>
 

src/components/RegisterTable.vue

@@ -1,32 +1,11 @@
-<script setup lang="ts">
-import { Register } from '@/abacus/program';
-
-const onCellEditComplete = (event: any) => {
-    let { data, newValue, field } = event;
-    data[field] = newValue;
-};
-
-const columns = [
-    { field: 'address', header: '0x' },
-    { field: 'value', header: 'Valor' },
-    { field: 'comment', header: 'Comentario' },
-];
-
-const props = defineProps<{
-    title: string
-    registers: Register[],
-    editable: boolean
-}>()
-
-const editMode = props.editable ? 'cell' : undefined
-</script>
-
 <template>
     <Card class="flex-initial">
         <template #title>{{ props.title }}</template>
         <template #content>
-            <DataTable scrollable scrollHeight="75vh" :value="props.registers" :editMode="editMode"
-                @cell-edit-complete="onCellEditComplete" :pt="{
+            <ContextMenu v-if="props.editable" ref="cm" :model="menuModel" @hide="selectedRegister = null" />
+            <DataTable :value="props.registers" :editMode="editMode" scrollable scrollHeight="75vh"
+                @cell-edit-complete="onCellEditComplete" :contextMenu="props.editable"
+                v-model:contextMenuSelection="selectedRegister" @rowContextmenu="onRowContextMenu" :pt="{
                     table: { style: 'min-width: 25rem' },
                     column: {
                         bodycell: ({ state }) => ({
@@ -47,3 +26,60 @@ const editMode = props.editable ? 'cell' : undefined
         </template>
     </Card>
 </template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue';
+import { Register } from './../abacus/program';
+
+const props = defineProps({
+    title: String,
+    registers: {
+        type: Array as PropType<Register[]>,
+        required: true
+    },
+    editable: {
+        type: Boolean,
+        required: false,
+        default(_: any) {
+            return false;
+        }
+    }
+})
+
+const editMode = props.editable ? 'cell' : undefined
+
+const columns = [
+    { field: 'address', header: '0x' },
+    { field: 'value', header: 'Valor' },
+    { field: 'comment', header: 'Comentario' },
+];
+
+// Editable table
+const onCellEditComplete = (event: any) => {
+    let { data, newValue, field } = event;
+    data[field] = newValue;
+};
+
+// Context menu
+const cm = ref();
+const selectedRegister = ref();
+const menuModel = ref([
+    { label: 'Insert Above', icon: 'pi pi-fw pi-arrow-up', command: () => insertAbove(selectedRegister.value) },
+    { label: 'Insert Below', icon: 'pi pi-fw pi-arrow-down', command: () => insertBelow(selectedRegister.value) },
+    { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteRegister(selectedRegister.value) }
+]);
+const onRowContextMenu = (event) => {
+    cm.value.show(event.originalEvent);
+};
+const deleteRegister = (register: Register) => {
+    props.registers.splice(props.registers.indexOf(register), 1);
+};
+const insertAbove = (register: Register) => {
+    const index = props.registers.indexOf(register);
+    props.registers.splice(index, 0, new Register({ address: '000', value: '0000', comment: '' }));
+};
+const insertBelow = (register: Register) => {
+    const index = props.registers.indexOf(register);
+    props.registers.splice(index + 1, 0, new Register({ address: '000', value: '0000', comment: '' }));
+};
+</script>

src/components/emulator/AuxRegisters.vue

@@ -16,7 +16,7 @@ const registers = computed(
 </script>
 
 <template>
-    <RegisterTable :editable="false" :title="'Registros Auxiliares'" :registers="registers" />
+    <RegisterTable :title="'Registros Auxiliares'" :registers="registers" />
 </template>
 
 <style scoped>

src/components/emulator/DataRegisters.vue

@@ -17,7 +17,7 @@ const registers = computed(() => {
 </script>
 
 <template>
-    <RegisterTable :editable="false" :title="'Data'" :registers="registers" />
+    <RegisterTable :title="'Data'" :registers="registers" />
 </template>
 
 <style scoped>