@ohkit/draggable-box 0.0.1

package/src/type.ts

@@ -0,0 +1,68 @@
+import type {ValidPlacement} from './constants';
+
+export interface DraggableBoxProps {
+  className?: string;
+  children?: React.ReactNode;
+  /**
+   * z-index 层级
+   * @default 9999
+   */
+  zIndex?: number;
+  /**
+   * 初始位置 横向偏移量
+   * @default 20
+   */
+  offsetX?: number;
+  /**
+   * 初始位置 纵向偏移量
+   * @default 20
+   */
+  offsetY?: number;
+  /**
+   * 是否禁用拖拽
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 拖拽位置，可选值：'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   * @default 'bottom-right'
+   */
+  placement?: typeof ValidPlacement[number]; // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  /**
+   * 锁定拖拽方向
+   * 'none' - 自由拖拽 (默认)
+   * 'x' - 只允许水平方向拖拽
+   * 'y' - 只允许垂直方向拖拽
+   * @default 'none'
+   */
+  lockAxis?: 'none' | 'x' | 'y';
+  /**
+   * X轴相对边界 [min, max] - 基于placement的相对距离范围
+   * 比如：placement='top-left'时，boundsX=[左边最小距离, 左边最大距离]
+   */
+  boundsX?: [number?, number?];
+  /**
+   * Y轴相对边界 [min, max] - 基于placement的相对距离范围
+   * 比如：placement='top-left'时，boundsY=[顶边最小距离, 顶边最大距离]
+   */
+  boundsY?: [number?, number?];
+  /**
+   * 是否在拖拽过程中展示拖拽区域可视化
+   * @default false
+   */
+  showDragArea?: boolean;
+  /**
+   * 定位模式
+   * 'fixed' - 使用 fixed 定位（默认），动态查找影响 fixed 定位的父元素
+   * 'absolute' - 使用 absolute 定位，基于最近的定位父元素
+   * @default 'fixed'
+   */
+  positionMode?: 'fixed' | 'absolute';
+}
+
+export interface DraggableBoxState {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}

package/src/utils.ts

@@ -0,0 +1,57 @@
+import {findParent} from '@ohkit/dom-helper';
+
+/**
+ * 查找影响 fixed 定位的父元素
+ * 当父元素有 transform/filter/perspective 等属性时，fixed 定位会相对于该父元素
+ */
+export function findFixedPositionParent(dom?: HTMLElement | null): HTMLElement {
+    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 fixedPositionParent;
+}
+
+/**
+ * 查找 absolute 定位的父元素
+ * 查找最近的 position 不为 static 的元素
+ */
+export function findAbsolutePositionParent(dom?: HTMLElement | null): HTMLElement {
+    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;
+}
+
+/**
+ * 获取容器的缩放比例
+ * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例
+ */
+export function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scaleY: number } {
+    if (!dom) {
+        return { scaleX: 1, scaleY: 1 };
+    }
+    // 通过比较 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;
+    // console.log('scaleX', scaleX, 'scaleY', scaleY);
+    return { scaleX, scaleY };
+}