Dragact/dist/lib/dragactList/dragactList.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
import * as React from "react";
// import { compactLayout } from '../util/compact';
// import { getMaxContainerHeight } from '../util/sort';
// import { layoutCheck } from '../util/collison';
import { stringJoin } from '../utils';
// import { syncLayout } from '../util/initiate';
import './index.css';
import { Dragger } from "../dragger/index";
// interface DragactState {
//     GridXMoving: number
//     GridYMoving: number
//     wMoving: number
//     hMoving: number
//     placeholderShow: Boolean
//     placeholderMoving: Boolean
//     layout: any;
//     containerHeight: number
//     dragType: 'drag' | 'resize'
//     mapLayout: mapLayout | undefined
//     col: number
// }
var Column = /** @class */ (function (_super) {
    __extends(Column, _super);
    function Column() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Column.prototype.render = function () {
        return this.props.children;
    };
    return Column;
}(React.Component));
export { Column };
var checkInContainer = function (GridX, GridY) {
    /**防止元素出container */
    // if (GridY < 0) GridY = 0//上边界
    return { GridX: GridX, GridY: GridY };
};
var ListCell = /** @class */ (function (_super) {
    __extends(ListCell, _super);
    function ListCell() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onDragStart = function (x, y) {
            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
            _this.props.onDragStart({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
        };
        _this.onDrag = function (event, x, y) {
            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
            _this.props.onDrag({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
        };
        _this.onDragEnd = function (event, x, y) {
            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
            console.log(_this.props);
            _this.props.onDragEnd({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
        };
        return _this;
    }
    ListCell.prototype.calGridXY = function (x, y) {
        var _a = this.props, margin = _a.margin, width = _a.width, col = _a.col, rowHeight = _a.rowHeight;
        var containerWidth = width * col + margin[0];
        /**坐标转换成格子的时候，无须计算margin */
        var GridX = Math.round(x / containerWidth * col);
        var GridY = Math.round(y / (rowHeight + (margin ? margin[1] : 0)));
        // /**防止元素出container */
        return checkInContainer(GridX, GridY);
    };
    ListCell.prototype.render = function () {
        var _a = this.props, currentListIndex = _a.currentListIndex, y = _a.y, isUserMove = _a.isUserMove, width = _a.width, style = _a.style, rowHeight = _a.rowHeight, margin = _a.margin;
        return (React.createElement(Dragger, { x: currentListIndex * width, y: Math.round(y * rowHeight + margin[1] * (y + 1)), style: __assign({}, style, { width: width, transition: this.props.isUserMove ? '' : 'all .2s' }), isUserMove: isUserMove, onDragStart: this.onDragStart, onMove: this.onDrag, canResize: false, onDragEnd: this.onDragEnd }, this.props.children));
    };
    return ListCell;
}(React.Component));
export { ListCell };
export var collision = function (a, b) {
    if (a === b) {
        return 1;
    }
    if (a + 1 <= b)
        return -1;
    if (a >= b + 1)
        return -1;
    return 2;
};
var swapList = function (list, movingItem, firstKey) {
    var moving = [];
    var newList = list.map(function (oldItem) {
        if (oldItem.key !== movingItem.key) {
            var num = collision(oldItem.y, movingItem.y);
            if (num > 0) {
                // console.log(num)
                var offset = movingItem.y - 1;
                // if (movingItem.y > oldItem.y && movingItem.y < oldItem.y + 1) {
                //     /**
                //      * 元素向上移动时，元素的上面空间不足,则不移动这个元素
                //      * 当元素移动到GridY>所要向上交换的元素时，就不会进入这里，直接交换元素
                //      */
                //     console.log('你来了')
                //     offset = oldItem.y
                // }
                // }
                moving.push(__assign({}, oldItem, { y: offset, isUserMove: false }));
                return __assign({}, oldItem, { y: offset, isUserMove: false });
            }
            return oldItem;
        }
        else if (movingItem.key === firstKey) {
            /**永远保持用户移动的块是 isUserMove === true */
            return __assign({}, oldItem, movingItem);
        }
        return oldItem;
    });
    for (var i in moving) {
        newList = swapList(newList, moving[i], firstKey);
    }
    return newList;
};
/**获取layout中，item第一个碰撞到的物体 */
export var getFirstCollison = function (layout, item) {
    for (var i = 0, length_1 = layout.length; i < length_1; i++) {
        if (collision(layout[i].y, item.y) > 0) {
            return layout[i];
        }
    }
    return null;
};
var compactCell = function (partialList, cell) {
    if (partialList.length === 0) {
        return __assign({}, cell, { y: 0 });
    }
    var newCell = __assign({}, cell);
    /**
     * 类似一个递归调用
     */
    while (true) {
        var FirstCollison = getFirstCollison(partialList, newCell);
        if (FirstCollison) {
            /**第一次发生碰撞时，就可以返回了 */
            return __assign({}, newCell, { y: FirstCollison.y + 1 });
        }
        newCell.y--;
        if (newCell.y < 0)
            return __assign({}, newCell, { y: 0 }); /**碰到边界的时候，返回 */
    }
};
export var compactList = function (list, movingItem) {
    var sort = list.sort(function (a, b) {
        if (a.y === b.y) {
            if (b.isUserMove)
                return 1;
        }
        if (a.y > b.y)
            return 1;
        return 0;
    });
    var needCompact = Array(list.length);
    var after = [];
    var mapList = {};
    for (var i in sort) {
        var finished = compactCell(after, sort[i]);
        if (movingItem) {
            if (movingItem.key === finished.key) {
                // finished.y = movingItem.y;
                finished.isUserMove = true;
            }
            else
                finished.isUserMove = false;
        }
        else
            finished.isUserMove = false;
        after.push(finished);
        needCompact[i] = finished;
        mapList[finished.key] = finished;
    }
    return {
        compacted: needCompact,
        maped: mapList
    };
};
var DragactList = /** @class */ (function (_super) {
    __extends(DragactList, _super);
    function DragactList(props) {
        var _this = _super.call(this, props) || this;
        _this.onDragStart = function (e) {
            var key = e.key, x = e.x;
            for (var idx in _this.state.layout[x]) {
                if (_this.state.layout[x][idx].key === key) {
                    _this.state.layout[x][idx].isUserMove = true;
                    break;
                }
            }
            _this.setState({
                layout: _this.state.layout,
                lastList: x
            });
        };
        _this.onDrag = function (e) {
            var key = e.key, x = e.x, y = e.y, currentListIndex = e.currentListIndex;
            if (!_this.state.layout[x])
                return; //如果超出列表，就返回
            if (x !== e.currentListIndex) {
                //移动到别的列表
                var i = _this.state.maped[x][key];
                if (!i) {
                    _this.state.layout[x].push({ y: y, isUserMove: false, key: key, content: 'placeholder', currentListIndex: currentListIndex });
                }
            }
            // if (x !== this.state.lastList && this.state.lastList !== e.currentListIndex) {
            //     const { lastList } = this.state;
            //     //跟上一个不一样的时候
            //     this.state.layout[lastList] = this.state.layout[lastList].filter((item: any) => {
            //         if (item.key !== key) {
            //             return item
            //         }
            //     })
            //     const compact = compactList(this.state.layout[lastList], undefined);
            //     this.state.layout[lastList] = compact.compacted;
            //     console.log(`上一次:${lastList}`, this.state.layout)
            //     delete this.state.maped[lastList][key]
            //     console.log(this.state.maped)
            // }
            console.log(e);
            var newList = swapList(_this.state.layout[x], { y: y, key: key }, key);
            var _a = compactList(newList, { y: y, key: key }), compacted = _a.compacted, maped = _a.maped;
            _this.state.layout[x] = compacted;
            _this.state.maped[x] = maped;
            _this.setState({
                layout: _this.state.layout.slice(),
                maped: _this.state.maped.slice(),
                lastList: x
            });
        };
        _this.onDragEnd = function (e) {
            var x = e.x, key = e.key, currentListIndex = e.currentListIndex;
            if (x !== currentListIndex) {
                //1.删除原来list中的数据
                _this.state.layout[currentListIndex] = _this.state.layout[currentListIndex].filter(function (item) {
                    if (item.key !== key) {
                        return item;
                    }
                });
                //2.删除原来map中的数据
                delete _this.state.maped[currentListIndex][key];
                var compact = compactList(_this.state.layout[currentListIndex], undefined);
                _this.state.layout[currentListIndex] = compact.compacted;
                _this.state.maped[currentListIndex] = compact.maped;
                _this.state.layout[x] = _this.state.layout[x].map(function (item) {
                    if (key === item.key) {
                        return __assign({}, item, { currentListIndex: x });
                    }
                    return item;
                });
            }
            var _a = compactList(_this.state.layout[x], undefined), compacted = _a.compacted, maped = _a.maped;
            _this.state.layout[x] = compacted;
            _this.state.maped[x] = maped;
            console.log(_this.state.layout);
            _this.setState({
                layout: _this.state.layout.slice(),
                maped: _this.state.maped.slice()
            });
            // if (this.state.currentList !== x) {
            //     this.state.layout[x].push({ y, key: "10203", isUserMove: false })
            //     const compacted = compactList(this.state.layout[x], undefined);
            //     this.state.layout[x] = compacted;
            //     this.setState({
            //         layout: [...this.state.layout]
            //     })
            // } else {
            // }
        };
        _this.renderList = function () {
            // console.log('set', this.props.layout)
            return _this.props.layout.map(function (child, index) {
                return React.createElement("div", { className: 'list-oneof', style: {
                        background: 'red',
                        height: 60 * _this.state.layout[index].length,
                        width: 400
                    }, key: index }, _this.renderColumn(child, index));
            });
        };
        _this.renderColumn = function (child, index) {
            // const column = this.state.layout[index];
            var _a = _this.props, width = _a.width, margin = _a.margin, rowHeight = _a.rowHeight;
            return child.map(function (c, idx) {
                var key = c.key;
                var renderItem;
                // renderItem = this.state.maped[index][key];
                for (var i in _this.state.maped) {
                    renderItem = _this.state.maped[i][key];
                    if (renderItem)
                        break;
                }
                // console.log(renderItem)
                // if (renderItem.key === '1') console.log(renderItem.listPosition)
                return React.createElement(ListCell, { margin: margin, rowHeight: rowHeight, width: width, col: _this.state.layout.length, currentListIndex: renderItem.currentListIndex, y: renderItem ? renderItem.y : c.y, style: { position: 'absolute' }, key: idx, UniqueKey: key, isUserMove: renderItem ? renderItem.isUserMove : false, onDragStart: _this.onDragStart, onDrag: _this.onDrag, onDragEnd: _this.onDragEnd }, _this.props.children(c, idx));
            });
        };
        // const layout = getDataSet(props.children);
        var array = [];
        var layout = props.layout.map(function (child, idx) {
            return child.map(function (el, index) {
                if (!array[idx])
                    array[idx] = {};
                array[idx][el.key] = __assign({}, el, { key: el.key, isUserMove: false, currentListIndex: idx });
                return __assign({}, el, { key: el.key, isUserMove: false, currentListIndex: idx });
            });
        });
        console.log(array);
        _this.state = {
            GridXMoving: 0,
            GridYMoving: 0,
            wMoving: 0,
            hMoving: 0,
            placeholderShow: false,
            placeholderMoving: false,
            layout: layout,
            containerHeight: 500,
            dragType: 'drag',
            mapLayout: undefined,
            col: 3,
            currentList: 0,
            maped: array,
            lastList: void 666
        };
        return _this;
    }
    DragactList.prototype.componentWillReceiveProps = function (nextProps) {
        // if (this.props.children.length > nextProps.children.length) { //remove
        //     const mapLayoutCopy = { ...this.state.mapLayout };
        //     nextProps.children.forEach((child: any) => {
        //         if ((mapLayoutCopy as any)[child.key] !== void 666) delete (mapLayoutCopy as any)[child.key];
        //     })
        //     for (const key in mapLayoutCopy) {
        //         const newLayout = this.state.layout.filter((child) => {
        //             if (child.key !== key) return child
        //         })
        //         const { compacted, mapLayout } = compactLayout(newLayout, undefined);
        //         this.setState({
        //             containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
        //             layout: compacted,
        //             mapLayout
        //         })
        //     }
        // }
        // if (this.props.children.length < nextProps.children.length) { //add
        //     var item;
        //     for (const idx in nextProps.children) {
        //         const i = nextProps.children[idx];
        //         if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
        //             item = i;
        //             break;
        //         }
        //     }
        //     if (item !== void 666) {
        //         const dataSet = { ...item.props['data-set'], isUserMove: false, key: item.key };
        //         var newLayout = [...this.state.layout, dataSet]
        //         newLayout = correctLayout(newLayout, this.state.col)
        //         const { compacted, mapLayout } = compactLayout(newLayout, undefined);
        //         console.log(mapLayout)
        //         // console.log(layout)
        //         this.setState({
        //             containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
        //             layout: compacted,
        //             mapLayout
        //         })
        //     }
        // }
    };
    DragactList.prototype.componentDidMount = function () {
        // setTimeout(() => {
        //     const swp = [...this.state.layout[0]]
        //     this.state.layout[0] = this.state.layout[1];
        //     this.state.layout[1] = swp;
        //     const swpMap = { ...this.state.maped[0] }
        //     this.state.maped[0] = this.state.maped[1];
        //     this.state.maped[1] = swpMap;
        //     this.setState({
        //         layout: this.state.layout,
        //         maped: this.state.maped
        //     })
        //     // console.log(this.state.layout)
        // }, 1000);
    };
    DragactList.prototype.render = function () {
        var _a = this.props, width = _a.width, className = _a.className;
        var numberOfCol = this.state.layout.length;
        return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: { left: 100, width: width * numberOfCol, height: '', zIndex: 1, display: 'flex' } }, this.renderList()));
    };
    return DragactList;
}(React.Component));
export { DragactList };