From 992ce8a53c845baceefe28fb132ba7335a4aeb8c Mon Sep 17 00:00:00 2001 From: Victor Soares Date: Sun, 24 Mar 2024 18:17:36 -0300 Subject: [PATCH] modified: .babelrc.json modified: examples/highlights.html modified: package-lock.json modified: package.json modified: src/annotations.js --- .babelrc.json | 3 + examples/highlights.html | 22 ++++++- package-lock.json | 131 +++++++++++++++++++++++---------------- package.json | 6 +- src/annotations.js | 34 +++++++--- 5 files changed, 128 insertions(+), 68 deletions(-) diff --git a/.babelrc.json b/.babelrc.json index 9c7817a..c171f36 100644 --- a/.babelrc.json +++ b/.babelrc.json @@ -8,4 +8,7 @@ "modules": "auto" }] ], + "plugins": [ + "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator" + ] } diff --git a/examples/highlights.html b/examples/highlights.html index 665c2de..2ea0088 100644 --- a/examples/highlights.html +++ b/examples/highlights.html @@ -115,11 +115,10 @@ // Apply a class to selected text rendition.on("selected", function(cfiRange, contents) { - rendition.annotations.highlight(cfiRange, {}, (e) => { + const annotation = rendition.annotations.highlight(cfiRange, { john: 'doe' }, (e) => { console.log("highlight clicked", e.target); }); contents.window.getSelection().removeAllRanges(); - }); this.rendition.themes.default({ @@ -134,12 +133,18 @@ // Illustration of how to get text from a saved cfiRange var highlights = document.getElementById('highlights'); + const redrawAnnotations = () => + rendition.views().forEach(view => view.pane ? view.pane.render() : null) + + rendition.on('rendered', redrawAnnotations); + rendition.on("selected", function(cfiRange) { book.getRange(cfiRange).then(function (range) { var text; var li = document.createElement('li'); var a = document.createElement('a'); + var update = document.createElement('a'); var remove = document.createElement('a'); var textNode; @@ -160,8 +165,21 @@ return false; }; + update.textContent = "update to red color"; + update.href = "#" + cfiRange; + update.onclick = function () { + const annotations = Object.values(rendition.annotations._annotations); + annotations.forEach(annotation => { + annotation.update({}, { 'fill': 'red', 'fill-opacity': 0.5 }); + }); + + rendition.views().forEach(view => view.pane ? view.pane.render() : null); + return false; + }; + li.appendChild(a); li.appendChild(textNode); + li.appendChild(update); li.appendChild(remove); highlights.appendChild(li); } diff --git a/package-lock.json b/package-lock.json index b58d698..f59e8d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@victorsoares96/epubjs", - "version": "0.3.95", + "version": "0.3.96", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@victorsoares96/epubjs", - "version": "0.3.95", + "version": "0.3.96", "license": "BSD-2-Clause", "dependencies": { "@types/localforage": "0.0.34", - "@victorsoares96/marks-pane": "^1.0.12", + "@victorsoares96/marks-pane": "^1.0.13", "@xmldom/xmldom": "^0.7.5", "core-js": "^3.18.3", "event-emitter": "^0.3.5", @@ -24,6 +24,8 @@ "@babel/core": "^7.15.8", "@babel/plugin-proposal-export-default-from": "^7.14.5", "@babel/plugin-proposal-export-namespace-from": "^7.14.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", + "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/preset-env": "^7.15.8", "@babel/runtime": "^7.15.4", "babel-loader": "^8.2.3", @@ -528,9 +530,9 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz", - "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", "dev": true, "engines": { "node": ">=6.9.0" @@ -578,12 +580,12 @@ } }, "node_modules/@babel/helper-skip-transparent-expression-wrappers": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.15.4.tgz", - "integrity": "sha512-BMRLsdh+D1/aap19TycS4eD1qELGrCBJwzaY9IE8LrpJtJb+H7rQkPIdsfgnMtLBA6DJls7X9z93Z4U8h7xw0A==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz", + "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==", "dev": true, "dependencies": { - "@babel/types": "^7.15.4" + "@babel/types": "^7.22.5" }, "engines": { "node": ">=6.9.0" @@ -601,10 +603,19 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", + "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.15.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", - "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true, "engines": { "node": ">=6.9.0" @@ -848,12 +859,13 @@ } }, "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz", - "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==", + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz", + "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.14.5", + "@babel/helper-plugin-utils": "^7.18.6", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3" }, "engines": { @@ -915,13 +927,14 @@ } }, "node_modules/@babel/plugin-proposal-optional-chaining": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz", - "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz", + "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0", "@babel/plugin-syntax-optional-chaining": "^7.8.3" }, "engines": { @@ -1868,12 +1881,13 @@ "dev": true }, "node_modules/@babel/types": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz", - "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", "dev": true, "dependencies": { - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { @@ -2122,9 +2136,9 @@ "dev": true }, "node_modules/@victorsoares96/marks-pane": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/@victorsoares96/marks-pane/-/marks-pane-1.0.12.tgz", - "integrity": "sha512-eXjgjCUhYjlphKvETG1/Fa0SFE2UrQf4j9W+8spHmxU0zrpIx+f3iWkNtY71WR4R1k30tCL0e5ZAM4UowihYUA==" + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@victorsoares96/marks-pane/-/marks-pane-1.0.13.tgz", + "integrity": "sha512-E9scUrrve2TRC1yAEqwB73Ae0wk3Pv7N4qu9gyCXVZQ1qe9mrIirW9ivW+cd0wnEBcMZzdCZfumYt8f14KZEwA==" }, "node_modules/@vue/compiler-core": { "version": "3.2.20", @@ -21226,9 +21240,9 @@ } }, "@babel/helper-plugin-utils": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz", - "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", "dev": true }, "@babel/helper-remap-async-to-generator": { @@ -21264,12 +21278,12 @@ } }, "@babel/helper-skip-transparent-expression-wrappers": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.15.4.tgz", - "integrity": "sha512-BMRLsdh+D1/aap19TycS4eD1qELGrCBJwzaY9IE8LrpJtJb+H7rQkPIdsfgnMtLBA6DJls7X9z93Z4U8h7xw0A==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz", + "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==", "dev": true, "requires": { - "@babel/types": "^7.15.4" + "@babel/types": "^7.22.5" } }, "@babel/helper-split-export-declaration": { @@ -21281,10 +21295,16 @@ "@babel/types": "^7.15.4" } }, + "@babel/helper-string-parser": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", + "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "dev": true + }, "@babel/helper-validator-identifier": { - "version": "7.15.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", - "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true }, "@babel/helper-validator-option": { @@ -21449,12 +21469,12 @@ } }, "@babel/plugin-proposal-nullish-coalescing-operator": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz", - "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==", + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz", + "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.14.5", + "@babel/helper-plugin-utils": "^7.18.6", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3" } }, @@ -21492,13 +21512,13 @@ } }, "@babel/plugin-proposal-optional-chaining": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz", - "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz", + "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.14.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0", "@babel/plugin-syntax-optional-chaining": "^7.8.3" } }, @@ -22152,12 +22172,13 @@ } }, "@babel/types": { - "version": "7.15.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz", - "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.9", + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" } }, @@ -22357,9 +22378,9 @@ "dev": true }, "@victorsoares96/marks-pane": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/@victorsoares96/marks-pane/-/marks-pane-1.0.12.tgz", - "integrity": "sha512-eXjgjCUhYjlphKvETG1/Fa0SFE2UrQf4j9W+8spHmxU0zrpIx+f3iWkNtY71WR4R1k30tCL0e5ZAM4UowihYUA==" + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@victorsoares96/marks-pane/-/marks-pane-1.0.13.tgz", + "integrity": "sha512-E9scUrrve2TRC1yAEqwB73Ae0wk3Pv7N4qu9gyCXVZQ1qe9mrIirW9ivW+cd0wnEBcMZzdCZfumYt8f14KZEwA==" }, "@vue/compiler-core": { "version": "3.2.20", diff --git a/package.json b/package.json index ba16a85..c885b64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@victorsoares96/epubjs", - "version": "0.3.95", + "version": "0.3.96", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", @@ -35,6 +35,8 @@ "@babel/core": "^7.15.8", "@babel/plugin-proposal-export-default-from": "^7.14.5", "@babel/plugin-proposal-export-namespace-from": "^7.14.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", + "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/preset-env": "^7.15.8", "@babel/runtime": "^7.15.4", "babel-loader": "^8.2.3", @@ -60,13 +62,13 @@ }, "dependencies": { "@types/localforage": "0.0.34", + "@victorsoares96/marks-pane": "^1.0.13", "@xmldom/xmldom": "^0.7.5", "core-js": "^3.18.3", "event-emitter": "^0.3.5", "jszip": "^3.7.1", "localforage": "^1.10.0", "lodash": "^4.17.21", - "@victorsoares96/marks-pane": "^1.0.12", "path-webpack": "0.0.3" } } diff --git a/src/annotations.js b/src/annotations.js index 9022970..d51853e 100644 --- a/src/annotations.js +++ b/src/annotations.js @@ -239,16 +239,32 @@ class Annotation { */ update (data = {}, styles = {}) { if (this.data) this.data = data; - if (this.styles) { - this.mark.attributes = { - ...this.mark.attributes, - ...styles, - }; + if (!this.styles) this.styles = {}; - this.mark.styles = { - ...this.mark.styles, - ...styles, - }; + if (styles?.stroke) { + this.mark.attributes.stroke = styles.stroke; + this.styles.stroke = styles.stroke; + } + + if (styles?.["stroke-opacity"]) { + this.mark.attributes["stroke-opacity"] = styles["stroke-opacity"]; + this.styles["stroke-opacity"] = styles["stroke-opacity"]; + } + + if (styles?.["stroke-width"]) { + this.mark.attributes["stroke-width"] = styles["stroke-width"]; + this.styles["stroke-width"] = styles["stroke-width"]; + } + + if (styles?.fill) { + this.mark.attributes.fill = styles.fill; + this.mark.attributes.background = "red"; + this.styles.fill = styles.fill; + } + + if (styles?.["fill-opacity"]) { + this.mark.attributes["fill-opacity"] = styles["fill-opacity"]; + this.styles["fill-opacity"] = styles["fill-opacity"]; } }