本文整理汇总了TypeScript中@interactjs/utils.dom类的典型用法代码示例。如果您正苦于以下问题:TypeScript dom类的具体用法?TypeScript dom怎么用?TypeScript dom使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了dom类的8个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: getActionInfo
function getActionInfo (interaction: Interact.Interaction, pointer: Interact.PointerType, event: Interact.PointerEventType, eventTarget: Element, scope: Interact.Scope) {
let matches = []
let matchElements = []
let element = eventTarget
function pushMatches (interactable) {
matches.push(interactable)
matchElements.push(element)
}
while (utils.is.element(element)) {
matches = []
matchElements = []
scope.interactables.forEachMatch(element, pushMatches)
const actionInfo = validateMatches(interaction, pointer, event, matches, matchElements, eventTarget, scope)
if (actionInfo.action &&
!actionInfo.interactable.options[actionInfo.action.name].manualStart) {
return actionInfo
}
element = utils.dom.parentNode(element)
}
return { action: null, interactable: null, element: null }
}
开发者ID:taye,项目名称:interact.js,代码行数:29,代码来源:base.ts
示例2: collectDrops
function collectDrops ({ interactables }, draggableElement) {
const drops = []
// collect all dropzones and their elements which qualify for a drop
for (const dropzone of interactables.list) {
if (!dropzone.options.drop.enabled) { continue }
const accept = dropzone.options.drop.accept
// test the draggable draggableElement against the dropzone's accept setting
if ((utils.is.element(accept) && accept !== draggableElement) ||
(utils.is.string(accept) &&
!utils.dom.matchesSelector(draggableElement, accept)) ||
(utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
continue
}
// query for new elements if necessary
const dropElements = utils.is.string(dropzone.target)
? dropzone._context.querySelectorAll(dropzone.target)
: utils.is.array(dropzone.target) ? dropzone.target : [dropzone.target]
for (const dropzoneElement of dropElements) {
if (dropzoneElement !== draggableElement) {
drops.push({
dropzone,
element: dropzoneElement,
})
}
}
}
return drops
}
开发者ID:taye,项目名称:interact.js,代码行数:34,代码来源:index.ts
示例3: getDrop
function getDrop ({ dropState, interactable: draggable, element: dragElement }: Partial<Interact.Interaction>, dragEvent, pointerEvent) {
const validDrops = []
// collect all dropzones and their elements which qualify for a drop
for (const { dropzone, element: dropzoneElement, rect } of dropState.activeDrops) {
validDrops.push(dropzone.dropCheck(dragEvent, pointerEvent, draggable, dragElement, dropzoneElement, rect)
? dropzoneElement
: null)
}
// get the most appropriate dropzone based on DOM depth and order
const dropIndex = utils.dom.indexOfDeepestElement(validDrops)
return dropState.activeDrops[dropIndex] || null
}
开发者ID:taye,项目名称:interact.js,代码行数:15,代码来源:index.ts
示例4: resume
function resume (
{ interaction, event, pointer, eventTarget }: Interact.SignalArg,
scope: Interact.Scope
) {
const state = interaction.inertia
// Check if the down event hits the current inertia target
if (state.active) {
let element = eventTarget
// climb up the DOM tree from the event target
while (utils.is.element(element)) {
// if interaction element is the current inertia target element
if (element === interaction.element) {
// stop inertia
raf.cancel(state.timeout)
state.active = false
interaction.simulation = null
// update pointers to the down event's coordinates
interaction.updatePointer(pointer, event, eventTarget, true)
utils.pointer.setCoords(
interaction.coords.cur,
interaction.pointers.map((p) => p.pointer),
interaction._now()
)
// fire appropriate signals
const signalArg = {
interaction,
}
scope.interactions.signals.fire('action-resume', signalArg)
// fire a reume event
const resumeEvent = new scope.InteractEvent(
interaction, event, interaction.prepared.name, EventPhase.Resume, interaction.element)
interaction._fireEvent(resumeEvent)
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur)
break
}
element = utils.dom.parentNode(element)
}
}
}
开发者ID:taye,项目名称:interact.js,代码行数:48,代码来源:index.ts
示例5: setTimeout
interactions.signals.on('down', ({ interaction, pointer, event, eventTarget, pointerIndex }) => {
const timer = interaction.pointers[pointerIndex].hold
const path = utils.dom.getPath(eventTarget)
const signalArg = {
interaction,
pointer,
event,
eventTarget,
type: 'hold',
targets: [] as EventTargetList,
path,
element: null,
}
for (const element of path) {
signalArg.element = element
signals.fire('collect-targets', signalArg)
}
if (!signalArg.targets.length) { return }
let minDuration = Infinity
for (const target of signalArg.targets) {
const holdDuration = target.eventable.options.holdDuration
if (holdDuration < minDuration) {
minDuration = holdDuration
}
}
timer.duration = minDuration
timer.timeout = setTimeout(() => {
fire({
interaction,
eventTarget,
pointer,
event,
type: 'hold',
}, scope)
}, minDuration)
})
开发者ID:taye,项目名称:interact.js,代码行数:43,代码来源:base.ts
示例6:
function collectEventTargets<T extends string> ({ interaction, pointer, event, eventTarget, type }: {
interaction: Interaction,
pointer: Interact.PointerType,
event: Interact.PointerEventType,
eventTarget: Interact.EventTarget,
type: T
}) {
const pointerIndex = interaction.getPointerIndex(pointer)
const pointerInfo = interaction.pointers[pointerIndex]
// do not fire a tap event if the pointer was moved before being lifted
if (type === 'tap' && (interaction.pointerWasMoved ||
// or if the pointerup target is different to the pointerdown target
!(pointerInfo && pointerInfo.downTarget === eventTarget))) {
return []
}
const path = utils.dom.getPath(eventTarget)
const signalArg = {
interaction,
pointer,
event,
eventTarget,
type,
path,
targets: [] as EventTargetList,
element: null,
}
for (const element of path) {
signalArg.element = element
signals.fire('collect-targets', signalArg)
}
if (type === 'hold') {
signalArg.targets = signalArg.targets.filter((target) =>
target.eventable.options.holdDuration === interaction.pointers[pointerIndex].hold.duration)
}
return signalArg.targets
}
开发者ID:taye,项目名称:interact.js,代码行数:42,代码来源:base.ts
示例7: checkResizeEdge
function checkResizeEdge (name: string, value: any, page: Interact.Point, element: Node, interactableElement: Element, rect: Interact.Rect, margin: number) {
// false, '', undefined, null
if (!value) { return false }
// true value, use pointer coords and element rect
if (value === true) {
// if dimensions are negative, "switch" edges
const width = utils.is.number(rect.width) ? rect.width : rect.right - rect.left
const height = utils.is.number(rect.height) ? rect.height : rect.bottom - rect.top
// don't use margin greater than half the relevent dimension
margin = Math.min(margin, (name === 'left' || name === 'right' ? width : height) / 2)
if (width < 0) {
if (name === 'left') { name = 'right' }
else if (name === 'right') { name = 'left' }
}
if (height < 0) {
if (name === 'top') { name = 'bottom' }
else if (name === 'bottom') { name = 'top' }
}
if (name === 'left') { return page.x < ((width >= 0 ? rect.left : rect.right) + margin) }
if (name === 'top') { return page.y < ((height >= 0 ? rect.top : rect.bottom) + margin) }
if (name === 'right') { return page.x > ((width >= 0 ? rect.right : rect.left) - margin) }
if (name === 'bottom') { return page.y > ((height >= 0 ? rect.bottom : rect.top) - margin) }
}
// the remaining checks require an element
if (!utils.is.element(element)) { return false }
return utils.is.element(value)
// the value is an element to use as a resize handle
? value === element
// otherwise check if element matches value as selector
: utils.dom.matchesUpTo(element, value, interactableElement)
}
开发者ID:taye,项目名称:interact.js,代码行数:38,代码来源:resize.ts
示例8: mockInteractable
export function mockInteractable (props = {}) {
return Object.assign(
{
_signals: new Signals(),
_actions: {
names: [],
methodDict: {},
},
options: {
deltaSource: 'page',
},
target: {},
events: new Eventable(),
getRect () {
return this.element
? utils.dom.getElementClientRect(this.element)
: { left: 0, top: 0, right: 0, bottom: 0 }
},
fire (event) {
this.events.fire(event)
},
},
props) as any
}
开发者ID:taye,项目名称:interact.js,代码行数:24,代码来源:_helpers.ts
注:本文中的@interactjs/utils.dom类示例整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论