gaugeit.js 0.1.0 → 0.1.1

package/dist/gaugeit.umd.js

@@ -1,4 +1,4 @@
-/*! Gaugeit.js v0.1.0 | MIT License | https://github.com/kasperikoski/gaugeit.js#readme */
+/*! Gaugeit.js v0.1.1 | MIT License | https://github.com/kasperikoski/gaugeit.js#readme */
 (function (root, factory) {
   if (typeof define === "function" && define.amd) define([], factory);
   else if (typeof module === "object" && module.exports) module.exports = factory();
@@ -882,7 +882,13 @@ var Gaugeit = (() => {
     if (!(light == null ? void 0 : light.visible)) return;
     const point = resolveLightPosition(light, options);
     const radius = Math.max(1, finiteNumber(light.radius, 8));
-    const halo = light.glow ? radius * 2.96 : radius;
+    const glowRadius = Math.max(0, finiteNumber(light.glowRadius, radius * 1.82));
+    const flickerGlowRadius = light.flicker ? Math.min(1, Math.max(0, finiteNumber(light.flickerGlowRadius, 0))) : 0;
+    const maximumGlowRadius = glowRadius * (1 + flickerGlowRadius);
+    const glowSharpness = Math.min(1, Math.max(0, finiteNumber(light.glowSharpness, 0)));
+    const maximumBlur = glowRadius > 0 ? Math.max(1.4, glowRadius * 0.38) : 0;
+    const glowBlur = maximumBlur * (1 - glowSharpness);
+    const halo = light.glow ? maximumGlowRadius + glowBlur * 3 + (maximumGlowRadius > 0 ? 1e-9 : 0) : radius;
     const bezel = radius + Math.max(1.5, radius * 0.18);
     const extent = Math.max(halo, bezel);
     includeRect(bounds, point.x - extent, point.y - extent, extent * 2, extent * 2);
@@ -1328,28 +1334,36 @@ var Gaugeit = (() => {
     },
     light: {
       visible: false,
-      x: 160,
+      x: 93,
       y: 110,
       radius: 8,
-      color: "amber",
+      glowRadius: 20,
+      glowSharpness: 0,
+      color: "red",
       customColor: "",
       offColor: "#f3ead6",
       offEdgeColor: "#817768",
       bezelColor: "#4b5563",
       bezelHighlightColor: "#f8fafc",
       opacity: 1,
+      glowOpacity: 0.15,
       on: false,
       glow: true,
-      pulse: true,
+      pulse: false,
       pulseInterval: 2600,
       blink: false,
       blinkInterval: 1e3,
+      flicker: true,
+      flickerIntensity: 0.1,
+      flickerGlowRadius: 0.1,
+      flickerMinInterval: 45,
+      flickerMaxInterval: 140,
       trigger: {
-        mode: "manual",
+        mode: "below",
         source: "target",
-        value: 0,
+        value: 15,
         min: 0,
-        max: 0
+        max: 15
       }
     },
     readout: {
@@ -1652,27 +1666,63 @@ var Gaugeit = (() => {
     tape.colorByZone = tape.colorByZone === true;
   }
   function validateLight(light) {
+    const defaults2 = BASE_DEFAULTS.light;
     light.visible = light.visible === true;
-    light.x = finiteNumber(light.x, 160);
-    light.y = finiteNumber(light.y, 110);
-    light.radius = Math.max(1, finiteNumber(light.radius, 8));
-    light.color = VALID_LIGHT_COLORS.has(light.color) ? light.color : "amber";
-    light.customColor = light.customColor === null || light.customColor === void 0 ? "" : String(light.customColor).trim();
-    light.offColor = normalizeColor(light.offColor, "#f3ead6");
-    light.offEdgeColor = normalizeColor(light.offEdgeColor, "#817768");
-    light.bezelColor = normalizeColor(light.bezelColor, "#4b5563");
-    light.bezelHighlightColor = normalizeColor(light.bezelHighlightColor, "#f8fafc");
-    light.opacity = Math.min(1, Math.max(0, finiteNumber(light.opacity, 1)));
+    light.x = finiteNumber(light.x, defaults2.x);
+    light.y = finiteNumber(light.y, defaults2.y);
+    light.radius = Math.max(1, finiteNumber(light.radius, defaults2.radius));
+    light.glowRadius = light.glowRadius === null || light.glowRadius === void 0 ? light.radius * 1.82 : Math.max(0, finiteNumber(light.glowRadius, defaults2.glowRadius));
+    light.glowSharpness = Math.min(
+      1,
+      Math.max(0, finiteNumber(light.glowSharpness, defaults2.glowSharpness))
+    );
+    light.color = VALID_LIGHT_COLORS.has(light.color) ? light.color : defaults2.color;
+    light.customColor = light.customColor === null || light.customColor === void 0 ? defaults2.customColor : String(light.customColor).trim();
+    light.offColor = normalizeColor(light.offColor, defaults2.offColor);
+    light.offEdgeColor = normalizeColor(light.offEdgeColor, defaults2.offEdgeColor);
+    light.bezelColor = normalizeColor(light.bezelColor, defaults2.bezelColor);
+    light.bezelHighlightColor = normalizeColor(
+      light.bezelHighlightColor,
+      defaults2.bezelHighlightColor
+    );
+    light.opacity = Math.min(1, Math.max(0, finiteNumber(light.opacity, defaults2.opacity)));
+    light.glowOpacity = Math.min(
+      1,
+      Math.max(0, finiteNumber(light.glowOpacity, defaults2.glowOpacity))
+    );
     light.on = light.on === true;
     light.glow = light.glow !== false;
-    light.pulse = light.pulse !== false;
-    light.pulseInterval = Math.max(400, finiteNumber(light.pulseInterval, 2600));
+    light.pulse = light.pulse === true;
+    light.pulseInterval = Math.max(400, finiteNumber(light.pulseInterval, defaults2.pulseInterval));
     light.blink = light.blink === true;
-    light.blinkInterval = Math.max(100, finiteNumber(light.blinkInterval, 1e3));
+    light.blinkInterval = Math.max(100, finiteNumber(light.blinkInterval, defaults2.blinkInterval));
+    light.flicker = light.flicker === true;
+    light.flickerIntensity = Math.min(
+      1,
+      Math.max(0, finiteNumber(light.flickerIntensity, defaults2.flickerIntensity))
+    );
+    light.flickerGlowRadius = Math.min(
+      1,
+      Math.max(0, finiteNumber(light.flickerGlowRadius, defaults2.flickerGlowRadius))
+    );
+    light.flickerMinInterval = Math.max(
+      16,
+      finiteNumber(light.flickerMinInterval, defaults2.flickerMinInterval)
+    );
+    light.flickerMaxInterval = Math.max(
+      16,
+      finiteNumber(light.flickerMaxInterval, defaults2.flickerMaxInterval)
+    );
+    if (light.flickerMaxInterval < light.flickerMinInterval) {
+      [light.flickerMinInterval, light.flickerMaxInterval] = [
+        light.flickerMaxInterval,
+        light.flickerMinInterval
+      ];
+    }
     light.trigger = isPlainObject(light.trigger) ? light.trigger : {};
-    light.trigger.mode = VALID_LIGHT_TRIGGER_MODES.has(light.trigger.mode) ? light.trigger.mode : "manual";
-    light.trigger.source = VALID_LIGHT_TRIGGER_SOURCES.has(light.trigger.source) ? light.trigger.source : "target";
-    light.trigger.value = finiteNumber(light.trigger.value, 0);
+    light.trigger.mode = VALID_LIGHT_TRIGGER_MODES.has(light.trigger.mode) ? light.trigger.mode : defaults2.trigger.mode;
+    light.trigger.source = VALID_LIGHT_TRIGGER_SOURCES.has(light.trigger.source) ? light.trigger.source : defaults2.trigger.source;
+    light.trigger.value = finiteNumber(light.trigger.value, defaults2.trigger.value);
     light.trigger.min = finiteNumber(light.trigger.min, light.trigger.value);
     light.trigger.max = finiteNumber(light.trigger.max, light.trigger.value);
     if (light.trigger.max < light.trigger.min) {
@@ -2793,17 +2843,17 @@ var Gaugeit = (() => {
       if (!(light == null ? void 0 : light.visible)) return null;
       const { x, y } = resolveLightPosition(light, options);
       const palette = resolvePalette(light);
-      const colorName = Object.prototype.hasOwnProperty.call(LIGHT_PALETTES, light.color) ? light.color : "amber";
+      const colorName = Object.prototype.hasOwnProperty.call(LIGHT_PALETTES, light.color) ? light.color : "red";
       const glowFilterId = `${renderer.id}-light-glow`;
       const onGradientId = `${renderer.id}-light-on`;
       const offGradientId = `${renderer.id}-light-off`;
       const bezelGradientId = `${renderer.id}-light-bezel`;
       const defs = svgElement("defs");
       defs.append(
-        createGlowFilter(glowFilterId, light.radius),
+        createGlowFilter(glowFilterId, light.glowRadius, light.glowSharpness),
         createBulbGradient(onGradientId, {
-          center: "#ffffff",
-          highlight: palette.highlight,
+          center: palette.highlight,
+          highlight: palette.core,
           middle: palette.core,
           edge: palette.rim
         }),
@@ -2826,6 +2876,8 @@ var Gaugeit = (() => {
       lamp.style.setProperty("--gaugeit-light-blink-duration", `${light.blinkInterval}ms`);
       lamp.style.setProperty("--gaugeit-light-pulse-duration", `${light.pulseInterval}ms`);
       lamp.style.setProperty("--gaugeit-light-opacity", String(light.opacity));
+      lamp.style.setProperty("--gaugeit-light-on-opacity", String(light.opacity));
+      lamp.style.setProperty("--gaugeit-light-glow-opacity", String(light.glowOpacity));
       const bezel = svgElement("circle", {
         class: "gaugeit__light-bezel",
         cx: 0,
@@ -2848,9 +2900,7 @@ var Gaugeit = (() => {
         radius: light.radius,
         gradientId: offGradientId,
         edgeColor: light.offEdgeColor,
-        glowColor: null,
-        glowFilterId: null,
-        sparkleOpacity: 0.58,
+        sparkleOpacity: 0.24,
         shadeOpacity: 0.14
       });
       const onVisual = createLampVisual({
@@ -2858,13 +2908,18 @@ var Gaugeit = (() => {
         radius: light.radius,
         gradientId: onGradientId,
         edgeColor: palette.rim,
-        glowColor: palette.glow,
-        glowFilterId,
-        sparkleOpacity: 0.72,
+        sparkleOpacity: 0.26,
         shadeOpacity: 0.1
       });
-      lamp.append(bezel, bezelHighlight, offVisual, onVisual);
+      const glowVisual = createGlowVisual({
+        radius: light.glowRadius,
+        color: palette.glow,
+        filterId: glowFilterId
+      });
+      lamp.append(glowVisual, bezel, bezelHighlight, offVisual, onVisual);
       group.append(lamp);
+      const glowElement = glowVisual.querySelector(".gaugeit__light-glow");
+      let flickerTimer = null;
       return {
         update(value, state = {}) {
           var _a;
@@ -2872,13 +2927,54 @@ var Gaugeit = (() => {
           const active = lightIsActive(light, sample);
           const blinking = active && light.blink;
           const pulsing = active && light.pulse && !blinking;
+          const flickering = active && light.flicker && (light.flickerIntensity > 0 || light.flickerGlowRadius > 0) && !prefersReducedMotion();
           lamp.classList.toggle("is-on", active);
           lamp.classList.toggle("is-blinking", blinking);
           lamp.classList.toggle("is-pulsing", pulsing);
+          lamp.classList.toggle("is-flickering", flickering);
           lamp.classList.toggle("has-glow", light.glow);
           lamp.setAttribute("data-gaugeit-light-state", active ? "on" : "off");
+          setFlickerRunning(flickering);
+        },
+        destroy() {
+          stopFlicker();
         }
       };
+      function setFlickerRunning(enabled) {
+        if (!enabled) {
+          stopFlicker();
+          return;
+        }
+        if (flickerTimer !== null) return;
+        updateFlicker();
+        scheduleFlicker();
+      }
+      function scheduleFlicker() {
+        const delay = randomBetween(light.flickerMinInterval, light.flickerMaxInterval);
+        flickerTimer = setTimeout(() => {
+          flickerTimer = null;
+          updateFlicker();
+          scheduleFlicker();
+        }, delay);
+      }
+      function updateFlicker() {
+        const lightLevel = 1 - Math.random() * light.flickerIntensity;
+        const onOpacity = light.opacity * lightLevel;
+        const glowOpacity = light.glowOpacity * lightLevel;
+        lamp.style.setProperty("--gaugeit-light-on-opacity", onOpacity.toFixed(3));
+        lamp.style.setProperty("--gaugeit-light-glow-opacity", glowOpacity.toFixed(3));
+        if (glowElement) {
+          const variation = randomBetween(-light.flickerGlowRadius, light.flickerGlowRadius);
+          glowElement.setAttribute("r", String(light.glowRadius * (1 + variation)));
+        }
+      }
+      function stopFlicker() {
+        if (flickerTimer !== null) clearTimeout(flickerTimer);
+        flickerTimer = null;
+        lamp.style.setProperty("--gaugeit-light-on-opacity", String(light.opacity));
+        lamp.style.setProperty("--gaugeit-light-glow-opacity", String(light.glowOpacity));
+        if (glowElement) glowElement.setAttribute("r", String(light.glowRadius));
+      }
     }
   };
   function createLampVisual({
@@ -2886,8 +2982,6 @@ var Gaugeit = (() => {
     radius,
     gradientId,
     edgeColor,
-    glowColor,
-    glowFilterId,
     sparkleOpacity,
     shadeOpacity
   }) {
@@ -2895,16 +2989,6 @@ var Gaugeit = (() => {
       class: `gaugeit__light-emission gaugeit__light-emission--${state}`,
       "data-gaugeit-light-visual": state
     });
-    if (glowColor && glowFilterId) {
-      visual.append(svgElement("circle", {
-        class: "gaugeit__light-glow",
-        cx: 0,
-        cy: 0,
-        r: radius * 1.82,
-        fill: glowColor,
-        filter: `url(#${glowFilterId})`
-      }));
-    }
     visual.append(
       svgElement("circle", {
         class: `gaugeit__light-bulb gaugeit__light-bulb--${state}`,
@@ -2933,18 +3017,33 @@ var Gaugeit = (() => {
     );
     return visual;
   }
+  function createGlowVisual({ radius, color, filterId }) {
+    const visual = svgElement("g", {
+      class: "gaugeit__light-glow-emission",
+      "data-gaugeit-light-visual": "glow"
+    });
+    visual.append(svgElement("circle", {
+      class: "gaugeit__light-glow",
+      cx: 0,
+      cy: 0,
+      r: radius,
+      fill: color,
+      filter: `url(#${filterId})`
+    }));
+    return visual;
+  }
   function resolvePalette(light) {
-    const named = LIGHT_PALETTES[light.color] || LIGHT_PALETTES.amber;
+    const named = LIGHT_PALETTES[light.color] || LIGHT_PALETTES.red;
     const custom = String(light.customColor || "").trim();
     if (!custom) return named;
     return {
       core: custom,
-      highlight: "#ffffff",
+      highlight: custom,
       glow: custom,
       rim: custom
     };
   }
-  function createGlowFilter(id, radius) {
+  function createGlowFilter(id, glowRadius, sharpness) {
     const filter = svgElement("filter", {
       id,
       x: "-120%",
@@ -2952,11 +3051,18 @@ var Gaugeit = (() => {
       width: "340%",
       height: "340%"
     });
+    const maximumBlur = Math.max(1.4, glowRadius * 0.38);
     filter.append(svgElement("feGaussianBlur", {
-      stdDeviation: Math.max(1.4, radius * 0.38)
+      stdDeviation: maximumBlur * (1 - sharpness)
     }));
     return filter;
   }
+  function randomBetween(min, max) {
+    return min + Math.random() * (max - min);
+  }
+  function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
   function createBulbGradient(id, colors) {
     const gradient = svgElement("radialGradient", {
       id,
@@ -3044,13 +3150,6 @@ var Gaugeit = (() => {
         width: 8,
         cap: { radius: 7, stackOrder: "above" }
       },
-      light: {
-        visible: false,
-        x: 160,
-        y: 142,
-        radius: 7,
-        color: "amber"
-      },
       readout: {
         title: { visible: false, x: "auto", y: 35 },
         value: { visible: false, x: 160, y: 130, fontSize: 30 },
@@ -3139,13 +3238,6 @@ var Gaugeit = (() => {
           strokeWidth: 2
         }
       },
-      light: {
-        visible: false,
-        x: 112,
-        y: 112,
-        radius: 8,
-        color: "amber"
-      },
       readout: {
         title: {
           visible: true,
@@ -3237,13 +3329,6 @@ var Gaugeit = (() => {
           strokeWidth: 2
         }
       },
-      light: {
-        visible: false,
-        x: 160,
-        y: 151,
-        radius: 7,
-        color: "amber"
-      },
       readout: {
         title: { visible: false, x: "auto", y: 140 },
         value: { visible: false, x: 160, y: 220, fontSize: 33 },
@@ -3330,16 +3415,6 @@ var Gaugeit = (() => {
           strokeWidth: 2
         }
       },
-      light: {
-        visible: false,
-        x: 108,
-        y: 110,
-        radius: 10,
-        color: "amber",
-        blink: false,
-        blinkInterval: 1e3,
-        trigger: { mode: "below", source: "target", value: 15, min: 0, max: 15 }
-      },
       readout: {
         title: {
           visible: true,
@@ -3870,13 +3945,6 @@ var Gaugeit = (() => {
         strokeWidth: 1.2
       }
     },
-    light: {
-      visible: false,
-      x: 72,
-      y: 60,
-      radius: 8,
-      color: "amber"
-    },
     readout: {
       title: {
         visible: true,
@@ -4111,13 +4179,6 @@ var Gaugeit = (() => {
           strokeWidth: 2
         }
       },
-      light: {
-        visible: false,
-        x: 112,
-        y: 205,
-        radius: 8,
-        color: "amber"
-      },
       readout: {
         title: {
           visible: true,
@@ -4467,13 +4528,6 @@ var Gaugeit = (() => {
         { min: 20, max: 80, color: "transparent" },
         { min: 80, max: 100, color: "#15803d" }
       ],
-      light: {
-        visible: false,
-        x: 72,
-        y: 46,
-        radius: 8,
-        color: "amber"
-      },
       readout: {
         title: {
           visible: true,
@@ -4688,7 +4742,7 @@ var Gaugeit = (() => {
     resolveLightPosition
   });
   var types = builtInTypes;
-  var VERSION = "0.1.0";
+  var VERSION = "0.1.1";
   var Gaugeit = Object.freeze({
     VERSION,
     Gauge,