@ohkit/draggable-box 0.0.1

package/dist/index.css

@@ -0,0 +1,2 @@
+.ohkit-draggable-box__container{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ohkit-draggable-box__moving{cursor:move!important}.ohkit-draggable-box__drag-area{opacity:.7;transition:opacity .2s ease-in-out}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,gCAEE,WAAY,CADZ,wBAAiB,CAAjB,qBAAiB,CAAjB,gBAEF,CACA,6BACE,qBACF,CACA,gCAEE,UAAY,CADZ,kCAEF","file":"index.css","sourcesContent":[".ohkit-draggable-box__container {\n  user-select: none;\n  cursor: grab;\n}\n.ohkit-draggable-box__moving {\n  cursor: move !important;\n}\n.ohkit-draggable-box__drag-area {\n  transition: opacity 0.2s ease-in-out;\n  opacity: 0.7;\n}"]}

package/dist/index.es.js

@@ -0,0 +1,2 @@
+import t from"react";import{prefixClassname as e,classNames as r}from"@ohkit/prefix-classname";import{findParent as o,addEventListener as i,addClass as a}from"@ohkit/dom-helper";function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},s.apply(null,arguments)}function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}function d(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}var l=["top-left","top-right","bottom-left","bottom-right"],g=e("ohkit-draggable-box__"),p=/*#__PURE__*/function(e){function p(t){var r;(r=e.call(this,t)||this).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=i(document,"mousemove",function(t){r.__clickDisposer||Math.sqrt(Math.pow(r.dX,2)+Math.pow(r.dY,2))>5&&(r.__clickDisposer=i(document,"click",function(t){t.stopPropagation()},!0),r.__bodyClassDisposer=a([document.body,r.draggerRef],g("moving"))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),r.dragging(t)},!0),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=i(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,o=r.dragPositionBoundaries,i=o.minX,a=o.maxX,s=o.minY,n=o.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,g=r.dY;"x"===e?g=0:"y"===e&&(l=0);var p=r.startLeft+l,h=r.startTop+g;"y"!==e&&(p<i?l=i-r.startLeft:p>a&&(l=a-r.startLeft)),"x"!==e&&(h<s?g=s-r.startTop:h>n&&(g=n-r.startTop)),r.draggerRef&&(r.draggerRef.style.transform="translate("+l+"px, "+g+"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,o=e.minX,i=e.maxX,a=e.minY,s=e.maxY,n=r.dragBoxSize;r.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",r.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height="2px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=r.startTop+n.height/2+"px",r.dragAreaRef.style.border="none",r.dragAreaRef.style.backgroundColor="transparent",r.dragAreaRef.style.backgroundImage="linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",r.dragAreaRef.style.backgroundSize="4px 2px"):"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.border="none",r.dragAreaRef.style.backgroundColor="transparent",r.dragAreaRef.style.backgroundImage="linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",r.dragAreaRef.style.backgroundSize="2px 4px"):(r.dragAreaRef.style.width=i-o+n.width+"px",r.dragAreaRef.style.height=s-a+n.height+"px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=a+"px"),r.dragAreaRef.style.display="block"}},r.hideDragArea=function(){r.dragAreaRef&&(r.dragAreaRef.style.display="none")},r.calcPosition=function(){var t=r.props.lockAxis,e=r.dragPositionBoundaries,o=e.minX,i=e.maxX,a=e.maxY,s=r.windowSize,n=r.startTop,d=r.startLeft;"y"!==t&&(d+=r.dX),"x"!==t&&(n+=r.dY);var l=Math.min(Math.max(e.minY,n),a),g=Math.min(Math.max(o,d),i),p=s.height-l-r.dragBoxSize.height,h=s.width-g-r.dragBoxSize.width;l===r.state.top&&g===r.state.left&&r.state.bottom===p&&r.state.right===h||r.setState({top:l,left:g,bottom:p,right:h}),r.startTop=l,r.startLeft=g,r.dX=r.dY=0};var o=t.placement,s=t.offsetY,n=void 0===s?20:s,d=t.offsetX,l=void 0===d?20:d,p=(void 0===o?"bottom-right":o).split("-"),h=p[0],c=p[1];return r.state={top:"top"===h?n:void 0,bottom:"bottom"===h?n:void 0,left:"left"===c?l:void 0,right:"right"===c?l:void 0},r}var h,c;c=e,(h=p).prototype=Object.create(c.prototype),h.prototype.constructor=h,n(h,c);var f,u,m=p.prototype;return m.getOtherYKey=function(t){return"top"===t?"bottom":"top"},m.getOtherXKey=function(t){return"left"===t?"right":"left"},m.updatePosition=function(t,e){var r,o=this.getOtherYKey(t),i=this.getOtherXKey(e);this.setState(((r={})[o]=this.dragPositionRang.height-(this.state[t]||0),r[i]=this.dragPositionRang.width-(this.state[e]||0),r))},m.getContainer=function(){var t,e=this.props.positionMode;return"fixed"===(void 0===e?"fixed":e)?(t=this.draggerRef)&&o(t,function(t){var e=window.getComputedStyle(t),r=e.getPropertyValue("transform"),o=e.getPropertyValue("filter"),i=e.getPropertyValue("perspective");if("none"!==r||"none"!==o||"none"!==i)return!0},{excludeOwn:!0})||document.documentElement:function(t){return t&&o(t,function(t){if("static"!==window.getComputedStyle(t).getPropertyValue("position"))return!0},{excludeOwn:!0})||document.body}(this.draggerRef)},m.getContainerRect=function(){var t=this.props.positionMode,e="fixed"===(void 0===t?"fixed":t),r=this.getContainer(),o=r.getBoundingClientRect(),i=window.document.scrollingElement||window.document.body,a=r===window.document.body||r===window.document.documentElement;return{width:o.width,height:o.height,left:e&&a?Math.max(o.left,0):o.left+i.scrollLeft,top:e&&a?Math.max(o.top,0):o.top+i.scrollTop,scrollLeft:e&&a?0:r.scrollLeft,scrollTop:e&&a?0:r.scrollTop,scrollerScrollLeft:e&&a?0:i.scrollLeft,scrollerScrollTop:e&&a?0:i.scrollTop}},m.reportStartPosition=function(){if(this.draggerRef){var t=this.draggerRef.getBoundingClientRect(),e=t.top,r=t.left,o=this.getContainerRect(),i=function(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect();return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*10)/10:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*10)/10:1}}(this.draggerRef),a=i.scaleX,s=i.scaleY;this.cachedScaleX=a,this.cachedScaleY=s,this.startTop=(e-o.top+o.scrollerScrollTop)/s+o.scrollTop,this.startLeft=(r-o.left+o.scrollerScrollLeft)/a+o.scrollLeft}},m.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=i(window,"resize",function(){t.calcPosition()})},m.componentWillUnmount=function(){var t,e,r,o,i;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this)},m.render=function(){var e=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,c=this.endDrag,f=s({zIndex:a},this.position,{position:p});/*#__PURE__*/return t.createElement(Fragment,null,d&&/*#__PURE__*/t.createElement("div",{className:g("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(g("container"),i),style:f,ref:function(t){e.draggerRef=t},onMouseDown:h,onMouseUp:c},n))},f=p,(u=[{key:"windowSize",get:function(){var t=this.getContainer();return{height:t.clientHeight,width:t.clientWidth}}},{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=this.dragBoxSize,a=this.windowSize,s=(void 0===o?"bottom-right":o).split("-"),n=s[0],d=0,l=a.width-i.width,g=0,p=a.height-i.height;if(e){var h=e[0],c=e[1];if("left"===s[1])void 0!==h&&(d=Math.max(d,h)),void 0!==c&&(l=Math.min(l,c));else if(void 0!==h&&void 0!==c?(d=Math.max(d,a.width-c-i.width),l=Math.min(l,a.width-h-i.width)):void 0!==h?l=Math.min(l,a.width-h-i.width):void 0!==c&&(d=Math.max(d,a.width-c-i.width)),d>l){var f=[l,d];d=f[0],l=f[1]}}if(r){var u=r[0],m=r[1];if("top"===n)void 0!==u&&(g=Math.max(g,u)),void 0!==m&&(p=Math.min(p,m));else if(void 0!==u&&void 0!==m?(g=Math.max(g,a.height-m-i.height),p=Math.min(p,a.height-u-i.height)):void 0!==u?p=Math.min(p,a.height-u-i.height):void 0!==m&&(g=Math.max(g,a.height-m-i.height)),g>p){var v=[p,g];g=v[0],p=v[1]}}return{minX:d,maxX:l,minY:g,maxY:p}}},{key:"dragPositionRang",get:function(){var t=this.dragPositionBoundaries;return{width:t.maxX,height:t.maxY}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&l.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,d(o.key),o)}}(f.prototype,u),Object.defineProperty(f,"prototype",{writable:!1}),f}(t.Component);p.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"};export{p as DraggableBox,g as c,p as default};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/index.tsx","../src/utils.ts"],"sourcesContent":["\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} 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    getOtherYKey(yKey: 'top' | 'bottom') {\n        return yKey === 'top' ? 'bottom' : 'top';\n    }\n\n    getOtherXKey(xKey: 'left' | 'right') {\n        return xKey === 'left' ? 'right' : 'left';\n    }\n\n    // TODO:\n    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right') {\n        const oYKey = this.getOtherYKey(yKey);\n        const oXKey = this.getOtherXKey(xKey);\n        this.setState({\n            [oYKey]: this.dragPositionRang.height - (this.state[yKey] || 0),\n            [oXKey]: this.dragPositionRang.width - (this.state[xKey] || 0),\n        });\n    }\n    /**\n     * 获取定位容器\n     * 根据 positionMode 返回对应的定位父元素\n     */\n    private getContainer(): HTMLElement {\n        const { positionMode = 'fixed' } = this.props;\n        return positionMode === 'fixed' \n            ? findFixedPositionParent(this.draggerRef) \n            : findAbsolutePositionParent(this.draggerRef);\n    }\n\n    /**\n     * 获取容器的尺寸和位置信息\n     */\n    private getContainerRect() {\n        const { positionMode = 'fixed' } = this.props;\n        const isFixed = positionMode === 'fixed';\n        const container = this.getContainer();\n        const containerRect = container.getBoundingClientRect();\n        const rootScrollingElement = window.document.scrollingElement || window.document.body;\n        const isRoot = container === window.document.body || container === window.document.documentElement;\n        return {\n            width: containerRect.width,\n            height: containerRect.height,\n            left: isFixed && isRoot ? Math.max(containerRect.left, 0) : containerRect.left + rootScrollingElement.scrollLeft,\n            top: isFixed && isRoot ? Math.max(containerRect.top, 0) : containerRect.top + rootScrollingElement.scrollTop,\n            scrollLeft: isFixed && isRoot ? 0 : container.scrollLeft, // container.scrollLeft,\n            scrollTop: isFixed && isRoot ? 0 : container.scrollTop, // container.scrollTop\n            scrollerScrollLeft: isFixed && isRoot ? 0 : rootScrollingElement.scrollLeft,\n            scrollerScrollTop: isFixed && isRoot ? 0 : rootScrollingElement.scrollTop\n        };\n    }\n\n    get windowSize() {\n        const container = this.getContainer();\n        const { clientWidth, clientHeight } = container;\n        return {\n            height: clientHeight,\n            width: clientWidth\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 windowSize = this.windowSize;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 初始化边界\n        let minX = 0;\n        let maxX = windowSize.width - dragSize.width;\n        let minY = 0;\n        let maxY = windowSize.height - dragSize.height;\n\n        // 处理X轴边界\n        if (boundsX) {\n            const [minBound, maxBound] = boundsX;\n            \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, windowSize.width - maxBound - dragSize.width);\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minX > maxX) {\n                    [minX, maxX] = [maxX, minX];\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, windowSize.height - maxBound - dragSize.height);\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minY > maxY) {\n                    [minY, maxY] = [maxY, minY];\n                }\n            }\n        }\n\n        return { minX, maxX, minY, maxY };\n    }\n    \n    // 保持向后兼容\n    get dragPositionRang() {\n        const { maxX, maxY } = this.dragPositionBoundaries;\n        return { width: maxX, height: 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            const { top, left } = this.draggerRef.getBoundingClientRect();\n            const containerRect = this.getContainerRect();\n            // console.log(containerRect, 'containerRect');\n            \n            // 获取缩放比例\n            const { scaleX, scaleY } = getScaleRatio(this.draggerRef);\n            this.cachedScaleX = scaleX;\n            this.cachedScaleY = scaleY;\n            \n            // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n            this.startTop = (top - containerRect.top + containerRect.scrollerScrollTop) / scaleY + containerRect.scrollTop;\n            this.startLeft = (left - containerRect.left + containerRect.scrollerScrollLeft) / scaleX + containerRect.scrollLeft;\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '4px 2px'; // 虚线模式\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '2px 4px'; // 虚线模式\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 containerSize = this.windowSize;\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 = Math.min(Math.max(minY, newTop), maxY);\n        const realLeft = Math.min(Math.max(minX, newLeft), maxX);\n        const realBottom = containerSize.height - realTop - this.dragBoxSize.height;\n        const realRight = containerSize.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, 'calcPosition y');\n            // console.log(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;","import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.documentElement;\n    }\n    const fixedPositionParent = findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const transform = style.getPropertyValue('transform');\n        const filter = style.getPropertyValue('filter');\n        const perspective = style.getPropertyValue('perspective');\n        \n        // 检查是否有影响 fixed 定位的属性\n        if (transform !== 'none' || filter !== 'none' || perspective !== 'none') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.documentElement; // 没有找到，返回 window（通过 document.documentElement）\n    return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的 position 不为 static 的元素\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.body;\n    }\n    return findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const position = style.getPropertyValue('position');\n        if (position !== 'static') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.body;\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    // 扩大10倍进行计算，避免浮点数精度问题\n    const scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * 10) / 10 : 1;\n    const scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * 10) / 10 : 1;\n    // console.log('scaleX', scaleX, 'scaleY', scaleY);\n    return { scaleX, scaleY };\n}\n"],"names":["ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","reportStartPosition","addEventListener","document","evt","Math","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","style","transform","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","backgroundImage","backgroundSize","display","_this$dragPositionBou3","containerSize","windowSize","newTop","newLeft","realTop","min","max","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getOtherYKey","yKey","getOtherXKey","xKey","updatePosition","_this$setState","oYKey","oXKey","dragPositionRang","getContainer","dom","_this$props$positionM","positionMode","findParent","parent","window","getComputedStyle","getPropertyValue","filter","perspective","excludeOwn","documentElement","findAbsolutePositionParent","getContainerRect","_this$props$positionM2","isFixed","container","containerRect","getBoundingClientRect","rootScrollingElement","scrollingElement","isRoot","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","_this$draggerRef$getB","_getScaleRatio","scaleX","rect","offsetWidth","round","offsetHeight","getScaleRatio","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","render","_this3","_this$props","className","zIndex","children","_this$props$positionM3","stl","_extends","position","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","key","get","clientHeight","clientWidth","_this$props2","boundsX","boundsY","_this$props2$placemen","_placement$split2","minBound","maxBound","_ref","_ref2","_this$dragPositionBou4","includes","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,2 @@
+var t=require("react"),e=require("@ohkit/prefix-classname"),r=require("@ohkit/dom-helper");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=/*#__PURE__*/o(t);function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},a.apply(null,arguments)}function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}function s(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+""}var d=["top-left","top-right","bottom-left","bottom-right"],l=e.prefixClassname("ohkit-draggable-box__"),g=/*#__PURE__*/function(t){function o(e){var o;(o=t.call(this,e)||this).draggerRef=null,o.isDragging=!1,o.axisX=void 0,o.axisY=void 0,o.dX=0,o.dY=0,o.startTop=0,o.startLeft=0,o.cachedScaleX=1,o.cachedScaleY=1,o.__moveDisposer=void 0,o.__clickDisposer=void 0,o.__bodyClassDisposer=void 0,o.__upDisposer=void 0,o.__resizeDisposer=void 0,o.dragAreaRef=null,o.enableDrag=function(){o.reportStartPosition(),null==o.__moveDisposer||o.__moveDisposer(),o.__moveDisposer=r.addEventListener(document,"mousemove",function(t){o.__clickDisposer||Math.sqrt(Math.pow(o.dX,2)+Math.pow(o.dY,2))>5&&(o.__clickDisposer=r.addEventListener(document,"click",function(t){t.stopPropagation()},!0),o.__bodyClassDisposer=r.addClass([document.body,o.draggerRef],l("moving"))||void 0,o.props.showDragArea&&o.dragAreaRef&&o.showDragArea()),o.dragging(t)},!0),null==o.__upDisposer||o.__upDisposer(),o.__upDisposer=r.addEventListener(document,"mouseup",function(t){o.endDrag(),t.stopPropagation(),t.preventDefault()},!0)},o.startDrag=function(t){2!==t.nativeEvent.button&&(o.axisX=t.nativeEvent.pageX,o.axisY=t.nativeEvent.pageY,o.props.disabled||o.enableDrag())},o.dragging=function(t){o.isDragging=!0;var e=o.props.lockAxis,r=o.dragPositionBoundaries,i=r.minX,a=r.maxX,n=r.minY,s=r.maxY,d=o.cachedScaleY;o.dX=(t.pageX-(o.axisX||0))/o.cachedScaleX,o.dY=(t.pageY-(o.axisY||0))/d;var l=o.dX,g=o.dY;"x"===e?g=0:"y"===e&&(l=0);var p=o.startLeft+l,h=o.startTop+g;"y"!==e&&(p<i?l=i-o.startLeft:p>a&&(l=a-o.startLeft)),"x"!==e&&(h<n?g=n-o.startTop:h>s&&(g=s-o.startTop)),o.draggerRef&&(o.draggerRef.style.transform="translate("+l+"px, "+g+"px)"),t.stopPropagation()},o.endDrag=function(){o.isDragging&&(o.calcPosition(),o.draggerRef&&(o.draggerRef.style.transform=""),o.props.showDragArea&&o.hideDragArea()),null==o.__moveDisposer||o.__moveDisposer(),o.__moveDisposer=void 0,o.__clickDisposer&&requestAnimationFrame(function(){o.__clickDisposer&&(o.__clickDisposer(),o.__clickDisposer=void 0)}),null==o.__upDisposer||o.__upDisposer(),o.__upDisposer=void 0,null==o.__bodyClassDisposer||o.__bodyClassDisposer(),o.__bodyClassDisposer=void 0,o.isDragging=!1},o.showDragArea=function(){if(o.props.showDragArea&&o.dragAreaRef){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.minY,n=e.maxY,s=o.dragBoxSize;o.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",o.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(o.dragAreaRef.style.width=i-r+s.width+"px",o.dragAreaRef.style.height="2px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=o.startTop+s.height/2+"px",o.dragAreaRef.style.border="none",o.dragAreaRef.style.backgroundColor="transparent",o.dragAreaRef.style.backgroundImage="linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",o.dragAreaRef.style.backgroundSize="4px 2px"):"y"===t?(o.dragAreaRef.style.width="2px",o.dragAreaRef.style.height=n-a+s.height+"px",o.dragAreaRef.style.left=o.startLeft+s.width/2+"px",o.dragAreaRef.style.top=a+"px",o.dragAreaRef.style.border="none",o.dragAreaRef.style.backgroundColor="transparent",o.dragAreaRef.style.backgroundImage="linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",o.dragAreaRef.style.backgroundSize="2px 4px"):(o.dragAreaRef.style.width=i-r+s.width+"px",o.dragAreaRef.style.height=n-a+s.height+"px",o.dragAreaRef.style.left=r+"px",o.dragAreaRef.style.top=a+"px"),o.dragAreaRef.style.display="block"}},o.hideDragArea=function(){o.dragAreaRef&&(o.dragAreaRef.style.display="none")},o.calcPosition=function(){var t=o.props.lockAxis,e=o.dragPositionBoundaries,r=e.minX,i=e.maxX,a=e.maxY,n=o.windowSize,s=o.startTop,d=o.startLeft;"y"!==t&&(d+=o.dX),"x"!==t&&(s+=o.dY);var l=Math.min(Math.max(e.minY,s),a),g=Math.min(Math.max(r,d),i),p=n.height-l-o.dragBoxSize.height,h=n.width-g-o.dragBoxSize.width;l===o.state.top&&g===o.state.left&&o.state.bottom===p&&o.state.right===h||o.setState({top:l,left:g,bottom:p,right:h}),o.startTop=l,o.startLeft=g,o.dX=o.dY=0};var i=e.placement,a=e.offsetY,n=void 0===a?20:a,s=e.offsetX,d=void 0===s?20:s,g=(void 0===i?"bottom-right":i).split("-"),p=g[0],h=g[1];return o.state={top:"top"===p?n:void 0,bottom:"bottom"===p?n:void 0,left:"left"===h?d:void 0,right:"right"===h?d:void 0},o}var g,p;p=t,(g=o).prototype=Object.create(p.prototype),g.prototype.constructor=g,n(g,p);var h,f,c=o.prototype;return c.getOtherYKey=function(t){return"top"===t?"bottom":"top"},c.getOtherXKey=function(t){return"left"===t?"right":"left"},c.updatePosition=function(t,e){var r,o=this.getOtherYKey(t),i=this.getOtherXKey(e);this.setState(((r={})[o]=this.dragPositionRang.height-(this.state[t]||0),r[i]=this.dragPositionRang.width-(this.state[e]||0),r))},c.getContainer=function(){var t,e=this.props.positionMode;return"fixed"===(void 0===e?"fixed":e)?(t=this.draggerRef)&&r.findParent(t,function(t){var e=window.getComputedStyle(t),r=e.getPropertyValue("transform"),o=e.getPropertyValue("filter"),i=e.getPropertyValue("perspective");if("none"!==r||"none"!==o||"none"!==i)return!0},{excludeOwn:!0})||document.documentElement:function(t){return t&&r.findParent(t,function(t){if("static"!==window.getComputedStyle(t).getPropertyValue("position"))return!0},{excludeOwn:!0})||document.body}(this.draggerRef)},c.getContainerRect=function(){var t=this.props.positionMode,e="fixed"===(void 0===t?"fixed":t),r=this.getContainer(),o=r.getBoundingClientRect(),i=window.document.scrollingElement||window.document.body,a=r===window.document.body||r===window.document.documentElement;return{width:o.width,height:o.height,left:e&&a?Math.max(o.left,0):o.left+i.scrollLeft,top:e&&a?Math.max(o.top,0):o.top+i.scrollTop,scrollLeft:e&&a?0:r.scrollLeft,scrollTop:e&&a?0:r.scrollTop,scrollerScrollLeft:e&&a?0:i.scrollLeft,scrollerScrollTop:e&&a?0:i.scrollTop}},c.reportStartPosition=function(){if(this.draggerRef){var t=this.draggerRef.getBoundingClientRect(),e=t.top,r=t.left,o=this.getContainerRect(),i=function(t){if(!t)return{scaleX:1,scaleY:1};var e=t.getBoundingClientRect();return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*10)/10:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*10)/10:1}}(this.draggerRef),a=i.scaleX,n=i.scaleY;this.cachedScaleX=a,this.cachedScaleY=n,this.startTop=(e-o.top+o.scrollerScrollTop)/n+o.scrollTop,this.startLeft=(r-o.left+o.scrollerScrollLeft)/a+o.scrollLeft}},c.componentDidMount=function(){var t=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=r.addEventListener(window,"resize",function(){t.calcPosition()})},c.componentWillUnmount=function(){var t,e,r,o,i;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(r=this.__moveDisposer)||r.call(this),null==(o=this.__clickDisposer)||o.call(this),null==(i=this.__upDisposer)||i.call(this)},c.render=function(){var t=this,r=this.props,o=r.className,n=r.zIndex,s=r.children,d=r.showDragArea,g=r.positionMode,p=void 0===g?"fixed":g,h=this.startDrag,f=this.endDrag,c=a({zIndex:n},this.position,{position:p});/*#__PURE__*/return i.default.createElement(Fragment,null,d&&/*#__PURE__*/i.default.createElement("div",{className:l("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:(n||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/i.default.createElement("div",{className:e.classNames(l("container"),o),style:c,ref:function(e){t.draggerRef=e},onMouseDown:h,onMouseUp:f},s))},h=o,(f=[{key:"windowSize",get:function(){var t=this.getContainer();return{height:t.clientHeight,width:t.clientWidth}}},{key:"dragBoxSize",get:function(){var t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}},{key:"dragPositionBoundaries",get:function(){var t=this.props,e=t.boundsX,r=t.boundsY,o=t.placement,i=this.dragBoxSize,a=this.windowSize,n=(void 0===o?"bottom-right":o).split("-"),s=n[0],d=0,l=a.width-i.width,g=0,p=a.height-i.height;if(e){var h=e[0],f=e[1];if("left"===n[1])void 0!==h&&(d=Math.max(d,h)),void 0!==f&&(l=Math.min(l,f));else if(void 0!==h&&void 0!==f?(d=Math.max(d,a.width-f-i.width),l=Math.min(l,a.width-h-i.width)):void 0!==h?l=Math.min(l,a.width-h-i.width):void 0!==f&&(d=Math.max(d,a.width-f-i.width)),d>l){var c=[l,d];d=c[0],l=c[1]}}if(r){var u=r[0],m=r[1];if("top"===s)void 0!==u&&(g=Math.max(g,u)),void 0!==m&&(p=Math.min(p,m));else if(void 0!==u&&void 0!==m?(g=Math.max(g,a.height-m-i.height),p=Math.min(p,a.height-u-i.height)):void 0!==u?p=Math.min(p,a.height-u-i.height):void 0!==m&&(g=Math.max(g,a.height-m-i.height)),g>p){var v=[p,g];g=v[0],p=v[1]}}return{minX:d,maxX:l,minY:g,maxY:p}}},{key:"dragPositionRang",get:function(){var t=this.dragPositionBoundaries;return{width:t.maxX,height:t.maxY}}},{key:"curPositionKey",get:function(){var t=this.props.placement;return t&&d.includes(t)||(t="bottom-right"),t.split("-")}},{key:"position",get:function(){var t=this.curPositionKey,e=t[0],r=t[1],o={};return void 0!==this.state[e]&&(o[e]=this.state[e]+"px"),void 0!==this.state[r]&&(o[r]=this.state[r]+"px"),o}}])&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,s(o.key),o)}}(h.prototype,f),Object.defineProperty(h,"prototype",{writable:!1}),h}(i.default.Component);g.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"},exports.DraggableBox=g,exports.c=l,exports.default=g;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/index.tsx","../src/utils.ts"],"sourcesContent":["\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} 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    getOtherYKey(yKey: 'top' | 'bottom') {\n        return yKey === 'top' ? 'bottom' : 'top';\n    }\n\n    getOtherXKey(xKey: 'left' | 'right') {\n        return xKey === 'left' ? 'right' : 'left';\n    }\n\n    // TODO:\n    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right') {\n        const oYKey = this.getOtherYKey(yKey);\n        const oXKey = this.getOtherXKey(xKey);\n        this.setState({\n            [oYKey]: this.dragPositionRang.height - (this.state[yKey] || 0),\n            [oXKey]: this.dragPositionRang.width - (this.state[xKey] || 0),\n        });\n    }\n    /**\n     * 获取定位容器\n     * 根据 positionMode 返回对应的定位父元素\n     */\n    private getContainer(): HTMLElement {\n        const { positionMode = 'fixed' } = this.props;\n        return positionMode === 'fixed' \n            ? findFixedPositionParent(this.draggerRef) \n            : findAbsolutePositionParent(this.draggerRef);\n    }\n\n    /**\n     * 获取容器的尺寸和位置信息\n     */\n    private getContainerRect() {\n        const { positionMode = 'fixed' } = this.props;\n        const isFixed = positionMode === 'fixed';\n        const container = this.getContainer();\n        const containerRect = container.getBoundingClientRect();\n        const rootScrollingElement = window.document.scrollingElement || window.document.body;\n        const isRoot = container === window.document.body || container === window.document.documentElement;\n        return {\n            width: containerRect.width,\n            height: containerRect.height,\n            left: isFixed && isRoot ? Math.max(containerRect.left, 0) : containerRect.left + rootScrollingElement.scrollLeft,\n            top: isFixed && isRoot ? Math.max(containerRect.top, 0) : containerRect.top + rootScrollingElement.scrollTop,\n            scrollLeft: isFixed && isRoot ? 0 : container.scrollLeft, // container.scrollLeft,\n            scrollTop: isFixed && isRoot ? 0 : container.scrollTop, // container.scrollTop\n            scrollerScrollLeft: isFixed && isRoot ? 0 : rootScrollingElement.scrollLeft,\n            scrollerScrollTop: isFixed && isRoot ? 0 : rootScrollingElement.scrollTop\n        };\n    }\n\n    get windowSize() {\n        const container = this.getContainer();\n        const { clientWidth, clientHeight } = container;\n        return {\n            height: clientHeight,\n            width: clientWidth\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 windowSize = this.windowSize;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 初始化边界\n        let minX = 0;\n        let maxX = windowSize.width - dragSize.width;\n        let minY = 0;\n        let maxY = windowSize.height - dragSize.height;\n\n        // 处理X轴边界\n        if (boundsX) {\n            const [minBound, maxBound] = boundsX;\n            \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, windowSize.width - maxBound - dragSize.width);\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minX > maxX) {\n                    [minX, maxX] = [maxX, minX];\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, windowSize.height - maxBound - dragSize.height);\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minY > maxY) {\n                    [minY, maxY] = [maxY, minY];\n                }\n            }\n        }\n\n        return { minX, maxX, minY, maxY };\n    }\n    \n    // 保持向后兼容\n    get dragPositionRang() {\n        const { maxX, maxY } = this.dragPositionBoundaries;\n        return { width: maxX, height: 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            const { top, left } = this.draggerRef.getBoundingClientRect();\n            const containerRect = this.getContainerRect();\n            // console.log(containerRect, 'containerRect');\n            \n            // 获取缩放比例\n            const { scaleX, scaleY } = getScaleRatio(this.draggerRef);\n            this.cachedScaleX = scaleX;\n            this.cachedScaleY = scaleY;\n            \n            // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n            this.startTop = (top - containerRect.top + containerRect.scrollerScrollTop) / scaleY + containerRect.scrollTop;\n            this.startLeft = (left - containerRect.left + containerRect.scrollerScrollLeft) / scaleX + containerRect.scrollLeft;\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '4px 2px'; // 虚线模式\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '2px 4px'; // 虚线模式\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 containerSize = this.windowSize;\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 = Math.min(Math.max(minY, newTop), maxY);\n        const realLeft = Math.min(Math.max(minX, newLeft), maxX);\n        const realBottom = containerSize.height - realTop - this.dragBoxSize.height;\n        const realRight = containerSize.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, 'calcPosition y');\n            // console.log(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;","import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.documentElement;\n    }\n    const fixedPositionParent = findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const transform = style.getPropertyValue('transform');\n        const filter = style.getPropertyValue('filter');\n        const perspective = style.getPropertyValue('perspective');\n        \n        // 检查是否有影响 fixed 定位的属性\n        if (transform !== 'none' || filter !== 'none' || perspective !== 'none') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.documentElement; // 没有找到，返回 window（通过 document.documentElement）\n    return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的 position 不为 static 的元素\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.body;\n    }\n    return findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const position = style.getPropertyValue('position');\n        if (position !== 'static') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.body;\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    // 扩大10倍进行计算，避免浮点数精度问题\n    const scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * 10) / 10 : 1;\n    const scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * 10) / 10 : 1;\n    // console.log('scaleX', scaleX, 'scaleY', scaleY);\n    return { scaleX, scaleY };\n}\n"],"names":["ValidPlacement","c","p","prefixClassname","DraggableBox","_React$Component","props","_this","call","this","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","reportStartPosition","addEventListener","document","evt","Math","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","style","transform","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","backgroundImage","backgroundSize","display","_this$dragPositionBou3","containerSize","windowSize","newTop","newLeft","realTop","min","max","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getOtherYKey","yKey","getOtherXKey","xKey","updatePosition","_this$setState","oYKey","oXKey","dragPositionRang","getContainer","dom","_this$props$positionM","positionMode","findParent","parent","window","getComputedStyle","getPropertyValue","filter","perspective","excludeOwn","documentElement","findAbsolutePositionParent","getContainerRect","_this$props$positionM2","isFixed","container","containerRect","getBoundingClientRect","rootScrollingElement","scrollingElement","isRoot","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","_this$draggerRef$getB","_getScaleRatio","scaleX","rect","offsetWidth","round","offsetHeight","getScaleRatio","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","render","_this3","_this$props","className","zIndex","children","_this$props$positionM3","stl","_extends","position","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","key","get","clientHeight","clientWidth","_this$props2","boundsX","boundsY","_this$props2$placemen","_placement$split2","minBound","maxBound","_ref","_ref2","_this$dragPositionBou4","includes","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}

package/dist/index.modern.mjs

@@ -0,0 +1,2 @@
+import t from"react";import{prefixClassname as e,classNames as i}from"@ohkit/prefix-classname";import{findParent as s,addEventListener as o,addClass as r}from"@ohkit/dom-helper";function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)({}).hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},a.apply(null,arguments)}const h=["top-left","top-right","bottom-left","bottom-right"],n=e("ohkit-draggable-box__");class d extends t.Component{constructor(t){super(t),this.draggerRef=null,this.isDragging=!1,this.axisX=void 0,this.axisY=void 0,this.dX=0,this.dY=0,this.startTop=0,this.startLeft=0,this.cachedScaleX=1,this.cachedScaleY=1,this.__moveDisposer=void 0,this.__clickDisposer=void 0,this.__bodyClassDisposer=void 0,this.__upDisposer=void 0,this.__resizeDisposer=void 0,this.dragAreaRef=null,this.enableDrag=()=>{var t,e;this.reportStartPosition(),null==(t=this.__moveDisposer)||t.call(this),this.__moveDisposer=o(document,"mousemove",t=>{this.__clickDisposer||Math.sqrt(Math.pow(this.dX,2)+Math.pow(this.dY,2))>5&&(this.__clickDisposer=o(document,"click",t=>{t.stopPropagation()},!0),this.__bodyClassDisposer=r([document.body,this.draggerRef],n("moving"))||void 0,this.props.showDragArea&&this.dragAreaRef&&this.showDragArea()),this.dragging(t)},!0),null==(e=this.__upDisposer)||e.call(this),this.__upDisposer=o(document,"mouseup",t=>{this.endDrag(),t.stopPropagation(),t.preventDefault()},!0)},this.startDrag=t=>{2!==t.nativeEvent.button&&(this.axisX=t.nativeEvent.pageX,this.axisY=t.nativeEvent.pageY,this.props.disabled||this.enableDrag())},this.dragging=t=>{this.isDragging=!0;const{lockAxis:e}=this.props,{minX:i,maxX:s,minY:o,maxY:r}=this.dragPositionBoundaries,a=this.cachedScaleY;this.dX=(t.pageX-(this.axisX||0))/this.cachedScaleX,this.dY=(t.pageY-(this.axisY||0))/a;let h=this.dX,n=this.dY;"x"===e?n=0:"y"===e&&(h=0);const d=this.startLeft+h,l=this.startTop+n;"y"!==e&&(d<i?h=i-this.startLeft:d>s&&(h=s-this.startLeft)),"x"!==e&&(l<o?n=o-this.startTop:l>r&&(n=r-this.startTop)),this.draggerRef&&(this.draggerRef.style.transform=`translate(${h}px, ${n}px)`),t.stopPropagation()},this.endDrag=()=>{var t,e,i;this.isDragging&&(this.calcPosition(),this.draggerRef&&(this.draggerRef.style.transform=""),this.props.showDragArea&&this.hideDragArea()),null==(t=this.__moveDisposer)||t.call(this),this.__moveDisposer=void 0,this.__clickDisposer&&requestAnimationFrame(()=>{this.__clickDisposer&&(this.__clickDisposer(),this.__clickDisposer=void 0)}),null==(e=this.__upDisposer)||e.call(this),this.__upDisposer=void 0,null==(i=this.__bodyClassDisposer)||i.call(this),this.__bodyClassDisposer=void 0,this.isDragging=!1},this.showDragArea=()=>{if(!this.props.showDragArea||!this.dragAreaRef)return;const{lockAxis:t}=this.props,{minX:e,maxX:i,minY:s,maxY:o}=this.dragPositionBoundaries,r=this.dragBoxSize;this.dragAreaRef.style.border="1px dashed var(--ohkit-color-primary, #1890ff)",this.dragAreaRef.style.backgroundColor="rgba(173, 216, 230, 0.2)","x"===t?(this.dragAreaRef.style.width=`${i-e+r.width}px`,this.dragAreaRef.style.height="2px",this.dragAreaRef.style.left=`${e}px`,this.dragAreaRef.style.top=`${this.startTop+r.height/2}px`,this.dragAreaRef.style.border="none",this.dragAreaRef.style.backgroundColor="transparent",this.dragAreaRef.style.backgroundImage="linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",this.dragAreaRef.style.backgroundSize="4px 2px"):"y"===t?(this.dragAreaRef.style.width="2px",this.dragAreaRef.style.height=`${o-s+r.height}px`,this.dragAreaRef.style.left=`${this.startLeft+r.width/2}px`,this.dragAreaRef.style.top=`${s}px`,this.dragAreaRef.style.border="none",this.dragAreaRef.style.backgroundColor="transparent",this.dragAreaRef.style.backgroundImage="linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",this.dragAreaRef.style.backgroundSize="2px 4px"):(this.dragAreaRef.style.width=`${i-e+r.width}px`,this.dragAreaRef.style.height=`${o-s+r.height}px`,this.dragAreaRef.style.left=`${e}px`,this.dragAreaRef.style.top=`${s}px`),this.dragAreaRef.style.display="block"},this.hideDragArea=()=>{this.dragAreaRef&&(this.dragAreaRef.style.display="none")},this.calcPosition=()=>{const{lockAxis:t}=this.props,{minX:e,maxX:i,minY:s,maxY:o}=this.dragPositionBoundaries,r=this.windowSize;let a=this.startTop,h=this.startLeft;"y"!==t&&(h+=this.dX),"x"!==t&&(a+=this.dY);const n=Math.min(Math.max(s,a),o),d=Math.min(Math.max(e,h),i),l=r.height-n-this.dragBoxSize.height,g=r.width-d-this.dragBoxSize.width;n===this.state.top&&d===this.state.left&&this.state.bottom===l&&this.state.right===g||this.setState({top:n,left:d,bottom:l,right:g}),this.startTop=n,this.startLeft=d,this.dX=this.dY=0};const{placement:e="bottom-right",offsetY:i=20,offsetX:s=20}=t,[a,h]=e.split("-");this.state={top:"top"===a?i:void 0,bottom:"bottom"===a?i:void 0,left:"left"===h?s:void 0,right:"right"===h?s:void 0}}getOtherYKey(t){return"top"===t?"bottom":"top"}getOtherXKey(t){return"left"===t?"right":"left"}updatePosition(t,e){const i=this.getOtherYKey(t),s=this.getOtherXKey(e);this.setState({[i]:this.dragPositionRang.height-(this.state[t]||0),[s]:this.dragPositionRang.width-(this.state[e]||0)})}getContainer(){const{positionMode:t="fixed"}=this.props;return"fixed"===t?(e=this.draggerRef)&&s(e,t=>{const e=window.getComputedStyle(t),i=e.getPropertyValue("transform"),s=e.getPropertyValue("filter"),o=e.getPropertyValue("perspective");if("none"!==i||"none"!==s||"none"!==o)return!0},{excludeOwn:!0})||document.documentElement:function(t){return t&&s(t,t=>{if("static"!==window.getComputedStyle(t).getPropertyValue("position"))return!0},{excludeOwn:!0})||document.body}(this.draggerRef);var e}getContainerRect(){const{positionMode:t="fixed"}=this.props,e="fixed"===t,i=this.getContainer(),s=i.getBoundingClientRect(),o=window.document.scrollingElement||window.document.body,r=i===window.document.body||i===window.document.documentElement;return{width:s.width,height:s.height,left:e&&r?Math.max(s.left,0):s.left+o.scrollLeft,top:e&&r?Math.max(s.top,0):s.top+o.scrollTop,scrollLeft:e&&r?0:i.scrollLeft,scrollTop:e&&r?0:i.scrollTop,scrollerScrollLeft:e&&r?0:o.scrollLeft,scrollerScrollTop:e&&r?0:o.scrollTop}}get windowSize(){const t=this.getContainer(),{clientWidth:e,clientHeight:i}=t;return{height:i,width:e}}get dragBoxSize(){let t=0,e=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,e=this.draggerRef.offsetHeight),{height:e,width:t}}get dragPositionBoundaries(){const{boundsX:t,boundsY:e,placement:i="bottom-right"}=this.props,s=this.dragBoxSize,o=this.windowSize,[r,a]=i.split("-");let h=0,n=o.width-s.width,d=0,l=o.height-s.height;if(t){const[e,i]=t;"left"===a?(void 0!==e&&(h=Math.max(h,e)),void 0!==i&&(n=Math.min(n,i))):(void 0!==e&&void 0!==i?(h=Math.max(h,o.width-i-s.width),n=Math.min(n,o.width-e-s.width)):void 0!==e?n=Math.min(n,o.width-e-s.width):void 0!==i&&(h=Math.max(h,o.width-i-s.width)),h>n&&([h,n]=[n,h]))}if(e){const[t,i]=e;"top"===r?(void 0!==t&&(d=Math.max(d,t)),void 0!==i&&(l=Math.min(l,i))):(void 0!==t&&void 0!==i?(d=Math.max(d,o.height-i-s.height),l=Math.min(l,o.height-t-s.height)):void 0!==t?l=Math.min(l,o.height-t-s.height):void 0!==i&&(d=Math.max(d,o.height-i-s.height)),d>l&&([d,l]=[l,d]))}return{minX:h,maxX:n,minY:d,maxY:l}}get dragPositionRang(){const{maxX:t,maxY:e}=this.dragPositionBoundaries;return{width:t,height:e}}get curPositionKey(){let{placement:t}=this.props;return t&&h.includes(t)||(t="bottom-right"),t.split("-")}get position(){const[t,e]=this.curPositionKey,i={};return void 0!==this.state[t]&&(i[t]=`${this.state[t]}px`),void 0!==this.state[e]&&(i[e]=`${this.state[e]}px`),i}reportStartPosition(){if(this.draggerRef){const{top:t,left:e}=this.draggerRef.getBoundingClientRect(),i=this.getContainerRect(),{scaleX:s,scaleY:o}=function(t){if(!t)return{scaleX:1,scaleY:1};const e=t.getBoundingClientRect();return{scaleX:t.offsetWidth>0?Math.round(e.width/t.offsetWidth*10)/10:1,scaleY:t.offsetHeight>0?Math.round(e.height/t.offsetHeight*10)/10:1}}(this.draggerRef);this.cachedScaleX=s,this.cachedScaleY=o,this.startTop=(t-i.top+i.scrollerScrollTop)/o+i.scrollTop,this.startLeft=(e-i.left+i.scrollerScrollLeft)/s+i.scrollLeft}}componentDidMount(){this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=o(window,"resize",()=>{this.calcPosition()})}componentWillUnmount(){var t,e,i,s,o;null==(t=this.__resizeDisposer)||t.call(this),null==(e=this.__bodyClassDisposer)||e.call(this),null==(i=this.__moveDisposer)||i.call(this),null==(s=this.__clickDisposer)||s.call(this),null==(o=this.__upDisposer)||o.call(this)}render(){const{className:e,zIndex:s,children:o,showDragArea:r,positionMode:h="fixed"}=this.props,{startDrag:d,endDrag:l}=this,g=a({zIndex:s},this.position,{position:h});/*#__PURE__*/return t.createElement(Fragment,null,r&&/*#__PURE__*/t.createElement("div",{className:n("drag-area"),ref:t=>{this.dragAreaRef=t},style:{display:"none",position:h,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__*/t.createElement("div",{className:i(n("container"),e),style:g,ref:t=>{this.draggerRef=t},onMouseDown:d,onMouseUp:l},o))}}d.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"};export{d as DraggableBox,n as c,d as default};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.mjs","sources":["../src/constants.ts","../src/index.tsx","../src/utils.ts"],"sourcesContent":["\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} 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    getOtherYKey(yKey: 'top' | 'bottom') {\n        return yKey === 'top' ? 'bottom' : 'top';\n    }\n\n    getOtherXKey(xKey: 'left' | 'right') {\n        return xKey === 'left' ? 'right' : 'left';\n    }\n\n    // TODO:\n    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right') {\n        const oYKey = this.getOtherYKey(yKey);\n        const oXKey = this.getOtherXKey(xKey);\n        this.setState({\n            [oYKey]: this.dragPositionRang.height - (this.state[yKey] || 0),\n            [oXKey]: this.dragPositionRang.width - (this.state[xKey] || 0),\n        });\n    }\n    /**\n     * 获取定位容器\n     * 根据 positionMode 返回对应的定位父元素\n     */\n    private getContainer(): HTMLElement {\n        const { positionMode = 'fixed' } = this.props;\n        return positionMode === 'fixed' \n            ? findFixedPositionParent(this.draggerRef) \n            : findAbsolutePositionParent(this.draggerRef);\n    }\n\n    /**\n     * 获取容器的尺寸和位置信息\n     */\n    private getContainerRect() {\n        const { positionMode = 'fixed' } = this.props;\n        const isFixed = positionMode === 'fixed';\n        const container = this.getContainer();\n        const containerRect = container.getBoundingClientRect();\n        const rootScrollingElement = window.document.scrollingElement || window.document.body;\n        const isRoot = container === window.document.body || container === window.document.documentElement;\n        return {\n            width: containerRect.width,\n            height: containerRect.height,\n            left: isFixed && isRoot ? Math.max(containerRect.left, 0) : containerRect.left + rootScrollingElement.scrollLeft,\n            top: isFixed && isRoot ? Math.max(containerRect.top, 0) : containerRect.top + rootScrollingElement.scrollTop,\n            scrollLeft: isFixed && isRoot ? 0 : container.scrollLeft, // container.scrollLeft,\n            scrollTop: isFixed && isRoot ? 0 : container.scrollTop, // container.scrollTop\n            scrollerScrollLeft: isFixed && isRoot ? 0 : rootScrollingElement.scrollLeft,\n            scrollerScrollTop: isFixed && isRoot ? 0 : rootScrollingElement.scrollTop\n        };\n    }\n\n    get windowSize() {\n        const container = this.getContainer();\n        const { clientWidth, clientHeight } = container;\n        return {\n            height: clientHeight,\n            width: clientWidth\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 windowSize = this.windowSize;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 初始化边界\n        let minX = 0;\n        let maxX = windowSize.width - dragSize.width;\n        let minY = 0;\n        let maxY = windowSize.height - dragSize.height;\n\n        // 处理X轴边界\n        if (boundsX) {\n            const [minBound, maxBound] = boundsX;\n            \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, windowSize.width - maxBound - dragSize.width);\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minX > maxX) {\n                    [minX, maxX] = [maxX, minX];\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, windowSize.height - maxBound - dragSize.height);\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minY > maxY) {\n                    [minY, maxY] = [maxY, minY];\n                }\n            }\n        }\n\n        return { minX, maxX, minY, maxY };\n    }\n    \n    // 保持向后兼容\n    get dragPositionRang() {\n        const { maxX, maxY } = this.dragPositionBoundaries;\n        return { width: maxX, height: 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            const { top, left } = this.draggerRef.getBoundingClientRect();\n            const containerRect = this.getContainerRect();\n            // console.log(containerRect, 'containerRect');\n            \n            // 获取缩放比例\n            const { scaleX, scaleY } = getScaleRatio(this.draggerRef);\n            this.cachedScaleX = scaleX;\n            this.cachedScaleY = scaleY;\n            \n            // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n            this.startTop = (top - containerRect.top + containerRect.scrollerScrollTop) / scaleY + containerRect.scrollTop;\n            this.startLeft = (left - containerRect.left + containerRect.scrollerScrollLeft) / scaleX + containerRect.scrollLeft;\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '4px 2px'; // 虚线模式\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '2px 4px'; // 虚线模式\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 containerSize = this.windowSize;\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 = Math.min(Math.max(minY, newTop), maxY);\n        const realLeft = Math.min(Math.max(minX, newLeft), maxX);\n        const realBottom = containerSize.height - realTop - this.dragBoxSize.height;\n        const realRight = containerSize.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, 'calcPosition y');\n            // console.log(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;","import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.documentElement;\n    }\n    const fixedPositionParent = findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const transform = style.getPropertyValue('transform');\n        const filter = style.getPropertyValue('filter');\n        const perspective = style.getPropertyValue('perspective');\n        \n        // 检查是否有影响 fixed 定位的属性\n        if (transform !== 'none' || filter !== 'none' || perspective !== 'none') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.documentElement; // 没有找到，返回 window（通过 document.documentElement）\n    return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的 position 不为 static 的元素\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.body;\n    }\n    return findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const position = style.getPropertyValue('position');\n        if (position !== 'static') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.body;\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    // 扩大10倍进行计算，避免浮点数精度问题\n    const scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * 10) / 10 : 1;\n    const scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * 10) / 10 : 1;\n    // console.log('scaleX', scaleX, 'scaleY', scaleY);\n    return { scaleX, scaleY };\n}\n"],"names":["ValidPlacement","c","p","DraggableBox","React","Component","constructor","props","super","this","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","_this$__moveDisposer","_this$__upDisposer","reportStartPosition","call","addEventListener","document","evt","Math","sqrt","pow","stopPropagation","addClass","body","undefined","showDragArea","dragging","endDrag","preventDefault","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","minX","maxX","minY","maxY","dragPositionBoundaries","scaleY","translateX","translateY","potentialLeft","potentialTop","style","transform","_this$__moveDisposer2","_this$__upDisposer2","_this$__bodyClassDisp","calcPosition","hideDragArea","requestAnimationFrame","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","backgroundImage","backgroundSize","display","containerSize","windowSize","newTop","newLeft","realTop","min","max","realLeft","realBottom","realRight","state","bottom","right","setState","placement","offsetY","offsetX","placementY","placementX","split","getOtherYKey","yKey","getOtherXKey","xKey","updatePosition","oYKey","oXKey","dragPositionRang","getContainer","positionMode","dom","findParent","parent","window","getComputedStyle","getPropertyValue","filter","perspective","excludeOwn","documentElement","findAbsolutePositionParent","getContainerRect","isFixed","container","containerRect","getBoundingClientRect","rootScrollingElement","scrollingElement","isRoot","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","clientWidth","clientHeight","offsetWidth","offsetHeight","boundsX","boundsY","minBound","maxBound","curPositionKey","includes","position","y","x","positionStyles","scaleX","rect","round","getScaleRatio","componentDidMount","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp2","_this$__moveDisposer3","_this$__clickDisposer","_this$__upDisposer3","render","className","zIndex","children","stl","_extends","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","defaultProps"],"mappings":"0YACa,MAAAA,EAAiB,CAAC,WAAY,YAAa,cAAe,gBCW1DC,EAAIC,EAAE,yBACN,MAAAC,UAAqBC,EAAMC,UAYpCC,WAAAA,CAAYC,GACRC,MAAMD,GAAOE,KA4LjBC,WAAoC,UAEpCC,YAAa,EAEbC,KAAAA,kBACAC,WAAK,EAAAJ,KACLK,GAAK,EACLC,KAAAA,GAAK,EAACN,KACNO,SAAW,OACXC,UAAY,EAACR,KAGbS,aAAe,OACfC,aAAe,EAEfC,KAAAA,oBACAC,EAAAA,KAAAA,4BACAC,yBAAmB,EAAAb,KACnBc,kBACAC,EAAAA,KAAAA,6BAEAC,YAAqC,KAmBrCC,KAAAA,WAAa,KAAK,IAAAC,EAAAC,EACdnB,KAAKoB,sBACLF,OAAAA,EAAIlB,KAACW,iBAALO,EAAAG,KAAArB,MACAA,KAAKW,eAAiBW,EAAiBC,SAAU,YAAcC,IAEtDxB,KAAKY,iBACea,KAAKC,KAAKD,KAAKE,IAAI3B,KAAKK,GAAI,GAAKoB,KAAKE,IAAI3B,KAAKM,GAAI,IAErD,IACfN,KAAKY,gBAAkBU,EACnBC,SACA,QACCC,IACGA,EAAII,oBAER,GAEJ5B,KAAKa,oBAAsBgB,EAAS,CAACN,SAASO,KAAM9B,KAAKC,YAAaT,EAAE,iBAAcuC,EAGlF/B,KAAKF,MAAMkC,cAAgBhC,KAAKgB,aAChChB,KAAKgC,gBAIjBhC,KAAKiC,SAAST,KACf,GAEHL,OAAAA,EAAInB,KAACc,eAALK,EAAAE,WACArB,KAAKc,aAAeQ,EAChBC,SACA,UACCC,IACGxB,KAAKkC,UACLV,EAAII,kBACJJ,EAAIW,mBAER,SAIRC,UAAaZ,IAEsB,IAA3BA,EAAIa,YAAYC,SAGpBtC,KAAKG,MAAQqB,EAAIa,YAAYE,MAC7BvC,KAAKI,MAAQoB,EAAIa,YAAYG,MACxBxC,KAAKF,MAAM2C,UACdzC,KAAKiB,eAIXgB,KAAAA,SAAYT,IACRxB,KAAKE,YAAa,EAClB,MAAMwC,SAAEA,GAAa1C,KAAKF,OACpB6C,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,GAAS9C,KAAK+C,uBAIlCC,EAAShD,KAAKU,aAGpBV,KAAKK,IAAMmB,EAAIe,OAASvC,KAAKG,OAAS,IAJvBH,KAAKS,aAKpBT,KAAKM,IAAMkB,EAAIgB,OAASxC,KAAKI,OAAS,IAAM4C,EAG5C,IAAIC,EAAajD,KAAKK,GAClB6C,EAAalD,KAAKM,GAEL,MAAboC,EACAQ,EAAa,EACO,MAAbR,IACPO,EAAa,GAIjB,MAAME,EAAgBnD,KAAKQ,UAAYyC,EACjCG,EAAepD,KAAKO,SAAW2C,EAGpB,MAAbR,IACIS,EAAgBR,EAChBM,EAAaN,EAAO3C,KAAKQ,UAClB2C,EAAgBP,IACvBK,EAAaL,EAAO5C,KAAKQ,YAKhB,MAAbkC,IACIU,EAAeP,EACfK,EAAaL,EAAO7C,KAAKO,SAClB6C,EAAeN,IACtBI,EAAaJ,EAAO9C,KAAKO,WAI7BP,KAAKC,aACLD,KAAKC,WAAWoD,MAAMC,UAAY,aAAaL,QAAiBC,QAEpE1B,EAAII,wBAGRM,QAAU,KAAK,IAAAqB,EAAAC,EAAAC,EACPzD,KAAKE,aACLF,KAAK0D,eACD1D,KAAKC,aACLD,KAAKC,WAAWoD,MAAMC,UAAY,IAIlCtD,KAAKF,MAAMkC,cACXhC,KAAK2D,uBAIbJ,OAAK5C,iBAAL4C,EAAAlC,KAAqBrB,MACrBA,KAAKW,oBAAiBoB,EAClB/B,KAAKY,iBACPgD,sBAAsB,KAChB5D,KAAKY,kBACPZ,KAAKY,kBACLZ,KAAKY,qBAAkBmB,KAI7ByB,OAAAA,EAAIxD,KAACc,eAAL0C,EAAAnC,KAAArB,MACAA,KAAKc,kBAAeiB,EACI,OAAxB0B,EAAAzD,KAAKa,sBAAL4C,EAAApC,WACArB,KAAKa,yBAAsBkB,EAE3B/B,KAAKE,YAAa,GAGtB8B,KAAAA,aAAe,KACX,IAAKhC,KAAKF,MAAMkC,eAAiBhC,KAAKgB,YAAa,OAEnD,MAAM0B,SAAEA,GAAa1C,KAAKF,OACpB6C,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,GAAS9C,KAAK+C,uBAClCc,EAAW7D,KAAK8D,YAGlB9D,KAAKgB,YAAYqC,MAAMU,OAAS,iDAChC/D,KAAKgB,YAAYqC,MAAMW,gBAAkB,2BAE5B,MAAbtB,GAEA1C,KAAKgB,YAAYqC,MAAMY,MAAQ,GAAGrB,EAAOD,EAAOkB,EAASI,UACzDjE,KAAKgB,YAAYqC,MAAMa,OAAS,MAChClE,KAAKgB,YAAYqC,MAAMc,KAAO,GAAGxB,MACjC3C,KAAKgB,YAAYqC,MAAMe,IAAM,GAAGpE,KAAKO,SAAWsD,EAASK,OAAS,MAClElE,KAAKgB,YAAYqC,MAAMU,OAAS,OAChC/D,KAAKgB,YAAYqC,MAAMW,gBAAkB,cACzChE,KAAKgB,YAAYqC,MAAMgB,gBAAkB,sFACzCrE,KAAKgB,YAAYqC,MAAMiB,eAAiB,WACpB,MAAb5B,GAEP1C,KAAKgB,YAAYqC,MAAMY,MAAQ,MAC/BjE,KAAKgB,YAAYqC,MAAMa,OAAS,GAAGpB,EAAOD,EAAOgB,EAASK,WAC1DlE,KAAKgB,YAAYqC,MAAMc,KAAO,GAAGnE,KAAKQ,UAAYqD,EAASI,MAAQ,MACnEjE,KAAKgB,YAAYqC,MAAMe,IAAM,GAAGvB,MAChC7C,KAAKgB,YAAYqC,MAAMU,OAAS,OAChC/D,KAAKgB,YAAYqC,MAAMW,gBAAkB,cACzChE,KAAKgB,YAAYqC,MAAMgB,gBAAkB,uFACzCrE,KAAKgB,YAAYqC,MAAMiB,eAAiB,YAGxCtE,KAAKgB,YAAYqC,MAAMY,MAAQ,GAAGrB,EAAOD,EAAOkB,EAASI,UACzDjE,KAAKgB,YAAYqC,MAAMa,OAAS,GAAGpB,EAAOD,EAAOgB,EAASK,WAC1DlE,KAAKgB,YAAYqC,MAAMc,KAAO,GAAGxB,MACjC3C,KAAKgB,YAAYqC,MAAMe,IAAM,GAAGvB,OAGpC7C,KAAKgB,YAAYqC,MAAMkB,QAAU,SAGrCZ,KAAAA,aAAe,KACP3D,KAAKgB,cACLhB,KAAKgB,YAAYqC,MAAMkB,QAAU,SAGzCb,KAAAA,aAAe,KACX,MAAMhB,SAAEA,GAAa1C,KAAKF,OACpB6C,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,EAAIC,KAAEA,GAAS9C,KAAK+C,uBAClCyB,EAAgBxE,KAAKyE,WAG3B,IAAIC,EAAS1E,KAAKO,SACdoE,EAAU3E,KAAKQ,UAEF,MAAbkC,IACAiC,GAAW3E,KAAKK,IAEH,MAAbqC,IACAgC,GAAU1E,KAAKM,IAInB,MAAMsE,EAAUnD,KAAKoD,IAAIpD,KAAKqD,IAAIjC,EAAM6B,GAAS5B,GAC3CiC,EAAWtD,KAAKoD,IAAIpD,KAAKqD,IAAInC,EAAMgC,GAAU/B,GAC7CoC,EAAaR,EAAcN,OAASU,EAAU5E,KAAK8D,YAAYI,OAC/De,EAAYT,EAAcP,MAAQc,EAAW/E,KAAK8D,YAAYG,MAChEW,IAAY5E,KAAKkF,MAAMd,KAAOW,IAAa/E,KAAKkF,MAAMf,MAAQnE,KAAKkF,MAAMC,SAAWH,GAAchF,KAAKkF,MAAME,QAAUH,GAGvHjF,KAAKqF,SAAS,CACVjB,IAAKQ,EACLT,KAAMY,EACNI,OAAQH,EACRI,MAAOH,IAGfjF,KAAKO,SAAWqE,EAChB5E,KAAKQ,UAAYuE,EACjB/E,KAAKK,GAAKL,KAAKM,GAAK,GAzbpB,MAAMgF,UAAEA,EAAY,eAAcC,QAAEA,EAAU,GAAEC,QAAEA,EAAU,IAAO1F,GAC5D2F,EAAYC,GAAcJ,EAAUK,MAAM,KAGjD3F,KAAKkF,MAAQ,CACTd,IAAoB,QAAfqB,EAAuBF,OAAUxD,EACtCoD,OAAuB,WAAfM,EAA0BF,OAAUxD,EAC5CoC,KAAqB,SAAfuB,EAAwBF,OAAUzD,EACxCqD,MAAsB,UAAfM,EAAyBF,OAAUzD,EAElD,CAEA6D,YAAAA,CAAaC,GACT,MAAgB,QAATA,EAAiB,SAAW,KACvC,CAEAC,YAAAA,CAAaC,GACT,MAAgB,SAATA,EAAkB,QAAU,MACvC,CAGAC,cAAAA,CAAeH,EAAwBE,GACnC,MAAME,EAAQjG,KAAK4F,aAAaC,GAC1BK,EAAQlG,KAAK8F,aAAaC,GAChC/F,KAAKqF,SAAS,CACVY,CAACA,GAAQjG,KAAKmG,iBAAiBjC,QAAUlE,KAAKkF,MAAMW,IAAS,GAC7DK,CAACA,GAAQlG,KAAKmG,iBAAiBlC,OAASjE,KAAKkF,MAAMa,IAAS,IAEpE,CAKQK,YAAAA,GACJ,MAAMC,aAAEA,EAAe,SAAYrG,KAAKF,MACxC,MAAwB,UAAjBuG,GCzDyBC,ED0DFtG,KAAKC,aCtDXsG,EAAWD,EAAME,IACzC,MAAMnD,EAAQoD,OAAOC,iBAAiBF,GAChClD,EAAYD,EAAMsD,iBAAiB,aACnCC,EAASvD,EAAMsD,iBAAiB,UAChCE,EAAcxD,EAAMsD,iBAAiB,eAG3C,GAAkB,SAAdrD,GAAmC,SAAXsD,GAAqC,SAAhBC,EAC7C,OACH,GACF,CAACC,YAAY,KAZLvF,SAASwF,gBAoBR,SAA2BT,GACvC,OAAKA,GAGEC,EAAWD,EAAME,IAGpB,GAAiB,WAFHC,OAAOC,iBAAiBF,GACfG,iBAAiB,YAEpC,OAAO,GAEZ,CAACG,YAAY,KARLvF,SAASO,IASxB,CD0BckF,CAA2BhH,KAAKC,YC3DxC,IAAkCqG,CD4DpC,CAKQW,gBAAAA,GACJ,MAAMZ,aAAEA,EAAe,SAAYrG,KAAKF,MAClCoH,EAA2B,UAAjBb,EACVc,EAAYnH,KAAKoG,eACjBgB,EAAgBD,EAAUE,wBAC1BC,EAAuBb,OAAOlF,SAASgG,kBAAoBd,OAAOlF,SAASO,KAC3E0F,EAASL,IAAcV,OAAOlF,SAASO,MAAQqF,IAAcV,OAAOlF,SAASwF,gBACnF,MAAO,CACH9C,MAAOmD,EAAcnD,MACrBC,OAAQkD,EAAclD,OACtBC,KAAM+C,GAAWM,EAAS/F,KAAKqD,IAAIsC,EAAcjD,KAAM,GAAKiD,EAAcjD,KAAOmD,EAAqBG,WACtGrD,IAAK8C,GAAWM,EAAS/F,KAAKqD,IAAIsC,EAAchD,IAAK,GAAKgD,EAAchD,IAAMkD,EAAqBI,UACnGD,WAAYP,GAAWM,EAAS,EAAIL,EAAUM,WAC9CC,UAAWR,GAAWM,EAAS,EAAIL,EAAUO,UAC7CC,mBAAoBT,GAAWM,EAAS,EAAIF,EAAqBG,WACjEG,kBAAmBV,GAAWM,EAAS,EAAIF,EAAqBI,UAExE,CAEA,cAAIjD,GACA,MAAM0C,EAAYnH,KAAKoG,gBACjByB,YAAEA,EAAWC,aAAEA,GAAiBX,EACtC,MAAO,CACHjD,OAAQ4D,EACR7D,MAAO4D,EAEf,CAEA,eAAI/D,GACA,IAAIG,EAAQ,EACRC,EAAS,EAKb,OAJIlE,KAAKC,aACLgE,EAAQjE,KAAKC,WAAW8H,YACxB7D,EAASlE,KAAKC,WAAW+H,cAEtB,CACH9D,SACAD,QAER,CAEA,0BAAIlB,GACA,MAAMkF,QAAEA,EAAOC,QAAEA,EAAO5C,UAAEA,EAAY,gBAAmBtF,KAAKF,MACxD+D,EAAW7D,KAAK8D,YAChBW,EAAazE,KAAKyE,YACjBgB,EAAYC,GAAcJ,EAAUK,MAAM,KAGjD,IAAIhD,EAAO,EACPC,EAAO6B,EAAWR,MAAQJ,EAASI,MACnCpB,EAAO,EACPC,EAAO2B,EAAWP,OAASL,EAASK,OAGxC,GAAI+D,EAAS,CACT,MAAOE,EAAUC,GAAYH,EAEV,SAAfvC,QAEiB3D,IAAboG,IAAwBxF,EAAOlB,KAAKqD,IAAInC,EAAMwF,SACjCpG,IAAbqG,IAAwBxF,EAAOnB,KAAKoD,IAAIjC,EAAMwF,WAIjCrG,IAAboG,QAAuCpG,IAAbqG,GAC1BzF,EAAOlB,KAAKqD,IAAInC,EAAM8B,EAAWR,MAAQmE,EAAWvE,EAASI,OAC7DrB,EAAOnB,KAAKoD,IAAIjC,EAAM6B,EAAWR,MAAQkE,EAAWtE,EAASI,aACzClC,IAAboG,EAEPvF,EAAOnB,KAAKoD,IAAIjC,EAAM6B,EAAWR,MAAQkE,EAAWtE,EAASI,YACzClC,IAAbqG,IAEPzF,EAAOlB,KAAKqD,IAAInC,EAAM8B,EAAWR,MAAQmE,EAAWvE,EAASI,QAI7DtB,EAAOC,KACND,EAAMC,GAAQ,CAACA,EAAMD,IAGjC,CAGD,GAAIuF,EAAS,CACT,MAAOC,EAAUC,GAAYF,EAEV,QAAfzC,QAEiB1D,IAAboG,IAAwBtF,EAAOpB,KAAKqD,IAAIjC,EAAMsF,SACjCpG,IAAbqG,IAAwBtF,EAAOrB,KAAKoD,IAAI/B,EAAMsF,WAIjCrG,IAAboG,QAAuCpG,IAAbqG,GAC1BvF,EAAOpB,KAAKqD,IAAIjC,EAAM4B,EAAWP,OAASkE,EAAWvE,EAASK,QAC9DpB,EAAOrB,KAAKoD,IAAI/B,EAAM2B,EAAWP,OAASiE,EAAWtE,EAASK,cAC1CnC,IAAboG,EAEPrF,EAAOrB,KAAKoD,IAAI/B,EAAM2B,EAAWP,OAASiE,EAAWtE,EAASK,aAC1CnC,IAAbqG,IAEPvF,EAAOpB,KAAKqD,IAAIjC,EAAM4B,EAAWP,OAASkE,EAAWvE,EAASK,SAI9DrB,EAAOC,KACND,EAAMC,GAAQ,CAACA,EAAMD,IAGjC,CAED,MAAO,CAAEF,OAAMC,OAAMC,OAAMC,OAC/B,CAGA,oBAAIqD,GACA,MAAMvD,KAAEA,EAAIE,KAAEA,GAAS9C,KAAK+C,uBAC5B,MAAO,CAAEkB,MAAOrB,EAAMsB,OAAQpB,EAClC,CAEA,kBAAIuF,GACA,IAAI/C,UAACA,GAAatF,KAAKF,MAIvB,OAHKwF,GAAc/F,EAAe+I,SAAShD,KACvCA,EAAY,gBAETA,EAAUK,MAAM,IAC3B,CAEA,YAAI4C,GACA,MAAOC,EAAGC,GAAKzI,KAAKqI,eACdK,EAAyC,CAAA,EAU/C,YAPsB3G,IAAlB/B,KAAKkF,MAAMsD,KACXE,EAAeF,GAAK,GAAGxI,KAAKkF,MAAMsD,aAEhBzG,IAAlB/B,KAAKkF,MAAMuD,KACXC,EAAeD,GAAK,GAAGzI,KAAKkF,MAAMuD,QAG/BC,CACX,CAyBAtH,mBAAAA,GACI,GAAIpB,KAAKC,WAAY,CACjB,MAAMmE,IAAEA,EAAGD,KAAEA,GAASnE,KAAKC,WAAWoH,wBAChCD,EAAgBpH,KAAKiH,oBAIrB0B,OAAEA,EAAM3F,OAAEA,GCvMtB,SAAwBsD,GAC1B,IAAKA,EACD,MAAO,CAAEqC,OAAQ,EAAG3F,OAAQ,GAGhC,MAAM4F,EAAOtC,EAAIe,wBAKjB,MAAO,CAAEsB,OAHMrC,EAAIyB,YAAc,EAAItG,KAAKoH,MAAMD,EAAK3E,MAAQqC,EAAIyB,YAAc,IAAM,GAAK,EAGzE/E,OAFFsD,EAAI0B,aAAe,EAAIvG,KAAKoH,MAAMD,EAAK1E,OAASoC,EAAI0B,aAAe,IAAM,GAAK,EAGjG,CD4LuCc,CAAc9I,KAAKC,YAC9CD,KAAKS,aAAekI,EACpB3I,KAAKU,aAAesC,EAGpBhD,KAAKO,UAAY6D,EAAMgD,EAAchD,IAAMgD,EAAcQ,mBAAqB5E,EAASoE,EAAcM,UACrG1H,KAAKQ,WAAa2D,EAAOiD,EAAcjD,KAAOiD,EAAcO,oBAAsBgB,EAASvB,EAAcK,UAC5G,CACL,CA6NAsB,iBAAAA,GAEI/I,KAAKoB,sBACLpB,KAAK0D,eAEL1D,KAAKe,iBAAmBO,EAAiBmF,OAAQ,SAAU,KACvDzG,KAAK0D,gBAEb,CAEAsF,oBAAAA,GAAoB,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,SAChBJ,OAAKlI,mBAALkI,EAAA5H,KAAArB,MACAkJ,OAAAA,EAAIlJ,KAACa,sBAALqI,EAAA7H,WACmB,OAAnB8H,EAAAnJ,KAAKW,iBAALwI,EAAA9H,KAAqBrB,aACrBoJ,OAAKxI,kBAALwI,EAAA/H,KAAsBrB,MACtBqJ,OAAAA,OAAKvI,eAALuI,EAAAhI,KAAArB,KACJ,CAEAsJ,MAAAA,GACI,MAAMC,UAAEA,EAASC,OAAEA,EAAMC,SAAEA,EAAQzH,aAAEA,EAAYqE,aAAEA,EAAe,SAAYrG,KAAKF,OAC7EsC,UAAEA,EAASF,QAAEA,GAAYlC,KACzB0J,EAAGC,EACLH,CAAAA,UACGxJ,KAAKuI,SAAQ,CAChBA,SAAUlC,iBAEd,OACI1G,EAAAiK,cAAAC,cACK7H,gBACGrC,EAAAiK,cACIL,MAAAA,CAAAA,UAAW/J,EAAE,aACbsK,IAAMC,IACF/J,KAAKgB,YAAc+I,GAEvB1G,MAAO,CACHkB,QAAS,OACTgE,SAAUlC,EACVrC,gBAAiB,2BACjBD,OAAQ,iDACRiG,cAAe,OACfR,QAASA,GAAU,MAAQ,EAC3BS,UAAW,aACXC,aAAsC,SAAxBlK,KAAKF,MAAM4C,SAAsB,MAAQ,oBAInE/C,EAAAiK,cAAA,MAAA,CACIL,UAAWY,EAAG3K,EAAE,aAAc+J,GAC9BlG,MAAOqG,EACPI,IAAMC,IACF/J,KAAKC,WAAa8J,GAEtBK,YAAahI,EACbiI,UAAWnI,GAEVuH,GAIjB,EAvgBS/J,EACF4K,aAA2C,CAC9Cd,OAAQ,KACRhE,QAAS,GACTD,QAAS,GACTD,UAAW,eACX7C,UAAU,EACVC,SAAU,OACVV,cAAc,EACdqE,aAAc"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@ohkit/prefix-classname"),require("@ohkit/dom-helper")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/prefix-classname","@ohkit/dom-helper"],t):t((e||self).draggableBox={},e.react,e.prefixClassname,e.domHelper)}(this,function(e,t,r,o){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/*#__PURE__*/i(t);function n(){return n=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},n.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 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+""}var l=["top-left","top-right","bottom-left","bottom-right"],p=r.prefixClassname("ohkit-draggable-box__"),g=/*#__PURE__*/function(e){function t(t){var r;(r=e.call(this,t)||this).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.addEventListener(document,"mousemove",function(e){r.__clickDisposer||Math.sqrt(Math.pow(r.dX,2)+Math.pow(r.dY,2))>5&&(r.__clickDisposer=o.addEventListener(document,"click",function(e){e.stopPropagation()},!0),r.__bodyClassDisposer=o.addClass([document.body,r.draggerRef],p("moving"))||void 0,r.props.showDragArea&&r.dragAreaRef&&r.showDragArea()),r.dragging(e)},!0),null==r.__upDisposer||r.__upDisposer(),r.__upDisposer=o.addEventListener(document,"mouseup",function(e){r.endDrag(),e.stopPropagation(),e.preventDefault()},!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=r.props.lockAxis,o=r.dragPositionBoundaries,i=o.minX,a=o.maxX,n=o.minY,s=o.maxY,d=r.cachedScaleY;r.dX=(e.pageX-(r.axisX||0))/r.cachedScaleX,r.dY=(e.pageY-(r.axisY||0))/d;var l=r.dX,p=r.dY;"x"===t?p=0:"y"===t&&(l=0);var g=r.startLeft+l,h=r.startTop+p;"y"!==t&&(g<i?l=i-r.startLeft:g>a&&(l=a-r.startLeft)),"x"!==t&&(h<n?p=n-r.startTop:h>s&&(p=s-r.startTop)),r.draggerRef&&(r.draggerRef.style.transform="translate("+l+"px, "+p+"px)"),e.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 e=r.props.lockAxis,t=r.dragPositionBoundaries,o=t.minX,i=t.maxX,a=t.minY,n=t.maxY,s=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+s.width+"px",r.dragAreaRef.style.height="2px",r.dragAreaRef.style.left=o+"px",r.dragAreaRef.style.top=r.startTop+s.height/2+"px",r.dragAreaRef.style.border="none",r.dragAreaRef.style.backgroundColor="transparent",r.dragAreaRef.style.backgroundImage="linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",r.dragAreaRef.style.backgroundSize="4px 2px"):"y"===e?(r.dragAreaRef.style.width="2px",r.dragAreaRef.style.height=n-a+s.height+"px",r.dragAreaRef.style.left=r.startLeft+s.width/2+"px",r.dragAreaRef.style.top=a+"px",r.dragAreaRef.style.border="none",r.dragAreaRef.style.backgroundColor="transparent",r.dragAreaRef.style.backgroundImage="linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)",r.dragAreaRef.style.backgroundSize="2px 4px"):(r.dragAreaRef.style.width=i-o+s.width+"px",r.dragAreaRef.style.height=n-a+s.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.maxY,n=r.windowSize,s=r.startTop,d=r.startLeft;"y"!==e&&(d+=r.dX),"x"!==e&&(s+=r.dY);var l=Math.min(Math.max(t.minY,s),a),p=Math.min(Math.max(o,d),i),g=n.height-l-r.dragBoxSize.height,h=n.width-p-r.dragBoxSize.width;l===r.state.top&&p===r.state.left&&r.state.bottom===g&&r.state.right===h||r.setState({top:l,left:p,bottom:g,right:h}),r.startTop=l,r.startLeft=p,r.dX=r.dY=0};var i=t.placement,a=t.offsetY,n=void 0===a?20:a,s=t.offsetX,d=void 0===s?20:s,l=(void 0===i?"bottom-right":i).split("-"),g=l[0],h=l[1];return r.state={top:"top"===g?n:void 0,bottom:"bottom"===g?n:void 0,left:"left"===h?d:void 0,right:"right"===h?d:void 0},r}var i,g;g=e,(i=t).prototype=Object.create(g.prototype),i.prototype.constructor=i,s(i,g);var h,f,c=t.prototype;return c.getOtherYKey=function(e){return"top"===e?"bottom":"top"},c.getOtherXKey=function(e){return"left"===e?"right":"left"},c.updatePosition=function(e,t){var r,o=this.getOtherYKey(e),i=this.getOtherXKey(t);this.setState(((r={})[o]=this.dragPositionRang.height-(this.state[e]||0),r[i]=this.dragPositionRang.width-(this.state[t]||0),r))},c.getContainer=function(){var e,t=this.props.positionMode;return"fixed"===(void 0===t?"fixed":t)?(e=this.draggerRef)&&o.findParent(e,function(e){var t=window.getComputedStyle(e),r=t.getPropertyValue("transform"),o=t.getPropertyValue("filter"),i=t.getPropertyValue("perspective");if("none"!==r||"none"!==o||"none"!==i)return!0},{excludeOwn:!0})||document.documentElement:function(e){return e&&o.findParent(e,function(e){if("static"!==window.getComputedStyle(e).getPropertyValue("position"))return!0},{excludeOwn:!0})||document.body}(this.draggerRef)},c.getContainerRect=function(){var e=this.props.positionMode,t="fixed"===(void 0===e?"fixed":e),r=this.getContainer(),o=r.getBoundingClientRect(),i=window.document.scrollingElement||window.document.body,a=r===window.document.body||r===window.document.documentElement;return{width:o.width,height:o.height,left:t&&a?Math.max(o.left,0):o.left+i.scrollLeft,top:t&&a?Math.max(o.top,0):o.top+i.scrollTop,scrollLeft:t&&a?0:r.scrollLeft,scrollTop:t&&a?0:r.scrollTop,scrollerScrollLeft:t&&a?0:i.scrollLeft,scrollerScrollTop:t&&a?0:i.scrollTop}},c.reportStartPosition=function(){if(this.draggerRef){var e=this.draggerRef.getBoundingClientRect(),t=e.top,r=e.left,o=this.getContainerRect(),i=function(e){if(!e)return{scaleX:1,scaleY:1};var t=e.getBoundingClientRect();return{scaleX:e.offsetWidth>0?Math.round(t.width/e.offsetWidth*10)/10:1,scaleY:e.offsetHeight>0?Math.round(t.height/e.offsetHeight*10)/10:1}}(this.draggerRef),a=i.scaleX,n=i.scaleY;this.cachedScaleX=a,this.cachedScaleY=n,this.startTop=(t-o.top+o.scrollerScrollTop)/n+o.scrollTop,this.startLeft=(r-o.left+o.scrollerScrollLeft)/a+o.scrollLeft}},c.componentDidMount=function(){var e=this;this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=o.addEventListener(window,"resize",function(){e.calcPosition()})},c.componentWillUnmount=function(){var e,t,r,o,i;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)},c.render=function(){var e=this,t=this.props,o=t.className,i=t.zIndex,s=t.children,d=t.showDragArea,l=t.positionMode,g=void 0===l?"fixed":l,h=this.startDrag,f=this.endDrag,c=n({zIndex:i},this.position,{position:g});/*#__PURE__*/return a.default.createElement(Fragment,null,d&&/*#__PURE__*/a.default.createElement("div",{className:p("drag-area"),ref:function(t){e.dragAreaRef=t},style:{display:"none",position:g,backgroundColor:"rgba(173, 216, 230, 0.2)",border:"1px dashed var(--ohkit-color-primary, #1890ff)",pointerEvents:"none",zIndex:(i||9999)-1,boxSizing:"border-box",borderRadius:"none"!==this.props.lockAxis?"2px":"0"}}),/*#__PURE__*/a.default.createElement("div",{className:r.classNames(p("container"),o),style:c,ref:function(t){e.draggerRef=t},onMouseDown:h,onMouseUp:f},s))},h=t,(f=[{key:"windowSize",get:function(){var e=this.getContainer();return{height:e.clientHeight,width:e.clientWidth}}},{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=this.dragBoxSize,a=this.windowSize,n=(void 0===o?"bottom-right":o).split("-"),s=n[0],d=0,l=a.width-i.width,p=0,g=a.height-i.height;if(t){var h=t[0],f=t[1];if("left"===n[1])void 0!==h&&(d=Math.max(d,h)),void 0!==f&&(l=Math.min(l,f));else if(void 0!==h&&void 0!==f?(d=Math.max(d,a.width-f-i.width),l=Math.min(l,a.width-h-i.width)):void 0!==h?l=Math.min(l,a.width-h-i.width):void 0!==f&&(d=Math.max(d,a.width-f-i.width)),d>l){var c=[l,d];d=c[0],l=c[1]}}if(r){var u=r[0],m=r[1];if("top"===s)void 0!==u&&(p=Math.max(p,u)),void 0!==m&&(g=Math.min(g,m));else if(void 0!==u&&void 0!==m?(p=Math.max(p,a.height-m-i.height),g=Math.min(g,a.height-u-i.height)):void 0!==u?g=Math.min(g,a.height-u-i.height):void 0!==m&&(p=Math.max(p,a.height-m-i.height)),p>g){var v=[g,p];p=v[0],g=v[1]}}return{minX:d,maxX:l,minY:p,maxY:g}}},{key:"dragPositionRang",get:function(){var e=this.dragPositionBoundaries;return{width:e.maxX,height:e.maxY}}},{key:"curPositionKey",get:function(){var e=this.props.placement;return e&&l.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)}}(h.prototype,f),Object.defineProperty(h,"prototype",{writable:!1}),h}(a.default.Component);g.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,positionMode:"fixed"},e.DraggableBox=g,e.c=p,e.default=g});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/constants.ts","../src/index.tsx","../src/utils.ts"],"sourcesContent":["\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} 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    getOtherYKey(yKey: 'top' | 'bottom') {\n        return yKey === 'top' ? 'bottom' : 'top';\n    }\n\n    getOtherXKey(xKey: 'left' | 'right') {\n        return xKey === 'left' ? 'right' : 'left';\n    }\n\n    // TODO:\n    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right') {\n        const oYKey = this.getOtherYKey(yKey);\n        const oXKey = this.getOtherXKey(xKey);\n        this.setState({\n            [oYKey]: this.dragPositionRang.height - (this.state[yKey] || 0),\n            [oXKey]: this.dragPositionRang.width - (this.state[xKey] || 0),\n        });\n    }\n    /**\n     * 获取定位容器\n     * 根据 positionMode 返回对应的定位父元素\n     */\n    private getContainer(): HTMLElement {\n        const { positionMode = 'fixed' } = this.props;\n        return positionMode === 'fixed' \n            ? findFixedPositionParent(this.draggerRef) \n            : findAbsolutePositionParent(this.draggerRef);\n    }\n\n    /**\n     * 获取容器的尺寸和位置信息\n     */\n    private getContainerRect() {\n        const { positionMode = 'fixed' } = this.props;\n        const isFixed = positionMode === 'fixed';\n        const container = this.getContainer();\n        const containerRect = container.getBoundingClientRect();\n        const rootScrollingElement = window.document.scrollingElement || window.document.body;\n        const isRoot = container === window.document.body || container === window.document.documentElement;\n        return {\n            width: containerRect.width,\n            height: containerRect.height,\n            left: isFixed && isRoot ? Math.max(containerRect.left, 0) : containerRect.left + rootScrollingElement.scrollLeft,\n            top: isFixed && isRoot ? Math.max(containerRect.top, 0) : containerRect.top + rootScrollingElement.scrollTop,\n            scrollLeft: isFixed && isRoot ? 0 : container.scrollLeft, // container.scrollLeft,\n            scrollTop: isFixed && isRoot ? 0 : container.scrollTop, // container.scrollTop\n            scrollerScrollLeft: isFixed && isRoot ? 0 : rootScrollingElement.scrollLeft,\n            scrollerScrollTop: isFixed && isRoot ? 0 : rootScrollingElement.scrollTop\n        };\n    }\n\n    get windowSize() {\n        const container = this.getContainer();\n        const { clientWidth, clientHeight } = container;\n        return {\n            height: clientHeight,\n            width: clientWidth\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 windowSize = this.windowSize;\n        const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n        \n        // 初始化边界\n        let minX = 0;\n        let maxX = windowSize.width - dragSize.width;\n        let minY = 0;\n        let maxY = windowSize.height - dragSize.height;\n\n        // 处理X轴边界\n        if (boundsX) {\n            const [minBound, maxBound] = boundsX;\n            \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, windowSize.width - maxBound - dragSize.width);\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minX > maxX) {\n                    [minX, maxX] = [maxX, minX];\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, windowSize.height - maxBound - dragSize.height);\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (minBound !== undefined) {\n                    // 只有minBound：设置最大边界，最小边界保持默认\n                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);\n                } else if (maxBound !== undefined) {\n                    // 只有maxBound：设置最小边界，最大边界保持默认\n                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);\n                }\n                \n                // 确保最小边界不大于最大边界\n                if (minY > maxY) {\n                    [minY, maxY] = [maxY, minY];\n                }\n            }\n        }\n\n        return { minX, maxX, minY, maxY };\n    }\n    \n    // 保持向后兼容\n    get dragPositionRang() {\n        const { maxX, maxY } = this.dragPositionBoundaries;\n        return { width: maxX, height: 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            const { top, left } = this.draggerRef.getBoundingClientRect();\n            const containerRect = this.getContainerRect();\n            // console.log(containerRect, 'containerRect');\n            \n            // 获取缩放比例\n            const { scaleX, scaleY } = getScaleRatio(this.draggerRef);\n            this.cachedScaleX = scaleX;\n            this.cachedScaleY = scaleY;\n            \n            // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n            this.startTop = (top - containerRect.top + containerRect.scrollerScrollTop) / scaleY + containerRect.scrollTop;\n            this.startLeft = (left - containerRect.left + containerRect.scrollerScrollLeft) / scaleX + containerRect.scrollLeft;\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '4px 2px'; // 虚线模式\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            this.dragAreaRef.style.border = 'none';\n            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景\n            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';\n            this.dragAreaRef.style.backgroundSize = '2px 4px'; // 虚线模式\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 containerSize = this.windowSize;\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 = Math.min(Math.max(minY, newTop), maxY);\n        const realLeft = Math.min(Math.max(minX, newLeft), maxX);\n        const realBottom = containerSize.height - realTop - this.dragBoxSize.height;\n        const realRight = containerSize.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, 'calcPosition y');\n            // console.log(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;","import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.documentElement;\n    }\n    const fixedPositionParent = findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const transform = style.getPropertyValue('transform');\n        const filter = style.getPropertyValue('filter');\n        const perspective = style.getPropertyValue('perspective');\n        \n        // 检查是否有影响 fixed 定位的属性\n        if (transform !== 'none' || filter !== 'none' || perspective !== 'none') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.documentElement; // 没有找到，返回 window（通过 document.documentElement）\n    return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的 position 不为 static 的元素\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {\n    if (!dom) {\n        return document.body;\n    }\n    return findParent(dom, (parent) => {\n        const style = window.getComputedStyle(parent);\n        const position = style.getPropertyValue('position');\n        if (position !== 'static') {\n            return true;\n        }\n    }, {excludeOwn: true}) || document.body;\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    // 扩大10倍进行计算，避免浮点数精度问题\n    const scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * 10) / 10 : 1;\n    const scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * 10) / 10 : 1;\n    // console.log('scaleX', scaleX, 'scaleY', scaleY);\n    return { scaleX, scaleY };\n}\n"],"names":["ValidPlacement","c","p","prefixClassname","DraggableBox","_React$Component","props","_this","call","this","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","dragAreaRef","enableDrag","reportStartPosition","addEventListener","document","evt","Math","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","style","transform","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","backgroundImage","backgroundSize","display","_this$dragPositionBou3","containerSize","windowSize","newTop","newLeft","realTop","min","max","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getOtherYKey","yKey","getOtherXKey","xKey","updatePosition","_this$setState","oYKey","oXKey","dragPositionRang","getContainer","dom","_this$props$positionM","positionMode","findParent","parent","window","getComputedStyle","getPropertyValue","filter","perspective","excludeOwn","documentElement","findAbsolutePositionParent","getContainerRect","_this$props$positionM2","isFixed","container","containerRect","getBoundingClientRect","rootScrollingElement","scrollingElement","isRoot","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","_this$draggerRef$getB","_getScaleRatio","scaleX","rect","offsetWidth","round","offsetHeight","getScaleRatio","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","render","_this3","_this$props","className","zIndex","children","_this$props$positionM3","stl","_extends","position","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDown","onMouseUp","key","get","clientHeight","clientWidth","_this$props2","boundsX","boundsY","_this$props2$placemen","_placement$split2","minBound","maxBound","_ref","_ref2","_this$dragPositionBou4","includes","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"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"}

