Set viewport example

Jan 1, 1970 00:00

00:00:10

00:00:20

00:00:30

00:00:40

00:00:50

Code

<script setup lang="ts">
  import { ,  } from 'vue';

  const  = (null);

  const  = [
    { : '1', : 'range', : { '--item-background': 'var(--color-2)' }, : 100000, : 450000 },
    { : '2', : 'range', : { '--item-background': 'var(--color-4)' }, : 450000, : 600000 },
    { : '3', : 'range', : 600000, : 800000 },
  ];

  const  = ({ : 400000, : 700000 });
  const  = ({ : 400000, : 700000 });
  const  = ({ : 0, : 800000 });

  const  = (() => .. - ..);

</script>

<template>
  <
    =""
    =""
    ="[{: '1'}, {: '2'}, {: '3'}]"
    ="."
    ="."
    ="."
    ="."
    @=" = "
  />

  < ="controls">
    < @=". > . && .setViewport(. -  * 0.2, . -  * 0.2)">
      Move left
    </>
    < @=". < . && .setViewport(. +  * 0.2, . +  * 0.2)">
      Move right
    </>
    < @=".setViewport(. -  * 0.2, . +  * 0.2)">
      Zoom out
    </>
    < @=".setViewport(. +  * 0.2, . -  * 0.2)">
      Zoom in
    </>
    < @=".setViewport(., .)">
      Reset viewport
    </>
    < @=".setViewport(., .)">
      Set viewport to max range
    </>
  </>
</template>

<style lang="scss" scoped>
  .controls {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }

  button {
    border: 1px solid color-mix(in srgb, currentcolor, transparent 80%);
    border-radius: 4px;
    cursor: pointer;
    padding: 0.1rem 0.4rem;

    &:hover {
      background-color: color-mix(in srgb, currentcolor, transparent 95%);
    }
  }
</style>