fix: bug

wupengfei

4 天以前 b73edc1745f2d4dca892a097f13113e74cfbe854

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { toNumber } from './tool';
 
interface Position {
  x: number;
  y: number;
}
 
interface RegisterMoveablePanelOptions {
  wrapEl?: HTMLElement;
  onmousedown?(position: Position, event: MouseEvent): void;
  onmousemove?(position: Position, event: MouseEvent): void;
  onmouseup?(position: Position, event: MouseEvent): void;
}
 
export const registerMoveableElement = (
  el: HTMLElement,
  { onmousedown, onmousemove, onmouseup }: RegisterMoveablePanelOptions = {}
) => {
  let elRect = el.getBoundingClientRect();
  const position = { x: 0, y: 0 };
 
  const update = (event: MouseEvent) => {
    let dx = event.pageX - elRect.x;
    let dy = event.pageY - elRect.y;
 
    if (dx < 0) dx = 0;
    if (dx > elRect.width) dx = elRect.width;
    if (dy < 0) dy = 0;
    if (dy > elRect.height) dy = elRect.height;
 
    position.x = toNumber(dx / elRect.width, { decimal: 2 });
    position.y = toNumber(dy / elRect.height, { decimal: 2 });
  };
 
  const _onmousemove = (event: MouseEvent) => {
    update(event);
 
    if (onmousemove) {
      onmousemove(position, event);
    }
  };
 
  const _onmouseup = (event: MouseEvent) => {
    document.removeEventListener('mousemove', _onmousemove);
    document.removeEventListener('mouseup', _onmouseup);
 
    if (onmouseup) {
      onmouseup(position, event);
    }
  };
 
  const _onmousedown = (event: MouseEvent) => {
    // elRect 可能不准确，这里更新一下
    elRect = el.getBoundingClientRect();
 
    update(event);
 
    document.addEventListener('mousemove', _onmousemove);
    document.addEventListener('mouseup', _onmouseup);
 
    if (onmousedown) {
      onmousedown(position, event);
    }
  };
 
  el.addEventListener('mousedown', _onmousedown);
 
  return {
    destroy() {
      el.removeEventListener('mousedown', _onmousedown);
    },
  };
};