@vectoriox/iox-builder 1.4.16 → 1.4.18

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1097,6 +1097,16 @@ class InteractionEngineService {
             return;
         const cleanups = [];
         for (const ix of node.interactions) {
+            // For entrance-type triggers, freeze the target at the animation's
+            // starting frame immediately so it is never briefly visible before
+            // the trigger fires (avoids the flash-then-animate flicker).
+            if (ix.trigger === 'pageLoad' || ix.trigger === 'viewportEnter') {
+                for (const action of ix.actions) {
+                    const target = this.resolveTarget(node, action);
+                    if (target)
+                        this.applyPreState(target, action);
+                }
+            }
             const cleanup = this.attachInteraction(node, ix, ref.element);
             cleanups.push({ node, interaction: ix, cleanup });
         }
@@ -1111,11 +1121,14 @@ class InteractionEngineService {
             entry.cleanup();
         }
         this.attached.delete(node);
-        // Cancelling Web Animations removes fill:'forwards' committed styles,
-        // returning the element to its natural CSS state.
+        // Cancel Web Animations and strip any inline pre-state styles that
+        // were applied by applyPreState() so the element returns to its natural CSS state.
         const ref = this.overlayService.getNodeRef(node);
         if (ref) {
             ref.element.getAnimations().forEach(a => a.cancel());
+            ref.element.style.removeProperty('opacity');
+            ref.element.style.removeProperty('transform');
+            ref.element.style.removeProperty('visibility');
         }
     }
     /** Re-attach interactions after they have been edited in the panel. */
@@ -1234,13 +1247,34 @@ class InteractionEngineService {
         const { keyframes } = this.buildAnimation(action);
         if (!keyframes.length)
             return;
+        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
+        // This eliminates any flicker during the delay period.
         element.animate(keyframes, {
             duration: action.duration,
             delay: action.delay,
             easing: action.easing,
-            fill: 'forwards',
+            fill: 'both',
         });
     }
+    /**
+     * Freeze an element at the animation's starting frame immediately, before any
+     * trigger fires. Without this, entrance animations (fadeIn, moveUp, …) show the
+     * element at its natural visible state for the time between mount and trigger —
+     * causing a visible-then-disappear-then-animate flicker.
+     *
+     * Only call this for triggers that will eventually animate the element in
+     * (pageLoad, viewportEnter). Click/hover triggers must NOT pre-hide the element
+     * because the element should remain normally visible until interacted with.
+     */
+    applyPreState(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        const first = keyframes[0];
+        for (const [prop, val] of Object.entries(first)) {
+            element.style[prop] = String(val);
+        }
+    }
     reverseAction(element, action) {
         const { keyframes } = this.buildAnimation(action);
         if (!keyframes.length)
@@ -1484,10 +1518,12 @@ var TraitInputType;
     TraitInputType["DirectionalSize"] = "directionalSize";
     TraitInputType["SelectButton"] = "selectButton";
     TraitInputType["Scrub"] = "scrub";
+    TraitInputType["Range"] = "range";
     TraitInputType["Icon"] = "icon";
     TraitInputType["Media"] = "media";
     TraitInputType["FontFamily"] = "fontFamily";
     TraitInputType["GridTemplate"] = "gridTemplate";
+    TraitInputType["SectionLabel"] = "sectionLabel";
 })(TraitInputType || (TraitInputType = {}));
 function generateNodeId() {
     return Math.random().toString(36).substr(2, 9);
@@ -1547,6 +1583,8 @@ function resolveTraitControllerType(type) {
         case TraitInputType.DirectionalSize: return 'directionalSize';
         case TraitInputType.SelectButton: return 'selectButton';
         case TraitInputType.Scrub: return 'scrub';
+        case TraitInputType.Range: return 'range';
+        case TraitInputType.SectionLabel: return 'sectionLabel';
         case TraitInputType.Icon: return 'icon';
         case TraitInputType.Media: return 'media';
         case TraitInputType.FontFamily: return 'select';
@@ -1559,6 +1597,7 @@ function resolveTraitOptions(trait) {
         trait.type === TraitInputType.DirectionalSize ||
         trait.type === TraitInputType.SelectButton ||
         trait.type === TraitInputType.Scrub ||
+        trait.type === TraitInputType.Range ||
         trait.type === TraitInputType.Media) {
         return trait.options;
     }
@@ -1756,36 +1795,41 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
                 'grab', 'grabbing', 'crosshair', 'zoom-in', 'zoom-out', 'none',
             ], 'auto'),
             // ── Shadow ────────────────────────────────────────────
+            new TraitConfig('_sep_shadow', 'Shadow', TraitInputType.SectionLabel),
             new TraitConfig('boxShadow', 'Box Shadow', TraitInputType.Text, undefined, ''),
             new TraitConfig('textShadow', 'Text Shadow', TraitInputType.Text, undefined, ''),
             // ── Transform (virtual — composed to CSS transform: …) ─
