本文整理汇总了TypeScript中@interactjs/utils.arr类的典型用法代码示例。如果您正苦于以下问题:TypeScript arr类的具体用法?TypeScript arr怎么用?TypeScript arr使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了arr类的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: reflow
function reflow (interactable: Interactable, action: ActionProps, scope: Scope): Promise<Interactable> {
const elements = is.string(interactable.target)
? arr.from(interactable._context.querySelectorAll(interactable.target))
: [interactable.target]
// tslint:disable-next-line variable-name
const Promise = (win.window as any).Promise
const promises: Array<Promise<null>> | null = Promise ? [] : null
for (const element of elements) {
const rect = interactable.getRect(element)
if (!rect) { break }
const runningInteraction = arr.find(
scope.interactions.list,
(interaction: Interaction) => {
return interaction.interacting() &&
interaction.interactable === interactable &&
interaction.element === element &&
interaction.prepared.name === action.name
})
let reflowPromise: Promise<null>
if (runningInteraction) {
runningInteraction.move()
if (promises) {
reflowPromise = runningInteraction._reflowPromise || new Promise((resolve: any) => {
runningInteraction._reflowResolve = resolve
})
}
}
else {
const xywh = rectUtils.tlbrToXywh(rect)
const coords = {
page : { x: xywh.x, y: xywh.y },
client : { x: xywh.x, y: xywh.y },
timeStamp: scope.now(),
}
const event = pointerUtils.coordsToEvent(coords)
reflowPromise = startReflow(scope, interactable, element, action, event)
}
if (promises) {
promises.push(reflowPromise)
}
}
return promises && Promise.all(promises).then(() => interactable)
}
开发者ID:taye,项目名称:interact.js,代码行数:52,代码来源:index.ts
示例2: off
function off (type, listener, options) {
if (utils.is.string(type) && type.search(' ') !== -1) {
type = type.trim().split(/ +/)
}
if (utils.is.array(type)) {
for (const eventType of type) {
interact.off(eventType, listener, options)
}
return interact
}
if (utils.is.object(type)) {
for (const prop in type) {
interact.off(prop, type[prop], listener)
}
return interact
}
if (!utils.arr.contains(scope.actions.eventTypes, type)) {
events.remove(scope.document, type, listener, options)
}
else {
let index
if (type in globalEvents &&
(index = globalEvents[type].indexOf(listener)) !== -1) {
globalEvents[type].splice(index, 1)
}
}
return interact
}
开发者ID:taye,项目名称:interact.js,代码行数:35,代码来源:interact.ts
示例3:
interactions.signals.on('stop', ({ interaction }) => {
if (interaction.pointerType === EventPhase.Reflow) {
if (interaction._reflowResolve) {
interaction._reflowResolve()
}
arr.remove(scope.interactions.list, interaction)
}
})
开发者ID:taye,项目名称:interact.js,代码行数:9,代码来源:index.ts
示例4: on
function on (type: string | Interact.EventTypes, listener: Interact.ListenersArg, options?) {
if (utils.is.string(type) && type.search(' ') !== -1) {
type = type.trim().split(/ +/)
}
if (utils.is.array(type)) {
for (const eventType of (type as any[])) {
interact.on(eventType, listener, options)
}
return interact
}
if (utils.is.object(type)) {
for (const prop in type) {
interact.on(prop, (type as Interact.EventTypes)[prop], listener)
}
return interact
}
// if it is an InteractEvent type, add listener to globalEvents
if (utils.arr.contains(scope.actions.eventTypes, type)) {
// if this type of event was never bound
if (!globalEvents[type]) {
globalEvents[type] = [listener]
}
else {
globalEvents[type].push(listener)
}
}
// If non InteractEvent type, addEventListener to document
else {
events.add(scope.document, type, listener as Interact.Listener, { options })
}
return interact
}
开发者ID:taye,项目名称:interact.js,代码行数:38,代码来源:interact.ts
示例5: install
//.........这里部分代码省略.........
})
/**
*
* ```js
* interact('.drop').dropzone({
* accept: '.can-drop' || document.getElementById('single-drop'),
* overlap: 'pointer' || 'center' || zeroToOne
* }
* ```
*
* Returns or sets whether draggables can be dropped onto this target to
* trigger drop events
*
* Dropzones can receive the following events:
* - `dropactivate` and `dropdeactivate` when an acceptable drag starts and ends
* - `dragenter` and `dragleave` when a draggable enters and leaves the dropzone
* - `dragmove` when a draggable that has entered the dropzone is moved
* - `drop` when a draggable is dropped into this dropzone
*
* Use the `accept` option to allow only elements that match the given CSS
* selector or element. The value can be:
*
* - **an Element** - only that element can be dropped into this dropzone.
* - **a string**, - the element being dragged must match it as a CSS selector.
* - **`null`** - accept options is cleared - it accepts any element.
*
* Use the `overlap` option to set how drops are checked for. The allowed
* values are:
*
* - `'pointer'`, the pointer must be over the dropzone (default)
* - `'center'`, the draggable element's center must be over the dropzone
* - a number from 0-1 which is the `(intersection area) / (draggable area)`.
* e.g. `0.5` for drop to happen when half of the area of the draggable is
* over the dropzone
*
* Use the `checker` option to specify a function to check if a dragged element
* is over this Interactable.
*
* @param {boolean | object | null} [options] The new options to be set.
* @return {boolean | Interactable} The current setting or this Interactable
*/
Interactable.prototype.dropzone = function (this: Interact.Interactable, options?: Interact.DropzoneOptions | boolean) {
return dropzoneMethod(this, options)
}
/**
* ```js
* interact(target)
* .dropChecker(function(dragEvent, // related dragmove or dragend event
* event, // TouchEvent/PointerEvent/MouseEvent
* dropped, // bool result of the default checker
* dropzone, // dropzone Interactable
* dropElement, // dropzone elemnt
* draggable, // draggable Interactable
* draggableElement) {// draggable element
*
* return dropped && event.target.hasAttribute('allow-drop')
* }
* ```
*/
Interactable.prototype.dropCheck = function (this: Interact.Interactable, dragEvent, event, draggable, draggableElement, dropElement, rect) {
return dropCheckMethod(this, dragEvent, event, draggable, draggableElement, dropElement, rect)
}
/**
* Returns or sets whether the dimensions of dropzone elements are calculated
* on every dragmove or only on dragstart for the default dropChecker
*
* @param {boolean} [newValue] True to check on each move. False to check only
* before start
* @return {boolean | interact} The current setting or interact
*/
interact.dynamicDrop = function (newValue?: boolean) {
if (utils.is.bool(newValue)) {
// if (dragging && scope.dynamicDrop !== newValue && !newValue) {
// calcRects(dropzones)
// }
scope.dynamicDrop = newValue
return interact
}
return scope.dynamicDrop
}
utils.arr.merge(actions.eventTypes, [
'dragenter',
'dragleave',
'dropactivate',
'dropdeactivate',
'dropmove',
'drop',
])
actions.methodDict.drop = 'dropzone'
scope.dynamicDrop = false
defaults.actions.drop = drop.defaults
}
开发者ID:taye,项目名称:interact.js,代码行数:101,代码来源:index.ts
示例6: install
function install (scope: Scope) {
const {
actions,
Interactable,
interactions,
defaults,
} = scope
/**
* ```js
* interact(element).gesturable({
* onstart: function (event) {},
* onmove : function (event) {},
* onend : function (event) {},
*
* // limit multiple gestures.
* // See the explanation in {@link Interactable.draggable} example
* max: Infinity,
* maxPerElement: 1,
* })
*
* var isGestureable = interact(element).gesturable()
* ```
*
* Gets or sets whether multitouch gestures can be performed on the target
*
* @param {boolean | object} [options] true/false or An object with event
* listeners to be fired on gesture events (makes the Interactable gesturable)
* @return {boolean | Interactable} A boolean indicating if this can be the
* target of gesture events, or this Interactable
*/
Interactable.prototype.gesturable = function (this: Interact.Interactable, options: Interact.GesturableOptions | boolean) {
if (utils.is.object(options)) {
this.options.gesture.enabled = options.enabled !== false
this.setPerAction('gesture', options)
this.setOnEvents('gesture', options)
return this
}
if (utils.is.bool(options)) {
this.options.gesture.enabled = options
return this
}
return this.options.gesture as Interact.Options
} as GesturableMethod
interactions.signals.on('action-start', updateGestureProps)
interactions.signals.on('action-move', updateGestureProps)
interactions.signals.on('action-end', updateGestureProps)
interactions.signals.on('new', ({ interaction }) => {
interaction.gesture = {
angle: 0,
distance: 0,
scale: 1,
startAngle: 0,
startDistance: 0,
}
})
actions[ActionName.Gesture] = gesture
actions.names.push(ActionName.Gesture)
utils.arr.merge(actions.eventTypes, [
'gesturestart',
'gesturemove',
'gestureend',
])
actions.methodDict.gesture = 'gesturable'
defaults.actions.gesture = gesture.defaults
}
开发者ID:taye,项目名称:interact.js,代码行数:74,代码来源:gesture.ts
示例7: install
function install (scope: Scope) {
const {
actions,
browser,
/** @lends Interactable */
Interactable, // tslint:disable-line no-shadowed-variable
interactions,
defaults,
} = scope
// Less Precision with touch input
interactions.signals.on('new', (interaction) => {
interaction.resizeAxes = 'xy'
})
interactions.signals.on('action-start', start)
interactions.signals.on('action-move', move)
interactions.signals.on('action-start', updateEventAxes)
interactions.signals.on('action-move', updateEventAxes)
resize.cursors = initCursors(browser)
resize.defaultMargin = browser.supportsTouch || browser.supportsPointerEvent ? 20 : 10
/**
* ```js
* interact(element).resizable({
* onstart: function (event) {},
* onmove : function (event) {},
* onend : function (event) {},
*
* edges: {
* top : true, // Use pointer coords to check for resize.
* left : false, // Disable resizing from left edge.
* bottom: '.resize-s',// Resize if pointer target matches selector
* right : handleEl // Resize if pointer target is the given Element
* },
*
* // Width and height can be adjusted independently. When `true`, width and
* // height are adjusted at a 1:1 ratio.
* square: false,
*
* // Width and height can be adjusted independently. When `true`, width and
* // height maintain the aspect ratio they had when resizing started.
* preserveAspectRatio: false,
*
* // a value of 'none' will limit the resize rect to a minimum of 0x0
* // 'negate' will allow the rect to have negative width/height
* // 'reposition' will keep the width/height positive by swapping
* // the top and bottom edges and/or swapping the left and right edges
* invert: 'none' || 'negate' || 'reposition'
*
* // limit multiple resizes.
* // See the explanation in the {@link Interactable.draggable} example
* max: Infinity,
* maxPerElement: 1,
* })
*
* var isResizeable = interact(element).resizable()
* ```
*
* Gets or sets whether resize actions can be performed on the target
*
* @param {boolean | object} [options] true/false or An object with event
* listeners to be fired on resize events (object makes the Interactable
* resizable)
* @return {boolean | Interactable} A boolean indicating if this can be the
* target of resize elements, or this Interactable
*/
Interactable.prototype.resizable = function (this: Interact.Interactable, options: Interact.ResizableOptions | boolean) {
return resizable(this, options, scope)
} as ResizableMethod
actions[ActionName.Resize] = resize
actions.names.push(ActionName.Resize)
utils.arr.merge(actions.eventTypes, [
'resizestart',
'resizemove',
'resizeinertiastart',
'resizeresume',
'resizeend',
])
actions.methodDict.resize = 'resizable'
defaults.actions.resize = resize.defaults
}
开发者ID:taye,项目名称:interact.js,代码行数:87,代码来源:resize.ts
注:本文中的@interactjs/utils.arr类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论