-
Notifications
You must be signed in to change notification settings - Fork 0
/
position-handle.js
85 lines (77 loc) · 1.56 KB
/
position-handle.js
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
74
75
76
77
78
79
80
81
82
83
84
85
import {CornerHandle} from "./corner-handle.js";
export
class PositionHandle
extends HTMLElement
{
constructor ()
{
super();
this.attachShadow({mode:"open"});
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
position: relative;
pointer-events: none;
}
#startHandle,
#endHandle {
pointer-events: auto;
position: absolute;
background: purple;
opacity: 0.5;
width: 20px;
height: 20px;
}
#startHandle {
top: 0;
left: 0;
cursor: nw-resize;
}
#endHandle {
bottom: 0;
right: 0;
cursor: se-resize;
}
</style>
<corner-handle id="startHandle"></corner-handle>
<corner-handle id="endHandle"></corner-handle>
`.trim().replace(/>\s+</g, "><");
this._startHandle = this.shadowRoot.querySelector("#startHandle");
this._endHandle = this.shadowRoot.querySelector("#endHandle");
}
set cell (c)
{
this._cell = c;
let style = getComputedStyle(this._cell);
this.style.gridColumn = style.gridColumn;
this.style.gridRow = style.gridRow;
}
connectedCallback ()
{
this._startHandle.onMove = this.onStartHandleMove;
this._startHandle.onDone = this.onStartHandleMoveDone;
this._endHandle.onMove = this.onEndHandleMove;
this._endHandle.onDone = this.onEndHandleMoveDone;
}
onStartHandleMove (x,y)
{
// consumer todo
}
onStartHandleMoveDone (x,y)
{
// consumer todo
}
onEndHandleMove (x,y)
{
// consumer todo
}
onEndHandleMoveDone (x,y)
{
// consumer todo
}
}
customElements.define(
"position-handle",
PositionHandle
);