0.12.0 adjust center if it's outsude container when inited

kutlugsahin · Apr 14, 2019 · 68853ec · 68853ec
1 parent b6f7d33
commit 68853ec
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smooth-dnd",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Drag and Drop library",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/container.ts b/src/container.ts
@@ -1,7 +1,7 @@
 import { animationClass, containerClass, containerInstance, dropPlaceholderFlexContainerClass, dropPlaceholderInnerClass, dropPlaceholderWrapperClass, stretcherElementClass, stretcherElementInstance, translationValue, wrapperClass, dropPlaceholderDefaultClass } from './constants';
 import { defaultOptions } from './defaults';
 import { domDropHandler } from './dropHandlers';
-import { ContainerOptions, SmoothDnD, SmoothDnDCreator } from './exportTypes';
+import { ContainerOptions, SmoothDnD, SmoothDnDCreator, DropPlaceholderOptions } from './exportTypes';
 import { ContainerProps, DraggableInfo, DragInfo, DragResult, ElementX, IContainer, LayoutManager } from './interfaces';
 import layoutManager from './layoutManager';
 import Mediator from './mediator';
@@ -17,10 +17,6 @@ function setAnimation(element: HTMLElement, add: boolean, animationDuration = de
   }
 }
 
-function initOptions(props = defaultOptions): ContainerOptions {
-  return Object.assign({}, defaultOptions, props);
-}
-
 function isDragRelevant({ element, getOptions }: ContainerProps) {
   return function (sourceContainer: IContainer, payload: any) {
     const options = getOptions();
@@ -301,12 +297,12 @@ function getShadowBeginEndForDropZone({ layout }: ContainerProps) {
   };
 }
 
-function drawDropPreview({ layout, element, getOptions }: ContainerProps) {
+function drawDropPlaceholder({ layout, element, getOptions }: ContainerProps) {
   let prevAddedIndex: number | null = null;
   return ({ dragResult: { elementSize, shadowBeginEnd, addedIndex, dropPlaceholderContainer } }: DragInfo) => {
     const options = getOptions();    
     if (options.dropPlaceholder) {
-      const { animationDuration, className, showOnTop } = typeof options.dropPlaceholder === 'boolean' ? {} as any : options.dropPlaceholder;
+      const { animationDuration, className, showOnTop } = typeof options.dropPlaceholder === 'boolean' ? {} as any as DropPlaceholderOptions : options.dropPlaceholder as DropPlaceholderOptions;
       if (addedIndex !== null) {
         if (!dropPlaceholderContainer) {
           const innerElement = document.createElement('div');
@@ -633,7 +629,7 @@ function getDragHandler(params: ContainerProps) {
       handleInsertionSizeChange,
       calculateTranslations,
       getShadowBeginEnd,
-      drawDropPreview,
+      drawDropPlaceholder,
       handleFirstInsertShadowAdjustment,
       fireDragEnterLeaveEvents,
       fireOnDropReady
@@ -789,8 +785,8 @@ const smoothDnD: SmoothDnDCreator = function (element: HTMLElement, options?: Co
       Mediator.unregister(container);
       container.dispose(container);
     },
-    setOptions(options: ContainerOptions) {
-      container.setOptions(options);
+    setOptions(options: ContainerOptions, merge?: boolean) {
+      container.setOptions(options, merge);
     }
   };
 };

diff --git a/src/exportTypes.ts b/src/exportTypes.ts
@@ -21,7 +21,7 @@ export interface DropResult {
 	element?: HTMLElement;
 }
 
-export interface DropPreviewOptions {
+export interface DropPlaceholderOptions {
 	className?: string;
 	animationDuration?: number;
 	showOnTop?: boolean;
@@ -59,5 +59,5 @@ export interface ContainerOptions {
 	removeOnDropOut?: boolean;
 	getGhostParent?: () => HTMLElement;
 	onDragEnd?: DragEndCallback;
-	dropPlaceholder?: DropPreviewOptions | boolean;	
+	dropPlaceholder?: DropPlaceholderOptions | boolean;	
 }
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -86,7 +86,7 @@ export interface IContainer {
   setDraggables: () => void;
   fireRemoveElement: () => void;
   getScrollMaxSpeed: () => number | undefined;
-  setOptions: (options: ContainerOptions) => void;
+  setOptions: (options: ContainerOptions, merge?: boolean) => void;
   shouldUseTransformForGhost: () => boolean;
 }
 

diff --git a/src/mediator.ts b/src/mediator.ts
@@ -78,9 +78,13 @@ function getGhostParent() {
 }
 
 function getGhostElement(wrapperElement: HTMLElement, { x, y }: Position, container: IContainer, cursor: string): GhostInfo {
-  const { left, top, right, bottom } = wrapperElement.getBoundingClientRect();
-  const midX = left + (right - left) / 2;
-  const midY = top + (bottom - top) / 2;
+  const wrapperRect = wrapperElement.getBoundingClientRect();
+  const { left, top, right, bottom } = wrapperRect;
+
+  const wrapperVisibleRect = Utils.getIntersection(container.layout.getContainerRectangles().visibleRect, wrapperRect);
+
+  const midX = wrapperVisibleRect.left + (wrapperVisibleRect.right - wrapperVisibleRect.left) / 2;
+  const midY = wrapperVisibleRect.top + (wrapperVisibleRect.bottom - wrapperVisibleRect.top) / 2;
   const ghost: HTMLElement = wrapperElement.cloneNode(true) as HTMLElement;
   ghost.style.zIndex = '1000';
   ghost.style.boxSizing = 'border-box';