30:Tda7,// implements private pattern class TextRenderPrivate { constructor() { const worker = this.createWorker(); // Encapsulate promiseMap and nextId in a closure const privateState = (() => { let promiseMap = new Map(); let nextId = 0; return { getPromiseMap: () => promiseMap, getNextId: () => nextId++, deleteFromPromiseMap: (id) => promiseMap.delete(id), setInPromiseMap: (id, resolve) => promiseMap.set(id, resolve) }; })(); // Handle messages from the worker worker.onmessage = (e) => { const { id, width, height, data } = e.data; const promiseMap = privateState.getPromiseMap(); if (promiseMap.has(id)) { const resolve = promiseMap.get(id); resolve({ width, height, data }); privateState.deleteFromPromiseMap(id); } }; // Expose the worker publicly this.worker = worker; // Methods to interact with private state this.getNextId = privateState.getNextId; this.setInPromiseMap = privateState.setInPromiseMap; } async render(textContent, options) { const id = this.getNextId(); // Get the next ID from the closure return new Promise((resolve) => { this.setInPromiseMap(id, resolve); // Set the promise in the closure this.worker.postMessage({ id, textContent, options }); }); } createWorker() { let src = this.workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let name = `TextRenderWorker(${Math.random().toString(36).substr(2, 9)})`; let objectURL = URL.createObjectURL(blob); const worker = new Worker(objectURL, { type: "module", name }); URL.revokeObjectURL(objectURL); worker.name = name return worker; } workerCode() { const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); self.onmessage = function (e) { const { id, textContent, options } = e.data; // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size fill = "black", resolution = 2 // Default resolution } = options || {}; // Create an OffscreenCanvas // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = fill; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread // Slow? canvas.convertToBlob().then((blob) => { const reader = new FileReader(); reader.onload = () => { self.postMessage({ id, width, height, data: reader.result }); }; reader.readAsDataURL(blob); }); }; } destroy() { this.worker.terminate(); } }31:Teab,class TextRender/*MVP*/ { constructor() { this.worker = this.createWorker(); this.promiseMap = new Map(); this.nextId = 0; // Handle messages from the worker this.worker.onmessage = (e) => { const { id, width, height, data, textContent} = e.data; if (this.promiseMap.has(id)) { const resolve = this.promiseMap.get(id); resolve({ width, height, data, textContent }); this.promiseMap.delete(id); } }; } async render(textContent, options) { const id = this.nextId++; return new Promise((resolve) => { this.promiseMap.set(id, resolve); this.worker.postMessage({ id, textContent, options }); }); } createWorker() { let src = this.workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let name = `TextRenderWorker(${Math.random().toString(36).substr(2, 9)})`; let objectURL = URL.createObjectURL(blob); const worker = new Worker(objectURL, { type: "module", name }); URL.revokeObjectURL(objectURL); worker.name = name return worker; } workerCode() { // Define only once vv const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); self.onmessage = async function (e) { const { id, textContent, options } = e.data; // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size fill = "black", resolution = 2 // Default resolution } = options || {}; // Create an OffscreenCanvas // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = fill; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread // Slow? canvas.convertToBlob().then((blob) => { const reader = new FileReader(); reader.onload = () => { self.postMessage({ id, width, height, data: reader.result, textContent }); }; reader.readAsDataURL(blob); }); // Convert to blob and send back to main thread // Faster /*const blob = await canvas.convertToBlob({ type: "image/png" }); // Specify MIME type const arrayBuffer = await blob.arrayBuffer(); // Convert ArrayBuffer to Base64 and format as a data URL const base64String = arrayBufferToBase64(arrayBuffer); self.postMessage({ id, width, height, data: `data:image/png;base64,${base64String}` // Properly formatted data URL });*/ }; // Helper function to convert ArrayBuffer to Base64 /*function arrayBufferToBase64(buffer) { let binary = ""; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); // Base64 encode the binary string }*/ } destroy() { this.worker.terminate(); } } 32:T1422,class TextRenderPool { constructor(workerCount = 4) { // Default to 4 workers this.workerPool = []; this.taskQueues = new Map(); // Tracks task queues for each worker this.promiseMap = new Map(); this.nextId = 0; // Initialize the worker pool and task queues for (let i = 0; i < workerCount; i++) { const worker = this.createWorker(); this.workerPool.push(worker); this.taskQueues.set(worker, []); // Initialize an empty queue for each worker // Handle messages from the worker worker.onmessage = (e) => { const { id, width, height, data } = e.data; if (this.promiseMap.has(id)) { const resolve = this.promiseMap.get(id); resolve({ width, height, data }); this.promiseMap.delete(id); // Process the next task in the queue for this worker this.processNextTask(worker); } }; } } async render(textContent, options) { const id = this.nextId++; return new Promise((resolve) => { this.promiseMap.set(id, resolve); // Find the worker with the shortest queue const worker = this.getWorkerWithShortestQueue(); // Add the task to the worker's queue const task = { id, textContent, options }; this.taskQueues.get(worker).push(task); // If the worker is idle, process the task immediately if (this.taskQueues.get(worker).length === 1) { this.processTask(worker, task); } }); } getWorkerWithShortestQueue() { let shortestQueueLength = Infinity; let selectedWorker = null; for (const worker of this.workerPool) { const queueLength = this.taskQueues.get(worker).length; if (queueLength < shortestQueueLength) { shortestQueueLength = queueLength; selectedWorker = worker; } } return selectedWorker; } processTask(worker, task) { const { id, textContent, options } = task; worker.postMessage({ id, textContent, options }); } processNextTask(worker) { const queue = this.taskQueues.get(worker); if (queue.length > 0) { const nextTask = queue.shift(); // Remove the first task from the queue console.debug( `Processing next task for worker ${worker.name}. Queue length: ${queue.length}` ); this.processTask(worker, nextTask); } else { console.debug(`Worker ${worker.name} has no tasks left in its queue.`); } } createWorker() { let src = this.workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let name = `TextRenderWorker(${Math.random().toString(36).substr(2, 9)})`; let objectURL = URL.createObjectURL(blob); const worker = new Worker(objectURL, { type: "module", name }); URL.revokeObjectURL(objectURL); worker.name = name return worker; } workerCode() { // Define only once vv const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); self.onmessage = async function (e) { const { id, textContent, options } = e.data; // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size fill = "black", resolution = 2 // Default resolution } = options || {}; // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = fill; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread const blob = await canvas.convertToBlob({ type: "image/png" }); // Specify MIME type const arrayBuffer = await blob.arrayBuffer(); // Convert ArrayBuffer to Base64 and format as a data URL const base64String = arrayBufferToBase64(arrayBuffer); self.postMessage({ id, width, height, data: `data:image/png;base64,${base64String}` // Properly formatted data URL }); }; function arrayBufferToBase64(buffer) { let binary = ""; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); // Base64 encode the binary string } } destroy() { // Terminate all workers in the pool this.workerPool.forEach((worker) => worker.terminate()); this.workerPool = []; this.taskQueues.clear(); this.promiseMap.clear(); } }33:T1e45,class TextRenderQueueV2 { constructor(workerCount = 4, maxConcurrentTasksPerWorker = 1) { this.workerPool = []; this.taskQueues = new Map(); // Tracks task queues for each worker this.promiseMap = new Map(); this.cache = new Map(); this.URLS = []; this.nextId = 0; // Global ID counter this.maxConcurrentTasksPerWorker = maxConcurrentTasksPerWorker; // Initialize the worker pool and task queues for (let i = 0; i < workerCount; i++) { const worker = this.createWorker(); this.workerPool.push(worker); this.taskQueues.set(worker, []); // Initialize an empty queue for each worker // Handle messages from the worker worker.onmessage = (e) => { const { id, width, height, data, link } = e.data; this.URLS.push(link); if (this.promiseMap.has(id)) { const resolve = this.promiseMap.get(id); resolve({ id, textContent:this.cache.get(id), width, height, data,link}); this.promiseMap.delete(id); // Process the next task in the queue for this worker (redundant?) // this.processNextTask(worker); } else { console.debug(`Received message for unknown task ID: ${id}`); } }; } } incrementId() { return this.nextId++; // Increment the global ID counter } async render(textContent, options) { const id = this.incrementId(); // Generate a globally unique ID // currently, only text is cached, not the data // idea to cache data on the input text as key? this.cache.set(id,textContent); return new Promise((resolve) => { this.promiseMap.set(id, resolve); // Find the worker with the shortest queue const worker = this.getWorkerWithShortestQueue(); // Add the task to the worker's queue const task = { id, textContent, options }; this.taskQueues.get(worker).push(task); this.processTask(worker, task); /* // If the worker has available capacity, process the task immediately // Redundant?) if (this.taskQueues.get(worker).length <= this.maxConcurrentTasksPerWorker) { this.processTask(worker, task); } else { // Wait until the worker has capacity this.waitForWorkerCapacity(worker).then(() => { this.processTask(worker, task); }); }*/ }); } waitForWorkerCapacity(worker) { return new Promise((resolve) => { const checkCapacity = () => { if (this.taskQueues.get(worker).length ?? 0 <= this.maxConcurrentTasksPerWorker) { resolve(); } else { checkCapacity() //setTimeout(checkCapacity, 1); // Check again after a short delay } }; checkCapacity(); }); } getWorkerWithShortestQueue() { let shortestQueueLength = Infinity; let selectedWorker = null; /*for (const worker of this.workerPool) { const queueLength = this.taskQueues.get(worker).length; if (queueLength < shortestQueueLength) { shortestQueueLength = queueLength; selectedWorker = worker; } }*/ // If no worker is found or all workers are equally busy, pick one randomly // Just random workers now if (!selectedWorker || shortestQueueLength >= this.maxConcurrentTasksPerWorker) { selectedWorker = this.workerPool[Math.floor(Math.random() * this.workerPool.length)]; } return selectedWorker; } processTask(worker, task) { const { id, textContent, options } = task; console.debug(`Worker ${worker.name} is processing task with id: ${id}`); worker.postMessage({ id, textContent, options, name:worker.name }); } // seems to not do anything processNextTask(worker) { const queue = this.taskQueues.get(worker); if (queue.length > 0) { const nextTask = queue.shift(); // Remove the first task from the queue console.debug( `Processing next task for worker ${worker.name}. Queue length: ${queue.length}` ); this.processTask(worker, nextTask); // seems logical to call here, but causes to processes tasks twice } if(queue.length > 0) { console.log(`Worker ${worker.name} has no tasks left in its queue.`); } } createWorker() { let src = this.workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let nth = this.workerPool.length + 1; let name = `TextRenderWorker(${nth}:${Math.random().toString(36).substr(2, 9)})`; let objectURL = URL.createObjectURL(blob); const worker = new Worker(objectURL, { type: "module", name, }); URL.revokeObjectURL(objectURL); worker.name = name; return worker; } workerCode() { // Define only once vv const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); // const mem = new Set(); self.onmessage = async function (e) { const { id, textContent, options, name } = e.data; //if(mem.has(id)) return // to prevent data processed twice (why??) console.debug(name,id) //mem.add(id) // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size fill = "black", resolution = 2, // Default resolution } = options || {}; // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = fill; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread /*const blob = await canvas.convertToBlob({ type: "image/png" }); // Specify MIME type const arrayBuffer = await blob.arrayBuffer(); // Convert ArrayBuffer to Base64 and format as a data URL const base64String = arrayBufferToBase64(arrayBuffer); self.postMessage({ id, width, height, data: `data:image/png;base64,${base64String}`, // Properly formatted data URL textContent });*/ // Probably implement this as an option => { output: "blob/dataURL" } // https://stackoverflow.com/questions/54523077/how-to-convert-offscreencanvas-to-datauri (canvas.convertToBlob || canvas.toBlob).call(canvas).then((blob) => { let link = URL.createObjectURL(blob); self.postMessage({id,width,height,textContent,link }); }); }; function arrayBufferToBase64(buffer) { let binary = ""; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); // Base64 encode the binary string } } destroy() { // Terminate all workers in the pool this.workerPool.forEach((worker) => worker.terminate()); this.workerPool.length = 0; this.workerPool = []; this.taskQueues.clear(); this.promiseMap.clear(); // Implement better ObjectURL revoke/caching logic // this.URLS.forEach(url=> URL.revokeObjectURL(url)); this.URLS.length = 0; } }34:T1744,class TextRenderQueue { constructor(workerCount = 4, maxConcurrentTasksPerWorker = 4) { this.workerPool = []; this.taskQueues = new Map(); // Tracks task queues for each worker this.promiseMap = new Map(); this.nextId = 0; // Global ID counter this.maxConcurrentTasksPerWorker = maxConcurrentTasksPerWorker; // Initialize the worker pool and task queues for (let i = 0; i < workerCount; i++) { const worker = this.createWorker(); this.workerPool.push(worker); this.taskQueues.set(worker, []); // Initialize an empty queue for each worker // Handle messages from the worker worker.onmessage = (e) => { const { id, width, height, data } = e.data; if (this.promiseMap.has(id)) { const resolve = this.promiseMap.get(id); resolve({ width, height, data }); this.promiseMap.delete(id); // Process the next task in the queue for this worker this.processNextTask(worker); } else { console.debug(`Received message for unknown task ID: ${id}`); } }; } } async render(textContent, options) { const id = this.generateUniqueId(); // Generate a globally unique ID return new Promise((resolve) => { this.promiseMap.set(id, resolve); // Find the worker with the shortest queue const worker = this.getWorkerWithShortestQueue(); // Add the task to the worker's queue const task = { id, textContent, options }; this.taskQueues.get(worker).push(task); // If the worker has available capacity, process the task immediately if (this.taskQueues.get(worker).length <= this.maxConcurrentTasksPerWorker) { this.processTask(worker, task); } }); } generateUniqueId() { return this.nextId++; // Increment the global ID counter } getWorkerWithShortestQueue() { let shortestQueueLength = Infinity; let selectedWorker = null; for (const worker of this.workerPool) { const queueLength = this.taskQueues.get(worker).length; if (queueLength < shortestQueueLength) { shortestQueueLength = queueLength; selectedWorker = worker; } } // If no worker is found or all workers are equally busy, pick one randomly if (!selectedWorker || shortestQueueLength >= this.maxConcurrentTasksPerWorker) { selectedWorker = this.workerPool[Math.floor(Math.random() * this.workerPool.length)]; } return selectedWorker; } processTask(worker, task) { const { id, textContent, options } = task; console.debug(`Worker ${worker.name} is processing task with id: ${id}`); worker.postMessage({ id, textContent, options,name:worker.name }); } processNextTask(worker) { const queue = this.taskQueues.get(worker); if (queue.length > 0) { const nextTask = queue.shift(); // Remove the first task from the queue console.debug( `Processing next task for worker ${worker.name}. Queue length: ${queue.length}` ); this.processTask(worker, nextTask); } else { console.debug(`Worker ${worker.name} has no tasks left in its queue.`); } } createWorker() { let src = this.workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let nth = this.workerPool.length+1; let name = `TextRenderWorker(${nth}:${Math.random().toString(36).substr(2, 9)})`; let objectURL = URL.createObjectURL(blob); const worker = new Worker(objectURL, { type: "module", name }); URL.revokeObjectURL(objectURL); worker.name = name; return worker; } workerCode() { // Define only once vv const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); self.onmessage = async function (e) { const { id, textContent, options, name } = e.data; console.log(name,id) // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size fill = "black", resolution = 2 // Default resolution } = options || {}; // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = fill; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread const blob = await canvas.convertToBlob({ type: "image/png" }); // Specify MIME type const arrayBuffer = await blob.arrayBuffer(); // Convert ArrayBuffer to Base64 and format as a data URL const base64String = arrayBufferToBase64(arrayBuffer); self.postMessage({ id, width, height, data: `data:image/png;base64,${base64String}` // Properly formatted data URL }); }; function arrayBufferToBase64(buffer) { let binary = ""; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); // Base64 encode the binary string } } destroy() { // Terminate all workers in the pool this.workerPool.forEach((worker) => worker.terminate()); this.workerPool = []; this.taskQueues.clear(); this.promiseMap.clear(); } }35:T8fc,function renderTextAsync(textContent, options = {}) { function workerCode() { self.onmessage = function (e) { const { textContent, options } = e.data; // Apply defaults to options const { family = "Arial", // Default font family size = 10, // Default font size resolution = 2, // Default resolution canvas = new OffscreenCanvas(0, 0) } = options || {}; // Create an OffscreenCanvas //const canvas = new OffscreenCanvas(0, 0); const ctx = canvas.getContext("2d"); // Set font size and family const font = `${size * resolution}px ${family}`; ctx.font = font; // Measure text dimensions const metrics = ctx.measureText(textContent); const ascent = Math.round(metrics.actualBoundingBoxAscent); const descent = Math.round(metrics.actualBoundingBoxDescent); const left = Math.round(metrics.actualBoundingBoxLeft); const right = Math.round(metrics.actualBoundingBoxRight); const width = left + right; const height = ascent + descent; // Resize canvas canvas.width = width; canvas.height = height; ctx.font = font; // Draw text ctx.fillStyle = "black"; // Default text color ctx.fillText(textContent, left, ascent); // Convert to blob and send back to main thread canvas.convertToBlob().then((blob) => { const reader = new FileReader(); reader.onload = () => { self.postMessage({ width, height, data: reader.result }); }; reader.readAsDataURL(blob); }); }; } let src = workerCode.toString(); src = src.split(/\n/g).slice(1, -1).join("\n"); let blob = new Blob([src], { type: "text/javascript" }); let objectURL = URL.createObjectURL(blob); return new Promise((resolve) => { const worker = new Worker(objectURL, { type: "module" }); if (options.canvas) { worker.postMessage({ textContent, options }, [options.canvas]); } else { worker.postMessage({ textContent, options }); } worker.onmessage = (e) => { const { width, height, data } = e.data; worker.terminate(); // Clean up the worker resolve({ width, height, data }); }; }); }36:T5ea,class ForwardChannel { constructor(workerA, workerB, outgoingCallback = null, incomingCallback = null) { this.source = workerA; this.target = workerB; this.outgoingCallback = outgoingCallback; this.incomingCallback = incomingCallback; this.channel = new MessageChannel(); this.setupCommunication(); } setupCommunication() { // Set up worker A to B communication this.source.postMessage({ type: "CHANNEL_INIT", port: this.channel.port1, }); // Set up worker B to A communication this.target.postMessage({ type: "CHANNEL_INIT", port: this.channel.port2, }); // Handle incoming messages from worker A this.source.onmessage = (e) => { if (typeof this.outgoingCallback === "function") { this.outgoingCallback(e.data); } if (e.data.type !== "CHANNEL_INIT") { this.target.postMessage(e.data); } }; // Handle incoming messages from worker B this.target.onmessage = (e) => { if (typeof this.incomingCallback === "function") { this.incomingCallback(e.data); } if (e.data.type !== "CHANNEL_INIT") { this.source.postMessage(e.data); } }; } destroy() { // Clean up event listeners this.source.onmessage = null; this.target.onmessage = null; // Terminate workers this.source.terminate(); this.target.terminate(); // Clear callbacks this.outgoingCallback = null; this.incomingCallback = null; } }37:[] 2e:{"title":"Asynchronous Text Rendering","cells":[{"id":0,"value":"# Asynchronous Text Rendering\n## Using Advanced textMetrics and OffscreenCanvas","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"{\n let raster = new TextRender();\n\n let out = await Promise.all([\n raster.render(\"hello\", {\n size: 10,\n family: \"Times New Roman\",\n resolution: 10\n }),\n raster.render(\"hello\", {\n size: 10,\n family: \"Times New Roman\",\n resolution: 10\n }),\n raster.render(\"hello\", {\n size: 10,\n family: \"Times New Roman\",\n resolution: 10\n }),\n raster.render(\"hello\", {\n size: 10,\n family: \"Times New Roman\",\n resolution: 10\n }),\n ]);\n /*out = await raster.render(\"world\", {\n size: 10,\n family: \"Arial\",\n resolution: 12\n });*/\n out = out[3]\n\n invalidation.then(()=>raster.destroy())\n\n return html`

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"___\n\n### Prototyping","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"BatchPoolExample = {\n const renderer = new TextRenderPool(5); // Create a pool of 4 workers\n\n async function renderTextsInBatches(texts, options, batchSize = 4) {\n const results = [];\n for (let i = 0; i < texts.length; i += batchSize) {\n const batch = texts.slice(i, i + batchSize);\n const batchResults = await Promise.all(\n batch.map((text) => renderer.render(text, options))\n );\n results.push(...batchResults);\n }\n return results;\n }\n\n async function main() {\n \n const texts = Array.from({ length: 861 }, (_, i) => `Text ${i + 1}`);\n const options = { family: \"Arial\", size: 20, fill: \"blue\", resolution: 1 };\n let t1 = performance.now()\n const results = await renderTextsInBatches(texts, options);\n return {time:~~(performance.now()-t1),results}\n }\n invalidation.then(()=>renderer.destroy())\n return main();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"SequentialPoolExample = {\n const renderer = new TextRenderPool(5); // Create a pool of 4 workers\n \n async function renderTextsSequentially(texts, options) {\n const results = [];\n for (const text of texts) {\n const result = await renderer.render(text, options);\n results.push(result);\n }\n return results;\n }\n\n async function main() {\n const texts = Array.from({ length: 32 }, (_, i) => `Text ${i + 1}`);\n const options = { family: \"Arial\", size: 20, fill: \"blue\", resolution: 2 };\n let t1 = performance.now();\n const results = await renderTextsSequentially(texts, options);\n return { time: ~~(performance.now() - t1), results };\n }\n invalidation.then(()=>renderer.destroy())\n return main()\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"TextRenderQueueV2 seems to be fastest, has some readability warts.","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"{\n let url = QueueExample[1].results[100].link;\n\n return svg``\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"QueueExample = {\n const renderer = new TextRenderQueueV2(3,3); // Create a pool of workers\n\n async function renderTexts() {\n const texts = Array.from({ length: 861 }, (_, i) => `Text ${i}`);\n const options = { family: \"Arial\", size: 20, fill: \"blue\", resolution: 2 };\n\n // Submit all tasks at once\n const promises = texts.map((text) => renderer.render(text, options));\n\n // Wait for all tasks to complete\n let t1 = performance.now()\n const results = await Promise.all(promises);\n\n return {time:~~(performance.now()-t1),results}\n }\n \n invalidation.then(()=>renderer.destroy())\n \n return [renderer,await renderTexts()]\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"#### As function","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"+ `25-02-02:` Naive worker implementation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":919,"value":"function SupervisorOutgoing(data) {\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"function SupervisorIncoming(data) {\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"function TextMetricsIncoming(data) {\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"function TextMetricsOutgoing (data) {\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"function TextRenderWorkerIncoming (data) {\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"function TextRenderWorkerOutgoing(data) {\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"{\n let Supervisor = {\n input: (data) => data,\n result: (data) => data,\n maxWorkers: 1\n };\n\n let TextMetrics = {\n input: (data) => data,\n output: (data) => data,\n maxWorkers: 2\n };\n\n let TextRenderer = {\n input: (data) => data,\n output: (data) => data,\n maxWorkers: 4\n };\n\n let Workflow = [\n { source: Supervisor.output, target: TextMetrics.input },\n { source: TextMetrics.output, target: TextRenderer.input },\n { source: TextRenderer.input, target: Supervisor.result }\n ];\n\n return Workflow;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}