Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: moved widgets out of dragcontainer component

Browse source
This commit is contained in:
Johnson Cherian 2024-01-23 02:31:03 +05:30
parent a909ae76d4
commit a863849245
4 changed files with 876 additions and 671 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ import { useAppVersionStore } from '@/_stores/appVersionStore';
import { useEditorStore } from '@/_stores/editorStore';
import { useAppInfo } from '@/_stores/appDataStore';
import { shallow } from 'zustand/shallow';
import _, { cloneDeep } from 'lodash';
import _, { cloneDeep, isEmpty } from 'lodash';
// eslint-disable-next-line import/no-unresolved
import { diff } from 'deep-object-diff';
import DragContainer from './DragContainer';
@ -62,11 +62,12 @@ export const Container = ({
const [draggedSubContainer, setDraggedSubContainer] = useDraggedSubContainer(false);
const [dragTarget] = useDragTarget();
const { showComments, currentLayout, selectedComponents } = useEditorStore(
const { showComments, currentLayout, selectedComponents, hoveredComponent } = useEditorStore(
(state) => ({
showComments: state?.showComments,
currentLayout: state?.currentLayout,
selectedComponents: state?.selectedComponents,
hoveredComponent: state?.hoveredComponent,
}),
shallow
);
@ -801,26 +802,189 @@ export const Container = ({
))}
</>
)}
<DragContainer
boxes={Object.keys(boxes).map((key) => ({ ...boxes[key], id: key }))}
renderWidget={renderWidget}
canvasWidth={canvasWidth}
onResizeStop={onResizeStop}
onDrag={onDragStop}
gridWidth={gridWidth}
selectedComponents={selectedComponents}
setIsDragging={setIsDragging}
setIsResizing={setIsResizing}
currentLayout={currentLayout}
subContainerWidths={subContainerWidths}
// turnOffAutoLayout={turnOffAutoLayout}
currentPageId={currentPageId}
autoComputeLayout={appDefinition.pages[currentPageId]?.autoComputeLayout}
setDraggedSubContainer={setDraggedSubContainer}
draggedSubContainer={draggedSubContainer}
mode={isVersionReleased ? 'view' : mode}
boxesAsObj={boxes}
/>
<div className="root">
<div className="container-fluid rm-container p-0">
{Object.entries(boxes)
.filter(([, box]) => isEmpty(box?.component?.parent))
.map(([id, box]) => {
const { component } = box;
let layoutData = box?.layouts?.[currentLayout];
if (isEmpty(layoutData)) {
layoutData = box?.layouts?.['desktop'];
}
// const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
const width = gridWidth * layoutData.width;
const styles = {
width: width + 'px',
height: layoutData.height + 'px',
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
};
return (
<div
className={`target widget-target target1 ele-${id} moveable-box`}
data-id={`${component.parent}`}
key={id}
id={id}
widgetid={id}
style={{
transform: `translate(332px, -134px)`,
...styles,
...(hoveredComponent === id ? { zIndex: 2 } : {}),
}}
>
<DraggableBox
className={showComments && 'pointer-events-none'}
canvasWidth={canvasWidth}
onComponentClick={
config.COMMENT_FEATURE_ENABLE && showComments ? handleAddThreadOnComponent : onComponentClick
}
onEvent={onEvent}
// height={height}
onComponentOptionChanged={onComponentOptionChanged}
onComponentOptionsChanged={onComponentOptionsChanged}
key={id}
paramUpdated={paramUpdated}
id={id}
{...box}
mode={mode}
resizingStatusChanged={(status) => setIsResizing(status)}
draggingStatusChanged={(status) => setIsDragging(status)}
inCanvas={true}
zoomLevel={zoomLevel}
setSelectedComponent={setSelectedComponent}
removeComponent={removeComponent}
deviceWindowWidth={deviceWindowWidth}
isSelectedComponent={
mode === 'edit' ? selectedComponents.find((component) => component.id === id) : false
}
darkMode={darkMode}
// onComponentHover={onComponentHover}
// hoveredComponent={hoveredComponent}
sideBarDebugger={sideBarDebugger}
isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false}
childComponents={childComponents[id]}
containerProps={{
// turnOffAutoLayout,
mode,
snapToGrid,
onComponentClick,
onEvent,
appDefinition,
appDefinitionChanged,
currentState,
onComponentOptionChanged,
onComponentOptionsChanged,
appLoading,
zoomLevel,
setSelectedComponent,
removeComponent,
currentLayout,
deviceWindowWidth,
selectedComponents,
darkMode,
// onComponentHover,
// hoveredComponent,
sideBarDebugger,
addDefaultChildren: box.withDefaultChildren,
currentPageId,
childComponents,
// setIsChildDragged,
setSubContainerWidths: (id, width) =>
setSubContainerWidths((widths) => ({ ...widths, [id]: width })),
parentGridWidth: gridWidth,
subContainerWidths,
draggedSubContainer,
}}
isVersionReleased={isVersionReleased}
/>
</div>
);
})}
<DragContainer
boxes={Object.keys(boxes).map((key) => ({ ...boxes[key], id: key }))}
renderWidget={renderWidget}
canvasWidth={canvasWidth}
onResizeStop={onResizeStop}
onDrag={onDragStop}
gridWidth={gridWidth}
selectedComponents={selectedComponents}
setIsDragging={setIsDragging}
setIsResizing={setIsResizing}
currentLayout={currentLayout}
subContainerWidths={subContainerWidths}
// turnOffAutoLayout={turnOffAutoLayout}
currentPageId={currentPageId}
autoComputeLayout={appDefinition.pages[currentPageId]?.autoComputeLayout}
setDraggedSubContainer={setDraggedSubContainer}
draggedSubContainer={draggedSubContainer}
mode={isVersionReleased ? 'view' : mode}
boxesAsObj={boxes}
//for DraggableBox
showComments={showComments}
onComponentClick={
config.COMMENT_FEATURE_ENABLE && showComments ? handleAddThreadOnComponent : onComponentClick
}
onEvent={onEvent}
// height={height}
onComponentOptionChanged={onComponentOptionChanged}
onComponentOptionsChanged={onComponentOptionsChanged}
// key={key}
paramUpdated={paramUpdated}
// id={key}
// {...boxes[key]}
// mode={mode}
resizingStatusChanged={(status) => setIsResizing(status)}
draggingStatusChanged={(status) => setIsDragging(status)}
inCanvas={true}
zoomLevel={zoomLevel}
setSelectedComponent={setSelectedComponent}
removeComponent={removeComponent}
deviceWindowWidth={deviceWindowWidth}
// isSelectedComponent={mode === 'edit' ? selectedComponents.find((component) => component.id === key) : false}
darkMode={darkMode}
// onComponentHover={onComponentHover}
// hoveredComponent={hoveredComponent}
sideBarDebugger={sideBarDebugger}
isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false}
// childComponents={childComponents[key]}
containerProps={{
// turnOffAutoLayout,
mode,
snapToGrid,
onComponentClick,
onEvent,
appDefinition,
appDefinitionChanged,
currentState,
onComponentOptionChanged,
onComponentOptionsChanged,
appLoading,
zoomLevel,
setSelectedComponent,
removeComponent,
currentLayout,
deviceWindowWidth,
selectedComponents,
darkMode,
// onComponentHover,
// hoveredComponent,
sideBarDebugger,
// addDefaultChildren,
currentPageId,
childComponents,
// setIsChildDragged,
setSubContainerWidths: (id, width) => setSubContainerWidths((widths) => ({ ...widths, [id]: width })),
parentGridWidth: gridWidth,
subContainerWidths,
draggedSubContainer,
}}
isVersionReleased={isVersionReleased}
childComponents={childComponents}
/>
</div>
</div>
{Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
<div style={{ paddingTop: '10%' }}>
<div className="mx-auto w-50 p-5 bg-light no-components-box">

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

File diff suppressed because it is too large Load diff

72
frontend/src/Editor/EditorSelecto.jsx
View file

@ -1,7 +1,8 @@
import React, { useCallback, memo } from 'react';
import React, { useCallback, memo, useState } from 'react';
import Selecto from 'react-selecto';
import { useEditorStore, EMPTY_ARRAY } from '@/_stores/editorStore';
import { shallow } from 'zustand/shallow';
import Moveable from 'react-moveable';
const EditorSelecto = ({
selectionRef,
@ -20,6 +21,8 @@ const EditorSelecto = ({
shallow
);
const [dragTarget, setDragTarget] = useState([]);
const onAreaSelectionStart = useCallback(
(e) => {
const isMultiSelect = e.inputEvent.shiftKey || useEditorStore.getState().selectedComponents.length > 0;
@ -30,6 +33,7 @@ const EditorSelecto = ({
);
const onAreaSelection = useCallback((e) => {
setDragTarget(e.selected);
e.added.forEach((el) => {
el.classList.add('resizer-select');
});
@ -83,24 +87,54 @@ const EditorSelecto = ({
};
return (
<Selecto
dragContainer={'.canvas-container'}
selectableTargets={['.moveable-box']}
hitRate={0}
selectByClick={true}
toggleContinueSelect={['shift']}
ref={selectionRef}
scrollOptions={scrollOptions}
onSelectStart={onAreaSelectionStart}
onSelectEnd={onAreaSelectionEnd}
onSelect={onAreaSelection}
onDragStart={onAreaSelectionDragStart}
onDrag={onAreaSelectionDrag}
onDragEnd={onAreaSelectionDragEnd}
onScroll={(e) => {
canvasContainerRef.current.scrollBy(e.direction[0] * 10, e.direction[1] * 10);
}}
/>
<>
<Selecto
dragContainer={'.canvas-container'}
selectableTargets={['.moveable-box']}
hitRate={0}
selectByClick={true}
toggleContinueSelect={['shift']}
ref={selectionRef}
scrollOptions={scrollOptions}
onSelectStart={onAreaSelectionStart}
onSelectEnd={onAreaSelectionEnd}
onSelect={onAreaSelection}
onDragStart={onAreaSelectionDragStart}
onDrag={onAreaSelectionDrag}
onDragEnd={onAreaSelectionDragEnd}
onScroll={(e) => {
canvasContainerRef.current.scrollBy(e.direction[0] * 10, e.direction[1] * 10);
}}
/>
{/* <Moveable
target={dragTarget}
// ref={moveableEditorRef}
draggable={true}
resizable={true}
onDrag={(e) => {
e.target.style.transform = e.transform;
}}
onDragGroup={(e) => {
console.log('Dragging--------new');
e.events.forEach((ev) => {
ev.target.style.transform = ev.transform;
});
}}
onClickGroup={(e) => window.objSelecto.clickTarget(e.inputEvent, e.inputTarget)}
onRender={(ev) => (ev.target.style.cssText += ev.cssText)}
// onDragStart={(_a) => {
// var target = _a.target,
// clientX = _a.clientX,
// clientY = _a.clientY;
// }}
// onDragEnd={(_a) => {
// var target = _a.target,
// isDrag = _a.isDrag,
// clientX = _a.clientX,
// clientY = _a.clientY;
// }}
/> */}
</>
);
};

2
server/src/helpers/utils.helper.ts
View file

@ -240,5 +240,5 @@ export function isTooljetVersionWithNormalizedAppDefinitionSchem(version) {
* Checks if a given Tooljet version is compatible with the grid compatibility fix.
*/
export function shouldApplyGridCompatibilityFix(version) {
return semver.satisfies(semver.coerce(version), '>= 2.24.0 < 2.27.7');
return semver.satisfies(semver.coerce(version), '>= 2.24.0 < 2.27.8');
}