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

92
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,74 +41,41 @@
} }
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:
<input type="range" min="0" max="1" value="1" step="0.01" />
</label>
<folk-graph> <folk-graph>
<folk-shape id="box1" x="100" y="100"> <folk-shape 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
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
est laborum. anim id est laborum.
</p> </p>
</folk-shape> </folk-shape>
<folk-shape id="box2" x="500" y="400"> <folk-shape id="box2" x="500" 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
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
consequat. ea commodo consequat.
</p> </p>
</folk-shape> </folk-shape>
<folk-shape id="box3" x="150" y="600"> <folk-shape id="box3" x="150" y="600">
<h2>Consectetur 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
magna aliqua. dolore magna aliqua.
</p> </p>
</folk-shape> </folk-shape>
@ -111,37 +83,13 @@
<folk-arrow source="#box2" target="#box3"></folk-arrow> <folk-arrow source="#box2" target="#box3"></folk-arrow>
<folk-arrow source="#box1" target="#box3"></folk-arrow> <folk-arrow source="#box1" target="#box3"></folk-arrow>
</folk-graph> </folk-graph>
</pinch-zoom>
<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>