edited scroll functionality when elements fit in page vs not

Author: BrianYan7

app/src/components/main/Canvas.tsx

@@ -335,63 +335,61 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
   };
 
   return (
-    <div>
-      <div
-        className={'componentContainer'}
-        ref={drop}
-        data-testid="drop"
-        style={canvasStyle}
-        onClick={onClickHandler}
-        onMouseMove={handleMouseMove}
-      >
-        {renderChildren(currentComponent.children)}
-        {remoteCursors.map(
-          (cursor, idx) =>
-            cursor.isVisible && (
-              <div
-                key={idx}
-                className="remote-cursor"
-                style={{
-                  position: 'absolute',
-                  left: cursor.x + 'px',
-                  top: cursor.y - 68 + 'px',
-                  //cursor style
-                  fontSize: '1em',
-                  color: userColors[userList.indexOf(cursor.remoteUserName)]
-                }}
-              >
-                {<FaMousePointer />}
-                {cursor.remoteUserName}
-              </div>
-            )
-        )}
-        <label className="switch">
-          {userList.length > 1 && (
-            <Button
-              className="btn-toggle"
-              onClick={multipleClicks}
+    <div
+      className={'componentContainer'}
+      ref={drop}
+      data-testid="drop"
+      style={canvasStyle}
+      onClick={onClickHandler}
+      onMouseMove={handleMouseMove}
+    >
+      {renderChildren(currentComponent.children)}
+      {remoteCursors.map(
+        (cursor, idx) =>
+          cursor.isVisible && (
+            <div
+              key={idx}
+              className="remote-cursor"
               style={{
-                position: 'fixed',
-                width: '100px',
-                height: '35px',
-                bottom: '200px',
-                right: '45vw',
-                padding: '5px',
-                textAlign: 'center',
-                color: '#ffffff',
-                backgroundColor: '#151515',
-                zIndex: 0,
-                border: '2px solid #354e9c',
-                whiteSpace: 'nowrap',
-                cursor: 'pointer',
-                textTransform: 'none'
+                position: 'absolute',
+                left: cursor.x + 'px',
+                top: cursor.y - 68 + 'px',
+                //cursor style
+                fontSize: '1em',
+                color: userColors[userList.indexOf(cursor.remoteUserName)]
               }}
             >
-              {toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
-            </Button>
-          )}
-        </label>
-      </div>
+              {<FaMousePointer />}
+              {cursor.remoteUserName}
+            </div>
+          )
+      )}
+      <label className="switch">
+        {userList.length > 1 && (
+          <Button
+            className="btn-toggle"
+            onClick={multipleClicks}
+            style={{
+              position: 'fixed',
+              width: '100px',
+              height: '35px',
+              bottom: '200px',
+              right: '45vw',
+              padding: '5px',
+              textAlign: 'center',
+              color: '#ffffff',
+              backgroundColor: '#151515',
+              zIndex: 0,
+              border: '2px solid #354e9c',
+              whiteSpace: 'nowrap',
+              cursor: 'pointer',
+              textTransform: 'none'
+            }}
+          >
+            {toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
+          </Button>
+        )}
+      </label>
     </div>
   );
 });

app/src/components/main/CanvasContainer.tsx

@@ -68,6 +68,7 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const container = document.getElementById('canvasContainer');
+  const components = document.querySelector('.componentContainer');
 
   const [zoom, setZoom] = useState(1);
 
@@ -81,7 +82,22 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
 
   //useEffect dependency is the length of the parent components. No changes in children will scroll to the bottom. Once elements surpass the view of the canvas, scroll to bottom, else, keep scroll bar to the top.
   useEffect(() => {
-    if (container && state.components[0].children.length > 0) {
+    if (
+      container &&
+      components &&
+      state.components[0].children.length > 0 &&
+      components.scrollHeight == components.clientHeight
+    ) {
+      console.log('if components scroll height', components.scrollHeight);
+      console.log('if components client height', components.clientHeight);
+      console.log('if container scroll height', container.scrollHeight);
+      console.log('if container client height', container.clientHeight);
+      container.scrollTop = 0;
+    } else if (container && components) {
+      console.log('else components scroll height', components.scrollHeight);
+      console.log('else components client height', components.clientHeight);
+      console.log('else container scroll height', container.scrollHeight);
+      console.log('else container client height', container.clientHeight);
       container.scrollTop = container.scrollHeight;
     }
   }, [state.components[0].children.length, zoom]);