From 3f24e709db85a145bbd60db974008f861b7f2d32 Mon Sep 17 00:00:00 2001 From: Marco Jakob Date: Sat, 5 May 2018 20:14:38 +0200 Subject: [PATCH] Migrate to Dart 2 * Migrate to Dart 2. * Use Pointer Events for Edge, Firefox, Chrome. * Use Mouse/Touch Events for Safari and other browsers not supporting Pointer Events. --- .analysis_options | 7 - .gitignore | 14 +- CHANGELOG.md | 28 ++-- analysis_options.yaml | 15 ++ build.debug.yaml | 11 ++ build.release.yaml | 15 ++ example/basic/{web => }/example.css | 7 +- example/basic/{web => }/example.dart | 4 +- example/basic/{web => }/images/README.md | 0 example/basic/{web => }/images/document.png | Bin example/basic/{web => }/images/trash.png | Bin example/basic/index.html | 36 +++++ example/basic/pubspec.yaml | 9 -- example/basic/web/index.html | 29 ---- example/cancel/{web => }/example.css | 0 example/cancel/{web => }/example.dart | 4 +- example/cancel/{web => }/index.html | 21 +-- example/cancel/pubspec.yaml | 9 -- example/custom-acceptor/pubspec.yaml | 9 -- example/custom-acceptor/web/index.html | 49 ------- example/custom-avatar/pubspec.yaml | 9 -- example/custom-avatar/web/index.html | 29 ---- .../web => custom_acceptor}/example.css | 0 .../web => custom_acceptor}/example.dart | 20 ++- example/custom_acceptor/index.html | 59 ++++++++ .../web => custom_avatar}/example.css | 0 .../web => custom_avatar}/example.dart | 0 .../web => custom_avatar}/images/README.md | 0 .../web => custom_avatar}/images/document.png | Bin .../web => custom_avatar}/images/smiley01.png | Bin .../web => custom_avatar}/images/smiley02.png | Bin .../web => custom_avatar}/images/smiley03.png | Bin .../web => custom_avatar}/images/smiley04.png | Bin .../web => custom_avatar}/images/smiley05.png | Bin .../web => custom_avatar}/images/smiley06.png | Bin .../web => custom_avatar}/images/trash.png | Bin example/custom_avatar/index.html | 36 +++++ example/detection-only/pubspec.yaml | 9 -- example/detection-only/web/index.html | 26 ---- .../web => detection_only}/example.css | 0 .../web => detection_only}/example.dart | 0 example/detection_only/index.html | 29 ++++ example/free-dragging/pubspec.yaml | 9 -- example/free-dragging/web/index.html | 26 ---- .../web => free_dragging}/example.css | 0 .../web => free_dragging}/example.dart | 4 +- example/free_dragging/index.html | 29 ++++ example/handle/{web => }/example.css | 0 example/handle/example.dart | 9 ++ example/handle/index.html | 29 ++++ example/handle/pubspec.yaml | 9 -- example/handle/web/example.dart | 10 -- example/handle/web/index.html | 26 ---- example/horizontal-only/pubspec.yaml | 9 -- example/horizontal-only/web/index.html | 26 ---- .../web => horizontal_only}/example.css | 0 .../web => horizontal_only}/example.dart | 7 +- example/horizontal_only/index.html | 29 ++++ example/index.html | 60 +++++--- example/nested-dropzones/pubspec.yaml | 9 -- example/nested-dropzones/web/index.html | 34 ----- example/nested-elements/pubspec.yaml | 9 -- .../web => nested_dropzones}/example.css | 0 .../web => nested_dropzones}/example.dart | 0 example/nested_dropzones/index.html | 37 +++++ .../web => nested_elements}/example.css | 0 .../web => nested_elements}/example.dart | 4 +- .../web => nested_elements}/index.html | 23 +-- example/simple-sortable/pubspec.yaml | 9 -- example/simple-sortable/web/index.html | 35 ----- .../web => simple_sortable}/example.css | 0 .../web => simple_sortable}/example.dart | 8 +- example/simple_sortable/index.html | 44 ++++++ lib/src/draggable.dart | 13 +- lib/src/draggable_avatar.dart | 14 +- lib/src/draggable_dispatch.dart | 2 +- lib/src/draggable_manager.dart | 137 ++++++++---------- lib/src/dropzone.dart | 5 - pubspec.yaml | 10 +- test/parent-offset/example.dart | 4 +- test/scroll-offset/example.dart | 6 +- 81 files changed, 573 insertions(+), 596 deletions(-) delete mode 100644 .analysis_options create mode 100644 analysis_options.yaml create mode 100644 build.debug.yaml create mode 100644 build.release.yaml rename example/basic/{web => }/example.css (94%) rename example/basic/{web => }/example.dart (87%) rename example/basic/{web => }/images/README.md (100%) rename example/basic/{web => }/images/document.png (100%) rename example/basic/{web => }/images/trash.png (100%) create mode 100644 example/basic/index.html delete mode 100644 example/basic/pubspec.yaml delete mode 100644 example/basic/web/index.html rename example/cancel/{web => }/example.css (100%) rename example/cancel/{web => }/example.dart (78%) rename example/cancel/{web => }/index.html (50%) delete mode 100644 example/cancel/pubspec.yaml delete mode 100644 example/custom-acceptor/pubspec.yaml delete mode 100644 example/custom-acceptor/web/index.html delete mode 100644 example/custom-avatar/pubspec.yaml delete mode 100644 example/custom-avatar/web/index.html rename example/{custom-acceptor/web => custom_acceptor}/example.css (100%) rename example/{custom-acceptor/web => custom_acceptor}/example.dart (61%) create mode 100644 example/custom_acceptor/index.html rename example/{custom-avatar/web => custom_avatar}/example.css (100%) rename example/{custom-avatar/web => custom_avatar}/example.dart (100%) rename example/{custom-avatar/web => custom_avatar}/images/README.md (100%) rename example/{custom-avatar/web => custom_avatar}/images/document.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley01.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley02.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley03.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley04.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley05.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/smiley06.png (100%) rename example/{custom-avatar/web => custom_avatar}/images/trash.png (100%) create mode 100644 example/custom_avatar/index.html delete mode 100644 example/detection-only/pubspec.yaml delete mode 100644 example/detection-only/web/index.html rename example/{detection-only/web => detection_only}/example.css (100%) rename example/{detection-only/web => detection_only}/example.dart (100%) create mode 100644 example/detection_only/index.html delete mode 100644 example/free-dragging/pubspec.yaml delete mode 100644 example/free-dragging/web/index.html rename example/{free-dragging/web => free_dragging}/example.css (100%) rename example/{free-dragging/web => free_dragging}/example.dart (80%) create mode 100644 example/free_dragging/index.html rename example/handle/{web => }/example.css (100%) create mode 100644 example/handle/example.dart create mode 100644 example/handle/index.html delete mode 100644 example/handle/pubspec.yaml delete mode 100644 example/handle/web/example.dart delete mode 100644 example/handle/web/index.html delete mode 100644 example/horizontal-only/pubspec.yaml delete mode 100644 example/horizontal-only/web/index.html rename example/{horizontal-only/web => horizontal_only}/example.css (100%) rename example/{horizontal-only/web => horizontal_only}/example.dart (67%) create mode 100644 example/horizontal_only/index.html delete mode 100644 example/nested-dropzones/pubspec.yaml delete mode 100644 example/nested-dropzones/web/index.html delete mode 100644 example/nested-elements/pubspec.yaml rename example/{nested-dropzones/web => nested_dropzones}/example.css (100%) rename example/{nested-dropzones/web => nested_dropzones}/example.dart (100%) create mode 100644 example/nested_dropzones/index.html rename example/{nested-elements/web => nested_elements}/example.css (100%) rename example/{nested-elements/web => nested_elements}/example.dart (90%) rename example/{nested-elements/web => nested_elements}/index.html (50%) delete mode 100644 example/simple-sortable/pubspec.yaml delete mode 100644 example/simple-sortable/web/index.html rename example/{simple-sortable/web => simple_sortable}/example.css (100%) rename example/{simple-sortable/web => simple_sortable}/example.dart (83%) create mode 100644 example/simple_sortable/index.html diff --git a/.analysis_options b/.analysis_options deleted file mode 100644 index ceee449..0000000 --- a/.analysis_options +++ /dev/null @@ -1,7 +0,0 @@ -analyzer: - strong-mode: true -linter: - rules: - - annotate_overrides - - cancel_subscriptions - - close_sinks diff --git a/.gitignore b/.gitignore index 8e69451..09239b7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,12 @@ -.buildlog -.DS_Store -.idea +# Files and directories created by pub +.packages .pub/ build/ -packages +# Remove the following pattern if you wish to check in your lock file pubspec.lock -.packages + +# Files generated by dart tools +.dart_tool + +# Directory created by dartdoc +doc/api/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 2167436..eb56f5e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,63 +1,58 @@ # Changelog +## Version 1.0.0-alpha+1 (2018-05-05) + +* Migrate to Dart 2. +* Use pointer events for Edge, Firefox, Chrome. ## Version 0.4.0 (2017-06-27) * Fix strong mode errors (#20). - ## Version 0.3.6 (2017-06-06) * Fix bug: Provide reasonable fallback for event target when mouse position exits viewport (#19). - ## Version 0.3.5 (2016-11-22) * Handle the edge case where destroy is called while dragging an avatar (#17). - ## Version 0.3.4 (2016-10-19) * Fix strong-mode type errors (#15). * Remove Shadow DOM example and (dev)dependency on Polymer (was causing some confusion). - ## Version 0.3.3 (2016-09-22) * Allow a configurable clickSuppression distance (#13). We found that the click -suppression was a little too aggressive for users with less mousing accuracy. -They would attempt to click and trigger a small drag. Which then suppressed the -click event and prevented the action they intended to complete. - + suppression was a little too aggressive for users with less mousing accuracy. + They would attempt to click and trigger a small drag. Which then suppressed the + click event and prevented the action they intended to complete. ## Version 0.3.2 (2016-07-26) * Remove null-aware operator since drone.io uses an old version of Dart that doesn't support this yet. - ## Version 0.3.1 (2016-07-26) * Support for programmatic drag abort (see issue #11). - ## Version 0.3.0 (2015-04-18) * BREAKING CHANGE: Refactoring the `AvatarHandler`. Only if you've implemented a custom `AvatarHandler` you might need to do some changes: - * `setPointerEventsNone` and `resetPointerEvents` were removed and don't - need to be called any more. Pointer event styles are handled automatically. + * `setPointerEventsNone` and `resetPointerEvents` were removed and don't + need to be called any more. Pointer event styles are handled automatically. * Fix `AvatarHandler` margin caching: The `AvatarHandler` only cached the margins once for every `Draggable`. This caused problems when margins of elements in the same `Draggable` had different margins or the margins were changed. Now the margins are reset after every drag. - ## Version 0.2.1 (2015-03-09) * Fix #9: Using transformers in the main `pubspec.yaml` caused problems with projects depending on the `dnd` package. - ## Version 0.2.0 (2015-03-09) * Fix #3: Shadow DOM is now supported. A `dnd-retarget` attribute must be added @@ -66,7 +61,6 @@ click event and prevented the action they intended to complete. * Fix #7: Add a css class (`dnd-invalid` by default) to dropzones when a not-accepted draggable is dragged over. - ## Version 0.1.4 (2014-10-20) * Add a sortable example. @@ -74,13 +68,11 @@ click event and prevented the action they intended to complete. (`///` instead of `/** */`). * Move event dispatching calls from EventManager to Draggable (refactoring). - ## Version 0.1.3 (2014-08-09) * Fix #4: Problem when an ancestor of the dragged element was positioned (relative, absolute, fixed). - ## Version 0.1.2 (2014-07-22) * Correcting small bug that occurred when setSelectionRange() was called on @@ -90,7 +82,6 @@ click event and prevented the action they intended to complete. * Adding a `cancelled` flag to `DraggableEvent` to indicate if a drag ended because of a cancelling operation like `esc` key, etc. - ## Version 0.1.1 (2014-07-21) * Support for IE10 and IE11 touch screens through pointer events. @@ -98,7 +89,6 @@ click event and prevented the action they intended to complete. touch and mouse dragging, so it should not be necessary to disable one or the other. - ## Version 0.1.0 (2014-07-17) * First version. diff --git a/analysis_options.yaml b/analysis_options.yaml new file mode 100644 index 0000000..6dd0787 --- /dev/null +++ b/analysis_options.yaml @@ -0,0 +1,15 @@ +analyzer: + strong-mode: true + errors: + uri_has_not_been_generated: ignore + +# Lint rules and documentation, see http://dart-lang.github.io/linter/lints +linter: + rules: + - cancel_subscriptions + - hash_and_equals + - iterable_contains_unrelated_type + - list_remove_unrelated_type + - test_types_in_equals + - unrelated_type_equality_checks + - valid_regexps diff --git a/build.debug.yaml b/build.debug.yaml new file mode 100644 index 0000000..ceb3d78 --- /dev/null +++ b/build.debug.yaml @@ -0,0 +1,11 @@ +targets: + $default: + builders: + build_web_compilers|entrypoint: + generate_for: + - web/main.dart + options: + compiler: dartdevc + dart2js_args: + - --enable-asserts + - --preview-dart-2 diff --git a/build.release.yaml b/build.release.yaml new file mode 100644 index 0000000..8a1656b --- /dev/null +++ b/build.release.yaml @@ -0,0 +1,15 @@ +targets: + $default: + builders: + build_web_compilers|entrypoint: + generate_for: + - web/main.dart + options: + compiler: dart2js + dart2js_args: + - --fast-startup + - --minify + - --trust-type-annotations + # Consult https://webdev.dartlang.org/tools/dart2js#size-and-speed-options + # before enabling the following option: + # - --trust-primitives diff --git a/example/basic/web/example.css b/example/basic/example.css similarity index 94% rename from example/basic/web/example.css rename to example/basic/example.css index cb4703e..c9c6f1a 100644 --- a/example/basic/web/example.css +++ b/example/basic/example.css @@ -8,7 +8,7 @@ body { } .container { - max-width: 500px; + max-width: 400px; padding: 15px 15px 0 15px; } @@ -40,7 +40,8 @@ body { opacity: 0.5; } -.dnd-dragging, .dnd-drag-occurring { +.dnd-dragging, +.dnd-drag-occurring { cursor: url(packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */ cursor: url(packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */ -} \ No newline at end of file +} diff --git a/example/basic/web/example.dart b/example/basic/example.dart similarity index 87% rename from example/basic/web/example.dart rename to example/basic/example.dart index 64b735d..2aebb05 100644 --- a/example/basic/web/example.dart +++ b/example/basic/example.dart @@ -4,7 +4,7 @@ import 'package:dnd/dnd.dart'; /// A basic example of how to use [Draggable]s and [Dropzone]s together. main() { // Install draggables (documents). - Draggable draggable = new Draggable(querySelectorAll('.document'), + new Draggable(querySelectorAll('.document'), avatarHandler: new AvatarHandler.clone()); // Install dropzone (trash). @@ -15,4 +15,4 @@ main() { event.draggableElement.remove(); event.dropzoneElement.classes.add('full'); }); -} \ No newline at end of file +} diff --git a/example/basic/web/images/README.md b/example/basic/images/README.md similarity index 100% rename from example/basic/web/images/README.md rename to example/basic/images/README.md diff --git a/example/basic/web/images/document.png b/example/basic/images/document.png similarity index 100% rename from example/basic/web/images/document.png rename to example/basic/images/document.png diff --git a/example/basic/web/images/trash.png b/example/basic/images/trash.png similarity index 100% rename from example/basic/web/images/trash.png rename to example/basic/images/trash.png diff --git a/example/basic/index.html b/example/basic/index.html new file mode 100644 index 0000000..088cce7 --- /dev/null +++ b/example/basic/index.html @@ -0,0 +1,36 @@ + + + + + + + + + Dart Drag and Drop: Basic Example + + + + + + +
+ Example Source on GitHub + +
+ + + + + +
+ + + \ No newline at end of file diff --git a/example/basic/pubspec.yaml b/example/basic/pubspec.yaml deleted file mode 100644 index f4ac440..0000000 --- a/example/basic/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_basic -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ \ No newline at end of file diff --git a/example/basic/web/index.html b/example/basic/web/index.html deleted file mode 100644 index e3e6a1a..0000000 --- a/example/basic/web/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - -Dart Drag and Drop: Basic Example - - - - - -
- Example Source on GitHub - -
- - - - - -
- - - - - diff --git a/example/cancel/web/example.css b/example/cancel/example.css similarity index 100% rename from example/cancel/web/example.css rename to example/cancel/example.css diff --git a/example/cancel/web/example.dart b/example/cancel/example.dart similarity index 78% rename from example/cancel/web/example.dart rename to example/cancel/example.dart index e01c58e..1adae0b 100644 --- a/example/cancel/web/example.dart +++ b/example/cancel/example.dart @@ -4,7 +4,7 @@ import 'package:dnd/dnd.dart'; /// Example demonstrating how dragging can be prevented on some elements. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), + new Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.original(), cancel: 'textarea, button, .no-drag'); -} \ No newline at end of file +} diff --git a/example/cancel/web/index.html b/example/cancel/index.html similarity index 50% rename from example/cancel/web/index.html rename to example/cancel/index.html index a8e09c4..6ea1ede 100644 --- a/example/cancel/web/index.html +++ b/example/cancel/index.html @@ -1,19 +1,24 @@ + - - + + -Dart Drag and Drop: Cancel Example + Dart Drag and Drop: Cancel Example - + +
Example Source on GitHub + target="_parent">Example Source on GitHub
Drag me!
@@ -22,8 +27,6 @@
- - - - + + \ No newline at end of file diff --git a/example/cancel/pubspec.yaml b/example/cancel/pubspec.yaml deleted file mode 100644 index c533cef..0000000 --- a/example/cancel/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_cancel -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/custom-acceptor/pubspec.yaml b/example/custom-acceptor/pubspec.yaml deleted file mode 100644 index 770f54f..0000000 --- a/example/custom-acceptor/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_custom_acceptor -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/custom-acceptor/web/index.html b/example/custom-acceptor/web/index.html deleted file mode 100644 index 1c4c2ed..0000000 --- a/example/custom-acceptor/web/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - -Dart Drag and Drop: Custom Acceptor Example - - - - - -
- Example Source on GitHub - -
-
-

