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

package/es/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../node_modules/typescript/lib/lib.es5.d.ts","../node_modules/typescript/lib/lib.es2015.d.ts","../node_modules/typescript/lib/lib.es2016.d.ts","../node_modules/typescript/lib/lib.es2017.d.ts","../node_modules/typescript/lib/lib.es2018.d.ts","../node_modules/typescript/lib/lib.es2019.d.ts","../node_modules/typescript/lib/lib.es2020.d.ts","../node_modules/typescript/lib/lib.es2021.d.ts","../node_modules/typescript/lib/lib.esnext.d.ts","../node_modules/typescript/lib/lib.dom.d.ts","../node_modules/typescript/lib/lib.dom.iterable.d.ts","../node_modules/typescript/lib/lib.es2015.core.d.ts","../node_modules/typescript/lib/lib.es2015.collection.d.ts","../node_modules/typescript/lib/lib.es2015.generator.d.ts","../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../node_modules/typescript/lib/lib.es2015.promise.d.ts","../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../node_modules/typescript/lib/lib.es2017.object.d.ts","../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../node_modules/typescript/lib/lib.es2017.string.d.ts","../node_modules/typescript/lib/lib.es2017.intl.d.ts","../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../node_modules/typescript/lib/lib.es2018.intl.d.ts","../node_modules/typescript/lib/lib.es2018.promise.d.ts","../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../node_modules/typescript/lib/lib.es2019.array.d.ts","../node_modules/typescript/lib/lib.es2019.object.d.ts","../node_modules/typescript/lib/lib.es2019.string.d.ts","../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../node_modules/typescript/lib/lib.es2020.promise.d.ts","../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../node_modules/typescript/lib/lib.es2020.string.d.ts","../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../node_modules/typescript/lib/lib.es2020.intl.d.ts","../node_modules/typescript/lib/lib.es2021.promise.d.ts","../node_modules/typescript/lib/lib.es2021.string.d.ts","../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../node_modules/typescript/lib/lib.es2021.intl.d.ts","../node_modules/typescript/lib/lib.esnext.intl.d.ts","../src/config.ts","../src/computedstylestorage.ts","../src/utils/types.ts","../src/canvasconfig.ts","../src/svgconfig.ts","../src/revealboundrystore.ts","../src/utils/extractrgbvalue.ts","../src/utils/isvalidateborderdecorationtype.ts","../src/baseconfig.ts","../src/revealstatemanager.ts","../src/customelements.ts","../src/profiler.ts","../src/csstypedom.d.ts","../src/variables.ts","../src/index.ts","../node_modules/@types/semver/classes/semver.d.ts","../node_modules/@types/semver/functions/parse.d.ts","../node_modules/@types/semver/functions/valid.d.ts","../node_modules/@types/semver/functions/clean.d.ts","../node_modules/@types/semver/functions/inc.d.ts","../node_modules/@types/semver/functions/diff.d.ts","../node_modules/@types/semver/functions/major.d.ts","../node_modules/@types/semver/functions/minor.d.ts","../node_modules/@types/semver/functions/patch.d.ts","../node_modules/@types/semver/functions/prerelease.d.ts","../node_modules/@types/semver/functions/compare.d.ts","../node_modules/@types/semver/functions/rcompare.d.ts","../node_modules/@types/semver/functions/compare-loose.d.ts","../node_modules/@types/semver/functions/compare-build.d.ts","../node_modules/@types/semver/functions/sort.d.ts","../node_modules/@types/semver/functions/rsort.d.ts","../node_modules/@types/semver/functions/gt.d.ts","../node_modules/@types/semver/functions/lt.d.ts","../node_modules/@types/semver/functions/eq.d.ts","../node_modules/@types/semver/functions/neq.d.ts","../node_modules/@types/semver/functions/gte.d.ts","../node_modules/@types/semver/functions/lte.d.ts","../node_modules/@types/semver/functions/cmp.d.ts","../node_modules/@types/semver/functions/coerce.d.ts","../node_modules/@types/semver/classes/comparator.d.ts","../node_modules/@types/semver/classes/range.d.ts","../node_modules/@types/semver/functions/satisfies.d.ts","../node_modules/@types/semver/ranges/max-satisfying.d.ts","../node_modules/@types/semver/ranges/min-satisfying.d.ts","../node_modules/@types/semver/ranges/to-comparators.d.ts","../node_modules/@types/semver/ranges/min-version.d.ts","../node_modules/@types/semver/ranges/valid.d.ts","../node_modules/@types/semver/ranges/outside.d.ts","../node_modules/@types/semver/ranges/gtr.d.ts","../node_modules/@types/semver/ranges/ltr.d.ts","../node_modules/@types/semver/ranges/intersects.d.ts","../node_modules/@types/semver/ranges/simplify.d.ts","../node_modules/@types/semver/ranges/subset.d.ts","../node_modules/@types/semver/internals/identifiers.d.ts","../node_modules/@types/semver/index.d.ts"],"fileInfos":[{"version":"89f78430e422a0f06d13019d60d5a45b37ec2d28e67eb647f73b1b0d19a46b72","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","746d62152361558ea6d6115cf0da4dd10ede041d14882ede3568bce5dc4b4f1f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"abba1071bfd89e55e88a054b0c851ea3e8a494c340d0f3fab19eb18f6afb0c9e","affectsGlobalScope":true},{"version":"927cb2b60048e1395b183bf74b2b80a75bdb1dbe384e1d9fac654313ea2fb136","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"4378fc8122ec9d1a685b01eb66c46f62aba6b239ca7228bb6483bcf8259ee493","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"d071129cba6a5f2700be09c86c07ad2791ab67d4e5ed1eb301d6746c62745ea4","affectsGlobalScope":true},{"version":"6c55633c733c8378db65ac3da7a767c3cf2cf3057f0565a9124a16a3a2019e87","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"e8c9f4e445a489991ca1a4232667de3ac36b07ba75ea335971fbeacf2d26fe67","affectsGlobalScope":true},{"version":"10bbdc1981b8d9310ee75bfac28ee0477bb2353e8529da8cff7cb26c409cb5e8","affectsGlobalScope":true},"a5fde17594e6d0ef74e72ab5aa746582c7c2c0b732c2c4c231714ac1c040a17d","672125b1e9f9bd681e9dbce265235b705169ded4a27cfdd56c4f8e0e22e92774","0e8e701077933c91b6e2e336c4b82b92969cd20688e387b798bca2f12f209bc3","68ebc04e1ffa8f268b65a1ef0d2fe6bcf6835ed04990020e6605d9314b142cea","af7ffab600b0ddbec97408d45c2359055211532de3e09af5e2263d620b6c7bab","b5f14fe860e3c1e98d14598e60d3ad5bdfe05bd7af74a73effe1e657d777dbd3","43099eba1080885e22f20fb17b53c24c3e78fd9318907356174171acb58adb51","86be01066e86277b1a6d713e42c07bf8a285976be01707ad33f53af4ad60ebe0","2fdcd41a56666d35ad524a455b1fd62649d43f8b3de6c140f221fd8e4a7f1139","03fd7cb7b59d78e6dac1b134d1053e3b14b8448107c9c507da98e54757bd58f0","d2c9ff9985b5f66df9a50e6e8a80b8ea9793780068fb3946f3fb1790710cbc9a","18ef2bacb9ec66ee36e6b28656cc0ff1c464c1b69cc0bd08b61a2ac638aa3a6c",{"version":"943ccae5a440773fcc197ae6ac71ad6ce56a308fd1fa383bdceb0466b33970e2","affectsGlobalScope":true},"ed43ade9f2c81d87ad1b1099d853071c610b3b6e4283550f008f93dc64a405aa","06a316ed50ab36217c66fcca8455f5cc7b2b95f7a13553f44b8bebd22c3067f3","d9e55d93aa33fad61bd5c63800972d00ba8879ec5d29f6f3bce67d16d86abc33","2ac9c8332c5f8510b8bdd571f8271e0f39b0577714d5e95c1e79a12b2616f069","42c21aa963e7b86fa00801d96e88b36803188018d5ad91db2a9101bccd40b3ff","d31eb848cdebb4c55b4893b335a7c0cca95ad66dee13cbb7d0893810c0a9c301","77c1d91a129ba60b8c405f9f539e42df834afb174fe0785f89d92a2c7c16b77a","c544d81603149987796b24cca297c965db427b84b2580fb27e52fb37ddc1f470","906c751ef5822ec0dadcea2f0e9db64a33fb4ee926cc9f7efa38afe5d5371b2a","5387c049e9702f2d2d7ece1a74836a14b47fbebe9bbeb19f94c580a37c855351","c68391fb9efad5d99ff332c65b1606248c4e4a9f1dd9a087204242b56c7126d6","e9cf02252d3a0ced987d24845dcb1f11c1be5541f17e5daa44c6de2d18138d0c","e8b02b879754d85f48489294f99147aeccc352c760d95a6fe2b6e49cd400b2fe","9f6908ab3d8a86c68b86e38578afc7095114e66b2fc36a2a96e9252aac3998e0","0eedb2344442b143ddcd788f87096961cd8572b64f10b4afc3356aa0460171c6","9eb2875a1e4c583066af7d6194ea8162191b2756e5d87ccb3c562fdf74d06869","c68baff4d8ba346130e9753cefe2e487a16731bf17e05fdacc81e8c9a26aae9d","2cd15528d8bb5d0453aa339b4b52e0696e8b07e790c153831c642c3dea5ac8af","479d622e66283ffa9883fbc33e441f7fc928b2277ff30aacbec7b7761b4e9579","ade307876dc5ca267ca308d09e737b611505e015c535863f22420a11fffc1c54","f8cdefa3e0dee639eccbe9794b46f90291e5fd3989fcba60d2f08fde56179fb9","86c5a62f99aac7053976e317dbe9acb2eaf903aaf3d2e5bb1cafe5c2df7b37a8","2b300954ce01a8343866f737656e13243e86e5baef51bd0631b21dcef1f6e954","a2d409a9ffd872d6b9d78ead00baa116bbc73cfa959fce9a2f29d3227876b2a1","b288936f560cd71f4a6002953290de9ff8dfbfbf37f5a9391be5c83322324898","61178a781ef82e0ff54f9430397e71e8f365fc1e3725e0e5346f2de7b0d50dfa","6a6ccb37feb3aad32d9be026a3337db195979cd5727a616fc0f557e974101a54","6eef5113135a0f2bbac8259909a5bbb7666bcde022c28f4ab95145623cbe1f72","058b8dd97b7c67b6bf33e7bda7b1e247b019b675d4b6449d14ac002091a8b4f8","89c8a7b88c378663a8124664f2d9b8c2887e186b55aa066edf6d67177ca1aa04","5a30ba65ad753eb2ef65355dbb3011b28b192cb9df2ef0b5f595b51ca7faf353","b15e55c5fa977c2f25ca0b1db52cfa2d1fd4bf0baf90a8b90d4a7678ca462ff1","f41d30972724714763a2698ae949fbc463afb203b5fa7c4ad7e4de0871129a17","86d425f7fcd8d100dafa6286cc289af88cbb639ecbdbd25c3018a8f0f7b09fe5","9795e0a3a45d5b6f1a791ee54b7c8b58bc931e8900966cea2dff9c5bae56073b","5890be29879d02424b7654f40592915189034948f7a18c5ad121c006d4e92811","0ab49086f10c75a1cb3b18bffe799dae021774146d8a2d5a4bb42dda67b64f9b","81c77839e152b8f715ec67b0a8b910bcc2d6cf916794c3519f8798c40efd12ac","a868a534ba1c2ca9060b8a13b0ffbbbf78b4be7b0ff80d8c75b02773f7192c29","464843c00fb3dd4735b28255c5c9fe713f16b8e47a3db09ba1647687440f7aef","34baf65cfee92f110d6653322e2120c2d368ee64b3c7981dff08ed105c4f19b0","d0f6d36b2d86f934560c48d8bfdc7ab60c67cfb2ab6dc1916706aa68e83d6dc2"],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"declarationMap":true,"esModuleInterop":true,"importHelpers":false,"module":99,"outDir":"./","sourceMap":true,"strict":true,"target":5},"fileIdsList":[[62,101],[62,86,101],[101],[62],[62,87,101],[62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100],[87,101],[48,49,52,53,54],[49,52,55],[47],[58],[47,52,56],[47,57,60],[50,51],[47,52],[49]],"referencedMap":[[86,1],[87,2],[62,3],[65,3],[84,1],[85,1],[75,4],[74,4],[72,1],[67,1],[80,1],[78,1],[82,1],[66,1],[79,1],[83,1],[68,1],[69,1],[81,1],[63,1],[70,1],[71,1],[73,1],[77,1],[88,5],[76,1],[64,1],[101,6],[95,5],[97,7],[96,5],[89,5],[90,5],[92,5],[94,5],[98,7],[99,7],[91,7],[93,7],[55,8],[50,9],[48,10],[59,11],[57,12],[61,13],[52,14],[56,15],[51,9],[54,16]],"exportedModulesMap":[[86,1],[87,2],[62,3],[65,3],[84,1],[85,1],[75,4],[74,4],[72,1],[67,1],[80,1],[78,1],[82,1],[66,1],[79,1],[83,1],[68,1],[69,1],[81,1],[63,1],[70,1],[71,1],[73,1],[77,1],[88,5],[76,1],[64,1],[101,6],[95,5],[97,7],[96,5],[89,5],[90,5],[92,5],[94,5],[98,7],[99,7],[91,7],[93,7],[55,8],[50,9],[48,10],[59,11],[57,12],[61,13],[52,14],[56,15],[51,9],[54,16]],"semanticDiagnosticsPerFile":[86,87,62,65,84,85,75,74,72,67,80,78,82,66,79,83,68,69,81,63,70,71,73,77,88,76,64,101,100,95,97,96,89,90,92,94,98,99,91,93,10,11,13,12,2,14,15,16,17,18,19,20,21,3,4,25,22,23,24,26,27,28,5,29,30,31,32,6,33,34,35,36,7,41,37,38,39,40,8,45,42,43,44,1,9,46,55,50,48,47,59,57,61,58,52,56,51,53,54,49,60]},"version":"4.5.4"}

package/es/utils/extractRGBValue.d.ts

@@ -0,0 +1,2 @@
+export declare const extractRGBValue: (x: string) => string;
+//# sourceMappingURL=extractRGBValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"extractRGBValue.d.ts","sourceRoot":"","sources":["../../src/utils/extractRGBValue.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,MAAO,MAAM,WAyDxC,CAAC"}

package/es/utils/extractRGBValue.js

@@ -0,0 +1,48 @@
+export const extractRGBValue = (x) => {
+    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;
+    }
+};
+//# sourceMappingURL=extractRGBValue.js.map

