Hi.
I have a resizable and draggable element that I want to resize width of that container in X axis for predefined columns. I mean user just can resize width of element until feeling a column from #1 to #12.
In tne uploaded image row container filled column #2 to #7.
It's my code and for my purpose I need your help.
import React, { FC, useContext, useEffect } from 'react';
import gsap from 'gsap';
import { Draggable } from 'gsap/dist/Draggable';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { layoutDndGroupName } from '$components/pageLayouts/LayoutModal';
import { LayoutContext } from '$components/pageLayouts/LayoutModal/LayoutContext';
import { Header } from '$components/shared';
import { DragAndDropZones } from '$components/shared/modules/DragAndDrop';
import { getDnDId } from '$lib/utils';
const PlaygroundContainer = styled.div`
width: 100%;
height: 200px;
position: relative;
overflow: visible;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
`;
export const Playground: FC = () => {
const { t } = useTranslation();
const { playgroundFields } = useContext(LayoutContext);
const clamp = (value, min, max) => (value < min ? min : value > max ? max : value);
const createResizable = (draggableRowElement) => {
const dropzoneContainer = document.querySelector(
`[data-zone-id="${DragAndDropZones.dropZone}-${layoutDndGroupName}"]`,
) as HTMLElement;
const handle = document.createElement('div');
handle.className = 'resize-handle';
draggableRowElement.appendChild(handle);
const draggableElementRect = draggableRowElement.getBoundingClientRect();
gsap.set(handle, { x: draggableElementRect.width, y: draggableElementRect.height });
const rect2 = handle.getBoundingClientRect();
const offset = {
x1: rect2.left - draggableElementRect.right,
y1: rect2.top - draggableElementRect.bottom,
x2: rect2.right - draggableElementRect.right,
y2: rect2.bottom - draggableElementRect.bottom,
};
Draggable.create(draggableRowElement, {
bounds: dropzoneContainer,
autoScroll: 1,
type: 'x',
});
Draggable.create(handle, {
bounds: dropzoneContainer,
autoScroll: 1,
type: 'x',
onPress(e) {
e.stopPropagation();
},
onDrag() {
gsap.set(draggableRowElement, { width: this.x + 0, height: this.y + 0 });
},
liveSnap: {
x: (x) => clamp(x, -offset.x1, x + offset.x2),
y: (y) => clamp(y, -offset.y1, y + offset.y2),
},
});
};
useEffect(() => {
const draggableRowsContainer = document.querySelectorAll('.rowContainer');
for (const draggableRowElement of draggableRowsContainer) {
createResizable(draggableRowElement);
}
}, [playgroundFields]);
return (
<>
<Header
title={t('Playground')}
subtitle={t('You can resize any section by select corners')}
/>
<PlaygroundContainer data-zone-id={getDnDId('dropZone', layoutDndGroupName)}>
{playgroundFields.map((field) => {
return field.element;
})}
</PlaygroundContainer>
</>
);
};
export default Playground;