feat: extend plugin API supports move widget

[airslice]

close reearth/reearth#364

Overview

Enable plugin set its widget position in widget align system.

⚠️Warning
Widget will get reload after set position.

What I've done

Implement plugin API:

reearth.widget.moveTo: ({
  zone: "oute" | "inner",
  section: "left" | "center" | "right",
  area: "top" | "middle" | "bottom",
  method?: "insert" | "append",   // "append" as default
}) => void;

What I haven't done

How I tested

Test 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;
    }
    .was-container{
      display: grid;
      grid-template-columns: 50px 220px 50px;
      grid-template-rows: 50px 220px 50px;
      grid-row-gap: 3px;
      grid-column-gap: 3px;
      align-items: stretch;
      jutisfy-content: stretch;
    }
    .inner{
      grid-template-columns: 50px auto 50px;
      grid-template-rows: 50px auto 50px;
    }
    .pos{
      display: block;
      cursor: pointer;
      border-radius: 5px;
      opacity: .9;
    }
    .pos:hover{
      opacity: 1;
    }
    .hori{
      background: rgb(233, 85, 24);
    }
    .vert{
      background: rgb(71, 112, 255);
    }
    .methods{
      margin-bottom: 5px;
    } 
    label{
      cursor: pointer;
    }
  </style>

  <div id="wrapper">
    <h3>Set Widget Position</h3>
    <h4>Inner Status<h4>
    <button id="updateInnerStatus">Update Inner Status</button>&nbsp;<span id="innerStatus"></span>
    <div class="methods">
      <label onClick="setMethod('append')"><input name="method" type="radio" />Append</label>
      <label onClick="setMethod('insert')"><input name="method" type="radio" />Insert</label>
    </div>
    <div class="was-container">
      <a class="pos hori" title="outer-left-top" onClick="setPos('outer','left','top')"></a>
      <a class="pos hori" title="outer-center-top" onClick="setPos('outer','center','top')"></a>
      <a class="pos hori" title="outer-right-top" onClick="setPos('outer','right','top')"></a>
      <a class="pos vert" title="outer-left-middle" onClick="setPos('outer','left','middle')"></a>
      <div class="was-container inner">
        <a class="pos hori" title="inner-left-top" onClick="setPos('inner','left','top')"></a>
        <a class="pos hori" title="inner-center-top" onClick="setPos('inner','center','top')"></a>
        <a class="pos hori" title="inner-right-top" onClick="setPos('inner','right','top')"></a>
        <a class="pos vert" title="inner-left-middle" onClick="setPos('inner','left','middle')"></a>
        <div></div>
        <a class="pos vert" title="inner-right-middle" onClick="setPos('inner','right','middle')"></a>
        <a class="pos hori" title="inner-left-bottom" onClick="setPos('inner','left','bottom')"></a>
        <a class="pos hori" title="inner-center-bottom" onClick="setPos('inner','center','bottom')"></a>
        <a class="pos hori" title="inner-right-bottom" onClick="setPos('inner','right','bottom')"></a>
      </div>
      <a class="pos vert" title="outer-right-middle" onClick="setPos('outer','right','middle')"></a>
      <a class="pos hori" title="outer-left-bottom" onClick="setPos('outer','left','bottom')"></a>
      <a class="pos hori" title="outer-center-bottom" onClick="setPos('outer','center','bottom')"></a>
      <a class="pos hori" title="outer-right-bottom" onClick="setPos('outer','right','bottom')"></a>
    </div>
  </div>

  <script>
    let innerStatus = 0;
    document.getElementById("updateInnerStatus").addEventListener("click", (e) => {
      innerStatus += 1;
      document.getElementById("innerStatus").innerHTML = innerStatus;
    });
    document.getElementById("innerStatus").innerHTML = innerStatus;

    let method;
    const setPos = (zone, section, area) => {
      parent.postMessage({ type: "setPos", pos:{ zone, section, area, method }}, "*");
    }
    const setMethod = (m) => {
      method = m;
    }
  </script>
`);

reearth.on("message", (msg) => {
  if (msg.type === "setPos") {
    reearth.widget.moveTo(msg.pos, "*");
  }
});

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	e14d2f7
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/6380826e538dbe0009829e6e
😎 Deploy Preview	https://deploy-preview-346--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 #346 (e14d2f7) into main (846a6e2) will decrease coverage by 0.04%.
The diff coverage is 2.87%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #346      +/-   ##
==========================================
- Coverage   18.39%   18.35%   -0.05%     
==========================================
  Files         514      515       +1     
  Lines       51644    51781     +137     
  Branches      640      640              
==========================================
+ Hits         9498     9502       +4     
- Misses      42111    42244     +133     
  Partials       35       35              

Impacted Files	Coverage Δ
...rc/components/molecules/Visualizer/Plugin/hooks.ts	4.11% <0.00%> (-0.03%)	⬇️
...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/index.tsx	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/storybook.tsx	0.00% <0.00%> (ø)
...nents/molecules/Visualizer/useWidgetAlignSystem.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/Plugin/api.ts	6.27% <9.09%> (+0.08%)	⬆️
...components/molecules/Visualizer/Plugin/context.tsx	30.72% <50.00%> (+0.34%)	⬆️