package/es/utils/extractRGBValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractRGBValue.js","sourceRoot":"","sources":["../../src/utils/extractRGBValue.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAE,EAAE;IACzC,IAAI,CAAC,KAAK,EAAE,EAAE;QACV,OAAO,EAAE,CAAC;KACb;IAED,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;QACd,cAAc;QACd,+CAA+C;QAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QAE5C,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC;QAC7B,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;QAC5B,IAAI,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC;QAErB,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;KAChC;SAAM;QACH,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,aAAa,GAAG,CAAC,CAAC;QAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YACzC,MAAM,YAAY,GAAG,QAAQ,IAAI,CAAC,IAAI,QAAQ,GAAG,EAAE,CAAC;YAEpD,IAAI,IAAI,KAAK,GAAG,EAAE;gBACd,SAAS;aACZ;YAED,IAAI,WAAW,IAAI,CAAC,YAAY,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,EAAE;gBAC9D,MAAM,IAAI,WAAW,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;aAChE;YAED,IAAI,CAAC,WAAW,IAAI,IAAI,KAAK,GAAG,EAAE;gBAC9B,WAAW,GAAG,IAAI,CAAC;gBACnB,SAAS;aACZ;YAED,IAAI,aAAa,GAAG,CAAC,IAAI,IAAI,KAAK,GAAG,EAAE;gBACnC,MAAM,IAAI,WAAW,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC;aAC1E;YAED,IAAI,IAAI,KAAK,GAAG,EAAE;gBACd,aAAa,EAAE,CAAC;aACnB;YAED,IAAI,IAAI,KAAK,GAAG,EAAE;gBACd,OAAO,MAAM,CAAC;aACjB;YAED,IAAI,WAAW,EAAE;gBACb,MAAM,IAAI,IAAI,CAAC;aAClB;SACJ;QAED,OAAO,MAAM,CAAC;KACjB;AACL,CAAC,CAAC"}