package/dist/types/constants.d.ts

@@ -0,0 +1 @@
+export declare const ValidPlacement: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];

package/dist/types/index.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { classNames as cx } from "@ohkit/prefix-classname";
+import { DraggableBoxProps, DraggableBoxState } from './type';
+import './style.scss';
+export declare const c: (...arg: cx.ArgumentArray) => string;
+export declare class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {
+    static defaultProps: Partial<DraggableBoxProps>;
+    constructor(props: DraggableBoxProps);
+    getOtherYKey(yKey: 'top' | 'bottom'): "top" | "bottom";
+    getOtherXKey(xKey: 'left' | 'right'): "left" | "right";
+    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right'): void;
+    /**
+     * 获取定位容器
+     * 根据 positionMode 返回对应的定位父元素
+     */
+    private getContainer;
+    /**
+     * 获取容器的尺寸和位置信息
+     */
+    private getContainerRect;
+    get windowSize(): {
+        height: number;
+        width: number;
+    };
+    get dragBoxSize(): {
+        height: number;
+        width: number;
+    };
+    get dragPositionBoundaries(): {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    };
+    get dragPositionRang(): {
+        width: number;
+        height: number;
+    };
+    get curPositionKey(): ["top" | "bottom", "left" | "right"];
+    get position(): Record<string, string>;
+    draggerRef: HTMLDivElement | null;
+    isDragging: boolean;
+    axisX?: number;
+    axisY?: number;
+    dX: number;
+    dY: number;
+    startTop: number;
+    startLeft: number;
+    cachedScaleX: number;
+    cachedScaleY: number;
+    __moveDisposer?: () => void;
+    __clickDisposer?: () => void;
+    __bodyClassDisposer?: () => void;
+    __upDisposer?: () => void;
+    __resizeDisposer?: () => void;
+    dragAreaRef: HTMLDivElement | null;
+    reportStartPosition(): void;
+    enableDrag: () => void;
+    startDrag: (evt: React.MouseEvent<HTMLDivElement>) => void;
+    dragging: (evt: MouseEvent) => void;
+    endDrag: () => void;
+    showDragArea: () => void;
+    hideDragArea: () => void;
+    calcPosition: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export default DraggableBox;