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

@@ -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 {

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,

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"

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
+    }
 }

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
 }