+            new TraitConfig('_sep_transform', 'Transform', TraitInputType.SectionLabel),
             new TraitConfig('translateX', 'TX', TraitInputType.Scrub, { min: -2000, max: 2000, step: 1, units: UNITS_ALL }, '0px', true),
             new TraitConfig('translateY', 'TY', TraitInputType.Scrub, { min: -2000, max: 2000, step: 1, units: UNITS_ALL }, '0px', true),
-            new TraitConfig('scaleX', 'SX', TraitInputType.Scrub, { min: 0, max: 5, step: 0.01, units: [''] }, '1', true),
-            new TraitConfig('scaleY', 'SY', TraitInputType.Scrub, { min: 0, max: 5, step: 0.01, units: [''] }, '1', true),
-            new TraitConfig('rotate', 'Rot', TraitInputType.Scrub, { min: -360, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
-            new TraitConfig('skewX', 'SkX', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
-            new TraitConfig('skewY', 'SkY', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('scaleX', 'Scale X', TraitInputType.Range, { min: 0, max: 3, step: 0.01, showExtremes: false, showValue: true, compact: true }, '1'),
+            new TraitConfig('scaleY', 'Scale Y', TraitInputType.Range, { min: 0, max: 3, step: 0.01, showExtremes: false, showValue: true, compact: true }, '1'),
+            new TraitConfig('rotate', 'Rotate', TraitInputType.Scrub, { min: -360, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('skewX', 'Skew X', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('skewY', 'Skew Y', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
             // ── Filter (virtual — composed to CSS filter: …) ──────
+            new TraitConfig('_sep_filter', 'Filter', TraitInputType.SectionLabel),
             new TraitConfig('filterBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
-            new TraitConfig('filterBrightness', 'Bright', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
-            new TraitConfig('filterContrast', 'Contr', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
-            new TraitConfig('filterGrayscale', 'Gray', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
-            new TraitConfig('filterSaturate', 'Sat', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
-            new TraitConfig('filterHueRotate', 'Hue', TraitInputType.Scrub, { min: 0, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
-            new TraitConfig('filterSepia', 'Sepia', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
-            new TraitConfig('filterInvert', 'Invert', TraitInputType.Scrub, { min: 0, max: 1, step: 0.05, units: [''] }, '0', true),
+            new TraitConfig('filterHueRotate', 'Hue Rotate', TraitInputType.Scrub, { min: 0, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
+            new TraitConfig('filterBrightness', 'Brightness', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1'),
+            new TraitConfig('filterContrast', 'Contrast', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1'),
+            new TraitConfig('filterSaturate', 'Saturate', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1'),
+            new TraitConfig('filterGrayscale', 'Grayscale', TraitInputType.Range, { min: 0, max: 1, step: 0.05, showExtremes: false, showValue: true, compact: true }, '0'),
+            new TraitConfig('filterSepia', 'Sepia', TraitInputType.Range, { min: 0, max: 1, step: 0.05, showExtremes: false, showValue: true, compact: true }, '0'),
+            new TraitConfig('filterInvert', 'Invert', TraitInputType.Range, { min: 0, max: 1, step: 0.05, showExtremes: false, showValue: true, compact: true }, '0'),
             // ── Backdrop filter (virtual — composed to CSS backdrop-filter: …)
-            new TraitConfig('backdropBlur', 'B.Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
-            new TraitConfig('backdropBrightness', 'B.Bri', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
-            new TraitConfig('backdropContrast', 'B.Con', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
-            new TraitConfig('backdropSaturate', 'B.Sat', TraitInputType.Scrub, { min: 0, max: 3, step: 0.05, units: [''] }, '1', true),
+            new TraitConfig('_sep_backdrop', 'Backdrop', TraitInputType.SectionLabel),
+            new TraitConfig('backdropBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
+            new TraitConfig('backdropBrightness', 'Brightness', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
+            new TraitConfig('backdropContrast', 'Contrast', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
+            new TraitConfig('backdropSaturate', 'Saturate', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
             // ── Transition (virtual — composed to CSS transition: all …) ──
-            new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms'),
+            new TraitConfig('_sep_transition', 'Transition', TraitInputType.SectionLabel),
+            new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms', true),
+            new TraitConfig('transitionDelay', 'Delay', TraitInputType.Scrub, { min: 0, max: 2000, step: 50, units: ['ms'] }, '0ms', true),
             new TraitConfig('transitionTimingFunction', 'Easing', TraitInputType.Select, [
                 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out',
             ], 'ease'),
-            new TraitConfig('transitionDelay', 'Delay', TraitInputType.Scrub, { min: 0, max: 2000, step: 50, units: ['ms'] }, '0ms'),
         ]);
     }
 }