-
Notifications
You must be signed in to change notification settings - Fork 592
/
index.html
111 lines (95 loc) · 3.51 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<script src="/node_modules/vega/build/vega.js"></script>
<script src="/build/vega-lite.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
// global
var view = null;
function embed(vlSpec) {
if (view) {
view.finalize();
}
const vgSpec = vegaLite.compile(vlSpec).spec;
view = new vega.View(vega.parse(vgSpec))
.renderer('svg')
.initialize('#vis')
.run();
}
const winSrc = ['mousemove', 'mouseup'];
function mouseEvt(type, target, opts) {
opts.bubbles = true;
target = winSrc.indexOf(type) < 0 ? target : window;
target.dispatchEvent(
new MouseEvent('mousemove', {...opts, clientX: opts.clientX - 5, clientY: opts.clientY - 5})
);
target.dispatchEvent(new MouseEvent('mousemove', opts));
target.dispatchEvent(type === 'wheel' ? new WheelEvent('wheel', opts) : new MouseEvent(type, opts));
target.dispatchEvent(
new MouseEvent('mousemove', {...opts, clientX: opts.clientX + 5, clientY: opts.clientY + 5})
);
}
function mark(id, parent) {
return document.querySelector((parent ? `g.${parent} ` : '') + `g.mark-symbol.role-mark path:nth-child(${id})`);
}
function coords(el) {
const rect = el.getBoundingClientRect();
return [Math.ceil(rect.left + rect.width / 2), Math.ceil(rect.top + rect.height / 2)];
}
function brushOrEl(el, parent, _) {
return !_ ? el : document.querySelector((parent ? `g.${parent} ` : '') + 'g.sel_brush > path');
}
function click(el, evt) {
mouseEvt('mousedown', el, evt);
mouseEvt('mouseup', window, evt);
mouseEvt('click', el, evt);
}
async function brush(id0, id1, parent, targetBrush) {
const el0 = mark(id0, parent);
const el1 = mark(id1, parent);
const [mdX, mdY] = coords(el0);
const [muX, muY] = coords(el1);
mouseEvt('mousedown', brushOrEl(el0, parent, targetBrush), {clientX: mdX, clientY: mdY});
mouseEvt('mouseup', window, {clientX: muX, clientY: muY});
return (await view.runAsync()).data('sel_store');
}
async function pt(id, parent, shiftKey) {
const el = mark(id, parent);
const [clientX, clientY] = coords(el);
click(el, {clientX, clientY, shiftKey});
return (await view.runAsync()).data('sel_store');
}
async function clear(id, parent, shiftKey) {
const bg = document.querySelector((parent ? `g.${parent} ` : '') + 'path.background');
const el = mark(id, parent);
let [clientX, clientY] = coords(el);
clientX += 10;
clientY -= 10;
click(bg, {clientX, clientY, shiftKey});
return (await view.runAsync()).data('sel_store');
}
async function zoom(id, delta, parent, targetBrush) {
const el = mark(id, parent);
const [clientX, clientY] = coords(el);
mouseEvt('wheel', brushOrEl(el, parent, targetBrush), {
clientX,
clientY,
deltaX: delta,
deltaY: delta,
deltaZ: delta
});
mouseEvt('wheel', brushOrEl(el, parent, targetBrush), {
clientX,
clientY,
deltaX: Math.sign(delta),
deltaY: Math.sign(delta),
deltaZ: Math.sign(delta)
});
return (await view.runAsync()).data('sel_store');
}
</script>
</body>
</html>