Updated dnd to follow pointer position (ToolJet#2144)

* Updated dnd to follow pointer position * Remove console.log * Select component on resize * Minor fixes
dgo2dance · Feb 6, 2022 · b59817d · b59817d
1 parent b1a9af0
commit b59817d
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 40 deletions.
diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
@@ -49,7 +49,7 @@ export const Modal = function Modal({
         onEscapeKeyDown={() => setShowModal(false)}
       >
         {containerProps.mode === 'edit' && (
-          <ConfigHandle id={id} component={component} configHandleClicked={containerProps.onComponentClick} />
+          <ConfigHandle id={id} component={component} setSelectedComponent={containerProps.onComponentClick} />
         )}
         <BootstrapModal.Header>
           <BootstrapModal.Title>{title}</BootstrapModal.Title>

diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 export const ConfigHandle = function ConfigHandle({
   id,
   component,
-  configHandleClicked,
+  setSelectedComponent,
   dragRef,
   removeComponent,
   position,
@@ -24,7 +24,7 @@ export const ConfigHandle = function ConfigHandle({
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            configHandleClicked(id, component);
+            setSelectedComponent(id, component);
           }}
           role="button"
         >

diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
@@ -27,7 +27,7 @@ export const Container = ({
   onComponentOptionChanged,
   onComponentOptionsChanged,
   appLoading,
-  configHandleClicked,
+  setSelectedComponent,
   zoomLevel,
   currentLayout,
   removeComponent,
@@ -75,7 +75,6 @@ export const Container = ({
           },
         })
       );
-      console.log('new boxes - 1', boxes);
     },
     [boxes]
   );
@@ -88,7 +87,6 @@ export const Container = ({
       firstUpdate.current = false;
       return;
     }
-    console.log('new boxes - 2', boxes);
     appDefinitionChanged({ ...appDefinition, components: boxes });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [boxes]);
@@ -163,9 +161,13 @@ export const Container = ({
         const offsetFromTopOfWindow = canvasBoundingRect.top;
         const offsetFromLeftOfWindow = canvasBoundingRect.left;
         const currentOffset = monitor.getSourceClientOffset();
+        const initialClientOffset = monitor.getInitialClientOffset();
+        const delta = monitor.getDifferenceFromInitialOffset();
 
         left = Math.round(currentOffset.x + currentOffset.x * (1 - zoomLevel) - offsetFromLeftOfWindow);
-        top = Math.round(currentOffset.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow);
+        top = Math.round(
+          initialClientOffset.y - 10 + delta.y + initialClientOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow
+        );
 
         id = uuidv4();
 
@@ -306,9 +308,7 @@ export const Container = ({
     }
   }
 
-  React.useEffect(() => {
-    console.log('current component => ', selectedComponent);
-  }, [selectedComponent]);
+  React.useEffect(() => {}, [selectedComponent]);
 
   const handleAddThread = async (e) => {
     e.stopPropogation && e.stopPropogation();
@@ -459,7 +459,7 @@ export const Container = ({
               draggingStatusChanged={(status) => setIsDragging(status)}
               inCanvas={true}
               zoomLevel={zoomLevel}
-              configHandleClicked={configHandleClicked}
+              setSelectedComponent={setSelectedComponent}
               removeComponent={removeComponent}
               currentLayout={currentLayout}
               deviceWindowWidth={deviceWindowWidth}
@@ -479,7 +479,7 @@ export const Container = ({
                 onComponentOptionsChanged,
                 appLoading,
                 zoomLevel,
-                configHandleClicked,
+                setSelectedComponent,
                 removeComponent,
                 currentLayout,
                 deviceWindowWidth,

diff --git a/frontend/src/Editor/CustomDragLayer.jsx b/frontend/src/Editor/CustomDragLayer.jsx
@@ -13,7 +13,7 @@ const layerStyles = {
   height: '100%',
 };
 
-function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout, canvasWidth) {
+function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout, initialClientOffset, canvasWidth) {
   if (!initialOffset || !currentOffset) {
     return {
       display: 'none',
@@ -40,32 +40,31 @@ function getItemStyles(delta, item, initialOffset, currentOffset, currentLayout,
     const zoomLevel = item.zoomLevel;
 
     x = Math.round(currentOffset.x + currentOffset.x * (1 - zoomLevel) - offsetFromLeftOfWindow);
-    y = Math.round(currentOffset.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow);
+    y = Math.round(initialClientOffset.y - 10 + delta.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow);
   }
 
   [x, y] = snapToGrid(canvasWidth, x, y);
 
   x += realCanvasDelta;
 
-  console.log('cvv', canvasWidth, x);
-
-  // x = (x * canvasWidth) / 100;
-
   const transform = `translate(${x}px, ${y}px)`;
   return {
     transform,
     WebkitTransform: transform,
   };
 }
 export const CustomDragLayer = ({ canvasWidth, currentLayout }) => {
-  const { itemType, isDragging, item, initialOffset, currentOffset, delta } = useDragLayer((monitor) => ({
-    item: monitor.getItem(),
-    itemType: monitor.getItemType(),
-    initialOffset: monitor.getInitialSourceClientOffset(),
-    currentOffset: monitor.getSourceClientOffset(),
-    isDragging: monitor.isDragging(),
-    delta: monitor.getDifferenceFromInitialOffset(),
-  }));
+  const { itemType, isDragging, item, initialOffset, currentOffset, delta, initialClientOffset } = useDragLayer(
+    (monitor) => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      initialClientOffset: monitor.getInitialClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      delta: monitor.getDifferenceFromInitialOffset(),
+    })
+  );
 
   if (itemType === ItemTypes.COMMENT) return null;
   function renderItem() {
@@ -83,7 +82,17 @@ export const CustomDragLayer = ({ canvasWidth, currentLayout }) => {
 
   return (
     <div style={layerStyles}>
-      <div style={getItemStyles(delta, item, initialOffset, currentOffset, currentLayout, canvasWidth)}>
+      <div
+        style={getItemStyles(
+          delta,
+          item,
+          initialOffset,
+          currentOffset,
+          currentLayout,
+          initialClientOffset,
+          canvasWidth
+        )}
+      >
         {renderItem()}
       </div>
     </div>

diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
@@ -80,7 +80,7 @@ export const DraggableBox = function DraggableBox({
   resizingStatusChanged,
   zoomLevel,
   containerProps,
-  configHandleClicked,
+  setSelectedComponent,
   removeComponent,
   currentLayout,
   layouts,
@@ -138,6 +138,10 @@ export const DraggableBox = function DraggableBox({
     if (draggingStatusChanged) {
       draggingStatusChanged(isDragging2);
     }
+
+    if (isDragging2 && !isSelectedComponent) {
+      setSelectedComponent(id, component);
+    }
   }, [isDragging2]);
 
   const style = {
@@ -207,12 +211,16 @@ export const DraggableBox = function DraggableBox({
               y: currentLayoutOptions ? currentLayoutOptions.top : 0,
             }}
             defaultSize={{}}
-            className={`resizer ${mouseOver || isResizing || isSelectedComponent ? 'resizer-active' : ''} `}
+            className={`resizer ${
+              mouseOver || isResizing || isDragging2 || isSelectedComponent ? 'resizer-active' : ''
+            } `}
             onResize={() => setResizing(true)}
             onDrag={(e) => {
               e.preventDefault();
               e.stopImmediatePropagation();
-              setDragging(true);
+              if (!isDragging2) {
+                setDragging(true);
+              }
             }}
             resizeHandleClasses={isSelectedComponent || mouseOver ? resizerClasses : {}}
             resizeHandleStyles={resizerStyles}
@@ -239,7 +247,7 @@ export const DraggableBox = function DraggableBox({
                   position={currentLayoutOptions.top < 15 ? 'bottom' : 'top'}
                   widgetTop={currentLayoutOptions.top}
                   widgetHeight={currentLayoutOptions.height}
-                  configHandleClicked={(id, component) => configHandleClicked(id, component)}
+                  setSelectedComponent={(id, component) => setSelectedComponent(id, component)}
                 />
               )}
               <Box

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
@@ -837,7 +837,7 @@ class Editor extends React.Component {
     this.setState({ showComments: !this.state.showComments });
   };
 
-  configHandleClicked = (id, component) => {
+  setSelectedComponent = (id, component) => {
     this.switchSidebarTab(1);
     this.setState({ selectedComponent: { id, component } });
   };
@@ -1225,7 +1225,7 @@ class Editor extends React.Component {
                         onComponentOptionChanged={this.handleOnComponentOptionChanged}
                         onComponentOptionsChanged={this.handleOnComponentOptionsChanged}
                         currentState={this.state.currentState}
-                        configHandleClicked={this.configHandleClicked}
+                        setSelectedComponent={this.setSelectedComponent}
                         handleUndo={this.handleUndo}
                         handleRedo={this.handleRedo}
                         removeComponent={this.removeComponent}

diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
@@ -22,7 +22,7 @@ export const SubContainer = ({
   zoomLevel,
   parent,
   parentRef,
-  configHandleClicked,
+  setSelectedComponent,
   deviceWindowWidth,
   selectedComponent,
   currentLayout,
@@ -72,13 +72,11 @@ export const SubContainer = ({
           },
         })
       );
-      console.log('new boxes - 1', boxes);
     },
     [boxes]
   );
 
   useEffect(() => {
-    console.log('new boxes - 2', boxes);
     if (appDefinitionChanged) {
       appDefinitionChanged({ ...appDefinition, components: boxes });
     }
@@ -178,16 +176,19 @@ export const SubContainer = ({
         } else {
           //  This is a new component
           componentMeta = componentTypes.find((component) => component.component === item.component.component);
-          console.log('adding new component');
           componentData = JSON.parse(JSON.stringify(componentMeta));
           componentData.name = computeComponentName(componentData.component, boxes);
 
           const offsetFromTopOfWindow = canvasBoundingRect.top;
           const offsetFromLeftOfWindow = canvasBoundingRect.left;
           const currentOffset = monitor.getSourceClientOffset();
+          const initialClientOffset = monitor.getInitialClientOffset();
+          const delta = monitor.getDifferenceFromInitialOffset();
 
           left = Math.round(currentOffset.x + currentOffset.x * (1 - zoomLevel) - offsetFromLeftOfWindow);
-          top = Math.round(currentOffset.y + currentOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow);
+          top = Math.round(
+            initialClientOffset.y - 10 + delta.y + initialClientOffset.y * (1 - zoomLevel) - offsetFromTopOfWindow
+          );
 
           id = uuidv4();
         }
@@ -409,7 +410,7 @@ export const SubContainer = ({
           draggingStatusChanged={(status) => setIsDragging(status)}
           inCanvas={true}
           zoomLevel={zoomLevel}
-          configHandleClicked={configHandleClicked}
+          setSelectedComponent={setSelectedComponent}
           currentLayout={currentLayout}
           selectedComponent={selectedComponent}
           deviceWindowWidth={deviceWindowWidth}
@@ -434,7 +435,7 @@ export const SubContainer = ({
             onComponentOptionsChanged,
             appLoading,
             zoomLevel,
-            configHandleClicked,
+            setSelectedComponent,
             removeComponent,
             currentLayout,
             deviceWindowWidth,