Events

Example

timechanged		zoomchanged
timechanging		zoomchanging
timeanimating		zoomanimating

Code

<div id="example-intermediate-values" :class="props.class"></div>
<table>
  <tbody>
    <tr>
      <th>timechanged</th><td><span id="timechanged" /></td>
      <th>zoomchanged</th><td><span id="zoomchanged" /></td>
    </tr>
    <tr>
      <th>timechanging</th><td><span id="timechanging" /></td>
      <th>zoomchanging</th><td><span id="zoomchanging" /></td>
    </tr>
    <tr>
      <th>timeanimating</th><td><span id="timeanimating" /></td>
      <th>zoomanimating</th><td><span id="zoomanimating" /></td>
    </tr>

  </tbody>
</table>

import { Timescope, type Decimal } from 'timescope';

function setValueOn(id: string, value: string | number | Decimal | null) {
  const elm = document.getElementById(id);
  if (elm) elm.innerText = value?.toString() ?? 'null';
}

const timescope = new Timescope({
  target: '#example-intermediate-values',
});

timescope.on('timechanged', (e) => setValueOn('timechanged', e.value));
timescope.on('timechanging', (e) => setValueOn('timechanging', e.value));
timescope.on('timeanimating', (e) => setValueOn('timeanimating', e.value));
timescope.on('zoomchanged', (e) => setValueOn('zoomchanged', e.value));
timescope.on('zoomchanging', (e) => setValueOn('zoomchanging', e.value));
timescope.on('zoomanimating', (e) => setValueOn('zoomanimating', e.value));