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

update semantic zoom

This commit is contained in:
“chrisshank” 2024-11-04 18:30:37 -08:00
parent 30498b3c42
commit 5fb915387a
1 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
demo/semantic-zoom.html
View File

@ -9,29 +9,33 @@
height: 100%; height: 100%;
--spring-easing: linear( --spring-easing: linear(
0, 0,
0.01, 0.009,
0.04 1.5%, 0.035 2.1%,
0.163 3.2%, 0.141,
0.824 9.2%, 0.281 6.7%,
1.055, 0.723 12.9%,
1.199 14.2%, 0.938 16.7%,
1.24, 1.017,
1.263, 1.077,
1.265 18.2%, 1.121,
1.243 19.9%, 1.149 24.3%,
0.996 28.8%, 1.159,
0.951, 1.163,
0.93 34.1%, 1.161,
0.929 35.7%, 1.154 29.9%,
0.935 37.5%, 1.129 32.8%,
1 46.3%, 1.051 39.6%,
1.018 51.4%, 1.017 43.1%,
1.017 55.1%, 0.991,
0.995 68.6%, 0.977 51%,
1.001 85.5%, 0.974 53.8%,
0.975 57.1%,
0.997 69.8%,
1.003 76.9%,
1.004 83.8%,
1 1
); );
--spring-duration: 1s; --spring-duration: 0.4s;
} }
body { body {
@ -41,9 +45,15 @@
margin: 0; margin: 0;
} }
::view-transition-group(*), ::view-transition-group(g0),
::view-transition-old(*), ::view-transition-group(g1),
::view-transition-new(*) { ::view-transition-group(g2),
::view-transition-old(g0),
::view-transition-old(g1),
::view-transition-old(g2),
::view-transition-new(g0),
::view-transition-new(g1),
::view-transition-new(g2) {
animation-timing-function: var(--spring-easing); animation-timing-function: var(--spring-easing);
animation-duration: var(--spring-duration); animation-duration: var(--spring-duration);
} }
@ -57,6 +67,12 @@
margin-top: 1rem; margin-top: 1rem;
} }
fc-connection {
display: block;
position: absolute;
inset: 0 0 0 0;
}
fc-geometry { fc-geometry {
background: black; background: black;
color: white; color: white;
@ -66,6 +82,8 @@
h2 { h2 {
margin: 0; margin: 0;
/* set the aspect ratio to be the same, needed for view transition */
width: fit-content;
} }
p { p {
@ -73,10 +91,6 @@
} }
} }
body[zoom='0.5'] fc-geometry p {
display: none;
}
body[zoom='0'] fc-geometry { body[zoom='0'] fc-geometry {
width: 20px; width: 20px;
aspect-ratio: 1; aspect-ratio: 1;
@ -87,14 +101,19 @@
display: none; display: none;
} }
} }
body[zoom='50'] fc-geometry p {
display: none;
}
</style> </style>
</head> </head>
<body zoom="1"> <body zoom="1">
<label> <label>
Zoom: Zoom:
<input type="range" min="0" max="2" value="1" step="0.1" /> <input type="range" min="0" max="100" value="100" />
</label> </label>
<fc-geometry x="100" y="100">
<fc-geometry id="box1" x="100" y="100">
<h2>Lorem ispum</h2> <h2>Lorem ispum</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
@ -105,7 +124,7 @@
</p> </p>
</fc-geometry> </fc-geometry>
<fc-geometry x="400" y="400"> <fc-geometry id="box2" x="400" y="400">
<h2>Dolor sit amet</h2> <h2>Dolor sit amet</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
@ -114,36 +133,42 @@
</p> </p>
</fc-geometry> </fc-geometry>
<fc-geometry x="150" y="600"> <fc-geometry id="box3" x="150" y="600">
<h2>Consectetur adipiscing elit</h2> <h2>Consectetur elit</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. magna aliqua.
</p> </p>
</fc-geometry> </fc-geometry>
<fc-connection source="#box1" target="#box2"></fc-connection>
<fc-connection source="#box2" target="#box3"></fc-connection>
<fc-connection source="#box1" target="#box3"></fc-connection>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts';
FolkGeometry.register(); FolkGeometry.register();
FolkConnection.register();
const range = document.querySelector('input'); const range = document.querySelector('input');
const geos = document.querySelectorAll('fc-geometry');
geos.forEach((el, i) => (el.style.viewTransitionName = `b${i}`)); 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}`));
range.addEventListener('input', (e) => { range.addEventListener('input', (e) => {
const currentZoom = range.valueAsNumber; const currentZoom = range.valueAsNumber;
let semanticZoom; let semanticZoom;
if (currentZoom < 0.5) { if (currentZoom < 20) {
semanticZoom = 0; semanticZoom = 0;
} else if (currentZoom < 1) { } else if (currentZoom < 80) {
semanticZoom = 0.5; semanticZoom = 50;
} else if (currentZoom > 2) {
semanticZoom = 1;
} else { } else {
semanticZoom = 2; semanticZoom = 1;
} }
if (semanticZoom !== Number(document.body.getAttribute('zoom'))) { if (semanticZoom !== Number(document.body.getAttribute('zoom'))) {