Dropzone 1

- (Accepts all) -
-
-

Dropzone 2

- (Accepts B only) -
-
-

Dropzone 3

- (Accepts if textfield contains word 'acceptme') -
-
- -
-

Draggable A

-
-
-

Draggable B

-
-
-

Draggable C

- Enter 'acceptme':
- -
-
- - - - - diff --git a/example/custom-avatar/pubspec.yaml b/example/custom-avatar/pubspec.yaml deleted file mode 100644 index c6b634d..0000000 --- a/example/custom-avatar/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_custom_avatar -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/custom-avatar/web/index.html b/example/custom-avatar/web/index.html deleted file mode 100644 index b78cbd0..0000000 --- a/example/custom-avatar/web/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - -Dart Drag and Drop: Custom Avatar Example - - - - - - -
- Example Source on GitHub - -
- - - - -
- - - - - diff --git a/example/custom-acceptor/web/example.css b/example/custom_acceptor/example.css similarity index 100% rename from example/custom-acceptor/web/example.css rename to example/custom_acceptor/example.css diff --git a/example/custom-acceptor/web/example.dart b/example/custom_acceptor/example.dart similarity index 61% rename from example/custom-acceptor/web/example.dart rename to example/custom_acceptor/example.dart index de81881..653689a 100644 --- a/example/custom-acceptor/web/example.dart +++ b/example/custom_acceptor/example.dart @@ -4,25 +4,23 @@ import 'package:dnd/dnd.dart'; /// Uses Acceptors to determine which Draggables are accepted by which Dropzones. main() { // Install draggables. - Draggable draggableA = new Draggable(querySelector('#draggable-a'), + new Draggable(querySelector('#draggable-a'), avatarHandler: new AvatarHandler.clone()); - Draggable draggableB = new Draggable(querySelector('#draggable-b'), + var draggableB = new Draggable(querySelector('#draggable-b'), avatarHandler: new AvatarHandler.clone()); - Draggable draggableC = new Draggable(querySelector('#draggable-c'), + new Draggable(querySelector('#draggable-c'), avatarHandler: new AvatarHandler.clone()); - // No acceptor means everything is accepted. - Dropzone dropzone1 = new Dropzone(querySelector('#dropzone-1')); + new Dropzone(querySelector('#dropzone-1')); // Use provided DraggablesAcceptor to accept Draggable B only. - Dropzone dropzone2 = new Dropzone(querySelector('#dropzone-2'), + new Dropzone(querySelector('#dropzone-2'), acceptor: new Acceptor.draggables([draggableB])); // Use a custom Acceptor that accepts Draggables with a input containing // the text 'acceptme'. - Dropzone dropzone3 = new Dropzone(querySelector('#dropzone-3'), - acceptor: new MyAcceptor()); + new Dropzone(querySelector('#dropzone-3'), acceptor: new MyAcceptor()); } /** @@ -30,10 +28,10 @@ main() { * the text 'acceptme'. */ class MyAcceptor extends Acceptor { - @override - bool accepts(Element draggableElement, int draggableId, Element dropzoneElement) { + bool accepts( + Element draggableElement, int draggableId, Element dropzoneElement) { InputElement input = draggableElement.querySelector('input'); return input != null && input.value == 'acceptme'; } -} \ No newline at end of file +} diff --git a/example/custom_acceptor/index.html b/example/custom_acceptor/index.html new file mode 100644 index 0000000..1260d99 --- /dev/null +++ b/example/custom_acceptor/index.html @@ -0,0 +1,59 @@ + + + + + + + + + Dart Drag and Drop: Custom Acceptor Example + + + + + + +
+ Example Source on GitHub + +
+
+

