@ax-design/reveal-highlight 0.5.2 → 0.5.3

package/es/CanvasConfig.js

@@ -1,321 +1,333 @@
-import { BaseConfig } from './BaseConfig.js';
-const createEmptyCanvas = () => document.createElement('canvas');
-export class CanvasConfig extends BaseConfig {
-    constructor(store, $canvas, $container) {
-        super(store, $canvas, $container);
-        this.updateCachedReveal = () => {
-            if (!this.fillDirty)
-                return;
-            const c = this.cachedStyle;
-            const radius = c.trueFillRadius[1] * this.pxRatio;
-            const size = radius * 2;
-            const lastStyle = this.cachedImg.cachedReveal;
-            const { borderReveal, fillReveal } = this.cachedImg.cachedCanvas;
-            const { borderReveal: borderRevealCtx, fillReveal: fillRevealCtx } = this.cachedImg.cachedCtx;
-            this._store.updateMaxRadius(c.trueFillRadius[1] * c.borderFillRadius);
-            for (let i = 0; i < 2; i++) {
-                // 0 means border, 1 means hover light.
-                //-----------------------------------------
-                // Last rendered style.
-                const ls = i === 0 ? lastStyle.borderReveal : lastStyle.fillReveal;
-                const color = i === 0 ? c.borderColor : c.hoverLightColor;
-                const fillRadiusFactor = i === 0 ? c.borderFillRadius : c.hoverLightFillRadius;
-                const doNotNeedUpdateReveal = color === ls.color && c.opacity === ls.opacity && fillRadiusFactor === ls.radiusFactor;
-                if (doNotNeedUpdateReveal)
-                    continue;
-                const reveal = i === 0 ? borderReveal : fillReveal;
-                const ctx = i === 0 ? borderRevealCtx : fillRevealCtx;
-                this.syncSizeToRevealRadius(reveal, fillRadiusFactor);
-                if (!ctx)
-                    continue;
-                ctx.clearRect(0, 0, reveal.width, reveal.height);
-                const fillAlpha = i === 0 ? c.opacity : c.opacity * 0.5;
-                const trueRadius = radius * fillRadiusFactor;
-                const grd = ctx.createRadialGradient(trueRadius, trueRadius, 0, trueRadius, trueRadius, trueRadius);
-                grd.addColorStop(0, `rgba(${color}, ${fillAlpha})`);
-                grd.addColorStop(1, `rgba(${color}, 0.0)`);
-                const trueSize = size * fillRadiusFactor;
-                ctx.fillStyle = grd;
-                ctx.clearRect(0, 0, trueSize, trueSize);
-                ctx.fillRect(0, 0, trueSize, trueSize);
-                ls.radius = trueRadius;
-                ls.radiusFactor = fillRadiusFactor;
-                ls.color = color;
-                ls.opacity = c.opacity;
-                if (!this.ctx)
-                    continue;
-                ls.pattern = this.ctx.createPattern(reveal, 'no-repeat');
-            }
-            this.fillDirty = false;
-        };
-        this.updateCachedBitmap = () => {
-            if (!this.ctx)
-                return;
-            this.updateCachedReveal();
-        };
-        this.updateAnimateGrd = (frame, grd) => {
-            const { pressAnimationColor, opacity } = this.cachedStyle;
-            const _innerAlpha = opacity * (0.2 - frame);
-            const _outerAlpha = opacity * (0.1 - frame * 0.07);
-            const _outerBorder = 0.1 + frame * 0.8;
-            const innerAlpha = _innerAlpha < 0 ? 0 : _innerAlpha;
-            const outerAlpha = _outerAlpha < 0 ? 0 : _outerAlpha;
-            let outerBorder = 0;
-            outerBorder = _outerBorder > 1 ? 1 : _outerBorder;
-            outerBorder = _outerBorder < 0 ? 0 : _outerBorder;
-            grd.addColorStop(0, `rgba(${pressAnimationColor},${innerAlpha})`);
-            grd.addColorStop(outerBorder * 0.55, `rgba(${pressAnimationColor},${outerAlpha})`);
-            grd.addColorStop(outerBorder, `rgba(${pressAnimationColor}, 0)`);
-        };
-        this.drawShape = (hollow) => {
-            if (!this.ctx)
-                return;
-            const b = this.cachedBoundingRect;
-            const w = b.width * this.pxRatio;
-            const h = b.height * this.pxRatio;
-            const c = this.cachedStyle;
-            const bw = c.borderWidth * this.pxRatio;
-            const tl = c.topLeftBorderDecorationRadius * this.pxRatio;
-            const tr = c.topRightBorderDecorationRadius * this.pxRatio;
-            const bl = c.bottomLeftBorderDecorationRadius * this.pxRatio;
-            const br = c.bottomRightBorderDecorationRadius * this.pxRatio;
-            const wlf = c.withLeftBorderFactor;
-            const wrf = c.withRightBorderFactor;
-            const wtf = c.withTopBorderFactor;
-            const wbf = c.withBottomBorderFactor;
-            const tl2 = bw < tl ? tl - bw : 0;
-            const tr2 = bw < tr ? tr - bw : 0;
-            const bl2 = bw < bl ? bl - bw : 0;
-            const br2 = bw < br ? br - bw : 0;
-            this.ctx.beginPath();
-            switch (c.borderDecorationType) {
-                // Oh... Fuck... It's painful...
-                case 'round':
-                    // outer
-                    this.ctx.moveTo(tl, 0);
-                    this.ctx.arcTo(w, 0, w, h, tr);
-                    this.ctx.lineTo(w, h - br);
-                    this.ctx.arcTo(w, h, br, h, br);
-                    this.ctx.lineTo(bl, h);
-                    this.ctx.arcTo(0, h, 0, br, bl);
-                    this.ctx.lineTo(0, tl);
-                    this.ctx.arcTo(0, 0, tl, 0, tl);
-                    if (hollow) {
-                        /* prettier-ignore-start */
-                        // inner
-                        /**
-                         +-①----⑧-+
-                         ②        ⑦
-                         |        |
-                         ③        ⑥
-                         +-④----⑤-+
-                         */
-                        //              x                    y                   r         p
-                        this.ctx.moveTo(tl2, bw * wtf); // ①
-                        this.ctx.arcTo(bw * wlf, bw * wtf, bw * wlf, tl2 + bw * wtf, tl2); // ②
-                        this.ctx.lineTo(bw * wlf, h - bw * wbf - bl2); // ③
-                        this.ctx.arcTo(bw * wlf, h - bw * wbf, bw * wlf + bl2, h - bw * wbf, bl2); // ④
-                        this.ctx.lineTo(w - bw * wrf - br2, h - bw * wbf); // ⑤
-                        this.ctx.arcTo(w - bw * wrf, h - bw * wbf, w - bw * wrf, h - bw * wbf - br2, br2); // ⑥
-                        this.ctx.lineTo(w - bw * wrf, bw * wtf + tr2); // ⑦
-                        this.ctx.arcTo(w - bw * wrf, bw * wtf, w - bw * wrf - tr2, bw * wtf, tr2); // ⑧
-                        this.ctx.lineTo(tl2, bw * wtf); // ①
-                        /* prettier-ignore-end */
-                    }
-                    break;
-                case 'bevel':
-                    // outer
-                    this.ctx.moveTo(tl, 0);
-                    this.ctx.lineTo(w - tr, 0);
-                    this.ctx.lineTo(w, tr);
-                    this.ctx.lineTo(w, h - br);
-                    this.ctx.lineTo(w - br, h);
-                    this.ctx.lineTo(bl, h);
-                    this.ctx.lineTo(0, h - bl);
-                    this.ctx.lineTo(0, tl);
-                    this.ctx.lineTo(tl, 0);
-                    this.ctx.lineTo(w - tr, 0);
-                    if (hollow) {
-                        // inner
-                        /**
-                         +-①----⑧-+
-                         ②        ⑦
-                         |        |
-                         ③        ⑥
-                         +-④----⑤-+
-                         */
-                        //              x                    y                       p
-                        this.ctx.moveTo(tl2 + bw * wlf, bw * wtf); // ①
-                        this.ctx.lineTo(bw * wlf, tl2 + bw * wtf); // ②
-                        this.ctx.lineTo(bw * wlf, h - bl2 - bw * wbf); // ③
-                        this.ctx.lineTo(bw * wlf + bl2, h - bw * wbf); // ④
-                        this.ctx.lineTo(w - br2 - bw * wrf, h - bw * wbf); // ⑤
-                        this.ctx.lineTo(w - bw * wrf, h - br2 - bw * wbf); // ⑥
-                        this.ctx.lineTo(w - bw * wrf, tr2 + bw * wtf); // ⑦
-                        this.ctx.lineTo(w - tr2 - bw * wrf, bw * wtf); // ⑧
-                        this.ctx.lineTo(tl2 + bw * wrf, bw * wtf); // ①
-                    }
-                    break;
-                case 'miter':
-                    // outer
-                    this.ctx.moveTo(0, 0);
-                    this.ctx.lineTo(w, 0);
-                    this.ctx.lineTo(w, h);
-                    this.ctx.lineTo(0, h);
-                    this.ctx.lineTo(0, 0);
-                    if (hollow) {
-                        // inner
-                        /**
-                         ①--------④
-                         |        |
-                         |        |
-                         |        |
-                         ②--------③
-                         */
-                        //              x              y                 p
-                        this.ctx.moveTo(bw * wlf, bw * wtf); // ①
-                        this.ctx.lineTo(bw * wlf, h - bw * wbf); // ②
-                        this.ctx.lineTo(w - bw * wrf, h - bw * wbf); // ③
-                        this.ctx.lineTo(w - bw * wrf, bw * wtf); // ④
-                        this.ctx.lineTo(bw * wlf, bw * wtf); // ①
-                    }
-                    break;
-                default:
-            }
-            this.ctx.closePath();
-        };
-        this.syncSizeToElement = (x) => {
-            const b = this.cachedBoundingRect;
-            if (x.width !== b.width || x.height !== b.height) {
-                x.width = b.width * this.pxRatio;
-                x.height = b.height * this.pxRatio;
-                x.style.width = `${b.width}px`;
-                x.style.height = `${b.height}px`;
-            }
-        };
-        this.clear = () => {
-            if (!this.ctx)
-                return false;
-            if (!this.dirty)
-                return false;
-            const { width, height } = this.cachedBoundingRect;
-            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-            this.ctx.clearRect(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
-            this.dirty = false;
-            return true;
-        };
-        this.paint = (skipSamePointerPositionCheck) => {
-            const store = this._store;
-            const animationPlaying = store.animationQueue.includes(this);
-            const samePosition = store.clientX === store.paintedClientX && store.clientY === store.paintedClientY;
-            if (samePosition && !skipSamePointerPositionCheck && !animationPlaying) {
-                return false;
-            }
-            if (!this.ctx)
-                return false;
-            this.dirty = true;
-            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-            this.ctx.clearRect(0, 0, this.paintedWidth, this.paintedHeight);
-            if (!store.mouseInBoundary && !animationPlaying) {
-                return false;
-            }
-            if (!this.cachedImg.cachedReveal) {
-                return false;
-            }
-            this.syncSizeToElement(this.element);
-            this.cacheBoundingRect();
-            const b = this.cachedBoundingRect;
-            const relativeX = store.clientX - b.left;
-            const relativeY = store.clientY - b.top;
-            if (Number.isNaN(relativeX) || Number.isNaN(relativeY)) {
-                return false;
-            }
-            const c = this.cachedStyle;
-            this.getTrueFillRadius(c.trueFillRadius);
-            this.paintedWidth = b.width * this.pxRatio;
-            this.paintedHeight = b.height * this.pxRatio;
-            const maxRadius = c.trueFillRadius[1];
-            const inLeftBound = relativeX + maxRadius > 0;
-            const inRightBound = relativeX - maxRadius < b.width;
-            const inTopBound = relativeY + maxRadius > 0;
-            const inBottomBound = relativeY - maxRadius < b.height;
-            const mouseInRenderArea = inLeftBound && inRightBound && inTopBound && inBottomBound;
-            if (!mouseInRenderArea && !animationPlaying) {
-                return false;
-            }
-            this.cacheCanvasPaintingStyle();
-            this.updateCachedBitmap();
-            if (store.mouseInBoundary) {
-                const mouseInCanvas = relativeX > 0 && relativeY > 0 && relativeX < b.width && relativeY < b.height;
-                const fillPattern = this.cachedImg.cachedReveal.fillReveal.pattern;
-                if (c.hoverLight && mouseInCanvas && fillPattern) {
-                    // draw fill.
-                    const radius = this.cachedImg.cachedReveal.fillReveal.radius;
-                    const putX = Math.floor(relativeX * this.pxRatio - radius);
-                    const putY = Math.floor(relativeY * this.pxRatio - radius);
-                    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-                    this.drawShape(false);
-                    this.ctx.translate(putX, putY);
-                    this.ctx.fillStyle = fillPattern;
-                    this.ctx.fill();
-                }
-                const diffuse = (c.diffuse && mouseInRenderArea) || mouseInCanvas;
-                const borderPattern = this.cachedImg.cachedReveal.borderReveal.pattern;
-                if (c.borderWidth !== 0 && borderPattern && diffuse) {
-                    // Draw border.
-                    const radius = this.cachedImg.cachedReveal.borderReveal.radius;
-                    const putX = Math.floor(relativeX * this.pxRatio - radius);
-                    const putY = Math.floor(relativeY * this.pxRatio - radius);
-                    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-                    this.drawShape(true);
-                    this.ctx.translate(putX, putY);
-                    this.ctx.fillStyle = borderPattern;
-                    this.ctx.fill();
-                }
-            }
-            if (c.pressAnimation && this.mousePressed && this.mouseDownAnimateLogicFrame) {
-                this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-                const grdRadius = c.pressAnimationFillMode === 'constrained' ? c.trueFillRadius[1] : Math.max(b.width, b.height);
-                // prettier-ignore
-                const animateGrd = this.mouseReleased && this.mouseUpClientX && this.mouseUpClientY
-                    ? this.ctx.createRadialGradient((this.mouseUpClientX - b.left) * this.pxRatio, (this.mouseUpClientY - b.top) * this.pxRatio, 0, (this.mouseUpClientX - b.left) * this.pxRatio, (this.mouseUpClientY - b.top) * this.pxRatio, grdRadius * this.pxRatio)
-                    : this.ctx.createRadialGradient(relativeX * this.pxRatio, relativeY * this.pxRatio, 0, relativeX * this.pxRatio, relativeY * this.pxRatio, grdRadius * this.pxRatio);
-                this.updateAnimateGrd(this.mouseDownAnimateLogicFrame, animateGrd);
-                this.drawShape(false);
-                this.ctx.fillStyle = animateGrd;
-                this.ctx.fill();
-            }
-            return true;
-        };
-        this.ctx = $canvas.getContext('2d');
-        const cachedCanvas = {
-            borderReveal: createEmptyCanvas(),
-            fillReveal: createEmptyCanvas(),
-        };
-        const cachedCtx = {
-            borderReveal: cachedCanvas.borderReveal.getContext('2d'),
-            fillReveal: cachedCanvas.fillReveal.getContext('2d'),
-        };
-        this.cachedImg = {
-            cachedReveal: {
-                borderReveal: {
-                    radiusFactor: -1,
-                    radius: -1,
-                    color: 'INVALID',
-                    opacity: 0,
-                    pattern: null,
-                },
-                fillReveal: {
-                    radiusFactor: -1,
-                    radius: -1,
-                    color: 'INVALID',
-                    opacity: 0,
-                    pattern: null,
-                },
-            },
-            cachedCanvas,
-            cachedCtx,
-        };
-    }
-}
+import { BaseConfig } from './BaseConfig.js';
+export class CanvasConfig extends BaseConfig {
+    constructor(store, $canvas, $container) {
+        super(store, $canvas, $container);
+        this.updateCachedReveal = () => {
+            if (!this.fillDirty)
+                return;
+            if (!this.ctx)
+                return;
+            const c = this.cachedStyle;
+            const radius = c.trueFillRadius[1] * this.pxRatio;
+            const lastStyle = this.cachedImg.cachedReveal;
+            this._store.updateMaxRadius(c.trueFillRadius[1] * c.borderFillRadius);
+            for (let i = 0; i < 2; i++) {
+                // 0 means border, 1 means hover light.
+                //-----------------------------------------
+                // Last rendered style.
+                const ls = i === 0 ? lastStyle.borderReveal : lastStyle.fillReveal;
+                const color = i === 0 ? c.borderColor : c.hoverLightColor;
+                const fillRadiusFactor = i === 0 ? c.borderFillRadius : c.hoverLightFillRadius;
+                const trueRadius = radius * fillRadiusFactor;
+                const doNotNeedUpdateReveal = color === ls.color &&
+                    c.opacity === ls.opacity &&
+                    fillRadiusFactor === ls.radiusFactor &&
+                    trueRadius === ls.radius;
+                if (doNotNeedUpdateReveal)
+                    continue;
+                // The gradient is centered at (trueRadius, trueRadius), painting
+                // translates it to the pointer. A gradient is used instead of a
+                // pre-rendered bitmap, which takes `(4 * radius) ^ 2` pixels per
+                // element and is enough to exhaust the memory of mobile browsers.
+                const fillAlpha = i === 0 ? c.opacity : c.opacity * 0.5;
+                const grd = this.ctx.createRadialGradient(trueRadius, trueRadius, 0, trueRadius, trueRadius, trueRadius);
+                grd.addColorStop(0, `rgba(${color}, ${fillAlpha})`);
+                grd.addColorStop(1, `rgba(${color}, 0.0)`);
+                ls.radius = trueRadius;
+                ls.radiusFactor = fillRadiusFactor;
+                ls.color = color;
+                ls.opacity = c.opacity;
+                ls.pattern = grd;
+            }
+            this.fillDirty = false;
+        };
+        this.updateCachedBitmap = () => {
+            if (!this.ctx)
+                return;
+            this.updateCachedReveal();
+        };
+        this.updateAnimateGrd = (frame, grd) => {
+            const { pressAnimationColor, opacity } = this.cachedStyle;
+            const _innerAlpha = opacity * (0.2 - frame);
+            const _outerAlpha = opacity * (0.1 - frame * 0.07);
+            const _outerBorder = 0.1 + frame * 0.8;
+            const innerAlpha = _innerAlpha < 0 ? 0 : _innerAlpha;
+            const outerAlpha = _outerAlpha < 0 ? 0 : _outerAlpha;
+            let outerBorder = 0;
+            outerBorder = _outerBorder > 1 ? 1 : _outerBorder;
+            outerBorder = _outerBorder < 0 ? 0 : _outerBorder;
+            grd.addColorStop(0, `rgba(${pressAnimationColor},${innerAlpha})`);
+            grd.addColorStop(outerBorder * 0.55, `rgba(${pressAnimationColor},${outerAlpha})`);
+            grd.addColorStop(outerBorder, `rgba(${pressAnimationColor}, 0)`);
+        };
+        this.drawShape = (hollow) => {
+            if (!this.ctx)
+                return;
+            const b = this.cachedBoundingRect;
+            const w = b.width * this.pxRatio;
+            const h = b.height * this.pxRatio;
+            const c = this.cachedStyle;
+            const bw = c.borderWidth * this.pxRatio;
+            const tl = c.topLeftBorderDecorationRadius * this.pxRatio;
+            const tr = c.topRightBorderDecorationRadius * this.pxRatio;
+            const bl = c.bottomLeftBorderDecorationRadius * this.pxRatio;
+            const br = c.bottomRightBorderDecorationRadius * this.pxRatio;
+            const wlf = c.withLeftBorderFactor;
+            const wrf = c.withRightBorderFactor;
+            const wtf = c.withTopBorderFactor;
+            const wbf = c.withBottomBorderFactor;
+            const tl2 = bw < tl ? tl - bw : 0;
+            const tr2 = bw < tr ? tr - bw : 0;
+            const bl2 = bw < bl ? bl - bw : 0;
+            const br2 = bw < br ? br - bw : 0;
+            this.ctx.beginPath();
+            switch (c.borderDecorationType) {
+                // Oh... Fuck... It's painful...
+                case 'round':
+                    // outer
+                    this.ctx.moveTo(tl, 0);
+                    this.ctx.arcTo(w, 0, w, h, tr);
+                    this.ctx.lineTo(w, h - br);
+                    this.ctx.arcTo(w, h, br, h, br);
+                    this.ctx.lineTo(bl, h);
+                    this.ctx.arcTo(0, h, 0, br, bl);
+                    this.ctx.lineTo(0, tl);
+                    this.ctx.arcTo(0, 0, tl, 0, tl);
+                    if (hollow) {
+                        /* prettier-ignore-start */
+                        // inner
+                        /**
+                         +-①----⑧-+
+                         ②        ⑦
+                         |        |
+                         ③        ⑥
+                         +-④----⑤-+
+                         */
+                        //              x                    y                   r         p
+                        this.ctx.moveTo(tl2, bw * wtf); // ①
+                        this.ctx.arcTo(bw * wlf, bw * wtf, bw * wlf, tl2 + bw * wtf, tl2); // ②
+                        this.ctx.lineTo(bw * wlf, h - bw * wbf - bl2); // ③
+                        this.ctx.arcTo(bw * wlf, h - bw * wbf, bw * wlf + bl2, h - bw * wbf, bl2); // ④
+                        this.ctx.lineTo(w - bw * wrf - br2, h - bw * wbf); // ⑤
+                        this.ctx.arcTo(w - bw * wrf, h - bw * wbf, w - bw * wrf, h - bw * wbf - br2, br2); // ⑥
+                        this.ctx.lineTo(w - bw * wrf, bw * wtf + tr2); // ⑦
+                        this.ctx.arcTo(w - bw * wrf, bw * wtf, w - bw * wrf - tr2, bw * wtf, tr2); // ⑧
+                        this.ctx.lineTo(tl2, bw * wtf); // ①
+                        /* prettier-ignore-end */
+                    }
+                    break;
+                case 'bevel':
+                    // outer
+                    this.ctx.moveTo(tl, 0);
+                    this.ctx.lineTo(w - tr, 0);
+                    this.ctx.lineTo(w, tr);
+                    this.ctx.lineTo(w, h - br);
+                    this.ctx.lineTo(w - br, h);
+                    this.ctx.lineTo(bl, h);
+                    this.ctx.lineTo(0, h - bl);
+                    this.ctx.lineTo(0, tl);
+                    this.ctx.lineTo(tl, 0);
+                    this.ctx.lineTo(w - tr, 0);
+                    if (hollow) {
+                        // inner
+                        /**
+                         +-①----⑧-+
+                         ②        ⑦
+                         |        |
+                         ③        ⑥
+                         +-④----⑤-+
+                         */
+                        //              x                    y                       p
+                        this.ctx.moveTo(tl2 + bw * wlf, bw * wtf); // ①
+                        this.ctx.lineTo(bw * wlf, tl2 + bw * wtf); // ②
+                        this.ctx.lineTo(bw * wlf, h - bl2 - bw * wbf); // ③
+                        this.ctx.lineTo(bw * wlf + bl2, h - bw * wbf); // ④
+                        this.ctx.lineTo(w - br2 - bw * wrf, h - bw * wbf); // ⑤
+                        this.ctx.lineTo(w - bw * wrf, h - br2 - bw * wbf); // ⑥
+                        this.ctx.lineTo(w - bw * wrf, tr2 + bw * wtf); // ⑦
+                        this.ctx.lineTo(w - tr2 - bw * wrf, bw * wtf); // ⑧
+                        this.ctx.lineTo(tl2 + bw * wrf, bw * wtf); // ①
+                    }
+                    break;
+                case 'miter':
+                    // outer
+                    this.ctx.moveTo(0, 0);
+                    this.ctx.lineTo(w, 0);
+                    this.ctx.lineTo(w, h);
+                    this.ctx.lineTo(0, h);
+                    this.ctx.lineTo(0, 0);
+                    if (hollow) {
+                        // inner
+                        /**
+                         ①--------④
+                         |        |
+                         |        |
+                         |        |
+                         ②--------③
+                         */
+                        //              x              y                 p
+                        this.ctx.moveTo(bw * wlf, bw * wtf); // ①
+                        this.ctx.lineTo(bw * wlf, h - bw * wbf); // ②
+                        this.ctx.lineTo(w - bw * wrf, h - bw * wbf); // ③
+                        this.ctx.lineTo(w - bw * wrf, bw * wtf); // ④
+                        this.ctx.lineTo(bw * wlf, bw * wtf); // ①
+                    }
+                    break;
+                default:
+            }
+            this.ctx.closePath();
+        };
+        this.syncSizeToElement = (x) => {
+            const b = this.cachedBoundingRect;
+            // Compare against the backing store size; assigning `width` or
+            // `height` resets the bitmap even when the value is unchanged.
+            const width = Math.floor(b.width * this.pxRatio);
+            const height = Math.floor(b.height * this.pxRatio);
+            if (x.width !== width || x.height !== height) {
+                x.width = width;
+                x.height = height;
+                x.style.width = `${b.width}px`;
+                x.style.height = `${b.height}px`;
+            }
+        };
+        // Inputs of the last painted frame, a frame with identical inputs is
+        // skipped and the canvas keeps its content.
+        this.paintedRelativeX = NaN;
+        this.paintedRelativeY = NaN;
+        this.paintedRectWidth = -1;
+        this.paintedRectHeight = -1;
+        this.paintedStyleVersion = -1;
+        this.paintedAnimation = false;
+        this.clear = () => {
+            if (!this.ctx)
+                return false;
+            if (!this.dirty)
+                return false;
+            const { width, height } = this.cachedBoundingRect;
+            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+            this.ctx.clearRect(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
+            this.dirty = false;
+            return true;
+        };
+        this.paint = (_skipSamePointerPositionCheck) => {
+            const store = this._store;
+            if (!this.ctx)
+                return false;
+            const animationPlaying = store.animationQueue.includes(this);
+            if (!store.mouseInBoundary && !animationPlaying) {
+                this.clear();
+                return false;
+            }
+            if (!this.cachedImg.cachedReveal) {
+                return false;
+            }
+            // Read layout before any write to the canvas, so the read never
+            // forces a synchronous layout.
+            this.cacheBoundingRect();
+            const b = this.cachedBoundingRect;
+            const relativeX = store.clientX - b.left;
+            const relativeY = store.clientY - b.top;
+            if (Number.isNaN(relativeX) || Number.isNaN(relativeY)) {
+                return false;
+            }
+            const c = this.cachedStyle;
+            this.getTrueFillRadius(c.trueFillRadius);
+            const maxRadius = c.trueFillRadius[1];
+            const inLeftBound = relativeX + maxRadius > 0;
+            const inRightBound = relativeX - maxRadius < b.width;
+            const inTopBound = relativeY + maxRadius > 0;
+            const inBottomBound = relativeY - maxRadius < b.height;
+            const mouseInRenderArea = inLeftBound && inRightBound && inTopBound && inBottomBound;
+            if (!mouseInRenderArea && !animationPlaying) {
+                this.clear();
+                return false;
+            }
+            this.cacheCanvasPaintingStyle();
+            const unchanged = this.dirty &&
+                !animationPlaying &&
+                !this.paintedAnimation &&
+                relativeX === this.paintedRelativeX &&
+                relativeY === this.paintedRelativeY &&
+                b.width === this.paintedRectWidth &&
+                b.height === this.paintedRectHeight &&
+                this.styleVersion === this.paintedStyleVersion;
+            if (unchanged) {
+                return false;
+            }
+            this.syncSizeToElement(this.element);
+            this.updateCachedBitmap();
+            this.dirty = true;
+            this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+            this.ctx.clearRect(0, 0, this.paintedWidth, this.paintedHeight);
+            this.paintedWidth = b.width * this.pxRatio;
+            this.paintedHeight = b.height * this.pxRatio;
+            this.paintedRelativeX = relativeX;
+            this.paintedRelativeY = relativeY;
+            this.paintedRectWidth = b.width;
+            this.paintedRectHeight = b.height;
+            this.paintedStyleVersion = this.styleVersion;
+            this.paintedAnimation = animationPlaying;
+            if (store.mouseInBoundary) {
+                const mouseInCanvas = relativeX > 0 && relativeY > 0 && relativeX < b.width && relativeY < b.height;
+                const fillPattern = this.cachedImg.cachedReveal.fillReveal.pattern;
+                if (c.hoverLight && mouseInCanvas && fillPattern) {
+                    // draw fill.
+                    const radius = this.cachedImg.cachedReveal.fillReveal.radius;
+                    const putX = Math.floor(relativeX * this.pxRatio - radius);
+                    const putY = Math.floor(relativeY * this.pxRatio - radius);
+                    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+                    this.drawShape(false);
+                    this.ctx.translate(putX, putY);
+                    this.ctx.fillStyle = fillPattern;
+                    this.ctx.fill();
+                }
+                const diffuse = (c.diffuse && mouseInRenderArea) || mouseInCanvas;
+                const borderPattern = this.cachedImg.cachedReveal.borderReveal.pattern;
+                if (c.borderWidth !== 0 && borderPattern && diffuse) {
+                    // Draw border.
+                    const radius = this.cachedImg.cachedReveal.borderReveal.radius;
+                    const putX = Math.floor(relativeX * this.pxRatio - radius);
+                    const putY = Math.floor(relativeY * this.pxRatio - radius);
+                    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+                    this.drawShape(true);
+                    this.ctx.translate(putX, putY);
+                    this.ctx.fillStyle = borderPattern;
+                    this.ctx.fill();
+                }
+            }
+            if (c.pressAnimation && this.mousePressed && this.mouseDownAnimateLogicFrame) {
+                this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+                const grdRadius = c.pressAnimationFillMode === 'constrained' ? c.trueFillRadius[1] : Math.max(b.width, b.height);
+                // prettier-ignore
+                const animateGrd = this.mouseReleased && this.mouseUpClientX && this.mouseUpClientY
+                    ? this.ctx.createRadialGradient((this.mouseUpClientX - b.left) * this.pxRatio, (this.mouseUpClientY - b.top) * this.pxRatio, 0, (this.mouseUpClientX - b.left) * this.pxRatio, (this.mouseUpClientY - b.top) * this.pxRatio, grdRadius * this.pxRatio)
+                    : this.ctx.createRadialGradient(relativeX * this.pxRatio, relativeY * this.pxRatio, 0, relativeX * this.pxRatio, relativeY * this.pxRatio, grdRadius * this.pxRatio);
+                this.updateAnimateGrd(this.mouseDownAnimateLogicFrame, animateGrd);
+                this.drawShape(false);
+                this.ctx.fillStyle = animateGrd;
+                this.ctx.fill();
+            }
+            return true;
+        };
+        this.ctx = $canvas.getContext('2d');
+        this.cachedImg = {
+            cachedReveal: {
+                borderReveal: {
+                    radiusFactor: -1,
+                    radius: -1,
+                    color: 'INVALID',
+                    opacity: 0,
+                    pattern: null,
+                },
+                fillReveal: {
+                    radiusFactor: -1,
+                    radius: -1,
+                    color: 'INVALID',
+                    opacity: 0,
+                    pattern: null,
+                },
+            },
+        };
+    }
+}
 //# sourceMappingURL=CanvasConfig.js.map