Formula grid

src/components/ParamField.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="param-field">
-            <label>
+            <label class="param-label">
                 {{ displayName }}
                 <input
                     v-if="param.type === ParamType.BOOLEAN"
@@ -36,7 +36,6 @@
                     :class="!status.isValid() ? 'error-field' : ''"
                     :value="value"
                     :placeholder="placehold(param)"
-                    @keyup.enter="growArea($event)"
                     @input="updateString($event)" />
                 <input
                     v-else
@@ -47,15 +46,24 @@
                     :placeholder="placehold(param)"
                     @keyup.enter="blurField($event)"
                     @input="updateString($event)">
+                <div
+                    v-if="param.placeholderAlways"
+                    v-safe-html="param.placeholder"
+                    class="fakePlaceholder" />
             </label>
 
             <div
                 v-if="param.hideDescription && param.description"
                 class="desc-tooltip">
-                <span class="material-icons-sharp">help</span>
-                <div class="desc-tooltip-text shadowed">
-                    {{ param.description }}
-                </div>
+                <span
+                    class="material-icons-sharp"
+                    @mouseenter="popHelp"
+                    @mouseleave="hideHelp">help</span>
+                <Teleport to="body">
+                    <div ref="helpText" class="desc-tooltip-text shadowed">
+                        {{ param.description }}
+                    </div>
+                </Teleport>
             </div>
         </div>
         <p
@@ -76,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-    import {ref, watch} from 'vue'
+    import {ref, onMounted, useTemplateRef, watch} from 'vue'
     import PickColors from 'vue-pick-colors'
 
     import type {ParamInterface} from '../shared/Paramable'
@@ -91,6 +99,33 @@
         status: ValidationStatus
     }>()
 
+    const helpPopup = useTemplateRef('helpText')
+    function popHelp(e: Event) {
+        const help = helpPopup?.value
+        if (!help) return
+        help.style.opacity = '1'
+        help.style.visibility = 'visible'
+        if (e.target instanceof HTMLSpanElement) {
+            const rect = e.target.getBoundingClientRect()
+            const popHeight = help.offsetHeight
+            if (rect.top > popHeight) {
+                help.style.top = rect.top - popHeight - 4 + 'px'
+                help.style.right = '8px'
+            } else if (rect.bottom + popHeight + 4 < window.innerHeight) {
+                help.style.top = rect.bottom + 4 + 'px'
+                help.style.right = '8px'
+            } else {
+                help.style.top = '0px'
+                help.style.right = '42px'
+            }
+        }
+    }
+    function hideHelp() {
+        if (!helpPopup?.value) return
+        helpPopup.value.style.opacity = '0'
+        helpPopup.value.style.visibility = 'hidden'
+    }
+
     const emit = defineEmits(['updateParam'])
     const isColorful =
         props.param.type === ParamType.COLOR
@@ -112,14 +147,59 @@
         const field = e.target
         if (field instanceof HTMLElement) field.blur()
     }
-    function growArea(e: Event) {
-        const area = e.target
-        if (area instanceof HTMLTextAreaElement) {
-            const curheight = area.getBoundingClientRect().height
-            area.style.height = `${curheight + 14}px`
+
+    function growArea(area: HTMLTextAreaElement) {
+        if (area.scrollHeight > area.offsetHeight) {
+            area.style.height = `${area.scrollHeight + 3}px`
         }
     }
 
+    // based on: https://stackoverflow.com/questions/118241
+    // ---------
+    function cssStyle(element: HTMLElement, prop: string) {
+        return window.getComputedStyle(element, null).getPropertyValue(prop)
+    }
+
+    function canvasFont(el: HTMLElement) {
+        const fontWeight = cssStyle(el, 'font-weight') || 'normal'
+        const fontSize = cssStyle(el, 'font-size') || '16px'
+        const fontFamily = cssStyle(el, 'font-family') || 'Times New Roman'
+
+        return `${fontWeight} ${fontSize} ${fontFamily}`
+    }
+
+    const rulerContext = document.createElement('canvas').getContext('2d')
+    function textWidth(text: string, element: HTMLElement) {
+        if (!rulerContext) return 10
+        rulerContext.font = canvasFont(element)
+        return rulerContext.measureText(text).width
+    }
+    // ---------
+
+    function repositionFake(t: HTMLInputElement | HTMLTextAreaElement) {
+        const faker = t.parentElement?.querySelector('.fakePlaceholder')
+        if (faker instanceof HTMLElement) {
+            faker.style.left = textWidth(t.value, t) + 12 + 'px'
+        }
+    }
+
+    onMounted(() => {
+        const field = document.getElementById(props.paramName)
+        if (
+            props.param.type === ParamType.FORMULA
+            && field instanceof HTMLTextAreaElement
+        ) {
+            growArea(field)
+        }
+        if (
+            (props.param.placeholderAlways
+                && field instanceof HTMLInputElement)
+            || field instanceof HTMLTextAreaElement
+        ) {
+            repositionFake(field)
+        }
+    })
+
     function updateBoolean(e: Event) {
         blurField(e)
         const inp = e.target as HTMLInputElement
@@ -134,6 +214,13 @@
             || t instanceof HTMLTextAreaElement
         ) {
             emit('updateParam', t.value)
+            if (t instanceof HTMLTextAreaElement) growArea(t)
+            if (
+                !(t instanceof HTMLSelectElement)
+                && props.param.placeholderAlways
+            ) {
+                repositionFake(t)
+            }
         }
     }
 
@@ -218,6 +305,7 @@
     }
 
     function placehold(par: ParamInterface<ParamType>) {
+        if (par.placeholderAlways) return ''
         if (typeof par.placeholder === 'string') return par.placeholder
         const stringifier = typeFunctions[par.type].derealize
         return stringifier.call(par, par.default as never)
@@ -229,6 +317,10 @@
         font-size: 12px;
     }
 
