@ohkit/draggable-box 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/index.tsx +7 -1
- package/src/style.scss +9 -1
- package/LICENSE.md +0 -5
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.ohkit-draggable-box__container{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ohkit-draggable-box__moving{cursor:move!important}.ohkit-draggable-box__drag-area{opacity:.7;transition:opacity .2s ease-in-out}
|
|
1
|
+
.ohkit-draggable-box__container{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ohkit-draggable-box__moving{cursor:move!important}.ohkit-draggable-box__moving-x{cursor:ew-resize!important}.ohkit-draggable-box__moving-y{cursor:ns-resize!important}.ohkit-draggable-box__drag-area{opacity:.7;transition:opacity .2s ease-in-out}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,gCAEE,WAAY,CADZ,wBAAiB,CAAjB,qBAAiB,CAAjB,gBAEF,CACA,6BACE,qBACF,CACA,gCAEE,UAAY,CADZ,kCAEF","file":"index.css","sourcesContent":[".ohkit-draggable-box__container {\n user-select: none;\n cursor: grab;\n}\n.ohkit-draggable-box__moving {\n cursor: move !important;\n}\n.ohkit-draggable-box__drag-area {\n transition: opacity 0.2s ease-in-out;\n opacity: 0.7;\n}"]}
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,gCAEE,WAAY,CADZ,wBAAiB,CAAjB,qBAAiB,CAAjB,gBAEF,CACA,6BACE,qBACF,CACA,+BACE,0BACF,CACA,+BACE,0BACF,CACA,gCAEE,UAAY,CADZ,kCAEF","file":"index.css","sourcesContent":[".ohkit-draggable-box__container {\n user-select: none;\n cursor: grab;\n}\n.ohkit-draggable-box__moving {\n cursor: move !important;\n}\n.ohkit-draggable-box__moving-x {\n cursor: ew-resize !important;\n}\n.ohkit-draggable-box__moving-y {\n cursor: ns-resize !important;\n}\n.ohkit-draggable-box__drag-area {\n transition: opacity 0.2s ease-in-out;\n opacity: 0.7;\n}"]}
|
package/dist/index.es.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import{prefixClassname as e,classNames as r}from"@ohkit/prefix-classname";import{findParent as o,addEventListener as i,addClass as a}from"@ohkit/dom-helper";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},s.apply(null,arguments)}function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}function d(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}function p(t,e){var r=window.getComputedStyle(t),o=r.getPropertyValue("position"),i=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return e&&"static"!==o||"none"!==i||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function l(t){return t?o(t,function(t){return p(t,!1)},{excludeOwn:!0}):document.documentElement}function h(t){return t?o(t,function(t){return p(t,!0)},{excludeOwn:!0}):document.body}function f(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect(),r=1e4;return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*r)/r:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*r)/r:1}}function c(t,e,r){return Math.min(Math.max(t,e),r)}function g(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)}var u=["top-left","top-right","bottom-left","bottom-right"],m=e("ohkit-draggable-box__"),v=/*#__PURE__*/function(e){function o(t){var r;(r=e.call(this,t)||this).prePositionMode=void 0,r.preDraggerRef=null,r.container=null,r.draggerRef=null,r.isDragging=!1,r.axisX=void 0,r.axisY=void 0,r.dX=0,r.dY=0,r.startTop=0,r.startLeft=0,r.startBottom=0,r.startRight=0,r.translateX=0,r.translateY=0,r.cachedScaleX=1,r.cachedScaleY=1,r.__moveDisposer=void 0,r.__clickDisposer=void 0,r.__bodyClassDisposer=void 0,r.__upDisposer=void 0,r.__resizeDisposer=void 0,r.__preventScrollDisposer=void 0,r.dragAreaRef=null,r.enableDrag=function(t){void 0===t&&(t=!1),r.reportStartPosition(),null==r.__moveDisposer||r.__moveDisposer(),r.__moveDisposer=i(t&&r.draggerRef?r.draggerRef:document,t?"touchmove":"mousemove",function(e){e.stopPropagation(),t&&e.preventDefault(),r.__clickDisposer||Math.sqrt(Math.pow(r.dX,2)+Math.pow(r.dY,2))>(r.props.showDragAreaOverMoveDistanse||5)&&(r.__clickDisposer=i(document,"click",function(t){t.stopPropagation()},!0),r.__bodyClassDisposer=a([document.body,r.draggerRef],m("moving"))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),!r.isDragging&&r.props.onDragStart&&r.props.onDragStart({top:r.startTop,left:r.startLeft,bottom:r.startBottom,right:r.startRight,diffX:0,diffY:0}),r.dragging(e)},{passive:!t}),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=i(document,"mouseup",function(){r.endDrag()},!0)},r.startDrag=function(t){2!==t.nativeEvent.button&&(r.axisX=t.nativeEvent.pageX,r.axisY=t.nativeEvent.pageY,r.props.disabled||r.enableDrag())},r.dragging=function(t){r.isDragging=!0;var e,o,i=r.props.lockAxis,a=r.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,p=a.maxY,l=r.cachedScaleY;if(t instanceof TouchEvent){var h=t.touches[0];if(!h)return;e=h.pageX,o=h.pageY}else e=t.pageX,o=t.pageY;r.dX=(e-(r.axisX||0))/r.cachedScaleX,r.dY=(o-(r.axisY||0))/l;var f=r.dX,c=r.dY;"x"===i?c=0:"y"===i&&(f=0);var g=r.startLeft+f,u=r.startTop+c;"y"!==i&&(g<s?f=s-r.startLeft:g>n&&(f=n-r.startLeft)),"x"!==i&&(u<d?c=d-r.startTop:u>p&&(c=p-r.startTop)),(r.translateX!==f||r.translateY!==c)&&(r.props.onDrag&&r.props.onDrag({top:r.startTop+c,left:r.startLeft+f,bottom:r.startBottom-c,right:r.startRight-f,diffX:f,diffY:c}),r.draggerRef&&(r.draggerRef.style.transform="translate("+f+"px, "+c+"px)"),r.translateX=f,r.translateY=c)},r.startTouchDrag=function(t){var e=t.touches[0];e&&(r.axisX=e.pageX,r.axisY=e.pageY,r.props.disabled||r.enableDrag(!0))},r.endDrag=function(){if(r.isDragging){var t=r.calcPosition();null==r.props.onDragEnd||r.props.onDragEnd(t),r.draggerRef&&(r.draggerRef.style.transform=""),r.props.showDragArea&&r.hideDragArea()}r.__moveDisposer&&(r.__moveDisposer(),r.__moveDisposer=void 0),r.__clickDisposer&&requestAnimationFrame(function(){r.__clickDisposer&&(r.__clickDisposer(),r.__clickDisposer=void 0)}),r.__upDisposer&&(r.__upDisposer(),r.__upDisposer=void 0),r.__bodyClassDisposer&&(r.__bodyClassDisposer(),r.__bodyClassDisposer=void 0),r.isDragging=!1},r.showDragArea=function(){if(r.props.showDragArea&&r.dragAreaRef){var t=r.props.lockAxis,e=r.dragPositionBoundaries,o=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=r.dragBoxSize;r.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",r.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height="2px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=r.startTop+n.height/2+"px"):"y"===t?(r.dragAreaRef.style.width="2px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=r.startLeft+n.width/2+"px",r.dragAreaRef.style.top=a+"px"):(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=a+"px"),r.dragAreaRef.style.display="block"}},r.hideDragArea=function(){r.dragAreaRef&&(r.dragAreaRef.style.display="none")},r.calcPosition=function(){var t=r.props.lockAxis,e=r.dragPositionBoundaries,o=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=r.getContainerRect(),d=n.height,p=n.width,l=r.startTop,h=r.startLeft;"y"!==t&&(h+=r.dX),"x"!==t&&(l+=r.dY);var f=c(l,a,s),g=c(h,o,i),u=d-f-r.dragBoxSize.height,m=p-g-r.dragBoxSize.width;f===r.state.top&&g===r.state.left&&r.state.bottom===u&&r.state.right===m||r.setState({top:f,left:g,bottom:u,right:m});var v={top:f,left:g,bottom:u,right:m,diffX:g-r.startLeft,diffY:f-r.startTop};return r.startTop=f,r.startLeft=g,r.startBottom=u,r.startRight=m,r.dX=r.dY=0,v},r.updateState=function(t){var e=void 0===t?{}:t;r.setState(r.formatState({offsetX:e.offsetX,offsetY:e.offsetY}),function(){r.reportStartPosition(),r.calcPosition()})};var o=r.props;return r.state=r.formatState({offsetX:o.offsetX,offsetY:o.offsetY}),r}var p,v;v=e,(p=o).prototype=Object.create(v.prototype),p.prototype.constructor=p,n(p,v);var x,_,D=o.prototype;return D.formatState=function(t){var e=void 0===t?{}:t,r=e.offsetX,i=void 0===r?o.defaultProps.offsetX:r,a=e.offsetY,s=void 0===a?o.defaultProps.offsetY:a,n=this.props.placement,d=(void 0===n?"bottom-right":n).split("-"),p=d[0],l=d[1];return{top:"top"===p?s:void 0,bottom:"bottom"===p?s:void 0,left:"left"===l?i:void 0,right:"right"===l?i:void 0}},D.getContainer=function(t){void 0===t&&(t=!0);var e=this.props.positionMode,r=void 0===e?"fixed":e;return this.container&&t&&this.prePositionMode===r&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=r,this.preDraggerRef=this.draggerRef,this.container="fixed"===r?l(this.draggerRef):h(this.draggerRef)),this.container},D.getContainerRect=function(){var t=this.getContainer(!1);if(!t)return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var e=t.getBoundingClientRect(),r=window.getComputedStyle(t),o=parseFloat(r.borderLeftWidth)||0,i=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-o-a-(t.offsetWidth-t.clientWidth-o-a),height:e.height/this.cachedScaleY-i-s-(t.offsetHeight-t.clientHeight-i-s),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:o,borderTopWidth:i}},D.reportStartPosition=function(){if(this.draggerRef){var t=f(this.getContainer()),e=t.scaleY;this.cachedScaleX=t.scaleX,this.cachedScaleY=e;var r=this.draggerRef.getBoundingClientRect(),o=r.top,i=r.left,a=this.getContainerRect();this.startTop=o/e-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=i/e-a.left+a.scrollLeft-a.borderLeftWidth,this.startBottom=a.height-this.startTop-this.dragBoxSize.height,this.startRight=a.width-this.startLeft-this.dragBoxSize.width}},D.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=i(window,"resize",function(){t.calcPosition()}),g()&&this.draggerRef&&(this.__preventScrollDisposer=i(this.draggerRef,"touchmove",function(t){t.preventDefault()}))},D.componentWillUnmount=function(){var t,e,r,o,i,a;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this),null==(a=this.__preventScrollDisposer)||a.call(this)},D.render=function(){var e=this,o=this.props,i=o.className,a=o.zIndex,n=o.children,d=o.showDragArea,p=o.positionMode,l=void 0===p?"fixed":p,h=this.startDrag,f=this.startTouchDrag,c=this.endDrag,g=s({zIndex:a},this.position,{position:l});/*#__PURE__*/return t.createElement(t.Fragment,null,d&&/*#__PURE__*/t.createElement("div",{className:m("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:l,backgroundColor:"rgba(173, 216, 230, 0.2)",border:"1px dashed var(--ohkit-color-primary, #1890ff)",pointerEvents:"none",zIndex:(a||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/t.createElement("div",{className:r(m("container"),i),style:g,ref:function(t){e.draggerRef=t},onMouseDownCapture:h,onMouseUpCapture:c,onTouchStartCapture:f,onTouchEndCapture:c},n))},x=o,(_=[{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=void 0===o?"bottom-right":o,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=i.split("-"),l=p[0],h=p[1],f={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},g=f.minX,u=f.maxX,m=f.minY,v=f.maxY;if(e){var x=e[0],_=e[1];"left"===h?(void 0!==x&&(g=Math.max(g,x)),void 0!==_&&(u=Math.min(u,_))):void 0!==x&&void 0!==_?(g=Math.max(g,n-_-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==_&&(g=Math.max(g,n-_-a.width))}if(r){var D=r[0],y=r[1];"top"===l?(void 0!==D&&(m=Math.max(m,D)),void 0!==y&&(v=Math.min(v,y))):void 0!==D&&void 0!==y?(m=Math.max(m,d-y-a.height),v=Math.min(v,d-D-a.height)):void 0!==D?v=Math.min(v,d-D-a.height):void 0!==y&&(m=Math.max(m,d-y-a.height))}return{minX:g=c(g,f.minX,f.maxX),maxX:u=c(u,g,f.maxX),minY:m=c(m,f.minY,f.maxY),maxY:v=c(v,m,f.maxY)}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&u.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,d(o.key),o)}}(x.prototype,_),Object.defineProperty(x,"prototype",{writable:!1}),x}(t.Component);v.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"};export{v as DraggableBox,m as c,c as clamp,h as findAbsolutePositionParent,l as findFixedPositionParent,f as getScaleRatio,p as isPositioningContextCreator,g as supportsTouchEvents};
|
|
1
|
+
import t from"react";import{prefixClassname as e,classNames as r}from"@ohkit/prefix-classname";import{findParent as o,addEventListener as i,addClass as a}from"@ohkit/dom-helper";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},s.apply(null,arguments)}function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}function d(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}function p(t,e){var r=window.getComputedStyle(t),o=r.getPropertyValue("position"),i=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return e&&"static"!==o||"none"!==i||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function l(t){return t?o(t,function(t){return p(t,!1)},{excludeOwn:!0}):document.documentElement}function h(t){return t?o(t,function(t){return p(t,!0)},{excludeOwn:!0}):document.body}function f(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect(),r=1e4;return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*r)/r:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*r)/r:1}}function g(t,e,r){return Math.min(Math.max(t,e),r)}function c(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)}var u=["top-left","top-right","bottom-left","bottom-right"],m=e("ohkit-draggable-box__"),v=/*#__PURE__*/function(e){function o(t){var r;(r=e.call(this,t)||this).prePositionMode=void 0,r.preDraggerRef=null,r.container=null,r.draggerRef=null,r.isDragging=!1,r.axisX=void 0,r.axisY=void 0,r.dX=0,r.dY=0,r.startTop=0,r.startLeft=0,r.startBottom=0,r.startRight=0,r.translateX=0,r.translateY=0,r.cachedScaleX=1,r.cachedScaleY=1,r.__moveDisposer=void 0,r.__clickDisposer=void 0,r.__bodyClassDisposer=void 0,r.__upDisposer=void 0,r.__resizeDisposer=void 0,r.__preventScrollDisposer=void 0,r.dragAreaRef=null,r.dragingClassMap={none:"moving",x:"moving-x",y:"moving-y"},r.enableDrag=function(t){void 0===t&&(t=!1),r.reportStartPosition(),null==r.__moveDisposer||r.__moveDisposer(),r.__moveDisposer=i(t&&r.draggerRef?r.draggerRef:document,t?"touchmove":"mousemove",function(e){e.stopPropagation(),t&&e.preventDefault(),r.__clickDisposer||Math.sqrt(Math.pow(r.dX,2)+Math.pow(r.dY,2))>(r.props.showDragAreaOverMoveDistanse||5)&&(r.__clickDisposer=i(document,"click",function(t){t.stopPropagation()},!0),r.__bodyClassDisposer=a([document.documentElement,r.draggerRef],m(r.dragingClassMap[r.props.lockAxis||"none"]))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),!r.isDragging&&r.props.onDragStart&&r.props.onDragStart({top:r.startTop,left:r.startLeft,bottom:r.startBottom,right:r.startRight,diffX:0,diffY:0}),r.dragging(e)},{passive:!t}),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=i(document,"mouseup",function(){r.endDrag()},!0)},r.startDrag=function(t){2!==t.nativeEvent.button&&(r.axisX=t.nativeEvent.pageX,r.axisY=t.nativeEvent.pageY,r.props.disabled||r.enableDrag())},r.dragging=function(t){r.isDragging=!0;var e,o,i=r.props.lockAxis,a=r.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,p=a.maxY,l=r.cachedScaleY;if(t instanceof TouchEvent){var h=t.touches[0];if(!h)return;e=h.pageX,o=h.pageY}else e=t.pageX,o=t.pageY;r.dX=(e-(r.axisX||0))/r.cachedScaleX,r.dY=(o-(r.axisY||0))/l;var f=r.dX,g=r.dY;"x"===i?g=0:"y"===i&&(f=0);var c=r.startLeft+f,u=r.startTop+g;"y"!==i&&(c<s?f=s-r.startLeft:c>n&&(f=n-r.startLeft)),"x"!==i&&(u<d?g=d-r.startTop:u>p&&(g=p-r.startTop)),(r.translateX!==f||r.translateY!==g)&&(r.props.onDrag&&r.props.onDrag({top:r.startTop+g,left:r.startLeft+f,bottom:r.startBottom-g,right:r.startRight-f,diffX:f,diffY:g}),r.draggerRef&&(r.draggerRef.style.transform="translate("+f+"px, "+g+"px)"),r.translateX=f,r.translateY=g)},r.startTouchDrag=function(t){var e=t.touches[0];e&&(r.axisX=e.pageX,r.axisY=e.pageY,r.props.disabled||r.enableDrag(!0))},r.endDrag=function(){if(r.isDragging){var t=r.calcPosition();null==r.props.onDragEnd||r.props.onDragEnd(t),r.draggerRef&&(r.draggerRef.style.transform=""),r.props.showDragArea&&r.hideDragArea()}r.__moveDisposer&&(r.__moveDisposer(),r.__moveDisposer=void 0),r.__clickDisposer&&requestAnimationFrame(function(){r.__clickDisposer&&(r.__clickDisposer(),r.__clickDisposer=void 0)}),r.__upDisposer&&(r.__upDisposer(),r.__upDisposer=void 0),r.__bodyClassDisposer&&(r.__bodyClassDisposer(),r.__bodyClassDisposer=void 0),r.isDragging=!1},r.showDragArea=function(){if(r.props.showDragArea&&r.dragAreaRef){var t=r.props.lockAxis,e=r.dragPositionBoundaries,o=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=r.dragBoxSize;r.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",r.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height="2px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=r.startTop+n.height/2+"px"):"y"===t?(r.dragAreaRef.style.width="2px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=r.startLeft+n.width/2+"px",r.dragAreaRef.style.top=a+"px"):(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=a+"px"),r.dragAreaRef.style.display="block"}},r.hideDragArea=function(){r.dragAreaRef&&(r.dragAreaRef.style.display="none")},r.calcPosition=function(){var t=r.props.lockAxis,e=r.dragPositionBoundaries,o=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=r.getContainerRect(),d=n.height,p=n.width,l=r.startTop,h=r.startLeft;"y"!==t&&(h+=r.dX),"x"!==t&&(l+=r.dY);var f=g(l,a,s),c=g(h,o,i),u=d-f-r.dragBoxSize.height,m=p-c-r.dragBoxSize.width;f===r.state.top&&c===r.state.left&&r.state.bottom===u&&r.state.right===m||r.setState({top:f,left:c,bottom:u,right:m});var v={top:f,left:c,bottom:u,right:m,diffX:c-r.startLeft,diffY:f-r.startTop};return r.startTop=f,r.startLeft=c,r.startBottom=u,r.startRight=m,r.dX=r.dY=0,v},r.updateState=function(t){var e=void 0===t?{}:t;r.setState(r.formatState({offsetX:e.offsetX,offsetY:e.offsetY}),function(){r.reportStartPosition(),r.calcPosition()})};var o=r.props;return r.state=r.formatState({offsetX:o.offsetX,offsetY:o.offsetY}),r}var p,v;v=e,(p=o).prototype=Object.create(v.prototype),p.prototype.constructor=p,n(p,v);var x,_,D=o.prototype;return D.formatState=function(t){var e=void 0===t?{}:t,r=e.offsetX,i=void 0===r?o.defaultProps.offsetX:r,a=e.offsetY,s=void 0===a?o.defaultProps.offsetY:a,n=this.props.placement,d=(void 0===n?"bottom-right":n).split("-"),p=d[0],l=d[1];return{top:"top"===p?s:void 0,bottom:"bottom"===p?s:void 0,left:"left"===l?i:void 0,right:"right"===l?i:void 0}},D.getContainer=function(t){void 0===t&&(t=!0);var e=this.props.positionMode,r=void 0===e?"fixed":e;return this.container&&t&&this.prePositionMode===r&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=r,this.preDraggerRef=this.draggerRef,this.container="fixed"===r?l(this.draggerRef):h(this.draggerRef)),this.container},D.getContainerRect=function(){var t=this.getContainer(!1);if(!t)return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var e=t.getBoundingClientRect(),r=window.getComputedStyle(t),o=parseFloat(r.borderLeftWidth)||0,i=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-o-a-(t.offsetWidth-t.clientWidth-o-a),height:e.height/this.cachedScaleY-i-s-(t.offsetHeight-t.clientHeight-i-s),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:o,borderTopWidth:i}},D.reportStartPosition=function(){if(this.draggerRef){var t=f(this.getContainer()),e=t.scaleY;this.cachedScaleX=t.scaleX,this.cachedScaleY=e;var r=this.draggerRef.getBoundingClientRect(),o=r.top,i=r.left,a=this.getContainerRect();this.startTop=o/e-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=i/e-a.left+a.scrollLeft-a.borderLeftWidth,this.startBottom=a.height-this.startTop-this.dragBoxSize.height,this.startRight=a.width-this.startLeft-this.dragBoxSize.width}},D.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=i(window,"resize",function(){t.calcPosition()}),c()&&this.draggerRef&&(this.__preventScrollDisposer=i(this.draggerRef,"touchmove",function(t){t.preventDefault()}))},D.componentWillUnmount=function(){var t,e,r,o,i,a;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this),null==(a=this.__preventScrollDisposer)||a.call(this)},D.render=function(){var e=this,o=this.props,i=o.className,a=o.zIndex,n=o.children,d=o.showDragArea,p=o.positionMode,l=void 0===p?"fixed":p,h=this.startDrag,f=this.startTouchDrag,g=this.endDrag,c=s({zIndex:a},this.position,{position:l});/*#__PURE__*/return t.createElement(t.Fragment,null,d&&/*#__PURE__*/t.createElement("div",{className:m("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:l,backgroundColor:"rgba(173, 216, 230, 0.2)",border:"1px dashed var(--ohkit-color-primary, #1890ff)",pointerEvents:"none",zIndex:(a||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/t.createElement("div",{className:r(m("container"),i),style:c,ref:function(t){e.draggerRef=t},onMouseDownCapture:h,onMouseUpCapture:g,onTouchStartCapture:f,onTouchEndCapture:g},n))},x=o,(_=[{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=void 0===o?"bottom-right":o,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=i.split("-"),l=p[0],h=p[1],f={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},c=f.minX,u=f.maxX,m=f.minY,v=f.maxY;if(e){var x=e[0],_=e[1];"left"===h?(void 0!==x&&(c=Math.max(c,x)),void 0!==_&&(u=Math.min(u,_))):void 0!==x&&void 0!==_?(c=Math.max(c,n-_-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==_&&(c=Math.max(c,n-_-a.width))}if(r){var D=r[0],y=r[1];"top"===l?(void 0!==D&&(m=Math.max(m,D)),void 0!==y&&(v=Math.min(v,y))):void 0!==D&&void 0!==y?(m=Math.max(m,d-y-a.height),v=Math.min(v,d-D-a.height)):void 0!==D?v=Math.min(v,d-D-a.height):void 0!==y&&(m=Math.max(m,d-y-a.height))}return{minX:c=g(c,f.minX,f.maxX),maxX:u=g(u,c,f.maxX),minY:m=g(m,f.minY,f.maxY),maxY:v=g(v,m,f.maxY)}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&u.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,d(o.key),o)}}(x.prototype,_),Object.defineProperty(x,"prototype",{writable:!1}),x}(t.Component);v.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"};export{v as DraggableBox,m as c,g as clamp,h as findAbsolutePositionParent,l as findFixedPositionParent,f as getScaleRatio,p as isPositioningContextCreator,c as supportsTouchEvents};
|
|
2
2
|
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n */\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') || \n transform !== 'none' || \n filter !== 'none' || \n perspective !== 'none' ||\n contain.includes('paint') ||\n contain.includes('layout') ||\n contain.includes('strict') ||\n willChange.includes('transform') ||\n willChange.includes('perspective') ||\n willChange.includes('filter');\n}\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时,fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到,返回 window(通过 document.documentElement)\n return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的包含块创建者,包含所有可能影响absolute定位的属性\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/**\n * 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n */\nexport function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/**\n * 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值,确保在 [min, max] 范围内\n */\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/**\n * 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true,否则返回 false\n */\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport * from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement | null = null;\n private container: HTMLElement | null = null;\n /**\n * 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n */\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container || !useCache || this.prePositionMode !== positionMode || this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /**\n * 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) || 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) || 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) || 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) || 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置:boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置:boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置:boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置:boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement || !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' | 'bottom', 'left' | 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement | null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例,避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement | null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置,并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px?? 确保用户有真实的移动意愿,而不是手抖~~\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse || 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.body, this.draggerRef], c('moving')) || undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent | MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent | TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例,避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量(需要除以缩放比例)\n this.dX = (pageX - (this.axisX || 0)) / scaleX;\n this.dY = (pageY - (this.axisY || 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件(在允许X轴移动时应用)\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件(在允许Y轴移动时应用)\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea || !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向,显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向,显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽,显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' | 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内,如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时,阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex || 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","reportStartPosition","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","_temp","_ref","formatState","offsetX","offsetY","_this$props","_proto","prototype","_temp2","_ref2","_ref2$offsetX","defaultProps","_ref2$offsetY","_this$props$placement","placement","_placement$split","split","placementY","placementX","getContainer","useCache","_this$props$positionM","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","_getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props2","className","zIndex","children","_this$props2$position","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props3","boundsX","boundsY","_this$props3$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n */\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') || \n transform !== 'none' || \n filter !== 'none' || \n perspective !== 'none' ||\n contain.includes('paint') ||\n contain.includes('layout') ||\n contain.includes('strict') ||\n willChange.includes('transform') ||\n willChange.includes('perspective') ||\n willChange.includes('filter');\n}\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时,fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到,返回 window(通过 document.documentElement)\n return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的包含块创建者,包含所有可能影响absolute定位的属性\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/**\n * 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n */\nexport function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/**\n * 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值,确保在 [min, max] 范围内\n */\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/**\n * 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true,否则返回 false\n */\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport * from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement | null = null;\n private container: HTMLElement | null = null;\n /**\n * 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n */\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container || !useCache || this.prePositionMode !== positionMode || this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /**\n * 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) || 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) || 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) || 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) || 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置:boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置:boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置:boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置:boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement || !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' | 'bottom', 'left' | 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement | null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例,避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement | null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置,并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string> = {\n 'none': 'moving',\n 'x': 'moving-x',\n 'y': 'moving-y'\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px?? 确保用户有真实的移动意愿,而不是手抖~~\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse || 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.documentElement, this.draggerRef], c(this.dragingClassMap[this.props.lockAxis || 'none'])) || undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent | MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent | TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例,避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量(需要除以缩放比例)\n this.dX = (pageX - (this.axisX || 0)) / scaleX;\n this.dY = (pageY - (this.axisY || 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件(在允许X轴移动时应用)\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件(在允许Y轴移动时应用)\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea || !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向,显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向,显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽,显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' | 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内,如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时,阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex || 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","dragingClassMap","none","x","y","enableDrag","isTouch","reportStartPosition","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","lockAxis","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","_temp","_ref","formatState","offsetX","offsetY","_this$props","_proto","prototype","_temp2","_ref2","_ref2$offsetX","defaultProps","_ref2$offsetY","_this$props$placement","placement","_placement$split","split","placementY","placementX","getContainer","useCache","_this$props$positionM","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","_getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props2","className","zIndex","children","_this$props2$position","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props3","boundsX","boundsY","_this$props3$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","positionStyles","Component"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var t=require("react"),e=require("@ohkit/prefix-classname"),r=require("@ohkit/dom-helper");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=/*#__PURE__*/o(t);function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},a.apply(null,arguments)}function s(t,e){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},s(t,e)}function n(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}function d(t,e){var r=window.getComputedStyle(t),o=r.getPropertyValue("position"),i=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return e&&"static"!==o||"none"!==i||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function p(t){return t?r.findParent(t,function(t){return d(t,!1)},{excludeOwn:!0}):document.documentElement}function l(t){return t?r.findParent(t,function(t){return d(t,!0)},{excludeOwn:!0}):document.body}function f(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect(),r=1e4;return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*r)/r:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*r)/r:1}}function h(t,e,r){return Math.min(Math.max(t,e),r)}function c(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)}var g=["top-left","top-right","bottom-left","bottom-right"],u=e.prefixClassname("ohkit-draggable-box__"),m=/*#__PURE__*/function(t){function o(e){var o;(o=t.call(this,e)||this).prePositionMode=void 0,o.preDraggerRef=null,o.container=null,o.draggerRef=null,o.isDragging=!1,o.axisX=void 0,o.axisY=void 0,o.dX=0,o.dY=0,o.startTop=0,o.startLeft=0,o.startBottom=0,o.startRight=0,o.translateX=0,o.translateY=0,o.cachedScaleX=1,o.cachedScaleY=1,o.__moveDisposer=void 0,o.__clickDisposer=void 0,o.__bodyClassDisposer=void 0,o.__upDisposer=void 0,o.__resizeDisposer=void 0,o.__preventScrollDisposer=void 0,o.dragAreaRef=null,o.enableDrag=function(t){void 0===t&&(t=!1),o.reportStartPosition(),null==o.__moveDisposer||o.__moveDisposer(),o.__moveDisposer=r.addEventListener(t&&o.draggerRef?o.draggerRef:document,t?"touchmove":"mousemove",function(e){e.stopPropagation(),t&&e.preventDefault(),o.__clickDisposer||Math.sqrt(Math.pow(o.dX,2)+Math.pow(o.dY,2))>(o.props.showDragAreaOverMoveDistanse||5)&&(o.__clickDisposer=r.addEventListener(document,"click",function(t){t.stopPropagation()},!0),o.__bodyClassDisposer=r.addClass([document.body,o.draggerRef],u("moving"))||void 0,o.props.showDragArea&&o.dragAreaRef&&o.showDragArea()),!o.isDragging&&o.props.onDragStart&&o.props.onDragStart({top:o.startTop,left:o.startLeft,bottom:o.startBottom,right:o.startRight,diffX:0,diffY:0}),o.dragging(e)},{passive:!t}),null==o.__upDisposer||o.__upDisposer(),o.__upDisposer=r.addEventListener(document,"mouseup",function(){o.endDrag()},!0)},o.startDrag=function(t){2!==t.nativeEvent.button&&(o.axisX=t.nativeEvent.pageX,o.axisY=t.nativeEvent.pageY,o.props.disabled||o.enableDrag())},o.dragging=function(t){o.isDragging=!0;var e,r,i=o.props.lockAxis,a=o.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,p=a.maxY,l=o.cachedScaleY;if(t instanceof TouchEvent){var f=t.touches[0];if(!f)return;e=f.pageX,r=f.pageY}else e=t.pageX,r=t.pageY;o.dX=(e-(o.axisX||0))/o.cachedScaleX,o.dY=(r-(o.axisY||0))/l;var h=o.dX,c=o.dY;"x"===i?c=0:"y"===i&&(h=0);var g=o.startLeft+h,u=o.startTop+c;"y"!==i&&(g<s?h=s-o.startLeft:g>n&&(h=n-o.startLeft)),"x"!==i&&(u<d?c=d-o.startTop:u>p&&(c=p-o.startTop)),(o.translateX!==h||o.translateY!==c)&&(o.props.onDrag&&o.props.onDrag({top:o.startTop+c,left:o.startLeft+h,bottom:o.startBottom-c,right:o.startRight-h,diffX:h,diffY:c}),o.draggerRef&&(o.draggerRef.style.transform="translate("+h+"px, "+c+"px)"),o.translateX=h,o.translateY=c)},o.startTouchDrag=function(t){var e=t.touches[0];e&&(o.axisX=e.pageX,o.axisY=e.pageY,o.props.disabled||o.enableDrag(!0))},o.endDrag=function(){if(o.isDragging){var t=o.calcPosition();null==o.props.onDragEnd||o.props.onDragEnd(t),o.draggerRef&&(o.draggerRef.style.transform=""),o.props.showDragArea&&o.hideDragArea()}o.__moveDisposer&&(o.__moveDisposer(),o.__moveDisposer=void 0),o.__clickDisposer&&requestAnimationFrame(function(){o.__clickDisposer&&(o.__clickDisposer(),o.__clickDisposer=void 0)}),o.__upDisposer&&(o.__upDisposer(),o.__upDisposer=void 0),o.__bodyClassDisposer&&(o.__bodyClassDisposer(),o.__bodyClassDisposer=void 0),o.isDragging=!1},o.showDragArea=function(){if(o.props.showDragArea&&o.dragAreaRef){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=o.dragBoxSize;o.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",o.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(o.dragAreaRef.style.width=i-r+n.width+"px",o.dragAreaRef.style.height="2px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=o.startTop+n.height/2+"px"):"y"===t?(o.dragAreaRef.style.width="2px",o.dragAreaRef.style.height=s-a+n.height+"px",o.dragAreaRef.style.left=o.startLeft+n.width/2+"px",o.dragAreaRef.style.top=a+"px"):(o.dragAreaRef.style.width=i-r+n.width+"px",o.dragAreaRef.style.height=s-a+n.height+"px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=a+"px"),o.dragAreaRef.style.display="block"}},o.hideDragArea=function(){o.dragAreaRef&&(o.dragAreaRef.style.display="none")},o.calcPosition=function(){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=o.getContainerRect(),d=n.height,p=n.width,l=o.startTop,f=o.startLeft;"y"!==t&&(f+=o.dX),"x"!==t&&(l+=o.dY);var c=h(l,a,s),g=h(f,r,i),u=d-c-o.dragBoxSize.height,m=p-g-o.dragBoxSize.width;c===o.state.top&&g===o.state.left&&o.state.bottom===u&&o.state.right===m||o.setState({top:c,left:g,bottom:u,right:m});var v={top:c,left:g,bottom:u,right:m,diffX:g-o.startLeft,diffY:c-o.startTop};return o.startTop=c,o.startLeft=g,o.startBottom=u,o.startRight=m,o.dX=o.dY=0,v},o.updateState=function(t){var e=void 0===t?{}:t;o.setState(o.formatState({offsetX:e.offsetX,offsetY:e.offsetY}),function(){o.reportStartPosition(),o.calcPosition()})};var i=o.props;return o.state=o.formatState({offsetX:i.offsetX,offsetY:i.offsetY}),o}var d,m;m=t,(d=o).prototype=Object.create(m.prototype),d.prototype.constructor=d,s(d,m);var v,x,D=o.prototype;return D.formatState=function(t){var e=void 0===t?{}:t,r=e.offsetX,i=void 0===r?o.defaultProps.offsetX:r,a=e.offsetY,s=void 0===a?o.defaultProps.offsetY:a,n=this.props.placement,d=(void 0===n?"bottom-right":n).split("-"),p=d[0],l=d[1];return{top:"top"===p?s:void 0,bottom:"bottom"===p?s:void 0,left:"left"===l?i:void 0,right:"right"===l?i:void 0}},D.getContainer=function(t){void 0===t&&(t=!0);var e=this.props.positionMode,r=void 0===e?"fixed":e;return this.container&&t&&this.prePositionMode===r&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=r,this.preDraggerRef=this.draggerRef,this.container="fixed"===r?p(this.draggerRef):l(this.draggerRef)),this.container},D.getContainerRect=function(){var t=this.getContainer(!1);if(!t)return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var e=t.getBoundingClientRect(),r=window.getComputedStyle(t),o=parseFloat(r.borderLeftWidth)||0,i=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-o-a-(t.offsetWidth-t.clientWidth-o-a),height:e.height/this.cachedScaleY-i-s-(t.offsetHeight-t.clientHeight-i-s),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:o,borderTopWidth:i}},D.reportStartPosition=function(){if(this.draggerRef){var t=f(this.getContainer()),e=t.scaleY;this.cachedScaleX=t.scaleX,this.cachedScaleY=e;var r=this.draggerRef.getBoundingClientRect(),o=r.top,i=r.left,a=this.getContainerRect();this.startTop=o/e-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=i/e-a.left+a.scrollLeft-a.borderLeftWidth,this.startBottom=a.height-this.startTop-this.dragBoxSize.height,this.startRight=a.width-this.startLeft-this.dragBoxSize.width}},D.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=r.addEventListener(window,"resize",function(){t.calcPosition()}),c()&&this.draggerRef&&(this.__preventScrollDisposer=r.addEventListener(this.draggerRef,"touchmove",function(t){t.preventDefault()}))},D.componentWillUnmount=function(){var t,e,r,o,i,a;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this),null==(a=this.__preventScrollDisposer)||a.call(this)},D.render=function(){var t=this,r=this.props,o=r.className,s=r.zIndex,n=r.children,d=r.showDragArea,p=r.positionMode,l=void 0===p?"fixed":p,f=this.startDrag,h=this.startTouchDrag,c=this.endDrag,g=a({zIndex:s},this.position,{position:l});/*#__PURE__*/return i.default.createElement(i.default.Fragment,null,d&&/*#__PURE__*/i.default.createElement("div",{className:u("drag-area"),ref:function(e){t.dragAreaRef=e},style:{display:"none",position:l,backgroundColor:"rgba(173, 216, 230, 0.2)",border:"1px dashed var(--ohkit-color-primary, #1890ff)",pointerEvents:"none",zIndex:(s||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/i.default.createElement("div",{className:e.classNames(u("container"),o),style:g,ref:function(e){t.draggerRef=e},onMouseDownCapture:f,onMouseUpCapture:c,onTouchStartCapture:h,onTouchEndCapture:c},n))},v=o,(x=[{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=void 0===o?"bottom-right":o,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=i.split("-"),l=p[0],f=p[1],c={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},g=c.minX,u=c.maxX,m=c.minY,v=c.maxY;if(e){var x=e[0],D=e[1];"left"===f?(void 0!==x&&(g=Math.max(g,x)),void 0!==D&&(u=Math.min(u,D))):void 0!==x&&void 0!==D?(g=Math.max(g,n-D-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==D&&(g=Math.max(g,n-D-a.width))}if(r){var _=r[0],b=r[1];"top"===l?(void 0!==_&&(m=Math.max(m,_)),void 0!==b&&(v=Math.min(v,b))):void 0!==_&&void 0!==b?(m=Math.max(m,d-b-a.height),v=Math.min(v,d-_-a.height)):void 0!==_?v=Math.min(v,d-_-a.height):void 0!==b&&(m=Math.max(m,d-b-a.height))}return{minX:g=h(g,c.minX,c.maxX),maxX:u=h(u,g,c.maxX),minY:m=h(m,c.minY,c.maxY),maxY:v=h(v,m,c.maxY)}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&g.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,n(o.key),o)}}(v.prototype,x),Object.defineProperty(v,"prototype",{writable:!1}),v}(i.default.Component);m.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"},exports.DraggableBox=m,exports.c=u,exports.clamp=h,exports.findAbsolutePositionParent=l,exports.findFixedPositionParent=p,exports.getScaleRatio=f,exports.isPositioningContextCreator=d,exports.supportsTouchEvents=c;
|
|
1
|
+
var t=require("react"),e=require("@ohkit/prefix-classname"),r=require("@ohkit/dom-helper");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=/*#__PURE__*/o(t);function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},a.apply(null,arguments)}function s(t,e){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},s(t,e)}function n(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}function d(t,e){var r=window.getComputedStyle(t),o=r.getPropertyValue("position"),i=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return e&&"static"!==o||"none"!==i||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function p(t){return t?r.findParent(t,function(t){return d(t,!1)},{excludeOwn:!0}):document.documentElement}function l(t){return t?r.findParent(t,function(t){return d(t,!0)},{excludeOwn:!0}):document.body}function f(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect(),r=1e4;return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*r)/r:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*r)/r:1}}function h(t,e,r){return Math.min(Math.max(t,e),r)}function c(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)}var g=["top-left","top-right","bottom-left","bottom-right"],u=e.prefixClassname("ohkit-draggable-box__"),m=/*#__PURE__*/function(t){function o(e){var o;(o=t.call(this,e)||this).prePositionMode=void 0,o.preDraggerRef=null,o.container=null,o.draggerRef=null,o.isDragging=!1,o.axisX=void 0,o.axisY=void 0,o.dX=0,o.dY=0,o.startTop=0,o.startLeft=0,o.startBottom=0,o.startRight=0,o.translateX=0,o.translateY=0,o.cachedScaleX=1,o.cachedScaleY=1,o.__moveDisposer=void 0,o.__clickDisposer=void 0,o.__bodyClassDisposer=void 0,o.__upDisposer=void 0,o.__resizeDisposer=void 0,o.__preventScrollDisposer=void 0,o.dragAreaRef=null,o.dragingClassMap={none:"moving",x:"moving-x",y:"moving-y"},o.enableDrag=function(t){void 0===t&&(t=!1),o.reportStartPosition(),null==o.__moveDisposer||o.__moveDisposer(),o.__moveDisposer=r.addEventListener(t&&o.draggerRef?o.draggerRef:document,t?"touchmove":"mousemove",function(e){e.stopPropagation(),t&&e.preventDefault(),o.__clickDisposer||Math.sqrt(Math.pow(o.dX,2)+Math.pow(o.dY,2))>(o.props.showDragAreaOverMoveDistanse||5)&&(o.__clickDisposer=r.addEventListener(document,"click",function(t){t.stopPropagation()},!0),o.__bodyClassDisposer=r.addClass([document.documentElement,o.draggerRef],u(o.dragingClassMap[o.props.lockAxis||"none"]))||void 0,o.props.showDragArea&&o.dragAreaRef&&o.showDragArea()),!o.isDragging&&o.props.onDragStart&&o.props.onDragStart({top:o.startTop,left:o.startLeft,bottom:o.startBottom,right:o.startRight,diffX:0,diffY:0}),o.dragging(e)},{passive:!t}),null==o.__upDisposer||o.__upDisposer(),o.__upDisposer=r.addEventListener(document,"mouseup",function(){o.endDrag()},!0)},o.startDrag=function(t){2!==t.nativeEvent.button&&(o.axisX=t.nativeEvent.pageX,o.axisY=t.nativeEvent.pageY,o.props.disabled||o.enableDrag())},o.dragging=function(t){o.isDragging=!0;var e,r,i=o.props.lockAxis,a=o.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,p=a.maxY,l=o.cachedScaleY;if(t instanceof TouchEvent){var f=t.touches[0];if(!f)return;e=f.pageX,r=f.pageY}else e=t.pageX,r=t.pageY;o.dX=(e-(o.axisX||0))/o.cachedScaleX,o.dY=(r-(o.axisY||0))/l;var h=o.dX,c=o.dY;"x"===i?c=0:"y"===i&&(h=0);var g=o.startLeft+h,u=o.startTop+c;"y"!==i&&(g<s?h=s-o.startLeft:g>n&&(h=n-o.startLeft)),"x"!==i&&(u<d?c=d-o.startTop:u>p&&(c=p-o.startTop)),(o.translateX!==h||o.translateY!==c)&&(o.props.onDrag&&o.props.onDrag({top:o.startTop+c,left:o.startLeft+h,bottom:o.startBottom-c,right:o.startRight-h,diffX:h,diffY:c}),o.draggerRef&&(o.draggerRef.style.transform="translate("+h+"px, "+c+"px)"),o.translateX=h,o.translateY=c)},o.startTouchDrag=function(t){var e=t.touches[0];e&&(o.axisX=e.pageX,o.axisY=e.pageY,o.props.disabled||o.enableDrag(!0))},o.endDrag=function(){if(o.isDragging){var t=o.calcPosition();null==o.props.onDragEnd||o.props.onDragEnd(t),o.draggerRef&&(o.draggerRef.style.transform=""),o.props.showDragArea&&o.hideDragArea()}o.__moveDisposer&&(o.__moveDisposer(),o.__moveDisposer=void 0),o.__clickDisposer&&requestAnimationFrame(function(){o.__clickDisposer&&(o.__clickDisposer(),o.__clickDisposer=void 0)}),o.__upDisposer&&(o.__upDisposer(),o.__upDisposer=void 0),o.__bodyClassDisposer&&(o.__bodyClassDisposer(),o.__bodyClassDisposer=void 0),o.isDragging=!1},o.showDragArea=function(){if(o.props.showDragArea&&o.dragAreaRef){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=o.dragBoxSize;o.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",o.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(o.dragAreaRef.style.width=i-r+n.width+"px",o.dragAreaRef.style.height="2px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=o.startTop+n.height/2+"px"):"y"===t?(o.dragAreaRef.style.width="2px",o.dragAreaRef.style.height=s-a+n.height+"px",o.dragAreaRef.style.left=o.startLeft+n.width/2+"px",o.dragAreaRef.style.top=a+"px"):(o.dragAreaRef.style.width=i-r+n.width+"px",o.dragAreaRef.style.height=s-a+n.height+"px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=a+"px"),o.dragAreaRef.style.display="block"}},o.hideDragArea=function(){o.dragAreaRef&&(o.dragAreaRef.style.display="none")},o.calcPosition=function(){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=o.getContainerRect(),d=n.height,p=n.width,l=o.startTop,f=o.startLeft;"y"!==t&&(f+=o.dX),"x"!==t&&(l+=o.dY);var c=h(l,a,s),g=h(f,r,i),u=d-c-o.dragBoxSize.height,m=p-g-o.dragBoxSize.width;c===o.state.top&&g===o.state.left&&o.state.bottom===u&&o.state.right===m||o.setState({top:c,left:g,bottom:u,right:m});var v={top:c,left:g,bottom:u,right:m,diffX:g-o.startLeft,diffY:c-o.startTop};return o.startTop=c,o.startLeft=g,o.startBottom=u,o.startRight=m,o.dX=o.dY=0,v},o.updateState=function(t){var e=void 0===t?{}:t;o.setState(o.formatState({offsetX:e.offsetX,offsetY:e.offsetY}),function(){o.reportStartPosition(),o.calcPosition()})};var i=o.props;return o.state=o.formatState({offsetX:i.offsetX,offsetY:i.offsetY}),o}var d,m;m=t,(d=o).prototype=Object.create(m.prototype),d.prototype.constructor=d,s(d,m);var v,x,D=o.prototype;return D.formatState=function(t){var e=void 0===t?{}:t,r=e.offsetX,i=void 0===r?o.defaultProps.offsetX:r,a=e.offsetY,s=void 0===a?o.defaultProps.offsetY:a,n=this.props.placement,d=(void 0===n?"bottom-right":n).split("-"),p=d[0],l=d[1];return{top:"top"===p?s:void 0,bottom:"bottom"===p?s:void 0,left:"left"===l?i:void 0,right:"right"===l?i:void 0}},D.getContainer=function(t){void 0===t&&(t=!0);var e=this.props.positionMode,r=void 0===e?"fixed":e;return this.container&&t&&this.prePositionMode===r&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=r,this.preDraggerRef=this.draggerRef,this.container="fixed"===r?p(this.draggerRef):l(this.draggerRef)),this.container},D.getContainerRect=function(){var t=this.getContainer(!1);if(!t)return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var e=t.getBoundingClientRect(),r=window.getComputedStyle(t),o=parseFloat(r.borderLeftWidth)||0,i=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-o-a-(t.offsetWidth-t.clientWidth-o-a),height:e.height/this.cachedScaleY-i-s-(t.offsetHeight-t.clientHeight-i-s),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:o,borderTopWidth:i}},D.reportStartPosition=function(){if(this.draggerRef){var t=f(this.getContainer()),e=t.scaleY;this.cachedScaleX=t.scaleX,this.cachedScaleY=e;var r=this.draggerRef.getBoundingClientRect(),o=r.top,i=r.left,a=this.getContainerRect();this.startTop=o/e-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=i/e-a.left+a.scrollLeft-a.borderLeftWidth,this.startBottom=a.height-this.startTop-this.dragBoxSize.height,this.startRight=a.width-this.startLeft-this.dragBoxSize.width}},D.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=r.addEventListener(window,"resize",function(){t.calcPosition()}),c()&&this.draggerRef&&(this.__preventScrollDisposer=r.addEventListener(this.draggerRef,"touchmove",function(t){t.preventDefault()}))},D.componentWillUnmount=function(){var t,e,r,o,i,a;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this),null==(a=this.__preventScrollDisposer)||a.call(this)},D.render=function(){var t=this,r=this.props,o=r.className,s=r.zIndex,n=r.children,d=r.showDragArea,p=r.positionMode,l=void 0===p?"fixed":p,f=this.startDrag,h=this.startTouchDrag,c=this.endDrag,g=a({zIndex:s},this.position,{position:l});/*#__PURE__*/return i.default.createElement(i.default.Fragment,null,d&&/*#__PURE__*/i.default.createElement("div",{className:u("drag-area"),ref:function(e){t.dragAreaRef=e},style:{display:"none",position:l,backgroundColor:"rgba(173, 216, 230, 0.2)",border:"1px dashed var(--ohkit-color-primary, #1890ff)",pointerEvents:"none",zIndex:(s||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/i.default.createElement("div",{className:e.classNames(u("container"),o),style:g,ref:function(e){t.draggerRef=e},onMouseDownCapture:f,onMouseUpCapture:c,onTouchStartCapture:h,onTouchEndCapture:c},n))},v=o,(x=[{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=void 0===o?"bottom-right":o,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=i.split("-"),l=p[0],f=p[1],c={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},g=c.minX,u=c.maxX,m=c.minY,v=c.maxY;if(e){var x=e[0],D=e[1];"left"===f?(void 0!==x&&(g=Math.max(g,x)),void 0!==D&&(u=Math.min(u,D))):void 0!==x&&void 0!==D?(g=Math.max(g,n-D-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==D&&(g=Math.max(g,n-D-a.width))}if(r){var _=r[0],y=r[1];"top"===l?(void 0!==_&&(m=Math.max(m,_)),void 0!==y&&(v=Math.min(v,y))):void 0!==_&&void 0!==y?(m=Math.max(m,d-y-a.height),v=Math.min(v,d-_-a.height)):void 0!==_?v=Math.min(v,d-_-a.height):void 0!==y&&(m=Math.max(m,d-y-a.height))}return{minX:g=h(g,c.minX,c.maxX),maxX:u=h(u,g,c.maxX),minY:m=h(m,c.minY,c.maxY),maxY:v=h(v,m,c.maxY)}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&g.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,n(o.key),o)}}(v.prototype,x),Object.defineProperty(v,"prototype",{writable:!1}),v}(i.default.Component);m.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"},exports.DraggableBox=m,exports.c=u,exports.clamp=h,exports.findAbsolutePositionParent=l,exports.findFixedPositionParent=p,exports.getScaleRatio=f,exports.isPositioningContextCreator=d,exports.supportsTouchEvents=c;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|