@ohkit/draggable-box 0.0.2 → 0.0.3

package/README.md

@@ -295,6 +295,7 @@ function TransformExample() {
 | `boundsY` | `[number?, number?]` | - | Y轴边界范围 `[min, max]` |
 | `positionMode` | `'fixed'` \| `'absolute'` | `'fixed'` | 定位模式 |
 | `showDragArea` | `boolean` | `false` | 是否显示拖拽区域可视化 |
+| `showDragAreaOverMoveDistanse` | `number` | `5` | 超过多少像素移动距离才显示拖拽区域 |
 
 ### 💡 定位模式说明
 
@@ -441,6 +442,14 @@ function TransformExample() {
 >
   {/* 拖拽时显示可拖拽区域 */}
 </DraggableBox>
+
+// ✅ 推荐：调整拖拽区域显示灵敏度
+<DraggableBox 
+  showDragArea={true}
+  showDragAreaOverMoveDistanse={10}  // 移动超过10px才显示区域，避免抖动误触
+>
+  {/* 提高拖拽区域显示的灵敏度 */}
+</DraggableBox>
 ```
 
 ### 5. 响应式设计

package/dist/index.es.js

@@ -1,2 +1,2 @@
-import t from"react";import{prefixClassname as e,classNames as r}from"@ohkit/prefix-classname";import{findParent as i,addEventListener as o,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 i in r)({}).hasOwnProperty.call(r,i)&&(t[i]=r[i])}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 l(t,e){var r=window.getComputedStyle(t),i=r.getPropertyValue("position"),o=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return e&&"static"!==i||"none"!==o||"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,e,r){return Math.min(Math.max(t,e),r)}var h=["top-left","top-right","bottom-left","bottom-right"],c=e("ohkit-draggable-box__"),g=/*#__PURE__*/function(e){function g(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.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.dragAreaRef=null,r.enableDrag=function(){r.reportStartPosition(),null==r.__moveDisposer||r.__moveDisposer(),r.__moveDisposer=o(document,"mousemove",function(t){r.__clickDisposer||Math.sqrt(Math.pow(r.dX,2)+Math.pow(r.dY,2))>5&&(r.__clickDisposer=o(document,"click",function(t){t.stopPropagation()},!0),r.__bodyClassDisposer=a([document.body,r.draggerRef],c("moving"))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),r.dragging(t)},!0),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=o(document,"mouseup",function(t){r.endDrag(),t.stopPropagation(),t.preventDefault()},!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=r.props.lockAxis,i=r.dragPositionBoundaries,o=i.minX,a=i.maxX,s=i.minY,n=i.maxY,d=r.cachedScaleY;r.dX=(t.pageX-(r.axisX||0))/r.cachedScaleX,r.dY=(t.pageY-(r.axisY||0))/d;var l=r.dX,p=r.dY;"x"===e?p=0:"y"===e&&(l=0);var h=r.startLeft+l,c=r.startTop+p;"y"!==e&&(h<o?l=o-r.startLeft:h>a&&(l=a-r.startLeft)),"x"!==e&&(c<s?p=s-r.startTop:c>n&&(p=n-r.startTop)),r.draggerRef&&(r.draggerRef.style.transform="translate("+l+"px, "+p+"px)"),t.stopPropagation()},r.endDrag=function(){r.isDragging&&(r.calcPosition(),r.draggerRef&&(r.draggerRef.style.transform=""),r.props.showDragArea&&r.hideDragArea()),null==r.__moveDisposer||r.__moveDisposer(),r.__moveDisposer=void 0,r.__clickDisposer&&requestAnimationFrame(function(){r.__clickDisposer&&(r.__clickDisposer(),r.__clickDisposer=void 0)}),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=void 0,null==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,i=e.minX,o=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=o-i+n.width+"px",r.dragAreaRef.style.height="2px",r.dragAreaRef.style.left=i+"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=o-i+n.width+"px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=i+"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,i=e.minX,o=e.maxX,a=e.minY,s=e.maxY,n=r.getContainerRect(),d=n.height,l=n.width,h=r.startTop,c=r.startLeft;"y"!==t&&(c+=r.dX),"x"!==t&&(h+=r.dY);var g=p(h,a,s),f=p(c,i,o),u=d-g-r.dragBoxSize.height,m=l-f-r.dragBoxSize.width;g===r.state.top&&f===r.state.left&&r.state.bottom===u&&r.state.right===m||r.setState({top:g,left:f,bottom:u,right:m}),r.startTop=g,r.startLeft=f,r.dX=r.dY=0};var i=t.placement,s=t.offsetY,n=void 0===s?20:s,d=t.offsetX,l=void 0===d?20:d,h=(void 0===i?"bottom-right":i).split("-"),g=h[0],f=h[1];return r.state={top:"top"===g?n:void 0,bottom:"bottom"===g?n:void 0,left:"left"===f?l:void 0,right:"right"===f?l:void 0},r}var f,u;u=e,(f=g).prototype=Object.create(u.prototype),f.prototype.constructor=f,n(f,u);var m,v,x=g.prototype;return x.getContainer=function(t){void 0===t&&(t=!0);var e,r=this.props.positionMode,o=void 0===r?"fixed":r;return this.container&&t&&this.prePositionMode===o&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=o,this.preDraggerRef=this.draggerRef,this.container="fixed"===o?(e=this.draggerRef)?i(e,function(t){return l(t,!1)},{excludeOwn:!0}):document.documentElement:function(t){return t?i(t,function(t){return l(t,!0)},{excludeOwn:!0}):document.body}(this.draggerRef)),this.container},x.getContainerRect=function(){var t=this.getContainer(!1);if(!t)return{width:window.innerWidth,height:window.innerHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var e=t.getBoundingClientRect(),r=window.getComputedStyle(t),i=parseFloat(r.borderLeftWidth)||0,o=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-i-a-(t.offsetWidth-t.clientWidth-i-a),height:e.height/this.cachedScaleY-o-s-(t.offsetHeight-t.clientHeight-o-s),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:i,borderTopWidth:o}},x.reportStartPosition=function(){if(this.draggerRef){var t=function(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}}(this.getContainer()),e=t.scaleY;this.cachedScaleX=t.scaleX,this.cachedScaleY=e;var r=this.draggerRef.getBoundingClientRect(),i=r.top,o=r.left,a=this.getContainerRect();this.startTop=i/e-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=o/e-a.left+a.scrollLeft-a.borderLeftWidth}},x.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=o(window,"resize",function(){t.calcPosition()})},x.componentWillUnmount=function(){var t,e,r,i,o;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(i=this.__clickDisposer)||i.call(this),null==(o=this.__upDisposer)||o.call(this)},x.render=function(){var e=this,i=this.props,o=i.className,a=i.zIndex,n=i.children,d=i.showDragArea,l=i.positionMode,p=void 0===l?"fixed":l,h=this.startDrag,g=this.endDrag,f=s({zIndex:a},this.position,{position:p});/*#__PURE__*/return t.createElement(Fragment,null,d&&/*#__PURE__*/t.createElement("div",{className:c("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:p,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(c("container"),o),style:f,ref:function(t){e.draggerRef=t},onMouseDown:h,onMouseUp:g},n))},m=g,(v=[{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,i=t.placement,o=void 0===i?"bottom-right":i,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,l=o.split("-"),h=l[0],c=l[1],g={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},f=g.minX,u=g.maxX,m=g.minY,v=g.maxY;if(e){var x=e[0],_=e[1];"left"===c?(void 0!==x&&(f=Math.max(f,x)),void 0!==_&&(u=Math.min(u,_))):void 0!==x&&void 0!==_?(f=Math.max(f,n-_-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==_&&(f=Math.max(f,n-_-a.width))}if(r){var y=r[0],b=r[1];"top"===h?(void 0!==y&&(m=Math.max(m,y)),void 0!==b&&(v=Math.min(v,b))):void 0!==y&&void 0!==b?(m=Math.max(m,d-b-a.height),v=Math.min(v,d-y-a.height)):void 0!==y?v=Math.min(v,d-y-a.height):void 0!==b&&(m=Math.max(m,d-b-a.height))}return{minX:f=p(f,g.minX,g.maxX),maxX:u=p(u,f,g.maxX),minY:m=p(m,g.minY,g.maxY),maxY:v=p(v,m,g.maxY)}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&h.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],i={};return void 0!==this.state[e]&&(i[e]=this.state[e]+"px"),void 0!==this.state[r]&&(i[r]=this.state[r]+"px"),i}}])&&function(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,d(i.key),i)}}(m.prototype,v),Object.defineProperty(m,"prototype",{writable:!1}),m}(t.Component);g.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"};export{g as DraggableBox,c,g as default};
+import e from"react";import{prefixClassname as t,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(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},s.apply(null,arguments)}function n(e,t){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},n(e,t)}function d(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}function l(e,t){var r=window.getComputedStyle(e),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 t&&"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(e,t,r){return Math.min(Math.max(e,t),r)}var h=["top-left","top-right","bottom-left","bottom-right"],c=t("ohkit-draggable-box__"),g=/*#__PURE__*/function(t){function g(e){var r;(r=t.call(this,e)||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.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(e){void 0===e&&(e=!1),r.reportStartPosition(),null==r.__moveDisposer||r.__moveDisposer(),r.__moveDisposer=i(e&&r.draggerRef?r.draggerRef:document,e?"touchmove":"mousemove",function(t){t.stopPropagation(),e&&t.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(e){e.stopPropagation()},!0),r.__bodyClassDisposer=a([document.body,r.draggerRef],c("moving"))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),r.dragging(t)},{passive:!e}),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=i(document,"mouseup",function(){r.endDrag()},!0)},r.startDrag=function(e){2!==e.nativeEvent.button&&(r.axisX=e.nativeEvent.pageX,r.axisY=e.nativeEvent.pageY,r.props.disabled||r.enableDrag())},r.dragging=function(e){r.isDragging=!0;var t,o,i=r.props.lockAxis,a=r.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,l=a.maxY,p=r.cachedScaleY;if(e instanceof TouchEvent){var h=e.touches[0];if(!h)return;t=h.pageX,o=h.pageY}else t=e.pageX,o=e.pageY;r.dX=(t-(r.axisX||0))/r.cachedScaleX,r.dY=(o-(r.axisY||0))/p;var c=r.dX,g=r.dY;"x"===i?g=0:"y"===i&&(c=0);var f=r.startLeft+c,u=r.startTop+g;"y"!==i&&(f<s?c=s-r.startLeft:f>n&&(c=n-r.startLeft)),"x"!==i&&(u<d?g=d-r.startTop:u>l&&(g=l-r.startTop)),r.draggerRef&&(r.draggerRef.style.transform="translate("+c+"px, "+g+"px)")},r.startTouchDrag=function(e){var t=e.touches[0];t&&(r.axisX=t.pageX,r.axisY=t.pageY,r.props.disabled||r.enableDrag(!0))},r.endDrag=function(){r.isDragging&&(r.calcPosition(),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 e=r.props.lockAxis,t=r.dragPositionBoundaries,o=t.minX,i=t.maxX,a=t.minY,s=t.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"===e?(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"===e?(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 e=r.props.lockAxis,t=r.dragPositionBoundaries,o=t.minX,i=t.maxX,a=t.minY,s=t.maxY,n=r.getContainerRect(),d=n.height,l=n.width,h=r.startTop,c=r.startLeft;"y"!==e&&(c+=r.dX),"x"!==e&&(h+=r.dY);var g=p(h,a,s),f=p(c,o,i),u=d-g-r.dragBoxSize.height,m=l-f-r.dragBoxSize.width;g===r.state.top&&f===r.state.left&&r.state.bottom===u&&r.state.right===m||r.setState({top:g,left:f,bottom:u,right:m}),r.startTop=g,r.startLeft=f,r.dX=r.dY=0};var o=e.placement,s=e.offsetY,n=void 0===s?20:s,d=e.offsetX,l=void 0===d?20:d,h=(void 0===o?"bottom-right":o).split("-"),g=h[0],f=h[1];return r.state={top:"top"===g?n:void 0,bottom:"bottom"===g?n:void 0,left:"left"===f?l:void 0,right:"right"===f?l:void 0},r}var f,u;u=t,(f=g).prototype=Object.create(u.prototype),f.prototype.constructor=f,n(f,u);var m,v,x=g.prototype;return x.getContainer=function(e){void 0===e&&(e=!0);var t,r=this.props.positionMode,i=void 0===r?"fixed":r;return this.container&&e&&this.prePositionMode===i&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=i,this.preDraggerRef=this.draggerRef,this.container="fixed"===i?(t=this.draggerRef)?o(t,function(e){return l(e,!1)},{excludeOwn:!0}):document.documentElement:function(e){return e?o(e,function(e){return l(e,!0)},{excludeOwn:!0}):document.body}(this.draggerRef)),this.container},x.getContainerRect=function(){var e=this.getContainer(!1);if(!e)return{width:window.innerWidth,height:window.innerHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var t=e.getBoundingClientRect(),r=window.getComputedStyle(e),o=parseFloat(r.borderLeftWidth)||0,i=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:t.width/this.cachedScaleX-o-a-(e.offsetWidth-e.clientWidth-o-a),height:t.height/this.cachedScaleY-i-s-(e.offsetHeight-e.clientHeight-i-s),left:t.left/this.cachedScaleX,top:t.top/this.cachedScaleY,scrollLeft:e.scrollLeft,scrollTop:e.scrollTop,borderLeftWidth:o,borderTopWidth:i}},x.reportStartPosition=function(){if(this.draggerRef){var e=function(e){if(!e)return{scaleX:1,scaleY:1};var t=e.getBoundingClientRect(),r=1e4;return{scaleX:e.offsetWidth>0?Math.round(t.width/e.offsetWidth*r)/r:1,scaleY:e.offsetHeight>0?Math.round(t.height/e.offsetHeight*r)/r:1}}(this.getContainer()),t=e.scaleY;this.cachedScaleX=e.scaleX,this.cachedScaleY=t;var r=this.draggerRef.getBoundingClientRect(),o=r.top,i=r.left,a=this.getContainerRect();this.startTop=o/t-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=i/t-a.left+a.scrollLeft-a.borderLeftWidth}},x.componentDidMount=function(){var e=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=i(window,"resize",function(){e.calcPosition()}),"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)&&this.draggerRef&&(this.__preventScrollDisposer=i(this.draggerRef,"touchmove",function(e){e.preventDefault()}))},x.componentWillUnmount=function(){var e,t,r,o,i,a;null==(e=this.__resizeDisposer)||e.call(this),null==(t=this.__bodyClassDisposer)||t.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)},x.render=function(){var t=this,o=this.props,i=o.className,a=o.zIndex,n=o.children,d=o.showDragArea,l=o.positionMode,p=void 0===l?"fixed":l,h=this.startDrag,g=this.startTouchDrag,f=this.endDrag,u=s({zIndex:a},this.position,{position:p});/*#__PURE__*/return e.createElement(Fragment,null,d&&/*#__PURE__*/e.createElement("div",{className:c("drag-area"),ref:function(e){t.dragAreaRef=e},style:{display:"none",position:p,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__*/e.createElement("div",{className:r(c("container"),i),style:u,ref:function(e){t.draggerRef=e},onMouseDownCapture:h,onMouseUpCapture:f,onTouchStartCapture:g,onTouchEndCapture:f},n))},m=g,(v=[{key:"dragBoxSize",get:function(){var e=0,t=0;return this.draggerRef&&(e=this.draggerRef.offsetWidth,t=this.draggerRef.offsetHeight),{height:t,width:e}}},{key:"dragPositionBoundaries",get:function(){var e=this.props,t=e.boundsX,r=e.boundsY,o=e.placement,i=void 0===o?"bottom-right":o,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,l=i.split("-"),h=l[0],c=l[1],g={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},f=g.minX,u=g.maxX,m=g.minY,v=g.maxY;if(t){var x=t[0],_=t[1];"left"===c?(void 0!==x&&(f=Math.max(f,x)),void 0!==_&&(u=Math.min(u,_))):void 0!==x&&void 0!==_?(f=Math.max(f,n-_-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==_&&(f=Math.max(f,n-_-a.width))}if(r){var y=r[0],D=r[1];"top"===h?(void 0!==y&&(m=Math.max(m,y)),void 0!==D&&(v=Math.min(v,D))):void 0!==y&&void 0!==D?(m=Math.max(m,d-D-a.height),v=Math.min(v,d-y-a.height)):void 0!==y?v=Math.min(v,d-y-a.height):void 0!==D&&(m=Math.max(m,d-D-a.height))}return{minX:f=p(f,g.minX,g.maxX),maxX:u=p(u,f,g.maxX),minY:m=p(m,g.minY,g.maxY),maxY:v=p(v,m,g.maxY)}}},{key:"curPositionKey",get:function(){var e=this.props.placement;return e&&h.includes(e)||(e="bottom-right"),e.split("-")}},{key:"position",get:function(){var e=this.curPositionKey,t=e[0],r=e[1],o={};return void 0!==this.state[t]&&(o[t]=this.state[t]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,d(o.key),o)}}(m.prototype,v),Object.defineProperty(m,"prototype",{writable:!1}),m}(e.Component);g.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"};export{g as DraggableBox,c,g as default};
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -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","\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} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\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        positionMode: 'fixed',\n    };\n\n    constructor(props: DraggableBoxProps) {\n        super(props);\n        \n        const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 简化状态初始化\n        this.state = {\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    }\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: window.innerWidth,\n                height: 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\n    // 缓存缩放比例，避免在 dragging 中频繁计算\n    cachedScaleX = 1;\n    cachedScaleY = 1;\n\n    __moveDisposer?: () => void;\n    __clickDisposer?: () => void;\n    __bodyClassDisposer?: () => void;\n    __upDisposer?: () => void;\n    __resizeDisposer?: () => void;\n\n    dragAreaRef: HTMLDivElement | null = null;\n\n    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        }\n    }\n\n    enableDrag = () => {\n        this.reportStartPosition();\n        this.__moveDisposer?.();\n        this.__moveDisposer = addEventListener(document, 'mousemove', (evt) => {\n            // INFO: 移动过程中禁止click事件\n            if (!this.__clickDisposer) {\n                const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n                // INFO: 移动超过5px？？ 确保用户有真实的移动意愿，而不是手抖～～\n                if (moveDistanse > 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            this.dragging(evt);\n        }, true);\n\n        this.__upDisposer?.();\n        this.__upDisposer = addEventListener(\n            document,\n            'mouseup',\n            (evt) => {\n                this.endDrag();\n                evt.stopPropagation();\n                evt.preventDefault();\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) => {\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        this.dX = (evt.pageX - (this.axisX || 0)) / scaleX;\n        this.dY = (evt.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        \n        if (this.draggerRef) {\n            this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n        }\n        evt.stopPropagation();\n    };\n\n    endDrag = () => {\n        if (this.isDragging) {\n            this.calcPosition();\n            if (this.draggerRef) {\n                this.draggerRef.style.transform = '';\n            }\n            \n            // 隐藏拖拽区域\n            if (this.props.showDragArea) {\n                this.hideDragArea();\n            }\n        }\n\n        this.__moveDisposer?.();\n        this.__moveDisposer = undefined;\n        if (this.__clickDisposer) {\n          requestAnimationFrame(() => {\n            if (this.__clickDisposer) {\n              this.__clickDisposer();\n              this.__clickDisposer = undefined;\n            }\n          });\n        }\n        this.__upDisposer?.();\n        this.__upDisposer = undefined;\n        this.__bodyClassDisposer?.();\n        this.__bodyClassDisposer = undefined;\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            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n            this.setState({\n                top: realTop,\n                left: realLeft,\n                bottom: realBottom,\n                right: realRight\n            });\n        }\n        this.startTop = realTop;\n        this.startLeft = realLeft;\n        this.dX = this.dY = 0;\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    componentWillUnmount() {\n        this.__resizeDisposer?.();\n        this.__bodyClassDisposer?.();\n        this.__moveDisposer?.();\n        this.__clickDisposer?.();\n        this.__upDisposer?.();\n    }\n\n    render() {\n        const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n        const { startDrag, endDrag } = this;\n        const stl = {\n            zIndex,\n            ...this.position,\n            position: positionMode\n        };\n        return (\n            <>\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                    onMouseDown={startDrag}\n                    onMouseUp={endDrag}\n                >\n                    {children}\n                </div>\n            </>\n        );\n    }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","reportStartPosition","addEventListener","document","evt","sqrt","pow","stopPropagation","addClass","body","undefined","showDragArea","dragging","endDrag","preventDefault","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","scaleY","translateX","translateY","potentialLeft","potentialTop","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getContainer","useCache","dom","_this$props$positionM","positionMode","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","_getScaleRatio","scaleX","rect","magnification","round","getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","render","_this3","_this$props","className","zIndex","children","_this$props$positionM2","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","key","get","_this$props2","boundsX","boundsY","_this$props2$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}
+{"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 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        \n        const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 简化状态初始化\n        this.state = {\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    }\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: window.innerWidth,\n                height: 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\n    // 缓存缩放比例，避免在 dragging 中频繁计算\n    cachedScaleX = 1;\n    cachedScaleY = 1;\n\n    __moveDisposer?: () => void;\n    __clickDisposer?: () => void;\n    __bodyClassDisposer?: () => void;\n    __upDisposer?: () => void;\n    __resizeDisposer?: () => void;\n    __preventScrollDisposer?: () => void;\n\n    dragAreaRef: HTMLDivElement | null = null;\n\n    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        }\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            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        \n        if (this.draggerRef) {\n            this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n        }\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            this.calcPosition();\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            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n            this.setState({\n                top: realTop,\n                left: realLeft,\n                bottom: realBottom,\n                right: realRight\n            });\n        }\n        this.startTop = realTop;\n        this.startLeft = realLeft;\n        this.dX = this.dY = 0;\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            <>\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            </>\n        );\n    }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","reportStartPosition","addEventListener","document","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","body","undefined","showDragArea","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","scaleY","TouchEvent","touch","touches","translateX","translateY","potentialLeft","potentialTop","startTouchDrag","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getContainer","useCache","dom","_this$props$positionM","positionMode","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","_getScaleRatio","scaleX","rect","magnification","round","getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","navigator","maxTouchPoints","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props","className","zIndex","children","_this$props$positionM2","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props2","boundsX","boundsY","_this$props2$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e=require("react"),t=require("@ohkit/prefix-classname"),r=require("@ohkit/dom-helper");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/i(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},a.apply(null,arguments)}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}function n(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}function d(e,t){var r=window.getComputedStyle(e),i=r.getPropertyValue("position"),o=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return t&&"static"!==i||"none"!==o||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function l(e,t,r){return Math.min(Math.max(e,t),r)}var p=["top-left","top-right","bottom-left","bottom-right"],h=t.prefixClassname("ohkit-draggable-box__"),c=/*#__PURE__*/function(e){function i(t){var i;(i=e.call(this,t)||this).prePositionMode=void 0,i.preDraggerRef=null,i.container=null,i.draggerRef=null,i.isDragging=!1,i.axisX=void 0,i.axisY=void 0,i.dX=0,i.dY=0,i.startTop=0,i.startLeft=0,i.cachedScaleX=1,i.cachedScaleY=1,i.__moveDisposer=void 0,i.__clickDisposer=void 0,i.__bodyClassDisposer=void 0,i.__upDisposer=void 0,i.__resizeDisposer=void 0,i.dragAreaRef=null,i.enableDrag=function(){i.reportStartPosition(),null==i.__moveDisposer||i.__moveDisposer(),i.__moveDisposer=r.addEventListener(document,"mousemove",function(e){i.__clickDisposer||Math.sqrt(Math.pow(i.dX,2)+Math.pow(i.dY,2))>5&&(i.__clickDisposer=r.addEventListener(document,"click",function(e){e.stopPropagation()},!0),i.__bodyClassDisposer=r.addClass([document.body,i.draggerRef],h("moving"))||void 0,i.props.showDragArea&&i.dragAreaRef&&i.showDragArea()),i.dragging(e)},!0),null==i.__upDisposer||i.__upDisposer(),i.__upDisposer=r.addEventListener(document,"mouseup",function(e){i.endDrag(),e.stopPropagation(),e.preventDefault()},!0)},i.startDrag=function(e){2!==e.nativeEvent.button&&(i.axisX=e.nativeEvent.pageX,i.axisY=e.nativeEvent.pageY,i.props.disabled||i.enableDrag())},i.dragging=function(e){i.isDragging=!0;var t=i.props.lockAxis,r=i.dragPositionBoundaries,o=r.minX,a=r.maxX,s=r.minY,n=r.maxY,d=i.cachedScaleY;i.dX=(e.pageX-(i.axisX||0))/i.cachedScaleX,i.dY=(e.pageY-(i.axisY||0))/d;var l=i.dX,p=i.dY;"x"===t?p=0:"y"===t&&(l=0);var h=i.startLeft+l,c=i.startTop+p;"y"!==t&&(h<o?l=o-i.startLeft:h>a&&(l=a-i.startLeft)),"x"!==t&&(c<s?p=s-i.startTop:c>n&&(p=n-i.startTop)),i.draggerRef&&(i.draggerRef.style.transform="translate("+l+"px, "+p+"px)"),e.stopPropagation()},i.endDrag=function(){i.isDragging&&(i.calcPosition(),i.draggerRef&&(i.draggerRef.style.transform=""),i.props.showDragArea&&i.hideDragArea()),null==i.__moveDisposer||i.__moveDisposer(),i.__moveDisposer=void 0,i.__clickDisposer&&requestAnimationFrame(function(){i.__clickDisposer&&(i.__clickDisposer(),i.__clickDisposer=void 0)}),null==i.__upDisposer||i.__upDisposer(),i.__upDisposer=void 0,null==i.__bodyClassDisposer||i.__bodyClassDisposer(),i.__bodyClassDisposer=void 0,i.isDragging=!1},i.showDragArea=function(){if(i.props.showDragArea&&i.dragAreaRef){var e=i.props.lockAxis,t=i.dragPositionBoundaries,r=t.minX,o=t.maxX,a=t.minY,s=t.maxY,n=i.dragBoxSize;i.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",i.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===e?(i.dragAreaRef.style.width=o-r+n.width+"px",i.dragAreaRef.style.height="2px",i.dragAreaRef.style.left=r+"px",i.dragAreaRef.style.top=i.startTop+n.height/2+"px"):"y"===e?(i.dragAreaRef.style.width="2px",i.dragAreaRef.style.height=s-a+n.height+"px",i.dragAreaRef.style.left=i.startLeft+n.width/2+"px",i.dragAreaRef.style.top=a+"px"):(i.dragAreaRef.style.width=o-r+n.width+"px",i.dragAreaRef.style.height=s-a+n.height+"px",i.dragAreaRef.style.left=r+"px",i.dragAreaRef.style.top=a+"px"),i.dragAreaRef.style.display="block"}},i.hideDragArea=function(){i.dragAreaRef&&(i.dragAreaRef.style.display="none")},i.calcPosition=function(){var e=i.props.lockAxis,t=i.dragPositionBoundaries,r=t.minX,o=t.maxX,a=t.minY,s=t.maxY,n=i.getContainerRect(),d=n.height,p=n.width,h=i.startTop,c=i.startLeft;"y"!==e&&(c+=i.dX),"x"!==e&&(h+=i.dY);var g=l(h,a,s),f=l(c,r,o),u=d-g-i.dragBoxSize.height,m=p-f-i.dragBoxSize.width;g===i.state.top&&f===i.state.left&&i.state.bottom===u&&i.state.right===m||i.setState({top:g,left:f,bottom:u,right:m}),i.startTop=g,i.startLeft=f,i.dX=i.dY=0};var o=t.placement,a=t.offsetY,s=void 0===a?20:a,n=t.offsetX,d=void 0===n?20:n,p=(void 0===o?"bottom-right":o).split("-"),c=p[0],g=p[1];return i.state={top:"top"===c?s:void 0,bottom:"bottom"===c?s:void 0,left:"left"===g?d:void 0,right:"right"===g?d:void 0},i}var c,g;g=e,(c=i).prototype=Object.create(g.prototype),c.prototype.constructor=c,s(c,g);var f,u,m=i.prototype;return m.getContainer=function(e){void 0===e&&(e=!0);var t,i=this.props.positionMode,o=void 0===i?"fixed":i;return this.container&&e&&this.prePositionMode===o&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=o,this.preDraggerRef=this.draggerRef,this.container="fixed"===o?(t=this.draggerRef)?r.findParent(t,function(e){return d(e,!1)},{excludeOwn:!0}):document.documentElement:function(e){return e?r.findParent(e,function(e){return d(e,!0)},{excludeOwn:!0}):document.body}(this.draggerRef)),this.container},m.getContainerRect=function(){var e=this.getContainer(!1);if(!e)return{width:window.innerWidth,height:window.innerHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var t=e.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.borderLeftWidth)||0,o=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:t.width/this.cachedScaleX-i-a-(e.offsetWidth-e.clientWidth-i-a),height:t.height/this.cachedScaleY-o-s-(e.offsetHeight-e.clientHeight-o-s),left:t.left/this.cachedScaleX,top:t.top/this.cachedScaleY,scrollLeft:e.scrollLeft,scrollTop:e.scrollTop,borderLeftWidth:i,borderTopWidth:o}},m.reportStartPosition=function(){if(this.draggerRef){var e=function(e){if(!e)return{scaleX:1,scaleY:1};var t=e.getBoundingClientRect(),r=1e4;return{scaleX:e.offsetWidth>0?Math.round(t.width/e.offsetWidth*r)/r:1,scaleY:e.offsetHeight>0?Math.round(t.height/e.offsetHeight*r)/r:1}}(this.getContainer()),t=e.scaleY;this.cachedScaleX=e.scaleX,this.cachedScaleY=t;var r=this.draggerRef.getBoundingClientRect(),i=r.top,o=r.left,a=this.getContainerRect();this.startTop=i/t-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=o/t-a.left+a.scrollLeft-a.borderLeftWidth}},m.componentDidMount=function(){var e=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=r.addEventListener(window,"resize",function(){e.calcPosition()})},m.componentWillUnmount=function(){var e,t,r,i,o;null==(e=this.__resizeDisposer)||e.call(this),null==(t=this.__bodyClassDisposer)||t.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(i=this.__clickDisposer)||i.call(this),null==(o=this.__upDisposer)||o.call(this)},m.render=function(){var e=this,r=this.props,i=r.className,s=r.zIndex,n=r.children,d=r.showDragArea,l=r.positionMode,p=void 0===l?"fixed":l,c=this.startDrag,g=this.endDrag,f=a({zIndex:s},this.position,{position:p});/*#__PURE__*/return o.default.createElement(Fragment,null,d&&/*#__PURE__*/o.default.createElement("div",{className:h("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:p,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__*/o.default.createElement("div",{className:t.classNames(h("container"),i),style:f,ref:function(t){e.draggerRef=t},onMouseDown:c,onMouseUp:g},n))},f=i,(u=[{key:"dragBoxSize",get:function(){var e=0,t=0;return this.draggerRef&&(e=this.draggerRef.offsetWidth,t=this.draggerRef.offsetHeight),{height:t,width:e}}},{key:"dragPositionBoundaries",get:function(){var e=this.props,t=e.boundsX,r=e.boundsY,i=e.placement,o=void 0===i?"bottom-right":i,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=o.split("-"),h=p[0],c=p[1],g={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},f=g.minX,u=g.maxX,m=g.minY,v=g.maxY;if(t){var x=t[0],y=t[1];"left"===c?(void 0!==x&&(f=Math.max(f,x)),void 0!==y&&(u=Math.min(u,y))):void 0!==x&&void 0!==y?(f=Math.max(f,n-y-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==y&&(f=Math.max(f,n-y-a.width))}if(r){var _=r[0],b=r[1];"top"===h?(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:f=l(f,g.minX,g.maxX),maxX:u=l(u,f,g.maxX),minY:m=l(m,g.minY,g.maxY),maxY:v=l(v,m,g.maxY)}}},{key:"curPositionKey",get:function(){var e=this.props.placement;return e&&p.includes(e)||(e="bottom-right"),e.split("-")}},{key:"position",get:function(){var e=this.curPositionKey,t=e[0],r=e[1],i={};return void 0!==this.state[t]&&(i[t]=this.state[t]+"px"),void 0!==this.state[r]&&(i[r]=this.state[r]+"px"),i}}])&&function(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,n(i.key),i)}}(f.prototype,u),Object.defineProperty(f,"prototype",{writable:!1}),f}(o.default.Component);c.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"},exports.DraggableBox=c,exports.c=h,exports.default=c;
+var e=require("react"),t=require("@ohkit/prefix-classname"),r=require("@ohkit/dom-helper");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/i(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},a.apply(null,arguments)}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}function n(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}function d(e,t){var r=window.getComputedStyle(e),i=r.getPropertyValue("position"),o=r.getPropertyValue("transform"),a=r.getPropertyValue("filter"),s=r.getPropertyValue("perspective"),n=r.getPropertyValue("contain"),d=r.getPropertyValue("will-change");return t&&"static"!==i||"none"!==o||"none"!==a||"none"!==s||n.includes("paint")||n.includes("layout")||n.includes("strict")||d.includes("transform")||d.includes("perspective")||d.includes("filter")}function l(e,t,r){return Math.min(Math.max(e,t),r)}var p=["top-left","top-right","bottom-left","bottom-right"],h=t.prefixClassname("ohkit-draggable-box__"),c=/*#__PURE__*/function(e){function i(t){var i;(i=e.call(this,t)||this).prePositionMode=void 0,i.preDraggerRef=null,i.container=null,i.draggerRef=null,i.isDragging=!1,i.axisX=void 0,i.axisY=void 0,i.dX=0,i.dY=0,i.startTop=0,i.startLeft=0,i.cachedScaleX=1,i.cachedScaleY=1,i.__moveDisposer=void 0,i.__clickDisposer=void 0,i.__bodyClassDisposer=void 0,i.__upDisposer=void 0,i.__resizeDisposer=void 0,i.__preventScrollDisposer=void 0,i.dragAreaRef=null,i.enableDrag=function(e){void 0===e&&(e=!1),i.reportStartPosition(),null==i.__moveDisposer||i.__moveDisposer(),i.__moveDisposer=r.addEventListener(e&&i.draggerRef?i.draggerRef:document,e?"touchmove":"mousemove",function(t){t.stopPropagation(),e&&t.preventDefault(),i.__clickDisposer||Math.sqrt(Math.pow(i.dX,2)+Math.pow(i.dY,2))>(i.props.showDragAreaOverMoveDistanse||5)&&(i.__clickDisposer=r.addEventListener(document,"click",function(e){e.stopPropagation()},!0),i.__bodyClassDisposer=r.addClass([document.body,i.draggerRef],h("moving"))||void 0,i.props.showDragArea&&i.dragAreaRef&&i.showDragArea()),i.dragging(t)},{passive:!e}),null==i.__upDisposer||i.__upDisposer(),i.__upDisposer=r.addEventListener(document,"mouseup",function(){i.endDrag()},!0)},i.startDrag=function(e){2!==e.nativeEvent.button&&(i.axisX=e.nativeEvent.pageX,i.axisY=e.nativeEvent.pageY,i.props.disabled||i.enableDrag())},i.dragging=function(e){i.isDragging=!0;var t,r,o=i.props.lockAxis,a=i.dragPositionBoundaries,s=a.minX,n=a.maxX,d=a.minY,l=a.maxY,p=i.cachedScaleY;if(e instanceof TouchEvent){var h=e.touches[0];if(!h)return;t=h.pageX,r=h.pageY}else t=e.pageX,r=e.pageY;i.dX=(t-(i.axisX||0))/i.cachedScaleX,i.dY=(r-(i.axisY||0))/p;var c=i.dX,g=i.dY;"x"===o?g=0:"y"===o&&(c=0);var f=i.startLeft+c,u=i.startTop+g;"y"!==o&&(f<s?c=s-i.startLeft:f>n&&(c=n-i.startLeft)),"x"!==o&&(u<d?g=d-i.startTop:u>l&&(g=l-i.startTop)),i.draggerRef&&(i.draggerRef.style.transform="translate("+c+"px, "+g+"px)")},i.startTouchDrag=function(e){var t=e.touches[0];t&&(i.axisX=t.pageX,i.axisY=t.pageY,i.props.disabled||i.enableDrag(!0))},i.endDrag=function(){i.isDragging&&(i.calcPosition(),i.draggerRef&&(i.draggerRef.style.transform=""),i.props.showDragArea&&i.hideDragArea()),i.__moveDisposer&&(i.__moveDisposer(),i.__moveDisposer=void 0),i.__clickDisposer&&requestAnimationFrame(function(){i.__clickDisposer&&(i.__clickDisposer(),i.__clickDisposer=void 0)}),i.__upDisposer&&(i.__upDisposer(),i.__upDisposer=void 0),i.__bodyClassDisposer&&(i.__bodyClassDisposer(),i.__bodyClassDisposer=void 0),i.isDragging=!1},i.showDragArea=function(){if(i.props.showDragArea&&i.dragAreaRef){var e=i.props.lockAxis,t=i.dragPositionBoundaries,r=t.minX,o=t.maxX,a=t.minY,s=t.maxY,n=i.dragBoxSize;i.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",i.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===e?(i.dragAreaRef.style.width=o-r+n.width+"px",i.dragAreaRef.style.height="2px",i.dragAreaRef.style.left=r+"px",i.dragAreaRef.style.top=i.startTop+n.height/2+"px"):"y"===e?(i.dragAreaRef.style.width="2px",i.dragAreaRef.style.height=s-a+n.height+"px",i.dragAreaRef.style.left=i.startLeft+n.width/2+"px",i.dragAreaRef.style.top=a+"px"):(i.dragAreaRef.style.width=o-r+n.width+"px",i.dragAreaRef.style.height=s-a+n.height+"px",i.dragAreaRef.style.left=r+"px",i.dragAreaRef.style.top=a+"px"),i.dragAreaRef.style.display="block"}},i.hideDragArea=function(){i.dragAreaRef&&(i.dragAreaRef.style.display="none")},i.calcPosition=function(){var e=i.props.lockAxis,t=i.dragPositionBoundaries,r=t.minX,o=t.maxX,a=t.minY,s=t.maxY,n=i.getContainerRect(),d=n.height,p=n.width,h=i.startTop,c=i.startLeft;"y"!==e&&(c+=i.dX),"x"!==e&&(h+=i.dY);var g=l(h,a,s),f=l(c,r,o),u=d-g-i.dragBoxSize.height,v=p-f-i.dragBoxSize.width;g===i.state.top&&f===i.state.left&&i.state.bottom===u&&i.state.right===v||i.setState({top:g,left:f,bottom:u,right:v}),i.startTop=g,i.startLeft=f,i.dX=i.dY=0};var o=t.placement,a=t.offsetY,s=void 0===a?20:a,n=t.offsetX,d=void 0===n?20:n,p=(void 0===o?"bottom-right":o).split("-"),c=p[0],g=p[1];return i.state={top:"top"===c?s:void 0,bottom:"bottom"===c?s:void 0,left:"left"===g?d:void 0,right:"right"===g?d:void 0},i}var c,g;g=e,(c=i).prototype=Object.create(g.prototype),c.prototype.constructor=c,s(c,g);var f,u,v=i.prototype;return v.getContainer=function(e){void 0===e&&(e=!0);var t,i=this.props.positionMode,o=void 0===i?"fixed":i;return this.container&&e&&this.prePositionMode===o&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=o,this.preDraggerRef=this.draggerRef,this.container="fixed"===o?(t=this.draggerRef)?r.findParent(t,function(e){return d(e,!1)},{excludeOwn:!0}):document.documentElement:function(e){return e?r.findParent(e,function(e){return d(e,!0)},{excludeOwn:!0}):document.body}(this.draggerRef)),this.container},v.getContainerRect=function(){var e=this.getContainer(!1);if(!e)return{width:window.innerWidth,height:window.innerHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};var t=e.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.borderLeftWidth)||0,o=parseFloat(r.borderTopWidth)||0,a=parseFloat(r.borderRightWidth)||0,s=parseFloat(r.borderBottomWidth)||0;return{width:t.width/this.cachedScaleX-i-a-(e.offsetWidth-e.clientWidth-i-a),height:t.height/this.cachedScaleY-o-s-(e.offsetHeight-e.clientHeight-o-s),left:t.left/this.cachedScaleX,top:t.top/this.cachedScaleY,scrollLeft:e.scrollLeft,scrollTop:e.scrollTop,borderLeftWidth:i,borderTopWidth:o}},v.reportStartPosition=function(){if(this.draggerRef){var e=function(e){if(!e)return{scaleX:1,scaleY:1};var t=e.getBoundingClientRect(),r=1e4;return{scaleX:e.offsetWidth>0?Math.round(t.width/e.offsetWidth*r)/r:1,scaleY:e.offsetHeight>0?Math.round(t.height/e.offsetHeight*r)/r:1}}(this.getContainer()),t=e.scaleY;this.cachedScaleX=e.scaleX,this.cachedScaleY=t;var r=this.draggerRef.getBoundingClientRect(),i=r.top,o=r.left,a=this.getContainerRect();this.startTop=i/t-a.top+a.scrollTop-a.borderTopWidth,this.startLeft=o/t-a.left+a.scrollLeft-a.borderLeftWidth}},v.componentDidMount=function(){var e=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=r.addEventListener(window,"resize",function(){e.calcPosition()}),"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)&&this.draggerRef&&(this.__preventScrollDisposer=r.addEventListener(this.draggerRef,"touchmove",function(e){e.preventDefault()}))},v.componentWillUnmount=function(){var e,t,r,i,o,a;null==(e=this.__resizeDisposer)||e.call(this),null==(t=this.__bodyClassDisposer)||t.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(i=this.__clickDisposer)||i.call(this),null==(o=this.__upDisposer)||o.call(this),null==(a=this.__preventScrollDisposer)||a.call(this)},v.render=function(){var e=this,r=this.props,i=r.className,s=r.zIndex,n=r.children,d=r.showDragArea,l=r.positionMode,p=void 0===l?"fixed":l,c=this.startDrag,g=this.startTouchDrag,f=this.endDrag,u=a({zIndex:s},this.position,{position:p});/*#__PURE__*/return o.default.createElement(Fragment,null,d&&/*#__PURE__*/o.default.createElement("div",{className:h("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:p,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__*/o.default.createElement("div",{className:t.classNames(h("container"),i),style:u,ref:function(t){e.draggerRef=t},onMouseDownCapture:c,onMouseUpCapture:f,onTouchStartCapture:g,onTouchEndCapture:f},n))},f=i,(u=[{key:"dragBoxSize",get:function(){var e=0,t=0;return this.draggerRef&&(e=this.draggerRef.offsetWidth,t=this.draggerRef.offsetHeight),{height:t,width:e}}},{key:"dragPositionBoundaries",get:function(){var e=this.props,t=e.boundsX,r=e.boundsY,i=e.placement,o=void 0===i?"bottom-right":i,a=this.dragBoxSize,s=this.getContainerRect(),n=s.width,d=s.height,p=o.split("-"),h=p[0],c=p[1],g={minX:0,maxX:Math.max(n-a.width,0),minY:0,maxY:Math.max(d-a.height,0)},f=g.minX,u=g.maxX,v=g.minY,m=g.maxY;if(t){var x=t[0],_=t[1];"left"===c?(void 0!==x&&(f=Math.max(f,x)),void 0!==_&&(u=Math.min(u,_))):void 0!==x&&void 0!==_?(f=Math.max(f,n-_-a.width),u=Math.min(u,n-x-a.width)):void 0!==x?u=Math.min(u,n-x-a.width):void 0!==_&&(f=Math.max(f,n-_-a.width))}if(r){var y=r[0],D=r[1];"top"===h?(void 0!==y&&(v=Math.max(v,y)),void 0!==D&&(m=Math.min(m,D))):void 0!==y&&void 0!==D?(v=Math.max(v,d-D-a.height),m=Math.min(m,d-y-a.height)):void 0!==y?m=Math.min(m,d-y-a.height):void 0!==D&&(v=Math.max(v,d-D-a.height))}return{minX:f=l(f,g.minX,g.maxX),maxX:u=l(u,f,g.maxX),minY:v=l(v,g.minY,g.maxY),maxY:m=l(m,v,g.maxY)}}},{key:"curPositionKey",get:function(){var e=this.props.placement;return e&&p.includes(e)||(e="bottom-right"),e.split("-")}},{key:"position",get:function(){var e=this.curPositionKey,t=e[0],r=e[1],i={};return void 0!==this.state[t]&&(i[t]=this.state[t]+"px"),void 0!==this.state[r]&&(i[r]=this.state[r]+"px"),i}}])&&function(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,n(i.key),i)}}(f.prototype,u),Object.defineProperty(f,"prototype",{writable:!1}),f}(o.default.Component);c.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"},exports.DraggableBox=c,exports.c=h,exports.default=c;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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","\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} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\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        positionMode: 'fixed',\n    };\n\n    constructor(props: DraggableBoxProps) {\n        super(props);\n        \n        const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 简化状态初始化\n        this.state = {\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    }\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: window.innerWidth,\n                height: 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\n    // 缓存缩放比例，避免在 dragging 中频繁计算\n    cachedScaleX = 1;\n    cachedScaleY = 1;\n\n    __moveDisposer?: () => void;\n    __clickDisposer?: () => void;\n    __bodyClassDisposer?: () => void;\n    __upDisposer?: () => void;\n    __resizeDisposer?: () => void;\n\n    dragAreaRef: HTMLDivElement | null = null;\n\n    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        }\n    }\n\n    enableDrag = () => {\n        this.reportStartPosition();\n        this.__moveDisposer?.();\n        this.__moveDisposer = addEventListener(document, 'mousemove', (evt) => {\n            // INFO: 移动过程中禁止click事件\n            if (!this.__clickDisposer) {\n                const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n                // INFO: 移动超过5px？？ 确保用户有真实的移动意愿，而不是手抖～～\n                if (moveDistanse > 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            this.dragging(evt);\n        }, true);\n\n        this.__upDisposer?.();\n        this.__upDisposer = addEventListener(\n            document,\n            'mouseup',\n            (evt) => {\n                this.endDrag();\n                evt.stopPropagation();\n                evt.preventDefault();\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) => {\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        this.dX = (evt.pageX - (this.axisX || 0)) / scaleX;\n        this.dY = (evt.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        \n        if (this.draggerRef) {\n            this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n        }\n        evt.stopPropagation();\n    };\n\n    endDrag = () => {\n        if (this.isDragging) {\n            this.calcPosition();\n            if (this.draggerRef) {\n                this.draggerRef.style.transform = '';\n            }\n            \n            // 隐藏拖拽区域\n            if (this.props.showDragArea) {\n                this.hideDragArea();\n            }\n        }\n\n        this.__moveDisposer?.();\n        this.__moveDisposer = undefined;\n        if (this.__clickDisposer) {\n          requestAnimationFrame(() => {\n            if (this.__clickDisposer) {\n              this.__clickDisposer();\n              this.__clickDisposer = undefined;\n            }\n          });\n        }\n        this.__upDisposer?.();\n        this.__upDisposer = undefined;\n        this.__bodyClassDisposer?.();\n        this.__bodyClassDisposer = undefined;\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            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n            this.setState({\n                top: realTop,\n                left: realLeft,\n                bottom: realBottom,\n                right: realRight\n            });\n        }\n        this.startTop = realTop;\n        this.startLeft = realLeft;\n        this.dX = this.dY = 0;\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    componentWillUnmount() {\n        this.__resizeDisposer?.();\n        this.__bodyClassDisposer?.();\n        this.__moveDisposer?.();\n        this.__clickDisposer?.();\n        this.__upDisposer?.();\n    }\n\n    render() {\n        const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n        const { startDrag, endDrag } = this;\n        const stl = {\n            zIndex,\n            ...this.position,\n            position: positionMode\n        };\n        return (\n            <>\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                    onMouseDown={startDrag}\n                    onMouseUp={endDrag}\n                >\n                    {children}\n                </div>\n            </>\n        );\n    }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","prefixClassname","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","reportStartPosition","addEventListener","document","evt","sqrt","pow","stopPropagation","addClass","body","undefined","showDragArea","dragging","endDrag","preventDefault","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","scaleY","translateX","translateY","potentialLeft","potentialTop","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getContainer","useCache","dom","_this$props$positionM","positionMode","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","_getScaleRatio","scaleX","rect","magnification","round","getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","render","_this3","_this$props","className","zIndex","children","_this$props$positionM2","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","key","get","_this$props2","boundsX","boundsY","_this$props2$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}
+{"version":3,"file":"index.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 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        \n        const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 简化状态初始化\n        this.state = {\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    }\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: window.innerWidth,\n                height: 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\n    // 缓存缩放比例，避免在 dragging 中频繁计算\n    cachedScaleX = 1;\n    cachedScaleY = 1;\n\n    __moveDisposer?: () => void;\n    __clickDisposer?: () => void;\n    __bodyClassDisposer?: () => void;\n    __upDisposer?: () => void;\n    __resizeDisposer?: () => void;\n    __preventScrollDisposer?: () => void;\n\n    dragAreaRef: HTMLDivElement | null = null;\n\n    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        }\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            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        \n        if (this.draggerRef) {\n            this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n        }\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            this.calcPosition();\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            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n            this.setState({\n                top: realTop,\n                left: realLeft,\n                bottom: realBottom,\n                right: realRight\n            });\n        }\n        this.startTop = realTop;\n        this.startLeft = realLeft;\n        this.dX = this.dY = 0;\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            <>\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            </>\n        );\n    }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","prefixClassname","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","reportStartPosition","addEventListener","document","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","body","undefined","showDragArea","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","scaleY","TouchEvent","touch","touches","translateX","translateY","potentialLeft","potentialTop","startTouchDrag","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getContainer","useCache","dom","_this$props$positionM","positionMode","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","_getScaleRatio","scaleX","rect","magnification","round","getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","navigator","maxTouchPoints","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props","className","zIndex","children","_this$props$positionM2","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props2","boundsX","boundsY","_this$props2$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}