diff --git a/addons/addon-progress/README.md b/addons/addon-progress/README.md index 4f05e4aa..43134ae8 100644 --- a/addons/addon-progress/README.md +++ b/addons/addon-progress/README.md @@ -20,7 +20,7 @@ import { ProgressAddon } from '@xterm/addon-progress'; const terminal = new Terminal(); const progressAddon = new ProgressAddon(); terminal.loadAddon(progressAddon); -progressAddon.register((state: number, value: number) => { +progressAddon.onChange({state, value}: IProgress) => { // state: 0-4 integer (see below for meaning) // value: 0-100 integer (percent value) @@ -69,11 +69,10 @@ The addon resolves most of those semantic nuances and will provide these ready-t ### API The addon exposes the following API endpoints: -- `public register(handler: ProgressHandler): IDisposable;` \ - Registers your actual progress handler, where you gonna do the visual progress visualisation. - The handler will get called upon valid progress sequences with 2 arguments as `(state, value) => {}`. - Returns a disposable to unregister the handler later on by calling its `dispose()` method. -- `public progress: IProgress;` +- `public readonly onChange: IEvent` \ + Event to register your actual progress handler, where you gonna do the progress visualisation. + The handler will get called upon valid progress sequences with a progress argument as `({state, value}) => {}`. +- `public progress: IProgress` A getter/setter for the current progress information. Can be used to read the last seen progress information. This can also be used to clean up stuck progress indicators by setting the value back to initial, e.g.: ```typescript diff --git a/demo/client.ts b/demo/client.ts index 0df2d574..6f448658 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -1454,13 +1454,12 @@ function progressButtons(): void { const STATES = { 0: 'remove', 1: 'set', 2: 'error', 3: 'indeterminate', 4: 'pause' }; const COLORS = { 0: '', 1: 'green', 2: 'red', 3: '', 4: 'yellow' }; - function progressHandler(progress: IProgress) { - let {state, value} = progress; + function progressHandler({state, value}: IProgress) { // Simulate windows taskbar hack by windows terminal: // Since the taskbar has no means to indicate error/pause state other than by coloring // the current progress, we move 0 to 10% and distribute higher values in the remaining 90 % - // NOTE: This most likely not what you want to do for other progress indicators, - // that have a proper visual state for error/paused + // NOTE: This is most likely not what you want to do for other progress indicators, + // that have a proper visual state for error/paused. value = Math.min(10 + value * 0.9, 100); document.getElementById('progress-percent').style.width = `${value}%`; document.getElementById('progress-percent').style.backgroundColor = COLORS[state];