@ax-design/reveal-highlight 0.3.0-alpha.7 → 0.4.1

package/src/cssTypedOM.d.ts

@@ -1,53 +1,53 @@
-import { Profiler } from './Profiler';
-declare global {
-  interface Window {   
-    CSS: CSS;
-    // This is only for debug purpose, it won't appear on production env.
-    profiler: Profiler
-  }
-
-  interface HTMLElement {
-    attributeStyleMap: StylePropertyMap;
-    computedStyleMap(): StylePropertyMap;
-  }
-
-  interface StylePropertyMap {
-    readonly size: number;
-    get(stylePropertyName: string): CSSStyleValue;
-    set(stylePropertyName: string, value: CSSStyleValue | string): void;
-  }
-
-  interface CSS {
-    px(value: number): CSSUnitValue;
-    registerProperty(rule: CSSPropertyRule): void
-  }
-  
-  interface CSSPropertyRule {
-    name: string;
-    syntax: string;
-    initialValue: string | number | CSSUnitValue;
-    inherits: boolean
-  }
-  
-  interface CSSStyleValue {
-    toString(): string;
-    value: unknown;
-  }
-  
-  interface CSSUnitValue extends CSSStyleValue {
-    unit: string;
-    value: number
-  }
-  
-  interface CSSColorValue extends CSSStyleValue {
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
-    value: string
-  }
-  
-  interface CSSKeywordValue extends CSSStyleValue {
-    value: string
-  }  
+import { Profiler } from './Profiler';
+declare global {
+  interface Window {   
+    CSS: CSS;
+    // This is only for debug purpose, it won't appear on production env.
+    profiler: Profiler
+  }
+
+  interface HTMLElement {
+    attributeStyleMap: StylePropertyMap;
+    computedStyleMap(): StylePropertyMap;
+  }
+
+  interface StylePropertyMap {
+    readonly size: number;
+    get(stylePropertyName: string): CSSStyleValue;
+    set(stylePropertyName: string, value: CSSStyleValue | string): void;
+  }
+
+  interface CSS {
+    px(value: number): CSSUnitValue;
+    registerProperty(rule: CSSPropertyRule): void
+  }
+  
+  interface CSSPropertyRule {
+    name: string;
+    syntax: string;
+    initialValue: string | number | CSSUnitValue;
+    inherits: boolean
+  }
+  
+  interface CSSStyleValue {
+    toString(): string;
+    value: unknown;
+  }
+  
+  interface CSSUnitValue extends CSSStyleValue {
+    unit: string;
+    value: number
+  }
+  
+  interface CSSColorValue extends CSSStyleValue {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+    value: string
+  }
+  
+  interface CSSKeywordValue extends CSSStyleValue {
+    value: string
+  }  
 }

package/src/index.ts

@@ -1,225 +1,219 @@
-import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
-import { config } from './config.js';
-import { MAGIC_DEFAULT_COLOR } from './variables.js';
-
-function registerCustomElements() {
-    customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
-    customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
-    customElements.define(AxReveal.ElementName, AxReveal);
-}
-
-export interface AxRevealHighlightRegisterOptions {
-    compat: boolean;
-    borderDetectionMode: 'strictEdge' | 'experimentalAutoFit';
-}
-
-let registered = false;
-
-export function register({
-    compat = false,
-    borderDetectionMode = 'strictEdge',
-}: AxRevealHighlightRegisterOptions) {
-    if (registered) {
-        console.warn('You have already registered Ax RevealHighlight, please do not call this function repeatedly.');
-        return;
-    }
-
-    config.borderDetectionMode = borderDetectionMode;
-    config.compat = compat;
-    registered = true;
-
-    if (window.CSS && window.CSS.registerProperty) {
-        window.CSS.registerProperty({
-            name: '--reveal-color',
-            syntax: '<color>',
-            initialValue: 'rgb(0, 0, 0)',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-opacity',
-            syntax: '<number>',
-            initialValue: '0.26',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-style',
-            syntax: '<custom-ident>',
-            initialValue: 'full',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-color',
-            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
-            initialValue: MAGIC_DEFAULT_COLOR,
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-width',
-            syntax: '<length>',
-            initialValue: '1px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-fill-radius',
-            syntax: '<number>',
-            initialValue: '1.5',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-type',
-            syntax: '<custom-ident>',
-            initialValue: 'miter',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-radius',
-            syntax: '<length>',
-            initialValue: '4px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-top-left-radius',
-            syntax: '<length>',
-            initialValue: '-1px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-top-right-radius',
-            syntax: '<length>',
-            initialValue: '-1px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-bottom-left-radius',
-            syntax: '<length>',
-            initialValue: '-1px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-decoration-bottom-right-radius',
-            syntax: '<length>',
-            initialValue: '-1px',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-left',
-            syntax: '<custom-ident>',
-            initialValue: 'line',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-right',
-            syntax: '<custom-ident>',
-            initialValue: 'line',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-top',
-            syntax: '<custom-ident>',
-            initialValue: 'line',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-border-bottom',
-            syntax: '<custom-ident>',
-            initialValue: 'line',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-hover-light',
-            syntax: '<custom-ident>',
-            initialValue: 'true',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-hover-light-color',
-            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
-            initialValue: MAGIC_DEFAULT_COLOR,
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-hover-light-fill-radius',
-            syntax: '<number>',
-            initialValue: '1.5',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-hover-light-fill-radius-mode',
-            syntax: '<custom-ident>',
-            initialValue: 'relative',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-diffuse',
-            syntax: '<custom-ident>',
-            initialValue: 'true',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-press-animation',
-            syntax: '<custom-ident>',
-            initialValue: 'true',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-press-animation-color',
-            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
-            initialValue: MAGIC_DEFAULT_COLOR,
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-press-animation-radius-mode',
-            syntax: '<custom-ident>',
-            initialValue: 'cover',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-press-animation-speed',
-            syntax: '<number>',
-            initialValue: '2000',
-            inherits: true,
-        });
-        window.CSS.registerProperty({
-            name: '--reveal-release-animation-accelerate-rate',
-            syntax: '<number>',
-            initialValue: '6',
-            inherits: true,
-        });
-
-        registerCustomElements();
-    } else if (compat) {
-        const root = document.documentElement;
-
-        root.style.setProperty('--reveal-color', 'rgb(0, 0, 0)');
-        root.style.setProperty('--reveal-opacity', '0.26');
-        root.style.setProperty('--reveal-border-style', 'full');
-        root.style.setProperty('--reveal-border-color', MAGIC_DEFAULT_COLOR);
-        root.style.setProperty('--reveal-border-width', '1px');
-        root.style.setProperty('--reveal-border-fill-radius', '1.5');
-        root.style.setProperty('--reveal-border-decoration-type', 'miter');
-        root.style.setProperty('--reveal-border-decoration-radius', '4');
-        root.style.setProperty('--reveal-border-decoration-top-left-radius', '-1');
-        root.style.setProperty('--reveal-border-decoration-top-right-radius', '-1');
-        root.style.setProperty('--reveal-border-decoration-bottom-left-radius', '-1');
-        root.style.setProperty('--reveal-border-decoration-bottom-right-radius', '-1');
-        root.style.setProperty('--reveal-border-left', 'line');
-        root.style.setProperty('--reveal-border-right', 'line');
-        root.style.setProperty('--reveal-border-top', 'line');
-        root.style.setProperty('--reveal-border-bottom', 'line');
-        root.style.setProperty('--reveal-hover-light', 'true');
-        root.style.setProperty('--reveal-hover-light-color', MAGIC_DEFAULT_COLOR);
-        root.style.setProperty('--reveal-hover-light-fill-radius', '1.5');
-        root.style.setProperty('--reveal-hover-light-fill-radius-mode', 'relative');
-        root.style.setProperty('--reveal-diffuse', 'true');
-        root.style.setProperty('--reveal-press-animation', 'true');
-        root.style.setProperty('--reveal-press-animation-radius-mode', 'cover');
-        root.style.setProperty('--reveal-press-animation-color', MAGIC_DEFAULT_COLOR);
-        root.style.setProperty('--reveal-press-animation-speed', '2000');
-        root.style.setProperty('--reveal-release-animation-accelerate-rate', '6');
-
-        registerCustomElements();
-    } else {
-        console.warn('Your browser do NOT support `CSS.registerProperty` method, registration failed!');
-        console.warn('If you are the developer, try using `register(true)` to support old browsers.');
-    }
-}
+import { AxRevealProvider, AxRevealBoundary, AxReveal, AxRevealNg } from './CustomElements.js';
+import { config } from './config.js';
+import { MAGIC_DEFAULT_COLOR } from './variables.js';
+
+function registerCustomElements() {
+    customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
+    customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
+    customElements.define(AxReveal.ElementName, AxReveal);
+    customElements.define(AxRevealNg.ElementName, AxRevealNg);
+}
+
+export interface AxRevealHighlightRegisterOptions {
+    compat: boolean;
+    borderDetectionMode: 'strictEdge' | 'experimentalAutoFit';
+}
+
+let registered = false;
+
+export function register({
+    compat = false,
+    borderDetectionMode = 'strictEdge',
+}: AxRevealHighlightRegisterOptions) {
+    if (registered) {
+        console.warn('You have already registered Ax RevealHighlight, please do not call this function repeatedly.');
+        return;
+    }
+
+    config.borderDetectionMode = borderDetectionMode;
+    config.compat = compat;
+    registered = true;
+
+    if (window.CSS && window.CSS.registerProperty) {
+        window.CSS.registerProperty({
+            name: '--reveal-color',
+            syntax: '<color>',
+            initialValue: 'rgb(0, 0, 0)',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-opacity',
+            syntax: '<number>',
+            initialValue: '0.26',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-color',
+            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
+            initialValue: MAGIC_DEFAULT_COLOR,
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-width',
+            syntax: '<length>',
+            initialValue: '1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-fill-radius',
+            syntax: '<number>',
+            initialValue: '1.5',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-type',
+            syntax: '<custom-ident>',
+            initialValue: 'miter',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-radius',
+            syntax: '<length>',
+            initialValue: '0',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-top-left-radius',
+            syntax: '<length>',
+            initialValue: '-1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-top-right-radius',
+            syntax: '<length>',
+            initialValue: '-1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-bottom-left-radius',
+            syntax: '<length>',
+            initialValue: '-1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-decoration-bottom-right-radius',
+            syntax: '<length>',
+            initialValue: '-1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-left-type',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-right-type',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-top-type',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-bottom-type',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-hover-light',
+            syntax: '<custom-ident>',
+            initialValue: 'true',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-hover-light-color',
+            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
+            initialValue: MAGIC_DEFAULT_COLOR,
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-hover-light-fill-radius',
+            syntax: '<number>',
+            initialValue: '1.5',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-hover-light-fill-radius-mode',
+            syntax: '<custom-ident>',
+            initialValue: 'relative',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-diffuse',
+            syntax: '<custom-ident>',
+            initialValue: 'true',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-press-animation',
+            syntax: '<custom-ident>',
+            initialValue: 'true',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-press-animation-color',
+            syntax: `<color>|${MAGIC_DEFAULT_COLOR}`,
+            initialValue: MAGIC_DEFAULT_COLOR,
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-press-animation-radius-mode',
+            syntax: '<custom-ident>',
+            initialValue: 'cover',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-press-animation-speed',
+            syntax: '<number>',
+            initialValue: '2000',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-release-animation-accelerate-rate',
+            syntax: '<number>',
+            initialValue: '6',
+            inherits: true,
+        });
+
+        registerCustomElements();
+    } else if (compat) {
+        const root = document.documentElement;
+
+        root.style.setProperty('--reveal-color', 'rgb(0, 0, 0)');
+        root.style.setProperty('--reveal-opacity', '0.26');
+        root.style.setProperty('--reveal-border-color', MAGIC_DEFAULT_COLOR);
+        root.style.setProperty('--reveal-border-width', '1px');
+        root.style.setProperty('--reveal-border-fill-radius', '1.5');
+        root.style.setProperty('--reveal-border-decoration-type', 'miter');
+        root.style.setProperty('--reveal-border-decoration-radius', '0');
+        root.style.setProperty('--reveal-border-decoration-top-left-radius', '-1');
+        root.style.setProperty('--reveal-border-decoration-top-right-radius', '-1');
+        root.style.setProperty('--reveal-border-decoration-bottom-left-radius', '-1');
+        root.style.setProperty('--reveal-border-decoration-bottom-right-radius', '-1');
+        root.style.setProperty('--reveal-border-left-type', 'line');
+        root.style.setProperty('--reveal-border-right-type', 'line');
+        root.style.setProperty('--reveal-border-top-type', 'line');
+        root.style.setProperty('--reveal-border-bottom-type', 'line');
+        root.style.setProperty('--reveal-hover-light', 'true');
+        root.style.setProperty('--reveal-hover-light-color', MAGIC_DEFAULT_COLOR);
+        root.style.setProperty('--reveal-hover-light-fill-radius', '1.5');
+        root.style.setProperty('--reveal-hover-light-fill-radius-mode', 'relative');
+        root.style.setProperty('--reveal-diffuse', 'true');
+        root.style.setProperty('--reveal-press-animation', 'true');
+        root.style.setProperty('--reveal-press-animation-radius-mode', 'cover');
+        root.style.setProperty('--reveal-press-animation-color', MAGIC_DEFAULT_COLOR);
+        root.style.setProperty('--reveal-press-animation-speed', '2000');
+        root.style.setProperty('--reveal-release-animation-accelerate-rate', '6');
+
+        registerCustomElements();
+    } else {
+        console.warn('Your browser do NOT support `CSS.registerProperty` method, registration failed!');
+        console.warn('If you are the developer, try using `register(true)` to support old browsers.');
+    }
+}

package/src/utils/extractRGBValue.ts

@@ -0,0 +1,58 @@
+export const extractRGBValue = (x: string) => {
+    if (x === '') {
+        return '';
+    }
+
+    if (x[0] === '#') {
+        // Thanks bro:
+        // https://stackoverflow.com/a/11508164/3931936
+        const hexVal = parseInt(x.substring(1), 16);
+
+        var r = (hexVal >> 16) & 255;
+        var g = (hexVal >> 8) & 255;
+        var b = hexVal & 255;
+
+        return r + ',' + g + ',' + b;
+    } else {
+        let result = '';
+        let beginSearch = false;
+        let numberPointer = 0;
+
+        for (let i = 0; i < x.length; i++) {
+            const char = x[i];
+            const charCode = char.charCodeAt(0) - 48;
+            const charIsNumber = charCode >= 0 && charCode < 10;
+
+            if (char === ' ') {
+                continue;
+            }
+
+            if (beginSearch && !charIsNumber && char !== ',' && char !== ')') {
+                throw new SyntaxError(`${x} is not a validate color value!`);
+            }
+
+            if (!beginSearch && char === '(') {
+                beginSearch = true;
+                continue;
+            }
+
+            if (numberPointer < 2 && char === ')') {
+                throw new SyntaxError(`${x} should have at least three color channel`);
+            }
+
+            if (char === ',') {
+                numberPointer++;
+            }
+
+            if (char === ')') {
+                return result;
+            }
+
+            if (beginSearch) {
+                result += char;
+            }
+        }
+
+        return result;
+    }
+};

package/src/utils/isValidateBorderDecorationType.ts

@@ -0,0 +1,8 @@
+import type { BorderDecoration } from './types.js';
+
+export const isValidateBorderDecorationType = (x: string): x is BorderDecoration => {
+    if (x === 'round') return true;
+    if (x === 'bevel') return true;
+    if (x === 'miter') return true;
+    return false;
+};