Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit ddda273
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 10:54:28 2022 +0200

    fix selection cases

commit fdba87f
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 10:54:14 2022 +0200

    rename

commit 0551fe0
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 10:28:49 2022 +0200

    forward/backward

commit befdcd8
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 10:00:48 2022 +0200

    rtl support prep

commit 36bbcb1
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 09:20:32 2022 +0200

    Update itext.class.js

commit c021097
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Fri Mar 11 09:03:07 2022 +0200

    feat(IText): selectionDirection, selectionDirection

commit 4f9529e
Author: amir hossein <a.mehrabi.70@gmail.com>
Date:   Wed Feb 16 09:46:27 2022 +0330

    fix(fabric.Text): consider justify text alignment in RTL text

commit fb3054b
Author: amir hossein <a.mehrabi.70@gmail.com>
Date:   Sat Feb 12 13:23:07 2022 +0330

    fix(fabric.Text): support RTL different text alignments

commit 07f597d
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 20:28:48 2022 +0200

    Update text.js

commit 28596f5
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 20:17:45 2022 +0200

    fix(tests)

commit 681c019
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 20:05:57 2022 +0200

    pathSide

commit 1a3f138
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 19:40:40 2022 +0200

    lint + rename

commit 3b80c7b
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 19:26:21 2022 +0200

    cleanup

commit 76f94b4
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Thu Mar 10 18:56:00 2022 +0200

    feat(Text): textAlign `start`, `end`

    and a bit of tidying up

