You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
715 lines
20 KiB
715 lines
20 KiB
import touchtrack from './touchtrack'
|
|
|
|
import {
|
|
Decline,
|
|
Friction,
|
|
STD
|
|
} from './utils'
|
|
|
|
import {
|
|
emitter
|
|
} from '../../mixins'
|
|
|
|
let requesting = false
|
|
|
|
function requestAnimationFrame (callback) {
|
|
return setTimeout(callback, 16)
|
|
}
|
|
|
|
function cancelAnimationFrame (id) {
|
|
clearTimeout(id)
|
|
}
|
|
|
|
function _requestAnimationFrame (e) {
|
|
if (!requesting) {
|
|
requesting = true
|
|
requestAnimationFrame(function () {
|
|
e()
|
|
requesting = false
|
|
})
|
|
}
|
|
}
|
|
|
|
function v (a, b) {
|
|
return +((1000 * a - 1000 * b) / 1000).toFixed(1)
|
|
}
|
|
|
|
function g (e, t, n) {
|
|
const i = function (e) {
|
|
if (e && e.id) {
|
|
cancelAnimationFrame(e.id)
|
|
}
|
|
if (e) {
|
|
e.cancelled = true
|
|
}
|
|
}
|
|
const r = {
|
|
id: 0,
|
|
cancelled: false
|
|
}
|
|
function fn (n, i, r, o) {
|
|
if (!n || !n.cancelled) {
|
|
r(i)
|
|
const a = e.done()
|
|
if (!a) {
|
|
if (!n.cancelled) {
|
|
(n.id = requestAnimationFrame(fn.bind(null, n, i, r, o)))
|
|
}
|
|
}
|
|
if (a && o) {
|
|
o(i)
|
|
}
|
|
}
|
|
}
|
|
fn(r, e, t, n)
|
|
return {
|
|
cancel: i.bind(null, r),
|
|
model: e
|
|
}
|
|
}
|
|
|
|
function getMovableView (weex) {
|
|
const dom = weex.requireModule('dom')
|
|
const animation = weex.requireModule('animation')
|
|
|
|
return {
|
|
name: 'MovableView',
|
|
mixins: [touchtrack, emitter],
|
|
props: {
|
|
direction: {
|
|
type: String,
|
|
default: 'none'
|
|
},
|
|
inertia: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
outOfBounds: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
x: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
y: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
damping: {
|
|
type: [Number, String],
|
|
default: 20
|
|
},
|
|
friction: {
|
|
type: [Number, String],
|
|
default: 2
|
|
},
|
|
disabled: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
scale: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
scaleMin: {
|
|
type: [Number, String],
|
|
default: 0.5
|
|
},
|
|
scaleMax: {
|
|
type: [Number, String],
|
|
default: 10
|
|
},
|
|
scaleValue: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
animation: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
xSync: this._getPx(this.x),
|
|
ySync: this._getPx(this.y),
|
|
scaleValueSync: this._getScaleNumber(this.scaleValue),
|
|
width: 0,
|
|
height: 0,
|
|
minX: 0,
|
|
minY: 0,
|
|
maxX: 0,
|
|
maxY: 0
|
|
}
|
|
},
|
|
computed: {
|
|
dampingNumber () {
|
|
const val = Number(this.damping)
|
|
return isNaN(val) ? 20 : val
|
|
},
|
|
frictionNumber () {
|
|
const val = Number(this.friction)
|
|
return isNaN(val) || val <= 0 ? 2 : val
|
|
},
|
|
scaleMinNumber () {
|
|
const val = Number(this.scaleMin)
|
|
return isNaN(val) ? 0.5 : val
|
|
},
|
|
scaleMaxNumber () {
|
|
const val = Number(this.scaleMax)
|
|
return isNaN(val) ? 10 : val
|
|
},
|
|
xMove () {
|
|
return this.direction === 'all' || this.direction === 'horizontal'
|
|
},
|
|
yMove () {
|
|
return this.direction === 'all' || this.direction === 'vertical'
|
|
}
|
|
},
|
|
watch: {
|
|
x (val) {
|
|
this.xSync = this._getPx(val)
|
|
},
|
|
xSync (val) {
|
|
this._setX(val)
|
|
},
|
|
y (val) {
|
|
this.ySync = this._getPx(val)
|
|
},
|
|
ySync (val) {
|
|
this._setY(val)
|
|
},
|
|
scaleValue (val) {
|
|
this._setScaleValue(this._getScaleNumber(val))
|
|
},
|
|
scaleValueSync (val) {
|
|
this._setScaleValue(val)
|
|
},
|
|
scaleMinNumber () {
|
|
this._setScaleMinOrMax()
|
|
},
|
|
scaleMaxNumber () {
|
|
this._setScaleMinOrMax()
|
|
}
|
|
},
|
|
created: function () {
|
|
this._offset = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
this._scaleOffset = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
this._translateX = 0
|
|
this._translateY = 0
|
|
this._scale = 1
|
|
this._oldScale = 1
|
|
|
|
this._STD = new STD(1, 9 * Math.pow(this.dampingNumber, 2) / 40, this.dampingNumber)
|
|
this._friction = new Friction(1, this.frictionNumber)
|
|
this._declineX = new Decline()
|
|
this._declineY = new Decline()
|
|
this.__touchInfo = {
|
|
historyX: [0, 0],
|
|
historyY: [0, 0],
|
|
historyT: [0, 0]
|
|
}
|
|
this._rect = {
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.touchtrack('_onTrack')
|
|
setTimeout(() => {
|
|
this._updateRect().then(() => {
|
|
this.setParent()
|
|
})
|
|
}, 100)
|
|
this._friction.reconfigure(1, this.frictionNumber)
|
|
this._STD.reconfigure(1, 9 * Math.pow(this.dampingNumber, 2) / 40, this.dampingNumber)
|
|
},
|
|
methods: {
|
|
_getPx (val) {
|
|
// if (/\d+[ur]px$/i.test(val)) {
|
|
// return uni.upx2px(parseFloat(val))
|
|
// }
|
|
return Number(val) || 0
|
|
},
|
|
_getScaleNumber (val) {
|
|
val = Number(val)
|
|
return isNaN(val) ? 1 : val
|
|
},
|
|
_setX: function (val) {
|
|
if (this.xMove) {
|
|
if (val + this._scaleOffset.x === this._translateX) {
|
|
return this._translateX
|
|
}
|
|
else {
|
|
if (this._SFA) {
|
|
this._SFA.cancel()
|
|
}
|
|
this._animationTo(val + this._scaleOffset.x, this.ySync + this._scaleOffset.y, this._scale)
|
|
}
|
|
}
|
|
return val
|
|
},
|
|
_setY: function (val) {
|
|
if (this.yMove) {
|
|
if (val + this._scaleOffset.y === this._translateY) {
|
|
return this._translateY
|
|
}
|
|
else {
|
|
if (this._SFA) {
|
|
this._SFA.cancel()
|
|
}
|
|
this._animationTo(this.xSync + this._scaleOffset.x, val + this._scaleOffset.y, this._scale)
|
|
}
|
|
}
|
|
return val
|
|
},
|
|
_setScaleMinOrMax: function () {
|
|
if (!this.scale) {
|
|
return false
|
|
}
|
|
this._updateScale(this._scale, true)
|
|
this._updateOldScale(this._scale)
|
|
},
|
|
_setScaleValue: function (scale) {
|
|
if (!this.scale) {
|
|
return false
|
|
}
|
|
scale = this._adjustScale(scale)
|
|
this._updateScale(scale, true)
|
|
this._updateOldScale(scale)
|
|
return scale
|
|
},
|
|
__handleTouchStart: function () {
|
|
if (!this._isScaling) {
|
|
if (!this.disabled) {
|
|
if (this._FA) {
|
|
this._FA.cancel()
|
|
}
|
|
if (this._SFA) {
|
|
this._SFA.cancel()
|
|
}
|
|
this.__touchInfo.historyX = [0, 0]
|
|
this.__touchInfo.historyY = [0, 0]
|
|
this.__touchInfo.historyT = [0, 0]
|
|
if (this.xMove) {
|
|
this.__baseX = this._translateX
|
|
}
|
|
if (this.yMove) {
|
|
this.__baseY = this._translateY
|
|
}
|
|
this._checkCanMove = null
|
|
this._firstMoveDirection = null
|
|
this._isTouching = true
|
|
}
|
|
}
|
|
},
|
|
__handleTouchMove: function (event) {
|
|
const self = this
|
|
if (!this._isScaling && !this.disabled && this._isTouching) {
|
|
let x = this._translateX
|
|
let y = this._translateY
|
|
if (this._firstMoveDirection === null) {
|
|
this._firstMoveDirection = Math.abs(event.detail.dx / event.detail.dy) > 1 ? 'htouchmove' : 'vtouchmove'
|
|
}
|
|
if (this.xMove) {
|
|
x = event.detail.dx + this.__baseX
|
|
this.__touchInfo.historyX.shift()
|
|
this.__touchInfo.historyX.push(x)
|
|
if (!this.yMove) {
|
|
if (!null !== this._checkCanMove) {
|
|
if (Math.abs(event.detail.dx / event.detail.dy) > 1) {
|
|
this._checkCanMove = false
|
|
}
|
|
else {
|
|
this._checkCanMove = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (this.yMove) {
|
|
y = event.detail.dy + this.__baseY
|
|
this.__touchInfo.historyY.shift()
|
|
this.__touchInfo.historyY.push(y)
|
|
if (!this.xMove) {
|
|
if (!null !== this._checkCanMove) {
|
|
if (Math.abs(event.detail.dy / event.detail.dx) > 1) {
|
|
this._checkCanMove = false
|
|
}
|
|
else {
|
|
this._checkCanMove = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.__touchInfo.historyT.shift()
|
|
this.__touchInfo.historyT.push(event.detail.timeStamp)
|
|
|
|
if (!this._checkCanMove) {
|
|
// event.preventDefault()
|
|
let source = 'touch'
|
|
if (x < this.minX) {
|
|
if (this.outOfBounds) {
|
|
source = 'touch-out-of-bounds'
|
|
x = this.minX - this._declineX.x(this.minX - x)
|
|
}
|
|
else {
|
|
x = this.minX
|
|
}
|
|
}
|
|
else if (x > this.maxX) {
|
|
if (this.outOfBounds) {
|
|
source = 'touch-out-of-bounds'
|
|
x = this.maxX + this._declineX.x(x - this.maxX)
|
|
}
|
|
else {
|
|
x = this.maxX
|
|
}
|
|
}
|
|
if (y < this.minY) {
|
|
if (this.outOfBounds) {
|
|
source = 'touch-out-of-bounds'
|
|
y = this.minY - this._declineY.x(this.minY - y)
|
|
}
|
|
else {
|
|
y = this.minY
|
|
}
|
|
}
|
|
else {
|
|
if (y > this.maxY) {
|
|
if (this.outOfBounds) {
|
|
source = 'touch-out-of-bounds'
|
|
y = this.maxY + this._declineY.x(y - this.maxY)
|
|
}
|
|
else {
|
|
y = this.maxY
|
|
}
|
|
}
|
|
}
|
|
_requestAnimationFrame(function () {
|
|
self._setTransform(x, y, self._scale, source)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
__handleTouchEnd: function () {
|
|
const self = this
|
|
if (!this._isScaling && !this.disabled && this._isTouching) {
|
|
this._isTouching = false
|
|
if (!this._checkCanMove && !this._revise('out-of-bounds') && this.inertia) {
|
|
const xv = 1000 * (this.__touchInfo.historyX[1] - this.__touchInfo.historyX[0]) / (this.__touchInfo.historyT[1] - this.__touchInfo.historyT[0])
|
|
const yv = 1000 * (this.__touchInfo.historyY[1] - this.__touchInfo.historyY[0]) / (this.__touchInfo.historyT[1] - this.__touchInfo.historyT[0])
|
|
this._friction.setV(xv, yv)
|
|
this._friction.setS(this._translateX, this._translateY)
|
|
const x0 = this._friction.delta().x
|
|
const y0 = this._friction.delta().y
|
|
let x = x0 + this._translateX
|
|
let y = y0 + this._translateY
|
|
if (x < this.minX) {
|
|
x = this.minX
|
|
y = this._translateY + (this.minX - this._translateX) * y0 / x0
|
|
}
|
|
else {
|
|
if (x > this.maxX) {
|
|
x = this.maxX
|
|
y = this._translateY + (this.maxX - this._translateX) * y0 / x0
|
|
}
|
|
}
|
|
if (y < this.minY) {
|
|
y = this.minY
|
|
x = this._translateX + (this.minY - this._translateY) * x0 / y0
|
|
}
|
|
else {
|
|
if (y > this.maxY) {
|
|
y = this.maxY
|
|
x = this._translateX + (this.maxY - this._translateY) * x0 / y0
|
|
}
|
|
}
|
|
this._friction.setEnd(x, y)
|
|
this._FA = g(this._friction, function () {
|
|
const t = self._friction.s()
|
|
const x = t.x
|
|
const y = t.y
|
|
self._setTransform(x, y, self._scale, 'friction')
|
|
}, function () {
|
|
self._FA.cancel()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
_onTrack: function (event) {
|
|
switch (event.detail.state) {
|
|
case 'start':
|
|
this.__handleTouchStart()
|
|
break
|
|
case 'move':
|
|
this.__handleTouchMove(event)
|
|
break
|
|
case 'end':
|
|
this.__handleTouchEnd()
|
|
}
|
|
},
|
|
_getLimitXY: function (x, y) {
|
|
let outOfBounds = false
|
|
if (x > this.maxX) {
|
|
x = this.maxX
|
|
outOfBounds = true
|
|
}
|
|
else {
|
|
if (x < this.minX) {
|
|
x = this.minX
|
|
outOfBounds = true
|
|
}
|
|
}
|
|
if (y > this.maxY) {
|
|
y = this.maxY
|
|
outOfBounds = true
|
|
}
|
|
else {
|
|
if (y < this.minY) {
|
|
y = this.minY
|
|
outOfBounds = true
|
|
}
|
|
}
|
|
return {
|
|
x,
|
|
y,
|
|
outOfBounds
|
|
}
|
|
},
|
|
setParent: function () {
|
|
if (!this.$parent.__isMounted) {
|
|
return
|
|
}
|
|
if (this._FA) {
|
|
this._FA.cancel()
|
|
}
|
|
if (this._SFA) {
|
|
this._SFA.cancel()
|
|
}
|
|
const scale = this.scale ? this.scaleValueSync : 1
|
|
this._updateOffset()
|
|
this._updateWH(scale)
|
|
this._updateBoundary()
|
|
this._translateX = this.xSync + this._scaleOffset.x
|
|
this._translateY = this.ySync + this._scaleOffset.y
|
|
const limitXY = this._getLimitXY(this._translateX, this._translateY)
|
|
const x = limitXY.x
|
|
const y = limitXY.y
|
|
this._setTransform(x, y, scale, '', true)
|
|
this._updateOldScale(scale)
|
|
},
|
|
_updateOffset: function () {
|
|
this._offset.x = this._rect.left - this.$parent.left
|
|
this._offset.y = this._rect.top - this.$parent.top
|
|
},
|
|
_updateWH: function (scale) {
|
|
scale = scale || this._scale
|
|
scale = this._adjustScale(scale)
|
|
const rect = this._rect
|
|
this.height = rect.height / this._scale
|
|
this.width = rect.width / this._scale
|
|
const height = this.height * scale
|
|
const width = this.width * scale
|
|
this._scaleOffset.x = (width - this.width) / 2
|
|
this._scaleOffset.y = (height - this.height) / 2
|
|
},
|
|
_updateBoundary: function () {
|
|
const x = 0 - this._offset.x + this._scaleOffset.x
|
|
const width = this.$parent.width - this.width - this._offset.x - this._scaleOffset.x
|
|
this.minX = Math.min(x, width)
|
|
this.maxX = Math.max(x, width)
|
|
const y = 0 - this._offset.y + this._scaleOffset.y
|
|
const height = this.$parent.height - this.height - this._offset.y - this._scaleOffset.y
|
|
this.minY = Math.min(y, height)
|
|
this.maxY = Math.max(y, height)
|
|
},
|
|
_beginScale: function () {
|
|
this._isScaling = true
|
|
},
|
|
_endScale: function () {
|
|
this._isScaling = false
|
|
this._updateOldScale(this._scale)
|
|
},
|
|
_setScale: function (scale) {
|
|
if (this.scale) {
|
|
scale = this._adjustScale(scale)
|
|
scale = this._oldScale * scale
|
|
this._beginScale()
|
|
this._updateScale(scale)
|
|
}
|
|
},
|
|
_updateScale: function (scale, animat) {
|
|
const self = this
|
|
if (this.scale) {
|
|
scale = this._adjustScale(scale)
|
|
this._updateWH(scale)
|
|
this._updateBoundary()
|
|
const limitXY = this._getLimitXY(this._translateX, this._translateY)
|
|
const x = limitXY.x
|
|
const y = limitXY.y
|
|
if (animat) {
|
|
this._animationTo(x, y, scale, '', true, true)
|
|
}
|
|
else {
|
|
_requestAnimationFrame(function () {
|
|
self._setTransform(x, y, scale, '', true, true)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
_updateOldScale: function (scale) {
|
|
this._oldScale = scale
|
|
},
|
|
_adjustScale: function (scale) {
|
|
scale = Math.max(0.5, this.scaleMinNumber, scale)
|
|
scale = Math.min(10, this.scaleMaxNumber, scale)
|
|
return scale
|
|
},
|
|
_animationTo: function (x, y, scale, source, r, o) {
|
|
const self = this
|
|
if (this._FA) {
|
|
this._FA.cancel()
|
|
}
|
|
if (this._SFA) {
|
|
this._SFA.cancel()
|
|
}
|
|
if (!this.xMove) {
|
|
x = this._translateX
|
|
}
|
|
if (!this.yMove) {
|
|
y = this._translateY
|
|
}
|
|
if (!this.scale) {
|
|
scale = this._scale
|
|
}
|
|
const limitXY = this._getLimitXY(x, y)
|
|
x = limitXY.x
|
|
y = limitXY.y
|
|
if (!this.animation) {
|
|
this._setTransform(x, y, scale, source, r, o)
|
|
return
|
|
}
|
|
this._STD._springX._solution = null
|
|
this._STD._springY._solution = null
|
|
this._STD._springScale._solution = null
|
|
this._STD._springX._endPosition = this._translateX
|
|
this._STD._springY._endPosition = this._translateY
|
|
this._STD._springScale._endPosition = this._scale
|
|
this._STD.setEnd(x, y, scale, 1)
|
|
this._SFA = g(this._STD, function () {
|
|
const data = self._STD.x()
|
|
const x = data.x
|
|
const y = data.y
|
|
const scale = data.scale
|
|
self._setTransform(x, y, scale, source, r, o)
|
|
}, function () {
|
|
self._SFA.cancel()
|
|
})
|
|
},
|
|
_revise: function (source) {
|
|
const limitXY = this._getLimitXY(this._translateX, this._translateY)
|
|
const x = limitXY.x
|
|
const y = limitXY.y
|
|
const outOfBounds = limitXY.outOfBounds
|
|
if (outOfBounds) {
|
|
this._animationTo(x, y, this._scale, source)
|
|
}
|
|
return outOfBounds
|
|
},
|
|
_setTransform: function (x, y, scale, source = '', r, o) {
|
|
if (!(x !== null && x.toString() !== 'NaN' && typeof x === 'number')) {
|
|
x = this._translateX || 0
|
|
}
|
|
if (!(y !== null && y.toString() !== 'NaN' && typeof y === 'number')) {
|
|
y = this._translateY || 0
|
|
}
|
|
x = Number(x.toFixed(1))
|
|
y = Number(y.toFixed(1))
|
|
scale = Number(scale.toFixed(1))
|
|
if (!(this._translateX === x && this._translateY === y)) {
|
|
if (!r) {
|
|
this.$trigger('change', {
|
|
x: v(x, this._scaleOffset.x),
|
|
y: v(y, this._scaleOffset.y),
|
|
source: source
|
|
})
|
|
}
|
|
}
|
|
if (!this.scale) {
|
|
scale = this._scale
|
|
}
|
|
scale = this._adjustScale(scale)
|
|
scale = +scale.toFixed(3)
|
|
if (o && scale !== this._scale) {
|
|
this.$trigger('scale', {
|
|
x: x,
|
|
y: y,
|
|
scale: scale
|
|
})
|
|
}
|
|
const transform = `translate(${x}px, ${y}px) scale(${scale})`
|
|
animation.transition(this.$refs.el, {
|
|
styles: {
|
|
transform
|
|
},
|
|
duration: 0,
|
|
delay: 0
|
|
})
|
|
this._translateX = x
|
|
this._translateY = y
|
|
this._scale = scale
|
|
},
|
|
_touchstart () {
|
|
this.$parent.touchItem = this
|
|
},
|
|
_getComponentSize (el) {
|
|
return new Promise((resolve) => {
|
|
dom.getComponentRect(el, ({ size }) => {
|
|
resolve(size)
|
|
})
|
|
})
|
|
},
|
|
_updateRect () {
|
|
return this._getComponentSize(this.$refs.el).then(rect => {
|
|
this._rect = rect
|
|
})
|
|
}
|
|
},
|
|
render (createElement) {
|
|
const events = {
|
|
touchstart: this._touchstart
|
|
// touchend: this.touchend,
|
|
// touchend: this.touchend
|
|
}
|
|
return createElement('div', this._g({
|
|
ref: 'el',
|
|
on: events,
|
|
staticClass: ['uni-movable-view'],
|
|
staticStyle: {
|
|
transformOrigin: 'center'
|
|
}
|
|
}, this.$listeners), this.$slots.default, 2)
|
|
},
|
|
style: {
|
|
'uni-movable-view': {
|
|
position: 'absolute',
|
|
top: '0px',
|
|
left: '0px',
|
|
width: '10px',
|
|
height: '10px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function init (Vue, weex) {
|
|
Vue.component('movable-view', getMovableView(weex))
|
|
}
|
|
|