Skip to content

Commit

Permalink
fix optimization of typing animation #867 #820
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcubic
jcubic committed Dec 30, 2023
1 parent f57d0d2 commit c2f257c
Show file tree
Hide file tree
Showing 17 changed files with 258 additions and 127 deletions.
5 changes: 4 additions & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,10 @@ emoji:
./scripts/mkemoji $(VERSION) > css/emoji.css

test:
$(JEST) --coverage --env=jsdom --testMatch '**/__tests__/*.spec.js'
$(JEST) --coverage

test-watch:
$(JEST) --coverage --watch

assets/ascii_art.svg: templates/ascii_art.svg .$(VERSION)
$(SED) -e "s/{{VER}}/$(VERSION)/g" templates/ascii_art.svg > assets/ascii_art.svg
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[![npm](https://img.shields.io/badge/npm-DEV-blue.svg)](https://www.npmjs.com/package/jquery.terminal)
![bower](https://img.shields.io/badge/bower-DEV-yellow.svg)
[![Build and test](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml/badge.svg?branch=devel&event=push)](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=devel&1e503cbcdc04527035c1339cc8696c05)](https://coveralls.io/github/jcubic/jquery.terminal?branch=devel)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=devel&e637f705f0dc86afeff501b675fef37c)](https://coveralls.io/github/jcubic/jquery.terminal?branch=devel)
![NPM Downloads](https://img.shields.io/npm/dm/jquery.terminal.svg?style=flat)
[![jsDelivr Downloads](https://data.jsdelivr.com/v1/package/npm/jquery.terminal/badge?style=rounded&n=1)](https://www.jsdelivr.com/package/npm/jquery.terminal)
[![Paid Support](https://img.shields.io/badge/paid-support-354465.svg)](https://support.jcubic.pl/)
Expand Down
15 changes: 7 additions & 8 deletions __tests__/terminal.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1417,15 +1417,15 @@ describe('Terminal utils', function() {
}
it('should handle emoji', function() {
var input = [
"\u263a\ufe0f xxxx \u261d\ufe0f xxxx \u0038\ufe0f\u20e3 xxx\u0038\ufe0f\u20e3",
"\u263a\ufe0f xxxx \u261d\ufe0f x \u0038\ufe0f\u20e3 xxx\u0038\ufe0f\u20e3"
"\u263a\ufe0f_xxxx_\u261d\ufe0f_xxxx_\u0038\ufe0f\u20e3_xxx\u0038\ufe0f\u20e3",
"\u263a\ufe0f_xxxx_\u261d\ufe0f_x_\u0038\ufe0f\u20e3_xxx\u0038\ufe0f\u20e3"
];
input.forEach(test_codepoints);
});
it('should handle combine characters', function() {
var input = [
's\u030A\u032A xxxx s\u030A\u032A xxxx s\u030A\u032A xxxx',
's\u030A\u032A xxxx s\u030A\u032A xxxx s\u030A\u032A xxxs\u030A\u032A'
's\u030A\u032A_xxxx_s\u030A\u032A_xxxx_s\u030A\u032A_xxxx',
's\u030A\u032A_xxxx_s\u030A\u032A_xxxx_s\u030A\u032A_xxxs\u030A\u032A'
];
input.forEach(test_codepoints);
});
Expand Down Expand Up @@ -7320,11 +7320,10 @@ describe('Terminal plugin', function() {
$.terminal.defaults.allowedAttributes.pop();
});
it('should remove last line', function() {
var index = term.last_index();
term.echo('foo bar');
term.echo('quux');
expect(term.last_index()).toEqual(index + 1);
term.update(index + 1, null);
expect(term.last_index()).toEqual(index);
term.update(-1, null);
expect(term.get_output()).toEqual('foo bar');
});
it('should call finalize', function() {
var options = {
Expand Down
2 changes: 1 addition & 1 deletion css/emoji.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/jquery.terminal-2.37.2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
* Released under the MIT license
*
* Date: Sun, 17 Dec 2023 13:42:45 +0000
* Date: Sat, 30 Dec 2023 19:12:31 +0000
*/
.terminal .terminal-output .format, .cmd .format,
.cmd-prompt, .cmd-prompt div {
Expand Down
2 changes: 1 addition & 1 deletion css/jquery.terminal-2.37.2.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/jquery.terminal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* Copyright (c) 2011-2023 Jakub T. Jankiewicz <https://jcubic.pl/me>
* Released under the MIT license
*
* Date: Sun, 17 Dec 2023 13:42:45 +0000
* Date: Sat, 30 Dec 2023 19:12:31 +0000
*/
.terminal .terminal-output .format, .cmd .format,
.cmd-prompt, .cmd-prompt div {
Expand Down
2 changes: 1 addition & 1 deletion css/jquery.terminal.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/jquery.terminal.min.css.map
View file

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = {
testEnvironment: 'jsdom',
verbose: true,
modulePathIgnorePatterns: [
"\\/\\.#"
],
testPathIgnorePatterns: [
"\\/\\.#"
],
testMatch: [
'**/__tests__/*.spec.js'
]
};
113 changes: 77 additions & 36 deletions js/jquery.terminal-2.37.2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
*
* broken image by Sophia Bai from the Noun Project (CC-BY)
*
* Date: Sat, 30 Dec 2023 15:05:01 +0000
* Date: Sat, 30 Dec 2023 19:12:31 +0000
*/
/* global define, Map, BigInt */
/* eslint-disable */
Expand Down Expand Up @@ -1727,6 +1727,9 @@
// -------------------------------------------------------------------------
OutputLines.prototype.get_snapshot = function() {
return this._snapshot.reduce(function(acc, arr) {
if (!arr) {
return acc;
}
return acc.concat(arr);
}, []).join('\n');
};
Expand Down Expand Up @@ -1788,7 +1791,7 @@
};
// -------------------------------------------------------------------------
OutputLines.prototype.data = function() {
return this._lines;
return this._lines.filter(Boolean);
};
// -------------------------------------------------------------------------
OutputLines.prototype.has_newline = function() {
Expand All @@ -1814,13 +1817,15 @@
};
// -------------------------------------------------------------------------
OutputLines.prototype.last_line = function() {
var len = this._lines.length;
return this._lines[len - 1];
var lines = this.data();
var len = lines.length;
return lines[len - 1];
};
// -------------------------------------------------------------------------
OutputLines.prototype.update = function(index, value, options) {
if (value === null) {
this._lines.splice(index, 1);
delete this._lines[index];
delete this._snapshot[index];
} else {
this._lines[index][0] = value;
if (options) {
Expand Down Expand Up @@ -5278,7 +5283,7 @@
// -------------------------------------------------------------------------
$.terminal = {
version: 'DEV',
date: 'Sat, 30 Dec 2023 15:05:01 +0000',
date: 'Sat, 30 Dec 2023 19:12:31 +0000',
// colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
color_names: [
'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
Expand Down Expand Up @@ -5864,9 +5869,9 @@
}
if (settings.trim || settings.keepWords) {
output = output.replace(/(&nbsp;|\s)+$/g, '');
if (!leading_spaces) {
output = output.replace(/^(&nbsp;|\s)+/g, '');
}
}
if (!leading_spaces && !prev_format) {
output = output.replace(/^(&nbsp;|\s)+/g, '');
}
first_index = (new_index || data.index) + 1;
if (prev_format) {
Expand Down Expand Up @@ -9141,7 +9146,7 @@
// ---------------------------------------------------------------------
// :: Typing animation generator
// ---------------------------------------------------------------------
function typed(finish_typing_fn) {
function typed(finish_typing_fn, optimized) {
return function typing_animation(message, options) {
var formatted = $.terminal.apply_formatters(message, {
animation: true
Expand All @@ -9151,9 +9156,11 @@
if (options && typeof options.keepWords !== 'undefined') {
keepWords = options.keepWords;
}
var formatted_lines = $.terminal.split_equal(formatted, self.cols(), {
keepWords: keepWords
});
if (optimized) {
var formatted_lines = $.terminal.split_equal(formatted, self.cols(), {
keepWords: keepWords
});
}
animating = true;
var prompt = self.get_prompt();
var char_i = 0;
Expand All @@ -9167,19 +9174,32 @@
}
var bottom = self.is_bottom();
var line = 0;
var lines = formatted_lines.map(function(formatted) {
return {
formatted: formatted,
chars: $.terminal.partition(formatted, {wrap: false}),
len: $.terminal.length(formatted)
};
});
if (optimized) {
var lines = formatted_lines.map(function(formatted) {
return {
formatted: formatted,
chars: $.terminal.partition(formatted, {wrap: false}),
len: $.terminal.length(formatted)
};
});
} else {
var chars = $.terminal.partition(formatted, {wrap: false});
var len = $.terminal.length(formatted);
}
var stop;
var interval = setInterval(function() {
var formatted_line, input_chars, input_len;
if (!skip) {
var formatted_line = lines[line].formatted;
var chars = lines[line].chars;
var len = lines[line].len;
var chr = chars[char_i];
if (optimized) {
formatted_line = lines[line].formatted;
input_chars = lines[line].chars;
input_len = lines[line].len;
} else {
formatted_line = formatted;
input_chars = chars;
input_len = len;
}
var chr = input_chars[char_i];
if (options.mask) {
var mask = command_line.mask();
if (typeof mask === 'string') {
Expand All @@ -9194,23 +9214,45 @@
self.scroll_to_bottom();
}
char_i++;
if (char_i === len) {
++line;
if (char_i === input_len && optimized) {
// swap prompt with line
var index = self.last_index();
self.set_prompt(prompt);
self.echo(formatted_line, $.extend({}, options, {
formatters: false,
finalize: null,
typing: false
}));
lines[line].index = index + 1;
new_prompt = '';
++line;
char_i = 0;
// swap prompt with line
finish_typing_fn(formatted_line, prompt, options);
}
} else {
self.skip_stop();
var chr_rest = $.terminal.substring(formatted, char_i, len);
new_prompt += chr_rest;
command_line.prompt(new_prompt, {formatters: false});
line = lines.length;
stop = true;
}
if (line === lines.length) {
if (optimized) {
stop = line === lines.length;
} else {
stop = char_i === len;
}
if (stop) {
clearInterval(interval);
animating = false;
setTimeout(function() {
if (optimized) {
// clear old lines and make one full line
// so it can wrap when you resize
lines.forEach(function(line) {
self.remove_line(line.index);
});
}
finish_typing_fn(message, prompt, options);
animating = false;
}, options.delay);
}
}, options.delay);
}
Expand All @@ -9220,7 +9262,7 @@
var typed_prompt = typed(function(message, _, options) {
self.set_prompt(message);
options.finalize();
});
}, true);
// ---------------------------------------------------------------------
var typed_insert = (function() {
var helper = typed(function(message, prompt, options) {
Expand All @@ -9238,7 +9280,7 @@
var typed_message = typed(function(message, prompt, options) {
self.set_prompt(prompt);
self.echo(message, $.extend({}, options, {typing: false}));
});
}, true);
// ---------------------------------------------------------------------
var typed_enter = (function() {
var helper = typed(function(message, prompt, options) {
Expand Down Expand Up @@ -10498,8 +10540,7 @@
// this is finalize function from echo
if (options.update) {
lines.update_snapshot(data.index, snapshot);
var selector = '> div[data-index=' + data.index + ']';
var node = output.find(selector);
var node = get_node(data.index);
if (node.html() !== wrapper.html()) {
node.replaceWith(wrapper);
}
Expand Down Expand Up @@ -10638,7 +10679,7 @@
self.error('Invalid line number ' + line);
} else if (value === null) {
lines.update(line, null);
output.find('[data-index=' + line + ']').remove();
get_node(line).remove();
} else {
value = preprocess_value(value, {
update: true,
Expand Down
4 changes: 2 additions & 2 deletions js/jquery.terminal-2.37.2.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit c2f257c

Please sign in to comment.