Dropzone 1

+ (Accepts all) +
+
+

Dropzone 2

+ (Accepts B only) +
+
+

Dropzone 3

+ (Accepts if textfield contains word 'acceptme') +
+
+ +
+

Draggable A

+
+
+

Draggable B

+
+
+

Draggable C

+ Enter 'acceptme': +
+ +
+
+ + + \ No newline at end of file diff --git a/example/custom-avatar/web/example.css b/example/custom_avatar/example.css similarity index 100% rename from example/custom-avatar/web/example.css rename to example/custom_avatar/example.css diff --git a/example/custom-avatar/web/example.dart b/example/custom_avatar/example.dart similarity index 100% rename from example/custom-avatar/web/example.dart rename to example/custom_avatar/example.dart diff --git a/example/custom-avatar/web/images/README.md b/example/custom_avatar/images/README.md similarity index 100% rename from example/custom-avatar/web/images/README.md rename to example/custom_avatar/images/README.md diff --git a/example/custom-avatar/web/images/document.png b/example/custom_avatar/images/document.png similarity index 100% rename from example/custom-avatar/web/images/document.png rename to example/custom_avatar/images/document.png diff --git a/example/custom-avatar/web/images/smiley01.png b/example/custom_avatar/images/smiley01.png similarity index 100% rename from example/custom-avatar/web/images/smiley01.png rename to example/custom_avatar/images/smiley01.png diff --git a/example/custom-avatar/web/images/smiley02.png b/example/custom_avatar/images/smiley02.png similarity index 100% rename from example/custom-avatar/web/images/smiley02.png rename to example/custom_avatar/images/smiley02.png diff --git a/example/custom-avatar/web/images/smiley03.png b/example/custom_avatar/images/smiley03.png similarity index 100% rename from example/custom-avatar/web/images/smiley03.png rename to example/custom_avatar/images/smiley03.png diff --git a/example/custom-avatar/web/images/smiley04.png b/example/custom_avatar/images/smiley04.png similarity index 100% rename from example/custom-avatar/web/images/smiley04.png rename to example/custom_avatar/images/smiley04.png diff --git a/example/custom-avatar/web/images/smiley05.png b/example/custom_avatar/images/smiley05.png similarity index 100% rename from example/custom-avatar/web/images/smiley05.png rename to example/custom_avatar/images/smiley05.png diff --git a/example/custom-avatar/web/images/smiley06.png b/example/custom_avatar/images/smiley06.png similarity index 100% rename from example/custom-avatar/web/images/smiley06.png rename to example/custom_avatar/images/smiley06.png diff --git a/example/custom-avatar/web/images/trash.png b/example/custom_avatar/images/trash.png similarity index 100% rename from example/custom-avatar/web/images/trash.png rename to example/custom_avatar/images/trash.png diff --git a/example/custom_avatar/index.html b/example/custom_avatar/index.html new file mode 100644 index 0000000..68a99cf --- /dev/null +++ b/example/custom_avatar/index.html @@ -0,0 +1,36 @@ + + + + + + + + + Dart Drag and Drop: Custom Avatar Example + + + + + + + +
+ Example Source on GitHub + +
+ + + + +
+ + + \ No newline at end of file diff --git a/example/detection-only/pubspec.yaml b/example/detection-only/pubspec.yaml deleted file mode 100644 index aa9d3cb..0000000 --- a/example/detection-only/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_detection_only -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/detection-only/web/index.html b/example/detection-only/web/index.html deleted file mode 100644 index fbc9c6a..0000000 --- a/example/detection-only/web/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - -Dart Drag and Drop: Detection Only Example - - - - - -
- Example Source on GitHub - -
-