+    .param-label {
+        position: relative;
+    }
+
     input {
         &[type='text'] {
             border: none;
@@ -247,7 +339,8 @@
         }
     }
 
-    ::placeholder {
+    ::placeholder,
+    .fakePlaceholder {
         color: grey;
         opacity: 0.5;
     }
@@ -260,6 +353,14 @@
         opacity: 0.5;
     }
 
+    .fakePlaceholder {
+        position: absolute;
+        font-size: 14px;
+        left: 10px;
+        bottom: 8px;
+        z-index: 2;
+    }
+
     select {
         border: 1px solid var(--ns-color-black);
         background-color: var(--ns-color-white);
@@ -327,11 +428,10 @@
         }
 
         right: 4px;
-        bottom: 0px;
+        top: 4px;
     }
 
-    .desc-tooltip .desc-tooltip-text {
-        visibility: hidden;
+    .desc-tooltip-text {
         width: 240px;
         background-color: var(--ns-color-white);
         color: var(--ns-color-black);
@@ -340,20 +440,15 @@
         padding: 8px;
         font-size: 12px;
 
-        position: absolute;
-        z-index: 1;
-        bottom: 125%;
+        position: fixed;
+        z-index: 120;
         right: 0;
         margin-left: -120px;
 
         opacity: 0;
+        visibility: hidden;
         transition:
             opacity 0.2s,
             visibility 0.2s;
     }
-
-    .desc-tooltip:hover .desc-tooltip-text {
-        visibility: visible;
-        opacity: 1;
-    }
 </style>

src/shared/Chroma.ts

@@ -13,11 +13,16 @@ the [chroma-js api](https://www.vis4.net/chromajs/). Additional functions
 and facilities for manipulating Chroma colors are documented below.
 
 All of the chroma-js api and operations documented here are also available
-in [mathjs formulas](math.md). In addition, all of the named colors (like
-`red` or `chartreuse`) are available as pre-defined constant symbols, as
-are the color brewer palettes, like `RdBu` or `Set1`. Note the palettes are
-arrays of colors, so to get a specific color from them in a formula you
-need to index them with a 1-based index, e.g., `Set1[5]`.
+in [mathjs formulas](math.md). For example, you can darken a color `x` an
+amount controlled by a number `x` by writing `c.darken(x)`, or desaturate it
+by writing `c.desaturate(x)`, etc.
+
+In addition, all of the named colors (like
+`red` or `chartreuse`, including all CSS (Cascading Style Sheets) named colors)
+are available as pre-defined constant symbols, as are the color brewer
+palettes, like `RdBu` or `Set1`. Note the palettes are arrays of colors,
+so to get a specific color from them in a formula you need to index them
+with a 1-based index, e.g., `Set1[5]`.
 **/
 import type {Color as Chroma} from 'chroma-js'
 import chromaRaw from 'chroma-js'
@@ -59,11 +64,29 @@ export const chroma = function (...args: unknown[]) {
         if (arg instanceof Array && arg.length === 4) {
             return chromaRaw(...(arg as Quad), 'gl')
         }
+        if (typeof arg === 'boolean') {
+            return arg ? chromaRaw('white') : chromaRaw('black').alpha(0)
+        }
         if (typeof arg === 'number') {
-            if (arg <= 1.0) {
-                return chromaRaw(arg, arg, arg, 1, 'gl')
+            // Can't think of any natural meaning for negative numbers,
+            // so just ignore sign
+            const n: number = Math.abs(arg)
+            if (n <= 1.0) {
+                return chromaRaw(n, n, n, 1, 'gl')
+            }
+            if (n > 0xffffff) {
+                // largest number chroma interprets
+                if (n < 0xffffffff) {
+                    // interpret last two digits as alpha
+                    const alpha = n % 0x100
+                    const rest = Math.floor(n / 0x100)
+                    return chromaRaw(rest).alpha(alpha / 0xff)
+                } else {
+                    // what color should huge numbers be?
+                    return chromaRaw('white')
+                }
             }
-            return chromaRaw(arg)
+            return chromaRaw(n)
         }
     }
     if (
@@ -104,18 +127,19 @@ const dummy = chroma('white')
 const chromaConstructor = dummy.constructor
 
 /** md
-#### rainbow(hue: bigint | number)
+#### rainbow(hue: bigint | number, opacity?: number)
 
 This function conveniently allows creation of an opaque color from just
 a "hue angle" in color space, periodically interpreted with the main period
-from 0 to 360. It uses the "oklch" color space provided by chromajs to ensure
-that all of the colors it returns will have approximately the same apparent
-lightness and hue saturation (and hopefully these levels have been selected
-to produce attractive colors).
+from 0 to 360. Optionally, you can also specify an opacity for the resulting
+color, from 1 to 0. It uses the "oklch" color space provided by chromajs
+to ensure that all of the colors it returns will have approximately the same
+apparent lightness and hue saturation (and hopefully these levels have been
+selected to produce attractive colors).
 **/
-export function rainbow(hue: bigint | number): Chroma {
+export function rainbow(hue: bigint | number, opacity = 1): Chroma {
     if (typeof hue === 'bigint') hue = Number(hue % 360n)
-    return chroma.oklch(0.6, 0.25, hue % 360)
+    return chroma.oklch(0.6, 0.25, hue % 360).alpha(opacity)
 }
 
 /** md

src/shared/ParamType.ts

@@ -122,7 +122,9 @@ function validateExtInt(value: string, status: ValidationStatus) {
 
 //Helper function for color types:
 function isColor(value: string) {
-    return value.trim().match(/^(#[0-9A-Fa-f]{3})|(#[0-9A-Fa-f]{6})$/)
+    return value
+        .trim()
+        .match(/^#?([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/)
 }
 
 export const typeFunctions: {
@@ -228,15 +230,17 @@ export const typeFunctions: {
                 )
                 return
             }
-            const freeVars = fmla.freevars.difference(new Set(inputSymbols))
+            const knownSymbols = new Set(inputSymbols)
+            const freeVars = fmla.freevars.difference(knownSymbols)
             status.forbid(
                 freeVars.size,
                 `free variables limited to ${inputSymbols}; `
                     + `please remove '${Array.from(freeVars).join(', ')}'`
             )
+            const freeFuncs = fmla.freefuncs.difference(knownSymbols)
             status.forbid(
-                fmla.freefuncs.size,
-                `unknown functions '${fmla.freefuncs}'`
+                freeFuncs.size,
+                `unknown functions '${Array.from(freeFuncs).join(', ')}'`
             )
         },
         realize: function (value) {

src/shared/Paramable.ts

@@ -103,13 +103,18 @@ export interface ParamInterface<PT extends ParamType> {
     placeholder?: string
     /* **/
     /** md
-:   The placeholder text that appears in the input box for the parameter
-    when that box is empty. This property is really only useful on parameters
-    for which the `required` property is false, because otherwise the input
-    box is not allowed to be empty. If the `placeholder` property is not
-    specified, the string representation of the `default` property is used
-    instead.
+:   The placeholder text that appears in the input box for the parameter.
+    If the `placeholder` property is not specified, the string representation
+    of the `default` property is used instead.
 <!-- -->
+    **/
+    /** md */
+    placeholderAlways?: boolean
+    /* **/
+    /** md
+:   Whether the placeholder should always be displayed, even when something
+    has been entered in the text box. (The usual behavior is to blank the
+    placeholder as soon as there is input.)
     **/
     /** md */
     description?: string
@@ -858,7 +863,7 @@ export class Paramable implements ParamableInterface {
                 const param = this.params[key]
                 if (
                     param.type === ParamType.COLOR
-                    && value.match(/^[0-9a-fA-F]{6}$/)
+                    && value.match(/^[0-9a-fA-F]{3,8}$/)
                 )
                     this.tentativeValues[key] = '#' + value
                 else this.tentativeValues[key] = value