0.0.21 • Published 4 months ago
svelte-zooming-ui v0.0.21
svelte-zooming-ui
WARNING :: Work In Progress :: use at your own risk, breaking changes will occur
Specification: A zooming user interface that just works. Like you imagined it would. With regular vanilla components.
Example Usage
Here's a simple example of how to create a 2D zoomable scene using the ZUI
, Positionable
, and Clickable
components:
<script>
import ZUI from '$lib/ZoomingUIComponent.svelte';
import Positionable from '$lib/Positionable.svelte';
import Clickable from '$lib/Clickable.svelte';
import Decimal from 'decimal.js';
let lookAt;
function handleZuiNotification(event) {
console.log("ZUI notification: " + event.detail);
}
</script>
<ZUI on:zui-notification={handleZuiNotification} debug={true} bind:lookAt={lookAt}>
<Positionable x={Decimal(0)} y={Decimal(0)} width={Decimal(50)} height={Decimal(50)} depth={Decimal(1)} debug={false}>
<Clickable bgcolor="yellow">Positionable Element</Clickable>
</Positionable>
<Positionable x={Decimal(60)} y={Decimal(60)} width={Decimal(50)} height={Decimal(50)} depth={Decimal(1)} debug={false}>
<Clickable bgcolor="blue">Another Positionable Element</Clickable>
</Positionable>
</ZUI>
To-Do List
- create two basic components for the zui.
- Give Each zui component has zooming capability.
- create a lookAt function that takes a point and a zoom level.
- Handle drag events.
- Handle zoom events. ( finger and mouse wheel )
0.0.20
4 months ago
0.0.21
4 months ago
0.0.17
5 months ago
0.0.18
5 months ago
0.0.19
5 months ago
0.0.10
6 months ago
0.0.11
6 months ago
0.0.12
6 months ago
0.0.13
6 months ago
0.0.14
6 months ago
0.0.15
6 months ago
0.0.9
6 months ago
0.0.16
6 months ago
0.0.8
6 months ago
0.0.5
6 months ago
0.0.4
6 months ago
0.0.7
6 months ago
0.0.6
6 months ago
0.0.3
1 year ago
0.0.1
1 year ago