Drag me!

-
-
- - - - - diff --git a/example/detection-only/web/example.css b/example/detection_only/example.css similarity index 100% rename from example/detection-only/web/example.css rename to example/detection_only/example.css diff --git a/example/detection-only/web/example.dart b/example/detection_only/example.dart similarity index 100% rename from example/detection-only/web/example.dart rename to example/detection_only/example.dart diff --git a/example/detection_only/index.html b/example/detection_only/index.html new file mode 100644 index 0000000..4479cce --- /dev/null +++ b/example/detection_only/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Dart Drag and Drop: Detection Only Example + + + + + + +
+ Example Source on GitHub + +
+

Drag me!

+
+
+ + + \ No newline at end of file diff --git a/example/free-dragging/pubspec.yaml b/example/free-dragging/pubspec.yaml deleted file mode 100644 index b49bf8f..0000000 --- a/example/free-dragging/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_free_dragging -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/free-dragging/web/index.html b/example/free-dragging/web/index.html deleted file mode 100644 index 4690457..0000000 --- a/example/free-dragging/web/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - -Dart Drag and Drop: Free Dragging Example - - - - - -
- Example Source on GitHub - -
-

Drag me!

-
-
- - - - - diff --git a/example/free-dragging/web/example.css b/example/free_dragging/example.css similarity index 100% rename from example/free-dragging/web/example.css rename to example/free_dragging/example.css diff --git a/example/free-dragging/web/example.dart b/example/free_dragging/example.dart similarity index 80% rename from example/free-dragging/web/example.dart rename to example/free_dragging/example.dart index 69635a4..79b825e 100644 --- a/example/free-dragging/web/example.dart +++ b/example/free_dragging/example.dart @@ -5,6 +5,6 @@ import 'package:dnd/dnd.dart'; /// for the drag avatar, the original element itself is dragged. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), + Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.original()); -} \ No newline at end of file +} diff --git a/example/free_dragging/index.html b/example/free_dragging/index.html new file mode 100644 index 0000000..3e3c2f2 --- /dev/null +++ b/example/free_dragging/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Dart Drag and Drop: Free Dragging Example + + + + + + +
+ Example Source on GitHub + +
+

