新增响应式布局

example/changelog.md

@@ -1,6 +1,9 @@
 v0.2.0
 - 版本跳跃
 - 添加增加add/remove
+- 新增记忆布局demo
+- 响应式布局，开启后会按照window进行缩放
+- 更新col,width,rowHeight以后，会动态进行更新
 
 v0.1.7
 - 优化性能-使用reselect的原理

src/HandleLayout/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 
 import './index.css';
 

src/HistoryLayout/HistoryLayout.tsx

@@ -1,121 +1,122 @@
 import * as React from 'react';
 
-import { DragactProps, DragactLayoutItem, Dragact } from '../lib/dragact';
+import { DragactProps, DragactLayoutItem } from '../lib/dragact-type';
 import { GridItemEvent } from '../lib/GridItem';
+import { Dragact } from '../lib/dragact';
 
 interface HistoryDragactState {
-  layout: DragactLayoutItem[]
+    layout: DragactLayoutItem[]
 }
 
-export class HistoryDragact extends React.Component<DragactProps, HistoryDragactState > {
-  _actionsHistory : string[] = []
-  _cacheLayouts: string;
-  _activeItem: GridItemEvent
-  _dragact: Dragact | null
-  constructor(props: DragactProps) {
-      super(props);
-      this.state= {layout: props.layout} as any;
-  }
-
-  _cacheCurrentLayoutStart = (layoutItem: GridItemEvent) => {
-      this._activeItem = layoutItem
-      if (!this._dragact) {
-          return;
-      }
-      this._cachingLayouts(this._dragact);
-  }
-
-  _cacheCurrentLayoutEnd = (layoutItem: GridItemEvent) => {
-      const { GridY, GridX, h, w } = this._activeItem;
-      if (GridX === layoutItem.GridX && GridY === layoutItem.GridY && h === layoutItem.h && w === layoutItem.w) {
-          return;
-  }
-      this._storeLayoutToHistory(this._cacheLayouts)
-  }
- 
-  _cachingLayouts = (d: Dragact) => {
-      const initiateSnapShot = JSON.stringify({
-          layout: d.getLayout(),
-      })
-      return this._cacheLayouts = initiateSnapShot;
-  }
-
-  goBack = () => {
-      const mapLayoutHistory = this._actionsHistory;
-      if (mapLayoutHistory.length > 1) {
-          const last = mapLayoutHistory.pop();
-          if(!last) {
-              return;
-          }
-          this._changeDragactLayouts(last);
-      }
-  }
-
-  reset = () => {
-      if (!this._dragact) {
-          return;
-      }
-      this._cachingLayouts(this._dragact);
-      this._storeLayoutToHistory(this._cacheLayouts);
-      const initiateSnapShot = this._actionsHistory[0];
-      this._changeDragactLayouts(initiateSnapShot);        
-  }
-  
-  clear = () => {
-      this._actionsHistory = this._actionsHistory.slice(0, 1);
-      this._changeDragactLayouts(this._actionsHistory[0]);
-  }
-
-  onDragStart = (event: GridItemEvent) => {
-      this._cacheCurrentLayoutStart(event)
-      this.props.onDragStart && this.props.onDragStart(event)
-  }
-
-  onDragEnd = (event: GridItemEvent) => {
-      this._cacheCurrentLayoutEnd(event);
-      this.props.onDragEnd && this.props.onDragEnd(event)
-  }
-
-  _changeDragactLayouts = (snapshot: string) => {
-      if(!this._dragact) {
-          return;
-      }
-      try {
-          const {layout} = JSON.parse(snapshot);
-          this.setState({
-              layout
-          })
-      }catch (e) {
-      }
-     
-  }
-
-  _storeLayoutToHistory = (layouts: string) => {
-      this._actionsHistory.push(layouts);
-  }
-
-  componentDidMount() {
-      if (this._dragact) {
-          const initiateSnapShot = this._cachingLayouts(this._dragact);
-          this._storeLayoutToHistory(initiateSnapShot)
-      }
-  }
-
-  componentWillReceiveProps(nextProps: DragactProps) {
-      this.setState({
-          layout: nextProps.layout
-      })
-  }
-  _dragactRefCallback = (d: Dragact) => {
-      this._dragact = d;
-  }
-
-  get getDragact() {
-      return this._dragact;
-  }
-
-  render () {
-      const layout = this.state.layout;
-      return <Dragact ref={this._dragactRefCallback} {...this.props} layout={layout} onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
+export class HistoryDragact extends React.Component<DragactProps, HistoryDragactState> {
+    _actionsHistory: string[] = []
+    _cacheLayouts: string;
+    _activeItem: GridItemEvent
+    _dragact: Dragact | null
+    constructor(props: DragactProps) {
+        super(props);
+        this.state = { layout: props.layout } as any;
+    }
+
+    _cacheCurrentLayoutStart = (layoutItem: GridItemEvent) => {
+        this._activeItem = layoutItem
+        if (!this._dragact) {
+            return;
+        }
+        this._cachingLayouts(this._dragact);
+    }
+
+    _cacheCurrentLayoutEnd = (layoutItem: GridItemEvent) => {
+        const { GridY, GridX, h, w } = this._activeItem;
+        if (GridX === layoutItem.GridX && GridY === layoutItem.GridY && h === layoutItem.h && w === layoutItem.w) {
+            return;
+        }
+        this._storeLayoutToHistory(this._cacheLayouts)
+    }
+
+    _cachingLayouts = (d: Dragact) => {
+        const initiateSnapShot = JSON.stringify({
+            layout: d.getLayout(),
+        })
+        return this._cacheLayouts = initiateSnapShot;
+    }
+
+    goBack = () => {
+        const mapLayoutHistory = this._actionsHistory;
+        if (mapLayoutHistory.length > 1) {
+            const last = mapLayoutHistory.pop();
+            if (!last) {
+                return;
+            }
+            this._changeDragactLayouts(last);
+        }
+    }
+
+    reset = () => {
+        if (!this._dragact) {
+            return;
+        }
+        this._cachingLayouts(this._dragact);
+        this._storeLayoutToHistory(this._cacheLayouts);
+        const initiateSnapShot = this._actionsHistory[0];
+        this._changeDragactLayouts(initiateSnapShot);
+    }
+
+    clear = () => {
+        this._actionsHistory = this._actionsHistory.slice(0, 1);
+        this._changeDragactLayouts(this._actionsHistory[0]);
+    }
+
+    onDragStart = (event: GridItemEvent) => {
+        this._cacheCurrentLayoutStart(event)
+        this.props.onDragStart && this.props.onDragStart(event)
+    }
+
+    onDragEnd = (event: GridItemEvent) => {
+        this._cacheCurrentLayoutEnd(event);
+        this.props.onDragEnd && this.props.onDragEnd(event)
+    }
+
+    _changeDragactLayouts = (snapshot: string) => {
+        if (!this._dragact) {
+            return;
+        }
+        try {
+            const { layout } = JSON.parse(snapshot);
+            this.setState({
+                layout
+            })
+        } catch (e) {
+        }
+
+    }
+
+    _storeLayoutToHistory = (layouts: string) => {
+        this._actionsHistory.push(layouts);
+    }
+
+    componentDidMount() {
+        if (this._dragact) {
+            const initiateSnapShot = this._cachingLayouts(this._dragact);
+            this._storeLayoutToHistory(initiateSnapShot)
+        }
+    }
+
+    componentWillReceiveProps(nextProps: DragactProps) {
+        this.setState({
+            layout: nextProps.layout
+        })
+    }
+    _dragactRefCallback = (d: Dragact) => {
+        this._dragact = d;
+    }
+
+    get getDragact() {
+        return this._dragact;
+    }
+
+    render() {
+        const layout = this.state.layout;
+        return <Dragact ref={this._dragactRefCallback} {...this.props} layout={layout} onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
     }
 }

src/HistoryLayout/index.tsx

@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { DragactLayoutItem, GridItemProvided} from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 import { HistoryDragact } from './HistoryLayout'
 import { Words } from './largedata';
 import './index.css';
@@ -69,17 +69,17 @@ export class HistoryDemo extends React.Component<{}, {}> {
                     <h1 style={{ textAlign: 'center' }}>
                         复原操作demo
                     </h1>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.goBack();
                         }
                     }}>back</button>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.reset();
                         }
                     }}>reset</button>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.clear();
                         }

