npm - @ohkit/draggable-box - Versions diffs - 0.0.3 → 0.0.6 - Mend

@ohkit/draggable-box 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/*\n 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n /\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') \|\| \n transform !== 'none' \|\| \n filter !== 'none' \|\| \n perspective !== 'none' \|\|\n contain.includes('paint') \|\|\n contain.includes('layout') \|\|\n contain.includes('strict') \|\|\n willChange.includes('transform') \|\|\n willChange.includes('perspective') \|\|\n willChange.includes('filter');\n}\n\n/\n 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时，fixed 定位会相对于该父元素\n /\nexport function findFixedPositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到，返回 window（通过 document.documentElement）\n return fixedPositionParent;\n}\n\n/\n 查找 absolute 定位的父元素\n * 查找最近的包含块创建者，包含所有可能影响absolute定位的属性\n /\nexport function findAbsolutePositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/\n 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n /\nexport function getScaleRatio(dom?: HTMLElement \| null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/*\n 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值，确保在 [min, max] 范围内\n /\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/\n 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true，否则返回 false\n /\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window \|\| navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n \n const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n // 简化状态初始化\n this.state = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n };\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement \| null = null;\n private container: HTMLElement \| null = null;\n /\n 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n /\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container \|\| !useCache \|\| this.prePositionMode !== positionMode \|\| this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /\n 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: window.innerWidth,\n height: window.innerHeight,\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) \|\| 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) \|\| 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) \|\| 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) \|\| 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置：boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置：boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置：boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置：boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement \|\| !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' \| 'bottom', 'left' \| 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement \| null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n\n // 缓存缩放比例，避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n __moveDisposer?: () => void;\n __clickDisposer?: () => void;\n __bodyClassDisposer?: () => void;\n __upDisposer?: () => void;\n __resizeDisposer?: () => void;\n __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement \| null = null;\n\n reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n }\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px？？确保用户有真实的移动意愿，而不是手抖～～\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse \|\| 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.body, this.draggerRef], c('moving')) \|\| undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n this.dragging(evt as TouchEvent \| MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent \| TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例，避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量（需要除以缩放比例）\n this.dX = (pageX - (this.axisX \|\| 0)) / scaleX;\n this.dY = (pageY - (this.axisY \|\| 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件（在允许X轴移动时应用）\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件（在允许Y轴移动时应用）\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n this.calcPosition();\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea \|\| !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向，显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向，显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽，显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top \|\| realLeft !== this.state.left \|\| this.state.bottom !== realBottom \|\| this.state.right !== realRight) {\n // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.dX = this.dY = 0;\n };\n\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内，如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时，阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex \|\| 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </>\n );\n }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","prefixClassname","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","reportStartPosition","addEventListener","document","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","body","undefined","showDragArea","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","scaleY","TouchEvent","touch","touches","translateX","translateY","potentialLeft","potentialTop","startTouchDrag","calcPosition","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","_props$placement","placement","_props$offsetY","offsetY","_props$offsetX","offsetX","_placement$split","split","placementY","placementX","_proto","prototype","getContainer","useCache","dom","_this$props$positionM","positionMode","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","_getScaleRatio","scaleX","rect","magnification","round","getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","navigator","maxTouchPoints","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props","className","zIndex","children","_this$props$positionM2","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props2","boundsX","boundsY","_this$props2$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component","defaultProps"],"mappings":"2yBAOgB,SAAAA,EAA4BC,EAAsBC,GAC9D,IAAMC,EAAQC,OAAOC,iBAAiBJ,GAChCK,EAAWH,EAAMI,iBAAiB,YAClCC,EAAYL,EAAMI,iBAAiB,aACnCE,EAASN,EAAMI,iBAAiB,UAChCG,EAAcP,EAAMI,iBAAiB,eACrCI,EAAUR,EAAMI,iBAAiB,WACjCK,EAAaT,EAAMI,iBAAiB,eAE1C,OAAQL,GAAgC,WAAbI,GACT,SAAdE,GACW,SAAXC,GACgB,SAAhBC,GACAC,EAAQE,SAAS,UACjBF,EAAQE,SAAS,WACjBF,EAAQE,SAAS,WACjBD,EAAWC,SAAS,cACpBD,EAAWC,SAAS,gBACpBD,EAAWC,SAAS,SAC5B,CA2DgB,SAAAC,EAAMC,EAAeC,EAAaC,GAC9C,OAAOC,KAAKF,IAAIE,KAAKD,IAAIF,EAAOC,GAAMC,EAC1C,CCtFa,IAAAE,EAAiB,CAAC,WAAY,YAAa,cAAe,gBCW1DC,EAAIC,EAACC,gBAAC,yBACNC,eAAa,SAAAC,GAatB,SAAAD,EAAYE,GAAwBC,IAAAA,GAChCA,EAAAF,EAAAG,KAAAC,KAAMH,IAAMG,MAcRC,uBAAeH,EACfI,cAAoC,KAAIJ,EACxCK,UAAgC,KAAIL,EAsK5CM,WAAoC,KAAIN,EAExCO,YAAa,EAAKP,EAElBQ,WAAK,EAAAR,EACLS,WAAK,EAAAT,EACLU,GAAK,EAACV,EACNW,GAAK,EAACX,EACNY,SAAW,EAACZ,EACZa,UAAY,EAACb,EAGbc,aAAe,EAACd,EAChBe,aAAe,EAACf,EAEhBgB,sBAAchB,EACdiB,qBAAejB,EAAAA,EACfkB,yBAAmB,EAAAlB,EACnBmB,kBAAY,EAAAnB,EACZoB,wBAAgBpB,EAChBqB,6BAAuBrB,EAAAA,EAEvBsB,YAAqC,KAAItB,EAkBzCuB,WAAa,SAACC,QAAO,IAAPA,IAAAA,GAAU,GACpBxB,EAAKyB,sBACLzB,MAAAA,EAAKgB,gBAALhB,EAAKgB,iBACLhB,EAAKgB,eAAiBU,EAAAA,iBAAiBF,GAAWxB,EAAKM,WAAaN,EAAKM,WAAaqB,SAAUH,EAAU,YAAc,YAAa,SAACI,GAClIA,EAAIC,kBACAL,GACAI,EAAIE,iBAGH9B,EAAKiB,iBACezB,KAAKuC,KAAKvC,KAAKwC,IAAIhC,EAAKU,GAAI,GAAKlB,KAAKwC,IAAIhC,EAAKW,GAAI,KAEpDX,EAAKD,MAAMkC,8BAAgC,KAC3DjC,EAAKiB,gBAAkBS,EAAgBA,iBACnCC,SACA,QACA,SAACC,GACGA,EAAIC,iBACR,GACA,GAEJ7B,EAAKkB,oBAAsBgB,EAAAA,SAAS,CAACP,SAASQ,KAAMnC,EAAKM,YAAaZ,EAAE,iBAAc0C,EAGlFpC,EAAKD,MAAMsC,cAAgBrC,EAAKsB,aAChCtB,EAAKqC,gBAIjBrC,EAAKsC,SAASV,EAClB,EAAG,CACCW,SAAUf,UAGdxB,EAAKmB,cAALnB,EAAKmB,eACLnB,EAAKmB,aAAeO,EAAAA,iBAChBC,SACA,UACA,WACI3B,EAAKwC,SACT,GACA,EAER,EAACxC,EAEDyC,UAAY,SAACb,GAEsB,IAA3BA,EAAIc,YAAYC,SAGpB3C,EAAKQ,MAAQoB,EAAIc,YAAYE,MAC7B5C,EAAKS,MAAQmB,EAAIc,YAAYG,MACxB7C,EAAKD,MAAM+C,UACZ9C,EAAKuB,aAEb,EAACvB,EAEDsC,SAAW,SAACV,GACR5B,EAAKO,YAAa,EAClB,IAQIqC,EAAeC,EARXE,EAAa/C,EAAKD,MAAlBgD,SACRC,EAAmChD,EAAKiD,uBAAhCC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KAAMC,EAAIJ,EAAJI,KAAMC,EAAIL,EAAJK,KAIpBC,EAAStD,EAAKe,aAIpB,GAAIa,aAAe2B,WAAY,CAC3B,IAAMC,EAAQ5B,EAAI6B,QAAQ,GAC1B,IAAKD,EAAO,OACZZ,EAAQY,EAAMZ,MACdC,EAAQW,EAAMX,KACjB,MACGD,EAAQhB,EAAIgB,MACZC,EAAQjB,EAAIiB,MAIhB7C,EAAKU,IAAMkC,GAAS5C,EAAKQ,OAAS,IAhBnBR,EAAKc,aAiBpBd,EAAKW,IAAMkC,GAAS7C,EAAKS,OAAS,IAAM6C,EAGxC,IAAII,EAAa1D,EAAKU,GAClBiD,EAAa3D,EAAKW,GAEL,MAAboC,EACAY,EAAa,EACO,MAAbZ,IACPW,EAAa,GAIjB,IAAME,EAAgB5D,EAAKa,UAAY6C,EACjCG,EAAe7D,EAAKY,SAAW+C,EAGpB,MAAbZ,IACIa,EAAgBV,EAChBQ,EAAaR,EAAOlD,EAAKa,UAClB+C,EAAgBT,IACvBO,EAAaP,EAAOnD,EAAKa,YAKhB,MAAbkC,IACIc,EAAeT,EACfO,EAAaP,EAAOpD,EAAKY,SAClBiD,EAAeR,IACtBM,EAAaN,EAAOrD,EAAKY,WAI7BZ,EAAKM,aACLN,EAAKM,WAAW7B,MAAMK,UAAyB4E,aAAAA,SAAiBC,EAAU,MAElF,EAAC3D,EAED8D,eAAiB,SAAClC,GACd,IAAM4B,EAAQ5B,EAAI6B,QAAQ,GACrBD,IACLxD,EAAKQ,MAAQgD,EAAMZ,MACnB5C,EAAKS,MAAQ+C,EAAMX,MACd7C,EAAKD,MAAM+C,UACZ9C,EAAKuB,YAAW,GAExB,EAACvB,EAEDwC,QAAU,WACFxC,EAAKO,aACLP,EAAK+D,eACD/D,EAAKM,aACLN,EAAKM,WAAW7B,MAAMK,UAAY,IAIlCkB,EAAKD,MAAMsC,cACXrC,EAAKgE,gBAIThE,EAAKgB,iBACLhB,EAAKgB,iBACLhB,EAAKgB,oBAAiBoB,GAEtBpC,EAAKiB,iBACPgD,sBAAsB,WAChBjE,EAAKiB,kBACPjB,EAAKiB,kBACLjB,EAAKiB,qBAAkBmB,EAE3B,GAEEpC,EAAKmB,eACLnB,EAAKmB,eACLnB,EAAKmB,kBAAeiB,GAEpBpC,EAAKkB,sBACLlB,EAAKkB,sBACLlB,EAAKkB,yBAAsBkB,GAG/BpC,EAAKO,YAAa,CACtB,EAACP,EAEDqC,aAAe,WACX,GAAKrC,EAAKD,MAAMsC,cAAiBrC,EAAKsB,YAAtC,CAEA,IAAQyB,EAAa/C,EAAKD,MAAlBgD,SACRmB,EAAmClE,EAAKiD,uBAAhCC,EAAIgB,EAAJhB,KAAMC,EAAIe,EAAJf,KAAMC,EAAIc,EAAJd,KAAMC,EAAIa,EAAJb,KACpBc,EAAWnE,EAAKoE,YAGlBpE,EAAKsB,YAAY7C,MAAM4F,OAAS,iDAChCrE,EAAKsB,YAAY7C,MAAM6F,gBAAkB,2BAE5B,MAAbvB,GAEA/C,EAAKsB,YAAY7C,MAAM8F,MAAWpB,EAAOD,EAAOiB,EAASI,MAAK,KAC9DvE,EAAKsB,YAAY7C,MAAM+F,OAAS,MAChCxE,EAAKsB,YAAY7C,MAAMgG,KAAUvB,EAAI,KACrClD,EAAKsB,YAAY7C,MAAMiG,IAAS1E,EAAKY,SAAWuD,EAASK,OAAS,EACrE,MAAuB,MAAbzB,GAEP/C,EAAKsB,YAAY7C,MAAM8F,MAAQ,MAC/BvE,EAAKsB,YAAY7C,MAAM+F,OAAYnB,EAAOD,EAAOe,EAASK,YAC1DxE,EAAKsB,YAAY7C,MAAMgG,KAAUzE,EAAKa,UAAYsD,EAASI,MAAQ,EAAC,KACpEvE,EAAKsB,YAAY7C,MAAMiG,IAAStB,EAAI,OAGpCpD,EAAKsB,YAAY7C,MAAM8F,MAAWpB,EAAOD,EAAOiB,EAASI,WACzDvE,EAAKsB,YAAY7C,MAAM+F,OAAYnB,EAAOD,EAAOe,EAASK,OAAU,KACpExE,EAAKsB,YAAY7C,MAAMgG,KAAUvB,EAAI,KACrClD,EAAKsB,YAAY7C,MAAMiG,IAAStB,EACnC,MAEDpD,EAAKsB,YAAY7C,MAAMkG,QAAU,QACrC,EAAC3E,EAEDgE,aAAe,WACPhE,EAAKsB,cACLtB,EAAKsB,YAAY7C,MAAMkG,QAAU,OAEzC,EAAC3E,EACD+D,aAAe,WACX,IAAQhB,EAAa/C,EAAKD,MAAlBgD,SACR6B,EAAmC5E,EAAKiD,uBAAhCC,EAAI0B,EAAJ1B,KAAMC,EAAIyB,EAAJzB,KAAMC,EAAIwB,EAAJxB,KAAMC,EAAIuB,EAAJvB,KAC1BwB,EAAwB7E,EAAK8E,mBAAtBN,EAAMK,EAANL,OAAQD,EAAKM,EAALN,MAGXQ,EAAS/E,EAAKY,SACdoE,EAAUhF,EAAKa,UAEF,MAAbkC,IACAiC,GAAWhF,EAAKU,IAEH,MAAbqC,IACAgC,GAAU/E,EAAKW,IAInB,IAAMsE,EAAU7F,EAAM2F,EAAQ3B,EAAMC,GAC9B6B,EAAW9F,EAAM4F,EAAS9B,EAAMC,GAChCgC,EAAaX,EAASS,EAAUjF,EAAKoE,YAAYI,OACjDY,EAAYb,EAAQW,EAAWlF,EAAKoE,YAAYG,MAClDU,IAAYjF,EAAKqF,MAAMX,KAAOQ,IAAalF,EAAKqF,MAAMZ,MAAQzE,EAAKqF,MAAMC,SAAWH,GAAcnF,EAAKqF,MAAME,QAAUH,GAGvHpF,EAAKwF,SAAS,CACVd,IAAKO,EACLR,KAAMS,EACNI,OAAQH,EACRI,MAAOH,IAGfpF,EAAKY,SAAWqE,EAChBjF,EAAKa,UAAYqE,EACjBlF,EAAKU,GAAKV,EAAKW,GAAK,CACxB,EA3cI,IAAA8E,EAAmE1F,EAA3D2F,UAA0BC,EAAiC5F,EAA/B6F,QAAAA,OAAO,IAAAD,EAAG,GAAEA,EAAAE,EAAmB9F,EAAjB+F,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EAC9DE,QADoB,IAAHN,EAAG,eAAcA,GACSO,MAAM,KAA1CC,EAAUF,EAAEG,GAAAA,EAAUH,EAAA,GAQ3B,OALF/F,EAAKqF,MAAQ,CACTX,IAAoB,QAAfuB,EAAuBL,OAAUxD,EACtCkD,OAAuB,WAAfW,EAA0BL,OAAUxD,EAC5CqC,KAAqB,SAAfyB,EAAwBJ,OAAU1D,EACxCmD,MAAsB,UAAfW,EAAyBJ,OAAU1D,GAC5CpC,CACN,WAACF,KAAAD,yEAAA,QAAAsG,EAAAtG,EAAAuG,UAygBA,OAzgBAD,EASOE,aAAA,SAAaC,QAAAA,IAAAA,IAAAA,GAAW,GAC5B,IFjBgCC,EEiBhCC,EAAmCtG,KAAKH,MAAhC0G,aAAAA,OAAY,IAAAD,EAAG,QAAOA,EAQ9B,OAPKtG,KAAKG,WAAciG,GAAYpG,KAAKC,kBAAoBsG,GAAgBvG,KAAKE,gBAAkBF,KAAKI,aACrGJ,KAAKC,gBAAkBsG,EACvBvG,KAAKE,cAAgBF,KAAKI,WAC1BJ,KAAKG,UAA6B,UAAjBoG,GFrBWF,EEsBErG,KAAKI,YFlBfoG,aAAWH,EAAK,SAACI,GACzC,OAAOrI,EAA4BqI,GAAQ,EAC/C,EAAG,CAACC,YAAY,IAJLjF,SAASkF,gBAYlB,SAAqCN,GACvC,OAAKA,EAGEG,EAAAA,WAAWH,EAAK,SAACI,GACpB,OAAOrI,EAA4BqI,GAAQ,EAC/C,EAAG,CAACC,YAAY,IAJLjF,SAASQ,IAKxB,CEEkB2E,CAA2B5G,KAAKI,kBAE9BD,SAChB,EAAC8F,EAKOrB,iBAAA,WACJ,IAAMzE,EAAYH,KAAKmG,cAAa,GACpC,IAAKhG,EACD,MAAO,CACHkE,MAAO7F,OAAOqI,WACdvC,OAAQ9F,OAAOsI,YACfvC,KAAM,EACNC,IAAK,EACLuC,WAAY,EACZC,UAAW,EACXC,mBAAoB,EACpBC,kBAAmB,EACnBC,gBAAiB,EACjBC,eAAgB,GAGxB,IAAMC,EAAgBlH,EAAUmH,wBAG1BC,EAAiB/I,OAAOC,iBAAiB0B,GACzCgH,EAAkBK,WAAWD,EAAeJ,kBAAoB,EAChEC,EAAiBI,WAAWD,EAAeH,iBAAmB,EAC9DK,EAAmBD,WAAWD,EAAeE,mBAAqB,EAClEC,EAAoBF,WAAWD,EAAeG,oBAAsB,EAK1E,MAAO,CACHrD,MAAOgD,EAAchD,MAAQrE,KAAKY,aAAeuG,EAAkBM,GALhDtH,EAAUwH,YAAcxH,EAAUyH,YAAcT,EAAkBM,GAMrFnD,OAAQ+C,EAAc/C,OAAStE,KAAKa,aAAeuG,EAAiBM,GALhDvH,EAAU0H,aAAe1H,EAAU2H,aAAeV,EAAiBM,GAMvFnD,KAAM8C,EAAc9C,KAAOvE,KAAKY,aAChC4D,IAAK6C,EAAc7C,IAAMxE,KAAKa,aAC9BkG,WAAY5G,EAAU4G,WACtBC,UAAW7G,EAAU6G,UACrBG,gBAAiBA,EACjBC,eAAgBA,EAExB,EAACnB,EAoID1E,oBAAA,WACI,GAAIvB,KAAKI,WAAY,CAEjB,IAAA2H,EFjLN,SAAwB1B,GAC1B,IAAKA,EACD,MAAO,CAAE2B,OAAQ,EAAG5E,OAAQ,GAGhC,IAAM6E,EAAO5B,EAAIiB,wBAIXY,EAAgB,IAMtB,MAAO,CAAEF,OALA3B,EAAIsB,YAAc,EAAIrI,KAAK6I,MAAMF,EAAK5D,MAAQgC,EAAIsB,YAAcO,GAAiBA,EAAgB,EAKzF9E,OAJRiD,EAAIwB,aAAe,EAAIvI,KAAK6I,MAAMF,EAAK3D,OAAS+B,EAAIwB,aAAeK,GAAiBA,EAAgB,EAKjH,CEiKuCE,CAAcpI,KAAKmG,gBAA9B/C,EAAM2E,EAAN3E,OAChBpD,KAAKY,aADSmH,EAANC,OAERhI,KAAKa,aAAeuC,EACpB,IAAAiF,EAAsBrI,KAAKI,WAAWkH,wBAA9B9C,EAAG6D,EAAH7D,IAAKD,EAAI8D,EAAJ9D,KACP8C,EAAgBrH,KAAK4E,mBAI3B5E,KAAKU,SAAW8D,EAAMpB,EAASiE,EAAc7C,IAAM6C,EAAcL,UAAYK,EAAcD,eAC3FpH,KAAKW,UAAY4D,EAAOnB,EAASiE,EAAc9C,KAAO8C,EAAcN,WAAaM,EAAcF,eAClG,CACL,EAAClB,EAoPDqC,kBAAA,WAAiBC,IAAAA,EAEbvI,KAAAA,KAAKuB,sBACLvB,KAAK6D,eAEL7D,KAAKkB,iBAAmBM,mBAAiBhD,OAAQ,SAAU,WACvD+J,EAAK1E,cACT,GFlZqB,oBAAXrF,SAA2B,iBAAkBA,QAAUgK,UAAUC,eAAiB,IEqZ/DzI,KAAKI,aAC9BJ,KAAKmB,wBAA0BK,EAAAA,iBAAiBxB,KAAKI,WAAY,YAAa,SAACsB,GAC3EA,EAAIE,gBACR,GAER,EAACqE,EAEDyC,qBAAA,WAAoB,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EACK,OAArBL,EAAA3I,KAAKkB,mBAALyH,EAAA5I,WACA6I,OAAAA,EAAI5I,KAACgB,sBAAL4H,EAAA7I,KAAAC,aACA6I,EAAA7I,KAAKc,iBAAL+H,EAAA9I,KAAqBC,MACD,OAApB8I,EAAI9I,KAACe,kBAAL+H,EAAA/I,WACAgJ,OAAAA,EAAA/I,KAAKiB,eAAL8H,EAAAhJ,KAAAC,MAC4B,OAA5BgJ,EAAIhJ,KAACmB,0BAAL6H,EAAAjJ,KAA8BC,KAClC,EAACiG,EAEDgD,OAAA,eAAMC,EAAAlJ,KACFmJ,EAA8EnJ,KAAKH,MAA3EuJ,EAASD,EAATC,UAAWC,EAAMF,EAANE,OAAQC,EAAQH,EAARG,SAAUnH,EAAYgH,EAAZhH,aAAYoH,EAAAJ,EAAE5C,aAAAA,OAAe,IAAHgD,EAAG,QAAOA,EACjEhH,EAAuCvC,KAAvCuC,UAAWqB,EAA4B5D,KAA5B4D,eAAgBtB,EAAYtC,KAAZsC,QAC7BkH,EAAGC,EAAA,CACLJ,OAAAA,GACGrJ,KAAKtB,UACRA,SAAU6H,iBAEd,OACImD,EAAAA,QAAAC,cAAAC,SAAA,KACKzH,gBACGuH,EAAA,QAAAC,cAAA,MAAA,CACIP,UAAW5J,EAAE,aACbqK,IAAK,SAACC,GACFZ,EAAK9H,YAAc0I,CACvB,EACAvL,MAAO,CACHkG,QAAS,OACT/F,SAAU6H,EACVnC,gBAAiB,2BACjBD,OAAQ,iDACR4F,cAAe,OACfV,QAASA,GAAU,MAAQ,EAC3BW,UAAW,aACXC,aAAsC,SAAxBjK,KAAKH,MAAMgD,SAAsB,MAAQ,oBAInE6G,EAAAA,QAAAC,cACIP,MAAAA,CAAAA,UAAWc,EAAAA,WAAG1K,EAAE,aAAc4J,GAC9B7K,MAAOiL,EACPK,IAAK,SAACC,GACFZ,EAAK9I,WAAa0J,CACtB,EACAK,mBAAoB5H,EACpB6H,iBAAkB9H,EAClB+H,oBAAqBzG,EACrB0G,kBAAmBhI,GAElBgH,GAIjB,IAAC3J,OAAA4K,IAAA,cAAAC,IAzcD,WACI,IAAInG,EAAQ,EACRC,EAAS,EAKb,OAJItE,KAAKI,aACLiE,EAAQrE,KAAKI,WAAWuH,YACxBrD,EAAStE,KAAKI,WAAWyH,cAEtB,CACHvD,OAAAA,EACAD,MAAAA,EAER,GAAC,CAAAkG,IAAAC,yBAAAA,IAED,WACI,IAAAC,EAAyDzK,KAAKH,MAAtD6K,EAAOD,EAAPC,QAASC,EAAOF,EAAPE,QAAOC,EAAAH,EAAEjF,UAAAA,WAASoF,EAAG,eAAcA,EAC9C3G,EAAWjE,KAAKkE,YACtB2G,EAAyD7K,KAAK4E,mBAAhDkG,EAAcD,EAArBxG,MAA+B0G,EAAeF,EAAvBvG,OAC9B0G,EAAiCxF,EAAUM,MAAM,KAA1CC,EAAUiF,EAAEhF,GAAAA,EAAUgF,EAAA,GAEvBC,EAAgB,CAClBjI,KAAM,EACNC,KAAM3D,KAAKD,IAAIyL,EAAiB7G,EAASI,MAAO,GAChDnB,KAAM,EACNC,KAAM7D,KAAKD,IAAI0L,EAAiB9G,EAASK,OAAQ,IAGhDtB,EAA0BiI,EAA1BjI,KAAMC,EAAoBgI,EAApBhI,KAAMC,EAAc+H,EAAd/H,KAAMC,EAAQ8H,EAAR9H,KAGvB,GAAIuH,EAAS,CACT,IAAOQ,EAAsBR,EAAZS,GAAAA,EAAYT,EAAO,GACjB,SAAf1E,QAEiB9D,IAAbgJ,IAAwBlI,EAAO1D,KAAKD,IAAI2D,EAAMkI,SACjChJ,IAAbiJ,IAAwBlI,EAAO3D,KAAKF,IAAI6D,EAAMkI,UAIjCjJ,IAAbgJ,QAAuChJ,IAAbiJ,GAC1BnI,EAAO1D,KAAKD,IAAI2D,EAAM8H,EAAiBK,EAAWlH,EAASI,OAC3DpB,EAAO3D,KAAKF,IAAI6D,EAAM6H,EAAiBI,EAAWjH,EAASI,aACvCnC,IAAbgJ,EAEPjI,EAAO3D,KAAKF,IAAI6D,EAAM6H,EAAiBI,EAAWjH,EAASI,YACvCnC,IAAbiJ,IAEPnI,EAAO1D,KAAKD,IAAI2D,EAAM8H,EAAiBK,EAAWlH,EAASI,OAGtE,CAGD,GAAIsG,EAAS,CACT,IAAOO,EAAsBP,EAAO,GAAnBQ,EAAYR,EAE7B,GAAmB,QAAf5E,QAEiB7D,IAAbgJ,IAAwBhI,EAAO5D,KAAKD,IAAI6D,EAAMgI,SACjChJ,IAAbiJ,IAAwBhI,EAAO7D,KAAKF,IAAI+D,EAAMgI,UAIjCjJ,IAAbgJ,QAAuChJ,IAAbiJ,GAC1BjI,EAAO5D,KAAKD,IAAI6D,EAAM6H,EAAkBI,EAAWlH,EAASK,QAC5DnB,EAAO7D,KAAKF,IAAI+D,EAAM4H,EAAkBG,EAAWjH,EAASK,cACxCpC,IAAbgJ,EAEP/H,EAAO7D,KAAKF,IAAI+D,EAAM4H,EAAkBG,EAAWjH,EAASK,aACxCpC,IAAbiJ,IAEPjI,EAAO5D,KAAKD,IAAI6D,EAAM6H,EAAkBI,EAAWlH,EAASK,QAGvE,CAOD,MAAO,CAAEtB,KALTA,EAAO9D,EAAM8D,EAAMiI,EAAcjI,KAAMiI,EAAchI,MAKtCA,KAJfA,EAAO/D,EAAM+D,EAAMD,EAAMiI,EAAchI,MAIlBC,KAHrBA,EAAOhE,EAAMgE,EAAM+H,EAAc/H,KAAM+H,EAAc9H,MAG1BA,KAF3BA,EAAOjE,EAAMiE,EAAMD,EAAM+H,EAAc9H,MAG3C,IAACoH,IAAA,iBAAAC,IAED,WACI,IAAKhF,EAAaxF,KAAKH,MAAlB2F,UAIL,OAHKA,GAAcjG,EAAeN,SAASuG,KACvCA,EAAY,gBAETA,EAAUM,MAAM,IAC3B,GAACyE,CAAAA,IAAAC,WAAAA,IAED,WACI,IAAAY,EAAepL,KAAKqL,eAAbC,EAACF,EAAA,GAAEG,EAACH,KACLI,EAAyC,GAU/C,YAPsBtJ,IAAlBlC,KAAKmF,MAAMmG,KACXE,EAAeF,GAAQtL,KAAKmF,MAAMmG,GAAE,WAElBpJ,IAAlBlC,KAAKmF,MAAMoG,KACXC,EAAeD,GAAQvL,KAAKmF,MAAMoG,GAAE,MAGjCC,CACX,iPAlM8B9B,CAAR,CAAQA,EAAK,QAAC+B,WAA3B9L,EACF+L,aAA2C,CAC9CrC,OAAQ,KACRzD,QAAS,GACTF,QAAS,GACTF,UAAW,eACX5C,UAAU,EACVC,SAAU,OACVV,cAAc,EACdJ,6BAA8B,EAC9BwE,aAAc"}
1	+ {"version":3,"file":"index.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/*\n 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n /\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') \|\| \n transform !== 'none' \|\| \n filter !== 'none' \|\| \n perspective !== 'none' \|\|\n contain.includes('paint') \|\|\n contain.includes('layout') \|\|\n contain.includes('strict') \|\|\n willChange.includes('transform') \|\|\n willChange.includes('perspective') \|\|\n willChange.includes('filter');\n}\n\n/\n 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时，fixed 定位会相对于该父元素\n /\nexport function findFixedPositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到，返回 window（通过 document.documentElement）\n return fixedPositionParent;\n}\n\n/\n 查找 absolute 定位的父元素\n * 查找最近的包含块创建者，包含所有可能影响absolute定位的属性\n /\nexport function findAbsolutePositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/\n 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n /\nexport function getScaleRatio(dom?: HTMLElement \| null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/*\n 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值，确保在 [min, max] 范围内\n /\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/\n 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true，否则返回 false\n /\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window \|\| navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement \| null = null;\n private container: HTMLElement \| null = null;\n /*\n 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n /\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container \|\| !useCache \|\| this.prePositionMode !== positionMode \|\| this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /\n 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) \|\| 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) \|\| 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) \|\| 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) \|\| 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置：boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置：boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置：boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置：boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement \|\| !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' \| 'bottom', 'left' \| 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement \| null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例，避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement \| null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string> = {\n 'none': 'moving',\n 'x': 'moving-x',\n 'y': 'moving-y'\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px？？确保用户有真实的移动意愿，而不是手抖～～\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse \|\| 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.documentElement, this.draggerRef], c(this.dragingClassMap[this.props.lockAxis \|\| 'none'])) \|\| undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent \| MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent \| TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例，避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量（需要除以缩放比例）\n this.dX = (pageX - (this.axisX \|\| 0)) / scaleX;\n this.dY = (pageY - (this.axisY \|\| 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件（在允许X轴移动时应用）\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件（在允许Y轴移动时应用）\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea \|\| !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向，显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向，显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽，显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top \|\| realLeft !== this.state.left \|\| this.state.bottom !== realBottom \|\| this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' \| 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内，如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时，阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex \|\| 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","dragingClassMap","none","x","y","enableDrag","isTouch","reportStartPosition","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","lockAxis","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","_temp","_ref","formatState","offsetX","offsetY","_this$props","_proto","prototype","_temp2","_ref2","_ref2$offsetX","defaultProps","_ref2$offsetY","_this$props$placement","placement","_placement$split","split","placementY","placementX","getContainer","useCache","_this$props$positionM","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","_getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props2","className","zIndex","children","_this$props2$position","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props3","boundsX","boundsY","_this$props3$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","positionStyles","Component"],"mappings":"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"}

package/dist/index.modern.mjs CHANGED Viewed

@@ -1,2 +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)}function h(t,e){const i=window.getComputedStyle(t),s=i.getPropertyValue("position"),o=i.getPropertyValue("transform"),r=i.getPropertyValue("filter"),a=i.getPropertyValue("perspective"),h=i.getPropertyValue("contain"),n=i.getPropertyValue("will-change");return e&&"static"!==s||"none"!==o||"none"!==r||"none"!==a||h.includes("paint")||h.includes("layout")||h.includes("strict")||n.includes("transform")||n.includes("perspective")||n.includes("filter")}function n(t,e,i){return Math.min(Math.max(t,e),i)}const d=["top-left","top-right","bottom-left","bottom-right"],l=e("ohkit-draggable-box__");class p extends t.Component{constructor(t){super(t),this.prePositionMode=void 0,this.preDraggerRef=null,this.container=null,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.__preventScrollDisposer=void 0,this.dragAreaRef=null,this.enableDrag=(t=!1)=>{var e,i;this.reportStartPosition(),null==(e=this.__moveDisposer)||e.call(this),this.__moveDisposer=o(t&&this.draggerRef?this.draggerRef:document,t?"touchmove":"mousemove",e=>{e.stopPropagation(),t&&e.preventDefault(),this.__clickDisposer||Math.sqrt(Math.pow(this.dX,2)+Math.pow(this.dY,2))>(this.props.showDragAreaOverMoveDistanse||5)&&(this.__clickDisposer=o(document,"click",t=>{t.stopPropagation()},!0),this.__bodyClassDisposer=r([document.body,this.draggerRef],l("moving"))||void 0,this.props.showDragArea&&this.dragAreaRef&&this.showDragArea()),this.dragging(e)},{passive:!t}),null==(i=this.__upDisposer)||i.call(this),this.__upDisposer=o(document,"mouseup",()=>{this.endDrag()},!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;let h,n;if(t instanceof TouchEvent){const e=t.touches[0];if(!e)return;h=e.pageX,n=e.pageY}else h=t.pageX,n=t.pageY;this.dX=(h-(this.axisX||0))/this.cachedScaleX,this.dY=(n-(this.axisY||0))/a;let d=this.dX,l=this.dY;"x"===e?l=0:"y"===e&&(d=0);const p=this.startLeft+d,g=this.startTop+l;"y"!==e&&(p<i?d=i-this.startLeft:p>s&&(d=s-this.startLeft)),"x"!==e&&(g<o?l=o-this.startTop:g>r&&(l=r-this.startTop)),this.draggerRef&&(this.draggerRef.style.transform=`translate(${d}px, ${l}px)`)},this.startTouchDrag=t=>{const e=t.touches[0];e&&(this.axisX=e.pageX,this.axisY=e.pageY,this.props.disabled||this.enableDrag(!0))},this.endDrag=()=>{this.isDragging&&(this.calcPosition(),this.draggerRef&&(this.draggerRef.style.transform=""),this.props.showDragArea&&this.hideDragArea()),this.__moveDisposer&&(this.__moveDisposer(),this.__moveDisposer=void 0),this.__clickDisposer&&requestAnimationFrame(()=>{this.__clickDisposer&&(this.__clickDisposer(),this.__clickDisposer=void 0)}),this.__upDisposer&&(this.__upDisposer(),this.__upDisposer=void 0),this.__bodyClassDisposer&&(this.__bodyClassDisposer(),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`):"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.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,{height:r,width:a}=this.getContainerRect();let h=this.startTop,d=this.startLeft;"y"!==t&&(d+=this.dX),"x"!==t&&(h+=this.dY);const l=n(h,s,o),p=n(d,e,i),g=r-l-this.dragBoxSize.height,c=a-p-this.dragBoxSize.width;l===this.state.top&&p===this.state.left&&this.state.bottom===g&&this.state.right===c||this.setState({top:l,left:p,bottom:g,right:c}),this.startTop=l,this.startLeft=p,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}}getContainer(t=!0){const{positionMode:e="fixed"}=this.props;var i;return this.container&&t&&this.prePositionMode===e&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=e,this.preDraggerRef=this.draggerRef,this.container="fixed"===e?(i=this.draggerRef)?s(i,t=>h(t,!1),{excludeOwn:!0}):document.documentElement:function(t){return t?s(t,t=>h(t,!0),{excludeOwn:!0}):document.body}(this.draggerRef)),this.container}getContainerRect(){const t=this.getContainer(!1);if(!t)return{width:window.innerWidth,height:window.innerHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};const e=t.getBoundingClientRect(),i=window.getComputedStyle(t),s=parseFloat(i.borderLeftWidth)||0,o=parseFloat(i.borderTopWidth)||0,r=parseFloat(i.borderRightWidth)||0,a=parseFloat(i.borderBottomWidth)||0;return{width:e.width/this.cachedScaleX-s-r-(t.offsetWidth-t.clientWidth-s-r),height:e.height/this.cachedScaleY-o-a-(t.offsetHeight-t.clientHeight-o-a),left:e.left/this.cachedScaleX,top:e.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:s,borderTopWidth:o}}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,{width:o,height:r}=this.getContainerRect(),[a,h]=i.split("-"),d={minX:0,maxX:Math.max(o-s.width,0),minY:0,maxY:Math.max(r-s.height,0)};let{minX:l,maxX:p,minY:g,maxY:c}=d;if(t){const[e,i]=t;"left"===h?(void 0!==e&&(l=Math.max(l,e)),void 0!==i&&(p=Math.min(p,i))):void 0!==e&&void 0!==i?(l=Math.max(l,o-i-s.width),p=Math.min(p,o-e-s.width)):void 0!==e?p=Math.min(p,o-e-s.width):void 0!==i&&(l=Math.max(l,o-i-s.width))}if(e){const[t,i]=e;"top"===a?(void 0!==t&&(g=Math.max(g,t)),void 0!==i&&(c=Math.min(c,i))):void 0!==t&&void 0!==i?(g=Math.max(g,r-i-s.height),c=Math.min(c,r-t-s.height)):void 0!==t?c=Math.min(c,r-t-s.height):void 0!==i&&(g=Math.max(g,r-i-s.height))}return l=n(l,d.minX,d.maxX),p=n(p,l,d.maxX),g=n(g,d.minY,d.maxY),c=n(c,g,d.maxY),{minX:l,maxX:p,minY:g,maxY:c}}get curPositionKey(){let{placement:t}=this.props;return t&&d.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{scaleX:t,scaleY:e}=function(t){if(!t)return{scaleX:1,scaleY:1};const e=t.getBoundingClientRect();let i=1,s=1;const o=1e4;return i=t.offsetWidth>0?Math.round(e.width/t.offsetWidth*o)/o:1,s=t.offsetHeight>0?Math.round(e.height/t.offsetHeight*o)/o:1,{scaleX:i,scaleY:s}}(this.getContainer());this.cachedScaleX=t,this.cachedScaleY=e;const{top:i,left:s}=this.draggerRef.getBoundingClientRect(),o=this.getContainerRect();this.startTop=i/e-o.top+o.scrollTop-o.borderTopWidth,this.startLeft=s/e-o.left+o.scrollLeft-o.borderLeftWidth}}componentDidMount(){this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=o(window,"resize",()=>{this.calcPosition()}),"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)&&this.draggerRef&&(this.__preventScrollDisposer=o(this.draggerRef,"touchmove",t=>{t.preventDefault()}))}componentWillUnmount(){var t,e,i,s,o,r;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),null==(r=this.__preventScrollDisposer)||r.call(this)}render(){const{className:e,zIndex:s,children:o,showDragArea:r,positionMode:h="fixed"}=this.props,{startDrag:n,startTouchDrag:d,endDrag:p}=this,g=a({zIndex:s},this.position,{position:h});/*#__PURE__*/return t.createElement(Fragment,null,r&&/*#__PURE__*/t.createElement("div",{className:l("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(l("container"),e),style:g,ref:t=>{this.draggerRef=t},onMouseDownCapture:n,onMouseUpCapture:p,onTouchStartCapture:d,onTouchEndCapture:p},o))}}p.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"};export{p as DraggableBox,l as c,p as default};
+import t from"react";import{prefixClassname as i,classNames as e}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 i=1;i<arguments.length;i++){var e=arguments[i];for(var s in e)({}).hasOwnProperty.call(e,s)&&(t[s]=e[s])}return t},a.apply(null,arguments)}function h(t,i){const e=window.getComputedStyle(t),s=e.getPropertyValue("position"),o=e.getPropertyValue("transform"),r=e.getPropertyValue("filter"),a=e.getPropertyValue("perspective"),h=e.getPropertyValue("contain"),n=e.getPropertyValue("will-change");return i&&"static"!==s||"none"!==o||"none"!==r||"none"!==a||h.includes("paint")||h.includes("layout")||h.includes("strict")||n.includes("transform")||n.includes("perspective")||n.includes("filter")}function n(t){return t?s(t,t=>h(t,!1),{excludeOwn:!0}):document.documentElement}function d(t){return t?s(t,t=>h(t,!0),{excludeOwn:!0}):document.body}function l(t){if(!t)return{scaleX:1,scaleY:1};const i=t.getBoundingClientRect();let e=1,s=1;const o=1e4;return e=t.offsetWidth>0?Math.round(i.width/t.offsetWidth*o)/o:1,s=t.offsetHeight>0?Math.round(i.height/t.offsetHeight*o)/o:1,{scaleX:e,scaleY:s}}function p(t,i,e){return Math.min(Math.max(t,i),e)}function g(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)}const c=["top-left","top-right","bottom-left","bottom-right"],f=i("ohkit-draggable-box__");class m extends t.Component{constructor(t){super(t),this.prePositionMode=void 0,this.preDraggerRef=null,this.container=null,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.startBottom=0,this.startRight=0,this.translateX=0,this.translateY=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.__preventScrollDisposer=void 0,this.dragAreaRef=null,this.dragingClassMap={none:"moving",x:"moving-x",y:"moving-y"},this.enableDrag=(t=!1)=>{var i,e;this.reportStartPosition(),null==(i=this.__moveDisposer)||i.call(this),this.__moveDisposer=o(t&&this.draggerRef?this.draggerRef:document,t?"touchmove":"mousemove",i=>{i.stopPropagation(),t&&i.preventDefault(),this.__clickDisposer||Math.sqrt(Math.pow(this.dX,2)+Math.pow(this.dY,2))>(this.props.showDragAreaOverMoveDistanse||5)&&(this.__clickDisposer=o(document,"click",t=>{t.stopPropagation()},!0),this.__bodyClassDisposer=r([document.documentElement,this.draggerRef],f(this.dragingClassMap[this.props.lockAxis||"none"]))||void 0,this.props.showDragArea&&this.dragAreaRef&&this.showDragArea()),!this.isDragging&&this.props.onDragStart&&this.props.onDragStart({top:this.startTop,left:this.startLeft,bottom:this.startBottom,right:this.startRight,diffX:0,diffY:0}),this.dragging(i)},{passive:!t}),null==(e=this.__upDisposer)||e.call(this),this.__upDisposer=o(document,"mouseup",()=>{this.endDrag()},!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:i}=this.props,{minX:e,maxX:s,minY:o,maxY:r}=this.dragPositionBoundaries,a=this.cachedScaleY;let h,n;if(t instanceof TouchEvent){const i=t.touches[0];if(!i)return;h=i.pageX,n=i.pageY}else h=t.pageX,n=t.pageY;this.dX=(h-(this.axisX||0))/this.cachedScaleX,this.dY=(n-(this.axisY||0))/a;let d=this.dX,l=this.dY;"x"===i?l=0:"y"===i&&(d=0);const p=this.startLeft+d,g=this.startTop+l;"y"!==i&&(p<e?d=e-this.startLeft:p>s&&(d=s-this.startLeft)),"x"!==i&&(g<o?l=o-this.startTop:g>r&&(l=r-this.startTop)),(this.translateX!==d||this.translateY!==l)&&(this.props.onDrag&&this.props.onDrag({top:this.startTop+l,left:this.startLeft+d,bottom:this.startBottom-l,right:this.startRight-d,diffX:d,diffY:l}),this.draggerRef&&(this.draggerRef.style.transform=`translate(${d}px, ${l}px)`),this.translateX=d,this.translateY=l)},this.startTouchDrag=t=>{const i=t.touches[0];i&&(this.axisX=i.pageX,this.axisY=i.pageY,this.props.disabled||this.enableDrag(!0))},this.endDrag=()=>{if(this.isDragging){var t,i;const e=this.calcPosition();null==(t=(i=this.props).onDragEnd)||t.call(i,e),this.draggerRef&&(this.draggerRef.style.transform=""),this.props.showDragArea&&this.hideDragArea()}this.__moveDisposer&&(this.__moveDisposer(),this.__moveDisposer=void 0),this.__clickDisposer&&requestAnimationFrame(()=>{this.__clickDisposer&&(this.__clickDisposer(),this.__clickDisposer=void 0)}),this.__upDisposer&&(this.__upDisposer(),this.__upDisposer=void 0),this.__bodyClassDisposer&&(this.__bodyClassDisposer(),this.__bodyClassDisposer=void 0),this.isDragging=!1},this.showDragArea=()=>{if(!this.props.showDragArea||!this.dragAreaRef)return;const{lockAxis:t}=this.props,{minX:i,maxX:e,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=`${e-i+r.width}px`,this.dragAreaRef.style.height="2px",this.dragAreaRef.style.left=`${i}px`,this.dragAreaRef.style.top=`${this.startTop+r.height/2}px`):"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.width=`${e-i+r.width}px`,this.dragAreaRef.style.height=`${o-s+r.height}px`,this.dragAreaRef.style.left=`${i}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:i,maxX:e,minY:s,maxY:o}=this.dragPositionBoundaries,{height:r,width:a}=this.getContainerRect();let h=this.startTop,n=this.startLeft;"y"!==t&&(n+=this.dX),"x"!==t&&(h+=this.dY);const d=p(h,s,o),l=p(n,i,e),g=r-d-this.dragBoxSize.height,c=a-l-this.dragBoxSize.width;d===this.state.top&&l===this.state.left&&this.state.bottom===g&&this.state.right===c||this.setState({top:d,left:l,bottom:g,right:c});const f={top:d,left:l,bottom:g,right:c,diffX:l-this.startLeft,diffY:d-this.startTop};return this.startTop=d,this.startLeft=l,this.startBottom=g,this.startRight=c,this.dX=this.dY=0,f},this.updateState=({offsetX:t,offsetY:i}={})=>{this.setState(this.formatState({offsetX:t,offsetY:i}),()=>{this.reportStartPosition(),this.calcPosition()})};const{offsetX:i,offsetY:e}=this.props;this.state=this.formatState({offsetX:i,offsetY:e})}formatState({offsetX:t=m.defaultProps.offsetX,offsetY:i=m.defaultProps.offsetY}={}){const{placement:e="bottom-right"}=this.props,[s,o]=e.split("-");return{top:"top"===s?i:void 0,bottom:"bottom"===s?i:void 0,left:"left"===o?t:void 0,right:"right"===o?t:void 0}}getContainer(t=!0){const{positionMode:i="fixed"}=this.props;return this.container&&t&&this.prePositionMode===i&&this.preDraggerRef===this.draggerRef||(this.prePositionMode=i,this.preDraggerRef=this.draggerRef,this.container="fixed"===i?n(this.draggerRef):d(this.draggerRef)),this.container}getContainerRect(){const t=this.getContainer(!1);if(!t)return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,scrollLeft:0,scrollTop:0,scrollerScrollLeft:0,scrollerScrollTop:0,borderLeftWidth:0,borderTopWidth:0};const i=t.getBoundingClientRect(),e=window.getComputedStyle(t),s=parseFloat(e.borderLeftWidth)||0,o=parseFloat(e.borderTopWidth)||0,r=parseFloat(e.borderRightWidth)||0,a=parseFloat(e.borderBottomWidth)||0;return{width:i.width/this.cachedScaleX-s-r-(t.offsetWidth-t.clientWidth-s-r),height:i.height/this.cachedScaleY-o-a-(t.offsetHeight-t.clientHeight-o-a),left:i.left/this.cachedScaleX,top:i.top/this.cachedScaleY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,borderLeftWidth:s,borderTopWidth:o}}get dragBoxSize(){let t=0,i=0;return this.draggerRef&&(t=this.draggerRef.offsetWidth,i=this.draggerRef.offsetHeight),{height:i,width:t}}get dragPositionBoundaries(){const{boundsX:t,boundsY:i,placement:e="bottom-right"}=this.props,s=this.dragBoxSize,{width:o,height:r}=this.getContainerRect(),[a,h]=e.split("-"),n={minX:0,maxX:Math.max(o-s.width,0),minY:0,maxY:Math.max(r-s.height,0)};let{minX:d,maxX:l,minY:g,maxY:c}=n;if(t){const[i,e]=t;"left"===h?(void 0!==i&&(d=Math.max(d,i)),void 0!==e&&(l=Math.min(l,e))):void 0!==i&&void 0!==e?(d=Math.max(d,o-e-s.width),l=Math.min(l,o-i-s.width)):void 0!==i?l=Math.min(l,o-i-s.width):void 0!==e&&(d=Math.max(d,o-e-s.width))}if(i){const[t,e]=i;"top"===a?(void 0!==t&&(g=Math.max(g,t)),void 0!==e&&(c=Math.min(c,e))):void 0!==t&&void 0!==e?(g=Math.max(g,r-e-s.height),c=Math.min(c,r-t-s.height)):void 0!==t?c=Math.min(c,r-t-s.height):void 0!==e&&(g=Math.max(g,r-e-s.height))}return d=p(d,n.minX,n.maxX),l=p(l,d,n.maxX),g=p(g,n.minY,n.maxY),c=p(c,g,n.maxY),{minX:d,maxX:l,minY:g,maxY:c}}get curPositionKey(){let{placement:t}=this.props;return t&&c.includes(t)||(t="bottom-right"),t.split("-")}get position(){const[t,i]=this.curPositionKey,e={};return void 0!==this.state[t]&&(e[t]=`${this.state[t]}px`),void 0!==this.state[i]&&(e[i]=`${this.state[i]}px`),e}reportStartPosition(){if(this.draggerRef){const{scaleX:t,scaleY:i}=l(this.getContainer());this.cachedScaleX=t,this.cachedScaleY=i;const{top:e,left:s}=this.draggerRef.getBoundingClientRect(),o=this.getContainerRect();this.startTop=e/i-o.top+o.scrollTop-o.borderTopWidth,this.startLeft=s/i-o.left+o.scrollLeft-o.borderLeftWidth,this.startBottom=o.height-this.startTop-this.dragBoxSize.height,this.startRight=o.width-this.startLeft-this.dragBoxSize.width}}componentDidMount(){this.reportStartPosition(),this.calcPosition(),this.__resizeDisposer=o(window,"resize",()=>{this.calcPosition()}),g()&&this.draggerRef&&(this.__preventScrollDisposer=o(this.draggerRef,"touchmove",t=>{t.preventDefault()}))}componentWillUnmount(){var t,i,e,s,o,r;null==(t=this.__resizeDisposer)||t.call(this),null==(i=this.__bodyClassDisposer)||i.call(this),null==(e=this.__moveDisposer)||e.call(this),null==(s=this.__clickDisposer)||s.call(this),null==(o=this.__upDisposer)||o.call(this),null==(r=this.__preventScrollDisposer)||r.call(this)}render(){const{className:i,zIndex:s,children:o,showDragArea:r,positionMode:h="fixed"}=this.props,{startDrag:n,startTouchDrag:d,endDrag:l}=this,p=a({zIndex:s},this.position,{position:h});/*#__PURE__*/return t.createElement(t.Fragment,null,r&&/*#__PURE__*/t.createElement("div",{className:f("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:e(f("container"),i),style:p,ref:t=>{this.draggerRef=t},onMouseDownCapture:n,onMouseUpCapture:l,onTouchStartCapture:d,onTouchEndCapture:l},o))}}m.defaultProps={zIndex:9999,offsetX:20,offsetY:20,placement:"bottom-right",disabled:!1,lockAxis:"none",showDragArea:!1,showDragAreaOverMoveDistanse:5,positionMode:"fixed"};export{m as DraggableBox,f as c,p as clamp,d as findAbsolutePositionParent,n as findFixedPositionParent,l as getScaleRatio,h as isPositioningContextCreator,g as supportsTouchEvents};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.modern.mjs","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/*\n 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n /\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') \|\| \n transform !== 'none' \|\| \n filter !== 'none' \|\| \n perspective !== 'none' \|\|\n contain.includes('paint') \|\|\n contain.includes('layout') \|\|\n contain.includes('strict') \|\|\n willChange.includes('transform') \|\|\n willChange.includes('perspective') \|\|\n willChange.includes('filter');\n}\n\n/\n 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时，fixed 定位会相对于该父元素\n /\nexport function findFixedPositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到，返回 window（通过 document.documentElement）\n return fixedPositionParent;\n}\n\n/\n 查找 absolute 定位的父元素\n * 查找最近的包含块创建者，包含所有可能影响absolute定位的属性\n /\nexport function findAbsolutePositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/\n 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n /\nexport function getScaleRatio(dom?: HTMLElement \| null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/*\n 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值，确保在 [min, max] 范围内\n /\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/\n 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true，否则返回 false\n /\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window \|\| navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n \n const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n // 简化状态初始化\n this.state = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n };\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement \| null = null;\n private container: HTMLElement \| null = null;\n /\n 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n /\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container \|\| !useCache \|\| this.prePositionMode !== positionMode \|\| this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /\n 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: window.innerWidth,\n height: window.innerHeight,\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) \|\| 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) \|\| 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) \|\| 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) \|\| 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置：boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置：boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置：boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置：boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement \|\| !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' \| 'bottom', 'left' \| 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement \| null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n\n // 缓存缩放比例，避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n __moveDisposer?: () => void;\n __clickDisposer?: () => void;\n __bodyClassDisposer?: () => void;\n __upDisposer?: () => void;\n __resizeDisposer?: () => void;\n __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement \| null = null;\n\n reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n }\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px？？确保用户有真实的移动意愿，而不是手抖～～\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse \|\| 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.body, this.draggerRef], c('moving')) \|\| undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n this.dragging(evt as TouchEvent \| MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent \| TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例，避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量（需要除以缩放比例）\n this.dX = (pageX - (this.axisX \|\| 0)) / scaleX;\n this.dY = (pageY - (this.axisY \|\| 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件（在允许X轴移动时应用）\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件（在允许Y轴移动时应用）\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n this.calcPosition();\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea \|\| !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向，显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向，显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽，显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top \|\| realLeft !== this.state.left \|\| this.state.bottom !== realBottom \|\| this.state.right !== realRight) {\n // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');\n // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.dX = this.dY = 0;\n };\n\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内，如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时，阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex \|\| 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </>\n );\n }\n}\n\nexport default DraggableBox;"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","clamp","value","min","max","Math","ValidPlacement","c","p","DraggableBox","React","Component","constructor","props","super","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","_this$__moveDisposer","_this$__upDisposer","reportStartPosition","call","addEventListener","document","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","body","undefined","showDragArea","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","minX","maxX","minY","maxY","dragPositionBoundaries","scaleY","TouchEvent","touch","touches","translateX","translateY","potentialLeft","potentialTop","startTouchDrag","calcPosition","hideDragArea","requestAnimationFrame","dragSize","dragBoxSize","border","backgroundColor","width","height","left","top","display","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","bottom","right","setState","placement","offsetY","offsetX","placementY","placementX","split","getContainer","useCache","positionMode","dom","findParent","parent","excludeOwn","documentElement","findAbsolutePositionParent","innerWidth","innerHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","getBoundingClientRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","offsetWidth","clientWidth","offsetHeight","clientHeight","boundsX","boundsY","containerWidth","containerHeight","defaultBounds","minBound","maxBound","curPositionKey","y","x","positionStyles","scaleX","rect","magnification","round","getScaleRatio","componentDidMount","navigator","maxTouchPoints","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer2","_this$__clickDisposer","_this$__upDisposer2","_this$__preventScroll","render","className","zIndex","children","stl","_extends","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","defaultProps"],"mappings":"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"}
1	+ {"version":3,"file":"index.modern.mjs","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/*\n 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n /\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') \|\| \n transform !== 'none' \|\| \n filter !== 'none' \|\| \n perspective !== 'none' \|\|\n contain.includes('paint') \|\|\n contain.includes('layout') \|\|\n contain.includes('strict') \|\|\n willChange.includes('transform') \|\|\n willChange.includes('perspective') \|\|\n willChange.includes('filter');\n}\n\n/\n 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时，fixed 定位会相对于该父元素\n /\nexport function findFixedPositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到，返回 window（通过 document.documentElement）\n return fixedPositionParent;\n}\n\n/\n 查找 absolute 定位的父元素\n * 查找最近的包含块创建者，包含所有可能影响absolute定位的属性\n /\nexport function findAbsolutePositionParent(dom?: HTMLElement \| null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/\n 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n /\nexport function getScaleRatio(dom?: HTMLElement \| null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/*\n 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值，确保在 [min, max] 范围内\n /\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/\n 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true，否则返回 false\n /\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window \|\| navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement \| null = null;\n private container: HTMLElement \| null = null;\n /*\n 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n /\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container \|\| !useCache \|\| this.prePositionMode !== positionMode \|\| this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /\n 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) \|\| 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) \|\| 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) \|\| 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) \|\| 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' \| 'bottom', 'left' \| 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置：boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置：boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置：boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置：boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound：设置最大边界，最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound：设置最小边界，最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement \|\| !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' \| 'bottom', 'left' \| 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement \| null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例，避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement \| null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string> = {\n 'none': 'moving',\n 'x': 'moving-x',\n 'y': 'moving-y'\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px？？确保用户有真实的移动意愿，而不是手抖～～\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse \|\| 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.documentElement, this.draggerRef], c(this.dragingClassMap[this.props.lockAxis \|\| 'none'])) \|\| undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent \| MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent \| TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例，避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量（需要除以缩放比例）\n this.dX = (pageX - (this.axisX \|\| 0)) / scaleX;\n this.dY = (pageY - (this.axisY \|\| 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件（在允许X轴移动时应用）\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件（在允许Y轴移动时应用）\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea \|\| !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向，显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向，显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽，显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top \|\| realLeft !== this.state.left \|\| this.state.bottom !== realBottom \|\| this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' \| 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内，如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时，阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex \|\| 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","React","Component","constructor","props","super","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","dragingClassMap","none","x","y","enableDrag","isTouch","_this$__moveDisposer","_this$__upDisposer","reportStartPosition","call","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","lockAxis","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","minX","maxX","minY","maxY","dragPositionBoundaries","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","_this$props$onDragEnd","_this$props","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","dragSize","dragBoxSize","border","backgroundColor","display","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","offsetX","offsetY","formatState","defaultProps","placement","placementY","placementX","split","getContainer","useCache","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","boundsX","boundsY","containerWidth","containerHeight","defaultBounds","minBound","maxBound","curPositionKey","positionStyles","componentDidMount","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer2","_this$__clickDisposer","_this$__upDisposer2","_this$__preventScroll","render","className","zIndex","children","stl","_extends","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture"],"mappings":"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"}

package/dist/index.umd.js CHANGED Viewed

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