fix: fix resize observer

daybrush · May 7, 2023 · 29cf3b0 · 29cf3b0
1 parent a8acea3
commit 29cf3b0
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 54 deletions.
diff --git a/packages/react-guides/src/demo/InfiniteViewer.tsx b/packages/react-guides/src/demo/InfiniteViewer.tsx
@@ -5,61 +5,64 @@ import InfiniteViewer from "react-infinite-viewer";
 import "./InfiniteViewer.css";
 
 export default function App() {
-  const [zoom, setZoom] = React.useState(1);
-  const unit = Math.round(Math.floor(1 / zoom) * 50) || 50;
-  const viewerRef = React.useRef<InfiniteViewer>(null);
-  const horizontalGuidesRef = React.useRef<Guides>(null);
-  const verticalGuidesRef = React.useRef<Guides>(null);
+    const [zoom, setZoom] = React.useState(1);
+    const unit = Math.round(Math.floor(1 / zoom) * 50) || 50;
+    const viewerRef = React.useRef<InfiniteViewer>(null);
+    const horizontalGuidesRef = React.useRef<Guides>(null);
+    const verticalGuidesRef = React.useRef<Guides>(null);
 
-  React.useEffect(() => {
-    viewerRef.current!.scrollCenter();
-  }, []);
+    React.useEffect(() => {
+        viewerRef.current!.scrollCenter();
+    }, []);
 
-  return (
-    <div className="App">
-      <div className="guides horizontal">
-        <Guides
-          ref={horizontalGuidesRef}
-          type="horizontal"
-          useResizeObserver={true}
-          displayDragPos={true}
-          displayGuidePos={true}
-          zoom={zoom}
-          unit={unit}
-        />
-      </div>
-      <div className="guides vertical">
-        <Guides
-          ref={verticalGuidesRef}
-          type="vertical"
-          useResizeObserver={true}
-          displayDragPos={true}
-          displayGuidePos={true}
-          zoom={zoom}
-          unit={unit}
-        />
-      </div>
-      <InfiniteViewer
-        ref={viewerRef}
-        className="viewer"
-        useAutoZoom={true}
-        useWheelScroll={true}
-        onScroll={(e) => {
-          horizontalGuidesRef.current!.scroll(e.scrollLeft);
-          horizontalGuidesRef.current!.scrollGuides(e.scrollTop);
+    return (
+        <div className="App">
+            <div className="guides horizontal">
+                <Guides
+                    ref={horizontalGuidesRef}
+                    type="horizontal"
+                    useResizeObserver={true}
+                    displayDragPos={true}
+                    displayGuidePos={true}
+                    zoom={zoom}
+                    unit={unit}
+                />
+            </div>
+            <div className="guides vertical">
+                <Guides
+                    ref={verticalGuidesRef}
+                    type="vertical"
+                    // useResizeObserver={true}
+                    displayDragPos={true}
+                    displayGuidePos={true}
+                    zoom={zoom}
+                    unit={unit}
+                    onChangeGuides={({ guides }) => {
+                        console.log("vertical", guides);
+                    }}
+                />
+            </div>
+            <InfiniteViewer
+                ref={viewerRef}
+                className="viewer"
+                useAutoZoom={true}
+                useWheelScroll={true}
+                onScroll={(e) => {
+                    horizontalGuidesRef.current!.scroll(e.scrollLeft);
+                    horizontalGuidesRef.current!.scrollGuides(e.scrollTop);
 
-          verticalGuidesRef.current!.scroll(e.scrollTop);
-          verticalGuidesRef.current!.scrollGuides(e.scrollLeft);
-        }}
-        onPinch={(e) => {
-          const zoom = e.zoom;
-          horizontalGuidesRef.current!.zoomTo(zoom);
-          verticalGuidesRef.current!.zoomTo(zoom);
-          setZoom(e.zoom);
-        }}
-      >
-        <div className="viewport">Viewport</div>
-      </InfiniteViewer>
-    </div>
-  );
+                    verticalGuidesRef.current!.scroll(e.scrollTop);
+                    verticalGuidesRef.current!.scrollGuides(e.scrollLeft);
+                }}
+                onPinch={(e) => {
+                    const zoom = e.zoom;
+                    horizontalGuidesRef.current!.zoomTo(zoom);
+                    verticalGuidesRef.current!.zoomTo(zoom);
+                    setZoom(e.zoom);
+                }}
+            >
+                <div className="viewport">Viewport</div>
+            </InfiniteViewer>
+        </div>
+    );
 }
diff --git a/packages/react-guides/src/react-guides/Guides.tsx b/packages/react-guides/src/react-guides/Guides.tsx
@@ -206,6 +206,11 @@ export default class Guides extends React.PureComponent<GuidesProps, GuidesState
             this._observer.observe(this.guidesElement, {
                 box: "border-box",
             });
+            this._observer.observe(this.getRulerElement(), {
+                box: "border-box",
+            });
+        } else {
+            this._onCheck();
         }
     }
     public componentWillUnmount() {