src/NormalLayout/index.tsx

@@ -1,5 +1,6 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 import { Words } from './largedata';
 import './index.css';
 

src/lib/dragact-type.ts

@@ -0,0 +1,121 @@
+import { GridItemEvent } from './gridItem';
+
+export interface DragactLayoutItem {
+    GridX: number
+    GridY: number
+    static?: Boolean
+    w: number
+    h: number
+    isUserMove?: Boolean
+    key?: number | string
+    handle?: Boolean
+    canDrag?: Boolean
+    canResize?: Boolean
+}
+
+export interface DragactProps {
+    layout: DragactLayoutItem[]
+    /** 
+     * 宽度切分比 
+     * 这个参数会把容器的宽度平均分为col等份
+     * 于是容器内元素的最小宽度就等于 containerWidth/col
+    */
+    col: number,
+
+    /** 
+     * 容器的宽度
+    */
+    width: number,
+
+    /**容器内每个元素的最小高度 */
+    rowHeight: number,
+
+    /**
+     * 容器内部的padding
+     */
+    padding?: number,
+
+    children: (Item: DragactLayoutItem, provided: GridItemProvided) => any,
+
+
+    // 
+    // interface GridItemEvent {
+    //     event: any //浏览器拖动事件
+    //     GridX: number //在布局中的x格子  
+    //     GridY: number //在布局中的y格子  
+    //     w: number //元素的宽度
+    //     h: number //元素的高度
+    //     UniqueKey: string | number //元素的唯一key
+    // }
+
+    /**
+     * 拖动开始的回调
+     */
+    onDragStart?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动中的回调
+     */
+    onDrag?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动结束的回调
+     */
+    onDragEnd?: (event: GridItemEvent) => void
+
+
+    /**
+     * 响应式回掉
+     * 关闭responsive后，不会触发
+     */
+    onWindowResize?: (event: ResponsiveState) => void
+
+    /**
+     * 每个元素的margin,第一个参数是左右，第二个参数是上下
+     */
+    margin: [number, number]
+
+    /** 
+     * layout的名字
+    */
+    className: number | string
+
+    /**是否有placeholder */
+    placeholder?: Boolean
+
+    /**是否响应式 */
+    responsive?: Boolean
+
+    style?: React.CSSProperties
+}
+
+export interface mapLayout {
+    [key: string]: DragactLayoutItem
+}
+
+interface ResponsiveState {
+    width: number
+    originWidth: number
+    lastWindowWidth: number
+}
+
+export interface DragactState {
+    GridXMoving: number
+    GridYMoving: number
+    wMoving: number
+    hMoving: number
+    placeholderShow: Boolean
+    placeholderMoving: Boolean
+    layout: DragactLayoutItem[]
+    containerHeight: number
+    dragType: 'drag' | 'resize'
+    mapLayout: mapLayout | undefined
+    responsiveState: ResponsiveState
+}
+
+export interface GridItemProvided {
+    isDragging: Boolean
+    dragHandle: any;
+    resizeHandle: any;
+    props: any;
+}

