feat(gsoc): convert timing diagram to vue component

src/assets/constants/Panels/TimingDiagramPanel/buttons.json

@@ -0,0 +1,79 @@
+[
+    {
+        "title": "Decrease Size",
+        "icon": "fa-chevron-left",
+        "class": "timing-diagram-smaller",
+        "type": "primary",
+        "click": "smaller"
+    },
+    {
+        "title": "Increase Size",
+        "icon": "fa-chevron-right",
+        "class": "timing-diagram-larger",
+        "type": "primary",
+        "click": "larger"
+    },
+    {
+        "title": "Decrease Height",
+        "icon": "fa-chevron-up",
+        "class": "timing-diagram-small-height",
+        "type": "primary",
+        "click": "smallHeight"
+    },
+    {
+        "title": "Increase Height",
+        "icon": "fa-chevron-down",
+        "class": "timing-diagram-large-height",
+        "type": "primary",
+        "click": "largeHeight"
+    },
+    {
+        "title": "Download As Image",
+        "icon": "fa-download",
+        "class": "timing-diagram-download",
+        "type": "primary",
+        "click": "download"
+    },
+    {
+        "title": "Reset Timing Diagram",
+        "icon": "fa-undo",
+        "class": "timing-diagram-reset",
+        "type": "tertiary",
+        "click": "reset"
+    },
+    {
+        "title": "Autocalibrate Cycle Units",
+        "icon": "fa-magic",
+        "class": "timing-diagram-calibrate",
+        "type": "tertiary",
+        "click": "calibrate"
+    },
+    {
+        "title": "Zoom In",
+        "icon": "fa-search-plus",
+        "class": "timing-diagram-zoom-in",
+        "type": "primary",
+        "click": "zoomIn"
+    },
+    {
+        "title": "Zoom Out",
+        "icon": "fa-search-minus",
+        "class": "timing-diagram-zoom-out",
+        "type": "primary",
+        "click": "zoomOut"
+    },
+    {
+        "title": "Resume auto-scroll",
+        "icon": "fa-play",
+        "class": "timing-diagram-resume",
+        "type": "primary",
+        "click": "resume"
+    },
+    {
+        "title": "Pause auto-scroll",
+        "icon": "fa-pause",
+        "class": "timing-diagram-pause",
+        "type": "primary",
+        "click": "pause"
+    }
+]

src/components/Extra.vue

@@ -33,113 +33,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Timing Diagram Panel -->
-    <div class="timing-diagram-panel draggable-panel">
-        <!-- Timing Diagram Panel -->
-        <div class="panel-header">
-            Timing Diagram
-            <span class="fas fa-minus-square minimize panel-button"></span>
-            <span
-                class="fas fa-external-link-square-alt maximize panel-button-icon"
-            ></span>
-        </div>
-        <div class="panel-body">
-            <div class="timing-diagram-toolbar noSelect">
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Decrease Size"
-                >
-                    <span
-                        class="fas fa-chevron-left timing-diagram-smaller panel-button-icon"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Increase Size"
-                >
-                    <span
-                        class="fas fa-chevron-right timing-diagram-larger panel-button-icon"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Decrease Height"
-                >
-                    <span
-                        class="fas fa-chevron-up timing-diagram-small-height panel-button-icon"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Increase Height"
-                >
-                    <span
-                        class="fas fa-chevron-down timing-diagram-large-height panel-button-icon"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Download As Image"
-                >
-                    <span
-                        class="fas fa-download timing-diagram-download"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--tertiary panel-button"
-                    title="Reset Timing Diagram"
-                >
-                    <span class="fas fa-undo timing-diagram-reset"></span>
-                </button>
-                <button
-                    class="custom-btn--tertiary panel-button"
-                    title="Autocalibrate Cycle Units"
-                >
-                    <span class="fas fa-magic timing-diagram-calibrate"></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Zoom In"
-                >
-                    <span
-                        class="fas fa-search-plus timing-diagram-zoom-in"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Zoom Out"
-                >
-                    <span
-                        class="fas fa-search-minus timing-diagram-zoom-out"
-                    ></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Resume auto-scroll"
-                >
-                    <span class="fas fa-play timing-diagram-resume"></span>
-                </button>
-                <button
-                    class="custom-btn--primary panel-button"
-                    title="Pause auto-scroll"
-                >
-                    <span class="fas fa-pause timing-diagram-pause"></span>
-                </button>
-                1 cycle =
-                <input
-                    id="timing-diagram-units"
-                    type="number"
-                    min="1"
-                    autocomplete="off"
-                    value="1000"
-                />
-                Units
-                <span id="timing-diagram-log"></span>
-            </div>
-            <div id="plot">
-                <canvas id="plotArea"></canvas>
-            </div>
-        </div>
-    </div>
+    <TimingDiagramPanel />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -490,6 +384,7 @@
 import VerilogEditorPanel from './Panels/VerilogEditorPanel/VerilogEditorPanel.vue'
 import ElementsPanel from './Panels/ElementsPanel/ElementsPanel.vue'
 import PropertiesPanel from './Panels/PropertiesPanel/PropertiesPanel.vue'
