@ax-design/reveal-highlight 0.3.0-alpha.6 → 0.4.0

package/es/utils/types.d.ts

@@ -0,0 +1,103 @@
+export declare type BorderDecoration = 'round' | 'bevel' | 'miter';
+export interface CachedBoundingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface CachedStyle {
+    color: string;
+    opacity: number;
+    trueFillRadius: [number, number];
+    borderColor: string;
+    borderFillRadius: number;
+    borderDecorationType: BorderDecoration;
+    borderDecorationRadius: number;
+    topLeftBorderDecorationRadius: number;
+    topRightBorderDecorationRadius: number;
+    bottomLeftBorderDecorationRadius: number;
+    bottomRightBorderDecorationRadius: number;
+    /**
+     * @param withLeftBorderFactor
+     * If the left border is shown, this value is 1, or the value is 0.
+     */
+    withLeftBorderFactor: number;
+    /**
+     * @param withRightBorderFactor
+     * If the right border is shown, this value is 1, or the value is 0.
+     */
+    withRightBorderFactor: number;
+    /**
+     * @param withTopBorderFactor
+     * If the top border is shown, this value is 1, or the value is 0.
+     */
+    withTopBorderFactor: number;
+    /**
+     * @param withBottomBorderFactor
+     * If the bottom border is shown, this value is 1, or the value is 0.
+     */
+    withBottomBorderFactor: number;
+    borderWidth: number;
+    hoverLight: boolean;
+    hoverLightColor: string;
+    hoverLightFillMode: string;
+    hoverLightFillRadius: number;
+    diffuse: boolean;
+    pressAnimation: boolean;
+    pressAnimationFillMode: string;
+    pressAnimationColor: string;
+    pressAnimationSpeed: number;
+    releaseAnimationAccelerateRate: number;
+}
+interface CachedReveal {
+    radius: number;
+    radiusFactor: number;
+    color: string;
+    opacity: number;
+    pattern: CanvasPattern | null;
+}
+/**
+ * Cached border and body pattern, for faster painting on the canvas.
+ * @interface CachedRevealBitmap
+ */
+export interface CachedRevealBitmap {
+    cachedReveal: {
+        borderReveal: CachedReveal;
+        fillReveal: CachedReveal;
+    };
+    cachedCanvas: {
+        borderReveal: HTMLCanvasElement;
+        fillReveal: HTMLCanvasElement;
+    };
+    cachedCtx: {
+        borderReveal: CanvasRenderingContext2D | null;
+        fillReveal: CanvasRenderingContext2D | null;
+    };
+}
+/**
+ * Cached border and body pattern, just to store something in similar way.
+ * @interface CachedRevealPath
+ */
+export interface CachedRevealPath {
+    cachedReveal: {
+        readonly borderReveal: CachedReveal;
+        readonly fillReveal: CachedReveal;
+    };
+    cachedPath: {
+        readonly borderReveal: SVGPathElement;
+        readonly fillReveal: SVGPathElement;
+        readonly rippleReveal: SVGPathElement;
+    };
+    cachedGradient: {
+        readonly borderReveal: SVGRadialGradientElement;
+        readonly fillReveal: SVGRadialGradientElement;
+        readonly rippleReveal: SVGRadialGradientElement;
+    };
+    cachedGradientStop: {
+        readonly borderReveal: Readonly<[SVGStopElement, SVGStopElement]>;
+        readonly fillReveal: Readonly<[SVGStopElement, SVGStopElement]>;
+        readonly rippleReveal: Readonly<[SVGStopElement, SVGStopElement, SVGStopElement]>;
+    };
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/es/utils/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/es/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":""}

package/es/variables.d.ts

@@ -1,2 +1,2 @@
-export declare const MAGIC_DEFAULT_COLOR = "rgba(-1, -1, -1)";
+export declare const MAGIC_DEFAULT_COLOR = "magic";
 //# sourceMappingURL=variables.d.ts.map

package/es/variables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,qBAAqB,CAAC"}
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,UAAU,CAAC"}

package/es/variables.js

@@ -1,2 +1,2 @@
-export const MAGIC_DEFAULT_COLOR = 'rgba(-1, -1, -1)';
+export const MAGIC_DEFAULT_COLOR = 'magic';
 //# sourceMappingURL=variables.js.map

package/es/variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"variables.js","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"variables.js","sourceRoot":"","sources":["../src/variables.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,30 +1,30 @@
-{
-    "name": "@ax-design/reveal-highlight",
-    "version": "0.3.0-alpha.6",
-    "description": "Web component that implement Reveal Highlight of Axiom Design System.",
-    "main": "build/main.js",
-    "module": "es/index.js",
-    "typings": "es/index.d.ts",
-    "repository": "https://github.com/ax-design/reveal-highlight",
-    "license": "MIT",
-    "sideEffects": false,
-    "devDependencies": {
-        "npm-run-all": "^4.1.5",
-        "prettier": "2.2.1",
-        "rimraf": "^2.6.3",
-        "rollup": "^2.38.5",
-        "rollup-plugin-babel-minify": "^10.0.0",
-        "rollup-plugin-typescript2": "^0.29.0",
-        "typescript": "^4.1.5"
-    },
-    "scripts": {
-        "start": "npm-run-all --parallel start-tsc start-rollup",
-        "start-tsc": "tsc --watch",
-        "start-rollup": "rollup -c -w",
-        "build": "npm-run-all clean --parallel build-tsc build-rollup",
-        "build-tsc": "tsc",
-        "build-rollup": "rollup -c",
-        "clean": "rimraf ./es ./build",
-        "prepublishOnly": "npm run build"
-    }
-}
+{
+  "name": "@ax-design/reveal-highlight",
+  "version": "0.4.0",
+  "description": "Web component that implement Reveal Highlight of Axiom Design System.",
+  "main": "build/main.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "repository": "https://github.com/ax-design/reveal-highlight",
+  "license": "MIT",
+  "sideEffects": false,
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.2.1",
+    "rimraf": "^2.6.3",
+    "rollup": "^2.38.5",
+    "rollup-plugin-babel-minify": "^10.0.0",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.1.5"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel start-tsc start-rollup",
+    "start-tsc": "tsc --watch",
+    "start-rollup": "rollup -c -w",
+    "build": "npm-run-all clean --parallel build-tsc build-rollup",
+    "build-tsc": "tsc",
+    "build-rollup": "rollup -c",
+    "clean": "rimraf ./es ./build",
+    "prepublishOnly": "npm run build"
+  }
+}

