Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Mobile side draw brush font size slider drag problem #915

Open
lhl535 opened this issue Mar 26, 2024 · 0 comments
Open

Mobile side draw brush font size slider drag problem #915

lhl535 opened this issue Mar 26, 2024 · 0 comments

Comments

@lhl535
Copy link

lhl535 commented Mar 26, 2024

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch tui-image-editor@3.15.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/tui-image-editor/dist/tui-image-editor.js b/node_modules/tui-image-editor/dist/tui-image-editor.js
index 03eef07..7dd8044 100644
--- a/node_modules/tui-image-editor/dist/tui-image-editor.js
+++ b/node_modules/tui-image-editor/dist/tui-image-editor.js
@@ -43836,6 +43836,7 @@ var Range = /*#__PURE__*/function () {
   }, {
     key: "_addDragEvent",
     value: function _addDragEvent() {
+      this.pointer.addEventListener('touchstart', this.eventHandler.startChangingSlide);
       this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide);
     }
     /**
@@ -43846,6 +43847,7 @@ var Range = /*#__PURE__*/function () {
   }, {
     key: "_removeDragEvent",
     value: function _removeDragEvent() {
+      this.pointer.removeEventListener('touchstart', this.eventHandler.startChangingSlide);
       this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide);
     }
     /**
@@ -43857,6 +43859,9 @@ var Range = /*#__PURE__*/function () {
   }, {
     key: "_changeSlide",
     value: function _changeSlide(event) {
+      if (event.changedTouches && event.changedTouches[0]) {
+        event = event.changedTouches[0];
+      }
       var changePosition = event.screenX;
       var diffPosition = changePosition - this.firstPosition;
       var touchPx = this.firstLeft + diffPosition;
@@ -43885,6 +43890,9 @@ var Range = /*#__PURE__*/function () {
       if (event.target.className !== 'tui-image-editor-range') {
         return;
       }
+      if (event.changedTouches && event.changedTouches[0]) {
+        event = event.changedTouches[0];
+      }
 
       var touchPx = event.offsetX;
       var ratio = touchPx / this.rangeWidth;
@@ -43897,8 +43905,13 @@ var Range = /*#__PURE__*/function () {
   }, {
     key: "_startChangingSlide",
     value: function _startChangingSlide(event) {
+      if (event.changedTouches && event.changedTouches[0]) {
+        event = event.changedTouches[0];
+      }
       this.firstPosition = event.screenX;
       this.firstLeft = toInteger(this.pointer.style.left) || 0;
+      document.addEventListener('touchmove', this.eventHandler.changeSlide);
+      document.addEventListener('touchend', this.eventHandler.stopChangingSlide);
       document.addEventListener('mousemove', this.eventHandler.changeSlide);
       document.addEventListener('mouseup', this.eventHandler.stopChangingSlide);
     }
@@ -43911,6 +43924,8 @@ var Range = /*#__PURE__*/function () {
     key: "_stopChangingSlide",
     value: function _stopChangingSlide() {
       this.fire('change', this._value, true);
+      document.removeEventListener('touchmove', this.eventHandler.changeSlide);
+      document.removeEventListener('touchend', this.eventHandler.stopChangingSlide);
       document.removeEventListener('mousemove', this.eventHandler.changeSlide);
       document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide);
     }

This issue body was partially generated by patch-package.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant