feat(IText): Draggable text #7802

ShaMan123 · 2022-03-11T23:38:23Z

General

Adds support for native like text dragging! Out of the box!
This PR aims to support text dragging, making fabric's text objects feel/behave like a HTML textarea.
It is an expected interaction from the user's point of view.

closes #7800

Changes

drag/drop event logic on canvas/text:
- firing DnD events with more data for the dev
- addressed an issue with firing order on drag over targets and the selected target
- onDragStart and canDrop are public methods for overriding that control drag and drop respectively
- dragStart logic cycle - imitates spec, invokes target's onDragStart method, if result is true drag starts. Behaves like onSelect.
- creating a drag image from onDragStart
- dragEnd calls _onMouseUp synthetically - the browser doesn't do it and fabric needs it to finalize interaction logic
cursor/selection rendering on text - in order to render text selection on the drag source while dragging and the cursor on the drop target while dragging over it (same as what the browser does)

Thoughts

I think we ought to change the selectWord method to align with the behavior of html textarea which selects the word and all the trailing whitespace (it's important for drag and drop).

TO DO

perhaps wait for feat(Text): condensed styles structure #7842 for DragEvent.dataTransfer
retina scaling for drag image - couldn't manage to fix the blur (will be handled in a follow up if ever)
patch(Draggable text): minors #7904

src/mixins/itext_click_behavior.mixin.js

github-actions · 2022-03-11T23:40:32Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.09 |    76.49 |   86.27 |    82.8 |                                               
 fabric.js |   83.09 |    76.49 |   86.27 |    82.8 | ...,29917,30042,30122-30187,30310,30409,30626 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-11T23:44:03Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.08 |    76.45 |   86.27 |   82.79 |                                               
 fabric.js |   83.08 |    76.45 |   86.27 |   82.79 | ...,29917,30042,30122-30187,30310,30409,30626 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T00:20:55Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.95 |     76.3 |   86.15 |   82.67 |                                               
 fabric.js |   82.95 |     76.3 |   86.15 |   82.67 | ...,29955,30080,30160-30225,30348,30447,30664 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T00:24:27Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.01 |    76.38 |   86.15 |   82.72 |                                               
 fabric.js |   83.01 |    76.38 |   86.15 |   82.72 | ...,29956,30081,30161-30226,30349,30448,30665 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T01:18:01Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.86 |    76.32 |   86.04 |   82.57 |                                               
 fabric.js |   82.86 |    76.32 |   86.04 |   82.57 | ...,29987,30112,30192-30257,30380,30479,30696 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T01:57:20Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.72 |    76.17 |   85.98 |   82.43 |                                               
 fabric.js |   82.72 |    76.17 |   85.98 |   82.43 | ...,30019,30144,30224-30289,30412,30511,30728 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T02:32:48Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.73 |    76.21 |   85.98 |   82.44 |                                               
 fabric.js |   82.73 |    76.21 |   85.98 |   82.44 | ...,30019,30144,30224-30289,30412,30511,30728 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T02:36:10Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.73 |     76.2 |   85.98 |   82.44 |                                               
 fabric.js |   82.73 |     76.2 |   85.98 |   82.44 | ...,30020,30145,30225-30290,30413,30512,30729 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T08:25:49Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.74 |    76.22 |   85.98 |   82.45 |                                               
 fabric.js |   82.74 |    76.22 |   85.98 |   82.45 | ...,30025,30150,30230-30295,30418,30517,30734 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T08:57:21Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.73 |    76.17 |   85.93 |   82.43 |                                               
 fabric.js |   82.73 |    76.17 |   85.93 |   82.43 | ...,30047,30172,30252-30317,30440,30539,30756 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T09:11:49Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.74 |    76.12 |   85.93 |   82.44 |                                               
 fabric.js |   82.74 |    76.12 |   85.93 |   82.44 | ...,30054,30179,30259-30324,30447,30546,30763 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-03-12T09:16:27Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.73 |    76.09 |   85.93 |   82.43 |                                               
 fabric.js |   82.73 |    76.09 |   85.93 |   82.43 | ...,30055,30180,30260-30325,30448,30547,30764 
-----------|---------|----------|---------|---------|-----------------------------------------------

melchiar · 2022-07-06T06:17:48Z

Yes, wrong bounding box, then after selecting a different object and then trying to select the first one again you get no bounding box at all though it's still in text editing mode.

github-actions · 2022-07-06T08:20:04Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   81.95 |    74.85 |      85 |   81.61 |                                               
 fabric.js |   81.95 |    74.85 |      85 |   81.61 | ...,31607,31681,31692-31757,31880,31979,32215 
-----------|---------|----------|---------|---------|-----------------------------------------------

ShaMan123 · 2022-07-06T08:23:09Z

Tried to reproduce on windows Chrome without success.
Could you post the dataTransfer data so I could have a look?

melchiar · 2022-07-07T05:25:09Z

I've simplified my test and the tiny bounding box was actually an app issue. The issue of the object being stuck in edit mode with no bounding box remains though.

Here's my dataTransfer data:

Also, firefox seems render the hover image in the wrong position/size on highdpi displays (my pixel ratio is 1.5)

ShaMan123 · 2022-07-07T05:48:32Z

could you upload the test into a sandbox?
I don't have firefox...

ShaMan123 · 2022-07-07T06:03:34Z

The positioning issue is strange.
I have 1.25 dpr on chrome and is well positioned

ShaMan123 · 2022-07-07T06:04:26Z

@melchiar test on http://fabricjs.com/test/misc/itext.html (with the local server)

melchiar · 2022-07-08T03:44:49Z

same issues running on itext.html. Drag an image file into a unselected textbox and it gets stuck in edit mode with no control box. Only way to get it back is by dragging text into it from another box.

The hover image position/size issue only occurs in firefox, chrome is fine.

ShaMan123 · 2022-07-08T05:46:13Z

src/mixins/itext_behavior.mixin.js

+        border: 'none'
+      });
+      fabric.document.body.appendChild(dragImage);
+      e.dataTransfer.setDragImage(dragImage, offset.x, offset.y);