Drag me!

+
+
+ + + \ No newline at end of file diff --git a/example/handle/web/example.css b/example/handle/example.css similarity index 100% rename from example/handle/web/example.css rename to example/handle/example.css diff --git a/example/handle/example.dart b/example/handle/example.dart new file mode 100644 index 0000000..dcc5743 --- /dev/null +++ b/example/handle/example.dart @@ -0,0 +1,9 @@ +import 'dart:html'; +import 'package:dnd/dnd.dart'; + +/// Example that uses a sub-element as drag handle. +main() { + // Install draggable. + Draggable(querySelector('.draggable'), + avatarHandler: new AvatarHandler.original(), handle: '.handle'); +} diff --git a/example/handle/index.html b/example/handle/index.html new file mode 100644 index 0000000..a68ff95 --- /dev/null +++ b/example/handle/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Dart Drag and Drop: Handle Example + + + + + + +
+ Example Source on GitHub + +
+
+
+
+ + + \ No newline at end of file diff --git a/example/handle/pubspec.yaml b/example/handle/pubspec.yaml deleted file mode 100644 index 88283e9..0000000 --- a/example/handle/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_handle -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/handle/web/example.dart b/example/handle/web/example.dart deleted file mode 100644 index 6c44f3d..0000000 --- a/example/handle/web/example.dart +++ /dev/null @@ -1,10 +0,0 @@ -import 'dart:html'; -import 'package:dnd/dnd.dart'; - -/// Example that uses a sub-element as drag handle. -main() { - // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), - avatarHandler: new AvatarHandler.original(), - handle: '.handle'); -} \ No newline at end of file diff --git a/example/handle/web/index.html b/example/handle/web/index.html deleted file mode 100644 index e311149..0000000 --- a/example/handle/web/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - -Dart Drag and Drop: Handle Example - - - - - -
- Example Source on GitHub - -
-
-
-
- - - - - diff --git a/example/horizontal-only/pubspec.yaml b/example/horizontal-only/pubspec.yaml deleted file mode 100644 index 145c19f..0000000 --- a/example/horizontal-only/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_horizontal_only -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/horizontal-only/web/index.html b/example/horizontal-only/web/index.html deleted file mode 100644 index cfc8bbb..0000000 --- a/example/horizontal-only/web/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - -Dart Drag and Drop: Horizontal Only Example - - - - - -
- Example Source on GitHub - -
-

Drag me horizontally!

-
-
- - - - - diff --git a/example/horizontal-only/web/example.css b/example/horizontal_only/example.css similarity index 100% rename from example/horizontal-only/web/example.css rename to example/horizontal_only/example.css diff --git a/example/horizontal-only/web/example.dart b/example/horizontal_only/example.dart similarity index 67% rename from example/horizontal-only/web/example.dart rename to example/horizontal_only/example.dart index 852ce42..5a088eb 100644 --- a/example/horizontal-only/web/example.dart +++ b/example/horizontal_only/example.dart @@ -6,7 +6,6 @@ import 'package:dnd/dnd.dart'; /// it is ignored and thus can be used for scrolling on touch devices. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), - avatarHandler: new AvatarHandler.original(), - horizontalOnly: true); -} \ No newline at end of file + new Draggable(querySelector('.draggable'), + avatarHandler: new AvatarHandler.original(), horizontalOnly: true); +} diff --git a/example/horizontal_only/index.html b/example/horizontal_only/index.html new file mode 100644 index 0000000..f462d87 --- /dev/null +++ b/example/horizontal_only/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Dart Drag and Drop: Horizontal Only Example + + + + + + +
+ Example Source on GitHub + +
+

