feat: add mouse events to plugin API

[airslice]

close reearth/reearth#299
close reearth/reearth#298

Overview

This feature extends plugin API event with multiple mouse events:

Events:

On mouse keys:

• click
• doubleclick
• mousedown
• mouseup
• rightclick
• rightdown
• rightup
• middleclick
• middledown
• middleup

On mouse behavior:

• mousemove
• mouseenter
• mouseleave

On mouse wheel:

• wheel

Also conatins:

• pinchstart
• pinchend
• pinchmove

Event Props:

• wheel: { delta: number; }
• others: { x?: number; y?: number; lat?: number; lng?: number; height?: number; layerId?: string; }

The implementation for engine cesium is base on resium Viewer events.

What I've done

• Extend engineRef methods with mouse events.
• Implement mouse events with engine cesium by using resium events.
• Pass the engine method to plugin content through providerProps.
• Call engine method inside plugin content to bind mouse events with plugin event emit.
• Extend plugin event types.

What I haven't done

Known issue:

• The plugin event off doesn't work well when calling from plugin. It might be related with quickjs and will not be handled in this PR.

How I tested

• Call plugin API to add event callbacks from both console and plugin.
• Here's a simple test plugin.

Screenshot

Which point I want you to review particularly

Known issue:

• The implementation of using resium Viewer events is somehow tortuous and the code added in engineRef also got some affected. I use a middle variable mouseEventCallbacks to store the callbacks and export it in order to pass it to resium Viewer component. This will perhaps lead to some problem when we add other engines in the future (not much maybe).
• The implementation of using plugin event (binding emit to events) will lead to some perfermance waste (but not much).

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	6b3f9b1
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/62e78c501e42a80009054044
😎 Deploy Preview	https://deploy-preview-280--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 #280 (6b3f9b1) into main (7eead9b) will increase coverage by 2.98%.
The diff coverage is 48.39%.

@@            Coverage Diff             @@
##             main     #280      +/-   ##
==========================================
+ Coverage   11.33%   14.32%   +2.98%     
==========================================
  Files         480      481       +1     
  Lines       45674    46135     +461     
  Branches      384      391       +7     
==========================================
+ Hits         5178     6607    +1429     
+ Misses      40482    39514     -968     
  Partials       14       14              

Impacted Files	Coverage Δ
...onents/molecules/Visualizer/Engine/Cesium/hooks.ts	0.00% <0.00%> (ø)
...nents/molecules/Visualizer/Engine/Cesium/index.tsx	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/Engine/ref.ts	0.00% <0.00%> (ø)
...rc/components/molecules/Visualizer/Plugin/hooks.ts	5.88% <0.00%> (+5.88%)	⬆️
...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.74% <8.57%> (+31.74%)	⬆️
...les/Visualizer/Engine/Cesium/useEngineRef.test.tsx	100.00% <100.00%> (ø)
...molecules/Visualizer/Engine/Cesium/useEngineRef.ts	62.64% <100.00%> (+62.64%)	⬆️
... and 22 more