src/lib/dragact.tsx

@@ -6,112 +6,11 @@ import { layoutCheck } from './util/collison';
 import { correctLayout } from './util/correction';
 import { stringJoin } from './utils';
 import { layoutItemForkey, syncLayout } from './util/initiate';
+import { DragactProps, DragactState, DragactLayoutItem } from "./dragact-type";
 
 import './style.css';
 
-
-export interface DragactLayoutItem {
-    GridX: number
-    GridY: number
-    static?: Boolean
-    w: number
-    h: number
-    isUserMove?: Boolean
-    key?: number | string
-    handle?: Boolean
-    canDrag?: Boolean
-    canResize?: Boolean
-}
-
-export interface DragactProps {
-    layout: DragactLayoutItem[]
-    /** 
-     * 宽度切分比 
-     * 这个参数会把容器的宽度平均分为col等份
-     * 于是容器内元素的最小宽度就等于 containerWidth/col
-    */
-    col: number,
-
-    /** 
-     * 容器的宽度
-    */
-    width: number,
-
-    /**容器内每个元素的最小高度 */
-    rowHeight: number,
-
-    /**
-     * 容器内部的padding
-     */
-    padding?: number,
-
-    children: (Item: DragactLayoutItem, provided: GridItemProvided) => any,
-
-
-    // 
-    // interface GridItemEvent {
-    //     event: any //浏览器拖动事件
-    //     GridX: number //在布局中的x格子  
-    //     GridY: number //在布局中的y格子  
-    //     w: number //元素的宽度
-    //     h: number //元素的高度
-    //     UniqueKey: string | number //元素的唯一key
-    // }
-
-    /**
-     * 拖动开始的回调
-     */
-    onDragStart?: (event: GridItemEvent) => void
-
-    /**
-     * 拖动中的回调
-     */
-    onDrag?: (event: GridItemEvent) => void
-
-    /**
-     * 拖动结束的回调
-     */
-    onDragEnd?: (event: GridItemEvent) => void
-
-    /**
-     * 每个元素的margin,第一个参数是左右，第二个参数是上下
-     */
-    margin: [number, number]
-
-    /** 
-     * layout的名字
-    */
-    className: number | string
-
-    /**是否有placeholder */
-    placeholder?: Boolean
-
-    style?: React.CSSProperties
-}
-
-export interface mapLayout {
-    [key: string]: DragactLayoutItem
-}
-
-interface DragactState {
-    GridXMoving: number
-    GridYMoving: number
-    wMoving: number
-    hMoving: number
-    placeholderShow: Boolean
-    placeholderMoving: Boolean
-    layout: DragactLayoutItem[]
-    containerHeight: number
-    dragType: 'drag' | 'resize'
-    mapLayout: mapLayout | undefined
-}
-
-export interface GridItemProvided {
-    isDragging: Boolean
-    dragHandle: any;
-    resizeHandle: any;
-    props: any;
-}
+const wins = window;
 
 export class Dragact extends React.Component<DragactProps, DragactState> {
 
@@ -132,7 +31,12 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             layout: layout,
             containerHeight: 500,
             dragType: 'drag',
-            mapLayout: undefined
+            mapLayout: undefined,
+            responsiveState: {
+                width: props.width,
+                originWidth: props.width,
+                lastWindowWidth: wins.innerWidth
+            }
         }
     }
 
