Events

Example

timechanged		zoomchanged
timechanging		zoomchanging
timeanimating		zoomanimating
selectionchanging		selectionchanged

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>
    <tr>
      <th>selectionchanging</th><td><span id="selectionchanging" /></td>
      <th>selectionchanged</th><td><span id="selectionchanged" /></td>
    </tr>
  </tbody>
</table>

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

function setValueOn(id: string, value: string | number | Decimal | null | [Decimal, Decimal]) {
  const elm = document.getElementById(id);
  if (elm) elm.innerText = value?.toString()?.replace(',', '\n') ?? '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));
timescope.on('selectionchanging', (e) => setValueOn('selectionchanging', e.value));
timescope.on('selectionchanged', (e) => setValueOn('selectionchanged', e.value));

setValueOn('timechanged', 'null');
setValueOn('timechanging', 'null');
setValueOn('timeanimating', 'null');
setValueOn('zoomchanged', '0');
setValueOn('zoomchanging', '0');
setValueOn('zoomanimating', '0');
setValueOn('selectionchanging', 'null');
setValueOn('selectionchanged', 'null');