@melchiar try manipulating the offset value
Perhaps firefox accounts for retina scaling?

ShaMan123 · 2022-07-08T05:47:24Z

Here's my dataTransfer data:

This doesn't seem like the data transfer from the drop event, seems like from a drag event.

ShaMan123 · 2022-07-08T05:50:39Z

can you make sure all drag/drop events are fired in the correct order?
start
enter
over
exit
drop
end

It might be that the mouse up handler isn't called correctly at the drag end operation

github-actions · 2022-07-09T20:39:50Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |    81.9 |    74.75 |   84.95 |   81.57 |                                               
 fabric.js |    81.9 |    74.75 |   84.95 |   81.57 | ...,31633,31707,31718-31783,31906,32005,32241 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur · 2022-07-09T22:51:09Z

There are a bunch of things i want to experiment with before merging.
In particular i don't like:

the use of enter/exit editing and update textarea to draw the destination cursor for the drop
the particular meaning we attribute to dropEffect ( we read it on the event, we never assign it, meaning that someone else has assigned it and there is a contract on the meaning ).
_onDragStart using activeObject rather than finding a target from the event

I want to try and test the code and see if i have alternatives for those problems, i don't have direct comment to lines that i can ask to change, is more a generic thing.

But again, all those informations shouldn't be digged in code review, for a large pr and features Adds support for native like text dragging! Out of the box! is not an adequate description.

github-actions · 2022-07-10T03:54:49Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   81.91 |    74.78 |   84.95 |   81.58 |                                               
 fabric.js |   81.91 |    74.78 |   84.95 |   81.58 | ...,31633,31707,31718-31783,31906,32005,32241 
-----------|---------|----------|---------|---------|-----------------------------------------------

ShaMan123 · 2022-07-10T04:07:18Z

Sorry about the PR description. UPDATED
The effectAllowed is set on dragStart - the system populates dropEffect, the docs saw you can change it but experimenting with it showed differently if I recall correctly, see MDN dropEffect effectAllowed. There is a contract, I aimed to follow MDN and web standard.
_onDragStart using activeObject rather than finding a target from the event - GOOD POINT - however it must be the active object or else the text object won't be in editing mode

ShaMan123 · 2022-07-10T04:29:11Z

src/mixins/object_interactivity.mixin.js

@@ -299,6 +299,17 @@
     */
    onSelect: function() {
      // implemented by sub-classes, as needed.
-    }
+    },
+


I guess we should/could add onDragStart: () => false here, as onDragStart and canDrop are public methods for overriding

Only for better readability

Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com>

github-actions · 2022-07-28T23:12:33Z

Code Coverage Summary

> fabric@5.1.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.03 |    74.95 |   84.77 |   81.69 |                                               
 fabric.js |   82.03 |    74.95 |   84.77 |   81.69 | ...,31610,31684,31695-31760,31883,31982,32218 
-----------|---------|----------|---------|---------|-----------------------------------------------

ShaMan123 · 2022-07-29T14:19:30Z

src/mixins/itext_behavior.mixin.js

@@ -512,6 +506,7 @@
        e.dataTransfer.effectAllowed = 'copyMove';
        this.setDragImage(e, data);
      }
+      this.abortCursorAnimation();


for future follow up
this line might be causing selection to be cleared on drag start

Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Andrea Bogazzi <andreabogazzi79@gmail.com>

ShaMan123 added 3 commits March 12, 2022 01:22

feat(IText): native like text dragging

4a00d88

fire event on object

d6d1eae

Update itext_click_behavior.mixin.js

672f945

ShaMan123 commented Mar 11, 2022

View reviewed changes

src/mixins/itext_click_behavior.mixin.js Outdated Show resolved Hide resolved

lint

0298b3b

dragend

c7a39a0

Update itext_click_behavior.mixin.js

f5957c8

ShaMan123 added 2 commits March 12, 2022 02:30

