From 3edf1a974c1937306f93c8833c7bf6e24c09bb25 Mon Sep 17 00:00:00 2001 From: paul Date: Wed, 5 Mar 2025 21:07:20 +0530 Subject: [PATCH] working on sortable --- src/canvas/canvas.js | 27 ++------------------------- src/canvas/widgets/base.js | 6 +++++- src/canvas/widgets/widgetDnd.js | 9 +++++++-- 3 files changed, 14 insertions(+), 28 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 1b73b6c..efc39c4 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -667,7 +667,6 @@ class Canvas extends React.Component { */ handleDropEvent = (e, draggedElement, widgetClass = null, posMetaData) => { - console.log("event: ", e, draggedElement, widgetClass, posMetaData) // e.preventDefault() @@ -682,28 +681,14 @@ class Canvas extends React.Component { const container = draggedElement.getAttribute("data-container") const canvasRect = this.canvasRef.current.getBoundingClientRect() - const draggedElementRect = draggedElement.getBoundingClientRect() - const elementWidth = draggedElementRect.width - const elementHeight = draggedElementRect.height - - // const {x: draggedElementInitialX, y: draggedElementInitialY} = draggedElement.getBoundingClientRect() const { clientX, clientY } = e.nativeEvent - const { transform } = e.operation - console.log("event: ", e) - // const { x: clientX, y: clientY} = e.delta; - const { initial, current } = e.operation.shape - - console.log("wirking: ", transform) - let finalPosition = { x: ((clientX - canvasRect.left) / this.state.zoom), y: ((clientY - canvasRect.top) / this.state.zoom), } - console.log("container: ", initial, current) - if (container === WidgetContainer.SIDEBAR) { if (!widgetClass) { @@ -725,17 +710,11 @@ class Canvas extends React.Component { // y: (clientY - canvasRect.top) / this.state.zoom - (elementHeight / 2) / this.state.zoom, // } - // const initialOffset = { - // x: (clientX - canvasBoundingRect.left) - currentPos.x, - // y: (clientY - canvasBoundingRect.top) - currentPos.y - // } - const canvasBoundingRect = this.getCanvasBoundingRect() - console.log("meta data: ") - const {dragStartCursorPos, initialPos} = posMetaData + // calculate the initial offset from the div to the cursor grab const initialOffset = { x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x, y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y @@ -745,18 +724,16 @@ class Canvas extends React.Component { x: finalPosition.x - initialOffset.x - this.state.currentTranslate.x, y: finalPosition.y - initialOffset.y - this.state.currentTranslate.y } + let widgetId = draggedElement.getAttribute("data-widget-id") const widgetObj = this.getWidgetById(widgetId) - console.log("current pos: ", finalPosition, widgetId, widgetObj) - // console.log("WidgetObj: ", widgetObj) if (container === WidgetContainer.CANVAS) { widgetObj.current.setPos(finalPosition.x, finalPosition.y) - console.log("current pos: ", finalPosition) } else if (container === WidgetContainer.WIDGET) { diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 03d49a0..46115ee 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -12,7 +12,7 @@ import WidgetContainer from "../constants/containers" import { DragContext } from "../../components/draggable/draggableContext" import { isNumeric, removeKeyFromObject } from "../../utils/common" import { info } from "autoprefixer" -import { message } from "antd" +import { Layout, message } from "antd" import WidgetDnd from "./widgetDnd" @@ -1062,6 +1062,7 @@ class Widget extends React.Component { opacity: this.state.isDragging ? 0.6 : 1, } + const isSortable = this.getParentLayout() === Layouts.FLEX || this.getParentLayout() === Layouts.GRID // const boundingRect = this.getBoundingRect // FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden // FIXME: re-enable pointer events @@ -1090,6 +1091,9 @@ class Widget extends React.Component { onDragEnter={(e) => this.handleDragEnter(e, draggedElement)} // this is by droppable widgetRef={this.elementRef} + isSortable={isSortable} + sortableIndex={0} + canvas={this.canvas} // onDragOver={(e) => this.handleDragOver(e, draggedElement)} diff --git a/src/canvas/widgets/widgetDnd.js b/src/canvas/widgets/widgetDnd.js index 0f13771..32dc1f4 100644 --- a/src/canvas/widgets/widgetDnd.js +++ b/src/canvas/widgets/widgetDnd.js @@ -5,9 +5,9 @@ import WidgetContainer from '../constants/containers' import { useSortable } from '@dnd-kit/react/sortable' -// FIXME: widget class is null function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onDrop, onDragStart, onDragEnd, onDragEnter, onDragOver, currentPos={x: 0, y: 0}, + isSortable=false, sortableIndex=0, ...props}) { const dndRef = useRef(null) @@ -42,7 +42,11 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD }) - // const sortable = useSortable() + const {ref: sortableRef} = useSortable({ + id: widgetId, + index: sortableIndex, + disabled: isSortable + }) const manager = useDragDropManager() @@ -88,6 +92,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD widgetRef.current = node dropRef(node) dragRef(node) + sortableRef(node) } const handleInitialPosOffset = (e) => {