feat: extend plugin API supports close widget

[airslice]

close reearth/reearth#365

Overview

Enable plugin to close the main ui widget.

What I've done

Implement the API:

reearth.ui.close: () => void;

What I haven't done

How I tested

Tested with plugin:

const ui = `
  <style>
    html,
    body {
      margin: 0;
      width: 350px;
      font-size: 14px;
    }
    button {
      margin: 0;
    }
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      padding: 12px;
      background: white;
    }
    #wrapper {
      box-sizing: border-box;
      border-radius: 12px;
      background: white;
      height: 100%;
    }
    h3{
      margin: 0 0 5px;
    }
    h4{
      margin: 5px 0;
    }
  </style>

  <div id="wrapper">
    <h3>Close Widget</h3>
    <h4>Resize the viewport and this widget will be visible only when viewport's height >= 500.</h4>
    <h4>Current height is <span id="currentHeight"></span></h4>
  </div>

  <script>
    parent.postMessage({ type: "requestViewport" });

    addEventListener("message", (e) => {
      if (e.source !== parent) return;
      if (e.data.type === "getViewport"){
        document.getElementById("currentHeight").innerHTML = e.data.message.height
      }
    });
  </script>
`;

let visible;

function updateUIState(viewport){
  if(viewport.height >= 500){
    if(visible !== true){
      reearth.ui.show(ui);
      visible = true;
    }
  }else if(visible !== false){
    reearth.ui.close();
    visible = false;
  }
  reearth.ui.postMessage({message:viewport, type: "getViewport"});
}

updateUIState(reearth.viewport);

reearth.on("resize", (viewport) => {
  updateUIState(viewport);
})

reearth.on("message", (msg) => {
  if (msg.type === "requestViewport") {
    reearth.ui.postMessage({message: reearth.viewport, type: "getViewport"});
  }
});

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	d6bd6fa
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/6376da4b93b59a0009255b83
😎 Deploy Preview	https://deploy-preview-355--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 #355 (d6bd6fa) into main (2257586) will increase coverage by 0.00%.
The diff coverage is 31.03%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #355   +/-   ##
=======================================
  Coverage   18.38%   18.38%           
=======================================
  Files         514      514           
  Lines       51617    51638   +21     
  Branches      640      640           
=======================================
+ Hits         9488     9493    +5     
- Misses      42094    42110   +16     
  Partials       35       35           

Impacted Files	Coverage Δ
src/components/molecules/Visualizer/Plugin/api.ts	6.19% <0.00%> (-0.26%)	⬇️
...rc/components/molecules/Visualizer/Plugin/types.ts	0.00% <0.00%> (ø)
...rc/components/molecules/Visualizer/Plugin/hooks.ts	4.14% <7.14%> (-0.14%)	⬇️
src/components/atoms/Plugin/index.tsx	33.05% <33.33%> (ø)
.../components/atoms/Plugin/PluginIFrame/useIFrame.ts	100.00% <100.00%> (ø)
...c/components/molecules/Visualizer/Plugin/index.tsx	100.00% <100.00%> (ø)