Skip to content

Commit

Permalink
chore: use licia pointerEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@surunzi
surunzi committed Sep 20, 2024
1 parent ee57623 commit 0856323
Show file tree
Hide file tree
Showing 15 changed files with 163 additions and 164 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 10 additions & 8 deletions src/color-picker/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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) => {
Expand All @@ -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
Expand All @@ -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(
Expand Down Expand Up @@ -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)
}
13 changes: 7 additions & 6 deletions src/cropper/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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() {
Expand Down
13 changes: 7 additions & 6 deletions src/data-grid/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
13 changes: 7 additions & 6 deletions src/image-viewer/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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
Expand All @@ -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) => {
Expand All @@ -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) => {
Expand Down
92 changes: 49 additions & 43 deletions src/keyboard/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
})
)
}
}

Expand Down Expand Up @@ -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)
}
28 changes: 15 additions & 13 deletions src/music-player/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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() {
Expand All @@ -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)

Expand Down Expand Up @@ -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)
}
5 changes: 1 addition & 4 deletions src/painter/icon/icon.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
[
"../../share/icon/zoom-out.svg",
"../../share/icon/zoom-in.svg"
]
["../../share/icon/zoom-out.svg", "../../share/icon/zoom-in.svg"]
Loading

0 comments on commit 0856323

Please sign in to comment.