Mobile side draw brush font size slider drag problem

[lhl535]

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.

[xiaoyu-xxxx]

666666