Hide drop selector on scroll in iframe (UI builder) (#14443)

* Hide drop selector on scroll in canvas * Added Changelog entry
microsoft · Aug 14, 2020 · 2b472d6 · 2b472d6
1 parent 06437d2
commit 2b472d6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 28 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -43,6 +43,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Move component in iframe by drag and drop @vyhnalekl ([#14432](https://github.com/microsoft/fluentui/pull/14432))
 - Removed props JSON from right side menu @vyhnalekl ([#14503](https://github.com/microsoft/fluentui/pull/14503))
 - Fixed top's component debug frame above iframe @vyhnalekl ([#14329](https://github.com/microsoft/fluentui/pull/14329))
+- Hide drop selector on scroll in iframe (UI builder) @vyhnalekl ([#14443](https://github.com/microsoft/fluentui/pull/14443))
 
 <!--------------------------------[ v0.51.0 ]------------------------------- -->
 ## [v0.51.0](https://github.com/OfficeDev/office-ui-fabric-react/tree/fluentui_v0.51.0) (2020-07-27)

diff --git a/packages/fluentui/react-builder/src/components/Canvas.tsx b/packages/fluentui/react-builder/src/components/Canvas.tsx
@@ -45,6 +45,8 @@ export const Canvas: React.FunctionComponent<CanvasProps> = ({
   renderJSONTreeElement,
   style,
 }) => {
+  const [hideDropSelector, setHideDropSelector] = React.useState(false);
+
   const iframeId = React.useMemo(
     () =>
       `frame-${Math.random()
@@ -68,9 +70,10 @@ export const Canvas: React.FunctionComponent<CanvasProps> = ({
 
   const handleMouseMove = React.useCallback(
     (e: MouseEvent) => {
+      hideDropSelector && setHideDropSelector(false);
       onMouseMove?.(iframeCoordinatesToWindowCoordinates(e));
     },
-    [iframeCoordinatesToWindowCoordinates, onMouseMove],
+    [iframeCoordinatesToWindowCoordinates, onMouseMove, hideDropSelector],
   );
 
   const handleMouseUp = React.useCallback(
@@ -80,9 +83,10 @@ export const Canvas: React.FunctionComponent<CanvasProps> = ({
       e.preventDefault();
       e.stopPropagation();
 
+      hideDropSelector && setHideDropSelector(false);
       onMouseUp();
     },
-    [onMouseUp],
+    [onMouseUp, hideDropSelector],
   );
 
   const handleSelectComponent = React.useCallback(
@@ -287,12 +291,20 @@ export const Canvas: React.FunctionComponent<CanvasProps> = ({
                 jsonTree={jsonTree}
                 mountDocument={document}
                 onDropPositionChange={onDropPositionChange}
+                hideSelector={hideDropSelector}
               />
             )}
             <EventListener type="keydown" listener={onKeyDown} target={document} />
             <Provider theme={teamsTheme} target={document}>
               {draggingElement && <EventListener type="mousemove" listener={handleMouseMove} target={document} />}
               {draggingElement && <EventListener type="mouseup" listener={handleMouseUp} target={document} />}
+              {draggingElement && (
+                <EventListener
+                  type="scroll"
+                  listener={() => !hideDropSelector && setHideDropSelector(true)}
+                  target={document}
+                />
+              )}
               {renderJSONTreeToJSXElement(jsonTree, renderJSONTreeElement)}
             </Provider>
           </>

diff --git a/packages/fluentui/react-builder/src/components/DropSelector.tsx b/packages/fluentui/react-builder/src/components/DropSelector.tsx
@@ -11,6 +11,7 @@ export type DropSelectorProps = {
   filter?;
   jsonTree: JSONTreeElement;
   mountDocument?: Document;
+  hideSelector?: Boolean;
 };
 
 type InElementPosition = 'top' | 'right' | 'bottom' | 'left' | 'center';
@@ -66,6 +67,7 @@ export const DropSelector: React.FunctionComponent<DropSelectorProps> = ({
   onDropPositionChange,
   mountDocument = isBrowser() ? window.document : null,
   filter = fiberNav => fiberNav,
+  hideSelector = false,
 }) => {
   const selectorRef = React.createRef<HTMLDivElement>();
   const mouseRef = React.createRef<HTMLDivElement>();
@@ -158,32 +160,36 @@ export const DropSelector: React.FunctionComponent<DropSelectorProps> = ({
 
   return (
     <>
-      <div
-        ref={selectorRef}
-        style={{
-          position: 'fixed',
-          zIndex: 99999999,
-          pointerEvents: 'none',
-          userSelect: 'none',
-          outlineOffset: '-1px',
-        }}
-      />
-      <div
-        ref={mouseRef}
-        style={{
-          position: 'fixed',
-          width: '8px',
-          height: '8px',
-          borderRadius: '50%',
-          border: '2px solid red',
-          margin: '-5px 0 0 -5px',
-          zIndex: 99999999,
-          pointerEvents: 'none',
-          userSelect: 'none',
-        }}
-      />
-      <EventListener listener={handleMouseMove} target={mountDocument.body} type="mousemove" />
-      <EventListener listener={handleMouseLeave} target={mountDocument.body} type="mouseleave" />
+      {!hideSelector && (
+        <>
+          <div
+            ref={selectorRef}
+            style={{
+              position: 'fixed',
+              zIndex: 99999999,
+              pointerEvents: 'none',
+              userSelect: 'none',
+              outlineOffset: '-1px',
+            }}
+          />
+          <div
+            ref={mouseRef}
+            style={{
+              position: 'fixed',
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              border: '2px solid red',
+              margin: '-5px 0 0 -5px',
+              zIndex: 99999999,
+              pointerEvents: 'none',
+              userSelect: 'none',
+            }}
+          />
+          <EventListener listener={handleMouseMove} target={mountDocument.body} type="mousemove" />
+          <EventListener listener={handleMouseLeave} target={mountDocument.body} type="mouseleave" />
+        </>
+      )}
     </>
   );
 };