fix: Move widget name overlay to WidgetsEditor (#28306)

## Description
- The first widget name in anvil was being cut-off due to the fact that
the DOM grandparent of the widget name overlay canvas was not allowing
children to be visible beyond bounds.
- In this PR, the widget name overlay canvas renders in the
WidgetsEditor (earlier grandparent now parent) instead of
MainContainerWrapper (earlier parent now sibling)
- Also, this PR removes the dependency on refs by the widget name
overlay canvas

#### PR fixes following issue(s)
Fixes #28304

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress 

## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

app/client/src/layoutSystems/common/WidgetNamesCanvas/index.tsx

@@ -43,10 +43,7 @@ import {
  * @prop canvasWidth width of canvas in pixels
  * @prop containerRef ref of PageViewWrapper component
  */
-const OverlayCanvasContainer = (props: {
+const OverlayCanvasContainer = (props: { canvasWidth: number }) => {
-  canvasWidth: number;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-}) => {
   //widget name data of widgets
   const selectedWidgetNameData: WidgetNameData[] | undefined = useSelector(
     getSelectedWidgetNameData,
@@ -125,11 +122,7 @@ const OverlayCanvasContainer = (props: {
     const scrollParent: HTMLDivElement | null =
       getMainContainerAnvilCanvasDOMElement();
 
-    if (!props.containerRef?.current || !wrapperRef?.current || !scrollParent)
+    if (!wrapperRef?.current || !scrollParent) return;
-      return;
-
-    const container: HTMLDivElement = props.containerRef
-      ?.current as HTMLDivElement;
 
     const reset = resetCanvas.bind(this, widgetNamePositions, stageRef);
 
@@ -152,21 +145,16 @@ const OverlayCanvasContainer = (props: {
       widgetNamePositions,
     );
 
-    container.addEventListener("mousemove", mouseMoveHandler);
+    scrollParent.addEventListener("mousemove", mouseMoveHandler);
     scrollParent.addEventListener("scroll", scrollHandler);
     scrollParent.addEventListener("scrollend", scrollEndHandler);
 
     return () => {
-      container.removeEventListener("mousemove", mouseMoveHandler);
+      scrollParent.removeEventListener("mousemove", mouseMoveHandler);
       scrollParent.removeEventListener("scroll", scrollHandler);
       scrollParent.removeEventListener("scrollend", scrollEndHandler);
     };
-  }, [
+  }, [wrapperRef?.current, stageRef?.current]);
-    props.containerRef?.current,
-    wrapperRef?.current,
-    widgetNamePositions.current,
-    canvasPositions.current,
-  ]);
 
   // Reset the canvas if no widgets are focused or selected
   // Update the widget name positions if there are widgets focused or selected

app/client/src/layoutSystems/common/WidgetNamesCanvas/widgetNameRenderUtils.ts

@@ -12,17 +12,10 @@ import { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import { getWidgetNameComponent } from "./utils";
 import type { KonvaEventListener } from "konva/lib/Node";
 import type { Group } from "konva/lib/Group";
-import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
+import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
-import { getAnvilCanvasId } from "layoutSystems/anvil/canvas/utils";
 
 export function getMainContainerAnvilCanvasDOMElement() {
-  const mainContainerAnvilCanvasDOMId = getAnvilCanvasId(
+  return document.getElementById(CANVAS_VIEWPORT) as HTMLDivElement | null;
-    MAIN_CONTAINER_WIDGET_ID,
-  );
-
-  return document.getElementById(
-    mainContainerAnvilCanvasDOMId,
-  ) as HTMLDivElement | null;
 }
 
 /**

app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts

@@ -72,10 +72,12 @@ class LayoutElementPositionObserver {
   //Method to register widgets for resize observer changes
   public observeWidget(widgetId: string, ref: RefObject<HTMLDivElement>) {
     if (ref.current) {
-      const widgetDOMId = getAnvilWidgetDOMId(widgetId);
+      if (!this.registeredWidgets.hasOwnProperty(widgetId)) {
-      this.registeredWidgets[widgetDOMId] = { ref, id: widgetId };
+        const widgetDOMId = getAnvilWidgetDOMId(widgetId);
-      this.resizeObserver.observe(ref.current);
+        this.registeredWidgets[widgetDOMId] = { ref, id: widgetId };
-      this.mutationObserver.observe(ref.current, this.mutationOptions);
+        this.resizeObserver.observe(ref.current);
+        this.mutationObserver.observe(ref.current, this.mutationOptions);
+      }
     }
   }
 
@@ -97,16 +99,18 @@ class LayoutElementPositionObserver {
     ref: RefObject<HTMLDivElement>,
   ) {
     if (ref?.current) {
-      this.registeredLayouts[layoutId] = this.registeredLayouts[
+      const layoutDOMId = getAnvilLayoutDOMId(canvasId, layoutId);
-        getAnvilLayoutDOMId(canvasId, layoutId)
+      if (!this.registeredLayouts.hasOwnProperty(layoutDOMId)) {
-      ] = {
+        this.registeredLayouts[layoutId] = this.registeredLayouts[layoutDOMId] =
-        ref,
+          {
-        canvasId,
+            ref,
-        layoutId,
+            canvasId,
-        isDropTarget,
+            layoutId,
-      };
+            isDropTarget,
-      this.resizeObserver.observe(ref.current);
+          };
-      this.mutationObserver.observe(ref.current, this.mutationOptions);
+        this.resizeObserver.observe(ref.current);
+        this.mutationObserver.observe(ref.current, this.mutationOptions);
+      }
     }
   }
 

app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import {
-  getCanvasWidth,
   getIsFetchingPage,
   getViewModePageList,
   showCanvasTopSectionSelector,
@@ -39,7 +38,6 @@ import {
 } from "../../../layoutSystems/common/useLayoutSystemFeatures";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 import { MainContainerResizer } from "layoutSystems/common/mainContainerResizer/MainContainerResizer";
-import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas";
 
 interface MainCanvasWrapperProps {
   isPreviewMode: boolean;
@@ -47,7 +45,7 @@ interface MainCanvasWrapperProps {
   navigationHeight?: number;
   isAppSettingsPaneWithNavigationTabOpen?: boolean;
   currentPageId: string;
-  parentRef: React.RefObject<HTMLDivElement | null>;
+  canvasWidth: number;
 }
 
 const Wrapper = styled.section<{
@@ -125,7 +123,6 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const { currentPageId, isPreviewMode, shouldShowSnapShotBanner } = props;
 
   const isFetchingPage = useSelector(getIsFetchingPage);
-  const canvasWidth = useSelector(getCanvasWidth);
   const widgetsStructure = useSelector(getCanvasWidgetsStructure, equal);
   const pages = useSelector(getViewModePageList);
   const theme = useSelector(getCurrentThemeDetails);
@@ -143,11 +140,9 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const isWDSV2Enabled = useFeatureFlag("ab_wds_enabled");
 
   const checkLayoutSystemFeatures = useLayoutSystemFeatures();
-  const [enableMainContainerResizer, enableOverlayCanvas] =
+  const [enableMainContainerResizer] = checkLayoutSystemFeatures([
-    checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
-      LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
+  ]);
-      LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI,
-    ]);
 
   useEffect(() => {
     return () => {
@@ -174,7 +169,7 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
   if (!isPageInitializing && widgetsStructure) {
     node = (
       <Canvas
-        canvasWidth={canvasWidth}
+        canvasWidth={props.canvasWidth}
         enableMainCanvasResizer={enableMainContainerResizer}
         pageId={params.pageId}
         widgetsStructure={widgetsStructure}
@@ -254,12 +249,6 @@ function MainContainerWrapper(props: MainCanvasWrapperProps) {
           </div>
         )}
         {node}
-        {enableOverlayCanvas && (
-          <OverlayCanvasContainer
-            canvasWidth={canvasWidth}
-            containerRef={props.parentRef}
-          />
-        )}
       </Wrapper>
       <MainContainerResizer
         currentPageId={currentPageId}

app/client/src/pages/Editor/WidgetsEditor/index.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Debugger from "components/editorComponents/Debugger";
 
 import {
+  getCanvasWidth,
   getCurrentPageId,
   getCurrentPageName,
   previewModeSelector,
@@ -48,6 +49,11 @@ import { getSnapshotUpdatedTime } from "selectors/autoLayoutSelectors";
 import { getReadableSnapShotDetails } from "layoutSystems/autolayout/utils/AutoLayoutUtils";
 import AnonymousDataPopup from "../FirstTimeUserOnboarding/AnonymousDataPopup";
 import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "layoutSystems/common/useLayoutSystemFeatures";
+import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas";
 
 function WidgetsEditor() {
   const { deselectAll, focusWidget } = useWidgetSelection();
@@ -69,6 +75,8 @@ function WidgetsEditor() {
   const isAppSettingsPaneWithNavigationTabOpen = useSelector(
     getIsAppSettingsPaneWithNavigationTabOpen,
   );
+  const canvasWidth = useSelector(getCanvasWidth);
+
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
   const selectedTheme = useSelector(getSelectedAppTheme);
@@ -83,7 +91,11 @@ function WidgetsEditor() {
   const shouldShowSnapShotBanner =
     !!readableSnapShotDetails && !isPreviewingNavigation;
 
-  const ref = useRef<HTMLDivElement>(null);
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+
+  const [enableOverlayCanvas] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI,
+  ]);
 
   useEffect(() => {
     if (navigationPreviewRef?.current) {
@@ -224,7 +236,6 @@ function WidgetsEditor() {
               }
               isPreviewMode={isPreviewMode}
               isPublished={isPublished}
-              ref={ref}
               sidebarWidth={isPreviewingNavigation ? sidebarWidth : 0}
             >
               {shouldShowSnapShotBanner && (
@@ -233,15 +244,18 @@ function WidgetsEditor() {
                 </div>
               )}
               <MainContainerWrapper
+                canvasWidth={canvasWidth}
                 currentPageId={currentPageId}
                 isAppSettingsPaneWithNavigationTabOpen={
                   AppSettingsTabs.Navigation === appSettingsPaneContext?.type
                 }
                 isPreviewMode={isPreviewMode}
                 navigationHeight={navigationHeight}
-                parentRef={ref}
                 shouldShowSnapShotBanner={shouldShowSnapShotBanner}
               />
+              {enableOverlayCanvas && (
+                <OverlayCanvasContainer canvasWidth={canvasWidth} />
+              )}
             </PageViewWrapper>
 
             <CrudInfoModal />