Web Workers (React)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useEffect, useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as chart from '@mescius/wijmo.chart';
import * as pdf from '@mescius/wijmo.pdf';
import * as gridPdf from '@mescius/wijmo.grid.pdf';
import '@mescius/wijmo.chart.render';
import * as wjcGrid from '@mescius/wijmo.react.grid';
import * as WjChartModule from '@mescius/wijmo.react.chart';
import './app.css';
import { expenses, data } from './data';
const docName = 'FlexGrid.pdf';
const totals = ((totals) => [
    { name: 'Hotel', value: totals.hotel },
    { name: 'Transport', value: totals.transport },
    { name: 'Meal', value: totals.meal },
    { name: 'Fuel', value: totals.fuel },
    { name: 'Misc', value: totals.Misc }
])(expenses.totals);
const gridExportSettings = {
    styles: {
        cellStyle: {
            backgroundColor: '#ffffff',
            borderColor: '#c6c6c6'
        },
        altCellStyle: {
            backgroundColor: '#f9f9f9'
        },
        groupCellStyle: {
            backgroundColor: '#dddddd'
        },
        headerCellStyle: {
            backgroundColor: '#eaeaea'
        }
    }
};
function App() {
    const [count, setCount] = useState(0);
    const ctx1 = useRef({
        exporting: false,
        progress: 0,
        preparing: false,
        worker: null
    });
    const ctx2 = useRef({
        exporting: false,
        progress: 0,
        preparing: false,
        worker: null
    });
    const ctx3 = useRef({
        exporting: false,
        progress: 0,
        preparing: false,
        worker: null
    });
    const grid1Ref = useRef();
    const grid2Ref = useRef();
    const grid3Ref = useRef();
    const pieRef = useRef();
    const forceUpdate = () => setCount(Math.random());
    const initializeGrid = useEvent((source) => {
        grid1Ref.current = source;
    });
    const initializeGrid2 = useEvent((source) => {
        grid2Ref.current = source;
    });
    const initializeGrid3 = useEvent((source) => {
        grid3Ref.current = source;
    });
    const initializePie = useEvent((source) => {
        pieRef.current = source;
    });
    const export1 = () => {
        const ctx = ctx1.current;
        if (!ctx.exporting) {
            start(ctx, './export-grid', () => {
                if (ctx.worker && grid1Ref.current) {
                    gridPdf.PdfWebWorkerClient.exportGrid(ctx.worker, grid1Ref.current, docName, gridExportSettings, undefined, (prog) => {
                        progress(ctx, prog);
                    });
                }
            });
        }
        else {
            cancel(ctx);
        }
    };
    const export2 = () => {
        const ctx = ctx2.current;
        if (!ctx.exporting) {
            start(ctx, './export', () => {
                if (ctx.worker) {
                    gridPdf.PdfWebWorkerClient.addString(ctx.worker, 'Title', 'title');
                    gridPdf.PdfWebWorkerClient.addImage(ctx.worker, 'resources/canada.png', 'flag');
                    pieRef.current.saveImageToDataUrl(chart.ImageFormat.Svg, (url) => {
                        if (ctx.worker) {
                            gridPdf.PdfWebWorkerClient.addImage(ctx.worker, url, 'chart');
                        }
                    });
                    if (grid2Ref.current) {
                        gridPdf.PdfWebWorkerClient.addGrid(ctx.worker, grid2Ref.current, 'grid', gridExportSettings);
                    }
                    gridPdf.PdfWebWorkerClient.export(ctx.worker, null, (data) => pdf.saveBlob(data.blob, docName), (prog) => progress(ctx, prog));
                }
            });
        }
        else {
            cancel(ctx);
        }
    };
    const export3 = () => {
        const ctx = ctx3.current;
        if (!ctx.exporting) {
            start(ctx, './api', () => {
                if (ctx.worker) {
                    ctx.worker.addEventListener('message', e => {
                        if (e.data.type === 'progress') {
                            progress(ctx, e.data.value);
                        }
                        else {
                            pdf.saveBlob(new Blob([new Uint8Array(e.data.data)], { type: 'application/pdf' }), docName);
                        }
                    });
                    if (grid3Ref.current) {
                        let gridData = gridPdf.PdfWebWorkerClient.serializeGrid(grid3Ref.current, gridExportSettings);
                        // Send gridData as a tranferable object
                        ctx.worker.postMessage({ grid: gridData, settings: JSON.stringify(gridExportSettings) }, [gridData]);
                    }
                }
            });
        }
        else {
            cancel(ctx);
        }
    };
    /**
    * Creates web worker that executes the module from the specified URL.
    * @param url The module URL, relative to the src/workers directory.
    * @param ready
    */
    const loadWorker = (url, ready) => {
        let worker = new Worker('src/workers/worker-loader.js');
        worker.addEventListener('message', (e) => {
            if (e.data === '#ready#') {
                ready();
            }
        });
        worker.postMessage({ url: url });
        return worker;
    };
    const start = (ctx, url, ready) => {
        ctx.preparing = true;
        ctx.progress = 0;
        ctx.worker = loadWorker(url, () => ready());
        forceUpdate();
    };
    const progress = (ctx, progress) => {
        if (progress === 0 || progress === 1) {
            ctx.preparing = false;
            ctx.exporting = progress === 0;
            ctx.progress = progress;
        }
        else {
            ctx.progress = progress;
        }
        forceUpdate();
    };
    const cancel = (ctx) => {
        if (ctx.worker) {
            ctx.worker.terminate();
        }
        ctx.exporting = false;
        ctx.progress = 0;
        ctx.worker = null;
        forceUpdate();
    };
    useEffect(() => {
        return function cleanup() {
            if (ctx1.current.worker) {
                ctx1.current.worker.terminate();
                ctx1.current.worker = null;
            }
            if (ctx2.current.worker) {
                ctx2.current.worker.terminate();
                ctx2.current.worker = null;
            }
            if (ctx3.current.worker) {
                ctx3.current.worker.terminate();
                ctx3.current.worker = null;
            }
        };
    }, []);
    return (<div className="container-fluid">
      <p>
        This sample demonstrates the "Simple single grid export" scenario and shows how to export FlexGrid in
        a background thread.
      </p>
      <button className="btn btn-default" disabled={ctx1.current.preparing} onClick={export1}>{ctx1.current.exporting ? 'Cancel' : 'Export'}</button>&nbsp;
      <span>{(ctx1.current.progress * 100).toFixed(1) + "%"}</span>
      <wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} headersVisibility="Column" allowMerging="All" itemsSource={data} isDisabled={ctx1.current.preparing} initialized={initializeGrid}>
        <wjcGrid.FlexGridColumn header="ID" binding="id"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Start Date" binding="start" format="d"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="End Date" binding="end" format="d"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Country" binding="country"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Product" binding="product"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Amount" binding="amount" format="c"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Color" binding="color"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Pending" binding="amount2" format="c2"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Discount" binding="discount" format="p1"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Active" binding="active"></wjcGrid.FlexGridColumn>
      </wjcGrid.FlexGrid>
      <hr />
      <p>
        This sample demonstrates the "Custom document generation" scenario and shows how to export FlexPie
        (as a SVG image), FlexGrid and PNG image to a PDF in a background thread.
      </p>
      <p>
        The <a href="https://www.npmjs.com/package/xmldom">xmldom</a> library is used here to bring DOM
        support to the server to be able to draw SVG.
      </p>
      <button className="btn btn-default" disabled={ctx2.current.preparing} onClick={export2}>{ctx2.current.exporting ? 'Cancel' : 'Export'}</button>&nbsp;
      <span>{(ctx2.current.progress * 100).toFixed(1) + "%"}</span>
      <p></p>
      <div className="row">
        <div className="col-md-6">
          <WjChartModule.FlexPie itemsSource={totals} binding="value" bindingName="name" innerRadius={0.75} initialized={initializePie}>
            <WjChartModule.FlexPieDataLabel content="{value:c1}" position="Inside"></WjChartModule.FlexPieDataLabel>
          </WjChartModule.FlexPie>
        </div>
        <div className="col-md-6">
          <wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} headersVisibility="Column" allowMerging="All" itemsSource={data} isDisabled={ctx2.current.preparing} initialized={initializeGrid2}>
            <wjcGrid.FlexGridColumn header="ID" binding="id"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Start Date" binding="start" format="d"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="End Date" binding="end" format="d"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Country" binding="country"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Product" binding="product"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Amount" binding="amount" format="c"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Color" binding="color"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Pending" binding="amount2" format="c2"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Discount" binding="discount" format="p1"></wjcGrid.FlexGridColumn>
            <wjcGrid.FlexGridColumn header="Active" binding="active"></wjcGrid.FlexGridColumn>
          </wjcGrid.FlexGrid>
        </div>
      </div>
      <hr />

      <p>
        This sample demonstrates the "Low-level usage of Web Workers API" scenario and shows how to export
        FlexGrid to a PDF in a background thread using Web Workers API.
      </p>
      <button className="btn btn-default" disabled={ctx3.current.preparing} onClick={export3}>{ctx3.current.exporting ? 'Cancel' :
            'Export'}</button>&nbsp;
      <span>{(ctx3.current.progress * 100).toFixed(1) + "%"}</span>
      <p></p>
      <wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} headersVisibility="Column" allowMerging="All" itemsSource={data} isDisabled={ctx3.current.preparing} initialized={initializeGrid3}>
        <wjcGrid.FlexGridColumn header="ID" binding="id"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Start Date" binding="start" format="d"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="End Date" binding="end" format="d"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Country" binding="country"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Product" binding="product"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Amount" binding="amount" format="c"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Color" binding="color"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Pending" binding="amount2" format="c2"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Discount" binding="discount" format="p1"></wjcGrid.FlexGridColumn>
        <wjcGrid.FlexGridColumn header="Active" binding="active"></wjcGrid.FlexGridColumn>
      </wjcGrid.FlexGrid>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}