xdesign-vue-next/es/_common/js/color-picker/draggable.mjs.map

XDesign Component for vue-next

{"version":3,"file":"draggable.mjs","sources":["../../../../src/_common/js/color-picker/draggable.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport type DraggableEvent = MouseEvent;\n\ninterface DraggableCallback {\n  (coordinate: Coordinate, event?: DraggableEvent): void;\n}\n\nexport interface DraggableProps {\n  start?: DraggableCallback;\n  drag?: DraggableCallback;\n  end?: DraggableCallback;\n}\n\ninterface DraggableHandles {\n  start: (this: Draggable, event: DraggableEvent) => {};\n  drag: (this: Draggable, event: DraggableEvent) => {};\n  end: (this: Draggable, event: DraggableEvent) => {};\n}\n\n// 配置项\nconst defaultsOptions: DraggableProps = {\n  start: (coordinate: Coordinate, event: DraggableEvent) => {},\n  drag: (coordinate: Coordinate, event: DraggableEvent) => {},\n  end: (coordinate: Coordinate, event: DraggableEvent) => {},\n};\n\nexport class Draggable {\n  private dragging = false;\n\n  private $el: HTMLElement;\n\n  private props: DraggableProps;\n\n  private handles: DraggableHandles;\n\n  constructor(el: HTMLElement, options?: DraggableProps) {\n    this.$el = el;\n    this.props = { ...defaultsOptions, ...options };\n    this.handles = {\n      start: this.#dragStart.bind(this),\n      drag: this.#drag.bind(this),\n      end: this.#dragEnd.bind(this),\n    };\n    this.$el.addEventListener('mousedown', this.handles.start, false);\n  }\n\n  #dragStart(event: DraggableEvent) {\n    if (this.dragging) {\n      return;\n    }\n    // event.preventDefault();\n    window.addEventListener('mousemove', this.handles.drag, false);\n    window.addEventListener('mouseup', this.handles.end, false);\n    window.addEventListener('contextmenu', this.handles.end, false);\n    this.dragging = true;\n    this.props.start(this.#getCoordinate(event), event);\n  }\n\n  #drag(event: DraggableEvent) {\n    if (!this.dragging) {\n      return;\n    }\n    this.props.drag(this.#getCoordinate(event), event);\n  }\n\n  #dragEnd(event: DraggableEvent) {\n    setTimeout(() => {\n      this.dragging = false;\n      this.props.end(this.#getCoordinate(event), event);\n    }, 0);\n    window.removeEventListener('mousemove', this.handles.drag, false);\n    window.removeEventListener('mouseup', this.handles.end, false);\n    window.removeEventListener('contextmenu', this.handles.end, false);\n  }\n\n  #getCoordinate(event: DraggableEvent) {\n    const rect = this.$el.getBoundingClientRect();\n    const mouseEvent = event;\n    const left = mouseEvent.clientX - rect.left;\n    const top = mouseEvent.clientY - rect.top;\n    return {\n      y: Math.min(Math.max(0, top), rect.height),\n      x: Math.min(Math.max(0, left), rect.width),\n    };\n  }\n\n  destroy() {\n    this.$el.removeEventListener('mousedown', this.handles.start, false);\n    window.removeEventListener('mousemove', this.handles.drag, false);\n    window.removeEventListener('mouseup', this.handles.end, false);\n    window.removeEventListener('contextmenu', this.handles.end, false);\n  }\n}\n\nexport default Draggable;\n"],"names":["end","_classCallCheck","_classPrivateMethodInitSpec","_defineProperty","_createClass","window","setTimeout","y","x"],"mappings":"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"}