本文整理汇总了TypeScript中@interactjs/utils.extend函数的典型用法代码示例。如果您正苦于以下问题:TypeScript extend函数的具体用法?TypeScript extend怎么用?TypeScript extend使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了extend函数的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: start
function start ({ iEvent, interaction }: Interact.SignalArg) {
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) {
return
}
const startRect = interaction.rect
const resizeOptions = interaction.interactable.options.resize
/*
* When using the `resizable.square` or `resizable.preserveAspectRatio` options, resizing from one edge
* will affect another. E.g. with `resizable.square`, resizing to make the right edge larger will make
* the bottom edge larger by the same amount. We call these 'linked' edges. Any linked edges will depend
* on the active edges and the edge being interacted with.
*/
if (resizeOptions.square || resizeOptions.preserveAspectRatio) {
const linkedEdges = utils.extend({}, interaction.prepared.edges)
linkedEdges.top = linkedEdges.top || (linkedEdges.left && !linkedEdges.bottom)
linkedEdges.left = linkedEdges.left || (linkedEdges.top && !linkedEdges.right)
linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right && !linkedEdges.top)
linkedEdges.right = linkedEdges.right || (linkedEdges.bottom && !linkedEdges.left)
interaction.prepared._linkedEdges = linkedEdges
}
else {
interaction.prepared._linkedEdges = null
}
// if using `resizable.preserveAspectRatio` option, record aspect ratio at the start of the resize
if (resizeOptions.preserveAspectRatio) {
interaction.resizeStartAspectRatio = startRect.width / startRect.height
}
interaction.resizeRects = {
start : startRect,
current : utils.extend({}, startRect),
inverted : utils.extend({}, startRect),
previous : utils.extend({}, startRect),
delta : {
left: 0,
right : 0,
width : 0,
top : 0,
bottom: 0,
height: 0,
},
}
iEvent.rect = interaction.resizeRects.inverted
; (iEvent as ResizeEvent).deltaRect = interaction.resizeRects.delta
}
开发者ID:taye,项目名称:interact.js,代码行数:51,代码来源:resize.ts
示例2: test
test('DropEvent constructor', (t) => {
const interaction: any = { dropState: {} }
const dragEvent = Object.freeze({
interactable,
_interaction: interaction,
target: dragElement,
timeStamp: 10,
}) as InteractEvent
utils.extend(interaction.dropState, {
activeDrops: [
{ dropzone: dz1, element: el1 },
{ dropzone: dz2, element: el2 },
],
cur : { dropzone: dz1, element: el1 },
prev: { dropzone: dz2, element: el2 },
events: {},
})
const dropmove = new DropEvent(interaction.dropState, dragEvent, 'dropmove')
t.equal(dropmove.target, el1, 'dropmove uses dropState.cur.element')
t.equal(dropmove.dropzone, dz1, 'dropmove uses dropState.cur.dropzone')
t.equal(dropmove.relatedTarget, dragElement)
const dragleave = new DropEvent(interaction.dropState, dragEvent, 'dragleave')
t.equal(dragleave.target, el2, 'dropmove uses dropState.prev.element')
t.equal(dragleave.dropzone, dz2, 'dropmove uses dropState.prev.dropzone')
t.equal(dragleave.relatedTarget, dragElement)
t.end()
})
开发者ID:taye,项目名称:interact.js,代码行数:33,代码来源:DropEvent.spec.ts
示例3: resetCoords
function resetCoords () {
pointerUtils.copyCoords(iEvent, eventCoords)
extend(iEvent.delta, eventCoords.delta)
for (const prop in coords) {
pointerUtils.copyCoords(interaction.coords[prop], coords[prop])
}
}
开发者ID:taye,项目名称:interact.js,代码行数:8,代码来源:drag.spec.ts
示例4: start
function start (arg: Interact.SignalArg) {
const { interaction, interactable, element, rect, state, startOffset } = arg
const { options } = state
const offsets = []
const origin = options.offsetWithOrigin
? getOrigin(arg)
: { x: 0, y: 0 }
let snapOffset
if (options.offset === 'startCoords') {
snapOffset = {
x: interaction.coords.start.page.x,
y: interaction.coords.start.page.y,
}
}
else {
const offsetRect = utils.rect.resolveRectLike(options.offset, interactable, element, [interaction])
snapOffset = utils.rect.rectToXY(offsetRect) || { x: 0, y: 0 }
snapOffset.x += origin.x
snapOffset.y += origin.y
}
const relativePoints = options.relativePoints || []
if (rect && options.relativePoints && options.relativePoints.length) {
for (let index = 0; index < relativePoints.length; index++) {
const relativePoint = relativePoints[index]
offsets.push({
index,
relativePoint,
x: startOffset.left - (rect.width * relativePoint.x) + snapOffset.x,
y: startOffset.top - (rect.height * relativePoint.y) + snapOffset.y,
})
}
}
else {
offsets.push(utils.extend({
index: 0,
relativePoint: null,
}, snapOffset))
}
state.offsets = offsets
}
开发者ID:taye,项目名称:interact.js,代码行数:47,代码来源:pointer.ts
示例5: startReflow
function startReflow (scope: Scope, interactable: Interactable, element: Element, action: ActionProps, event: any) {
const interaction = scope.interactions.new({ pointerType: 'reflow' })
const signalArg = {
interaction,
event,
pointer: event,
eventTarget: element,
phase: EventPhase.Reflow,
}
interaction.interactable = interactable
interaction.element = element
interaction.prepared = extend({}, action)
interaction.prevEvent = event
interaction.updatePointer(event, event, element, true)
interaction._doPhase(signalArg)
const reflowPromise = (win.window as unknown as any).Promise
? new (win.window as unknown as any).Promise((resolve: any) => {
interaction._reflowResolve = resolve
})
: null
interaction._reflowPromise = reflowPromise
interaction.start(action, interactable, element)
if (interaction._interacting) {
interaction.move(signalArg)
interaction.end(event)
}
else {
interaction.stop()
}
interaction.removePointer(event, event)
interaction.pointerIsDown = false
return reflowPromise
}
开发者ID:taye,项目名称:interact.js,代码行数:40,代码来源:index.ts
示例6: install
function install (scope: Interact.Scope) {
const {
interact,
interactions,
defaults,
} = scope
scope.usePlugin(InteractableMethods)
// set cursor style on mousedown
interactions.signals.on('down', ({ interaction, pointer, event, eventTarget }) => {
if (interaction.interacting()) { return }
const actionInfo = getActionInfo(interaction, pointer, event, eventTarget, scope)
prepare(interaction, actionInfo, scope)
})
// set cursor style on mousemove
interactions.signals.on('move', ({ interaction, pointer, event, eventTarget }) => {
if (interaction.pointerType !== 'mouse' ||
interaction.pointerIsDown ||
interaction.interacting()) { return }
const actionInfo = getActionInfo(interaction, pointer, event, eventTarget, scope)
prepare(interaction, actionInfo, scope)
})
interactions.signals.on('move', (arg) => {
const { interaction } = arg
if (!interaction.pointerIsDown ||
interaction.interacting() ||
!interaction.pointerWasMoved ||
!interaction.prepared.name) {
return
}
scope.autoStart.signals.fire('before-start', arg)
const { interactable } = interaction
if (interaction.prepared.name && interactable) {
// check manualStart and interaction limit
if (interactable.options[interaction.prepared.name].manualStart ||
!withinInteractionLimit(interactable, interaction.element, interaction.prepared, scope)) {
interaction.stop()
}
else {
interaction.start(interaction.prepared, interactable, interaction.element)
}
}
})
interactions.signals.on('stop', ({ interaction }) => {
const { interactable } = interaction
if (interactable && interactable.options.styleCursor) {
setCursor(interaction.element as HTMLElement, '', scope)
}
})
defaults.base.actionChecker = null
defaults.base.styleCursor = true
utils.extend(defaults.perAction, {
manualStart: false,
max: Infinity,
maxPerElement: 1,
allowFrom: null,
ignoreFrom: null,
// only allow left button by default
// see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#Return_value
mouseButtons: 1,
})
/**
* Returns or sets the maximum number of concurrent interactions allowed. By
* default only 1 interaction is allowed at a time (for backwards
* compatibility). To allow multiple interactions on the same Interactables and
* elements, you need to enable it in the draggable, resizable and gesturable
* `'max'` and `'maxPerElement'` options.
*
* @alias module:interact.maxInteractions
*
* @param {number} [newValue] Any number. newValue <= 0 means no interactions.
*/
interact.maxInteractions = (newValue) => maxInteractions(newValue, scope)
scope.autoStart = {
// Allow this many interactions to happen simultaneously
maxInteractions: Infinity,
withinInteractionLimit,
cursorElement: null,
signals: new utils.Signals(),
}
}
开发者ID:taye,项目名称:interact.js,代码行数:97,代码来源:base.ts
示例7: test
test('Interactable.gesturable method', (t) => {
const scope: Interact.Scope = helpers.mockScope()
scope.usePlugin(gesture)
const interaction = scope.interactions.new({})
const element = scope.document.body
const interactable = scope.interactables.new(element).gesturable(true)
const rect = Object.freeze({ top: 100, left: 200, bottom: 300, right: 400 })
const touches = [
utils.pointer.coordsToEvent(utils.pointer.newCoords()),
utils.pointer.coordsToEvent(utils.pointer.newCoords()),
].map(
(touch, index) => Object.assign(touch.coords, {
pointerId: index,
client: touch.page,
}) && touch
)
const events: Interact.GestureEvent[] = []
interactable.rectChecker(() => ({ ...rect }))
interactable.on('gesturestart gesturemove gestureend', (event: Interact.GestureEvent) => {
events.push(event)
})
// 0 --> 1
utils.extend(touches[0].page, { x: 0, y: 0 })
utils.extend(touches[1].page, { x: 100, y: 0 })
interaction.pointerDown(touches[0], touches[0], element)
t.notOk(
gesture.checker(touches[0], touches[0], interactable, element, interaction),
'not allowed with 1 pointer',
)
interaction.pointerDown(touches[1], touches[1], element)
t.ok(
gesture.checker(touches[1], touches[1], interactable, element, interaction),
'allowed with 2 pointers',
)
interaction.start({ name: ActionName.Gesture }, interactable, element)
t.deepEqual(
interaction.gesture,
{
angle: 0,
distance: 100,
scale: 1,
startAngle: 0,
startDistance: 100,
},
'start interaction properties are correct')
t.deepEqual(
getGestureProps(events[0]),
{
type: 'gesturestart',
angle: 0,
distance: 100,
scale: 1,
ds: 0,
da: 0,
},
'start event properties are correct')
// 0
// |
// v
// 1
utils.extend(touches[1].page, { x: 0, y: 50 })
interaction.pointerMove(touches[1], touches[1], element)
t.deepEqual(
interaction.gesture,
{
angle: 90,
distance: 50,
scale: 0.5,
startAngle: 0,
startDistance: 100,
},
'move interaction properties are correct')
t.deepEqual(
getGestureProps(events[1]),
{
type: 'gesturemove',
angle: 90,
distance: 50,
scale: 0.5,
ds: -0.5,
da: 90,
},
'move event properties are correct')
// 1 <-- 0
//.........这里部分代码省略.........
开发者ID:taye,项目名称:interact.js,代码行数:101,代码来源:gesture.spec.ts
示例8:
(modifierStatus) => utils.extend({}, modifierStatus)
开发者ID:taye,项目名称:interact.js,代码行数:1,代码来源:index.ts
示例9: getOptions
function release<T extends Interact.ActionName> (
{ interaction, event, noPreEnd }: Interact.SignalArg,
scope: Interact.Scope
) {
const state = interaction.inertia
if (!interaction.interacting() ||
(interaction.simulation && interaction.simulation.active) ||
noPreEnd) {
return null
}
const options = getOptions(interaction)
const now = interaction._now()
const { client: velocityClient } = interaction.coords.velocity
const pointerSpeed = utils.hypot(velocityClient.x, velocityClient.y)
let smoothEnd = false
let modifierResult: ReturnType<typeof modifiers.setAll>
// check if inertia should be started
const inertiaPossible = (options && options.enabled &&
interaction.prepared.name !== 'gesture' &&
event !== state.startEvent)
const inertia = (inertiaPossible &&
(now - interaction.coords.cur.timeStamp) < 50 &&
pointerSpeed > options.minSpeed &&
pointerSpeed > options.endSpeed)
const modifierArg = {
interaction,
pageCoords: utils.extend({}, interaction.coords.cur.page),
states: inertiaPossible && interaction.modifiers.states.map(
(modifierStatus) => utils.extend({}, modifierStatus)
),
preEnd: true,
prevCoords: undefined,
requireEndOnly: null,
}
// smoothEnd
if (inertiaPossible && !inertia) {
modifierArg.prevCoords = interaction.prevEvent.page
modifierArg.requireEndOnly = false
modifierResult = modifiers.setAll(modifierArg)
if (modifierResult.changed) {
smoothEnd = true
}
}
if (!(inertia || smoothEnd)) { return null }
utils.pointer.copyCoords(state.upCoords, interaction.coords.cur)
interaction.pointers[0].pointer = state.startEvent = new scope.InteractEvent(
interaction,
event,
// FIXME add proper typing Action.name
interaction.prepared.name as T,
EventPhase.InertiaStart,
interaction.element,
)
state.t0 = now
state.active = true
state.allowResume = options.allowResume
interaction.simulation = state
interaction.interactable.fire(state.startEvent)
if (inertia) {
state.vx0 = interaction.coords.velocity.client.x
state.vy0 = interaction.coords.velocity.client.y
state.v0 = pointerSpeed
calcInertia(interaction, state)
utils.extend(modifierArg.pageCoords, interaction.coords.cur.page)
modifierArg.pageCoords.x += state.xe
modifierArg.pageCoords.y += state.ye
modifierArg.prevCoords = undefined
modifierArg.requireEndOnly = true
modifierResult = modifiers.setAll(modifierArg)
state.modifiedXe += modifierResult.delta.x
state.modifiedYe += modifierResult.delta.y
state.timeout = raf.request(() => inertiaTick(interaction))
}
else {
state.smoothEnd = true
state.xe = modifierResult.delta.x
state.ye = modifierResult.delta.y
//.........这里部分代码省略.........
开发者ID:taye,项目名称:interact.js,代码行数:101,代码来源:index.ts
示例10: set
function set (arg: Interact.SignalArg) {
const { interaction, coords, state } = arg
const { options, offsets } = state
const origin = utils.getOriginXY(interaction.interactable, interaction.element, interaction.prepared.name)
const page = utils.extend({}, coords)
const targets = []
let target
if (!options.offsetWithOrigin) {
page.x -= origin.x
page.y -= origin.y
}
state.realX = page.x
state.realY = page.y
for (const offset of offsets) {
const relativeX = page.x - offset.x
const relativeY = page.y - offset.y
for (let index = 0, len = options.targets.length; index < len; index++) {
const snapTarget = options.targets[index]
if (utils.is.func(snapTarget)) {
target = snapTarget(relativeX, relativeY, interaction, offset, index)
}
else {
target = snapTarget
}
if (!target) { continue }
targets.push({
x: (utils.is.number(target.x) ? target.x : relativeX) + offset.x,
y: (utils.is.number(target.y) ? target.y : relativeY) + offset.y,
range: utils.is.number(target.range) ? target.range : options.range,
})
}
}
const closest = {
target: null,
inRange: false,
distance: 0,
range: 0,
dx: 0,
dy: 0,
}
for (let i = 0, len = targets.length; i < len; i++) {
target = targets[i]
const range = target.range
const dx = target.x - page.x
const dy = target.y - page.y
const distance = utils.hypot(dx, dy)
let inRange = distance <= range
// Infinite targets count as being out of range
// compared to non infinite ones that are in range
if (range === Infinity && closest.inRange && closest.range !== Infinity) {
inRange = false
}
if (!closest.target || (inRange
// is the closest target in range?
? (closest.inRange && range !== Infinity
// the pointer is relatively deeper in this target
? distance / range < closest.distance / closest.range
// this target has Infinite range and the closest doesn't
: (range === Infinity && closest.range !== Infinity) ||
// OR this target is closer that the previous closest
distance < closest.distance)
// The other is not in range and the pointer is closer to this target
: (!closest.inRange && distance < closest.distance))) {
closest.target = target
closest.distance = distance
closest.range = range
closest.inRange = inRange
closest.dx = dx
closest.dy = dy
state.range = range
}
}
if (closest.inRange) {
coords.x = closest.target.x
coords.y = closest.target.y
}
state.closest = closest
}
开发者ID:taye,项目名称:interact.js,代码行数:94,代码来源:pointer.ts
注:本文中的@interactjs/utils.extend函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论