-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
121 lines (104 loc) · 3.17 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
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="./dist/worldview.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
/* Stuff you probably need to set */
#container {
width: 1000px; /* container size */
height: 1000px;
margin-left: 50px; /* container offset relative to page */
margin-top: 50px;
}
#world {
width: 1000px;
height: 500px;
}
/* Demo specific stuff, you can ignore */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#container {
background-color: gray;
opacity: 0.5;
}
#world {
border: 1px solid blue;
}
#ruler {
width: 1000px;
height: 1000px;
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
</style>
</head>
<body>
<div id="container" class="container">
<div style="border: 1px solid black; width: 1000px; height: 500px">
<svg id="world">
<rect width="100" height="100"></rect>
<rect width="15" height="15" fill="yellow"></rect>
</svg>
</div>
<svg id="ruler">
<g id="horizontal"></g>
<g id="vertical" transform="translate(0, 1000) rotate(-90)"></g>
</svg>
<script type="text/javascript" charset="utf-8">
document.onready = (function(global) {
var container = document.getElementById('container')
var node = document.getElementById('world')
function render({ transform }) {
node.style.transform = transform
}
var view = new worldviewjs(render, {
fit: true,
});
view.setContainerOrigin(50, 50)
view.setDimensions(1000, 500, 1000, 1000)
global.view = view;
container.addEventListener('mousewheel', function(e) {
e.preventDefault()
view.zoomAtMouse(e.deltaY, e)
})
container.addEventListener('mousedown', function(e) {
view.panStart(e)
})
document.addEventListener('mouseup', function(e) {
view.panEnd(e)
})
document.addEventListener('mousemove', function(e) {
view.panMove(e)
})
// Make a ruler for "measuring"
var ruler = document.getElementById('ruler');
var horizontal = document.getElementById('horizontal');
var vertical = document.getElementById('vertical');
const svgns = "http://www.w3.org/2000/svg";
for (var n of [horizontal, vertical]) {
for (var i = 0; i <= 10; i++) {
var rect = document.createElementNS(svgns, 'rect');
rect.setAttributeNS(null, 'x', i * 100);
rect.setAttributeNS(null, 'height', '50');
rect.setAttributeNS(null, 'width', '1');
n.appendChild(rect)
}
}
global.reset = function() {
view.debug.setWorldOrigin(0, 0)
render(view.debug.decorate(view.debug.transform()))
}
})(this)
</script>
</body>
</html>