diff --git a/src/Overlay.js b/src/Overlay.js index 7484044..84ec880 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -201,6 +201,56 @@ export default class Overlay { return this; } + /** Adds a `details` to the overlay. + * This `details` element will have properties shared between all `details` elements in the overlay. + * You can override the shared properties by using a callback. + * @param {Object.} [additionalProperties={}] - The DOM properties of the `details` that are NOT shared between all overlay `details` elements. These should be camelCase. + * @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `details`. + * @returns {Overlay} Overlay class instance (this) + * @since 0.88.96 + * @example + * // Assume all
elements have a shared class (e.g. {'className': 'bar'}) + * overlay.addDetails({'id': 'foo'}).buildOverlay(document.body); + * // Output: + * // (Assume already exists in the webpage) + * + *
+ * + */ + addDetails(additionalProperties = {}, callback = () => {}) { + + const properties = {}; // Shared
DOM properties + + const details = this.#createElement('details', properties, additionalProperties); // Creates the
element + callback(this, details); // Runs any script passed in through the callback + return this; + } + + /** Adds a `summary` to the overlay. + * This `summary` element will have properties shared between all `summary` elements in the overlay. + * You can override the shared properties by using a callback. + * @param {Object.} [additionalProperties={}] - The DOM properties of the `summary` that are NOT shared between all overlay `summary` elements. These should be camelCase. + * @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `summary`. + * @returns {Overlay} Overlay class instance (this) + * @since 0.88.96 + * @example + * // Assume all elements have a shared class (e.g. {'className': 'bar'}) + * overlay.addSummary({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body); + * // Output: + * // (Assume already exists in the webpage) + * + * Foobar. + * + */ + addSummary(additionalProperties = {}, callback = () => {}) { + + const properties = {}; // Shared DOM properties + + const summary = this.#createElement('summary', properties, additionalProperties); // Creates the element + callback(this, summary); // Runs any script passed in through the callback + return this; + } + /** Adds a `img` to the overlay. * This `img` element will have properties shared between all `img` elements in the overlay. * You can override the shared properties by using a callback. diff --git a/src/Template.js b/src/Template.js index 28710fb..71dee90 100644 --- a/src/Template.js +++ b/src/Template.js @@ -41,7 +41,7 @@ export default class Template { this.chunked = chunked; this.chunked32 = chunked32; this.tileSize = tileSize; - this.pixelCount = { total: 0, colors: new Map }; // Total pixel count in template + this.pixelCount = { total: 0, colors: new Map() }; // Total pixel count in template } /** Creates chunks of the template for each tile. diff --git a/src/apiManager.js b/src/apiManager.js index 4ceadba..9f8953f 100644 --- a/src/apiManager.js +++ b/src/apiManager.js @@ -117,7 +117,6 @@ export default class ApiManager { case 'tiles': - // Runs only if the tile has the template let tileCoordsTile = data['endpoint'].split('/'); tileCoordsTile = [parseInt(tileCoordsTile[tileCoordsTile.length - 2]), parseInt(tileCoordsTile[tileCoordsTile.length - 1].replace('.png', ''))]; diff --git a/src/templateManager.js b/src/templateManager.js index 140b681..e4c183f 100644 --- a/src/templateManager.js +++ b/src/templateManager.js @@ -280,13 +280,14 @@ export default class TemplateManager { console.log(`Template:`); console.log(template); + // Obtains the template (for only this tile) as a Uint32Array + let templateBeforeFilter32 = template.chunked32; + // Draws each template on the tile based on it's relative position const coordXtoDrawAt = Number(template.pixelCoords[0]) * this.drawMult; const coordYtoDrawAt = Number(template.pixelCoords[1]) * this.drawMult; context.drawImage(template.bitmap, coordXtoDrawAt, coordYtoDrawAt); - // Obtains the template (for only this tile) as a Uint32Array - let templateBeforeFilter32 = template.chunked32; // If we failed to get the template for this tile, we use a shoddy, buggy, failsafe if (!templateBeforeFilter32) { const templateBeforeFilter = context.getImageData(coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height); @@ -313,8 +314,9 @@ export default class TemplateManager { pixelsCorrectTotal += total; } - console.log(`Finished calculating correct pixels for the tile ${tileCoords} in ${(Date.now() - timer) / 1000} seconds!\nThere are ${pixelsCorrectTotal} correct pixels.`); + + template.pixelCount['correct'] = pixelsCorrect; // Adds the correct pixel Map to the template instance } return await canvas.convertToBlob({ type: 'image/png' });