From 340ce9885d0efe4b7b1bfbf2937480b5aaa6a0e4 Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Mon, 18 Dec 2023 12:04:21 +0530 Subject: [PATCH] fix: disable moveable in viewer mode --- frontend/src/Editor/Container.jsx | 1 + frontend/src/Editor/DragContainer.jsx | 942 +++++++++++++------------- 2 files changed, 476 insertions(+), 467 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 655d1fb5ad..fa950280cd 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -768,6 +768,7 @@ export const Container = ({ autoComputeLayout={appDefinition.pages[currentPageId]?.autoComputeLayout} setDraggedSubContainer={setDraggedSubContainer} draggedSubContainer={draggedSubContainer} + mode={mode} /> {Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx index 84c92ef4b6..124b1ac738 100644 --- a/frontend/src/Editor/DragContainer.jsx +++ b/frontend/src/Editor/DragContainer.jsx @@ -56,6 +56,7 @@ const MouseEnterLeaveAble = makeAble('enterLeave', { export default function DragContainer({ boxes, + mode, renderWidget, canvasWidth, onResizeStop, @@ -92,6 +93,9 @@ export default function DragContainer({ const [count, setCount] = useState(0); useEffect(() => { + if (!moveableRef.current) { + return; + } moveableRef.current.updateRect(); moveableRef.current.updateTarget(); moveableRef.current.updateSelectors(); @@ -208,407 +212,113 @@ export default function DragContainer({ })}
))} - - 1) - ? '.empty-widget' - : groupedTargets.length > 1 - ? [...groupedTargets] - : '.widget-target' - } - origin={false} - individualGroupable={selectedComponents.length <= 1} - draggable={true} - resizable={{ - edge: ['e', 'w', 'n', 's'], - renderDirections: ['e', 'w', 'n', 's'], - }} - keepRatio={false} - key={list.length} - individualGroupableProps={(element) => { - if (element?.classList.contains('target2')) { - return { - resizable: false, - }; - } - }} - onResize={(e) => { - console.log('onResize', e); - const width = Math.round(e.width / gridWidth) * gridWidth; - - const currentLayout = list.find(({ id }) => id === e.target.id); - const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.width - currentWidth; - const diffHeight = e.height - currentLayout.height; - console.log('currentLayout width', currentWidth, e.width, diffWidth, e.direction); - const isLeftChanged = e.direction[0] === -1; - const isTopChanged = e.direction[1] === -1; - - console.log( - 'currentLayout transform', - `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, - `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` - ); - - e.target.style.width = `${e.width}px`; - e.target.style.height = `${e.height}px`; - let transformX = currentLayout.left * gridWidth; - let transformY = currentLayout.top; - if (isLeftChanged) { - transformX = currentLayout.left * gridWidth - diffWidth; - } - if (isTopChanged) { - transformY = currentLayout.top - diffHeight; - } - e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; - - // e.target.style.transform = e.drag.transform; - // onResizeStop([ - // { - // id: e.target.id, - // height: e.height, - // width: width, - // x: e.drag.translate[0], - // y: e.drag.translate[1], - // }, - // ]); - }} - onResizeEnd={(e) => { - try { - console.log('onResizeEnd>>>>>>>>>>>>>>', e); - // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; - // e.target.style.width = `${width}px`; - // e.target.style.height = `${e.lastEvent.height}px`; - // e.target.style.transform = e.lastEvent.drag.transform; - // onResizeStop([ - // { - // id: e.target.id, - // height: e.lastEvent.height, - // width: width, - // x: e.lastEvent.drag.translate[0], - // y: e.lastEvent.drag.translate[1], - // }, - // ]); - - const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; - const height = Math.round(e.lastEvent.height / 10) * 10; - - const currentLayout = list.find(({ id }) => id === e.target.id); - const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.lastEvent.width - currentWidth; - const diffHeight = e.lastEvent.height - currentLayout.height; - console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight); - const isLeftChanged = e.lastEvent.direction[0] === -1; - const isTopChanged = e.lastEvent.direction[1] === -1; - - console.log( - 'onResizeEnd => currentLayout transform', - `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, - `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` - ); - - let transformX = currentLayout.left * gridWidth; - let transformY = currentLayout.top; - if (isLeftChanged) { - transformX = currentLayout.left * gridWidth - diffWidth; - } - if (isTopChanged) { - transformY = currentLayout.top - diffHeight; + {mode === 'edit' && ( + <> + 1) + ? '.empty-widget' + : groupedTargets.length > 1 + ? [...groupedTargets] + : '.widget-target' } + origin={false} + individualGroupable={selectedComponents.length <= 1} + draggable={true} + resizable={{ + edge: ['e', 'w', 'n', 's'], + renderDirections: ['e', 'w', 'n', 's'], + }} + keepRatio={false} + key={list.length} + individualGroupableProps={(element) => { + if (element?.classList.contains('target2')) { + return { + resizable: false, + }; + } + }} + onResize={(e) => { + console.log('onResize', e); + const width = Math.round(e.width / gridWidth) * gridWidth; - // e.target.style.transform = e.drag.transform; - onResizeStop([ - { - id: e.target.id, - height: height, - width: width, - x: transformX, - y: transformY, - }, - ]); - } catch (error) { - console.error('ResizeEnd error ->', error); - } - }} - onResizeStart={(e) => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - }} - onResizeGroupStart={(e) => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - }} - onResizeGroup={({ events }) => { - const newBoxs = []; - events.forEach((ev) => { - ev.target.style.width = `${ev.width}px`; - ev.target.style.height = `${ev.height}px`; - ev.target.style.transform = ev.drag.transform; - newBoxs.push({ - id: ev.target.id, - height: ev.height, - width: ev.width, - x: ev.drag.translate[0], - y: ev.drag.translate[1], - }); - }); - onResizeStop(newBoxs); - }} - checkInput - onDragStart={(e) => { - console.log('On-drag start => ', e?.moveable?.getControlBoxElement()); - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - setDraggedTarget(e.target.id); - setIsDragging(true); - }} - onDragEnd={(e) => { - console.log('onDragEnd', e); - try { - console.log('On-drag end => '); - setIsDragging(false); - console.log('onDragEnd', e); - setDraggedTarget(); - if (draggedSubContainer) { - return; - } + const currentLayout = list.find(({ id }) => id === e.target.id); + const currentWidth = currentLayout.width * gridWidth; + const diffWidth = e.width - currentWidth; + const diffHeight = e.height - currentLayout.height; + console.log('currentLayout width', currentWidth, e.width, diffWidth, e.direction); + const isLeftChanged = e.direction[0] === -1; + const isTopChanged = e.direction[1] === -1; - let draggedOverElemId; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - const draggedOverElem = targetElems.find( - (ele) => - ele.id !== e.target.id && - (ele.classList.contains('target') || ele.classList.contains('nested-target')) + console.log( + 'currentLayout transform', + `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, + `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` ); - setDragTarget(draggedOverElem?.id); - draggedOverElemId = draggedOverElem?.id; - } - // console.log("draggedOverElemId", draggedOverElemId); - const parentElem = list.find(({ id }) => id === draggedOverElemId); - let left = e.lastEvent.translate[0]; - let top = e.lastEvent.translate[1]; - const currentWidget = boxes.find(({ id }) => id === e.target.id)?.component?.component; - const parentWidget = boxes.find(({ id }) => id === parentElem.id)?.component?.component; - const restrictedWidgets = restrictedWidgetsObj[parentWidget]; - const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget); - if (parentElem && isParentChangeAllowed) { - left = left - parentElem.left * gridWidth; - top = top - parentElem.top; - } else { - e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${ - Math.round(top / 10) * 10 - }px)`; - } - onDrag([ - { - id: e.target.id, - x: left, - y: Math.round(top / 10) * 10, - parent: isParentChangeAllowed ? draggedOverElemId : undefined, - }, - ]); - } catch (error) { - console.log('error', error); - } - }} - onDrag={(e) => { - console.log('On-drag ... => '); - if (draggedSubContainer) { - return; - } - setDraggedTarget(e.target.id); - if (!draggedSubContainer) { - e.target.style.transform = `translate(${e.translate[0]}px, ${e.translate[1]}px)`; - e.target.setAttribute( - 'widget-pos2', - `translate: ${e.translate[0]} | Round: ${ - Math.round(e.translate[0] / gridWidth) * gridWidth - } | ${gridWidth}` - ); - } + e.target.style.width = `${e.width}px`; + e.target.style.height = `${e.height}px`; + let transformX = currentLayout.left * gridWidth; + let transformY = currentLayout.top; + if (isLeftChanged) { + transformX = currentLayout.left * gridWidth - diffWidth; + } + if (isTopChanged) { + transformY = currentLayout.top - diffHeight; + } + e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; - let draggedOverElemId; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - const draggedOverElem = targetElems.find( - (ele) => ele.id !== e.target.id && ele.classList.contains('target') - ); - setDragTarget(draggedOverElem?.id); - console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); - draggedOverElemId = draggedOverElem?.id; - } - console.log('draggedOverElemId parent', draggedOverElemId, parent); - }} - onDragGroup={({ events }) => { - onDrag( - events.map((ev) => ({ - id: ev.target.id, - x: ev.translate[0], - y: ev.translate[1], - })) - ); - }} - onDragGroupStart={() => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - }} - //snap settgins - snappable={true} - snapDirections={{ - top: true, - left: true, - bottom: true, - right: true, - center: true, - middle: true, - }} - elementSnapDirections={{ - top: true, - left: true, - bottom: true, - right: true, - center: true, - middle: true, - }} - snapThreshold={5} - elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))} - isDisplaySnapDigit={false} - snapGridWidth={gridWidth} - /> + // e.target.style.transform = e.drag.transform; + // onResizeStop([ + // { + // id: e.target.id, + // height: e.height, + // width: width, + // x: e.drag.translate[0], + // y: e.drag.translate[1], + // }, + // ]); + }} + onResizeEnd={(e) => { + try { + console.log('onResizeEnd>>>>>>>>>>>>>>', e); + // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; + // e.target.style.width = `${width}px`; + // e.target.style.height = `${e.lastEvent.height}px`; + // e.target.style.transform = e.lastEvent.drag.transform; + // onResizeStop([ + // { + // id: e.target.id, + // height: e.lastEvent.height, + // width: width, + // x: e.lastEvent.drag.translate[0], + // y: e.lastEvent.drag.translate[1], + // }, + // ]); - {removeDuplicates(list) - .filter((i) => !isEmpty(i.parent)) - .map((i) => { - let groupedTargets1 = [ - ...selectedComponents - .filter((component) => component?.component?.parent === i.parent) - .map((component) => '.ele-' + component.id), - ]; - groupedTargets1 = [...new Set(groupedTargets1)]; - console.log( - 'groupedTargets-->target ' + i.parent, - groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}` - ); - return ( - (childMoveableRefs.current[i.id] = el)} - ables={[MouseCustomAble]} - props={{ - mouseTest: true, - }} - target={groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`} - draggable={true} - resizable={{ - edge: ['e', 'w', 'n', 's'], - renderDirections: ['e', 'w', 'n', 's'], - }} - // stopPropagation={true} - origin={false} - // individualGroupable={true} - individualGroupable={groupedTargets1.length <= 1} - onDragStart={(e) => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - setDraggedSubContainer((dragged) => (dragged ? dragged : i.parent)); - }} - onDrag={(e) => { - if (draggedSubContainer === i.parent) { - e.target.style.transform = e.transform; - } - }} - onDragEnd={(e) => { - if (draggedSubContainer !== i.parent) { - setDraggedSubContainer(false); - return; - } - setDraggedSubContainer(false); - const { lastEvent, clientX, clientY } = e; - let { - translate: [left, top], - } = lastEvent; - e.target.style.transform = `translate(${ - Math.round(left / subContainerWidths[i.parent]) * subContainerWidths[i.parent] - }px, ${Math.round(top / 10) * 10}px)`; - // } - - let draggedOverElemId = i.parent; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - const draggedOverElem = targetElems.find( - (ele) => - ele.id !== e.target.id && - (ele.classList.contains('target') || - ele.classList.contains('nested-target') || - ele.classList.contains('drag-container-parent')) - ); - setDragTarget(draggedOverElem?.id); - draggedOverElemId = draggedOverElem?.getAttribute('component-id') || draggedOverElem?.id; - console.log('draggedOverElem', draggedOverElem, draggedOverElemId); - if (draggedOverElemId !== i.parent) { - const newParentElem = list[draggedOverElemId]?.layouts?.desktop; - let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId); - left = _left; - top = _top; - } - } - - const _x = draggedOverElemId - ? Math.round(left / subContainerWidths[draggedOverElemId]) * subContainerWidths[draggedOverElemId] - : Math.round(left / gridWidth) * gridWidth; - onDrag([ - { - id: e.target.id, - x: _x, - y: Math.round(top / 10) * 10, - parent: draggedOverElemId, - }, - ]); - }} - onDragGroup={({ events }) => { - events.forEach((ev) => { - console.log('Grouped data=>', ev); - ev.target.style.transform = ev.transform; - }); - }} - onResizeStart={(e) => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; - } - }} - onResize={(e) => { - const gridWidth = subContainerWidths[i.parent]; - const width = Math.round(e.width / gridWidth) * gridWidth; + const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; + const height = Math.round(e.lastEvent.height / 10) * 10; const currentLayout = list.find(({ id }) => id === e.target.id); const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.width - currentWidth; - const diffHeight = e.height - currentLayout.height; - const isLeftChanged = e.direction[0] === -1; - const isTopChanged = e.direction[1] === -1; + const diffWidth = e.lastEvent.width - currentWidth; + const diffHeight = e.lastEvent.height - currentLayout.height; + console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight); + const isLeftChanged = e.lastEvent.direction[0] === -1; + const isTopChanged = e.lastEvent.direction[1] === -1; + + console.log( + 'onResizeEnd => currentLayout transform', + `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, + `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` + ); - e.target.style.width = `${e.width}px`; - e.target.style.height = `${e.height}px`; let transformX = currentLayout.left * gridWidth; let transformY = currentLayout.top; if (isLeftChanged) { @@ -617,87 +327,385 @@ export default function DragContainer({ if (isTopChanged) { transformY = currentLayout.top - diffHeight; } - e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; - }} - onResizeEnd={(e) => { - try { - const gridWidth = subContainerWidths[i.parent]; - const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; - const height = Math.round(e.lastEvent.height / 10) * 10; - - const currentLayout = list.find(({ id }) => id === e.target.id); - const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.lastEvent.width - currentWidth; - const diffHeight = e.lastEvent.height - currentLayout.height; - const isLeftChanged = e.lastEvent.direction[0] === -1; - const isTopChanged = e.lastEvent.direction[1] === -1; - - let transformX = currentLayout.left * gridWidth; - let transformY = currentLayout.top; - if (isLeftChanged) { - transformX = currentLayout.left * gridWidth - diffWidth; - } - if (isTopChanged) { - transformY = currentLayout.top - diffHeight; - } - - // e.target.style.transform = e.drag.transform; - onResizeStop([ - { - id: e.target.id, - height: height, - width: width, - x: transformX, - y: transformY, - gw: gridWidth, - }, - ]); - } catch (error) { - console.error('ResizeEnd error ->', error); + // e.target.style.transform = e.drag.transform; + onResizeStop([ + { + id: e.target.id, + height: height, + width: width, + x: transformX, + y: transformY, + }, + ]); + } catch (error) { + console.error('ResizeEnd error ->', error); + } + }} + onResizeStart={(e) => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + onResizeGroupStart={(e) => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + onResizeGroup={({ events }) => { + const newBoxs = []; + events.forEach((ev) => { + ev.target.style.width = `${ev.width}px`; + ev.target.style.height = `${ev.height}px`; + ev.target.style.transform = ev.drag.transform; + newBoxs.push({ + id: ev.target.id, + height: ev.height, + width: ev.width, + x: ev.drag.translate[0], + y: ev.drag.translate[1], + }); + }); + onResizeStop(newBoxs); + }} + checkInput + onDragStart={(e) => { + console.log('On-drag start => ', e?.moveable?.getControlBoxElement()); + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + setDraggedTarget(e.target.id); + setIsDragging(true); + }} + onDragEnd={(e) => { + console.log('onDragEnd', e); + try { + console.log('On-drag end => '); + setIsDragging(false); + console.log('onDragEnd', e); + setDraggedTarget(); + if (draggedSubContainer) { + return; } - }} - onDragGroupStart={() => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; + + let draggedOverElemId; + if (document.elementFromPoint(e.clientX, e.clientY)) { + const targetElems = document.elementsFromPoint(e.clientX, e.clientY); + const draggedOverElem = targetElems.find( + (ele) => + ele.id !== e.target.id && + (ele.classList.contains('target') || ele.classList.contains('nested-target')) + ); + setDragTarget(draggedOverElem?.id); + draggedOverElemId = draggedOverElem?.id; } - }} - onResizeGroupStart={(e) => { - if (currentLayout === 'mobile' && autoComputeLayout) { - turnOffAutoLayout(); - return false; + // console.log("draggedOverElemId", draggedOverElemId); + const parentElem = list.find(({ id }) => id === draggedOverElemId); + let left = e.lastEvent.translate[0]; + let top = e.lastEvent.translate[1]; + const currentWidget = boxes.find(({ id }) => id === e.target.id)?.component?.component; + const parentWidget = boxes.find(({ id }) => id === parentElem.id)?.component?.component; + const restrictedWidgets = restrictedWidgetsObj[parentWidget]; + const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget); + if (parentElem && isParentChangeAllowed) { + left = left - parentElem.left * gridWidth; + top = top - parentElem.top; + } else { + e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${ + Math.round(top / 10) * 10 + }px)`; } - }} - displayAroundControls={true} - controlPadding={10} - snappable={true} - // snapDirections={{ top: true, left: true, bottom: true, right: true }} - snapDirections={{ - top: true, - left: true, - bottom: true, - right: true, - center: true, - middle: true, - }} - elementSnapDirections={{ - top: true, - left: true, - bottom: true, - right: true, - center: true, - middle: true, - }} - snapThreshold={5} - elementGuidelines={list - .filter((l) => l.parent === i.parent) - .map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))} - isDisplaySnapDigit={false} - snapGridWidth={subContainerWidths[i.parent]} - /> - ); - })} + + onDrag([ + { + id: e.target.id, + x: left, + y: Math.round(top / 10) * 10, + parent: isParentChangeAllowed ? draggedOverElemId : undefined, + }, + ]); + } catch (error) { + console.log('error', error); + } + }} + onDrag={(e) => { + console.log('On-drag ... => '); + if (draggedSubContainer) { + return; + } + setDraggedTarget(e.target.id); + if (!draggedSubContainer) { + e.target.style.transform = `translate(${e.translate[0]}px, ${e.translate[1]}px)`; + e.target.setAttribute( + 'widget-pos2', + `translate: ${e.translate[0]} | Round: ${ + Math.round(e.translate[0] / gridWidth) * gridWidth + } | ${gridWidth}` + ); + } + + let draggedOverElemId; + if (document.elementFromPoint(e.clientX, e.clientY)) { + const targetElems = document.elementsFromPoint(e.clientX, e.clientY); + const draggedOverElem = targetElems.find( + (ele) => ele.id !== e.target.id && ele.classList.contains('target') + ); + setDragTarget(draggedOverElem?.id); + console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); + draggedOverElemId = draggedOverElem?.id; + } + console.log('draggedOverElemId parent', draggedOverElemId, parent); + }} + onDragGroup={({ events }) => { + onDrag( + events.map((ev) => ({ + id: ev.target.id, + x: ev.translate[0], + y: ev.translate[1], + })) + ); + }} + onDragGroupStart={() => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + //snap settgins + snappable={true} + snapDirections={{ + top: true, + left: true, + bottom: true, + right: true, + center: true, + middle: true, + }} + elementSnapDirections={{ + top: true, + left: true, + bottom: true, + right: true, + center: true, + middle: true, + }} + snapThreshold={5} + elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))} + isDisplaySnapDigit={false} + snapGridWidth={gridWidth} + /> + + {removeDuplicates(list) + .filter((i) => !isEmpty(i.parent)) + .map((i) => { + let groupedTargets1 = [ + ...selectedComponents + .filter((component) => component?.component?.parent === i.parent) + .map((component) => '.ele-' + component.id), + ]; + groupedTargets1 = [...new Set(groupedTargets1)]; + console.log( + 'groupedTargets-->target ' + i.parent, + groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}` + ); + return ( + (childMoveableRefs.current[i.id] = el)} + ables={[MouseCustomAble]} + props={{ + mouseTest: true, + }} + target={groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`} + draggable={true} + resizable={{ + edge: ['e', 'w', 'n', 's'], + renderDirections: ['e', 'w', 'n', 's'], + }} + // stopPropagation={true} + origin={false} + // individualGroupable={true} + individualGroupable={groupedTargets1.length <= 1} + onDragStart={(e) => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + setDraggedSubContainer((dragged) => (dragged ? dragged : i.parent)); + }} + onDrag={(e) => { + if (draggedSubContainer === i.parent) { + e.target.style.transform = e.transform; + } + }} + onDragEnd={(e) => { + if (draggedSubContainer !== i.parent) { + setDraggedSubContainer(false); + return; + } + setDraggedSubContainer(false); + const { lastEvent, clientX, clientY } = e; + let { + translate: [left, top], + } = lastEvent; + e.target.style.transform = `translate(${ + Math.round(left / subContainerWidths[i.parent]) * subContainerWidths[i.parent] + }px, ${Math.round(top / 10) * 10}px)`; + // } + + let draggedOverElemId = i.parent; + if (document.elementFromPoint(e.clientX, e.clientY)) { + const targetElems = document.elementsFromPoint(e.clientX, e.clientY); + const draggedOverElem = targetElems.find( + (ele) => + ele.id !== e.target.id && + (ele.classList.contains('target') || + ele.classList.contains('nested-target') || + ele.classList.contains('drag-container-parent')) + ); + setDragTarget(draggedOverElem?.id); + draggedOverElemId = draggedOverElem?.getAttribute('component-id') || draggedOverElem?.id; + console.log('draggedOverElem', draggedOverElem, draggedOverElemId); + if (draggedOverElemId !== i.parent) { + const newParentElem = list[draggedOverElemId]?.layouts?.desktop; + let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId); + left = _left; + top = _top; + } + } + + const _x = draggedOverElemId + ? Math.round(left / subContainerWidths[draggedOverElemId]) * + subContainerWidths[draggedOverElemId] + : Math.round(left / gridWidth) * gridWidth; + onDrag([ + { + id: e.target.id, + x: _x, + y: Math.round(top / 10) * 10, + parent: draggedOverElemId, + }, + ]); + }} + onDragGroup={({ events }) => { + events.forEach((ev) => { + console.log('Grouped data=>', ev); + ev.target.style.transform = ev.transform; + }); + }} + onResizeStart={(e) => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + onResize={(e) => { + const gridWidth = subContainerWidths[i.parent]; + const width = Math.round(e.width / gridWidth) * gridWidth; + + const currentLayout = list.find(({ id }) => id === e.target.id); + const currentWidth = currentLayout.width * gridWidth; + const diffWidth = e.width - currentWidth; + const diffHeight = e.height - currentLayout.height; + const isLeftChanged = e.direction[0] === -1; + const isTopChanged = e.direction[1] === -1; + + e.target.style.width = `${e.width}px`; + e.target.style.height = `${e.height}px`; + let transformX = currentLayout.left * gridWidth; + let transformY = currentLayout.top; + if (isLeftChanged) { + transformX = currentLayout.left * gridWidth - diffWidth; + } + if (isTopChanged) { + transformY = currentLayout.top - diffHeight; + } + e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; + }} + onResizeEnd={(e) => { + try { + const gridWidth = subContainerWidths[i.parent]; + + const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; + const height = Math.round(e.lastEvent.height / 10) * 10; + + const currentLayout = list.find(({ id }) => id === e.target.id); + const currentWidth = currentLayout.width * gridWidth; + const diffWidth = e.lastEvent.width - currentWidth; + const diffHeight = e.lastEvent.height - currentLayout.height; + const isLeftChanged = e.lastEvent.direction[0] === -1; + const isTopChanged = e.lastEvent.direction[1] === -1; + + let transformX = currentLayout.left * gridWidth; + let transformY = currentLayout.top; + if (isLeftChanged) { + transformX = currentLayout.left * gridWidth - diffWidth; + } + if (isTopChanged) { + transformY = currentLayout.top - diffHeight; + } + + // e.target.style.transform = e.drag.transform; + onResizeStop([ + { + id: e.target.id, + height: height, + width: width, + x: transformX, + y: transformY, + gw: gridWidth, + }, + ]); + } catch (error) { + console.error('ResizeEnd error ->', error); + } + }} + onDragGroupStart={() => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + onResizeGroupStart={(e) => { + if (currentLayout === 'mobile' && autoComputeLayout) { + turnOffAutoLayout(); + return false; + } + }} + displayAroundControls={true} + controlPadding={10} + snappable={true} + // snapDirections={{ top: true, left: true, bottom: true, right: true }} + snapDirections={{ + top: true, + left: true, + bottom: true, + right: true, + center: true, + middle: true, + }} + elementSnapDirections={{ + top: true, + left: true, + bottom: true, + right: true, + center: true, + middle: true, + }} + snapThreshold={5} + elementGuidelines={list + .filter((l) => l.parent === i.parent) + .map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))} + isDisplaySnapDigit={false} + snapGridWidth={subContainerWidths[i.parent]} + /> + ); + })} + + )} );