feat(gsoc): layout mode fix

src/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue

@@ -8,13 +8,15 @@
                     title="Decrease Width"
                     variant="text"
                     icon="mdi-minus"
+                    @click.prevent="layoutFunction('decreaseLayoutWidth')"
                 />
                 <span>Width</span>
                 <v-btn
                     id="increaseLayoutWidth"
                     title="Increase Width"
                     variant="text"
                     icon="mdi-plus"
+                    @click.prevent="layoutFunction('increaseLayoutWidth')"
                 />
             </div>
             <div class="">
@@ -23,18 +25,25 @@
                     title="Decrease Height"
                     variant="text"
                     icon="mdi-minus"
+                    @click.prevent="layoutFunction('decreaseLayoutHeight')"
                 />
                 <span>Height</span>
                 <v-btn
                     id="increaseLayoutHeight"
                     title="Increase Height"
                     variant="text"
                     icon="mdi-plus"
+                    @click.prevent="layoutFunction('increaseLayoutHeight')"
                 />
             </div>
             <div class="">
                 <span>Reset all nodes:</span>
-                <v-btn id="layoutResetNodes" variant="text" icon="mdi-sync" />
+                <v-btn
+                    id="layoutResetNodes"
+                    variant="text"
+                    icon="mdi-sync"
+                    @click.prevent="layoutFunction('layoutResetNodes')"
+                />
             </div>
             <div class="layout-title">
                 <span>Title</span>
@@ -45,42 +54,55 @@
                         active-class="no-active"
                         variant="outlined"
                         icon="mdi-chevron-up"
+                        @click.prevent="layoutFunction('layoutTitleUp')"
                     />
                     <v-btn
                         id="layoutTitleDown"
                         class="layoutBtn"
                         variant="outlined"
                         icon="mdi-chevron-down"
+                        @click.prevent="layoutFunction('layoutTitleDown')"
                     />
                     <v-btn
                         id="layoutTitleLeft"
                         class="layoutBtn"
                         variant="outlined"
                         icon="mdi-chevron-left"
+                        @click.prevent="layoutFunction('layoutTitleLeft')"
                     />
                     <v-btn
                         id="layoutTitleRight"
                         class="layoutBtn"
                         variant="outlined"
                         icon="mdi-chevron-right"
+                        @click.prevent="layoutFunction('layoutTitleRight')"
                     />
                 </div>
             </div>
             <div class="layout-title--enable">
                 <span>Title Enabled:</span>
                 <label class="switch">
-                    <input id="toggleLayoutTitle" type="checkbox" checked />
+                    <input
+                        id="toggleLayoutTitle"
+                        v-model="titleEnable"
+                        type="checkbox"
+                    />
                     <span class="slider"></span>
                 </label>
             </div>
             <div class="">
-                <button id="saveLayout" class="Layout-btn custom-btn--primary">
+                <button
+                    id="saveLayout"
+                    class="Layout-btn custom-btn--primary"
+                    @click.prevent="layoutFunction('saveLayout')"
+                >
                     Save
                 </button>
 
                 <button
                     id="cancelLayout"
                     class="Layout-btn custom-btn--tertiary"
+                    @click.prevent="layoutFunction('cancelLayout')"
                 >
                     Cancel
                 </button>
@@ -90,13 +112,24 @@
 </template>
 
 <script lang="ts" setup>
-import { setupLayoutModePanelListeners } from '#/simulator/src/layoutMode'
+import { ref, watch } from 'vue'
+import { tempBuffer, layoutFunctions } from '#/simulator/src/layoutMode'
+import { scheduleUpdate } from '#/simulator/src/engine'
 import PanelHeader from '#/components/Panels/Shared/PanelHeader.vue'
-import { onMounted } from '@vue/runtime-core'
 
-onMounted(() => {
-    setupLayoutModePanelListeners()
-})
+const titleEnable = ref(tempBuffer.layout.titleEnabled)
+
+watch(
+    () => titleEnable.value,
+    () => {
+        layoutFunction('toggleLayoutTitle')
+    }
+)
+
+function layoutFunction(func: string) {
+    layoutFunctions[func]()
+    scheduleUpdate()
+}
 </script>
 
 <style scoped>

src/simulator/src/layoutMode.js

@@ -476,53 +476,69 @@ export function toggleLayoutMode() {
         globalScope.scale = DPR * 1.3
         dots()
         tempBuffer = new LayoutBuffer()
-        $('#toggleLayoutTitle')[0].checked = tempBuffer.layout.titleEnabled
+        // $('#toggleLayoutTitle')[0].checked = tempBuffer.layout.titleEnabled
     }
     update(globalScope, true)
     scheduleUpdate()
 }
 
