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

add pinch zoom

This commit is contained in:
“chrisshank” 2024-12-24 10:34:10 -08:00
parent b3b348bc6b
commit 4597f7b60a
1 changed files with 40 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
website/canvas/fluid-semantic-zoom-in-a-canvas.html
View File

@ -16,6 +16,11 @@
margin: 0; margin: 0;
} }
pinch-zoom {
position: absolute;
inset: 0;
}
label { label {
display: flex; display: flex;
align-items: center; align-items: center;
@ -36,112 +41,55 @@
} }
p { p {
font-size: clamp(0rem, calc(1.5rem * (var(--folk-zoom) - 0.5)), 1rem); font-size: clamp(0rem, calc(1.5rem * (var(--scale) - 0.5)), 1rem);
opacity: clamp(0, calc(var(--folk-zoom) + 0.25), 1); opacity: clamp(0, calc(var(--scale) + 0.25), 1);
max-width: 35ch; max-width: 35ch;
} }
} }
@container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) or style(--folk-discrete-zoom: 0.5) {
p {
display: none;
}
h2 {
font-size: calc(3em * (var(--folk-zoom)));
opacity: clamp(0, calc(var(--folk-zoom) + 0.5), 1);
}
}
@container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) {
folk-shape {
border-radius: clamp(5px, calc((0.25 - var(--folk-zoom)) * 200%), 50%);
}
}
@container style(--folk-discrete-zoom: 0) {
folk-shape {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
}
h2 {
display: none;
}
}
</style> </style>
</head> </head>
<body> <body>
<label> <pinch-zoom>
Zoom: <folk-graph>
<input type="range" min="0" max="1" value="1" step="0.01" /> <folk-shape id="box1" x="100" y="100">
</label> <h2>Lorem ispum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</folk-shape>
<folk-graph> <folk-shape id="box2" x="500" y="400">
<folk-shape id="box1" x="100" y="100"> <h2>Dolor sit amet</h2>
<h2>Lorem ispum</h2> <p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ea commodo consequat.
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id </folk-shape>
est laborum.
</p>
</folk-shape>
<folk-shape id="box2" x="500" y="400"> <folk-shape id="box3" x="150" y="600">
<h2>Dolor sit amet</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
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo dolore magna aliqua.
consequat. </p>
</p> </folk-shape>
</folk-shape>
<folk-shape id="box3" x="150" y="600"> <folk-arrow source="#box1" target="#box2"></folk-arrow>
<h2>Consectetur elit</h2> <folk-arrow source="#box2" target="#box3"></folk-arrow>
<p> <folk-arrow source="#box1" target="#box3"></folk-arrow>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </folk-graph>
magna aliqua. </pinch-zoom>
</p>
</folk-shape>
<folk-arrow source="#box1" target="#box2"></folk-arrow>
<folk-arrow source="#box2" target="#box3"></folk-arrow>
<folk-arrow source="#box1" target="#box3"></folk-arrow>
</folk-graph>
<script type="module"> <script type="module">
import 'https://esm.sh/pinch-zoom-element@1.1.1';
import '@labs/standalone/folk-shape.ts'; import '@labs/standalone/folk-shape.ts';
import '@labs/standalone/folk-arrow.ts'; import '@labs/standalone/folk-arrow.ts';
import '@labs/standalone/folk-graph.ts'; import '@labs/standalone/folk-graph.ts';
const range = document.querySelector('input');
function onZoom() {
const currentZoom = range.valueAsNumber;
let semanticZoom;
if (currentZoom === 0) {
semanticZoom = 0;
} else if (currentZoom < 0.25) {
semanticZoom = 0.25;
} else if (currentZoom < 0.5) {
semanticZoom = 0.5;
} else if (currentZoom < 0.75) {
semanticZoom = 0.75;
} else {
semanticZoom = 1;
}
document.body.style.setProperty('--folk-zoom', range.value);
document.body.style.setProperty('--folk-discrete-zoom', semanticZoom);
}
range.addEventListener('input', onZoom);
onZoom();
</script> </script>
</body> </body>
</html> </html>