feat: extend plugin api with captureScreen

[airslice]

Overview

This feature enables plugin get the image of the map.

Without this API the plugin can manually get the canvas and use canvas.toDataURL but the result will be a full black image due to the canvas webgl settings.

The solutions are:
A: Config contextOptions with {{ webgl: { preserveDrawingBuffer: true } }} but this will technically harm the performance so i did not apply this.
B: Call canvas.toDataURL immediately after a viewer.render. This is what i implemented for the API.

NOTICE: the output image comes from the canvas so anything implemented out of canvas (eg. infobox) can not be included. If you want to take a screenshot of all HTML elements you may try implement with some third-party libraries in plugin code.

What I've done

Extend the plugin API with

reearth.scene.captureScreen: (type?: string, encoderOptions?: number) => string | undefined

Refer canvas.toDataURL for parameters type encoderOptions

Thers's also a little refactor to unit test file included in this PR (Basically renaming function).

What I haven't done

How I tested

• Add unit test.
• Test with console.
• Test with plugin. Here's an example which can be tested with plugin editor.

reearth.ui.show(`
  <div id="wrapper">
    <button id="button">Capture</button>
  </div>
  <script>
    document.getElementById("button").addEventListener("click", (e) => {
      parent.postMessage({ type: "captureScreen" }, "*");
    });
    addEventListener("message", e => {
      if (e.source !== parent) return;
      if (e.data.type && e.data.type === 'getCaptureScreen') {
        const fileName = "capture.png";
        const link = document.createElement("a");
        link.download = fileName;
        link.href = e.data.payload;
        link.click();
        link.remove();
      }
    })
  </script>
`);

reearth.on("message", msg => {
  if (msg.type === "captureScreen") {
    reearth.ui.postMessage({
      type: "getCaptureScreen",
      payload: reearth.scene.captureScreen(),
    });
  }
});

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	c1d75a4
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/631ebc7e6200480008ac684a
😎 Deploy Preview	https://deploy-preview-310--reearth-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Merging #310 (c1d75a4) into main (12d546a) will increase coverage by 0.05%.
The diff coverage is 83.03%.

@@            Coverage Diff             @@
##             main     #310      +/-   ##
==========================================
+ Coverage   16.70%   16.75%   +0.05%     
==========================================
  Files         502      502              
  Lines       48700    48753      +53     
  Branches      520      524       +4     
==========================================
+ Hits         8135     8169      +34     
- Misses      40547    40566      +19     
  Partials       18       18              

Impacted Files	Coverage Δ
src/components/molecules/Visualizer/Engine/ref.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/Plugin/api.ts	7.14% <0.00%> (-0.08%)	⬇️
...rc/components/molecules/Visualizer/Plugin/types.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/hooks.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/storybook.tsx	0.00% <0.00%> (ø)
...components/molecules/Visualizer/Plugin/context.tsx	31.67% <25.00%> (-0.11%)	⬇️
...molecules/Visualizer/Engine/Cesium/useEngineRef.ts	66.66% <83.33%> (+0.59%)	⬆️
...les/Visualizer/Engine/Cesium/useEngineRef.test.tsx	99.67% <100.00%> (+0.03%)	⬆️

[lavalse]

I have quickly tested. Seems working fine.