@ohkit/draggable-box 0.0.1 → 0.0.2

package/src/index.tsx

@@ -4,7 +4,7 @@ import {
   classNames as cx,
 } from "@ohkit/prefix-classname";
 import {addEventListener, addClass} from '@ohkit/dom-helper';
-import {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio} from './utils';
+import {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp} from './utils';
 import {ValidPlacement} from './constants';
 import {DraggableBoxProps, DraggableBoxState} from './type';
 
@@ -38,62 +38,65 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         };
     }
 
-    getOtherYKey(yKey: 'top' | 'bottom') {
-        return yKey === 'top' ? 'bottom' : 'top';
-    }
-
-    getOtherXKey(xKey: 'left' | 'right') {
-        return xKey === 'left' ? 'right' : 'left';
-    }
-
-    // TODO:
-    updatePosition(yKey: 'top' | 'bottom', xKey: 'left' | 'right') {
-        const oYKey = this.getOtherYKey(yKey);
-        const oXKey = this.getOtherXKey(xKey);
-        this.setState({
-            [oYKey]: this.dragPositionRang.height - (this.state[yKey] || 0),
-            [oXKey]: this.dragPositionRang.width - (this.state[xKey] || 0),
-        });
-    }
+    private prePositionMode: DraggableBoxProps['positionMode'];
+    private preDraggerRef: HTMLElement | null = null;
+    private container: HTMLElement | null = null;
     /**
      * 获取定位容器
      * 根据 positionMode 返回对应的定位父元素
      */
-    private getContainer(): HTMLElement {
+    private getContainer(useCache = true) {
         const { positionMode = 'fixed' } = this.props;
-        return positionMode === 'fixed' 
-            ? findFixedPositionParent(this.draggerRef) 
-            : findAbsolutePositionParent(this.draggerRef);
+        if (!this.container || !useCache || this.prePositionMode !== positionMode || this.preDraggerRef !== this.draggerRef) {
+            this.prePositionMode = positionMode;
+            this.preDraggerRef = this.draggerRef;
+            this.container = positionMode === 'fixed' 
+                ? findFixedPositionParent(this.draggerRef) 
+                : findAbsolutePositionParent(this.draggerRef);
+        }
+        return this.container;
     }
 
     /**
      * 获取容器的尺寸和位置信息
      */
     private getContainerRect() {
-        const { positionMode = 'fixed' } = this.props;
-        const isFixed = positionMode === 'fixed';
-        const container = this.getContainer();
+        const container = this.getContainer(false);
+        if (!container) {
+            return {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                left: 0,
+                top: 0,
+                scrollLeft: 0,
+                scrollTop: 0,
+                scrollerScrollLeft: 0,
+                scrollerScrollTop: 0,
+                borderLeftWidth: 0,
+                borderTopWidth: 0
+            };
+        }
         const containerRect = container.getBoundingClientRect();
-        const rootScrollingElement = window.document.scrollingElement || window.document.body;
-        const isRoot = container === window.document.body || container === window.document.documentElement;
-        return {
-            width: containerRect.width,
-            height: containerRect.height,
-            left: isFixed && isRoot ? Math.max(containerRect.left, 0) : containerRect.left + rootScrollingElement.scrollLeft,
-            top: isFixed && isRoot ? Math.max(containerRect.top, 0) : containerRect.top + rootScrollingElement.scrollTop,
-            scrollLeft: isFixed && isRoot ? 0 : container.scrollLeft, // container.scrollLeft,
-            scrollTop: isFixed && isRoot ? 0 : container.scrollTop, // container.scrollTop
-            scrollerScrollLeft: isFixed && isRoot ? 0 : rootScrollingElement.scrollLeft,
-            scrollerScrollTop: isFixed && isRoot ? 0 : rootScrollingElement.scrollTop
-        };
-    }
+        
+        // 获取容器的border宽度(仅 top, left 对坐标计算有影响)
+        const containerStyle = window.getComputedStyle(container);
+        const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) || 0;
+        const borderTopWidth = parseFloat(containerStyle.borderTopWidth) || 0;
+        const borderRightWidth = parseFloat(containerStyle.borderRightWidth) || 0;
+        const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) || 0;
+        const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;
+        const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;
+        // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);
 
-    get windowSize() {
-        const container = this.getContainer();
-        const { clientWidth, clientHeight } = container;
         return {
-            height: clientHeight,
-            width: clientWidth
+            width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,
+            height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,
+            left: containerRect.left / this.cachedScaleX,
+            top: containerRect.top / this.cachedScaleY,
+            scrollLeft: container.scrollLeft,
+            scrollTop: container.scrollTop,
+            borderLeftWidth: borderLeftWidth,
+            borderTopWidth: borderTopWidth,
         };
     }
 
@@ -113,19 +116,21 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
     get dragPositionBoundaries() {
         const { boundsX, boundsY, placement = 'bottom-right' } = this.props;
         const dragSize = this.dragBoxSize;
-        const windowSize = this.windowSize;
+        const {width: containerWidth, height: containerHeight} = this.getContainerRect();
         const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];
         
