Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fixes for drop offset issues of canvas

Browse source
This commit is contained in:
navaneeth 2021-05-01 17:09:20 +05:30
parent 43c61f48e6
commit d174f7f32c
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import { componentTypes } from './Components/components';
import { computeComponentName } from '@/_helpers/utils';
const styles = {
width: 1290,
width: 1292,
height: 1200,
position: 'absolute'
};
@ -78,6 +78,8 @@ export const Container = ({
let left = 0;
let top = 0;
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
// Component already exists and this is just a reposition event
if (id) {
const delta = monitor.getDifferenceFromInitialOffset();
@ -91,10 +93,8 @@ export const Container = ({
componentData = JSON.parse(JSON.stringify(componentMeta));
componentData.name = computeComponentName(componentData.component, boxes);
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
const offsetFromTopOfWindow = canvasBoundingRect.top;
const offsetFromLeftOfWindow = canvasBoundingRect.left;
const currentOffset = monitor.getSourceClientOffset();
left = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);

12
frontend/src/Editor/CustomDragLayer.jsx
View file

@ -23,13 +23,17 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
let id = item.id;
const canvasContainerBoundingRect = document.getElementsByClassName('canvas-container')[0].getBoundingClientRect();
const realCanvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
const realCanvasDelta = realCanvasBoundingRect.x - canvasContainerBoundingRect.x;
if (id) { // Dragging within the canvas
x = Math.round(item.left + delta.x);
y = Math.round(item.top + delta.y);
} else { // New component being dragged from components sidebar
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
const offsetFromTopOfWindow = canvasBoundingRect.top;
const offsetFromLeftOfWindow = canvasBoundingRect.left;
const offsetFromTopOfWindow = realCanvasBoundingRect.top;
const offsetFromLeftOfWindow = realCanvasBoundingRect.left;
const zoomLevel = item.zoomLevel;
x = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);
@ -38,6 +42,8 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
[x, y] = snapToGrid(x, y);
x += realCanvasDelta;
const transform = `translate(${x}px, ${y}px)`;
return {
transform,