+import TimingDiagramPanel from './Panels/TimingDiagramPanel/TimingDiagramPanel.vue'
 import TabsBar from './TabsBar/TabsBar.vue'
 import CombinationalAnalysis from './DialogBox/CombinationalAnalysis.vue'
 import HexBinDec from './DialogBox/HexBinDec.vue'

src/components/Panels/Shared/PanelHeader.vue

@@ -11,3 +11,12 @@ const props = defineProps({
     headerTitle: { type: String, default: 'Panel Header' },
 })
 </script>
+
+<style scoped>
+.fa-external-link-square-alt {
+    cursor: pointer;
+}
+.fa-minus-square {
+    cursor: pointer;
+}
+</style>

src/components/Panels/TimingDiagramPanel/TimingDiagramButtons.vue

@@ -0,0 +1,26 @@
+<template>
+    <button :class="'custom-btn--' + type + ' panel-button'" :title="title">
+        <span :class="'fas ' + icon + ' ' + btnClass"></span>
+    </button>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    icon: {
+        type: String,
+        required: true,
+    },
+    btnClass: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        required: true,
+    },
+})
+</script>

src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="timing-diagram-panel draggable-panel">
+        <!-- Timing Diagram Panel -->
+        <PanelHeader
+            :header-title="$t('simulator.panel_header.timing_diagram')"
+        />
+        <div class="panel-body">
+            <div class="timing-diagram-toolbar noSelect">
+                <TimingDiagramButtons
+                    v-for="button in buttons"
+                    :key="button.title"
+                    :title="button.title"
+                    :icon="button.icon"
+                    :btn-class="button.class"
+                    class="timing-diagram-panel-button"
+                    :type="button.type"
+                    @click="
+                        () => {
+                            handleButtonClick(button.click)
+                        }
+                    "
+                />
+                {{ $t('simulator.panel_body.timing_diagram.one_cycle') }}
+                <input
+                    id="timing-diagram-units"
+                    type="number"
+                    min="1"
+                    autocomplete="off"
+                    :value="cycleUnits"
+                    @change="handleUnitsChange"
+                    @paste="handleUnitsChange"
+                    @keyup="handleUnitsChange"
+                />
+                {{ $t('simulator.panel_body.timing_diagram.units') }}
+                <span id="timing-diagram-log"></span>
+            </div>
+            <div id="plot" ref="plotRef">
+                <canvas id="plotArea"></canvas>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import _plotArea from '#/simulator/src/plotArea'
+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'
+
+interface TimingDiagramButton {
+    title: string
+    icon: string
+    class: string
+    type: string
+    click: string
+}
+
+interface PlotArea {
+    resize: () => void
+    [key: string]: () => void
+}
+
+const plotArea: PlotArea = _plotArea
+const buttons = ref<TimingDiagramButton[]>(buttonsJSON)
+const plotRef = ref<HTMLElement | null>(null)
+const cycleUnits = ref(1000)
+
+function handleButtonClick(button: string) {
+    console.log('clicked', button)
+    if (button === 'smaller') {
+        if (plotRef.value) {
+            plotRef.value.style.width = `${Math.max(
+                plotRef.value.offsetWidth - 20,
+                560
+            )}px`
+        }
+        plotArea.resize()
+    } else if (button === 'larger') {
+        if (plotRef.value) {
+            plotRef.value.style.width = `${plotRef.value.offsetWidth + 20}px`
+        }
+        plotArea.resize()
+    } else if (button === 'smallHeight') {
+        timingDiagramButtonActions.smallHeight()
+    } else if (button === 'largeHeight') {
+        timingDiagramButtonActions.largeHeight()
+    } else {
+        plotArea[button]()
+    }
+}
+
+function handleUnitsChange(event: Event) {
+    const inputElem = event.target as HTMLInputElement
+    const timeUnits = parseInt(inputElem.value, 10)
+    if (isNaN(timeUnits) || timeUnits < 1) return
+    plotArea.cycleUnit = timeUnits
+}
+</script>
+
+<style scoped>
+.timing-diagram-panel-button {
+    margin-right: 5px;
+}
+</style>
+
+<!-- TODO: input element to vue, remove remaining dom manipulation, header component -->

src/locales/en.json

@@ -84,7 +84,8 @@
                 }
             },
             "timing_diagram": {
-                "one_cycle_unit_html": "1 cycle = <br/><input id='timing-diagram-units' type='number' min='1' autocomplete='off' value='1000'><br/>Units"
+                "one_cycle": "1 Cycle =",
+                "units": "Units"
             },
             "verilog_module": {
                 "reset_code": "Reset Code",

src/locales/hi.json

@@ -84,7 +84,8 @@
                 }
             },
             "timing_diagram": {
-                "one_cycle_unit_html": "1 साइकिल = <br/><input id='timing-diagram-units' type='number' min='1' autocomplete='off' value='1000'><br/>यूनिट"
+                "one_cycle": "1 साइकिल =",
+                "units": "यूनिट्स"
             },
             "verilog_module": {
                 "reset_code": "कोड रिसेट करें",