+        const defaultBounds = {
+            minX: 0,
+            maxX: Math.max(containerWidth - dragSize.width, 0),
+            minY: 0,
+            maxY: Math.max(containerHeight- dragSize.height, 0),
+        };
         // 初始化边界
-        let minX = 0;
-        let maxX = windowSize.width - dragSize.width;
-        let minY = 0;
-        let maxY = windowSize.height - dragSize.height;
+        let {minX, maxX, minY, maxY} = defaultBounds
 
         // 处理X轴边界
         if (boundsX) {
             const [minBound, maxBound] = boundsX;
-            
             if (placementX === 'left') {
                 // 左边位置：boundsX=[左边最小距离, 左边最大距离]
                 if (minBound !== undefined) minX = Math.max(minX, minBound);
@@ -134,19 +139,14 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                 // 右边位置：boundsX=[右边最小距离, 右边最大距离]
                 // 直接使用边界值作为right的限制
                 if (minBound !== undefined && maxBound !== undefined) {
-                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);
-                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);
+                    minX = Math.max(minX, containerWidth - maxBound - dragSize.width);
+                    maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);
                 } else if (minBound !== undefined) {
                     // 只有minBound：设置最大边界，最小边界保持默认
-                    maxX = Math.min(maxX, windowSize.width - minBound - dragSize.width);
+                    maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);
                 } else if (maxBound !== undefined) {
                     // 只有maxBound：设置最小边界，最大边界保持默认
-                    minX = Math.max(minX, windowSize.width - maxBound - dragSize.width);
-                }
-                
-                // 确保最小边界不大于最大边界
-                if (minX > maxX) {
-                    [minX, maxX] = [maxX, minX];
+                    minX = Math.max(minX, containerWidth - maxBound - dragSize.width);
                 }
             }
         }
@@ -163,31 +163,25 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                 // 底部位置：boundsY=[底边最小距离, 底边最大距离]
                 // 直接使用边界值作为bottom的限制
                 if (minBound !== undefined && maxBound !== undefined) {
-                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);
-                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);
+                    minY = Math.max(minY, containerHeight - maxBound - dragSize.height);
+                    maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);
                 } else if (minBound !== undefined) {
                     // 只有minBound：设置最大边界，最小边界保持默认
-                    maxY = Math.min(maxY, windowSize.height - minBound - dragSize.height);
+                    maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);
                 } else if (maxBound !== undefined) {
                     // 只有maxBound：设置最小边界，最大边界保持默认
-                    minY = Math.max(minY, windowSize.height - maxBound - dragSize.height);
-                }
-                
-                // 确保最小边界不大于最大边界
-                if (minY > maxY) {
-                    [minY, maxY] = [maxY, minY];
+                    minY = Math.max(minY, containerHeight - maxBound - dragSize.height);
                 }
             }
         }
+        // 确保各个边界值在默认范围内
+        minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);
+        maxX = clamp(maxX, minX, defaultBounds.maxX);
+        minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);
+        maxY = clamp(maxY, minY, defaultBounds.maxY);
 
         return { minX, maxX, minY, maxY };
     }