Drag me horizontally!

+
+
+ + + \ No newline at end of file diff --git a/example/index.html b/example/index.html index 1c81802..aa93d7f 100644 --- a/example/index.html +++ b/example/index.html @@ -1,13 +1,16 @@ + - - + + - + -Dart Drag and Drop Examples + Dart Drag and Drop Examples @@ -17,18 +20,41 @@

Dart Drag and Drop Examples

Here are some examples of how to use Dart Drag and Drop:

- - + + + \ No newline at end of file diff --git a/example/nested-dropzones/pubspec.yaml b/example/nested-dropzones/pubspec.yaml deleted file mode 100644 index be024d9..0000000 --- a/example/nested-dropzones/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_nested_dropzones -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/nested-dropzones/web/index.html b/example/nested-dropzones/web/index.html deleted file mode 100644 index 04afe72..0000000 --- a/example/nested-dropzones/web/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - -Dart Drag and Drop: Nested Dropzones Example - - - - - -
- Example Source on GitHub - -
-

Drag me!

-
- -
- Outer Dropzone - -
- Inner Dropzone -
-
-
- - - - - diff --git a/example/nested-elements/pubspec.yaml b/example/nested-elements/pubspec.yaml deleted file mode 100644 index bf63f03..0000000 --- a/example/nested-elements/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_nested_elements -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/nested-dropzones/web/example.css b/example/nested_dropzones/example.css similarity index 100% rename from example/nested-dropzones/web/example.css rename to example/nested_dropzones/example.css diff --git a/example/nested-dropzones/web/example.dart b/example/nested_dropzones/example.dart similarity index 100% rename from example/nested-dropzones/web/example.dart rename to example/nested_dropzones/example.dart diff --git a/example/nested_dropzones/index.html b/example/nested_dropzones/index.html new file mode 100644 index 0000000..8662574 --- /dev/null +++ b/example/nested_dropzones/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Dart Drag and Drop: Nested Dropzones Example + + + + + + +
+ Example Source on GitHub + +
+

Drag me!

+
+ +
+ Outer Dropzone + +
+ Inner Dropzone +
+
+
+ + + \ No newline at end of file diff --git a/example/nested-elements/web/example.css b/example/nested_elements/example.css similarity index 100% rename from example/nested-elements/web/example.css rename to example/nested_elements/example.css diff --git a/example/nested-elements/web/example.dart b/example/nested_elements/example.dart similarity index 90% rename from example/nested-elements/web/example.dart rename to example/nested_elements/example.dart index ca1d91e..42d49a7 100644 --- a/example/nested-elements/web/example.dart +++ b/example/nested_elements/example.dart @@ -5,7 +5,7 @@ import 'package:dnd/dnd.dart'; /// dragEnter and dragLeave events. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), + new Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.original()); // Install dropzone. @@ -23,4 +23,4 @@ main() { dropzone.onDragLeave.listen((DropzoneEvent event) { text.text = 'Outer div: leave'; }); -} \ No newline at end of file +} diff --git a/example/nested-elements/web/index.html b/example/nested_elements/index.html similarity index 50% rename from example/nested-elements/web/index.html rename to example/nested_elements/index.html index afb6bd2..dd0b159 100644 --- a/example/nested-elements/web/index.html +++ b/example/nested_elements/index.html @@ -1,19 +1,24 @@ + - - + + -Dart Drag and Drop: Nested Elements Example + Dart Drag and Drop: Nested Elements Example - + +
- Example Source on GitHub + Example Source on GitHub

Drag me!

@@ -26,8 +31,6 @@
- - - - + + \ No newline at end of file diff --git a/example/simple-sortable/pubspec.yaml b/example/simple-sortable/pubspec.yaml deleted file mode 100644 index 0970590..0000000 --- a/example/simple-sortable/pubspec.yaml +++ /dev/null @@ -1,9 +0,0 @@ -name: dnd_example_simple_sortable -version: 0.0.0 -author: Marco Jakob -description: 'Dart Drag and Drop Example' -homepage: http://code.makery.ch/library/dart-drag-and-drop/ -dependencies: - browser: any - dnd: - path: ../../ diff --git a/example/simple-sortable/web/index.html b/example/simple-sortable/web/index.html deleted file mode 100644 index 27b0780..0000000 --- a/example/simple-sortable/web/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - -Dart Drag and Drop: Sortable Test - - - - - -
- - Example Source on GitHub - -
-
-

Drag me!

A

-
-
-

Drag me!

B

-
-
-

Drag me!

C

-
-
-
- - - - - diff --git a/example/simple-sortable/web/example.css b/example/simple_sortable/example.css similarity index 100% rename from example/simple-sortable/web/example.css rename to example/simple_sortable/example.css diff --git a/example/simple-sortable/web/example.dart b/example/simple_sortable/example.dart similarity index 83% rename from example/simple-sortable/web/example.dart rename to example/simple_sortable/example.dart index 14404bd..71654db 100644 --- a/example/simple-sortable/web/example.dart +++ b/example/simple_sortable/example.dart @@ -5,7 +5,7 @@ import 'package:dnd/dnd.dart'; /// and implement some basic sortable/rearranging behavior. main() { // Install same elements as draggable and dropzone. - Draggable draggable = new Draggable(querySelectorAll('.sortable'), + new Draggable(querySelectorAll('.sortable'), avatarHandler: new AvatarHandler.clone()); Dropzone dropzone = new Dropzone(querySelectorAll('.sortable')); @@ -19,10 +19,10 @@ main() { /// Simple function to swap two elements. void swapElements(Element elm1, Element elm2) { var parent1 = elm1.parent; - var next1 = elm1.nextElementSibling; + var next1 = elm1.nextElementSibling; var parent2 = elm2.parent; - var next2 = elm2.nextElementSibling; + var next2 = elm2.nextElementSibling; parent1.insertBefore(elm2, next1); parent2.insertBefore(elm1, next2); -} \ No newline at end of file +} diff --git a/example/simple_sortable/index.html b/example/simple_sortable/index.html new file mode 100644 index 0000000..c3d5f7a --- /dev/null +++ b/example/simple_sortable/index.html @@ -0,0 +1,44 @@ + + + + + + + + + Dart Drag and Drop: Sortable Test + + + + + + +
+ + Example Source on GitHub + +
+
+

