jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix semantic zoom animation

This commit is contained in:
“chrisshank” 2024-11-17 17:13:45 -08:00
parent d8715825dc
commit a6552d8927
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/index.html
View File

@ -33,6 +33,7 @@
<li><a href="spreadsheet-graph.html">Spreadsheet Graph</a></li>
<li><a href="spreadsheet-propagator.html">Spreadsheet Propagator</a></li>
<li><a href="wiggly.html">Wiggly</a></li>
<li><a href="semantic-zoom.html">Semantic Zoom</a></li>
<!-- <li><a href="chains-of-thought/index.html">Chains of thought</a></li> -->
</ul>
</body>

24
demo/semantic-zoom.html
View File

@ -63,8 +63,16 @@
height: 100%;
}
input {
margin-top: 1rem;
::view-transition-group(slider),
::view-transition-old(slider),
::view-transition-new(slider) {
animation-duration: 0s !important;
}
label {
display: flex;
align-items: center;
margin: 1rem;
}
fc-connection {
@ -95,13 +103,9 @@
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
h2,
p {
display: none;
}
}
body[zoom='0'] fc-geometry :is(h2, p),
body[zoom='50'] fc-geometry p {
display: none;
}
@ -110,7 +114,7 @@
<body zoom="1">
<label>
Zoom:
<input type="range" min="0" max="100" value="100" />
<input type="range" min="0" max="100" value="100" style="view-transition-name: slider" />
</label>
<fc-geometry id="box1" x="100" y="100">
@ -152,13 +156,13 @@
FolkGeometry.register();
FolkConnection.register();
const range = document.querySelector('input');
document.body.querySelectorAll('fc-geometry').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
document.body.querySelectorAll('fc-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`));
document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`));
const range = document.querySelector('input');
range.addEventListener('input', (e) => {
const currentZoom = range.valueAsNumber;
let semanticZoom;