-export function setupLayoutModePanelListeners() {
-    $('#decreaseLayoutWidth').on('click', () => {
-        decreaseLayoutWidth()
-    })
-    $('#increaseLayoutWidth').on('click', () => {
-        increaseLayoutWidth()
-    })
-    $('#decreaseLayoutHeight').on('click', () => {
-        decreaseLayoutHeight()
-    })
-    $('#increaseLayoutHeight').on('click', () => {
-        increaseLayoutHeight()
-    })
-    $('#layoutResetNodes').on('click', () => {
-        layoutResetNodes()
-    })
-    $('#layoutTitleUp').on('click', () => {
-        layoutTitleUp()
-    })
-    $('#layoutTitleDown').on('click', () => {
-        layoutTitleDown()
-    })
-    $('#layoutTitleLeft').on('click', () => {
-        layoutTitleLeft()
-    })
-    $('#layoutTitleRight').on('click', () => {
-        layoutTitleRight()
-    })
-    $('#toggleLayoutTitle').on('click', () => {
-        toggleLayoutTitle()
-    })
-    $('#saveLayout').on('click', () => {
-        saveLayout()
-    })
-    $('#cancelLayout').on('click', () => {
-        cancelLayout()
-    })
-    $('#layoutDialog button').on('click', () => {
-        scheduleUpdate()
-    })
-    $('#layoutDialog input').on('click', () => {
-        scheduleUpdate()
-    })
+export const layoutFunctions = {
+    decreaseLayoutWidth,
+    increaseLayoutWidth,
+    decreaseLayoutHeight,
+    increaseLayoutHeight,
+    layoutResetNodes,
+    layoutTitleUp,
+    layoutTitleDown,
+    layoutTitleLeft,
+    layoutTitleRight,
+    toggleLayoutTitle,
+    cancelLayout,
+    saveLayout,
+    toggleLayoutMode,
 }
+
+// export function setupLayoutModePanelListeners() {
+//     $('#decreaseLayoutWidth').on('click', () => {
+//         decreaseLayoutWidth()
+//     })
+//     $('#increaseLayoutWidth').on('click', () => {
+//         increaseLayoutWidth()
+//     })
+//     $('#decreaseLayoutHeight').on('click', () => {
+//         decreaseLayoutHeight()
+//     })
+//     $('#increaseLayoutHeight').on('click', () => {
+//         increaseLayoutHeight()
+//     })
+//     $('#layoutResetNodes').on('click', () => {
+//         layoutResetNodes()
+//     })
+//     $('#layoutTitleUp').on('click', () => {
+//         layoutTitleUp()
+//     })
+//     $('#layoutTitleDown').on('click', () => {
+//         layoutTitleDown()
+//     })
+//     $('#layoutTitleLeft').on('click', () => {
+//         layoutTitleLeft()
+//     })
+//     $('#layoutTitleRight').on('click', () => {
+//         layoutTitleRight()
+//     })
+//     $('#toggleLayoutTitle').on('click', () => {
+//         toggleLayoutTitle()
+//     })
+//     $('#saveLayout').on('click', () => {
+//         saveLayout()
+//     })
+//     $('#cancelLayout').on('click', () => {
+//         cancelLayout()
+//     })
+//     $('#layoutDialog button').on('click', () => {
+//         scheduleUpdate()
+//     })
+//     $('#layoutDialog input').on('click', () => {
+//         scheduleUpdate()
+//     })
+// }

src/simulator/src/listeners.js

@@ -3,7 +3,7 @@ import {
     layoutModeGet,
     tempBuffer,
     layoutUpdate,
-    setupLayoutModePanelListeners,
+    // setupLayoutModePanelListeners,
 } from './layoutMode'
 import simulationArea from './simulationArea'
 import {
@@ -569,7 +569,7 @@ export default function startListeners() {
     })
 
     zoomSliderListeners()
-    setupLayoutModePanelListeners()
+    // setupLayoutModePanelListeners()
     if (!embed) {
         setupTimingListeners()
     }

src/simulator/src/ux.js

@@ -850,7 +850,7 @@ export function fillSubcircuitElements() {
     }
 
     if (subCircuitElementExists) {
-        $('#subcircuitMenu').accordion('refresh')
+        // $('#subcircuitMenu').accordion('refresh')
     } else {
         $('#subcircuitMenu').append('<p>No layout elements available</p>')
     }