Drag me! +
+
A

+
+
+

Drag me! +
+
B

+
+
+

Drag me! +
+
C

+
+
+
+ + + \ No newline at end of file diff --git a/lib/src/draggable.dart b/lib/src/draggable.dart index 486d166..3f7e76c 100644 --- a/lib/src/draggable.dart +++ b/lib/src/draggable.dart @@ -156,18 +156,15 @@ class Draggable { this.draggingClass: 'dnd-dragging', this.draggingClassBody: 'dnd-drag-occurring'}) : this._elementOrElementList = elementOrElementList { - // Detect IE Pointer Event Support. + // Detect Pointer Event Support. JsObject jsWindow = new JsObject.fromBrowserObject(window); - JsObject jsNavigator = jsWindow['navigator']; - if (jsNavigator.hasProperty('pointerEnabled')) { - // We're on IE11 or higher supporting pointerEvents. + if (jsWindow.hasProperty('PointerEvent')) { + // Browser with support for Pointer Events. _eventManagers.add(new _PointerManager(this)); - } else if (jsNavigator.hasProperty('msPointerEnabled')) { - // We're on IE10 supporting msPointerEvents. - _eventManagers.add(new _PointerManager(this, msPrefix: true)); } else { - // We're on other browsers. Install touch and mouse listeners. + // We're on a browser with no support for Pointer Events. + // Install touch and mouse listeners. if (TouchEvent.supported) { _eventManagers.add(new _TouchManager(this)); } diff --git a/lib/src/draggable_avatar.dart b/lib/src/draggable_avatar.dart index 76d0a7f..61cf5e0 100644 --- a/lib/src/draggable_avatar.dart +++ b/lib/src/draggable_avatar.dart @@ -113,18 +113,14 @@ abstract class AvatarHandler { /// Sets the CSS transform translate of [avatar]. Uses requestAnimationFrame /// to speed up animation. void setTranslate(Point position) { - void updateFunction() { + // Use request animation frame to update the transform translate. + AnimationHelper.requestUpdate(() { // Unsing `translate3d` to activate GPU hardware-acceleration (a bit of a hack). if (avatar != null) { avatar.style.transform = 'translate3d(${position.x}px, ${position.y}px, 0)'; } - } - - ; - - // Use request animation frame to update the transform translate. - AnimationHelper.requestUpdate(updateFunction); + }); } /// Removes the CSS transform of [avatar]. Also stops the requested animation @@ -152,9 +148,9 @@ abstract class AvatarHandler { // Calculate margins. var computedStyles = avatar.getComputedStyle(); _marginLeft = - num.parse(computedStyles.marginLeft.replaceFirst('px', ''), (s) => 0); + num.tryParse(computedStyles.marginLeft.replaceFirst('px', '')) ?? 0; _marginTop = - num.parse(computedStyles.marginTop.replaceFirst('px', ''), (s) => 0); + num.tryParse(computedStyles.marginTop.replaceFirst('px', '')) ?? 0; } } diff --git a/lib/src/draggable_dispatch.dart b/lib/src/draggable_dispatch.dart index c8a2b25..d7dfe8e 100644 --- a/lib/src/draggable_dispatch.dart +++ b/lib/src/draggable_dispatch.dart @@ -14,7 +14,7 @@ class _DragEventDispatcher { /// Custom drag leave event that is fired on the element that is left. static const String CUSTOM_DRAG_LEAVE = '_customDragLeave'; - /// Custom drag leave event that is fired on the element that is left. + /// Custom drop event that is fired on the element that the draggable was dropped. static const String CUSTOM_DROP = '_customDrop'; /// Stream provider for [CUSTOM_DRAG_ENTER] events. The relatedTarget contains diff --git a/lib/src/draggable_manager.dart b/lib/src/draggable_manager.dart index 9fbd25e..c394698 100644 --- a/lib/src/draggable_manager.dart +++ b/lib/src/draggable_manager.dart @@ -95,6 +95,7 @@ abstract class _EventManager { _currentDrag.position = position; EventTarget realTarget = _getRealTarget(clientPosition, target: target); + print('${drg.id}'); drg._handleDragEnd(event, realTarget); } @@ -125,7 +126,8 @@ abstract class _EventManager { /// /// Falls back to `document.body` if no element is found at the provided [clientPosition]. EventTarget _getRealTargetFromPoint(Point clientPosition) { - return document.elementFromPoint(clientPosition.x, clientPosition.y) ?? + return document.elementFromPoint( + clientPosition.x.round(), clientPosition.y.round()) ?? document.body; } @@ -166,7 +168,7 @@ abstract class _EventManager { target.attributes.containsKey(SHADOW_DOM_RETARGET_ATTRIBUTE)) { Element newTarget = (target as Element) .shadowRoot - .elementFromPoint(clientPosition.x, clientPosition.y); + .elementFromPoint(clientPosition.x.round(), clientPosition.y.round()); // Recursive call for nested shadow DOM trees. target = _recursiveShadowDomTarget(clientPosition, newTarget); @@ -369,106 +371,85 @@ class _MouseManager extends _EventManager { /// Manages the browser's pointer events (used for Internet Explorer). class _PointerManager extends _EventManager { - bool msPrefix; - - _PointerManager(Draggable draggable, {this.msPrefix: false}) - : super(draggable); + _PointerManager(Draggable draggable) : super(draggable); @override void installStart() { - String downEventName = msPrefix ? 'MSPointerDown' : 'pointerdown'; - - // Function to be called on all elements of [_elementOrElementList]. - var installFunc = (Element element) { - startSubs.add(element.on[downEventName].listen(_listenForStartEvent)); - }; - // The [ElementList] does not have the `on` method for custom events. So, // we need to manually go trough all [Element]s and call the [installFunc]. if (drg._elementOrElementList is ElementList) { - drg._elementOrElementList.forEach(installFunc); + drg._elementOrElementList.forEach(_doInstallStart); } else { - installFunc(drg._elementOrElementList); + _doInstallStart(drg._elementOrElementList); } // Disable default touch actions on all elements (scrolling, panning, zooming). - if (msPrefix) { - drg._elementOrElementList.style - .setProperty('-ms-touch-action', _getTouchActionValue()); - } else { - drg._elementOrElementList.style - .setProperty('touch-action', _getTouchActionValue()); - } + drg._elementOrElementList.style + .setProperty('touch-action', _getTouchActionValue()); } - @override - void installMove() { - String moveEventName = msPrefix ? 'MSPointerMove' : 'pointermove'; + void _doInstallStart(Element element) { + startSubs.add(element.on['pointerdown'].listen((e) { + var event = e as PointerEvent; - dragSubs.add(document.on[moveEventName].listen(_listenForMoveEvent)); - } + // Ignore if drag is already beeing handled. + if (_currentDrag != null) { + return; + } - @override - void installEnd() { - String endEventName = msPrefix ? 'MSPointerUp' : 'pointerup'; + // Only handle left clicks, ignore clicks from right or middle buttons. + if (event.button != 0) { + return; + } - dragSubs.add(document.on[endEventName].listen(_listenForEndEvent)); - } + // Ensure the drag started on a valid target. + if (!_isValidDragStartTarget(event.target)) { + return; + } - @override - void installCancel() { - String cancelEventName = msPrefix ? 'MSPointerCancel' : 'mspointercancel'; + // Prevent default on mouseDown. Reasons: + // * Disables image dragging handled by the browser. + // * Disables text selection. + // + // Note: We must NOT prevent default on form elements. Reasons: + // * SelectElement would not show a dropdown. + // * InputElement and TextAreaElement would not get focus. + // * ButtonElement and OptionElement - don't know if this is needed?? + Element target = event.target; + if (!(target is SelectElement || + target is InputElement || + target is TextAreaElement || + target is ButtonElement || + target is OptionElement)) { + event.preventDefault(); + } - dragSubs.add(document.on[cancelEventName].listen((event) { - handleCancel(event); + handleStart(event, event.page); })); } - /// Listener in a separate method to be able to use the `covariant` keyword. - void _listenForStartEvent(covariant MouseEvent event) { - // Ignore if drag is already beeing handled. - if (_currentDrag != null) { - return; - } - - // Only handle left clicks, ignore clicks from right or middle buttons. - if (event.button != 0) { - return; - } - - // Ensure the drag started on a valid target. - if (!_isValidDragStartTarget(event.target)) { - return; - } - - // Prevent default on mouseDown. Reasons: - // * Disables image dragging handled by the browser. - // * Disables text selection. - // - // Note: We must NOT prevent default on form elements. Reasons: - // * SelectElement would not show a dropdown. - // * InputElement and TextAreaElement would not get focus. - // * ButtonElement and OptionElement - don't know if this is needed?? - Element target = event.target; - if (!(target is SelectElement || - target is InputElement || - target is TextAreaElement || - target is ButtonElement || - target is OptionElement)) { - event.preventDefault(); - } - - handleStart(event, event.page); + @override + void installMove() { + dragSubs.add(document.on['pointermove'].listen((e) { + var event = e as PointerEvent; + handleMove(event, event.page, event.client); + })); } - /// Listener in a separate method to be able to use the `covariant` keyword. - void _listenForMoveEvent(covariant MouseEvent event) { - handleMove(event, event.page, event.client); + @override + void installEnd() { + dragSubs.add(document.on['pointerup'].listen((e) { + var event = e as PointerEvent; + // handleEnd(event, event.target, event.page, event.client); + handleEnd(event, null, event.page, event.client); + })); } - /// Listener in a separate method to be able to use the `covariant` keyword. - void _listenForEndEvent(covariant MouseEvent event) { - handleEnd(event, event.target, event.page, event.client); + @override + void installCancel() { + dragSubs.add(document.on['pointercancel'].listen((event) { + handleCancel(event); + })); } /// Returns the touch-action values `none`, `pan-x`, or `pan-y` depending on diff --git a/lib/src/dropzone.dart b/lib/src/dropzone.dart index 95848d7..07e082f 100644 --- a/lib/src/dropzone.dart +++ b/lib/src/dropzone.dart @@ -82,11 +82,6 @@ class Dropzone { /// Tracks subscriptions. List _subs = []; - /// Flag indicating that a child of the [_currentOverElement] is entered. - /// This means that a dragLeave event for the parent will be fired. So, if - /// this flag is true we must ignore the next dragLeave event. - bool _childOfCurrentOverElementEntered = false; - /// Creates a new [Dropzone] for [elementOrElementList]. The /// [elementOrElementList] must be of type [Element] or [ElementList]. /// diff --git a/pubspec.yaml b/pubspec.yaml index b1714b1..e1dd931 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,10 +1,12 @@ name: dnd -version: 0.4.0 +version: 1.0.0-alpha+1 author: Marco Jakob description: Drag and Drop for Dart web apps with mouse and touch support. homepage: http://code.makery.ch/library/dart-drag-and-drop/ documentation: https://www.dartdocs.org/documentation/dnd/latest/ environment: - sdk: '>=1.0.0 <2.0.0' -dependencies: - browser: '>=0.10.0 <0.11.0' + sdk: '>=2.0.0-dev.46.0 <2.0.0' + +dev_dependencies: + build_runner: ^0.8.7 + build_web_compilers: ^0.3.7 \ No newline at end of file diff --git a/test/parent-offset/example.dart b/test/parent-offset/example.dart index d1feaec..24d8fa7 100644 --- a/test/parent-offset/example.dart +++ b/test/parent-offset/example.dart @@ -4,6 +4,6 @@ import 'package:dnd/dnd.dart'; /// A test with a draggable that has a parent with offset > 0. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), + new Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.clone()); -} \ No newline at end of file +} diff --git a/test/scroll-offset/example.dart b/test/scroll-offset/example.dart index 9c881e7..b654edc 100644 --- a/test/scroll-offset/example.dart +++ b/test/scroll-offset/example.dart @@ -4,9 +4,9 @@ import 'package:dnd/dnd.dart'; /// A test with a draggable that has a scrollable parent. main() { // Install draggable. - Draggable draggable = new Draggable(querySelector('.draggable'), + new Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.clone()); // Install dropzone. - Dropzone dropzone = new Dropzone(querySelector('.dropzone')); -} \ No newline at end of file + new Dropzone(querySelector('.dropzone')); +}