fix: fix blink for resize observer

daybrush · Jan 20, 2023 · e9f97c7 · e9f97c7
1 parent dddde07
commit e9f97c7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/react-ruler/src/demo/App.tsx b/packages/react-ruler/src/demo/App.tsx
@@ -32,6 +32,16 @@ export default class App extends React.Component {
 
     render() {
         return (<div>
+            <Ruler
+                textAlign={"center"}
+                segment={5}
+                mainLineSize={12}
+                shortLineSize={5}
+                longLineSize={4}
+                type="horizontal"
+                useResizeObserver={true}
+                style={{ display: "block", width: "100%", height: "50px" }}
+            />
             <Ruler ref={ref(this, "ruler1")}
                 negativeRuler={false}
                 textAlign={"center"}

diff --git a/packages/react-ruler/src/react-ruler/Ruler.tsx b/packages/react-ruler/src/react-ruler/Ruler.tsx
@@ -37,7 +37,6 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
     private height: number = 0;
     private _zoom = 0;
     private _rulerScale = 0;
-    private _observerId = 0;
     private _observer: ResizeObserver | null = null;
 
     public render() {
@@ -60,14 +59,15 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
         const context = canvas.getContext("2d", { alpha: false })!;
 
         this.canvasContext = context;
-        this.resize();
 
         if (this.props.useResizeObserver) {
             this._observer = new ResizeObserver(this._checkResize);
 
             this._observer.observe(canvas, {
                 box: "border-box",
             });
+        } else {
+            this.resize();
         }
     }
     public componentDidUpdate() {
@@ -76,7 +76,6 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
     public componentWillUnmount(): void {
         this.state.scrollPos = 0;
         this._observer?.disconnect();
-        cancelAnimationFrame(this._observerId);
     }
     /**
      * Gets the scroll position of the ruler.
@@ -370,9 +369,6 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
         return this._rulerScale;
     }
     private _checkResize = () => {
-        cancelAnimationFrame(this._observerId);
-        this._observerId = requestAnimationFrame(() => {
-            this.resize();
-        });
+        this.resize();
     }
 }