Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updated grid column width to 24

Browse source
This commit is contained in:
Johnson Cherian 2023-10-23 11:45:07 +05:30
parent 35f9c2650b
commit d314ecf120
10 changed files with 234 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Editor/BoxDragPreview.jsx
View file

@ -29,7 +29,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, canvasWidth }
return (
<div
className="resizer-active draggable-box"
style={{ height, width: (width * canvasWidth) / 43, border: 'solid 1px rgb(70, 165, 253)', padding: '2px' }}
style={{ height, width: (width * canvasWidth) / 24, border: 'solid 1px rgb(70, 165, 253)', padding: '2px' }}
>
<div
style={{

16
frontend/src/Editor/Container.jsx
View file

@ -24,7 +24,7 @@ import _ from 'lodash';
import { diff } from 'deep-object-diff';
import DragContainer from './DragContainer';
const NO_OF_GRIDS = 43;
const NO_OF_GRIDS = 24;
export const Container = ({
canvasWidth,
@ -51,6 +51,7 @@ export const Container = ({
// Dont update first time to skip
// redundant save on app definition load
const firstUpdate = useRef(true);
const [subContainerWidths, setSubContainerWidths] = useState({});
const { showComments, currentLayout, selectedComponents } = useEditorStore(
(state) => ({
@ -384,16 +385,19 @@ export const Container = ({
...boxesObj,
[id]: {
...boxes[id],
component: {
...boxes[id]['component'],
parent: parent ? parent : boxes[id]['component']?.parent,
},
layouts: {
...boxes[id]['layouts'],
[currentLayout]: {
...boxes[id]['layouts'][currentLayout],
// ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w },
top: y,
left: Math.round(x / gridWidth),
left: Math.round(x / (parent ? subContainerWidths[parent] : gridWidth)),
},
},
parent: parent ? parent : boxes[id].parent,
},
}),
{}
@ -415,7 +419,6 @@ export const Container = ({
// parent: parent ? parent : boxes[id].parent,
// },
};
setBoxes(newBoxes);
}
@ -739,6 +742,8 @@ export const Container = ({
currentPageId,
childComponents,
setIsChildDragged,
setSubContainerWidths: (id, width) => setSubContainerWidths((widths) => ({ ...widths, [id]: width })),
parentGridWidth: gridWidth,
}}
isVersionReleased={isVersionReleased}
/>
@ -755,7 +760,7 @@ export const Container = ({
drop(el);
}}
style={{ ...styles, height: canvasHeight }}
className={cx('real-canvas', {
className={cx('real-canvas show-grid', {
'show-grid': isDragging || isResizing,
})}
id="real-canvas"
@ -795,6 +800,7 @@ export const Container = ({
onDrag={onDragStop2}
gridWidth={gridWidth}
selectedComponents={selectedComponents}
setIsDragging={setIsDragging}
/>
{/* {Object.keys(boxes).map((key) => {
const box = boxes[key];

1
frontend/src/Editor/DragContainer.css
View file

@ -11,4 +11,5 @@
/* font-weight: bold; */
border: 1px solid #333;
box-sizing: border-box;
/* transition: transform 0.1s; */
}

148
frontend/src/Editor/DragContainer.jsx
View file

@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
import './DragContainer.css';
import DragContainerNested from './DragContainerNested';
import { isEmpty } from 'lodash';
const NO_OF_GRIDS = 43;
const NO_OF_GRIDS = 24;
export default function DragContainer({
boxes,
@ -15,6 +15,7 @@ export default function DragContainer({
onDrag,
gridWidth,
selectedComponents = [],
setIsDragging,
}) {
const [dragTarget, setDragTarget] = useState();
const [draggedTarget, setDraggedTarget] = useState();
@ -25,20 +26,21 @@ export default function DragContainer({
left: box?.layouts?.desktop?.left,
top: box?.layouts?.desktop?.top,
width: box?.layouts?.desktop?.width,
parent: box.parent,
parent: box?.component?.parent,
}));
const [list, setList] = useState(boxList);
console.log('>>>>>>>>>>>>>> Rerender');
const hoveredComponent = useEditorStore((state) => state?.hoveredComponent, shallow);
useEffect(() => {
moveableRef.current.updateRect();
window.moveableRef = moveableRef.current.updateRect;
}, [selectedComponents.length]);
setTimeout(() => moveableRef.current.updateRect(), 100);
}, [selectedComponents.length, JSON.stringify(boxes)]);
useEffect(() => {
setList(boxList);
}, [boxes?.length]);
}, [JSON.stringify(boxes)]);
const [isChildDragged, setIsChildDragged] = useState(false);
@ -58,15 +60,21 @@ export default function DragContainer({
};
const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)];
console.log('selectedComponents', selectedComponents);
const movableTargets = [groupedTargets];
console.log('selectedComponents movableTargets', movableTargets);
console.log('selectedComponents hoveredComponent', hoveredComponent);
if (hoveredComponent && !groupedTargets?.length) {
movableTargets.push('.ele-' + hoveredComponent);
}
console.log('selectedComponents draggedTarget', draggedTarget);
if (draggedTarget && !movableTargets.includes(`.ele-${draggedTarget}`)) {
movableTargets.push('.ele-' + draggedTarget);
}
console.log('selectedComponents movableTargets', movableTargets, isChildDragged);
// console.log("movableTargets", movableTargets, hoveredComponent);
return (
@ -81,6 +89,7 @@ export default function DragContainer({
key={i.id}
id={i.id}
widgetid={i.id}
widget-pos={JSON.stringify(boxes.find((b) => b.id === i.id)?.layouts?.desktop)}
style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
>
{/* Target {i.id} */}
@ -100,14 +109,15 @@ export default function DragContainer({
<Moveable
ref={moveableRef}
// target={'.target'}
target={movableTargets}
target={isChildDragged ? [] : movableTargets}
origin={selectedComponents.length > 1}
// hideChildMoveableDefaultLines={false}
// individualGroupable={true}
individualGroupable={selectedComponents.length <= 1}
draggable={true}
resizable={true}
keepRatio={false}
rotatable={true}
// rotatable={true}
key={list.length}
individualGroupableProps={(element) => {
if (element?.classList.contains('target2')) {
@ -117,16 +127,96 @@ export default function DragContainer({
}
}}
onResize={(e) => {
// console.log('Resize >>>>>>>>>>>>>>', 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`;
e.target.style.transform = e.drag.transform;
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) => {
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;
}
// e.target.style.transform = e.drag.transform;
onResizeStop([
{
id: e.target.id,
height: e.height,
width: e.width,
x: e.drag.translate[0],
y: e.drag.translate[1],
height: height,
width: width,
x: transformX,
y: transformY,
},
]);
}}
@ -147,7 +237,9 @@ export default function DragContainer({
onResizeStop(newBoxs);
}}
checkInput
onDragStart={() => setIsDragging(true)}
onDragEnd={(e) => {
setIsDragging(false);
console.log('onDragEnd', e);
setDraggedTarget();
if (isChildDragged) {
@ -173,8 +265,21 @@ export default function DragContainer({
console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget);
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];
if (parentElem) {
left = left - parentElem.left * gridWidth;
top = top - parentElem.top;
}
onDrag([
{ id: e.target.id, x: e.lastEvent.translate[0], y: e.lastEvent.translate[1], parent: draggedOverElemId },
{
id: e.target.id,
x: left,
y: top,
parent: draggedOverElemId,
},
]);
}}
onDrag={(e) => {
@ -185,9 +290,16 @@ export default function DragContainer({
// onDrag(e.target.id, e.translate[0], e.translate[1]);
// console.log(e.target.style);
if (!isChildDragged) {
e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
Math.round(e.translate[1] / 10) * 10
}px)`;
// e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
// Math.round(e.translate[1] / 10) * 10
// }px)`;
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;
@ -218,7 +330,9 @@ export default function DragContainer({
}}
//snap settgins
snappable={true}
snapDirections={{ top: true, left: true, bottom: true, right: 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.map((l) => ({ element: `.ele-${l.id}` }))}
// verticalGuidelines={[50, 150, 250, 450, 550]}

79
frontend/src/Editor/DragContainerNested.jsx
View file

@ -1,8 +1,17 @@
import React, { useState, useEffect, useRef } from 'react';
import Moveable from 'react-moveable';
import Moveable, { makeAble } from 'react-moveable';
import './DragContainer.css';
import { isEmpty } from 'lodash';
const NO_OF_GRIDS = 43;
const NO_OF_GRIDS = 24;
const MouseEnterLeaveAble = makeAble('enterLeave', {
mouseEnter(moveable) {
console.log('moveable', moveable);
},
mouseLeave(moveable) {
console.log('moveable2', moveable);
},
});
export default function DragContainer({
boxes,
@ -14,6 +23,7 @@ export default function DragContainer({
setIsChildDragged,
parent,
parentLayout,
parentGridWidth,
}) {
const [dragTarget, setDragTarget] = useState();
const boxList = boxes.map((box) => ({
@ -32,7 +42,7 @@ export default function DragContainer({
useEffect(() => {
moveableRef.current.updateRect();
}, [...Object.values(parentLayout)]);
}, [...Object.values(parentLayout), boxes?.length]);
// const [isChildDragged, setIsChildDragged] = useState(false);
@ -78,11 +88,16 @@ export default function DragContainer({
<Moveable
ref={moveableRef}
target={`.target-${parent}`}
origin={false}
ables={[MouseEnterLeaveAble]}
props={{
enterLeave: true,
}}
individualGroupable={true}
draggable={true}
resizable={true}
keepRatio={false}
rotatable={true}
rotatable={false}
key={list.length}
individualGroupableProps={(element) => {
if (element?.classList.contains('target2')) {
@ -101,29 +116,59 @@ export default function DragContainer({
checkInput
onDrag={(e) => {
setIsChildDragged(true);
onDrag(e.target.id, e.translate[0], e.translate[1]);
// if (!isChildDragged) {
e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
Math.round(e.translate[1] / 10) * 10
}px)`;
// }
// let draggedOverElemId;
// if (document.elementFromPoint(e.clientX, e.clientY)) {
// const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
// // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
// 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;
// }
let draggedOverElemId;
if (document.elementFromPoint(e.clientX, e.clientY)) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
// targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
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 child', draggedOverElemId);
// onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId);
}}
//snap settgins
snappable={true}
onDragEnd={() => setIsChildDragged(false)}
onDragEnd={(e) => {
setIsChildDragged(false);
// if (!isChildDragged) {
// e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
// Math.round(e.translate[1] / 10) * 10
// }px)`;
// }
let draggedOverElemId;
if (document.elementFromPoint(e.clientX, e.clientY)) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
// targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
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;
}
let left = e.lastEvent.translate[0];
let top = e.lastEvent.translate[1];
console.log('draggedOverElemId child', draggedOverElemId);
if (!draggedOverElemId) {
left = left + parentLayout.left * (parentGridWidth / 24);
top = top + parentLayout.top;
}
// onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId);
onDrag(e.target.id, left, top, draggedOverElemId);
}}
snapDirections={{ top: true, left: true, bottom: true, right: true }}
snapThreshold={5}
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}

2
frontend/src/Editor/DraggableBox.jsx
View file

@ -13,7 +13,7 @@ import { useCurrentState } from '@/_stores/currentStateStore';
import { useEditorStore } from '@/_stores/editorStore';
import { shallow } from 'zustand/shallow';
const NO_OF_GRIDS = 43;
const NO_OF_GRIDS = 24;
const resizerClasses = {
topRight: 'top-right',

2
frontend/src/Editor/Editor.jsx
View file

@ -760,7 +760,7 @@ class EditorComponent extends React.Component {
let top = draft[selectedComponent.id].layouts[this.props.currentLayout].top;
let left = draft[selectedComponent.id].layouts[this.props.currentLayout].left;
const gridWidth = (1 * 100) / 43; // width of the canvas grid in percentage
const gridWidth = (1 * 100) / 24; // width of the canvas grid in percentage
switch (direction) {
case 'ArrowLeft':

4
frontend/src/Editor/EditorFunc.jsx
View file

@ -1145,7 +1145,7 @@ const EditorComponent = (props) => {
};
const moveComponents = (direction) => {
const gridWidth = (1 * 100) / 43; // width of the canvas grid in percentage
const gridWidth = (1 * 100) / 24; // width of the canvas grid in percentage
const _appDefinition = _.cloneDeep(appDefinition);
let newComponents = _appDefinition?.pages[currentPageId].components;
@ -1689,7 +1689,7 @@ const EditorComponent = (props) => {
{!showComments && (
<Selecto
dragContainer={'.canvas-container'}
selectableTargets={['.react-draggable']}
selectableTargets={['.widget-target']}
hitRate={0}
selectByClick={true}
toggleContinueSelect={['shift']}

28
frontend/src/Editor/SubContainer.jsx
View file

@ -19,7 +19,7 @@ import { useMounted } from '@/_hooks/use-mount';
import { diff } from 'deep-object-diff';
import DragContainerNested from './DragContainerNested';
const NO_OF_GRIDS = 43;
const NO_OF_GRIDS = 24;
export const SubContainer = ({
mode,
@ -57,6 +57,8 @@ export const SubContainer = ({
listmode = null,
columns = 1,
setIsChildDragged,
setSubContainerWidths,
parentGridWidth,
}) => {
//Todo add custom resolve vars for other widgets too
const mounted = useMounted();
@ -109,6 +111,7 @@ export const SubContainer = ({
const [boxes, setBoxes] = useState(allComponents);
const [childWidgets, setChildWidgets] = useState([]);
console.log('childWidgets', childWidgets);
const [isDragging, setIsDragging] = useState(false);
const [isResizing, setIsResizing] = useState(false);
// const [subContainerHeight, setSubContainerHeight] = useState('100%'); //used to determine the height of the sub container for modal
@ -121,6 +124,13 @@ export const SubContainer = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [allComponents, parent]);
const containerWidth = getContainerCanvasWidth();
useEffect(() => {
setSubContainerWidths(parent, containerWidth / NO_OF_GRIDS);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [containerWidth]);
useEffect(() => {
if (mounted) {
//find children with parent prop
@ -516,6 +526,7 @@ export const SubContainer = ({
};
function onDragStop2(id, x, y, parent) {
// const parentGridWidth = parentGridWidth;
let newBoxes = {
...boxes,
[id]: {
@ -526,10 +537,13 @@ export const SubContainer = ({
...boxes[id]['layouts'][currentLayout],
// ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w },
top: y,
left: Math.round(x / gridWidth),
left: Math.round(x / (parent ? gridWidth : parentGridWidth)),
},
},
parent: parent ? parent : boxes[id].parent,
component: {
...boxes[id]['component'],
parent: !parent ? parent : boxes[id]['component']?.parent,
},
},
};
@ -606,13 +620,16 @@ export const SubContainer = ({
}
const renderWidget = (key, height) => {
console.log(key, height);
console.log('childeWidget', key, height);
if (!childWidgets[key]) {
return;
}
const addDefaultChildren = childWidgets[key]['withDefaultChildren'] || false;
const box = childWidgets[key];
const canShowInCurrentLayout =
box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
if (box.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
if (box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
return (
<DraggableBox
onComponentClick={onComponentClick}
@ -696,6 +713,7 @@ export const SubContainer = ({
setIsChildDragged={setIsChildDragged}
parent={parent}
parentLayout={appDefinition.pages[currentPageId]?.components[parent]?.layouts?.[currentLayout]}
parentGridWidth={containerCanvasWidth}
/>
{/* {checkParentVisibility() &&
Object.keys(childWidgets).map((key) => {

2
frontend/src/_helpers/appUtils.js
View file

@ -1658,7 +1658,7 @@ export const addNewWidgetToTheEditor = (
[left, top] = snapToGrid(subContainerWidth, left, top);
}
const gridWidth = subContainerWidth / 43;
const gridWidth = subContainerWidth / 24;
left = Math.round(left / gridWidth);
console.log('Top calc', { top, initialClientOffset, delta, zoomLevel, offsetFromTopOfWindow, subContainerWidth });
// left = (left * 100) / subContainerWidth;