From 3191480c85e3f4efb88acdc811cea1194f5575dd Mon Sep 17 00:00:00 2001
From: maxd0328 <52940632+maxd0328@users.noreply.github.com>
Date: Tue, 28 May 2024 05:10:10 +0300
Subject: [PATCH] Code restructuring for UI development. (#338)

* Added support for requesting aspect ratios to visualizers
* Added support for parameters to request descriptions in tooltip rather than always displayed.

---------

Co-authored-by: Max Derbenwick <M.A.Derbenwick@student.tudelft.nl>
Co-authored-by: Kaldis Berzins <51906114+kaldis-berzins@users.noreply.github.com>
---
 src/shared/Paramable.ts                           |  3 +++
 src/views/Scope.vue                               | 11 +++--------
 src/visualizers-workbench/P5VisualizerTemplate.ts |  9 +++++++++
 src/visualizers/P5Visualizer.ts                   |  9 +++++++++
 src/visualizers/VisualizerInterface.ts            | 14 ++++++++++++++
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/shared/Paramable.ts b/src/shared/Paramable.ts
index b4bb01a5..446baf36 100644
--- a/src/shared/Paramable.ts
+++ b/src/shared/Paramable.ts
@@ -85,6 +85,9 @@ export interface ParamInterface {
 
     // Additional explanation text to display:
     description?: string
+
+    // Option to hide the description in a tooltip:
+    hideDescription?: boolean
 }
 
 export interface ParamableInterface {
diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index c6efc63b..330184d3 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -123,14 +123,9 @@ implemented visualizers.
             },
         },
         data: function () {
-            const visualizers = []
-            const sequences = []
-            for (const vizKey in VISUALIZERS) {
-                visualizers.push(VISUALIZERS[vizKey])
-            }
-            for (const seqKey in SEQUENCES) {
-                sequences.push(SEQUENCES[seqKey])
-            }
+            const visualizers = Object.values(VISUALIZERS)
+            const sequences = Object.values(SEQUENCES)
+
             const state = {
                 visualizers: visualizers,
                 sequences: sequences,
diff --git a/src/visualizers-workbench/P5VisualizerTemplate.ts b/src/visualizers-workbench/P5VisualizerTemplate.ts
index 066260e9..b9d6fb3b 100644
--- a/src/visualizers-workbench/P5VisualizerTemplate.ts
+++ b/src/visualizers-workbench/P5VisualizerTemplate.ts
@@ -228,6 +228,15 @@ class P5VisualizerTemplate extends P5Visualizer {
             sketch.loop()
         }
     }
+
+    // === Aspect ratios ===
+    // If this visualizer would like a canvas with a particular aspect ratio,
+    // such can be requested here. A value of `undefined` indicates no desired
+    // aspect ratio, but a number greater than 0 can be used instead if a
+    // specific aspect ratio is desired. The aspect ratio is defined as:
+    // width / height
+    // requestedAspectRatio(): number | undefined {
+    // }
 }
 /** md
 ## The "sequence progress bar"
diff --git a/src/visualizers/P5Visualizer.ts b/src/visualizers/P5Visualizer.ts
index 04406aa5..c3664c7b 100644
--- a/src/visualizers/P5Visualizer.ts
+++ b/src/visualizers/P5Visualizer.ts
@@ -242,4 +242,13 @@ export abstract class P5Visualizer
        visualizer to depart a div that it's not inhabiting, or to inhabit
        a div that it's already inhabiting, nothing will happen.
     */
+
+    /* By default, a P5 visualizer returns undefined from this function,
+     * meaning it will not request an aspect ratio and instead be given a
+     * canvas of any arbitrary width and height. Visualizers can override
+     * this to request a specific aspect ratio.
+     */
+    requestedAspectRatio(): number | undefined {
+        return undefined
+    }
 }
diff --git a/src/visualizers/VisualizerInterface.ts b/src/visualizers/VisualizerInterface.ts
index 6c8b693d..7bf3c98e 100644
--- a/src/visualizers/VisualizerInterface.ts
+++ b/src/visualizers/VisualizerInterface.ts
@@ -60,4 +60,18 @@ export interface VisualizerInterface extends ParamableInterface {
      * @param element HTMLElement The DOM node the visualizer was inhabit()ing
      */
     depart(element: HTMLElement): void
+
+    /**
+     * Provides a way for visualizers to request a specific aspect ratio for
+     * its canvas. This aspect ratio is specified as a positive n > 0 where
+     * n = width/height, meaning:
+     *  0 < n < 1:  The canvas is taller than it is wide
+     *  n = 1:      The canvas is a square
+     *  n > 1:      The canvas is wider than it is tall
+     * If the visualizer does not wish to request a specific aspect ratio and
+     * will instead work with whatever is given, this function may return
+     * `undefined` instead.
+     * @return the aspect ratio requested by the visualizer, or undefined if any
+     */
+    requestedAspectRatio(): number | undefined
 }