Skip to content

Commit

Permalink
fix(): Adjust flashing rate of editing cursor (#9848)
Browse files Browse the repository at this point in the history
  • Loading branch information
@asturur
asturur committed May 5, 2024
1 parent dc70939 commit a504fd9
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 89 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Expand Up @@ -2,6 +2,8 @@

## [next]

- feat(IText): Adjust cursor blinking for better feedback [#9823](https://github.com/fabricjs/fabric.js/pull/9823)
- feat(FabricObject): pass `e` to `shouldStartDragging` [#9843](https://github.com/fabricjs/fabric.js/pull/9843)
- fix(Canvas): mouse move before event data [#9849](https://github.com/fabricjs/fabric.js/pull/9849)
- chore(FabricObject): pass `e` to `shouldStartDragging` [#9843](https://github.com/fabricjs/fabric.js/pull/9843)
- ci(): Add Jest coverage to the report [#9836](https://github.com/fabricjs/fabric.js/pull/9836)
Expand Down
18 changes: 18 additions & 0 deletions src/shapes/IText/ITextBehavior.test.ts
View file
Expand Up @@ -147,6 +147,24 @@ describe('IText cursor animation snapshot', () => {
expect(currentAnimation).toMatchSnapshot();
iText.abortCursorAnimation();
});
test('Animation is configurable - fast cursor with delay', () => {
const iText = new IText('', { canvas: {} });
iText.cursorDelay = 200;
iText.cursorDuration = 80;
iText.initDelayedCursor();
jest.advanceTimersByTime(1000);
expect(currentAnimation).toMatchSnapshot();
iText.abortCursorAnimation();
});
test('Animation is configurable - fast cursor with no delay', () => {
const iText = new IText('', { canvas: {} });
iText.cursorDelay = 200;
iText.cursorDuration = 80;
iText.initDelayedCursor(true);
jest.advanceTimersByTime(1000);
expect(currentAnimation).toMatchSnapshot();
iText.abortCursorAnimation();
});
});

describe('IText _tick', () => {
Expand Down
17 changes: 11 additions & 6 deletions src/shapes/IText/ITextBehavior.ts
View file
Expand Up @@ -145,21 +145,26 @@ export abstract class ITextBehavior<
});
}

/**
* changes the cursor from visible to invisible
*/
private _tick(delay?: number) {
this._currentTickState = this._animateCursor({
toValue: 1,
duration: this.cursorDuration,
delay,
toValue: 0,
duration: this.cursorDuration / 2,
delay: Math.max(delay || 0, 100),
onComplete: this._onTickComplete,
});
}

/**
* Changes the cursor from invisible to visible
*/
private _onTickComplete() {
this._currentTickCompleteState?.abort();
this._currentTickCompleteState = this._animateCursor({
toValue: 0,
duration: this.cursorDuration / 2,
delay: 100,
toValue: 1,
duration: this.cursorDuration,
onComplete: this._tick,
});
}
Expand Down
252 changes: 169 additions & 83 deletions src/shapes/IText/__snapshots__/ITextBehavior.test.ts.snap
View file
@@ -1,64 +1,113 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`IText cursor animation snapshot exiting from a canvas will abort animation 1`] = `
exports[`IText cursor animation snapshot Animation is configurable - fast cursor with delay 1`] = `
[
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"1.000",
"1.000",
"0.809",
]
`;

exports[`IText cursor animation snapshot initDelayedCursor false - with delay 1`] = `
exports[`IText cursor animation snapshot Animation is configurable - fast cursor with no delay 1`] = `
[
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
"0.691",
"1.000",
"0.000",
"1.000",
"0.809",
"0.309",
"0.000",
"1.000",
"0.000",
"0.049",
"0.191",
"0.412",
]
`;

exports[`IText cursor animation snapshot exiting from a canvas will abort animation 1`] = `
[
"0.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"0.996",
"0.986",
"0.969",
"0.944",
]
`;

exports[`IText cursor animation snapshot initDelayedCursor false - with delay 1`] = `
[
"0.000",
"1.000",
"0.996",
Expand All @@ -78,51 +127,54 @@ exports[`IText cursor animation snapshot initDelayedCursor false - with delay 1`
"0.309",
"0.228",
"0.146",
"0.063",
"0.000",
"1.000",
"0.000",
"0.001",
"0.004",
"0.008",
"0.014",
"0.022",
"0.031",
"0.043",
"0.056",
"0.070",
"0.086",
"0.104",
"0.124",
"0.145",
"0.167",
"0.191",
"0.216",
"0.243",
"0.271",
"0.300",
"0.331",
"0.363",
"0.395",
"0.429",
"0.464",
"0.500",
"0.537",
"0.574",
"0.612",
"0.651",
"0.691",
"0.731",
"0.772",
"0.813",
"0.854",
"0.895",
"0.937",
"0.979",
"1.000",
"0.000",
]
`;

exports[`IText cursor animation snapshot initDelayedCursor true - with NO delay 1`] = `
[
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"0.000",
"1.000",
"0.996",
Expand Down Expand Up @@ -200,23 +252,57 @@ exports[`IText cursor animation snapshot initDelayedCursor true - with NO delay
"0.536",
"0.463",
"0.388",
"0.309",
"0.228",
"0.146",
"0.063",
"0.000",
"1.000",
"0.000",
"0.001",
"0.004",
"0.008",
"0.014",
"0.022",
"0.031",
"0.043",
"0.056",
"0.070",
"0.086",
"0.104",
"0.124",
"0.145",
"0.167",
"0.191",
"0.216",
"0.243",
"0.271",
"0.300",
"0.331",
"0.363",
"0.395",
"0.429",
"0.464",
"0.500",
"0.537",
"0.574",
"0.612",
"0.651",
"0.691",
"0.731",
"0.772",
"0.813",
]
`;

exports[`IText cursor animation snapshot selectionStart/selection end will abort animation 1`] = `
[
"0.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"1.000",
"0.996",
"0.986",
"0.969",
"0.944",
]
`;

Expand Down

0 comments on commit a504fd9

Please sign in to comment.