fix(gsoc'24): Timing Diagram increase decrease buttons

Author: niladrix719

src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

@@ -34,7 +34,7 @@
                 {{ $t('simulator.panel_body.timing_diagram.units') }}
                 <span id="timing-diagram-log"></span>
             </div>
-            <div id="plot" ref="plotRef">
+            <div id="plot" :style="{ width: plotWidth + 'px', height: plotHeight + 'px' }">
                 <canvas id="plotArea"></canvas>
             </div>
         </div>
@@ -48,6 +48,7 @@ import { timingDiagramButtonActions } from '#/simulator/src/plotArea'
 import TimingDiagramButtons from './TimingDiagramButtons.vue'
 import buttonsJSON from '#/assets/constants/Panels/TimingDiagramPanel/buttons.json'
 import PanelHeader from '../Shared/PanelHeader.vue'
+import { sh } from '#/simulator/src/plotArea.js'
 
 interface TimingDiagramButton {
     title: string
@@ -66,25 +67,22 @@ const plotArea: PlotArea = _plotArea
 const buttons = ref<TimingDiagramButton[]>(buttonsJSON)
 const plotRef = ref<HTMLElement | null>(null)
 const cycleUnits = ref(1000)
+const plotWidth = ref(sh(560));
+const plotHeight = ref(sh(20));
 
 function handleButtonClick(button: string) {
     if (button === 'smaller') {
-        if (plotRef.value) {
-            plotRef.value.style.width = `${Math.max(
-                plotRef.value.offsetWidth - 20,
-                560
-            )}px`
-        }
-        plotArea.resize()
+        plotWidth.value = Math.max(plotWidth.value - sh(20), sh(560));
+        plotArea.resize();
     } else if (button === 'larger') {
-        if (plotRef.value) {
-            plotRef.value.style.width = `${plotRef.value.offsetWidth + 20}px`
-        }
+        plotWidth.value += sh(20);
         plotArea.resize()
     } else if (button === 'smallHeight') {
-        timingDiagramButtonActions.smallHeight()
+        plotHeight.value = Math.max(plotHeight.value - sh(20), sh(20));
+        plotArea.resize()
     } else if (button === 'largeHeight') {
-        timingDiagramButtonActions.largeHeight()
+        plotHeight.value = Math.min(plotHeight.value + sh(20), sh(100));
+        plotArea.resize()
     } else {
         plotArea[button]()
     }