commit 2e608dc
Author: Shachar <34343793+ShaMan123@users.noreply.github.com>
Date:   Wed Mar 9 09:37:43 2022 +0200

    feat(): dataURL export - filter objects (fabricjs#7788)

    * feat(): filter options

    * visual test

commit 1ea2465
Author: Amirhossein Mehrabi <a.mehrabi.70@gmail.com>
Date:   Sat Feb 26 22:36:46 2022 +0330

    fix(fabric.Text): add the previous code as comment
  • Loading branch information
@ShaMan123
ShaMan123 committed Mar 11, 2022
1 parent b6b4f9c commit dfffc0f
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 66 deletions.
47 changes: 28 additions & 19 deletions src/mixins/itext_behavior.mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@
* @param {Number} startFrom Current selection index
* @return {Number} New selection index
*/
findWordBoundaryLeft: function(startFrom) {
findWordBoundaryStart: function(startFrom) {
var offset = 0, index = startFrom - 1;

// remove space before cursor first
Expand All @@ -220,15 +220,15 @@
index--;
}

return startFrom - offset;
return Math.max(startFrom - offset, 0);
},

/**
* Find new selection index representing end of current word according to current selection index
* @param {Number} startFrom Current selection index
* @return {Number} New selection index
*/
findWordBoundaryRight: function(startFrom) {
findWordBoundaryEnd: function(startFrom) {
var offset = 0, index = startFrom;

// remove space after cursor first
Expand Down Expand Up @@ -263,23 +263,23 @@
* @param {Number} startFrom Current selection index
* @return {Number} New selection index
*/
findLineBoundaryLeft: function(startFrom) {
findLineBoundaryStart: function(startFrom) {
var offset = 0, index = startFrom - 1;

while (!/\n/.test(this._text[index]) && index > -1) {
offset++;
index--;
}

return startFrom - offset;
return Math.max(startFrom - offset, 0);
},

/**
* Find new selection index representing end of current line according to current selection index
* @param {Number} startFrom Current selection index
* @return {Number} New selection index
*/
findLineBoundaryRight: function(startFrom) {
findLineBoundaryEnd: function(startFrom) {
var offset = 0, index = startFrom;

while (!/\n/.test(this._text[index]) && index < this._text.length) {
Expand Down Expand Up @@ -337,8 +337,8 @@
*/
selectLine: function(selectionStart) {
selectionStart = selectionStart || this.selectionStart;
var newSelectionStart = this.findLineBoundaryLeft(selectionStart),
newSelectionEnd = this.findLineBoundaryRight(selectionStart);
var newSelectionStart = this.findLineBoundaryStart(selectionStart),
newSelectionEnd = this.findLineBoundaryEnd(selectionStart);

this.selectionStart = newSelectionStart;
this.selectionEnd = newSelectionEnd;
Expand Down Expand Up @@ -414,19 +414,19 @@
currentStart = this.selectionStart,
currentEnd = this.selectionEnd;
if (
(newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd)
(newSelectionStart !== this.__selectionStartOrigin || currentStart === currentEnd)
&&
(currentStart === newSelectionStart || currentEnd === newSelectionStart)
) {
return;
}
if (newSelectionStart > this.__selectionStartOnMouseDown) {
this.selectionStart = this.__selectionStartOnMouseDown;
if (newSelectionStart > this.__selectionStartOrigin) {
this.selectionStart = this.__selectionStartOrigin;
this.selectionEnd = newSelectionStart;
}
else {
this.selectionStart = newSelectionStart;
this.selectionEnd = this.__selectionStartOnMouseDown;
this.selectionEnd = this.__selectionStartOrigin;
}
if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) {
this.restartCursorIfNeeded();
Expand Down Expand Up @@ -472,11 +472,15 @@
var smallerTextStart = _text.slice(0, start),
graphemeStart = smallerTextStart.join('').length;
if (start === end) {
return { selectionStart: graphemeStart, selectionEnd: graphemeStart };
return { selectionStart: graphemeStart, selectionEnd: graphemeStart, selectionDirection: 'forward' };
}
var smallerTextEnd = _text.slice(start, end),
graphemeEnd = smallerTextEnd.join('').length;
return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd };
return {
selectionStart: graphemeStart,
selectionEnd: graphemeStart + graphemeEnd,
selectionDirection: graphemeStart < this.__selectionStartOrigin ? 'backward' : 'forward'
};
},

/**
Expand All @@ -489,8 +493,12 @@
}
if (!this.inCompositionMode) {
var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text);
this.hiddenTextarea.selectionStart = newSelection.selectionStart;
this.hiddenTextarea.selectionEnd = newSelection.selectionEnd;
this.hiddenTextarea.setSelectionRange(
newSelection.selectionStart,
newSelection.selectionEnd,
newSelection.selectionDirection
);
this.selectionDirection = newSelection.selectionDirection;
}
this.updateTextareaPosition();
},
Expand All @@ -514,6 +522,7 @@
if (!this.inCompositionMode) {
this.selectionStart = newSelection.selectionStart;
}
this.selectionDirection = newSelection.selectionDirection;
this.updateTextareaPosition();
},

Expand Down Expand Up @@ -915,14 +924,14 @@
if (end === start) {
this._selectionDirection = 'left';
}
else if (this._selectionDirection === 'right') {
else if (this.selectionDirection === 'forward') {
this._selectionDirection = 'left';
this.selectionEnd = start;
}
this.selectionStart = newSelection;
}
else if (newSelection > start && newSelection < end) {
if (this._selectionDirection === 'right') {
if (this.selectionDirection === 'forward') {
this.selectionEnd = newSelection;
}
else {
Expand All @@ -934,7 +943,7 @@
if (end === start) {
this._selectionDirection = 'right';
}
else if (this._selectionDirection === 'left') {
else if (this.selectionDirection === 'backward') {
this._selectionDirection = 'right';
this.selectionStart = end;
}
Expand Down
2 changes: 1 addition & 1 deletion src/mixins/itext_click_behavior.mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
}

if (this.isEditing) {
this.__selectionStartOnMouseDown = this.selectionStart;
this.__selectionStartOrigin = this.selectionStart;
if (this.selectionStart === this.selectionEnd) {
this.abortCursorAnimation();
}
Expand Down
100 changes: 54 additions & 46 deletions src/mixins/itext_key_behavior.mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
27: 'exitEditing',
33: 'moveCursorUp',
34: 'moveCursorDown',
35: 'moveCursorEndDir',
36: 'moveCursorStartDir',
37: 'moveCursorStartDir',
35: 'moveCursorForward',
36: 'moveCursorBackward',
37: 'moveCursorBackward',
38: 'moveCursorUp',
39: 'moveCursorEndDir',
39: 'moveCursorForward',
40: 'moveCursorDown',
},

Expand All @@ -70,11 +70,11 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
27: 'exitEditing',
33: 'moveCursorUp',
34: 'moveCursorDown',
35: 'moveCursorStartDir',
36: 'moveCursorEndDir',
37: 'moveCursorEndDir',
35: 'moveCursorBackward',
36: 'moveCursorForward',
37: 'moveCursorForward',
38: 'moveCursorUp',
39: 'moveCursorStartDir',
39: 'moveCursorBackward',
40: 'moveCursorDown',
},

Expand Down Expand Up @@ -470,7 +470,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
* @param {Number} offset
*/
moveCursorWithShift: function(offset) {
var newSelection = this._selectionDirection === 'left'
var newSelection = this.selectionDirection === 'backward'
? this.selectionStart + offset
: this.selectionEnd + offset;
this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection);
Expand All @@ -494,64 +494,75 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
},

/**
* Moves cursor left
* Moves cursor back
* @param {Event} e Event object
*/
moveCursorStartDir: function (e) {
moveCursorBackward: function (e) {
if (this.selectionStart === 0 && this.selectionEnd === 0) {
return;
}
var changed = false;
if (e.shiftKey) {
if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {
changed = this._moveLeft(e, 'selectionEnd');
if (this.selectionDirection === 'forward' && this.selectionStart !== this.selectionEnd) {
changed = this._move(e, 'selectionEnd', -1);
}
else if (this.selectionStart !== 0) {
this._selectionDirection = 'left';
changed = this._moveLeft(e, 'selectionStart');
//this._selectionDirection = 'left';
this.__selectionStartOrigin = this.selectionEnd;
changed = this._move(e, 'selectionStart', -1);
}
}
else {
changed = true;
this._selectionDirection = 'left';
//this._selectionDirection = 'left';
// only move cursor when there is no selection,
// otherwise we discard it, and leave cursor on same place
if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) {
changed = this._moveLeft(e, 'selectionStart');
if (this.selectionEnd === this.selectionStart) {
changed = this.selectionStart !== 0 && this._move(e, 'selectionStart', -1);
this.selectionEnd = this.selectionStart;
}
else if (this.selectionDirection === 'forward') {
this.selectionStart = this.selectionEnd;
}
else {
this.selectionEnd = this.selectionStart;
}
this.selectionEnd = this.selectionStart;
}
this._invalidateCursor(changed);
},

/**
* Moves cursor right
* Moves cursor forward
* @param {Event} e Event object
*/
moveCursorEndDir: function (e) {
moveCursorForward: function (e) {
if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) {
return;
}
var changed = false;
if (e.shiftKey) {
if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {
changed = this._moveRight(e, 'selectionStart');
if (this.selectionDirection === 'backward' && this.selectionStart !== this.selectionEnd) {
changed = this._move(e, 'selectionStart', 1);
}
else if (this.selectionEnd !== this._text.length) {
this._selectionDirection = 'right';
changed = this._moveRight(e, 'selectionEnd');
//this._selectionDirection = 'right';
this.__selectionStartOrigin = this.selectionStart;
changed = this._move(e, 'selectionEnd', 1);
}
}
else {
changed = true;
this._selectionDirection = 'right';
//this._selectionDirection = 'right';
if (this.selectionStart === this.selectionEnd) {
changed = this._moveRight(e, 'selectionStart');
changed = this._move(e, 'selectionStart', 1);
this.selectionEnd = this.selectionStart;
}
else {
else if (this.selectionDirection === 'forward') {
this.selectionStart = this.selectionEnd;
}
else {
this.selectionEnd = this.selectionStart;
}
}
this._invalidateCursor(changed);
},
Expand All @@ -572,18 +583,29 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot

/**
* @private
* @return {Boolean} true if a change happened
* @param {Event} e
* @param {'selectionStart'|'selectionEnd'} prop
* @param {number} direction
* @returns {boolean} true if a change happened
*/
_move: function(e, prop, direction) {
var newValue;
direction = Math.sign(direction);
if (direction === 0) {
return false;
}
if (e.altKey) {
newValue = this.findWordBoundary(direction, this[prop]);
newValue = direction > 0 ?
this.findWordBoundaryEnd(this[prop]) :
this.findWordBoundaryStart(this[prop]);
}
else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) {
newValue = this.findLineBoundary(direction, this[prop]);
newValue = direction > 0 ?
this.findLineBoundaryEnd(this[prop]) :
this.findLineBoundaryStart(this[prop]);
}
else {
this[prop] += direction === 'left' ? -1 : 1;
this[prop] = Math.min(Math.max(this[prop] + direction, 0), this.text.length);
return true;
}
if (typeof newValue !== undefined && this[prop] !== newValue) {
Expand All @@ -592,20 +614,6 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
}
},

/**
* @private
*/
_moveLeft: function(e, prop) {
return this._move(e, prop, 'left');
},

/**
* @private
*/
_moveRight: function(e, prop) {
return this._move(e, prop, 'right');
},

/**
* Removes characters from start/end
* start/end ar per grapheme position in _text array.
Expand Down
Loading

0 comments on commit dfffc0f

Please sign in to comment.