-    
-    // 保持向后兼容
-    get dragPositionRang() {
-        const { maxX, maxY } = this.dragPositionBoundaries;
-        return { width: maxX, height: maxY };
-    }
 
     get curPositionKey() {
         let {placement} = this.props;
@@ -237,18 +231,17 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
 
     reportStartPosition() {
         if (this.draggerRef) {
-            const { top, left } = this.draggerRef.getBoundingClientRect();
-            const containerRect = this.getContainerRect();
-            // console.log(containerRect, 'containerRect');
-            
             // 获取缩放比例
-            const { scaleX, scaleY } = getScaleRatio(this.draggerRef);
+            const { scaleX, scaleY } = getScaleRatio(this.getContainer());
             this.cachedScaleX = scaleX;
             this.cachedScaleY = scaleY;
+            const { top, left } = this.draggerRef.getBoundingClientRect();
+            const containerRect = this.getContainerRect();
+            // console.log(containerRect, 'containerRect');
             
             // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标
-            this.startTop = (top - containerRect.top + containerRect.scrollerScrollTop) / scaleY + containerRect.scrollTop;
-            this.startLeft = (left - containerRect.left + containerRect.scrollerScrollLeft) / scaleX + containerRect.scrollLeft;
+            this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;
+            this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;
         }
     }
 
@@ -404,20 +397,12 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
             this.dragAreaRef.style.height = '2px'; // 更细的虚线高度
             this.dragAreaRef.style.left = `${minX}px`;
             this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;
-            this.dragAreaRef.style.border = 'none';
-            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景
-            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to right, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';
-            this.dragAreaRef.style.backgroundSize = '4px 2px'; // 虚线模式
         } else if (lockAxis === 'y') {
             // 锁定X方向，显示为垂直虚线区域
             this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度
             this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;
             this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;
             this.dragAreaRef.style.top = `${minY}px`;
-            this.dragAreaRef.style.border = 'none';
-            this.dragAreaRef.style.backgroundColor = 'transparent'; // 透明背景
-            this.dragAreaRef.style.backgroundImage = 'linear-gradient(to bottom, var(--ohkit-color-primary, #1890ff) 50%, transparent 50%)';
-            this.dragAreaRef.style.backgroundSize = '2px 4px'; // 虚线模式
         } else {
             // 自由拖拽，显示完整区域
             this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;
@@ -437,7 +422,7 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
     calcPosition = () => {
         const { lockAxis } = this.props;
         const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;
-        const containerSize = this.windowSize;
+        const {height, width} = this.getContainerRect();
         
         // 计算新的位置
         let newTop = this.startTop;
@@ -451,13 +436,13 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         }
         
         // 应用边界限制
-        const realTop = Math.min(Math.max(minY, newTop), maxY);
-        const realLeft = Math.min(Math.max(minX, newLeft), maxX);
-        const realBottom = containerSize.height - realTop - this.dragBoxSize.height;
-        const realRight = containerSize.width - realLeft - this.dragBoxSize.width;
+        const realTop = clamp(newTop, minY, maxY);
+        const realLeft = clamp(newLeft, minX, maxX);
+        const realBottom = height - realTop - this.dragBoxSize.height;
+        const realRight = width - realLeft - this.dragBoxSize.width;
         if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {
-            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'calcPosition y');
-            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'calcPosition x');
+            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');
+            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');
             this.setState({
                 top: realTop,
                 left: realLeft,

package/src/utils.ts

@@ -1,42 +1,56 @@
 import {findParent} from '@ohkit/dom-helper';
 
+/**
+ * 检查元素是否创建了新的定位上下文(包含块)
+ * @param element 要检查的元素
+ * @param includePosition 是否检查position属性(absolute/relative/fixed)
+ */
+export function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {
+    const style = window.getComputedStyle(element);
+    const position = style.getPropertyValue('position');
+    const transform = style.getPropertyValue('transform');
+    const filter = style.getPropertyValue('filter');
+    const perspective = style.getPropertyValue('perspective');
+    const contain = style.getPropertyValue('contain');
+    const willChange = style.getPropertyValue('will-change');
+    
+    return (includePosition && position !== 'static') || 
+        transform !== 'none' || 
+        filter !== 'none' || 
+        perspective !== 'none' ||
+        contain.includes('paint') ||
+        contain.includes('layout') ||
+        contain.includes('strict') ||
+        willChange.includes('transform') ||
+        willChange.includes('perspective') ||
+        willChange.includes('filter');
+}
+
 /**
  * 查找影响 fixed 定位的父元素
- * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素
+ * 当父元素有 transform/filter/perspective/contain/will-change 等属性时，fixed 定位会相对于该父元素
  */
-export function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {
+export function findFixedPositionParent(dom?: HTMLElement | null) {
     if (!dom) {
         return document.documentElement;
     }
     const fixedPositionParent = findParent(dom, (parent) => {
-        const style = window.getComputedStyle(parent);
-        const transform = style.getPropertyValue('transform');
-        const filter = style.getPropertyValue('filter');
-        const perspective = style.getPropertyValue('perspective');
-        
-        // 检查是否有影响 fixed 定位的属性
-        if (transform !== 'none' || filter !== 'none' || perspective !== 'none') {
-            return true;
-        }
-    }, {excludeOwn: true}) || document.documentElement; // 没有找到，返回 window（通过 document.documentElement）
+        return isPositioningContextCreator(parent, false);
+    }, {excludeOwn: true}); // 没有找到，返回 window（通过 document.documentElement）
     return fixedPositionParent;
 }
 
 /**
  * 查找 absolute 定位的父元素
- * 查找最近的 position 不为 static 的元素
+ * 查找最近的包含块创建者，包含所有可能影响absolute定位的属性
  */
-export function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {
+export function findAbsolutePositionParent(dom?: HTMLElement | null) {
     if (!dom) {
         return document.body;
     }
     return findParent(dom, (parent) => {
-        const style = window.getComputedStyle(parent);
-        const position = style.getPropertyValue('position');
-        if (position !== 'static') {
-            return true;
-        }
-    }, {excludeOwn: true}) || document.body;
+        return isPositioningContextCreator(parent, true);
+    }, {excludeOwn: true});
 }
 
 /**
@@ -49,9 +63,26 @@ export function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scale
     }
     // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例
     const rect = dom.getBoundingClientRect();
-    // 扩大10倍进行计算，避免浮点数精度问题
-    const scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * 10) / 10 : 1;
-    const scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * 10) / 10 : 1;
+    let scaleX = 1;
+    let scaleY = 1;
+    // 扩大{magnification}倍进行计算, 相当于保留小数点后4位
+    const magnification = 10000;
+    scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * magnification) / magnification : 1;
+    scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;
+    // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);
+    // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);
     // console.log('scaleX', scaleX, 'scaleY', scaleY);
     return { scaleX, scaleY };
 }
+
+/**
+ * 限制数值在指定范围内
+ * 
+ * @param value 要限制的数值
+ * @param min 最小值
+ * @param max 最大值
+ * @returns 限制后的数值，确保在 [min, max] 范围内
+ */
+export function clamp(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}