-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (231 loc) · 11 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<html>
<head>
<title>getBoxQuads Test</title>
<style>
svg {
fill: rgba(255, 166, 0, 0.205);
stroke: orange;
stroke-dasharray: 2;
overflow: visible;
}
svg rect {
fill: blue;
}
</style>
</head>
<body>
<template id="wc-test-template">
<div style="width: 100%; height: 100%; position: absolute">
<div
style="z-index: 1; position: absolute; left: 50px; top: 5px; width: 100px; height: 50px; rotate: -45deg; background: lightpink;">
WC-test</div>
</div>
</template>
<div
style="z-index: -1; position: fixed; right: 5px; top: 20px; width: 400px; height: 200px; background: lightblue;">
<div style="position: absolute; right: 5px; top: 5px; color: gray; font-weight: 800;">Click Overlay</div>
<svg id="click-overlay" style="position: absolute; left: 0px; top: 0px; pointer-events: none;"></svg>
</div>
<div style="display: flex; flex-direction: column;">
Options:
<select id="type" style="width: 300px;">
<option>margin</option>
<option selected>border</option>
<option>padding</option>
<option>content</option>
<option>text</option>
<option>none</option>
</select>
<div>
The Overlays in the SVG are calculated via getBoxQuads and then drawn into an overlay layer<br><br>
See the SVG Element and MathML Elemnts have a wrong overlay. They only works correctly in Firefox, when you
enable the
native getBoxQuads API. It's cause we display in a grid, so I don't know the offset in the control, and it
could not be calculated via getBoundingClientRect cause of the rotation.<br><br>
This could be fixed if the browsers support offsetLeft & top for all elements, or natively support
getBoxQuads.<br><br>
In the "Click Overlay" you see the clicked element in transformed coordinates.
</div>
</div>
<div id="root"
style="position: relative; left: 50px; top: 100px; background-color: #b0c4de40; width: 100%; height: 200%;">
<div id="container" style="position: absolute; left: 0px; top: 0px; opacity: 0.4;">
ABC
<button
style="position: absolute; width: 41px; height: 37px; left: 50px; top: 5px; transform: perspective(50px) rotateX(45deg) ;">Test
2</button>
<button>Test</button>
<button
style="position: absolute; left: 50px; top: 50px; transform: perspective(200px) rotateX(45deg) ;">Test
3</button>
<div id="example-element" class="transition-all layer" style="transform-style: flat; background: #623e3f;
border-radius: .75rem;
color: #fff;
transform: perspective(200px) rotateY(30deg);
position: relative;
perspective: 50px;
top: 400px;
left: 50px;
">
<p>Parent</p>
<div style="background-color: #ffba08;
border-radius: .2rem;
color: #000;
margin: 1rem;
padding: .2rem;
transform: rotate3d(1, 1, 1, 45deg);"><code>rotate3d(1, 1, 1, 45deg)</code></div>
</div>
<wc-test style="position: absolute; left: 150px;"></wc-test>
<button style="position: absolute; left: 350px; top: 60px; rotate: 45deg;">Test Rotated</button>
<button
style="position: absolute; left: 350px; top: 360px; rotate: 70deg; width: 200px; height: 100px; padding: 40px; margin: 20px;">Test
Rotated</button>
<button style="position: absolute; left: 50px; top: 140px; width: 200px; height: 100px; padding: 20px;">Test
Padding</button>
<button
style="position: absolute; left: 50px; top: 260px; width: 200px; height: 100px; padding: 20px; border: 15px green solid;">Test
Padding 6 Border</button>
<div
style="position: absolute; left: 500px; top: 40px; width: 200px; height: 100px; background-color: lightgreen; rotate: -30deg;">
<div
style="position: absolute; left: 20px; top: 180px; width: 160px; height: 80px; background-color: lightpink; rotate: -30deg; transform: skewX(30deg) skewY(10deg) scaleY(1.4);">
<button style="position: absolute; left: 120px; top: 140px; padding: 10px; margin: 10px;">Inside of
2 Transformed divs</button>
</div>
</div>
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg"
style="position: absolute; left: 50px; top: 540px;">
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg"
style="position: absolute; left: 50px; top: 940px; rotate: 45deg;">
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
</svg>
<div
style="position: absolute; left: 450px; top: 750px; width: 400px; height: 50px; rotate: 45deg; background:lightgray; display: grid; grid-template-columns: 1fr 1fr;">
<button>MathML</button>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mrow>
<mn>1</mn>
<mo>+</mo>
<mfrac>
<mn>2</mn>
<mn>3</mn>
</mfrac>
</mrow>
<mn>4</mn>
</mfrac>
<mo>)</mo>
</mrow>
<mn>5</mn>
</msup>
</math>
</div>
<div
style="position: absolute; left: 50px; top: 1240px; width: 400px; height: 100px; rotate: 45deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
<button>Btn</button>
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
</svg>
</div>
<div
style="position: absolute; left: 50px; top: 1640px; width: 400px; height: 100px; rotate: 75deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
<div
style="position: relative; left: 50px; top: 100px; width: 400px; height: 100px; rotate: 45deg; background:yellow; display: grid; grid-template-columns: 1fr 1fr;">
<button>AaAAAAA</button>
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="30" y="10" rx="20" ry="20" fill="blue" />
</svg>
</div>
</div>
</div>
<svg id="overlay" style="position: absolute; left: 0px; top: 0px; pointer-events: none;"></svg>
</div>
</body>
<script type="module">
import { addPolyfill } from './getBoxQuads.js';
addPolyfill();
//A webcomponent for test of shadowdom support
let wcContent = null;
customElements.define(
"wc-test",
class WcTest extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
const template = (
document.getElementById("wc-test-template")
);
wcContent = template.content.cloneNode(true).children[0];
shadowRoot.appendChild(wcContent);
}
}
);
// End of webcomponent
const overlay = document.getElementById('overlay');
const root = document.getElementById('root');
/** @type {HTMLSelectElement } */
const type = document.getElementById('type');
type.onchange = () => {
draw();
}
root.onclick = (e) => {
const ctl = e.composedPath()[0];
if (ctl == overlay)
return;
const bcr = root.getBoundingClientRect();
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
const p = ctl.convertPointFromNode(new DOMPoint(e.x - bcr.left, e.y - bcr.top), root, { fromBox: 'border', toBox: type.value });
if (window.webkitConvertPointFromNodeToPage) {
let wp = new WebKitPoint(e.x, e.y);
let p2 = webkitConvertPointFromNodeToPage(root, wp);
let p3 = webkitConvertPointFromPageToNode(ctl, p2);
console.log("conv point", wp, p, p3);
}
rect.setAttribute("x", p.x - 5);
rect.setAttribute("y", p.y - 5);
rect.setAttribute("width", 10);
rect.setAttribute("height", 10);
const cov = document.getElementById('click-overlay');
cov.appendChild(rect);
setTimeout(() => {
rect.remove()
}, 500);
}
function draw() {
overlay.innerHTML = "";
if (type.value === 'none')
return;
const ct = document.getElementById('container');
if (type.value === 'text') {
const iter = document.createNodeIterator(ct, NodeFilter.SHOW_TEXT);
let e;
while (e = iter.nextNode()) {
const pp = e.getBoxQuads({ box: 'border', relativeTo: root });
for (let p of pp) {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
const d = "M" + [p.p1, p.p2, p.p3, p.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
path.setAttribute("d", d);
overlay.appendChild(path);
}
}
} else {
const all = Array.from(ct.querySelectorAll('*'));
all.push(wcContent.children[0]);
all.push(ct.firstChild);
for (let e of all) {
const p = e.getBoxQuads({ box: type.value, relativeTo: root })[0];
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
const d = "M" + [p.p1, p.p2, p.p3, p.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
path.setAttribute("d", d);
overlay.appendChild(path);
}
}
}
draw();
</script>
</html>