Update itext_click_behavior.mixin.js

d4bdf7f

dragover + drop

a77f365

Update itext_behavior.mixin.js

51c06ae

Update itext_behavior.mixin.js

a04e57d

Update itext_click_behavior.mixin.js

04ee04f

ShaMan123 added 2 commits March 12, 2022 10:16

fix(): drag end

afedfc2

Update itext_behavior.mixin.js

fc00090

support editable/canDrop

7dfa629

Update itext_behavior.mixin.js

934dd3c

lint

f70651c

Update itext_behavior.mixin.js

3d32720

ShaMan123 commented Jul 8, 2022

View reviewed changes

add additional tweaks

b38b34c

lint

2db76ec

ShaMan123 commented Jul 10, 2022

View reviewed changes

ShaMan123 mentioned this pull request Jul 27, 2022

contributing to upstream yassilah/fabric-extensions#5

Open

Changes for text dragging (#8065)

f00e547

Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com>

asturur approved these changes Jul 28, 2022

View reviewed changes

asturur merged commit 37d5c9c into master Jul 28, 2022

ShaMan123 mentioned this pull request Jul 28, 2022

chore(Object#clearContextTop): negate manuallyRestore #8097

Closed

ShaMan123 commented Jul 29, 2022

View reviewed changes

ShaMan123 mentioned this pull request Jul 29, 2022

fix(): Text drag feature #8095

Open

asturur deleted the draggable-text branch September 11, 2022 23:03

ShaMan123 restored the draggable-text branch December 22, 2022 09:14

frankrousseau pushed a commit to cgwire/fabric.js that referenced this pull request Jan 6, 2023

feat(IText): Draggable text (fabricjs#7802)

bb486ec

Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com> Co-authored-by: Andrea Bogazzi <andreabogazzi79@gmail.com>

ShaMan123 deleted the draggable-text branch February 5, 2023 05:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(IText): Draggable text #7802

feat(IText): Draggable text #7802

ShaMan123 commented Mar 11, 2022 •

edited

github-actions bot commented Mar 11, 2022 •

edited

github-actions bot commented Mar 11, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

melchiar commented Jul 6, 2022

github-actions bot commented Jul 6, 2022 •

edited

ShaMan123 commented Jul 6, 2022

melchiar commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022 •

edited

melchiar commented Jul 8, 2022

ShaMan123 Jul 8, 2022

ShaMan123 commented Jul 8, 2022 •

edited

ShaMan123 commented Jul 8, 2022 •

edited

github-actions bot commented Jul 9, 2022 •

edited

asturur commented Jul 9, 2022 •

edited

github-actions bot commented Jul 10, 2022 •

edited

ShaMan123 commented Jul 10, 2022 •

edited

ShaMan123 Jul 10, 2022 •

edited

github-actions bot commented Jul 28, 2022 •

edited

ShaMan123 Jul 29, 2022

feat(IText): Draggable text #7802

feat(IText): Draggable text #7802

Conversation

ShaMan123 commented Mar 11, 2022 • edited

General

Changes

Thoughts

TO DO

github-actions bot commented Mar 11, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 11, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

github-actions bot commented Mar 12, 2022 • edited

Code Coverage Summary

melchiar commented Jul 6, 2022

github-actions bot commented Jul 6, 2022 • edited

Code Coverage Summary

ShaMan123 commented Jul 6, 2022

melchiar commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022

ShaMan123 commented Jul 7, 2022 • edited

melchiar commented Jul 8, 2022

ShaMan123 Jul 8, 2022

Choose a reason for hiding this comment

ShaMan123 commented Jul 8, 2022 • edited

ShaMan123 commented Jul 8, 2022 • edited

github-actions bot commented Jul 9, 2022 • edited

Code Coverage Summary

asturur commented Jul 9, 2022 • edited

github-actions bot commented Jul 10, 2022 • edited

Code Coverage Summary

ShaMan123 commented Jul 10, 2022 • edited

ShaMan123 Jul 10, 2022 • edited

Choose a reason for hiding this comment

github-actions bot commented Jul 28, 2022 • edited

Code Coverage Summary

ShaMan123 Jul 29, 2022

Choose a reason for hiding this comment

ShaMan123 commented Mar 11, 2022 •

edited

github-actions bot commented Mar 11, 2022 •

edited

github-actions bot commented Mar 11, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Mar 12, 2022 •

edited

github-actions bot commented Jul 6, 2022 •

edited

ShaMan123 commented Jul 7, 2022 •

edited

ShaMan123 commented Jul 8, 2022 •

edited

ShaMan123 commented Jul 8, 2022 •

edited

github-actions bot commented Jul 9, 2022 •

edited

asturur commented Jul 9, 2022 •

edited

github-actions bot commented Jul 10, 2022 •

edited

ShaMan123 commented Jul 10, 2022 •

edited

ShaMan123 Jul 10, 2022 •

edited

github-actions bot commented Jul 28, 2022 •

edited