chore(web): add timeline manager

[airslice]

Overview

This PR add a timeline manager to contral all time related task in reearth.

• Basically all time related update request should go through timeline manager.
• For plugins all time related update requset should go through reearth.clock.
• Currently scene property still has timeline, so override scene property timeline still working (but not recommended).
• There's no break change on plugin API.

Extended clock API:

export type Clock = {
  startTime?: Date;
  stopTime?: Date;
  currentTime?: Date;
  playing?: boolean;
  paused?: boolean;
  speed?: number;
  stepType?: "rate" | "fixed";
  rangeType?: "unbounded" | "clamped" | "bounced";
  readonly tick?: () => Date | void;
  readonly play?: () => void;
  readonly pause?: () => void;
  // Set all start/stop/current at the same time.
  readonly setTime?: (time: {
    start: Date | string;
    stop: Date | string;
    current: Date | string;
  }) => void;
  readonly setSpeed?: (speed: number) => void;
  readonly setRangeType?: (rangeType: "unbounded" | "clamped" | "bounced") => void;
  readonly setStepType?: (stepType: "rate" | "fixed") => void;
};

Reearth event:

export type ReearthEventType = {
  // ...
  timelinecommit: [props: TimelineCommitter];
  // ...
};

export type TimelineCommitter = {
  source: "overrideSceneProperty" | "widgetContext" | "pluginAPI" | "featureResource";
  id?: string;
};

Plugin can add an event listener on timelinecommit and check the props timelineCommitter to know whether some other component updates the timeline.

const myId = reearth.widget?.id; // reearth.block?.id if it's a block.
reearth.on("timelinecommit", (committer) => {
  if(committer.source !== 'pluginAPI' || committer.id !== myId){
    console.log("Someone else changes the timeline!");
  }
})

Notice: this committer is widget level, if you have multiple timeline in one widget you need to handle the active state inside widget logic.

What I've done

• Add a timelineManager in Map.
• Add a timelineManagerRef in Visualizer.
• Refactor components using timelineManager:
  • Plugin API.
  • Widget context.
  • Indicator.
  • features/Resource.
• Extended plugin API reearth.clock.
• Add a new event timelinecommit to plugin API.
• Add timeline: TimelineManagerRef to MapRef so that it can be used in StoryPanel in the future. For example:

visualizerRef.current?.timeline?.current?.commit({
    cmd: "PLAY",
    committer: {
      source: "storyTimelineBlock",
      id: block?.id,
   },
});

What I haven't done

• Did not completly refactor built-in timeline widget since it's hidden on beta now. We don't have a clear plan for this widget for now but if we decide to enable it again in the future we can finalize it with connection to timeline manager.

How I tested

timeline.zip

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	cf3772d
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/65264f96be4c990008047357
😎 Deploy Preview	https://deploy-preview-718--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.

[codecov]

Codecov Report

Merging #718 (f8e0ece) into main (ef58856) will decrease coverage by 0.03%.
Report is 1 commits behind head on main.
The diff coverage is 14.43%.

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

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #718      +/-   ##
==========================================
- Coverage   26.74%   26.72%   -0.03%     
==========================================
  Files        1582     1583       +1     
  Lines      172343   172793     +450     
  Branches     3913     3913              
==========================================
+ Hits        46096    46178      +82     
- Misses     125158   125526     +368     
  Partials     1089     1089              

Flag	Coverage Δ
web	25.06% <14.43%> (-0.03%)	⬇️
web-beta	25.06% <14.43%> (-0.03%)	⬇️
web-classic	25.06% <14.43%> (-0.03%)	⬇️
web-utils	25.06% <14.43%> (-0.03%)	⬇️

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

Files	Coverage Δ
...rc/beta/lib/core/engines/Cesium/Feature/context.ts	100.00% <100.00%> (ø)
...re/Crust/Widgets/Widget/builtin/Timeline/index.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/Map/types/index.ts	0.00% <0.00%> (ø)
...eb/src/beta/lib/core/Crust/Plugins/Plugin/hooks.ts	0.00% <0.00%> (ø)
web/src/beta/lib/core/Crust/Plugins/types.ts	0.00% <0.00%> (ø)
web/src/beta/lib/core/Map/ref.ts	87.38% <40.00%> (-2.24%)	⬇️
web/src/beta/lib/core/Visualizer/index.tsx	0.00% <0.00%> (ø)
...b/src/beta/lib/core/Crust/Widgets/Widget/index.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/engines/Cesium/index.tsx	0.00% <0.00%> (ø)
web/src/beta/lib/core/Map/index.tsx	0.00% <0.00%> (ø)
... and 13 more

... and 6 files with indirect coverage changes