Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

wikiphp

Members
  • Posts

    4
  • Joined

  • Last visited

Posts posted by wikiphp

  1. 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?

  2. 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;

     

    image.thumb.png.e1c048b584ecb0d7e6a4da2160936ac9.png

    See the Pen by s (@s) on CodePen

×