chore: use licia pointerEvent

liriliri · Sep 20, 2024 · 0856323 · 0856323
1 parent ee57623
commit 0856323
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 164 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/liriliri/luna#readme",
   "dependencies": {
-    "licia": "^1.39.2"
+    "licia": "^1.42.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

diff --git a/src/color-picker/index.ts b/src/color-picker/index.ts
@@ -4,8 +4,9 @@ import stripIndent from 'licia/stripIndent'
 import Color from 'licia/Color'
 import clamp from 'licia/clamp'
 import throttle from 'licia/throttle'
+import pointerEvent from 'licia/pointerEvent'
 import { rgbToHsv } from './util'
-import { drag, eventPage } from '../share/util'
+import { exportCjs, eventPage } from '../share/util'
 
 const $document = $(document as any)
 
@@ -64,7 +65,7 @@ export default class ColorPicker extends Component<IOptions> {
     return rgbToHsv(val[0], val[1], val[2])
   }
   private bindEvent() {
-    this.$saturation.on(drag('start'), this.onSaturationStart)
+    this.$saturation.on(pointerEvent('down'), this.onSaturationStart)
 
     const updateColor = throttle(this.updateColor, 50)
     this.on('optionChange', (name, val) => {
@@ -79,8 +80,8 @@ export default class ColorPicker extends Component<IOptions> {
   private onSaturationStart = (e: any) => {
     this.onSaturationMove(e)
 
-    $document.on(drag('move'), this.onSaturationMove)
-    $document.on(drag('end'), this.onSaturationEnd)
+    $document.on(pointerEvent('move'), this.onSaturationMove)
+    $document.on(pointerEvent('up'), this.onSaturationEnd)
   }
   private onSaturationMove = (e: any) => {
     e = e.origEvent
@@ -100,8 +101,8 @@ export default class ColorPicker extends Component<IOptions> {
     })
   }
   private onSaturationEnd = () => {
-    $document.off(drag('move'), this.onSaturationMove)
-    $document.off(drag('end'), this.onSaturationEnd)
+    $document.off(pointerEvent('move'), this.onSaturationMove)
+    $document.off(pointerEvent('up'), this.onSaturationEnd)
   }
   private initTpl() {
     this.$container.html(
@@ -130,5 +131,6 @@ export default class ColorPicker extends Component<IOptions> {
   }
 }
 
-module.exports = ColorPicker
-module.exports.default = ColorPicker
+if (typeof module !== 'undefined') {
+  exportCjs(module, ColorPicker)
+}
diff --git a/src/cropper/index.ts b/src/cropper/index.ts
@@ -7,7 +7,8 @@ import throttle from 'licia/throttle'
 import clone from 'licia/clone'
 import max from 'licia/max'
 import contain from 'licia/contain'
-import { drag, eventPage, exportCjs } from '../share/util'
+import pointerEvent from 'licia/pointerEvent'
+import { eventPage, exportCjs } from '../share/util'
 
 const $document = $(document as any)
 
@@ -178,7 +179,7 @@ export default class Cropper extends Component<IOptions> {
 
   private bindEvent() {
     this.resizeSensor.addListener(this.onResize)
-    this.$container.on(drag('start'), this.onCropStart)
+    this.$container.on(pointerEvent('down'), this.onCropStart)
 
     this.on('optionChange', (name, val) => {
       switch (name) {
@@ -203,8 +204,8 @@ export default class Cropper extends Component<IOptions> {
     this.startX = eventPage('x', e)
     this.startY = eventPage('y', e)
     this.oldCropBoxData = clone(this.cropBoxData)
-    $document.on(drag('move'), this.onCropMove)
-    $document.on(drag('end'), this.onCropEnd)
+    $document.on(pointerEvent('move'), this.onCropMove)
+    $document.on(pointerEvent('up'), this.onCropEnd)
   }
   private onCropMove = (e: any) => {
     e = e.origEvent
@@ -516,8 +517,8 @@ export default class Cropper extends Component<IOptions> {
   private onCropEnd = (e: any) => {
     this.onCropMove(e)
     this.$container.rmClass(this.c(`cursor-${this.action}`))
-    $document.off(drag('move'), this.onCropMove)
-    $document.off(drag('end'), this.onCropEnd)
+    $document.off(pointerEvent('move'), this.onCropMove)
+    $document.off(pointerEvent('up'), this.onCropEnd)
     this.action = ''
   }
   private resetCropBoxData() {

diff --git a/src/data-grid/index.ts b/src/data-grid/index.ts
@@ -23,7 +23,8 @@ import lowerCase from 'licia/lowerCase'
 import clamp from 'licia/clamp'
 import max from 'licia/max'
 import min from 'licia/min'
-import { exportCjs, drag, eventClient, pxToNum } from '../share/util'
+import pointerEvent from 'licia/pointerEvent'
+import { exportCjs, eventClient, pxToNum } from '../share/util'
 
 const $document = $(document as any)
 const MIN_COL_WIDTH = 24
@@ -262,8 +263,8 @@ export default class DataGrid extends Component<IOptions> {
     this.resizeStartLeft = pxToNum($resizers.eq(resizeIdx).css('left'))
 
     $(document.body).addClass(c('resizing'))
-    $document.on(drag('move'), this.onResizeColMove)
-    $document.on(drag('end'), this.onResizeColEnd)
+    $document.on(pointerEvent('move'), this.onResizeColMove)
+    $document.on(pointerEvent('up'), this.onResizeColEnd)
   }
   private onResizeColMove = (e: any) => {
     const { resizeIdx, $resizers, colWidths, $colgroup } = this
@@ -304,8 +305,8 @@ export default class DataGrid extends Component<IOptions> {
     this.applyColWeights()
 
     $(document.body).rmClass(c('resizing'))
-    $document.off(drag('move'), this.onResizeColMove)
-    $document.off(drag('end'), this.onResizeColEnd)
+    $document.off(pointerEvent('move'), this.onResizeColMove)
+    $document.off(pointerEvent('up'), this.onResizeColEnd)
   }
   private bindEvent() {
     const { c, $headerRow, $tableBody, $resizers } = this
@@ -352,7 +353,7 @@ export default class DataGrid extends Component<IOptions> {
       }
     )
 
-    $resizers.on(drag('start'), function (this: HTMLDivElement, e) {
+    $resizers.on(pointerEvent('down'), function (this: HTMLDivElement, e) {
       const $this = $(this)
       self.resizeIdx = toNum($this.data('idx'))
       self.onResizeColStart(e)

diff --git a/src/image-viewer/index.ts b/src/image-viewer/index.ts
@@ -1,7 +1,8 @@
 import Component, { IComponentOptions } from '../share/Component'
-import { exportCjs, drag, eventPage } from '../share/util'
+import { exportCjs, eventPage } from '../share/util'
 import ResizeSensor from 'licia/ResizeSensor'
 import $ from 'licia/$'
+import pointerEvent from 'licia/pointerEvent'
 import raf from 'licia/raf'
 import loadImg from 'licia/loadImg'
 import isHidden from 'licia/isHidden'
@@ -198,8 +199,8 @@ export default class ImageViewer extends Component<IOptions> {
     this.startX = eventPage('x', e)
     this.startY = eventPage('y', e)
     this.$image.rmClass(this.c('image-transition'))
-    this.$container.on(drag('move'), this.onMove)
-    $document.on(drag('end'), this.onMoveEnd)
+    this.$container.on(pointerEvent('move'), this.onMove)
+    $document.on(pointerEvent('up'), this.onMoveEnd)
   }
   private onMove = (e: any) => {
     const { imageData } = this
@@ -224,8 +225,8 @@ export default class ImageViewer extends Component<IOptions> {
     this.render()
 
     this.$image.addClass(this.c('image-transition'))
-    this.$container.off(drag('move'), this.onMove)
-    $document.off(drag('end'), this.onMoveEnd)
+    this.$container.off(pointerEvent('move'), this.onMove)
+    $document.off(pointerEvent('up'), this.onMoveEnd)
   }
   private setImage(image: string) {
     loadImg(image, (err) => {
@@ -245,7 +246,7 @@ export default class ImageViewer extends Component<IOptions> {
     this.resizeSensor.addListener(debounce(this.reset, 20))
 
     this.$container
-      .on(drag('start'), this.onMoveStart)
+      .on(pointerEvent('down'), this.onMoveStart)
       .on('wheel', this.onWheel)
 
     this.on('optionChange', (name, val) => {

diff --git a/src/keyboard/index.ts b/src/keyboard/index.ts
@@ -1,6 +1,7 @@
 import Component from '../share/Component'
 import stripIndent from 'licia/stripIndent'
-import { drag } from '../share/util'
+import { exportCjs } from '../share/util'
+import pointerEvent from 'licia/pointerEvent'
 import $ from 'licia/$'
 import toNum from 'licia/toNum'
 import types from 'licia/types'
@@ -120,50 +121,54 @@ export default class Keyboard extends Component {
   private bindEvent() {
     const { c, $container } = this
     const self = this
-    this.find('.row').on(drag('start'), 'li', function (this: HTMLLIElement) {
-      const $li = $(this)
-      if (!$li.data('key')) {
-        return
-      }
-      const key = toNum($li.data('key'))
-      let input = self.input
-      switch (key) {
-        case 8: {
-          if (input.length > 0) {
-            input = input.slice(0, input.length - 1)
-          }
-          break
+    this.find('.row').on(
+      pointerEvent('down'),
+      'li',
+      function (this: HTMLLIElement) {
+        const $li = $(this)
+        if (!$li.data('key')) {
+          return
         }
-        case 16: {
-          const isPressed = $li.hasClass(c('pressed'))
-          $container.find('li[data-key="16"]').rmClass(c('pressed'))
-          self.shift = !isPressed
-          if (isPressed) {
-            $li.rmClass(c('pressed'))
-          } else {
-            $li.addClass(c('pressed'))
+        const key = toNum($li.data('key'))
+        let input = self.input
+        switch (key) {
+          case 8: {
+            if (input.length > 0) {
+              input = input.slice(0, input.length - 1)
+            }
+            break
+          }
+          case 16: {
+            const isPressed = $li.hasClass(c('pressed'))
+            $container.find('li[data-key="16"]').rmClass(c('pressed'))
+            self.shift = !isPressed
+            if (isPressed) {
+              $li.rmClass(c('pressed'))
+            } else {
+              $li.addClass(c('pressed'))
+            }
+            break
           }
-          break
+          case 17:
+          case 18:
+          case 37:
+          case 38:
+          case 39:
+          case 40:
+          case 91:
+          case 93:
+            break
+          case 20:
+            self.capsLock = !self.capsLock
+            $li.toggleClass(c('active'))
+            break
+          default:
+            input += keyCodeToChar(key, self.capsLock, self.shift)
         }
-        case 17:
-        case 18:
-        case 37:
-        case 38:
-        case 39:
-        case 40:
-        case 91:
-        case 93:
-          break
-        case 20:
-          self.capsLock = !self.capsLock
-          $li.toggleClass(c('active'))
-          break
-        default:
-          input += keyCodeToChar(key, self.capsLock, self.shift)
+        self.input = input
+        self.emit('change', self.input)
       }
-      self.input = input
-      self.emit('change', self.input)
-    })
+    )
   }
 }
 
@@ -220,5 +225,6 @@ function keyCodeToChar(key: number, capsLock = false, shift = false) {
   return String.fromCharCode(key)
 }
 
-module.exports = Keyboard
-module.exports.default = Keyboard
+if (typeof module !== 'undefined') {
+  exportCjs(module, Keyboard)
+}
diff --git a/src/music-player/index.ts b/src/music-player/index.ts
@@ -2,8 +2,9 @@ import $ from 'licia/$'
 import stripIndent from 'licia/stripIndent'
 import openFile from 'licia/openFile'
 import createUrl from 'licia/createUrl'
-import { drag, eventPage } from '../share/util'
+import { exportCjs, eventPage } from '../share/util'
 import each from 'licia/each'
+import pointerEvent from 'licia/pointerEvent'
 import { splitName } from './util'
 import durationFormat from 'licia/durationFormat'
 import convertBin from 'licia/convertBin'
@@ -344,30 +345,30 @@ export default class MusicPlayer extends Component<IOptions> {
   }
   private onBarDragStart = () => {
     this.audioTimeUpdate = false
-    $document.on(drag('move'), this.onBarDragMove)
-    $document.on(drag('end'), this.onBarDragEnd)
+    $document.on(pointerEvent('move'), this.onBarDragMove)
+    $document.on(pointerEvent('up'), this.onBarDragEnd)
   }
   private onBarDragMove = (e: any) => {
     this.updateTimeUi(this.getBarClickTime(e))
   }
   private onBarDragEnd = (e: any) => {
-    $document.off(drag('move'), this.onBarDragMove)
-    $document.off(drag('end'), this.onBarDragEnd)
+    $document.off(pointerEvent('move'), this.onBarDragMove)
+    $document.off(pointerEvent('up'), this.onBarDragEnd)
     this.audioTimeUpdate = true
     this.onBarClick(e)
   }
   private onVolumeDragStart = () => {
     this.$volume.addClass(this.c('active'))
-    $document.on(drag('move'), this.onVolumeDragMove)
-    $document.on(drag('end'), this.onVolumeDragEnd)
+    $document.on(pointerEvent('move'), this.onVolumeDragMove)
+    $document.on(pointerEvent('up'), this.onVolumeDragEnd)
   }
   private onVolumeDragMove = (e: any) => {
     this.onVolumeClick(e)
   }
   private onVolumeDragEnd = (e: any) => {
     this.$volume.rmClass(this.c('active'))
-    $document.off(drag('move'), this.onVolumeDragMove)
-    $document.off(drag('end'), this.onVolumeDragEnd)
+    $document.off(pointerEvent('move'), this.onVolumeDragMove)
+    $document.off(pointerEvent('up'), this.onVolumeDragEnd)
     this.onVolumeClick(e)
   }
   private bindEvent() {
@@ -379,9 +380,9 @@ export default class MusicPlayer extends Component<IOptions> {
       .on('click', c('.loop'), this.onLoopClick)
       .on('click', c('.shuffle'), this.toggleShuffle)
       .on('click', c('.controller-left'), this.onBarClick)
-      .on(drag('start'), c('.controller-left'), this.onBarDragStart)
+      .on(pointerEvent('down'), c('.controller-left'), this.onBarDragStart)
       .on('click', c('.volume-controller'), this.onVolumeClick)
-      .on(drag('start'), c('.volume-controller'), this.onVolumeDragStart)
+      .on(pointerEvent('down'), c('.volume-controller'), this.onVolumeDragStart)
 
     this.$list.on('click', c('.list-item'), this.onListItemClick)
 
@@ -535,5 +536,6 @@ export default class MusicPlayer extends Component<IOptions> {
   }
 }
 
-module.exports = MusicPlayer
-module.exports.default = MusicPlayer
+if (typeof module !== 'undefined') {
+  exportCjs(module, MusicPlayer)
+}
diff --git a/src/painter/icon/icon.json b/src/painter/icon/icon.json
@@ -1,4 +1 @@
-[
-  "../../share/icon/zoom-out.svg",
-  "../../share/icon/zoom-in.svg"
-]
+["../../share/icon/zoom-out.svg", "../../share/icon/zoom-in.svg"]