react-resize-demo 1.0.2 → 2.0.1

package/dist/esm/utils/virtualNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualNode.js","sources":["../../../src/utils/virtualNode.ts"],"sourcesContent":["/**\r\n * 虚拟节点管理模块\r\n * 负责创建、更新、销毁虚拟节点，用于虚拟化拖拽\r\n */\r\n\r\nimport { VirtualNodeConfig, ResizeDirection } from '../types';\r\n\r\nclass VirtualNodeManager {\r\n    private virtualNodes: Map<HTMLElement, HTMLElement> = new Map(); // 存储虚拟节点映射：realEl -> virtualEl\r\n\r\n    /**\r\n     * 创建虚拟节点\r\n     * @param originalEl - 原始节点\r\n     * @param config - 虚拟化配置\r\n     * @returns 虚拟节点\r\n     */\r\n    createVirtualNode(originalEl: HTMLElement, config: VirtualNodeConfig = {}): HTMLElement | null {\r\n        if (!originalEl || !originalEl.parentElement) {\r\n            return null;\r\n        }\r\n\r\n        // 如果已存在虚拟节点，先移除\r\n        if (this.virtualNodes.has(originalEl)) {\r\n            this.removeVirtualNode(originalEl);\r\n        }\r\n\r\n        // 获取原始节点的位置和尺寸信息\r\n        const rect = originalEl.getBoundingClientRect();\r\n        const parentRect = originalEl.parentElement.getBoundingClientRect();\r\n        const computedStyle = window.getComputedStyle(originalEl);\r\n\r\n        // 创建虚拟节点（只复制结构，不复制内容以提高性能）\r\n        const virtualEl = originalEl.cloneNode(false) as HTMLElement; // false 表示不复制子节点\r\n        \r\n        // 计算相对于父容器的位置\r\n        const top = rect.top - parentRect.top + (originalEl.parentElement.scrollTop || 0);\r\n        const left = rect.left - parentRect.left + (originalEl.parentElement.scrollLeft || 0);\r\n        \r\n        // 设置虚拟节点样式\r\n        virtualEl.style.cssText = `\r\n            position: absolute;\r\n            top: ${top}px;\r\n            left: ${left}px;\r\n            width: ${rect.width}px;\r\n            height: ${rect.height}px;\r\n            margin: 0;\r\n            padding: ${computedStyle.padding};\r\n            border: ${computedStyle.border};\r\n            box-sizing: ${computedStyle.boxSizing};\r\n            pointer-events: none;\r\n            z-index: 10000;\r\n            opacity: 0.6;\r\n            background-color: ${computedStyle.backgroundColor || 'rgba(0, 123, 255, 0.1)'};\r\n            overflow: hidden;\r\n            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);\r\n        `;\r\n\r\n        // 应用自定义样式\r\n        if (config.style) {\r\n            Object.assign(virtualEl.style, config.style);\r\n        }\r\n\r\n        // 应用自定义类名\r\n        if (config.className) {\r\n            virtualEl.className = config.className;\r\n        }\r\n\r\n        // 隐藏原始节点的内容（可选，通过设置透明度）\r\n        const originalOpacity = originalEl.style.opacity;\r\n        originalEl.style.opacity = '0.3';\r\n        originalEl.dataset.originalOpacity = originalOpacity || '';\r\n\r\n        // 将虚拟节点插入到父容器中\r\n        originalEl.parentElement.appendChild(virtualEl);\r\n\r\n        // 存储映射关系\r\n        this.virtualNodes.set(originalEl, virtualEl);\r\n\r\n        return virtualEl;\r\n    }\r\n\r\n    /**\r\n     * 更新虚拟节点尺寸\r\n     * @param originalEl - 原始节点\r\n     * @param size - 新尺寸\r\n     * @param direction - 方向 'horizontal' | 'vertical'\r\n     */\r\n    updateVirtualNode(originalEl: HTMLElement, size: number, direction: ResizeDirection): void {\r\n        const virtualEl = this.virtualNodes.get(originalEl);\r\n        if (!virtualEl) return;\r\n\r\n        const sizeProperty = direction === 'horizontal' ? 'width' : 'height';\r\n        virtualEl.style[sizeProperty] = `${size}px`;\r\n    }\r\n\r\n    /**\r\n     * 更新虚拟节点位置（用于级联调整）\r\n     * @param originalEl - 原始节点\r\n     * @param newPosition - 新位置（绝对位置，不是偏移量）\r\n     * @param direction - 方向 'horizontal' | 'vertical'\r\n     */\r\n    updateVirtualNodePosition(originalEl: HTMLElement, newPosition: number, direction: ResizeDirection): void {\r\n        const virtualEl = this.virtualNodes.get(originalEl);\r\n        if (!virtualEl) return;\r\n\r\n        const positionProperty = direction === 'horizontal' ? 'left' : 'top';\r\n        virtualEl.style[positionProperty] = `${newPosition}px`;\r\n    }\r\n\r\n    /**\r\n     * 移除虚拟节点\r\n     * @param originalEl - 原始节点\r\n     */\r\n    removeVirtualNode(originalEl: HTMLElement): void {\r\n        const virtualEl = this.virtualNodes.get(originalEl);\r\n        if (!virtualEl) return;\r\n\r\n        // 恢复原始节点透明度\r\n        if (originalEl.dataset.originalOpacity !== undefined) {\r\n            originalEl.style.opacity = originalEl.dataset.originalOpacity;\r\n            delete originalEl.dataset.originalOpacity;\r\n        }\r\n\r\n        // 移除虚拟节点\r\n        if (virtualEl.parentElement) {\r\n            virtualEl.parentElement.removeChild(virtualEl);\r\n        }\r\n\r\n        // 移除映射关系\r\n        this.virtualNodes.delete(originalEl);\r\n    }\r\n\r\n    /**\r\n     * 将最终尺寸应用到真实节点\r\n     * @param originalEl - 原始节点\r\n     * @param finalSize - 最终尺寸\r\n     * @param direction - 方向 'horizontal' | 'vertical'\r\n     */\r\n    applyToRealNode(originalEl: HTMLElement, finalSize: number, direction: ResizeDirection): void {\r\n        const sizeProperty = direction === 'horizontal' ? 'width' : 'height';\r\n        originalEl.style[sizeProperty] = `${finalSize}px`;\r\n    }\r\n\r\n    /**\r\n     * 移除所有虚拟节点\r\n     */\r\n    removeAllVirtualNodes(): void {\r\n        const nodesToRemove = Array.from(this.virtualNodes.keys());\r\n        nodesToRemove.forEach(originalEl => {\r\n            this.removeVirtualNode(originalEl);\r\n        });\r\n        this.virtualNodes.clear();\r\n    }\r\n\r\n    /**\r\n     * 检查是否存在虚拟节点\r\n     * @param originalEl - 原始节点\r\n     * @returns 是否存在\r\n     */\r\n    hasVirtualNode(originalEl: HTMLElement): boolean {\r\n        return this.virtualNodes.has(originalEl);\r\n    }\r\n\r\n    /**\r\n     * 获取虚拟节点\r\n     * @param originalEl - 原始节点\r\n     * @returns 虚拟节点或null\r\n     */\r\n    getVirtualNode(originalEl: HTMLElement): HTMLElement | null {\r\n        return this.virtualNodes.get(originalEl) || null;\r\n    }\r\n\r\n    /**\r\n     * 销毁管理器，清理所有资源\r\n     */\r\n    destroy(): void {\r\n        this.removeAllVirtualNodes();\r\n    }\r\n}\r\n\r\nexport default VirtualNodeManager;\r\n\r\n"],"names":[],"mappings":"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"}