import { Draggable } from 'dragee';

const element = document.getElementById('draggable');
const calculusFx = (x) => {
  x = x / 100;
  return (x * Math.sin(x * x) + 1) * 10 + 80;
};

new Draggable(element, {
  bound: (point, size) => {
    const retPoint = point.clone();
    retPoint.y = calculusFx(point.x);
    return retPoint;
  },
  position: new Point(210, calculusFx(210))
});

// Events
draggable.on('drag:start', (event) => console.log('Started dragging'));
draggable.on('drag:move', (event) => console.log('Dragging'));
draggable.on('drag:end', (event) => console.log('Finished dragging'));

// Bound to element's boundaries
BoundToElement.bounding(element, container)

// Bound to specific rectangle
BoundToRectangle.bounding(rectangle)

// Bound to vertical line with Y-axis constraints
BoundToLineX.bounding(x, startY, endY)

// Bound to horizontal line with X-axis constraints
BoundToLineY.bounding(y, startX, endX)

// Bound to line between two points
BoundToLine.bounding(startPoint, endPoint)

// Bound to circle
BoundToCircle.bounding(center, radius)

// Bound to arc
BoundToArc.bounding(center, radius, startAngle, endAngle)

import { Draggable, List } from 'dragee';

const gridContainer = document.querySelector('.grid-container');
const gridItems = gridContainer.querySelectorAll('.grid-item');

const gridDraggables = Array.from(gridItems).map(item =>
  new Draggable(item, {
    container: gridContainer,
    nativeDragAndDrop: true
  })
);

new List(gridDraggables)

import { Draggable, BubblingList } from 'dragee';

const listContainer = document.querySelector('.sortable-demo-list');
const listItems = listContainer.querySelectorAll('.items')

const draggableItems = Array.from(listItems).map(item => {
  new Draggable(item, {
    container: listContainer,
    nativeDragAndDrop: true,
    emulateNativeDragAndDropOnTouch: true
  })
});

new BubblingList(draggableItems);

import { Target, FloatLeftStrategy, transformedSpaceDistanceFactory } from 'dragee'

const target = new Target(element, draggables, {
  timeEnd: 200,
  timeExcange: 400,
  parent: parentElement,
  strategy: new FloatLeftStrategy(
    () => target.getRectangle()
    {
      radius: 80,
      getDistance: transformedSpaceDistanceFactory({ x: 1, y: 4 }),
      removable: true
    }
  )
});

new Target(element, draggables, {
  strategy: new FloatLeftStrategy(
    () => target.getRectangle(),
    {
      radius: 80,
      getDistance: transformedSpaceDistanceFactory({ x: 1, y: 4 })
    }
  )
});

new Target(element, draggables, {
  strategy: new FloatRightStrategy(
    () => target.getRectangle(),
    {
      radius: 80,
      getDistance: transformedSpaceDistanceFactory({ x: 1, y: 4 })
    }
  )
});

new Target(element, draggables, {
  strategy: new NotCrossingStrategy(
    () => target.getRectangle()
  )
});