[MS-37] Fix 37 scheduler (#28)

* test * 문제상황 재현 * ss * asdf * version up * deep
meursyphus · Mar 25, 2024 · 3b01f9b · 3b01f9b
1 parent 5ec6aba
commit 3b01f9b
Show file tree

Hide file tree

Showing 51 changed files with 2,001 additions and 2,295 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/flitter/package.json b/packages/flitter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A declarative, widget-based library built on SVG for simplifying data visualization with a Flutter-like syntax.",
   "keywords": [
     "flitter",

diff --git a/packages/flitter/src/runApp.ts b/packages/flitter/src/runApp.ts
@@ -39,21 +39,20 @@ export class AppRunner {
       window: _window,
       onResize: this.handleViewResize,
     });
-    const renderDispatcher = new RenderFrameDispatcher();
+    const renderFrameDispatcher = new RenderFrameDispatcher();
+    const scheduler = new Scheduler({ renderFrameDispatcher });
     const buildOwner = new BuildOwner({
-      onNeedVisualUpdate: () => renderDispatcher.dispatch(),
+      onNeedVisualUpdate: () => scheduler.ensureVisualUpdate(),
     });
 
     const renderOwner = new RenderOwner({
-      onNeedVisualUpdate: () => renderDispatcher.dispatch(),
+      onNeedVisualUpdate: () => scheduler.ensureVisualUpdate(),
       renderContext: renderContext,
       hitTestDispatcher: new HitTestDispatcher(),
     });
 
-    const scheduler = new Scheduler();
     scheduler.addPersistenceCallbacks(() => buildOwner.flushBuild());
     scheduler.addPersistenceCallbacks(() => renderOwner.drawFrame());
-    renderDispatcher.setOnFrame(() => scheduler.schedule());
     this.buildOwner = buildOwner;
     this.renderOwner = renderOwner;
     this.scheduler = scheduler;
@@ -124,7 +123,7 @@ export class AppRunner {
     this.layout();
     this.renderOwner.rearrangeDomOrder();
     this.paint();
-    this.scheduler.consumePostCallbacks();
+    this.scheduler.flushPostCallbacks();
   }
 
   rebuild() {

diff --git a/packages/flitter/src/scheduler/RenderFrameDispatcher.ts b/packages/flitter/src/scheduler/RenderFrameDispatcher.ts
@@ -8,16 +8,10 @@ class RenderFrameDispatcher {
     this.onFrame = () => callback();
   }
 
-  // Actually we don't need to invoke browser to render because browser automatically render its own state periodically
-  // so Here we just call onFrame callback.
-  private idle = true;
   dispatch() {
     if (typeof window === "undefined") return;
-    if (!this.idle) return;
-    this.idle = false;
     window.requestAnimationFrame(() => {
       this.onFrame?.();
-      this.idle = true;
     });
   }
 }

diff --git a/packages/flitter/src/scheduler/Scheduler.ts b/packages/flitter/src/scheduler/Scheduler.ts
@@ -1,40 +1,73 @@
+import { assert } from "src/utils";
+import type RenderFrameDispatcher from "./RenderFrameDispatcher";
+
+enum SchedulerPhase {
+  idle,
+  persistenceCallbacks,
+  postFrameCallbacks,
+}
+
 class Scheduler {
   phase: SchedulerPhase;
   private persistenceCallbacks: (() => void)[];
   private postFrameCallbacks: (() => void)[];
-  constructor() {
+  private renderFrameDispatcher: RenderFrameDispatcher;
+  constructor({
+    renderFrameDispatcher,
+  }: {
+    renderFrameDispatcher: RenderFrameDispatcher;
+  }) {
     this.phase = SchedulerPhase.idle;
     this.persistenceCallbacks = [];
     this.postFrameCallbacks = [];
+    this.renderFrameDispatcher = renderFrameDispatcher;
+
+    renderFrameDispatcher.setOnFrame(() => this.handleDrawFrame());
   }
 
-  consumePostCallbacks() {
+  flushPostCallbacks() {
     this.postFrameCallbacks.forEach(callback => {
       callback();
     });
     this.postFrameCallbacks = [];
   }
 
-  schedule() {
+  ensureVisualUpdate() {
     switch (this.phase) {
       case SchedulerPhase.idle:
       case SchedulerPhase.postFrameCallbacks:
-        this.performSchedule();
+        this.schedule();
         break;
       case SchedulerPhase.persistenceCallbacks:
         break;
     }
   }
 
-  private performSchedule() {
+  private hasScheduledFrame = false;
+  private schedule() {
+    if (this.hasScheduledFrame) return;
+    this.renderFrameDispatcher.dispatch();
+    this.hasScheduledFrame = true;
+  }
+
+  private handleDrawFrame() {
+    assert(
+      this.phase === SchedulerPhase.idle,
+      "Scheduler should be idle on beginning frame",
+    );
+    this.hasScheduledFrame = false;
+
     this.phase = SchedulerPhase.persistenceCallbacks;
+    this.flushPersistenceCallbacks();
+    this.phase = SchedulerPhase.postFrameCallbacks;
+    this.flushPostCallbacks();
+    this.phase = SchedulerPhase.idle;
+  }
+
+  private flushPersistenceCallbacks() {
     this.persistenceCallbacks.forEach(callback => {
       callback();
     });
-    this.phase = SchedulerPhase.postFrameCallbacks;
-    this.consumePostCallbacks();
-    this.postFrameCallbacks = [];
-    this.phase = SchedulerPhase.idle;
   }
 
   addPersistenceCallbacks(callback: () => void) {
@@ -46,10 +79,4 @@ class Scheduler {
   }
 }
 
-enum SchedulerPhase {
-  idle,
-  persistenceCallbacks,
-  postFrameCallbacks,
-}
-
 export default Scheduler;
diff --git a/packages/test/src/lib/diagram/Diagram.svelte b/packages/test/src/lib/diagram/Diagram.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
 	import Widget from '@meursyphus/flitter-svelte';
 	import Diagram from './widget/Diagram';
-	import { project } from './fixture';
-	let container: HTMLElement;
+	import type { Project } from './type';
+
+	type Subscribe = (callback: (project: Project) => void) => () => void;
+
+	export let project: Project;
+	export let subscribe: Subscribe = () => () => {};
 </script>
 
-<div bind:this={container} class="w-full h-full border-l border-black bg-gray-200">
-	<Widget
-		widget={Diagram({ project: project, subscribe: () => () => {} })}
-		width="100%"
-		height="500px"
-	/>
-</div>
+<Widget widget={Diagram({ project, subscribe })} width="100%" height="100%" />
 
 <style>
 	:global(svg text) {