package/src/BaseConfig.ts

@@ -0,0 +1,311 @@
+import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+
+import { extractRGBValue } from './utils/extractRGBValue.js'
+import { isValidateBorderDecorationType } from './utils/isValidateBorderDecorationType.js';
+import type { BorderDecoration, CachedBoundingRect, CachedStyle } from './utils/types.js';
+
+export class BaseConfig<T extends Element> {
+    protected _store: RevealBoundaryStore;
+
+    pxRatio = window.devicePixelRatio || 1;
+
+    readonly container: HTMLElement;
+    readonly element: T;
+
+    protected readonly computedStyle: ComputedStyleStorage;
+
+    paintedWidth = 0;
+    paintedHeight = 0;
+
+    currentFrameId: number = -1;
+
+    cachedBoundingRectFrameId: number = -2;
+
+    cachedBoundingRect: CachedBoundingRect = {
+        top: -1,
+        left: -1,
+        width: -1,
+        height: -1,
+    };
+
+    cachedStyleFrameId: number = -2;
+
+    cachedStyle: CachedStyle = {
+        trueFillRadius: [0, 0],
+        color: '',
+        opacity: 1,
+        borderColor: '',
+        borderFillRadius: 0,
+        borderDecorationType: 'miter',
+        borderDecorationRadius: 0,
+        topLeftBorderDecorationRadius: 0,
+        topRightBorderDecorationRadius: 0,
+        bottomLeftBorderDecorationRadius: 0,
+        bottomRightBorderDecorationRadius: 0,
+        withLeftBorderFactor: 1,
+        withRightBorderFactor: 1,
+        withTopBorderFactor: 1,
+        withBottomBorderFactor: 1,
+        borderWidth: 1,
+        hoverLight: true,
+        hoverLightColor: '',
+        hoverLightFillMode: '',
+        hoverLightFillRadius: 0,
+        diffuse: true,
+        pressAnimation: true,
+        pressAnimationFillMode: '',
+        pressAnimationColor: '',
+        pressAnimationSpeed: 0,
+        releaseAnimationAccelerateRate: 0,
+    };
+
+    dirty: boolean = false;
+
+    shapeDirty: boolean = true;
+    fillDirty: boolean = true;
+    animationDirty: boolean = true;
+
+    /**
+     * If is cleaned up by `RevealBoundaryStore` during animation
+     * duration checkup.
+     */
+    cleanedUpForAnimation: boolean = false;
+
+    mouseUpClientX: number | null = null;
+    mouseUpClientY: number | null = null;
+    mouseDownAnimateStartFrame: number | null = null;
+    mouseDownAnimateCurrentFrame: number | null = null;
+    mouseDownAnimateReleasedFrame: number | null = null;
+    mouseDownAnimateLogicFrame: number | null = null;
+    mousePressed = false;
+
+    mouseReleased = false;
+
+    constructor(store: RevealBoundaryStore, $canvas: T, $container: HTMLElement) {
+        this._store = store;
+
+        this.container = $container;
+        this.element = $canvas;
+
+        this.computedStyle = createStorage($container);
+    }
+
+    cacheBoundingRect = () => {
+        if (this.currentFrameId === this.cachedBoundingRectFrameId) {
+            return;
+        }
+
+        const boundingRect = this.container.getBoundingClientRect();
+
+        this.cachedBoundingRect.top = Math.floor(boundingRect.top);
+        this.cachedBoundingRect.left = Math.floor(boundingRect.left);
+        this.cachedBoundingRect.width = Math.floor(boundingRect.width);
+        this.cachedBoundingRect.height = Math.floor(boundingRect.height);
+
+        this.cachedBoundingRectFrameId = this.currentFrameId;
+    };
+
+    getTrueFillRadius = (
+        trueFillRadius = [0, 0] as [number, number],
+        fillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative'
+    ) => {
+        const b = this.cachedBoundingRect;
+
+        switch (fillMode) {
+            case 'relative':
+                trueFillRadius[0] = Math.min(b.width, b.height);
+                trueFillRadius[1] = Math.max(b.width, b.height);
+                break;
+            case 'absolute':
+                trueFillRadius[0] = -1;
+                trueFillRadius[1] = -1;
+                break;
+            default:
+                throw new SyntaxError(
+                    'The value of `--reveal-hover-light-fill-radius-mode` must be `relative`, `absolute`, but got `' + fillMode + '`!'
+                );
+        }
+
+        return trueFillRadius;
+    };
+
+    getPropFromMultipleSource = (domPropsName: string, cssPropsName: string) => {
+        const domProps = this.container.dataset[domPropsName];
+        if (domProps) return domProps;
+
+        return this.computedStyle.get(cssPropsName);
+    };
+
+    getNumberPropFromMultipleSource = (domPropsName: string, cssPropsName: string) => {
+        const domProps = this.container.dataset[domPropsName];
+        if (domProps) return Number.parseFloat(domProps);
+
+        return this.computedStyle.getNumber(cssPropsName);
+    };
+
+    cacheCanvasPaintingStyle = () => {
+        if (this.currentFrameId === this.cachedStyleFrameId) {
+            return;
+        }
+
+        if (this.computedStyle.size() === 0) {
+            return;
+        }
+
+        const parsedBaseColor = extractRGBValue(this.computedStyle.getColor('--reveal-color')) || '0, 0, 0';
+        const parsedBorderColor =
+            extractRGBValue(this.computedStyle.getColor('--reveal-border-color')) || parsedBaseColor;
+        const parsedHoverLightColor =
+            extractRGBValue(this.computedStyle.getColor('--reveal-hover-light-color')) || parsedBaseColor;
+        const parsedPressAnimationColor =
+            extractRGBValue(this.computedStyle.getColor('--reveal-press-animation-color')) || parsedBaseColor;
+
+
+        const nextColor = parsedBaseColor;
+        const nextOpacity = this.computedStyle.getNumber('--reveal-opacity');
+
+        // Border related configurations
+        const nextBorderColor = parsedBorderColor;
+
+        const nextBorderFillRadius = this.computedStyle.getNumber('--reveal-border-fill-radius');
+        const nextBorderDecorationType =
+            (this.computedStyle.get('--reveal-border-decoration-type') as BorderDecoration) || 'miter';
+        const nextBorderWidth = this.computedStyle.getNumber('--reveal-border-width');
+
+        const nextWithLeftBorderFactor =
+            this.getPropFromMultipleSource('leftBorder', '--reveal-border-left-type') === 'line' ? 1 : 0;
+        const nextWithRightBorderFactor =
+            this.getPropFromMultipleSource('rightBorder', '--reveal-border-right-type') === 'line' ? 1 : 0;
+        const nextWithTopBorderFactor = this.getPropFromMultipleSource('topBorder', '--reveal-border-top-type') === 'line' ? 1 : 0;
+        const nextWithBottomBorderFactor =
+            this.getPropFromMultipleSource('bottomBorder', '--reveal-border-bottom-type') === 'line' ? 1 : 0;
+
+        // Hover light related configurations
+        const nextHoverLight = this.computedStyle.get('--reveal-hover-light') === 'true';
+        const nextHoverLightColor = parsedHoverLightColor;
+        const nextHoverLightFillRadius = this.computedStyle.getNumber('--reveal-hover-light-fill-radius');
+        const nextHoverLightFillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative';
+
+        // Press animation related configurations
+        const nextDiffuse = this.computedStyle.get('--reveal-diffuse') === 'true';
+        const nextPressAnimation = this.computedStyle.get('--reveal-press-animation') === 'true';
+        const nextPressAnimationFillMode = this.computedStyle.get('--reveal-press-animation-radius-mode');
+        const nextPressAnimationColor = parsedPressAnimationColor;
+        const nextPressAnimationSpeed = this.computedStyle.getNumber('--reveal-press-animation-speed');
+        const nextReleaseAnimationAccelerateRate = this.computedStyle.getNumber('--reveal-release-animation-accelerate-rate');
+
+        // Border decoration related configurations
+        const r = this.computedStyle.getNumber('--reveal-border-decoration-radius');
+        const tl = this.getNumberPropFromMultipleSource(
+            'topLeftBorderRadius',
+            '--reveal-border-decoration-top-left-radius'
+        );
+        const tr = this.getNumberPropFromMultipleSource(
+            'topRightBorderRadius',
+            '--reveal-border-decoration-top-right-radius'
+        );
+        const bl = this.getNumberPropFromMultipleSource(
+            'bottomLeftBorderRadius',
+            '--reveal-border-decoration-bottom-left-radius'
+        );
+        const br = this.getNumberPropFromMultipleSource(
+            'bottomRightBorderRadius',
+            '--reveal-border-decoration-bottom-right-radius'
+        );
+
+        const nextTopLeftBorderDecorationRadius = tl >= 0 ? tl : r;
+        const nextTopRightBorderDecorationRadius = tr >= 0 ? tr : r;
+        const nextBottomLeftBorderDecorationRadius = bl >= 0 ? bl : r;
+        const nextBottomRightBorderDecorationRadius = br >= 0 ? br : r;
+
+        const c = this.cachedStyle;
+
+        this.fillDirty = this.fillDirty || c.color !== nextColor;
+        this.fillDirty = this.fillDirty || c.opacity !== nextOpacity;
+        this.fillDirty = this.fillDirty || c.borderColor !== nextBorderColor;
+        this.fillDirty = this.fillDirty || c.borderFillRadius !== nextBorderFillRadius;
+        this.fillDirty = this.fillDirty || c.hoverLightColor !== nextHoverLightColor;
+        this.fillDirty = this.fillDirty || c.hoverLightFillRadius !== nextHoverLightFillRadius;
+        this.fillDirty = this.fillDirty || c.hoverLightFillMode !== nextHoverLightFillMode;
+
+        this.shapeDirty = this.shapeDirty || c.borderDecorationType !== nextBorderDecorationType;
+        this.shapeDirty = this.shapeDirty || c.borderWidth !== nextBorderWidth;
+        this.shapeDirty = this.shapeDirty || c.withLeftBorderFactor !== nextWithLeftBorderFactor;
+        this.shapeDirty = this.shapeDirty || c.withRightBorderFactor !== nextWithRightBorderFactor;
+        this.shapeDirty = this.shapeDirty || c.withTopBorderFactor !== nextWithTopBorderFactor;
+        this.shapeDirty = this.shapeDirty || c.withBottomBorderFactor !== nextWithBottomBorderFactor;
+        this.shapeDirty = this.shapeDirty || c.topLeftBorderDecorationRadius !== nextTopLeftBorderDecorationRadius;
+        this.shapeDirty = this.shapeDirty || c.topRightBorderDecorationRadius !== nextTopRightBorderDecorationRadius;
+        this.shapeDirty = this.shapeDirty || c.bottomLeftBorderDecorationRadius !== nextBottomLeftBorderDecorationRadius;
+        this.shapeDirty = this.shapeDirty || c.bottomRightBorderDecorationRadius !== nextBottomRightBorderDecorationRadius;
+
+        this.animationDirty = this.animationDirty || c.pressAnimation !== nextPressAnimation;
+        this.animationDirty = this.animationDirty || c.pressAnimationFillMode !== nextPressAnimationFillMode;
+        this.animationDirty = this.animationDirty || c.pressAnimationColor !== nextPressAnimationColor;
+        this.animationDirty = this.animationDirty || c.pressAnimationSpeed !== nextPressAnimationSpeed;
+        this.animationDirty = this.animationDirty || c.releaseAnimationAccelerateRate !== nextReleaseAnimationAccelerateRate;
+
+        c.color = nextColor;
+        c.opacity = nextOpacity;
+
+        c.borderColor = nextBorderColor;
+
+        c.borderFillRadius = nextBorderFillRadius;
+        c.borderDecorationType = nextBorderDecorationType;
+        c.borderWidth = nextBorderWidth;
+
+        c.withLeftBorderFactor = nextWithLeftBorderFactor;
+        c.withRightBorderFactor = nextWithRightBorderFactor;
+        c.withTopBorderFactor = nextWithTopBorderFactor;
+        c.withBottomBorderFactor = nextWithBottomBorderFactor;
+
+        c.hoverLight = nextHoverLight;
+        c.hoverLightColor = nextHoverLightColor;
+        c.hoverLightFillRadius = nextHoverLightFillRadius;
+        c.hoverLightFillMode = nextHoverLightFillMode;
+
+        c.diffuse = nextDiffuse;
+        c.pressAnimation = nextPressAnimation;
+        c.pressAnimationFillMode = nextPressAnimationFillMode;
+        c.pressAnimationColor = nextPressAnimationColor;
+        c.pressAnimationSpeed = nextPressAnimationSpeed;
+        c.releaseAnimationAccelerateRate = nextReleaseAnimationAccelerateRate;
+
+        c.topLeftBorderDecorationRadius = nextTopLeftBorderDecorationRadius;
+        c.topRightBorderDecorationRadius = nextTopRightBorderDecorationRadius;
+        c.bottomLeftBorderDecorationRadius = nextBottomLeftBorderDecorationRadius;
+        c.bottomRightBorderDecorationRadius = nextBottomRightBorderDecorationRadius;
+
+        this.getTrueFillRadius(c.trueFillRadius, c.hoverLightFillMode);
+
+        if (!isValidateBorderDecorationType(c.borderDecorationType)) {
+            throw new SyntaxError(
+                'The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!'
+            );
+        }
+
+        this.cachedStyleFrameId = this.currentFrameId;
+    };
+
+    mouseInCanvas = () => {
+        const b = this.cachedBoundingRect;
+
+        const relativeX = this._store.clientX - b.left;
+        const relativeY = this._store.clientY - b.top;
+
+        return relativeX > 0 && relativeY > 0 && relativeX < b.width && relativeY < b.height;
+    };
+
+    syncSizeToRevealRadius = (x: HTMLCanvasElement, factor: number) => {
+        const { trueFillRadius } = this.cachedStyle;
+
+        const radius = trueFillRadius[1] || 1;
+        const size = radius * 2 * this.pxRatio * factor;
+
+        if (x.width !== size || x.height !== size) {
+            x.width = size;
+            x.height = size;
+        }
+    };
+}