@@ -226,8 +130,8 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
 
     renderPlaceholder() {
         if (!this.state.placeholderShow) return null
-        var { col, width, padding, rowHeight, margin, placeholder } = this.props
-        const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving, dragType } = this.state
+        var { col, padding, rowHeight, margin, placeholder } = this.props
+        const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving, dragType, responsiveState } = this.state
 
         if (!placeholder) return null;
         if (!padding) padding = 0;
@@ -235,7 +139,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             <GridItem
                 margin={margin}
                 col={col}
-                containerWidth={width}
+                containerWidth={responsiveState.width}
                 containerPadding={[padding, padding]}
                 rowHeight={rowHeight}
                 GridX={GridXMoving}
@@ -314,14 +218,32 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         setTimeout(() => {
             this.recalculateLayout(this.state.layout, this.props.col)
         }, 1);
-        window.addEventListener('resize', (e) => {
-            console.log(window.innerWidth);
+
+        if (this.props.responsive === void 666 || this.props.responsive === true) {
+            wins.addEventListener('resize', this.onWindowResize)
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.responsive === void 666 || this.props.responsive === true) {
+            wins.removeEventListener('resize', this.onWindowResize);
+        }
+    }
+
+    onWindowResize = (event: UIEvent) => {
+        console.log(window.innerWidth);
+        const { originWidth, lastWindowWidth } = this.state.responsiveState;
+        const windowProportion = wins.innerWidth / lastWindowWidth;
+
+        this.props.onWindowResize && this.props.onWindowResize(this.state.responsiveState)
+        this.setState({
+            responsiveState: { ...this.state.responsiveState, width: originWidth * windowProportion }
         })
     }
 
     getGridItem(child: any, index: number) {
-        const { dragType, mapLayout } = this.state;
-        var { col, width, padding, rowHeight, margin } = this.props;
+        const { dragType, mapLayout, responsiveState } = this.state;
+        var { col, padding, rowHeight, margin } = this.props;
         if (mapLayout) {
             const renderItem = layoutItemForkey(mapLayout, child.key + '');
             if (!padding) padding = 0;
@@ -330,7 +252,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     {...renderItem}
                     margin={margin}
                     col={col}
-                    containerWidth={width}
+                    containerWidth={responsiveState.width}
                     containerPadding={[padding, padding]}
                     rowHeight={rowHeight}
                     onDrag={this.onDrag}
@@ -357,12 +279,11 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
 
     render() {
         const {
-            width,
             className,
             layout,
             style
         } = this.props;
-        const { containerHeight } = this.state;
+        const { containerHeight, responsiveState } = this.state;
 
         return (
             <div
@@ -371,7 +292,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 style={{
                     ...style,
                     left: 100,
-                    width: width,
+                    width: responsiveState.width,
                     height: containerHeight,
                     zIndex: 1
                 }}

src/lib/dragger/index.tsx

@@ -8,6 +8,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
     parent: any;
     self: any;
     Ref: any;
+    mQue: number = 0;
 
     constructor(props: DraggerProps) {
         super(props)
@@ -61,8 +62,6 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         *   elX表示的是原来已经有的位移
         */
 
-
-
         let deltaX, deltaY;
         if (event.type.indexOf('mouse') >= 0) {
             deltaX = (event as MouseEvent).clientX - this.state.originX + lastX
@@ -278,19 +277,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         this.props.onResizeEnd && this.props.onResizeEnd(event, this.state.w, this.state.h);
     }
 
-    componentDidMount() {
-        /** 
-         * 这个函数只会调用一次 
-         * 这个只是一个临时的解决方案，因为这样会使得元素进行两次刷新
-        */
-        // if (typeof this.props.x === 'number' &&
-        //     typeof this.props.y === 'number') {
-        //     this.setState({
-        //         x: this.props.x,
-        //         y: this.props.y
-        //     })
-        // }
-    }
+
 
     componentWillReceiveProps(nextProps: DraggerProps) {
         /**
@@ -300,12 +287,11 @@ export class Dragger extends React.Component<DraggerProps, {}> {
          */
         const { isUserMove } = nextProps
         if (!isUserMove) {
-
             if (typeof nextProps.x === 'number' &&
                 typeof nextProps.y === 'number') {
                 this.setState({
-                    x: nextProps.x,
                     y: nextProps.y,
+                    x: nextProps.x,
                     lastX: nextProps.x,
                     lastY: nextProps.y,
                     w: nextProps.w,
@@ -315,6 +301,19 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         }
     }
 
+    movePerFrame = (delt: number) => {
+
+        this.setState({
+            y: this.state.y + delt
+        })
+        this.mQue++;
+        if (this.mQue >= 10) {
+            this.mQue = 0;
+            return
+        }
+        requestAnimationFrame(() => this.movePerFrame(delt))
+    }
+
     mixin = () => {
         var dragMix = {
             onMouseDown: this.onDragStart,
@@ -335,7 +334,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
     render() {
 
         var { x, y, w, h } = this.state
-        var { style, className, canResize } = this.props
+        var { style } = this.props
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x ? this.props.x : 0;
@@ -352,13 +351,6 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         }
         const { dragMix, resizeMix } = this.mixin();
 
-        /**主要是为了让用户定义自己的className去修改css */
-        // const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
-        resizeMix;
-        canResize;
-        className;
-
-
         const provided = {
             style: {
                 ...style,
@@ -374,21 +366,3 @@ export class Dragger extends React.Component<DraggerProps, {}> {
     }
 }
 
-
-// return (
-//     <div className={`${fixedClassName}WrapDragger`}
-//         ref={'dragger'}
-//     >
-//         {this.props.children(provided)}
-//         {canResize !== false ?
-//             <span
-//                 {...resizeMix}
-//                 style={{
-//                     position: 'absolute',
-//                     width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
-//                     borderRight: '2px solid rgba(15,15,15,0.2)',
-//                     borderBottom: '2px solid rgba(15,15,15,0.2)'
-//                 }}
-//             /> : null}
-//     </div>
-// )

src/lib/gridItem.tsx

@@ -139,7 +139,11 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
             this.props.GridY !== props.GridY ||
             this.props.isUserMove !== props.isUserMove ||
             this.props.w !== props.w ||
-            this.props.h !== props.h
+            this.props.h !== props.h ||
+            this.props.containerWidth !== props.containerWidth ||
+            this.props.col !== props.col ||
+            this.props.rowHeight !== this.props.rowHeight
+
     }
 
     /**宽和高计算成为px */
@@ -205,9 +209,10 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
         this.props.onResizeEnd && this.props.onResizeEnd({ GridX, GridY, w, h, UniqueKey: UniqueKey + '', event })
     }
     render() {
-        const { w, h, style, bounds, GridX, GridY, handle, canDrag, canResize } = this.props
-        const { x, y } = this.calGridItemPosition(GridX, GridY)
+        const { w, h, style, bounds, GridX, GridY, handle, canDrag, canResize } = this.props;
+        const { x, y } = this.calGridItemPosition(GridX, GridY);
         const { wPx, hPx } = this.calWHtoPx(w, h);
+       
         return (
             <Dragger
                 style={{

src/lib/util/collison.ts

@@ -1,4 +1,4 @@
-import { DragactLayoutItem } from "../dragact";
+import { DragactLayoutItem } from "../dragact-type";
 import { GridItemEvent } from "../gridItem";
 
 export const collision = (a: DragactLayoutItem, b: DragactLayoutItem) => {

src/lib/util/compact.ts

@@ -1,6 +1,6 @@
 import { sortLayout } from "./sort";
 import { getFirstCollison } from "./collison";
-import { DragactLayoutItem, mapLayout } from "../dragact";
+import { DragactLayoutItem, mapLayout } from "../dragact-type";
 import { GridItemEvent } from "../GridItem";
 
 /**

src/lib/util/correction.ts

@@ -1,5 +1,5 @@
 import { collision, layoutCheck } from "./collison";
-import { DragactLayoutItem } from "../dragact";
+import { DragactLayoutItem } from "../dragact-type";
 import { GridItemEvent } from "../gridItem";
 
 

src/lib/util/initiate.ts

@@ -1,4 +1,4 @@
-import { DragactLayoutItem, mapLayout } from "../dragact";
+import { DragactLayoutItem, mapLayout } from "../dragact-type";
 import { GridItemEvent } from "../GridItem";
 
 /**

src/lib/util/sort.ts

@@ -1,4 +1,4 @@
-import { DragactLayoutItem } from "../dragact";
+import { DragactLayoutItem } from "../dragact-type";
 
 
 export function quickSort(a: number[]): any {

src/mobileLayout/index.tsx

@@ -1,5 +1,6 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem } from '../../src/lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { DragactLayoutItem } from '../../src/lib/dragact-type'
 import { Words } from './largedata'
 import './index.css';