feat: extend plugin API supports get viewport's size

[airslice]

close reearth/reearth#363

Overview

Enable plugin get the size of reearth viewport.
Enable plugin add an event listener on viewport's resize event.

Note:
isMobile === width <= 768

What I've done

Implement plugin APIs:

reearth.viewport = {
  width: number;
  height: number;
  isMobile: boolean;
}
reearth.on('resize', (e: {width: number, height: number, isMobile: boolean}) => {});

Also pass the isMobile as a prop to WAS.

• With this update it is possible to display/test mobile layout on earth editor & plugin editor now.

What I haven't done

How I tested

Tested with browsers:

• mac(intel) chrome 106.0.5249.119
• mac(intel) safari 15.5 (17613.2.7.1.8)
• mac(intel) firefox 106.0.2 (x64)

Tested in browser devtool console.
Tested with plugin:

reearth.ui.show(`
  <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>Viewport size & onresize</h3>
    <button id="getSize">get</button>
    <h4>Width: <span id="width"></span></h4>
    <h4>Height: <span id="height"></span></h4>
    <h4>isMobile: <span id="isMobile"></span></h4>
  </div>

  <script>
    document.getElementById("getSize").addEventListener("click", (e) => {
      parent.postMessage({ type: "getSize" }, "*");
    });

    addEventListener("message", (e) => {
      if (e.source !== parent) return;
      if (e.data.type === "getSizeResult"){
        document.getElementById("width").innerHTML = e.data.message.width;
        document.getElementById("height").innerHTML = e.data.message.height;
        document.getElementById("isMobile").innerHTML = e.data.message.isMobile;
      }

    });
  </script>
`);

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

reearth.on("resize", (e) => {
   reearth.ui.postMessage({ message: e, type: "getSizeResult" }, "*");
})

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	ebd7ab8
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/636b02a78e951900083befbc
😎 Deploy Preview	https://deploy-preview-342--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 #342 (e34c8b7) into main (0395d2b) will decrease coverage by 0.02%.
The diff coverage is 3.44%.

❗ Current head e34c8b7 differs from pull request most recent head ebd7ab8. Consider uploading reports for the commit ebd7ab8 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #342      +/-   ##
==========================================
- Coverage   18.12%   18.09%   -0.03%     
==========================================
  Files         512      512              
  Lines       50945    51054     +109     
  Branches      619      619              
==========================================
+ Hits         9232     9237       +5     
- Misses      41692    41796     +104     
  Partials       21       21              

Impacted Files	Coverage Δ
...rc/components/molecules/Visualizer/Block/index.tsx	0.00% <0.00%> (ø)
.../components/molecules/Visualizer/Infobox/index.tsx	0.00% <0.00%> (ø)
...rc/components/molecules/Visualizer/Plugin/hooks.ts	4.76% <0.00%> (-0.02%)	⬇️
...rc/components/molecules/Visualizer/Plugin/types.ts	0.00% <0.00%> (ø)
...c/components/molecules/Visualizer/Widget/index.tsx	0.00% <0.00%> (ø)
...ts/molecules/Visualizer/WidgetAlignSystem/Area.tsx	0.00% <0.00%> (ø)
...ecules/Visualizer/WidgetAlignSystem/MobileZone.tsx	0.00% <0.00%> (ø)
...ts/molecules/Visualizer/WidgetAlignSystem/Zone.tsx	0.00% <0.00%> (ø)
...s/molecules/Visualizer/WidgetAlignSystem/index.tsx	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/hooks.ts	0.00% <0.00%> (ø)
... and 4 more