feat(web): add VisualizerContext in NLS for beta

[keiya01]

Overview

I added VisualizerContext API to access to the API of the Visualizer.

You can access like this.

const visualizer = useVisualizer();
visualizer.current?.engine.flyTo({
  lat: 35.683252649879606,
  lng: 139.75262379931652,
  height: 5000,
});
visualizer.current?.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    value: {
      // GeoJSON
      type: "Feature",
      geometry: {
        coordinates: [139.75262379931652, 35.683252649879606, 1000],
        type: "Point",
      },
    },
  },
  marker: {
    imageColor: "blue",
  },
});

What I've done

• Added VisualizerContext API
• Added onMount props to Visualizer

What I haven't done

How I tested

1. Go to storybook on preview
2. Move to ?path/story/beta-lib-core-visualizer--api
3. Set the Cesium token to meta props on the bottom bar in storybook

{
"cesiumIonAccessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzVkMTc1ZS00NTRhLTRjY2QtYTQwZS01YmU2Mjg1ODAwN2YiLCJpZCI6MjU5LCJpYXQiOjE2ODgzOTgwMjl9.MZC_HUBRd0y5HJeB-F5QSpT-fEgTM6mI5gMaSND9FHc"
}

5. Reload the page, then camera is moved and one marker is added.

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	3b961cf
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/64c0d9fc92470600085063d0
😎 Deploy Preview	https://deploy-preview-591--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 configuration.

[keiya01]

You can use this API like this storybook page.

reearth/web/src/beta/lib/core/Visualizer/index.stories.tsx

Lines 29 to 66 in 8e8050e

	const Content: FC<{ ready?: boolean }> = ({ ready }) => {
	const visualizer = useVisualizer();
	useEffect(() => {
	if (!ready) return;
	visualizer.current?.engine.flyTo({
	lat: 35.683252649879606,
	lng: 139.75262379931652,
	height: 5000,
	});
	visualizer.current?.layers.add({
	type: "simple",
	data: {
	type: "geojson",
	value: {
	// GeoJSON
	type: "Feature",
	geometry: {
	coordinates: [139.75262379931652, 35.683252649879606, 1000],
	type: "Point",
	},
	},
	},
	marker: {
	imageColor: "blue",
	},
	});
	}, [visualizer, ready]);
	return null;
	};
	const VisualizerWrapper: FC<ComponentProps<typeof Component>> = props => {
	const [ready, setReady] = useState(false);
	return (
	<Component {...props} onMount={() => setReady(true)}>
	<Content ready={ready} />
	</Component>
	);
	};

[codecov]

Codecov Report

Merging #591 (3b961cf) into main (ad4ae6d) will decrease coverage by 0.02%.
The diff coverage is 0.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #591      +/-   ##
==========================================
- Coverage   28.28%   28.27%   -0.02%     
==========================================
  Files        1420     1421       +1     
  Lines      152717   152797      +80     
  Branches     3643     3644       +1     
==========================================
  Hits        43200    43200              
- Misses     108365   108445      +80     
  Partials     1152     1152              

Flag	Coverage Δ
web	26.15% <0.00%> (-0.02%)	⬇️
web-beta	26.15% <0.00%> (-0.02%)	⬇️
web-classic	26.15% <0.00%> (-0.02%)	⬇️
web-utils	26.15% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
...eta/features/Editor/Visualizer/CanvasArea/hooks.ts	0.00% <0.00%> (ø)
...ta/features/Editor/Visualizer/CanvasArea/index.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/Map/types/index.ts	0.00% <0.00%> (ø)
web/src/beta/lib/core/Visualizer/context.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/Visualizer/hooks.ts	0.00% <0.00%> (ø)
web/src/beta/lib/core/Visualizer/index.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/engines/Cesium/hooks.ts	0.00% <0.00%> (ø)
web/src/beta/lib/core/engines/Cesium/index.tsx	0.00% <0.00%> (ø)