|
|
@@ -42,6 +42,145 @@ var Dragger = /** @class */ (function (_super) {
|
|
|
lastW: 0,
|
|
|
lastH: 0
|
|
|
};
|
|
|
+ _this.move = function (event) {
|
|
|
+ var _a = _this.state, lastX = _a.lastX, lastY = _a.lastY;
|
|
|
+ /* event.client - this.state.origin 表示的是移动的距离,
|
|
|
+ * elX表示的是原来已经有的位移
|
|
|
+ */
|
|
|
+ var deltaX, deltaY;
|
|
|
+ if (event.type.indexOf('mouse') >= 0) {
|
|
|
+ deltaX = event.clientX - _this.state.originX + lastX;
|
|
|
+ deltaY = event.clientY - _this.state.originY + lastY;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ deltaX = event.touches[0].clientX - _this.state.originX + lastX;
|
|
|
+ deltaY = event.touches[0].clientY - _this.state.originY + lastY;
|
|
|
+ }
|
|
|
+ var bounds = _this.props.bounds;
|
|
|
+ if (bounds) {
|
|
|
+ /**
|
|
|
+ * 如果用户指定一个边界，那么在这里处理
|
|
|
+ */
|
|
|
+ var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
|
|
|
+ /**
|
|
|
+ * 网格式移动范围设定，永远移动 n 的倍数
|
|
|
+ * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
|
|
|
+ */
|
|
|
+ var grid = _this.props.grid;
|
|
|
+ if (Array.isArray(grid) && grid.length === 2) {
|
|
|
+ deltaX = Math.round(deltaX / grid[0]) * grid[0];
|
|
|
+ deltaY = Math.round(deltaY / grid[1]) * grid[1];
|
|
|
+ }
|
|
|
+ if (_this.props.bounds === 'parent') {
|
|
|
+ NewBounds = {
|
|
|
+ left: int(_this.parent.style.paddingLeft) + int(_this.self.style.marginLeft) - _this.self.offsetLeft,
|
|
|
+ top: int(_this.parent.style.paddingTop) + int(_this.self.style.marginTop) - _this.self.offsetTop,
|
|
|
+ right: innerWidth(_this.parent) - outerWidth(_this.self) - _this.self.offsetLeft +
|
|
|
+ int(_this.parent.style.paddingRight) - int(_this.self.style.marginRight),
|
|
|
+ bottom: innerHeight(_this.parent) - outerHeight(_this.self) - _this.self.offsetTop +
|
|
|
+ int(_this.parent.style.paddingBottom) - int(_this.self.style.marginBottom)
|
|
|
+ };
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 保证不超出右边界和底部
|
|
|
+ * keep element right and bot can not cross the bounds
|
|
|
+ */
|
|
|
+ if (NewBounds !== 'parent')
|
|
|
+ deltaX = Math.min(deltaX, NewBounds.right);
|
|
|
+ if (NewBounds !== 'parent')
|
|
|
+ deltaY = Math.min(deltaY, NewBounds.bottom);
|
|
|
+ /**
|
|
|
+ * 保证不超出左边和上边
|
|
|
+ * keep element left and top can not cross the bounds
|
|
|
+ */
|
|
|
+ if (NewBounds !== 'parent')
|
|
|
+ deltaX = Math.max(deltaX, NewBounds.left);
|
|
|
+ if (NewBounds !== 'parent')
|
|
|
+ deltaY = Math.max(deltaY, NewBounds.top);
|
|
|
+ }
|
|
|
+ /**如果设置了x,y限制 */
|
|
|
+ deltaX = _this.props.allowX ? deltaX : 0;
|
|
|
+ deltaY = _this.props.allowY ? deltaY : 0;
|
|
|
+ /**移动时回调，用于外部控制 */
|
|
|
+ if (_this.props.onMove)
|
|
|
+ _this.props.onMove(event, deltaX, deltaY);
|
|
|
+ _this.setState({
|
|
|
+ x: deltaX,
|
|
|
+ y: deltaY
|
|
|
+ });
|
|
|
+ };
|
|
|
+ _this.onDragStart = function (event) {
|
|
|
+ /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
|
|
|
+ doc.body.style.userSelect = 'none';
|
|
|
+ if (_this.props.handle) {
|
|
|
+ if (event.target.id !== 'dragact-handle')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 把监听事件的回掉函数，绑定在document上
|
|
|
+ * 当设置边界的时候，用户鼠标会离开元素的范围
|
|
|
+ * 绑定在document上可以使得其依旧能够监听
|
|
|
+ * 如果绑定在元素上，则鼠标离开元素，就不会再被监听了
|
|
|
+ */
|
|
|
+ if (event.type.indexOf('mouse') >= 0) {
|
|
|
+ doc.addEventListener('mousemove', _this.move);
|
|
|
+ doc.addEventListener('mouseup', _this.onDragEnd);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ doc.addEventListener('touchmove', _this.move);
|
|
|
+ doc.addEventListener('touchend', _this.onDragEnd);
|
|
|
+ }
|
|
|
+ if (_this.props.bounds === 'parent' &&
|
|
|
+ /**为了让 这段代码不会重复执行 */
|
|
|
+ (typeof _this.parent === 'undefined' || _this.parent === null)) {
|
|
|
+ /**
|
|
|
+ * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
|
|
|
+ * what we do here is
|
|
|
+ * making sure that we still can retrieve our parent when user's mouse left this node.
|
|
|
+ */
|
|
|
+ _this.parent = event.currentTarget.offsetParent; //todo
|
|
|
+ /**
|
|
|
+ * 我们自己
|
|
|
+ * ourself
|
|
|
+ */
|
|
|
+ _this.self = event.currentTarget;
|
|
|
+ }
|
|
|
+ _this.props.onDragStart && _this.props.onDragStart(_this.state.x, _this.state.y);
|
|
|
+ var originX, originY;
|
|
|
+ if (event.type.indexOf('mouse') >= 0) {
|
|
|
+ originX = event.clientX;
|
|
|
+ originY = event.clientY;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ originX = event.touches[0].clientX;
|
|
|
+ originY = event.touches[0].clientY;
|
|
|
+ }
|
|
|
+ _this.setState({
|
|
|
+ originX: originX,
|
|
|
+ originY: originY,
|
|
|
+ lastX: _this.state.x,
|
|
|
+ lastY: _this.state.y,
|
|
|
+ zIndex: 10
|
|
|
+ });
|
|
|
+ };
|
|
|
+ _this.onDragEnd = function (event) {
|
|
|
+ /** 取消用户选择限制，用户可以重新选择 */
|
|
|
+ doc.body.style.userSelect = '';
|
|
|
+ _this.parent = null;
|
|
|
+ _this.self = null;
|
|
|
+ if (event.type.indexOf('mouse') >= 0) {
|
|
|
+ doc.removeEventListener('mousemove', _this.move);
|
|
|
+ doc.removeEventListener('mouseup', _this.onDragEnd);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ doc.removeEventListener('touchmove', _this.move);
|
|
|
+ doc.removeEventListener('touchend', _this.onDragEnd);
|
|
|
+ }
|
|
|
+ _this.setState({
|
|
|
+ zIndex: 1
|
|
|
+ });
|
|
|
+ _this.props.onDragEnd && _this.props.onDragEnd(event, _this.state.x, _this.state.y);
|
|
|
+ };
|
|
|
_this.onResizeStart = function (event) {
|
|
|
/** 保证用户在移动元素的时候不会选择到元素内部的东西 */
|
|
|
doc.body.style.userSelect = 'none';
|
|
|
@@ -86,150 +225,33 @@ var Dragger = /** @class */ (function (_super) {
|
|
|
doc.removeEventListener('mouseup', _this.onResizeEnd);
|
|
|
_this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
|
|
|
};
|
|
|
- _this.move = _this.move.bind(_this);
|
|
|
- _this.onDragEnd = _this.onDragEnd.bind(_this);
|
|
|
+ _this.mixin = function () {
|
|
|
+ var dragMix = {};
|
|
|
+ if (_this.props.canDrag === void 666 || _this.props.canDrag === true) {
|
|
|
+ dragMix = {
|
|
|
+ onMouseDown: _this.onDragStart,
|
|
|
+ onTouchStart: _this.onDragStart,
|
|
|
+ onTouchEnd: _this.onDragEnd,
|
|
|
+ onMouseUp: _this.onDragEnd
|
|
|
+ };
|
|
|
+ }
|
|
|
+ var resizeMix = {};
|
|
|
+ if (_this.props.canResize === void 666 || _this.props.canDrag === true) {
|
|
|
+ resizeMix = {
|
|
|
+ onMouseDown: _this.onResizeStart,
|
|
|
+ onMouseUp: _this.onResizeEnd
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ dragMix: dragMix, resizeMix: resizeMix
|
|
|
+ };
|
|
|
+ };
|
|
|
+ // this.move = this.move.bind(this)
|
|
|
+ // this.onDragEnd = this.onDragEnd.bind(this)
|
|
|
_this.parent = null;
|
|
|
_this.self = null;
|
|
|
return _this;
|
|
|
}
|
|
|
- Dragger.prototype.move = function (event) {
|
|
|
- var _a = this.state, lastX = _a.lastX, lastY = _a.lastY;
|
|
|
- /* event.client - this.state.origin 表示的是移动的距离,
|
|
|
- * elX表示的是原来已经有的位移
|
|
|
- */
|
|
|
- var deltaX, deltaY;
|
|
|
- if (event.type.indexOf('mouse') >= 0) {
|
|
|
- deltaX = event.clientX - this.state.originX + lastX;
|
|
|
- deltaY = event.clientY - this.state.originY + lastY;
|
|
|
- }
|
|
|
- else {
|
|
|
- deltaX = event.touches[0].clientX - this.state.originX + lastX;
|
|
|
- deltaY = event.touches[0].clientY - this.state.originY + lastY;
|
|
|
- }
|
|
|
- var bounds = this.props.bounds;
|
|
|
- if (bounds) {
|
|
|
- /**
|
|
|
- * 如果用户指定一个边界，那么在这里处理
|
|
|
- */
|
|
|
- var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
|
|
|
- /**
|
|
|
- * 网格式移动范围设定，永远移动 n 的倍数
|
|
|
- * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
|
|
|
- */
|
|
|
- var grid = this.props.grid;
|
|
|
- if (Array.isArray(grid) && grid.length === 2) {
|
|
|
- deltaX = Math.round(deltaX / grid[0]) * grid[0];
|
|
|
- deltaY = Math.round(deltaY / grid[1]) * grid[1];
|
|
|
- }
|
|
|
- if (this.props.bounds === 'parent') {
|
|
|
- NewBounds = {
|
|
|
- left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
|
|
|
- top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
|
|
|
- right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft +
|
|
|
- int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
|
|
|
- bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop +
|
|
|
- int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
|
|
|
- };
|
|
|
- }
|
|
|
- /**
|
|
|
- * 保证不超出右边界和底部
|
|
|
- * keep element right and bot can not cross the bounds
|
|
|
- */
|
|
|
- if (NewBounds !== 'parent')
|
|
|
- deltaX = Math.min(deltaX, NewBounds.right);
|
|
|
- if (NewBounds !== 'parent')
|
|
|
- deltaY = Math.min(deltaY, NewBounds.bottom);
|
|
|
- /**
|
|
|
- * 保证不超出左边和上边
|
|
|
- * keep element left and top can not cross the bounds
|
|
|
- */
|
|
|
- if (NewBounds !== 'parent')
|
|
|
- deltaX = Math.max(deltaX, NewBounds.left);
|
|
|
- if (NewBounds !== 'parent')
|
|
|
- deltaY = Math.max(deltaY, NewBounds.top);
|
|
|
- }
|
|
|
- /**如果设置了x,y限制 */
|
|
|
- deltaX = this.props.allowX ? deltaX : 0;
|
|
|
- deltaY = this.props.allowY ? deltaY : 0;
|
|
|
- /**移动时回调，用于外部控制 */
|
|
|
- if (this.props.onMove)
|
|
|
- this.props.onMove(event, deltaX, deltaY);
|
|
|
- this.setState({
|
|
|
- x: deltaX,
|
|
|
- y: deltaY
|
|
|
- });
|
|
|
- };
|
|
|
- Dragger.prototype.onDragStart = function (event) {
|
|
|
- /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
|
|
|
- doc.body.style.userSelect = 'none';
|
|
|
- // if (this.props.hasDraggerHandle) {
|
|
|
- // if (event.target.className !== 'handle') return
|
|
|
- // }
|
|
|
- /**
|
|
|
- * 把监听事件的回掉函数，绑定在document上
|
|
|
- * 当设置边界的时候，用户鼠标会离开元素的范围
|
|
|
- * 绑定在document上可以使得其依旧能够监听
|
|
|
- * 如果绑定在元素上，则鼠标离开元素，就不会再被监听了
|
|
|
- */
|
|
|
- if (event.type.indexOf('mouse') >= 0) {
|
|
|
- doc.addEventListener('mousemove', this.move);
|
|
|
- doc.addEventListener('mouseup', this.onDragEnd);
|
|
|
- }
|
|
|
- else {
|
|
|
- doc.addEventListener('touchmove', this.move);
|
|
|
- doc.addEventListener('touchend', this.onDragEnd);
|
|
|
- }
|
|
|
- if (this.props.bounds === 'parent' &&
|
|
|
- /**为了让 这段代码不会重复执行 */
|
|
|
- (typeof this.parent === 'undefined' || this.parent === null)) {
|
|
|
- /**
|
|
|
- * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
|
|
|
- * what we do here is
|
|
|
- * making sure that we still can retrieve our parent when user's mouse left this node.
|
|
|
- */
|
|
|
- this.parent = event.currentTarget.offsetParent; //todo
|
|
|
- /**
|
|
|
- * 我们自己
|
|
|
- * ourself
|
|
|
- */
|
|
|
- this.self = event.currentTarget;
|
|
|
- }
|
|
|
- this.props.onDragStart && this.props.onDragStart(this.state.x, this.state.y);
|
|
|
- var originX, originY;
|
|
|
- if (event.type.indexOf('mouse') >= 0) {
|
|
|
- originX = event.clientX;
|
|
|
- originY = event.clientY;
|
|
|
- }
|
|
|
- else {
|
|
|
- originX = event.touches[0].clientX;
|
|
|
- originY = event.touches[0].clientY;
|
|
|
- }
|
|
|
- this.setState({
|
|
|
- originX: originX,
|
|
|
- originY: originY,
|
|
|
- lastX: this.state.x,
|
|
|
- lastY: this.state.y,
|
|
|
- zIndex: 10
|
|
|
- });
|
|
|
- };
|
|
|
- Dragger.prototype.onDragEnd = function (event) {
|
|
|
- /** 取消用户选择限制，用户可以重新选择 */
|
|
|
- doc.body.style.userSelect = '';
|
|
|
- this.parent = null;
|
|
|
- this.self = null;
|
|
|
- if (event.type.indexOf('mouse') >= 0) {
|
|
|
- doc.removeEventListener('mousemove', this.move);
|
|
|
- doc.removeEventListener('mouseup', this.onDragEnd);
|
|
|
- }
|
|
|
- else {
|
|
|
- doc.removeEventListener('touchmove', this.move);
|
|
|
- doc.removeEventListener('touchend', this.onDragEnd);
|
|
|
- }
|
|
|
- this.setState({
|
|
|
- zIndex: 1
|
|
|
- });
|
|
|
- this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y);
|
|
|
- };
|
|
|
Dragger.prototype.componentDidMount = function () {
|
|
|
/**
|
|
|
* 这个函数只会调用一次
|
|
|
@@ -266,7 +288,7 @@ var Dragger = /** @class */ (function (_super) {
|
|
|
};
|
|
|
Dragger.prototype.render = function () {
|
|
|
var _a = this.state, x = _a.x, y = _a.y, w = _a.w, h = _a.h;
|
|
|
- var _b = this.props, style = _b.style, className = _b.className;
|
|
|
+ var _b = this.props, style = _b.style, className = _b.className, canResize = _b.canResize;
|
|
|
if (!this.props.isUserMove) {
|
|
|
/**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
|
|
|
x = this.props.x ? this.props.x : 0;
|
|
|
@@ -274,26 +296,25 @@ var Dragger = /** @class */ (function (_super) {
|
|
|
if (style) {
|
|
|
w = style.width ? style.width : w;
|
|
|
h = style.height ? style.height : h;
|
|
|
- console.log(style);
|
|
|
}
|
|
|
}
|
|
|
if (style) {
|
|
|
+ //使得初始化的时候，不会有从0-1缩放动画
|
|
|
w = w === 0 ? style.width : w;
|
|
|
h = h === 0 ? style.height : h;
|
|
|
}
|
|
|
+ var _c = this.mixin(), dragMix = _c.dragMix, resizeMix = _c.resizeMix;
|
|
|
/**主要是为了让用户定义自己的className去修改css */
|
|
|
var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
|
|
|
- return (React.createElement("div", { className: fixedClassName + "WrapDragger", style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }), onMouseDown: this.onDragStart.bind(this), onTouchStart: this.onDragStart.bind(this), onTouchEnd: this.onDragEnd.bind(this), onMouseUp: this.onDragEnd.bind(this) },
|
|
|
+ return (React.createElement("div", __assign({ className: fixedClassName + "WrapDragger", style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }) }, dragMix),
|
|
|
React.Children.only(this.props.children),
|
|
|
- React.createElement("span", { onMouseDown: this.onResizeStart,
|
|
|
- // onTouchStart={this.onDragStart.bind(this)}
|
|
|
- // onTouchEnd={this.onDragEnd.bind(this)}
|
|
|
- onMouseUp: this.onResizeEnd, 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)'
|
|
|
- } })));
|
|
|
+ canResize !== false ?
|
|
|
+ React.createElement("span", __assign({}, 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));
|
|
|
};
|
|
|
/**
|
|
|
* 初始变量设置
|
Z F