chore: section drag swap control update

henrynoowah · Jan 15, 2025 · 3982286 · 3982286
1 parent 71016c4
commit 3982286
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 56 deletions.
diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -105,7 +105,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
-      activationConstraint: { distance: 250 },
+      activationConstraint: { distance: 0 },
     })
   );
 

diff --git a/packages/ui/src/components/editor/section-editor/SectionEditor.tsx b/packages/ui/src/components/editor/section-editor/SectionEditor.tsx
@@ -199,30 +199,26 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
             |||
           </div>
         </div>
-        <div
-          ref={(ref) => {
-            setNodeRef(ref);
-            sectionRef.current = ref;
-          }}
-          id={section.id}
-          onClick={(e) => {
-            onSectionSelect(section);
-            if (e.target === e.currentTarget) onBlockSelect(undefined);
-          }}
-          className="nwcb-h-fit nwcb-w-full group/block"
-          style={
-            {
-              // ...style,
-            }
-          }
-        >
-          <DndContext
-            modifiers={[restrictToParentElement]}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
+        <div className="nwcb-w-full" ref={setNodeRef}>
+          <div
+            ref={sectionRef}
+            id={section.id}
+            onClick={(e) => {
+              onSectionSelect(section);
+              if (e.target === e.currentTarget) onBlockSelect(undefined);
+            }}
+            className="nwcb-h-fit nwcb-w-full group/block"
+            style={{
+              ...style,
+            }}
           >
-            {blocks?.map((block, i) => {
-              const css = `
+            <DndContext
+              modifiers={[restrictToParentElement]}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+            >
+              {blocks?.map((block, i) => {
+                const css = `
                 #${block.id} {
                   ${convertJSONToCSS(block.style)}
                 }
@@ -232,43 +228,43 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
                   }
                 }
               `;
-              return (
-                <Fragment>
-                  <style>{css}</style>
-                  <DraggableContainer
-                    id={block.id}
-                    key={`section-block-container-${block.id}`}
-                    block={block}
-                    onSelect={(block) => {
-                      onBlockSelect(block);
-                      setSelectedBlock(block);
-                    }}
-                    onChange={(block) => {
-                      update(i, block);
-                    }}
-                    isFocused={selectedBlock?.id === block.id}
-                    resizable={block.style?.position === "absolute"}
-                    isContentInteractive={block.type === "html"}
-                  >
-                    <BlockEditor
-                      selected={selectedBlock?.id === block.id}
-                      section={section}
+                return (
+                  <Fragment>
+                    <style>{css}</style>
+                    <DraggableContainer
+                      id={block.id}
+                      key={`section-block-container-${block.id}`}
                       block={block}
-                      bounds={sectionRef.current}
-                      onClick={() => {
+                      onSelect={(block) => {
                         onBlockSelect(block);
                         setSelectedBlock(block);
                       }}
                       onChange={(block) => {
                         update(i, block);
                       }}
-                    />
-                  </DraggableContainer>
-                </Fragment>
-              );
-            })}
-
-            {/* <DragOverlay
+                      isFocused={selectedBlock?.id === block.id}
+                      resizable={block.style?.position === "absolute"}
+                      isContentInteractive={block.type === "html"}
+                    >
+                      <BlockEditor
+                        selected={selectedBlock?.id === block.id}
+                        section={section}
+                        block={block}
+                        bounds={sectionRef.current}
+                        onClick={() => {
+                          onBlockSelect(block);
+                          setSelectedBlock(block);
+                        }}
+                        onChange={(block) => {
+                          update(i, block);
+                        }}
+                      />
+                    </DraggableContainer>
+                  </Fragment>
+                );
+              })}
+
+              {/* <DragOverlay
             modifiers={[customSnapModifier]}
             // dropAnimation={{
             //   duration: 1000,
@@ -289,7 +285,8 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
               </div>
             ) : null}
           </DragOverlay> */}
-          </DndContext>
+            </DndContext>
+          </div>
         </div>
       </>
     );
@@ -339,7 +336,7 @@ const DraggableContainer = forwardRef<Block, DraggableContainerProps>(
     });
 
     const style = {
-      opacity: isDragging || isOver ? 0.4 : 1,
+      opacity: isDragging || isOver ? 0.8 : 1,
       zIndex: isDragging ? 1000 : block.style?.zIndex || 1,
       transform: CSS.Translate.toString(transform),
       cursor: "move",