package/es/utils/isValidateBorderDecorationType.d.ts

@@ -0,0 +1,3 @@
+import type { BorderDecoration } from './types.js';
+export declare const isValidateBorderDecorationType: (x: string) => x is BorderDecoration;
+//# sourceMappingURL=isValidateBorderDecorationType.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isValidateBorderDecorationType.d.ts","sourceRoot":"","sources":["../../src/utils/isValidateBorderDecorationType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,eAAO,MAAM,8BAA8B,MAAO,MAAM,0BAKvD,CAAC"}

package/es/utils/isValidateBorderDecorationType.js

@@ -0,0 +1,10 @@
+export const isValidateBorderDecorationType = (x) => {
+    if (x === 'round')
+        return true;
+    if (x === 'bevel')
+        return true;
+    if (x === 'miter')
+        return true;
+    return false;
+};
+//# sourceMappingURL=isValidateBorderDecorationType.js.map

package/es/utils/isValidateBorderDecorationType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isValidateBorderDecorationType.js","sourceRoot":"","sources":["../../src/utils/isValidateBorderDecorationType.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,CAAS,EAAyB,EAAE;IAC/E,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,IAAI,CAAC;IAC/B,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,IAAI,CAAC;IAC/B,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,IAAI,CAAC;IAC/B,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC"}

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/package.json

@@ -1,30 +1,34 @@
-{
-    "name": "@ax-design/reveal-highlight",
-    "version": "0.3.0-alpha.7",
-    "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.1",
+  "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.5.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.62.0",
+    "rollup-plugin-babel-minify": "^10.0.0",
+    "rollup-plugin-typescript2": "^0.31.1",
+    "typescript": "^4.5.4"
+  },
+  "files": [
+    "build",
+    "es",
+    "src"
+  ],
+  "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"
+  }
+}

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;
+        }
+    };
+}