misp-ui-library-test 0.0.1

package/src/packages/auto-grid-layout/src/utils/interact.js

@@ -0,0 +1,333 @@
+/**
+ * 原生拖拽/调整大小工具 - interact.js 替代方案
+ * 不依赖外部库，使用原生 Pointer Events 实现
+ */
+
+/**
+ * 获取控制点位置
+ */
+export function getControlPosition(e) {
+  return offsetXYFromParentOf(e)
+}
+
+/**
+ * 获取相对于 offsetParent 的坐标
+ */
+export function offsetXYFromParentOf(evt) {
+  const clientX = evt.clientX || (evt.touches && evt.touches[0].clientX) || 0
+  const clientY = evt.clientY || (evt.touches && evt.touches[0].clientY) || 0
+
+  const offsetParent = evt.target.offsetParent || document.body
+  const offsetParentRect = evt.offsetParent === document.body
+    ? { left: 0, top: 0 }
+    : offsetParent.getBoundingClientRect()
+
+  const x = clientX + offsetParent.scrollLeft - offsetParentRect.left
+  const y = clientY + offsetParent.scrollTop - offsetParentRect.top
+
+  return { x, y }
+}
+
+/**
+ * 创建核心数据对象
+ */
+export function createCoreData(lastX, lastY, x, y) {
+  const isStart = !isNum(lastX)
+
+  if (isStart) {
+    return {
+      deltaX: 0,
+      deltaY: 0,
+      lastX: x,
+      lastY: y,
+      x: x,
+      y: y
+    }
+  } else {
+    return {
+      deltaX: x - lastX,
+      deltaY: y - lastY,
+      lastX: lastX,
+      lastY: lastY,
+      x: x,
+      y: y
+    }
+  }
+}
+
+function isNum(num) {
+  return typeof num === 'number' && !isNaN(num)
+}
+
+/**
+ * 检查是否应该忽略的元素
+ */
+export function shouldIgnore(target, ignoreFrom) {
+  if (!ignoreFrom) return false
+  try {
+    return target.matches(ignoreFrom) || target.closest(ignoreFrom) !== null
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * 检查是否允许的区域
+ */
+export function isAllowed(target, allowFrom) {
+  if (!allowFrom) return true
+  try {
+    return target.matches(allowFrom) || target.closest(allowFrom) !== null
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * 拖拽/调整大小交互类
+ */
+export class Interactable {
+  constructor(element) {
+    this.element = element instanceof HTMLElement ? element : document.querySelector(element)
+    if (!this.element) {
+      throw new Error('Interactable: element not found')
+    }
+
+    this.dragEnabled = false
+    this.resizeEnabled = false
+    this.dragOptions = {}
+    this.resizeOptions = {}
+    this.handlers = {}
+    this.isDragging = false
+    this.isResizing = false
+    this.startX = 0
+    this.startY = 0
+    this.startWidth = 0
+    this.startHeight = 0
+    this.startLeft = 0
+    this.startRight = 0
+    this.resizeEdge = null
+
+    this.boundPointerDown = this.handlePointerDown.bind(this)
+    this.boundPointerMove = this.handlePointerMove.bind(this)
+    this.boundPointerUp = this.handlePointerUp.bind(this)
+  }
+
+  /**
+   * 启用拖拽
+   */
+  draggable(options) {
+    this.dragEnabled = options.enabled !== false
+    this.dragOptions = options || {}
+    return this
+  }
+
+  /**
+   * 启用调整大小
+   */
+  resizable(options) {
+    this.resizeEnabled = options.enabled !== false
+    this.resizeOptions = options || {}
+    return this
+  }
+
+  /**
+   * 设置光标样式
+   */
+  styleCursor(enabled) {
+    if (enabled === false) {
+      this.element.style.cursor = 'default'
+    }
+    return this
+  }
+
+  /**
+   * 注册事件处理器
+   */
+  on(events, handler) {
+    const eventList = events.split(/\s+/)
+    eventList.forEach(event => {
+      if (!this.handlers[event]) {
+        this.handlers[event] = []
+      }
+      this.handlers[event].push(handler)
+    })
+    return this
+  }
+
+  /**
+   * 注销事件处理器
+   */
+  off(events, handler) {
+    const eventList = events.split(/\s+/)
+    eventList.forEach(event => {
+      if (this.handlers[event] && handler) {
+        const index = this.handlers[event].indexOf(handler)
+        if (index > -1) {
+          this.handlers[event].splice(index, 1)
+        }
+      }
+    })
+    return this
+  }
+
+  /**
+   * 触发事件
+   */
+  triggerEvent(type, event) {
+    const handlers = this.handlers[type] || []
+    const interactEvent = {
+      type,
+      target: this.element,
+      clientX: event.clientX || (event.touches && event.touches[0].clientX) || 0,
+      clientY: event.clientY || (event.touches && event.touches[0].clientY) || 0,
+      deltaX: this.deltaX || 0,
+      deltaY: this.deltaY || 0,
+      preventDefault: () => event.preventDefault()
+    }
+    handlers.forEach(handler => handler(interactEvent))
+  }
+
+  /**
+   * 处理指针按下
+   */
+  handlePointerDown(e) {
+    const target = e.target
+
+    // 检查是否应该忽略
+    if (this.dragOptions.ignoreFrom && shouldIgnore(target, this.dragOptions.ignoreFrom)) {
+      return
+    }
+
+    // 检查是否在允许的区域（拖拽）
+    if (this.dragEnabled && this.dragOptions.allowFrom && !this.resizeOptions.edges) {
+      if (!isAllowed(target, this.dragOptions.allowFrom)) {
+        return
+      }
+    }
+
+    e.preventDefault()
+
+    const position = getControlPosition(e)
+    this.startX = position.x
+    this.startY = position.y
+    this.startWidth = this.element.offsetWidth
+    this.startHeight = this.element.offsetHeight
+    this.startLeft = this.element.offsetLeft
+    this.startTop = this.element.offsetTop
+
+    // 判断是拖拽还是调整大小
+    const resizeEdges = this.resizeOptions.edges
+    let isResizeHandle = false
+
+    if (resizeEdges && this.resizeEnabled) {
+      // 获取调整手柄的类名
+      const bottomClass = resizeEdges.bottom ? resizeEdges.bottom.replace(/^\./, '').split('.')[0] : ''
+      const rightClass = resizeEdges.right ? resizeEdges.right.replace(/^\./, '').split('.')[0] : ''
+
+      if (bottomClass && target.classList.contains(bottomClass)) {
+        isResizeHandle = true
+        this.resizeEdge = 'bottom'
+      }
+      if (rightClass && target.classList.contains(rightClass)) {
+        isResizeHandle = true
+        this.resizeEdge = this.resizeEdge ? 'bottom-right' : 'right'
+      }
+    }
+
+    if (isResizeHandle && this.resizeEnabled) {
+      this.isResizing = true
+      this.triggerEvent('resizestart', e)
+    } else if (this.dragEnabled && !this.static) {
+      this.isDragging = true
+      this.triggerEvent('dragstart', e)
+    }
+
+    document.addEventListener('pointermove', this.boundPointerMove, { passive: false })
+    document.addEventListener('pointerup', this.boundPointerUp)
+  }
+
+  /**
+   * 处理指针移动
+   */
+  handlePointerMove(e) {
+    const position = getControlPosition(e)
+    const deltaX = position.x - this.startX
+    const deltaY = position.y - this.startY
+
+    this.deltaX = deltaX
+    this.deltaY = deltaY
+
+    if (this.isResizing && this.resizeEnabled) {
+      this.handleResizeMove(e, deltaX, deltaY)
+    } else if (this.isDragging && this.dragEnabled) {
+      this.handleDragMove(e, deltaX, deltaY)
+    }
+  }
+
+  /**
+   * 处理拖拽移动
+   */
+  handleDragMove(e, deltaX, deltaY) {
+    e.preventDefault()
+    this.triggerEvent('dragmove', e)
+  }
+
+  /**
+   * 处理调整大小移动
+   */
+  handleResizeMove(e, deltaX, deltaY) {
+    e.preventDefault()
+    this.triggerEvent('resizemove', e)
+  }
+
+  /**
+   * 处理指针释放
+   */
+  handlePointerUp(e) {
+    if (this.isResizing) {
+      this.isResizing = false
+      this.triggerEvent('resizeend', e)
+      this.resizeEdge = null
+    }
+
+    if (this.isDragging) {
+      this.isDragging = false
+      this.triggerEvent('dragend', e)
+    }
+
+    document.removeEventListener('pointermove', this.boundPointerMove)
+    document.removeEventListener('pointerup', this.boundPointerUp)
+  }
+
+  /**
+   * 销毁实例
+   */
+  unset() {
+    document.removeEventListener('pointerdown', this.boundPointerDown)
+    document.removeEventListener('pointermove', this.boundPointerMove)
+    document.removeEventListener('pointerup', this.boundPointerUp)
+
+    this.element = null
+    this.handlers = {}
+    this.dragEnabled = false
+    this.resizeEnabled = false
+  }
+
+  /**
+   * 初始化监听
+   */
+  init() {
+    this.element.addEventListener('pointerdown', this.boundPointerDown)
+    return this
+  }
+}
+
+/**
+ * 创建可交互实例
+ */
+export default function interact(element) {
+  const instance = new Interactable(element)
+  instance.init()
+  return instance
+}

package/src/packages/auto-grid-layout/src/utils/responsiveUtils.js

@@ -0,0 +1,75 @@
+/**
+ * 响应式布局工具函数
+ */
+
+import { cloneLayout, compact, correctBounds } from './utils'
+
+/**
+ * @param  {Object} breakpoints
+ * @param  {Number} width
+ * @return {String}
+ */
+export function getBreakpointFromWidth(breakpoints, width) {
+  const sorted = sortBreakpoints(breakpoints)
+  let matching = sorted[0]
+  for (let i = 1, len = sorted.length; i < len; i++) {
+    const breakpointName = sorted[i]
+    if (width > breakpoints[breakpointName]) matching = breakpointName
+  }
+  return matching
+}
+
+/**
+ * @param  {String} breakpoint
+ * @param  {Object} cols
+ * @return {Number}
+ */
+export function getColsFromBreakpoint(breakpoint, cols) {
+  if (!cols[breakpoint]) {
+    throw new Error('ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!')
+  }
+  return cols[breakpoint]
+}
+
+/**
+ * @param  {Array} orgLayout
+ * @param  {Object} layouts
+ * @param  {Array} breakpoints
+ * @param  {String} breakpoint
+ * @param  {String} breakpoint
+ * @param  {Number} cols
+ * @param  {Boolean} verticalCompact
+ * @return {Array}
+ */
+export function findOrGenerateResponsiveLayout(orgLayout, layouts, breakpoints, breakpoint, lastBreakpoint, cols, verticalCompact) {
+  if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint])
+  let layout = orgLayout
+
+  const breakpointsSorted = sortBreakpoints(breakpoints)
+  const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint))
+  for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
+    const b = breakpointsAbove[i]
+    if (layouts[b]) {
+      layout = layouts[b]
+      break
+    }
+  }
+  layout = cloneLayout(layout || [])
+  return compact(correctBounds(layout, { cols: cols }), verticalCompact)
+}
+
+export function generateResponsiveLayout(layout, breakpoints, breakpoint, lastBreakpoint, cols, verticalCompact) {
+  layout = cloneLayout(layout || [])
+  return compact(correctBounds(layout, { cols: cols }), verticalCompact)
+}
+
+/**
+ * @param  {Object} breakpoints
+ * @return {Array}
+ */
+export function sortBreakpoints(breakpoints) {
+  const keys = Object.keys(breakpoints)
+  return keys.sort(function (a, b) {
+    return breakpoints[a] - breakpoints[b]
+  })
+}