Resize element in X axis with specific measures as defined columns

[wikiphp 1 Likes (Newbie)]

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;

 

See the Pen by s (@s) on CodePen

[Cassie 5,370 Likes (Superhero)]

Hi there wikiPhp - We can usually help more effectively if you provide a minimal demo, codepen is great for this.
 

[wikiphp 1 Likes (Newbie)]

@Cassie
Absolutely you are right.

Codesandbox link: https://codesandbox.io/s/gsap-draggable-resizable-lknrc

[GreenSock 18,566 Likes (Superhero)]

I'm not sure I really understand what you're asking here, but maybe you just need to adjust your liveSnap x value like:

liveSnap: {x: (value) => gsap.utils.snap(100, value)},

And do that for your draggableRowElement Draggable too. 

[wikiphp 1 Likes (Newbie)]

4 hours ago, GreenSock said:

I'm not sure I really understand what you're asking here, but maybe you just need to adjust your liveSnap x value like:

liveSnap: {x: (value) => gsap.utils.snap(100, value)},

And do that for your draggableRowElement Draggable too. 

It's exactly what I wanted. Thank you

It affect suddenly between columns but has gsap any animation for increase or decrease row width smoothly?

[GreenSock 18,566 Likes (Superhero)]

13 hours ago, wikiphp said:

It affect suddenly between columns but has gsap any animation for increase or decrease row width smoothly?

No, there's not an automatic setting for that. But you can do almost anything with custom logic and GSAP. We don't have the bandwidth to build that for you for free, though. You'd need to craft that logic on your own or hire someone to do it for you. 

 

Good luck!

[GreenSock 18,566 Likes (Superhero)]

Just one quick [untested] idea: 

liveSnap: {x: (value) => {
  // animate to the snapped value
  gsap.to(target, {x: gsap.utils.snap(100, value), duration: 0.3, overwrite: true});
  // but return the unsnapped value
  return value;
}},