,\n })\n\n this.pointers.splice(pointerIndex, 1)\n this.pointerIsDown = false\n }\n\n /** @internal */\n _updateLatestPointer(pointer: PointerType, event: PointerEventType, eventTarget: Node) {\n this._latestPointer.pointer = pointer\n this._latestPointer.event = event\n this._latestPointer.eventTarget = eventTarget\n }\n\n destroy() {\n this._latestPointer.pointer = null\n this._latestPointer.event = null\n this._latestPointer.eventTarget = null\n }\n\n /** @internal */\n _createPreparedEvent(\n event: PointerEventType,\n phase: P,\n preEnd?: boolean,\n type?: string,\n ) {\n return new InteractEvent(this, event, this.prepared.name, phase, this.element, preEnd, type)\n }\n\n /** @internal */\n _fireEvent(iEvent: InteractEvent) {\n this.interactable?.fire(iEvent)\n\n if (!this.prevEvent || iEvent.timeStamp >= this.prevEvent.timeStamp) {\n this.prevEvent = iEvent\n }\n }\n\n /** @internal */\n _doPhase(\n signalArg: Omit, 'iEvent'> & { iEvent?: InteractEvent },\n ) {\n const { event, phase, preEnd, type } = signalArg\n const { rect } = this\n\n if (rect && phase === 'move') {\n // update the rect changes due to pointer move\n rectUtils.addEdges(this.edges, rect, this.coords.delta[this.interactable.options.deltaSource])\n\n rect.width = rect.right - rect.left\n rect.height = rect.bottom - rect.top\n }\n\n const beforeResult = this._scopeFire(`interactions:before-action-${phase}` as any, signalArg)\n\n if (beforeResult === false) {\n return false\n }\n\n const iEvent = (signalArg.iEvent = this._createPreparedEvent(event, phase, preEnd, type))\n\n this._scopeFire(`interactions:action-${phase}` as any, signalArg)\n\n if (phase === 'start') {\n this.prevEvent = iEvent\n }\n\n this._fireEvent(iEvent)\n\n this._scopeFire(`interactions:after-action-${phase}` as any, signalArg)\n\n return true\n }\n\n /** @internal */\n _now() {\n return Date.now()\n }\n}\n\nexport default Interaction\nexport { PointerInfo }\n", "import type Interaction from '@interactjs/core/Interaction'\nimport { _ProxyMethods } from '@interactjs/core/Interaction'\nimport type { Plugin } from '@interactjs/core/scope'\nimport type { Point } from '@interactjs/core/types'\nimport * as rectUtils from '@interactjs/utils/rect'\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n offsetBy?: typeof offsetBy\n offset: {\n total: Point\n pending: Point\n }\n }\n\n enum _ProxyMethods {\n offsetBy = '',\n }\n}\n\n;(_ProxyMethods as any).offsetBy = ''\n\nexport function addTotal(interaction: Interaction) {\n if (!interaction.pointerIsDown) {\n return\n }\n\n addToCoords(interaction.coords.cur, interaction.offset.total)\n\n interaction.offset.pending.x = 0\n interaction.offset.pending.y = 0\n}\n\nfunction beforeAction({ interaction }: { interaction: Interaction }) {\n applyPending(interaction)\n}\n\nfunction beforeEnd({ interaction }: { interaction: Interaction }): boolean | void {\n const hadPending = applyPending(interaction)\n\n if (!hadPending) return\n\n interaction.move({ offset: true })\n interaction.end()\n\n return false\n}\n\nfunction end({ interaction }: { interaction: Interaction }) {\n interaction.offset.total.x = 0\n interaction.offset.total.y = 0\n interaction.offset.pending.x = 0\n interaction.offset.pending.y = 0\n}\n\nexport function applyPending(interaction: Interaction) {\n if (!hasPending(interaction)) {\n return false\n }\n\n const { pending } = interaction.offset\n\n addToCoords(interaction.coords.cur, pending)\n addToCoords(interaction.coords.delta, pending)\n rectUtils.addEdges(interaction.edges, interaction.rect, pending)\n\n pending.x = 0\n pending.y = 0\n\n return true\n}\n\nfunction offsetBy(this: Interaction, { x, y }: Point) {\n this.offset.pending.x += x\n this.offset.pending.y += y\n\n this.offset.total.x += x\n this.offset.total.y += y\n}\n\nfunction addToCoords({ page, client }, { x, y }: Point) {\n page.x += x\n page.y += y\n client.x += x\n client.y += y\n}\n\nfunction hasPending(interaction: Interaction) {\n return !!(interaction.offset.pending.x || interaction.offset.pending.y)\n}\n\nconst offset: Plugin = {\n id: 'offset',\n before: ['modifiers', 'pointer-events', 'actions', 'inertia'],\n install(scope) {\n scope.Interaction.prototype.offsetBy = offsetBy\n },\n listeners: {\n 'interactions:new': ({ interaction }) => {\n interaction.offset = {\n total: { x: 0, y: 0 },\n pending: { x: 0, y: 0 },\n }\n },\n 'interactions:update-pointer': ({ interaction }) => addTotal(interaction),\n 'interactions:before-action-start': beforeAction,\n 'interactions:before-action-move': beforeAction,\n 'interactions:before-action-end': beforeEnd,\n 'interactions:stop': end,\n },\n}\n\nexport default offset\n", "import type { Interaction, DoPhaseArg } from '@interactjs/core/Interaction'\nimport type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\nimport type { ActionName, Point, PointerEventType } from '@interactjs/core/types'\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport '@interactjs/modifiers/base'\nimport '@interactjs/offset/plugin'\nimport * as modifiers from '@interactjs/modifiers/base'\nimport { Modification } from '@interactjs/modifiers/Modification'\nimport type { ModifierArg } from '@interactjs/modifiers/types'\nimport offset from '@interactjs/offset/plugin'\n/* eslint-enable import/no-duplicates */\nimport * as dom from '@interactjs/utils/domUtils'\nimport hypot from '@interactjs/utils/hypot'\nimport is from '@interactjs/utils/is'\nimport { copyCoords } from '@interactjs/utils/pointerUtils'\nimport raf from '@interactjs/utils/raf'\n\ndeclare module '@interactjs/core/InteractEvent' {\n interface PhaseMap {\n resume?: true\n inertiastart?: true\n }\n}\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n inertia?: InertiaState\n }\n}\n\ndeclare module '@interactjs/core/options' {\n interface PerActionDefaults {\n inertia?: {\n enabled?: boolean\n resistance?: number // the lambda in exponential decay\n minSpeed?: number // target speed must be above this for inertia to start\n endSpeed?: number // the speed at which inertia is slow enough to stop\n allowResume?: true // allow resuming an action in inertia phase\n smoothEndDuration?: number // animate to snap/restrict endOnly if there's no inertia\n }\n }\n}\n\ndeclare module '@interactjs/core/scope' {\n interface SignalArgs {\n 'interactions:before-action-inertiastart': Omit, 'iEvent'>\n 'interactions:action-inertiastart': DoPhaseArg\n 'interactions:after-action-inertiastart': DoPhaseArg\n 'interactions:before-action-resume': Omit, 'iEvent'>\n 'interactions:action-resume': DoPhaseArg\n 'interactions:after-action-resume': DoPhaseArg\n }\n}\n\nfunction install(scope: Scope) {\n const { defaults } = scope\n\n scope.usePlugin(offset)\n scope.usePlugin(modifiers.default)\n scope.actions.phases.inertiastart = true\n scope.actions.phases.resume = true\n\n defaults.perAction.inertia = {\n enabled: false,\n resistance: 10, // the lambda in exponential decay\n minSpeed: 100, // target speed must be above this for inertia to start\n endSpeed: 10, // the speed at which inertia is slow enough to stop\n allowResume: true, // allow resuming an action in inertia phase\n smoothEndDuration: 300, // animate to snap/restrict endOnly if there's no inertia\n }\n}\n\nexport class InertiaState {\n active = false\n isModified = false\n smoothEnd = false\n allowResume = false\n\n modification!: Modification\n modifierCount = 0\n modifierArg!: ModifierArg\n\n startCoords!: Point\n t0 = 0\n v0 = 0\n\n te = 0\n targetOffset!: Point\n modifiedOffset!: Point\n currentOffset!: Point\n\n lambda_v0? = 0 // eslint-disable-line camelcase\n one_ve_v0? = 0 // eslint-disable-line camelcase\n timeout!: number\n readonly interaction: Interaction\n\n constructor(interaction: Interaction) {\n this.interaction = interaction\n }\n\n start(event: PointerEventType) {\n const { interaction } = this\n const options = getOptions(interaction)\n\n if (!options || !options.enabled) {\n return false\n }\n\n const { client: velocityClient } = interaction.coords.velocity\n const pointerSpeed = hypot(velocityClient.x, velocityClient.y)\n const modification = this.modification || (this.modification = new Modification(interaction))\n\n modification.copyFrom(interaction.modification)\n\n this.t0 = interaction._now()\n this.allowResume = options.allowResume\n this.v0 = pointerSpeed\n this.currentOffset = { x: 0, y: 0 }\n this.startCoords = interaction.coords.cur.page\n\n this.modifierArg = modification.fillArg({\n pageCoords: this.startCoords,\n preEnd: true,\n phase: 'inertiastart',\n })\n\n const thrown =\n this.t0 - interaction.coords.cur.timeStamp < 50 &&\n pointerSpeed > options.minSpeed &&\n pointerSpeed > options.endSpeed\n\n if (thrown) {\n this.startInertia()\n } else {\n modification.result = modification.setAll(this.modifierArg)\n\n if (!modification.result.changed) {\n return false\n }\n\n this.startSmoothEnd()\n }\n\n // force modification change\n interaction.modification.result.rect = null\n\n // bring inertiastart event to the target coords\n interaction.offsetBy(this.targetOffset)\n interaction._doPhase({\n interaction,\n event,\n phase: 'inertiastart',\n })\n interaction.offsetBy({ x: -this.targetOffset.x, y: -this.targetOffset.y })\n // force modification change\n interaction.modification.result.rect = null\n\n this.active = true\n interaction.simulation = this\n\n return true\n }\n\n startInertia() {\n const startVelocity = this.interaction.coords.velocity.client\n const options = getOptions(this.interaction)\n const lambda = options.resistance\n const inertiaDur = -Math.log(options.endSpeed / this.v0) / lambda\n\n this.targetOffset = {\n x: (startVelocity.x - inertiaDur) / lambda,\n y: (startVelocity.y - inertiaDur) / lambda,\n }\n\n this.te = inertiaDur\n this.lambda_v0 = lambda / this.v0\n this.one_ve_v0 = 1 - options.endSpeed / this.v0\n\n const { modification, modifierArg } = this\n\n modifierArg.pageCoords = {\n x: this.startCoords.x + this.targetOffset.x,\n y: this.startCoords.y + this.targetOffset.y,\n }\n\n modification.result = modification.setAll(modifierArg)\n\n if (modification.result.changed) {\n this.isModified = true\n this.modifiedOffset = {\n x: this.targetOffset.x + modification.result.delta.x,\n y: this.targetOffset.y + modification.result.delta.y,\n }\n }\n\n this.onNextFrame(() => this.inertiaTick())\n }\n\n startSmoothEnd() {\n this.smoothEnd = true\n this.isModified = true\n this.targetOffset = {\n x: this.modification.result.delta.x,\n y: this.modification.result.delta.y,\n }\n\n this.onNextFrame(() => this.smoothEndTick())\n }\n\n onNextFrame(tickFn: () => void) {\n this.timeout = raf.request(() => {\n if (this.active) {\n tickFn()\n }\n })\n }\n\n inertiaTick() {\n const { interaction } = this\n const options = getOptions(interaction)\n const lambda = options.resistance\n const t = (interaction._now() - this.t0) / 1000\n\n if (t < this.te) {\n const progress = 1 - (Math.exp(-lambda * t) - this.lambda_v0) / this.one_ve_v0\n let newOffset: Point\n\n if (this.isModified) {\n newOffset = getQuadraticCurvePoint(\n 0,\n 0,\n this.targetOffset.x,\n this.targetOffset.y,\n this.modifiedOffset.x,\n this.modifiedOffset.y,\n progress,\n )\n } else {\n newOffset = {\n x: this.targetOffset.x * progress,\n y: this.targetOffset.y * progress,\n }\n }\n\n const delta = { x: newOffset.x - this.currentOffset.x, y: newOffset.y - this.currentOffset.y }\n\n this.currentOffset.x += delta.x\n this.currentOffset.y += delta.y\n\n interaction.offsetBy(delta)\n interaction.move()\n\n this.onNextFrame(() => this.inertiaTick())\n } else {\n interaction.offsetBy({\n x: this.modifiedOffset.x - this.currentOffset.x,\n y: this.modifiedOffset.y - this.currentOffset.y,\n })\n\n this.end()\n }\n }\n\n smoothEndTick() {\n const { interaction } = this\n const t = interaction._now() - this.t0\n const { smoothEndDuration: duration } = getOptions(interaction)\n\n if (t < duration) {\n const newOffset = {\n x: easeOutQuad(t, 0, this.targetOffset.x, duration),\n y: easeOutQuad(t, 0, this.targetOffset.y, duration),\n }\n const delta = {\n x: newOffset.x - this.currentOffset.x,\n y: newOffset.y - this.currentOffset.y,\n }\n\n this.currentOffset.x += delta.x\n this.currentOffset.y += delta.y\n\n interaction.offsetBy(delta)\n interaction.move({ skipModifiers: this.modifierCount })\n\n this.onNextFrame(() => this.smoothEndTick())\n } else {\n interaction.offsetBy({\n x: this.targetOffset.x - this.currentOffset.x,\n y: this.targetOffset.y - this.currentOffset.y,\n })\n\n this.end()\n }\n }\n\n resume({ pointer, event, eventTarget }: SignalArgs['interactions:down']) {\n const { interaction } = this\n\n // undo inertia changes to interaction coords\n interaction.offsetBy({\n x: -this.currentOffset.x,\n y: -this.currentOffset.y,\n })\n\n // update pointer at pointer down position\n interaction.updatePointer(pointer, event, eventTarget, true)\n\n // fire resume signals and event\n interaction._doPhase({\n interaction,\n event,\n phase: 'resume',\n })\n copyCoords(interaction.coords.prev, interaction.coords.cur)\n\n this.stop()\n }\n\n end() {\n this.interaction.move()\n this.interaction.end()\n this.stop()\n }\n\n stop() {\n this.active = this.smoothEnd = false\n this.interaction.simulation = null\n raf.cancel(this.timeout)\n }\n}\n\nfunction start({ interaction, event }: DoPhaseArg) {\n if (!interaction._interacting || interaction.simulation) {\n return null\n }\n\n const started = interaction.inertia.start(event)\n\n // prevent action end if inertia or smoothEnd\n return started ? false : null\n}\n\n// Check if the down event hits the current inertia target\n// control should be return to the user\nfunction resume(arg: SignalArgs['interactions:down']) {\n const { interaction, eventTarget } = arg\n const state = interaction.inertia\n\n if (!state.active) return\n\n let element = eventTarget as Node\n\n // climb up the DOM tree from the event target\n while (is.element(element)) {\n // if interaction element is the current inertia target element\n if (element === interaction.element) {\n state.resume(arg)\n break\n }\n\n element = dom.parentNode(element)\n }\n}\n\nfunction stop({ interaction }: { interaction: Interaction }) {\n const state = interaction.inertia\n\n if (state.active) {\n state.stop()\n }\n}\n\nfunction getOptions({ interactable, prepared }: Interaction) {\n return interactable && interactable.options && prepared.name && interactable.options[prepared.name].inertia\n}\n\nconst inertia: Plugin = {\n id: 'inertia',\n before: ['modifiers', 'actions'],\n install,\n listeners: {\n 'interactions:new': ({ interaction }) => {\n interaction.inertia = new InertiaState(interaction)\n },\n\n 'interactions:before-action-end': start,\n 'interactions:down': resume,\n 'interactions:stop': stop,\n\n 'interactions:before-action-resume': (arg) => {\n const { modification } = arg.interaction\n\n modification.stop(arg)\n modification.start(arg, arg.interaction.coords.cur.page)\n modification.applyToInteraction(arg)\n },\n\n 'interactions:before-action-inertiastart': (arg) => arg.interaction.modification.setAndApply(arg),\n 'interactions:action-resume': modifiers.addEventModifiers,\n 'interactions:action-inertiastart': modifiers.addEventModifiers,\n 'interactions:after-action-inertiastart': (arg) =>\n arg.interaction.modification.restoreInteractionCoords(arg),\n 'interactions:after-action-resume': (arg) => arg.interaction.modification.restoreInteractionCoords(arg),\n },\n}\n\n// http://stackoverflow.com/a/5634528/2280888\nfunction _getQBezierValue(t: number, p1: number, p2: number, p3: number) {\n const iT = 1 - t\n return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3\n}\n\nfunction getQuadraticCurvePoint(\n startX: number,\n startY: number,\n cpX: number,\n cpY: number,\n endX: number,\n endY: number,\n position: number,\n) {\n return {\n x: _getQBezierValue(position, startX, cpX, endX),\n y: _getQBezierValue(position, startY, cpY, endY),\n }\n}\n\n// http://gizma.com/easing/\nfunction easeOutQuad(t: number, b: number, c: number, d: number) {\n t /= d\n return -c * t * (t - 2) + b\n}\n\nexport default inertia\n", "import * as arr from '@interactjs/utils/arr'\nimport extend from '@interactjs/utils/extend'\nimport type { NormalizedListeners } from '@interactjs/utils/normalizeListeners'\nimport normalize from '@interactjs/utils/normalizeListeners'\n\nimport type { Listener, ListenersArg, Rect } from '@interactjs/core/types'\n\nfunction fireUntilImmediateStopped(event: any, listeners: Listener[]) {\n for (const listener of listeners) {\n if (event.immediatePropagationStopped) {\n break\n }\n\n listener(event)\n }\n}\n\nexport class Eventable {\n options: any\n types: NormalizedListeners = {}\n propagationStopped = false\n immediatePropagationStopped = false\n global: any\n\n constructor(options?: { [index: string]: any }) {\n this.options = extend({}, options || {})\n }\n\n fire(event: T) {\n let listeners: Listener[]\n const global = this.global\n\n // Interactable#on() listeners\n // tslint:disable no-conditional-assignment\n if ((listeners = this.types[event.type])) {\n fireUntilImmediateStopped(event, listeners)\n }\n\n // interact.on() listeners\n if (!event.propagationStopped && global && (listeners = global[event.type])) {\n fireUntilImmediateStopped(event, listeners)\n }\n }\n\n on(type: string, listener: ListenersArg) {\n const listeners = normalize(type, listener)\n\n for (type in listeners) {\n this.types[type] = arr.merge(this.types[type] || [], listeners[type])\n }\n }\n\n off(type: string, listener: ListenersArg) {\n const listeners = normalize(type, listener)\n\n for (type in listeners) {\n const eventList = this.types[type]\n\n if (!eventList || !eventList.length) {\n continue\n }\n\n for (const subListener of listeners[type]) {\n const index = eventList.indexOf(subListener)\n\n if (index !== -1) {\n eventList.splice(index, 1)\n }\n }\n }\n }\n\n getRect(_element: Element): Rect {\n return null\n }\n}\n", "import * as arr from '@interactjs/utils/arr'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport is from '@interactjs/utils/is'\nimport pExtend from '@interactjs/utils/pointerExtend'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\n\nimport type { Scope } from '@interactjs/core/scope'\nimport type { Element } from '@interactjs/core/types'\n\nimport type { NativeEventTarget } from './NativeTypes'\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n events: ReturnType\n }\n}\n\ninterface EventOptions {\n capture: boolean\n passive: boolean\n}\n\ntype PartialEventTarget = Partial\n\ntype ListenerEntry = { func: (event: Event | FakeEvent) => any; options: EventOptions }\n\nfunction install(scope: Scope) {\n const targets: Array<{\n eventTarget: PartialEventTarget\n events: { [type: string]: ListenerEntry[] }\n }> = []\n\n const delegatedEvents: {\n [type: string]: Array<{\n selector: string\n context: Node\n listeners: ListenerEntry[]\n }>\n } = {}\n const documents: Document[] = []\n\n const eventsMethods = {\n add,\n remove,\n\n addDelegate,\n removeDelegate,\n\n delegateListener,\n delegateUseCapture,\n delegatedEvents,\n documents,\n\n targets,\n\n supportsOptions: false,\n supportsPassive: false,\n }\n\n // check if browser supports passive events and options arg\n scope.document?.createElement('div').addEventListener('test', null, {\n get capture() {\n return (eventsMethods.supportsOptions = true)\n },\n get passive() {\n return (eventsMethods.supportsPassive = true)\n },\n })\n\n scope.events = eventsMethods\n\n function add(\n eventTarget: PartialEventTarget,\n type: string,\n listener: ListenerEntry['func'],\n optionalArg?: boolean | EventOptions,\n ) {\n if (!eventTarget.addEventListener) return\n\n const options = getOptions(optionalArg)\n let target = arr.find(targets, (t) => t.eventTarget === eventTarget)\n\n if (!target) {\n target = {\n eventTarget,\n events: {},\n }\n\n targets.push(target)\n }\n\n if (!target.events[type]) {\n target.events[type] = []\n }\n\n if (!arr.find(target.events[type], (l) => l.func === listener && optionsMatch(l.options, options))) {\n eventTarget.addEventListener(\n type,\n listener as any,\n eventsMethods.supportsOptions ? options : options.capture,\n )\n target.events[type].push({ func: listener, options })\n }\n }\n\n function remove(\n eventTarget: PartialEventTarget,\n type: string,\n listener?: 'all' | ListenerEntry['func'],\n optionalArg?: boolean | EventOptions,\n ) {\n if (!eventTarget.addEventListener || !eventTarget.removeEventListener) return\n\n const targetIndex = arr.findIndex(targets, (t) => t.eventTarget === eventTarget)\n const target = targets[targetIndex]\n\n if (!target || !target.events) {\n return\n }\n\n if (type === 'all') {\n for (type in target.events) {\n if (target.events.hasOwnProperty(type)) {\n remove(eventTarget, type, 'all')\n }\n }\n return\n }\n\n let typeIsEmpty = false\n const typeListeners = target.events[type]\n\n if (typeListeners) {\n if (listener === 'all') {\n for (let i = typeListeners.length - 1; i >= 0; i--) {\n const entry = typeListeners[i]\n remove(eventTarget, type, entry.func, entry.options)\n }\n return\n } else {\n const options = getOptions(optionalArg)\n\n for (let i = 0; i < typeListeners.length; i++) {\n const entry = typeListeners[i]\n if (entry.func === listener && optionsMatch(entry.options, options)) {\n eventTarget.removeEventListener(\n type,\n listener as any,\n eventsMethods.supportsOptions ? options : options.capture,\n )\n typeListeners.splice(i, 1)\n\n if (typeListeners.length === 0) {\n delete target.events[type]\n typeIsEmpty = true\n }\n\n break\n }\n }\n }\n }\n\n if (typeIsEmpty && !Object.keys(target.events).length) {\n targets.splice(targetIndex, 1)\n }\n }\n\n function addDelegate(\n selector: string,\n context: Node,\n type: string,\n listener: ListenerEntry['func'],\n optionalArg?: any,\n ) {\n const options = getOptions(optionalArg)\n if (!delegatedEvents[type]) {\n delegatedEvents[type] = []\n\n // add delegate listener functions\n for (const doc of documents) {\n add(doc, type, delegateListener)\n add(doc, type, delegateUseCapture, true)\n }\n }\n\n const delegates = delegatedEvents[type]\n let delegate = arr.find(delegates, (d) => d.selector === selector && d.context === context)\n\n if (!delegate) {\n delegate = { selector, context, listeners: [] }\n delegates.push(delegate)\n }\n\n delegate.listeners.push({ func: listener, options })\n }\n\n function removeDelegate(\n selector: string,\n context: Document | Element,\n type: string,\n listener?: ListenerEntry['func'],\n optionalArg?: any,\n ) {\n const options = getOptions(optionalArg)\n const delegates = delegatedEvents[type]\n let matchFound = false\n let index: number\n\n if (!delegates) return\n\n // count from last index of delegated to 0\n for (index = delegates.length - 1; index >= 0; index--) {\n const cur = delegates[index]\n // look for matching selector and context Node\n if (cur.selector === selector && cur.context === context) {\n const { listeners } = cur\n\n // each item of the listeners array is an array: [function, capture, passive]\n for (let i = listeners.length - 1; i >= 0; i--) {\n const entry = listeners[i]\n\n // check if the listener functions and capture and passive flags match\n if (entry.func === listener && optionsMatch(entry.options, options)) {\n // remove the listener from the array of listeners\n listeners.splice(i, 1)\n\n // if all listeners for this target have been removed\n // remove the target from the delegates array\n if (!listeners.length) {\n delegates.splice(index, 1)\n\n // remove delegate function from context\n remove(context, type, delegateListener)\n remove(context, type, delegateUseCapture, true)\n }\n\n // only remove one listener\n matchFound = true\n break\n }\n }\n\n if (matchFound) {\n break\n }\n }\n }\n }\n\n // bound to the interactable context when a DOM event\n // listener is added to a selector interactable\n function delegateListener(event: Event | FakeEvent, optionalArg?: any) {\n const options = getOptions(optionalArg)\n const fakeEvent = new FakeEvent(event as Event)\n const delegates = delegatedEvents[event.type]\n const [eventTarget] = pointerUtils.getEventTargets(event as Event)\n let element: Node = eventTarget\n\n // climb up document tree looking for selector matches\n while (is.element(element)) {\n for (let i = 0; i < delegates.length; i++) {\n const cur = delegates[i]\n const { selector, context } = cur\n\n if (\n domUtils.matchesSelector(element, selector) &&\n domUtils.nodeContains(context, eventTarget) &&\n domUtils.nodeContains(context, element)\n ) {\n const { listeners } = cur\n\n fakeEvent.currentTarget = element\n\n for (const entry of listeners) {\n if (optionsMatch(entry.options, options)) {\n entry.func(fakeEvent)\n }\n }\n }\n }\n\n element = domUtils.parentNode(element)\n }\n }\n\n function delegateUseCapture(this: Element, event: Event | FakeEvent) {\n return delegateListener.call(this, event, true)\n }\n\n // for type inferrence\n return eventsMethods\n}\n\nclass FakeEvent implements Partial {\n currentTarget: Node\n originalEvent: Event\n type: string\n\n constructor(originalEvent: Event) {\n this.originalEvent = originalEvent\n // duplicate the event so that currentTarget can be changed\n pExtend(this, originalEvent)\n }\n\n preventOriginalDefault() {\n this.originalEvent.preventDefault()\n }\n\n stopPropagation() {\n this.originalEvent.stopPropagation()\n }\n\n stopImmediatePropagation() {\n this.originalEvent.stopImmediatePropagation()\n }\n}\n\nfunction getOptions(param: { [index: string]: any } | boolean): { capture: boolean; passive: boolean } {\n if (!is.object(param)) {\n return { capture: !!param, passive: false }\n }\n\n return {\n capture: !!param.capture,\n passive: !!param.passive,\n }\n}\n\nfunction optionsMatch(a: Partial | boolean, b: Partial) {\n if (a === b) return true\n\n if (typeof a === 'boolean') return !!b.capture === a && !!b.passive === false\n\n return !!a.capture === !!b.capture && !!a.passive === !!b.passive\n}\n\nexport default {\n id: 'events',\n install,\n}\n", "import * as dom from '@interactjs/utils/domUtils'\n\nimport type Interaction from '@interactjs/core/Interaction'\nimport type { Scope } from '@interactjs/core/scope'\nimport type { PointerType } from '@interactjs/core/types'\n\nexport interface SearchDetails {\n pointer: PointerType\n pointerId: number\n pointerType: string\n eventType: string\n eventTarget: EventTarget\n curEventTarget: EventTarget\n scope: Scope\n}\n\nconst finder = {\n methodOrder: ['simulationResume', 'mouseOrPen', 'hasPointer', 'idle'] as const,\n\n search(details: SearchDetails) {\n for (const method of finder.methodOrder) {\n const interaction = finder[method](details)\n\n if (interaction) {\n return interaction\n }\n }\n\n return null\n },\n\n // try to resume simulation with a new pointer\n simulationResume({ pointerType, eventType, eventTarget, scope }: SearchDetails) {\n if (!/down|start/i.test(eventType)) {\n return null\n }\n\n for (const interaction of scope.interactions.list) {\n let element = eventTarget as Node\n\n if (\n interaction.simulation &&\n interaction.simulation.allowResume &&\n interaction.pointerType === pointerType\n ) {\n while (element) {\n // if the element is the interaction element\n if (element === interaction.element) {\n return interaction\n }\n element = dom.parentNode(element)\n }\n }\n }\n\n return null\n },\n\n // if it's a mouse or pen interaction\n mouseOrPen({ pointerId, pointerType, eventType, scope }: SearchDetails) {\n if (pointerType !== 'mouse' && pointerType !== 'pen') {\n return null\n }\n\n let firstNonActive\n\n for (const interaction of scope.interactions.list) {\n if (interaction.pointerType === pointerType) {\n // if it's a down event, skip interactions with running simulations\n if (interaction.simulation && !hasPointerId(interaction, pointerId)) {\n continue\n }\n\n // if the interaction is active, return it immediately\n if (interaction.interacting()) {\n return interaction\n }\n // otherwise save it and look for another active interaction\n else if (!firstNonActive) {\n firstNonActive = interaction\n }\n }\n }\n\n // if no active mouse interaction was found use the first inactive mouse\n // interaction\n if (firstNonActive) {\n return firstNonActive\n }\n\n // find any mouse or pen interaction.\n // ignore the interaction if the eventType is a *down, and a simulation\n // is active\n for (const interaction of scope.interactions.list) {\n if (interaction.pointerType === pointerType && !(/down/i.test(eventType) && interaction.simulation)) {\n return interaction\n }\n }\n\n return null\n },\n\n // get interaction that has this pointer\n hasPointer({ pointerId, scope }: SearchDetails) {\n for (const interaction of scope.interactions.list) {\n if (hasPointerId(interaction, pointerId)) {\n return interaction\n }\n }\n\n return null\n },\n\n // get first idle interaction with a matching pointerType\n idle({ pointerType, scope }: SearchDetails) {\n for (const interaction of scope.interactions.list) {\n // if there's already a pointer held down\n if (interaction.pointers.length === 1) {\n const target = interaction.interactable\n // don't add this pointer if there is a target interactable and it\n // isn't gesturable\n if (target && !(target.options.gesture && target.options.gesture.enabled)) {\n continue\n }\n }\n // maximum of 2 pointers per interaction\n else if (interaction.pointers.length >= 2) {\n continue\n }\n\n if (!interaction.interacting() && pointerType === interaction.pointerType) {\n return interaction\n }\n }\n\n return null\n },\n}\n\nfunction hasPointerId(interaction: Interaction, pointerId: number) {\n return interaction.pointers.some(({ id }) => id === pointerId)\n}\n\nexport default finder\n", "import browser from '@interactjs/utils/browser'\nimport domObjects from '@interactjs/utils/domObjects'\nimport { nodeContains } from '@interactjs/utils/domUtils'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\n\nimport type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\nimport type { ActionName, Listener } from '@interactjs/core/types'\n\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './interactablePreventDefault'\nimport interactablePreventDefault from './interactablePreventDefault'\nimport InteractionBase from './Interaction'\n/* eslint-enable import/no-duplicates */\nimport type { SearchDetails } from './interactionFinder'\nimport finder from './interactionFinder'\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n Interaction: typeof InteractionBase\n interactions: {\n new: (options: any) => InteractionBase\n list: Array>\n listeners: { [type: string]: Listener }\n docEvents: Array<{ type: string; listener: Listener }>\n pointerMoveTolerance: number\n }\n prevTouchTime: number\n }\n\n interface SignalArgs {\n 'interactions:find': {\n interaction: InteractionBase\n searchDetails: SearchDetails\n }\n }\n}\n\nconst methodNames = [\n 'pointerDown',\n 'pointerMove',\n 'pointerUp',\n 'updatePointer',\n 'removePointer',\n 'windowBlur',\n]\n\nfunction install(scope: Scope) {\n const listeners = {} as any\n\n for (const method of methodNames) {\n listeners[method] = doOnInteractions(method, scope)\n }\n\n const pEventTypes = browser.pEventTypes\n let docEvents: typeof scope.interactions.docEvents\n\n if (domObjects.PointerEvent) {\n docEvents = [\n { type: pEventTypes.down, listener: releasePointersOnRemovedEls },\n { type: pEventTypes.down, listener: listeners.pointerDown },\n { type: pEventTypes.move, listener: listeners.pointerMove },\n { type: pEventTypes.up, listener: listeners.pointerUp },\n { type: pEventTypes.cancel, listener: listeners.pointerUp },\n ]\n } else {\n docEvents = [\n { type: 'mousedown', listener: listeners.pointerDown },\n { type: 'mousemove', listener: listeners.pointerMove },\n { type: 'mouseup', listener: listeners.pointerUp },\n\n { type: 'touchstart', listener: releasePointersOnRemovedEls },\n { type: 'touchstart', listener: listeners.pointerDown },\n { type: 'touchmove', listener: listeners.pointerMove },\n { type: 'touchend', listener: listeners.pointerUp },\n { type: 'touchcancel', listener: listeners.pointerUp },\n ]\n }\n\n docEvents.push({\n type: 'blur',\n listener(event) {\n for (const interaction of scope.interactions.list) {\n interaction.documentBlur(event)\n }\n },\n })\n\n // for ignoring browser's simulated mouse events\n scope.prevTouchTime = 0\n\n scope.Interaction = class extends InteractionBase {\n get pointerMoveTolerance() {\n return scope.interactions.pointerMoveTolerance\n }\n\n set pointerMoveTolerance(value) {\n scope.interactions.pointerMoveTolerance = value\n }\n\n _now() {\n return scope.now()\n }\n }\n\n scope.interactions = {\n // all active and idle interactions\n list: [],\n new(options: { pointerType?: string; scopeFire?: Scope['fire'] }) {\n options.scopeFire = (name, arg) => scope.fire(name, arg)\n\n const interaction = new scope.Interaction(options as Required)\n\n scope.interactions.list.push(interaction)\n return interaction\n },\n listeners,\n docEvents,\n pointerMoveTolerance: 1,\n }\n\n function releasePointersOnRemovedEls() {\n // for all inactive touch interactions with pointers down\n for (const interaction of scope.interactions.list) {\n if (!interaction.pointerIsDown || interaction.pointerType !== 'touch' || interaction._interacting) {\n continue\n }\n\n // if a pointer is down on an element that is no longer in the DOM tree\n for (const pointer of interaction.pointers) {\n if (!scope.documents.some(({ doc }) => nodeContains(doc, pointer.downTarget))) {\n // remove the pointer from the interaction\n interaction.removePointer(pointer.pointer, pointer.event)\n }\n }\n }\n }\n\n scope.usePlugin(interactablePreventDefault)\n}\n\nfunction doOnInteractions(method: string, scope: Scope) {\n return function (event: Event) {\n const interactions = scope.interactions.list\n\n const pointerType = pointerUtils.getPointerType(event)\n const [eventTarget, curEventTarget] = pointerUtils.getEventTargets(event)\n const matches: any[] = [] // [ [pointer, interaction], ...]\n\n if (/^touch/.test(event.type)) {\n scope.prevTouchTime = scope.now()\n\n // @ts-expect-error\n for (const changedTouch of event.changedTouches) {\n const pointer = changedTouch\n const pointerId = pointerUtils.getPointerId(pointer)\n const searchDetails: SearchDetails = {\n pointer,\n pointerId,\n pointerType,\n eventType: event.type,\n eventTarget,\n curEventTarget,\n scope,\n }\n const interaction = getInteraction(searchDetails)\n\n matches.push([\n searchDetails.pointer,\n searchDetails.eventTarget,\n searchDetails.curEventTarget,\n interaction,\n ])\n }\n } else {\n let invalidPointer = false\n\n if (!browser.supportsPointerEvent && /mouse/.test(event.type)) {\n // ignore mouse events while touch interactions are active\n for (let i = 0; i < interactions.length && !invalidPointer; i++) {\n invalidPointer = interactions[i].pointerType !== 'mouse' && interactions[i].pointerIsDown\n }\n\n // try to ignore mouse events that are simulated by the browser\n // after a touch event\n invalidPointer =\n invalidPointer ||\n scope.now() - scope.prevTouchTime < 500 ||\n // on iOS and Firefox Mobile, MouseEvent.timeStamp is zero if simulated\n event.timeStamp === 0\n }\n\n if (!invalidPointer) {\n const searchDetails = {\n pointer: event as PointerEvent,\n pointerId: pointerUtils.getPointerId(event as PointerEvent),\n pointerType,\n eventType: event.type,\n curEventTarget,\n eventTarget,\n scope,\n }\n\n const interaction = getInteraction(searchDetails)\n\n matches.push([\n searchDetails.pointer,\n searchDetails.eventTarget,\n searchDetails.curEventTarget,\n interaction,\n ])\n }\n }\n\n // eslint-disable-next-line no-shadow\n for (const [pointer, eventTarget, curEventTarget, interaction] of matches) {\n interaction[method](pointer, event, eventTarget, curEventTarget)\n }\n }\n}\n\nfunction getInteraction(searchDetails: SearchDetails) {\n const { pointerType, scope } = searchDetails\n\n const foundInteraction = finder.search(searchDetails)\n const signalArg = { interaction: foundInteraction, searchDetails }\n\n scope.fire('interactions:find', signalArg)\n\n return signalArg.interaction || scope.interactions.new({ pointerType })\n}\n\nfunction onDocSignal(\n { doc, scope, options }: SignalArgs[T],\n eventMethodName: 'add' | 'remove',\n) {\n const {\n interactions: { docEvents },\n events,\n } = scope\n const eventMethod = events[eventMethodName]\n\n if (scope.browser.isIOS && !options.events) {\n options.events = { passive: false }\n }\n\n // delegate event listener\n for (const eventType in events.delegatedEvents) {\n eventMethod(doc, eventType, events.delegateListener)\n eventMethod(doc, eventType, events.delegateUseCapture, true)\n }\n\n const eventOptions = options && options.events\n\n for (const { type, listener } of docEvents) {\n eventMethod(doc, type, listener, eventOptions)\n }\n}\n\nconst interactions: Plugin = {\n id: 'core/interactions',\n install,\n listeners: {\n 'scope:add-document': (arg) => onDocSignal(arg, 'add'),\n 'scope:remove-document': (arg) => onDocSignal(arg, 'remove'),\n 'interactable:unset': ({ interactable }, scope) => {\n // Stop and destroy related interactions when an Interactable is unset\n for (let i = scope.interactions.list.length - 1; i >= 0; i--) {\n const interaction = scope.interactions.list[i]\n\n if (interaction.interactable !== interactable) {\n continue\n }\n\n interaction.stop()\n scope.fire('interactions:destroy', { interaction })\n interaction.destroy()\n\n if (scope.interactions.list.length > 2) {\n scope.interactions.list.splice(i, 1)\n }\n }\n },\n },\n onDocSignal,\n doOnInteractions,\n methodNames,\n}\n\nexport default interactions\n", "/* eslint-disable no-dupe-class-members */\nimport * as arr from '@interactjs/utils/arr'\nimport browser from '@interactjs/utils/browser'\nimport clone from '@interactjs/utils/clone'\nimport { getElementRect, matchesUpTo, nodeContains, trySelector } from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\nimport isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'\nimport normalizeListeners from '@interactjs/utils/normalizeListeners'\nimport { getWindow } from '@interactjs/utils/window'\n\nimport type { Scope } from '@interactjs/core/scope'\nimport type {\n ActionMap,\n ActionMethod,\n ActionName,\n Actions,\n Context,\n Element,\n EventTypes,\n Listeners,\n ListenersArg,\n OrBoolean,\n Target,\n} from '@interactjs/core/types'\n\nimport { Eventable } from './Eventable'\nimport type { ActionDefaults, Defaults, OptionsArg, PerActionDefaults, Options } from './options'\n\ntype IgnoreValue = string | Element | boolean\ntype DeltaSource = 'page' | 'client'\n\nconst enum OnOffMethod {\n On,\n Off,\n}\n\n/**\n * ```ts\n * const interactable = interact('.cards')\n * .draggable({\n * listeners: { move: event => console.log(event.type, event.pageX, event.pageY) }\n * })\n * .resizable({\n * listeners: { move: event => console.log(event.rect) },\n * modifiers: [interact.modifiers.restrictEdges({ outer: 'parent' })]\n * })\n * ```\n */\nexport class Interactable implements Partial {\n /** @internal */ get _defaults(): Defaults {\n return {\n base: {},\n perAction: {},\n actions: {} as ActionDefaults,\n }\n }\n\n readonly target: Target\n /** @internal */ readonly options!: Required\n /** @internal */ readonly _actions: Actions\n /** @internal */ readonly events = new Eventable()\n /** @internal */ readonly _context: Context\n /** @internal */ readonly _win: Window\n /** @internal */ readonly _doc: Document\n /** @internal */ readonly _scopeEvents: Scope['events']\n\n constructor(\n target: Target,\n options: any,\n defaultContext: Document | Element,\n scopeEvents: Scope['events'],\n ) {\n this._actions = options.actions\n this.target = target\n this._context = options.context || defaultContext\n this._win = getWindow(trySelector(target) ? this._context : target)\n this._doc = this._win.document\n this._scopeEvents = scopeEvents\n\n this.set(options)\n }\n\n setOnEvents(actionName: ActionName, phases: NonNullable) {\n if (is.func(phases.onstart)) {\n this.on(`${actionName}start`, phases.onstart)\n }\n if (is.func(phases.onmove)) {\n this.on(`${actionName}move`, phases.onmove)\n }\n if (is.func(phases.onend)) {\n this.on(`${actionName}end`, phases.onend)\n }\n if (is.func(phases.oninertiastart)) {\n this.on(`${actionName}inertiastart`, phases.oninertiastart)\n }\n\n return this\n }\n\n updatePerActionListeners(actionName: ActionName, prev: Listeners | undefined, cur: Listeners | undefined) {\n const actionFilter = (this._actions.map[actionName] as { filterEventType?: (type: string) => boolean })\n ?.filterEventType\n const filter = (type: string) =>\n (actionFilter == null || actionFilter(type)) && isNonNativeEvent(type, this._actions)\n\n if (is.array(prev) || is.object(prev)) {\n this._onOff(OnOffMethod.Off, actionName, prev, undefined, filter)\n }\n\n if (is.array(cur) || is.object(cur)) {\n this._onOff(OnOffMethod.On, actionName, cur, undefined, filter)\n }\n }\n\n setPerAction(actionName: ActionName, options: OrBoolean) {\n const defaults = this._defaults\n\n // for all the default per-action options\n for (const optionName_ in options) {\n const optionName = optionName_ as keyof PerActionDefaults\n const actionOptions = this.options[actionName]\n const optionValue: any = options[optionName]\n\n // remove old event listeners and add new ones\n if (optionName === 'listeners') {\n this.updatePerActionListeners(actionName, actionOptions.listeners, optionValue as Listeners)\n }\n\n // if the option value is an array\n if (is.array(optionValue)) {\n ;(actionOptions[optionName] as any) = arr.from(optionValue)\n }\n // if the option value is an object\n else if (is.plainObject(optionValue)) {\n // copy the object\n ;(actionOptions[optionName] as any) = extend(\n actionOptions[optionName] || ({} as any),\n clone(optionValue),\n )\n\n // set anabled field to true if it exists in the defaults\n if (\n is.object(defaults.perAction[optionName]) &&\n 'enabled' in (defaults.perAction[optionName] as any)\n ) {\n ;(actionOptions[optionName] as any).enabled = optionValue.enabled !== false\n }\n }\n // if the option value is a boolean and the default is an object\n else if (is.bool(optionValue) && is.object(defaults.perAction[optionName])) {\n ;(actionOptions[optionName] as any).enabled = optionValue\n }\n // if it's anything else, do a plain assignment\n else {\n ;(actionOptions[optionName] as any) = optionValue\n }\n }\n }\n\n /**\n * The default function to get an Interactables bounding rect. Can be\n * overridden using {@link Interactable.rectChecker}.\n *\n * @param {Element} [element] The element to measure.\n * @return {Rect} The object's bounding rectangle.\n */\n getRect(element: Element) {\n element = element || (is.element(this.target) ? this.target : null)\n\n if (is.string(this.target)) {\n element = element || this._context.querySelector(this.target)\n }\n\n return getElementRect(element)\n }\n\n /**\n * Returns or sets the function used to calculate the interactable's\n * element's rectangle\n *\n * @param {function} [checker] A function which returns this Interactable's\n * bounding rectangle. See {@link Interactable.getRect}\n * @return {function | object} The checker function or this Interactable\n */\n rectChecker(): (element: Element) => any | null\n rectChecker(checker: (element: Element) => any): this\n rectChecker(checker?: (element: Element) => any) {\n if (is.func(checker)) {\n this.getRect = (element) => {\n const rect = extend({}, checker.apply(this, element))\n\n if (!(('width' in rect) as unknown)) {\n rect.width = rect.right - rect.left\n rect.height = rect.bottom - rect.top\n }\n\n return rect\n }\n\n return this\n }\n\n if (checker === null) {\n delete (this as Partial).getRect\n\n return this\n }\n\n return this.getRect\n }\n\n /** @internal */\n _backCompatOption(optionName: keyof Options, newValue: any) {\n if (trySelector(newValue) || is.object(newValue)) {\n ;(this.options[optionName] as any) = newValue\n\n for (const action in this._actions.map) {\n ;(this.options[action as keyof ActionMap] as any)[optionName] = newValue\n }\n\n return this\n }\n\n return this.options[optionName]\n }\n\n /**\n * Gets or sets the origin of the Interactable's element. The x and y\n * of the origin will be subtracted from action event coordinates.\n *\n * @param {Element | object | string} [origin] An HTML or SVG Element whose\n * rect will be used, an object eg. { x: 0, y: 0 } or string 'parent', 'self'\n * or any CSS selector\n *\n * @return {object} The current origin or this Interactable\n */\n origin(newValue: any) {\n return this._backCompatOption('origin', newValue)\n }\n\n /**\n * Returns or sets the mouse coordinate types used to calculate the\n * movement of the pointer.\n *\n * @param {string} [newValue] Use 'client' if you will be scrolling while\n * interacting; Use 'page' if you want autoScroll to work\n * @return {string | object} The current deltaSource or this Interactable\n */\n deltaSource(): DeltaSource\n deltaSource(newValue: DeltaSource): this\n deltaSource(newValue?: DeltaSource) {\n if (newValue === 'page' || newValue === 'client') {\n this.options.deltaSource = newValue\n\n return this\n }\n\n return this.options.deltaSource\n }\n\n /** @internal */\n getAllElements(): Element[] {\n const { target } = this\n\n if (is.string(target)) {\n return Array.from(this._context.querySelectorAll(target))\n }\n\n if (is.func(target) && (target as any).getAllElements) {\n return (target as any).getAllElements()\n }\n\n return is.element(target) ? [target] : []\n }\n\n /**\n * Gets the selector context Node of the Interactable. The default is\n * `window.document`.\n *\n * @return {Node} The context Node of this Interactable\n */\n context() {\n return this._context\n }\n\n inContext(element: Document | Node) {\n return this._context === element.ownerDocument || nodeContains(this._context, element)\n }\n\n /** @internal */\n testIgnoreAllow(\n this: Interactable,\n options: { ignoreFrom?: IgnoreValue; allowFrom?: IgnoreValue },\n targetNode: Node,\n eventTarget: Node,\n ) {\n return (\n !this.testIgnore(options.ignoreFrom, targetNode, eventTarget) &&\n this.testAllow(options.allowFrom, targetNode, eventTarget)\n )\n }\n\n /** @internal */\n testAllow(this: Interactable, allowFrom: IgnoreValue | undefined, targetNode: Node, element: Node) {\n if (!allowFrom) {\n return true\n }\n\n if (!is.element(element)) {\n return false\n }\n\n if (is.string(allowFrom)) {\n return matchesUpTo(element, allowFrom, targetNode)\n } else if (is.element(allowFrom)) {\n return nodeContains(allowFrom, element)\n }\n\n return false\n }\n\n /** @internal */\n testIgnore(this: Interactable, ignoreFrom: IgnoreValue | undefined, targetNode: Node, element: Node) {\n if (!ignoreFrom || !is.element(element)) {\n return false\n }\n\n if (is.string(ignoreFrom)) {\n return matchesUpTo(element, ignoreFrom, targetNode)\n } else if (is.element(ignoreFrom)) {\n return nodeContains(ignoreFrom, element)\n }\n\n return false\n }\n\n /**\n * Calls listeners for the given InteractEvent type bound globally\n * and directly to this Interactable\n *\n * @param {InteractEvent} iEvent The InteractEvent object to be fired on this\n * Interactable\n * @return {Interactable} this Interactable\n */\n fire(iEvent: E) {\n this.events.fire(iEvent)\n\n return this\n }\n\n /** @internal */\n _onOff(\n method: OnOffMethod,\n typeArg: EventTypes,\n listenerArg?: ListenersArg | null,\n options?: any,\n filter?: (type: string) => boolean,\n ) {\n if (is.object(typeArg) && !is.array(typeArg)) {\n options = listenerArg\n listenerArg = null\n }\n\n const listeners = normalizeListeners(typeArg, listenerArg, filter)\n\n for (let type in listeners) {\n if (type === 'wheel') {\n type = browser.wheelEvent\n }\n\n for (const listener of listeners[type]) {\n // if it is an action event type\n if (isNonNativeEvent(type, this._actions)) {\n this.events[method === OnOffMethod.On ? 'on' : 'off'](type, listener)\n }\n // delegated event\n else if (is.string(this.target)) {\n this._scopeEvents[method === OnOffMethod.On ? 'addDelegate' : 'removeDelegate'](\n this.target,\n this._context,\n type,\n listener,\n options,\n )\n }\n // remove listener from this Interactable's element\n else {\n this._scopeEvents[method === OnOffMethod.On ? 'add' : 'remove'](\n this.target,\n type,\n listener,\n options,\n )\n }\n }\n }\n\n return this\n }\n\n /**\n * Binds a listener for an InteractEvent, pointerEvent or DOM event.\n *\n * @param {string | array | object} types The types of events to listen\n * for\n * @param {function | array | object} [listener] The event listener function(s)\n * @param {object | boolean} [options] options object or useCapture flag for\n * addEventListener\n * @return {Interactable} This Interactable\n */\n on(types: EventTypes, listener?: ListenersArg, options?: any) {\n return this._onOff(OnOffMethod.On, types, listener, options)\n }\n\n /**\n * Removes an InteractEvent, pointerEvent or DOM event listener.\n *\n * @param {string | array | object} types The types of events that were\n * listened for\n * @param {function | array | object} [listener] The event listener function(s)\n * @param {object | boolean} [options] options object or useCapture flag for\n * removeEventListener\n * @return {Interactable} This Interactable\n */\n off(types: string | string[] | EventTypes, listener?: ListenersArg, options?: any) {\n return this._onOff(OnOffMethod.Off, types, listener, options)\n }\n\n /**\n * Reset the options of this Interactable\n *\n * @param {object} options The new settings to apply\n * @return {object} This Interactable\n */\n set(options: OptionsArg) {\n const defaults = this._defaults\n\n if (!is.object(options)) {\n options = {}\n }\n\n ;(this.options as Required) = clone(defaults.base) as Required\n\n for (const actionName_ in this._actions.methodDict) {\n const actionName = actionName_ as ActionName\n const methodName = this._actions.methodDict[actionName]\n\n this.options[actionName] = {}\n this.setPerAction(actionName, extend(extend({}, defaults.perAction), defaults.actions[actionName]))\n ;(this[methodName] as ActionMethod)(options[actionName])\n }\n\n for (const setting in options) {\n if (setting === 'getRect') {\n this.rectChecker(options.getRect)\n continue\n }\n\n if (is.func((this as any)[setting])) {\n ;(this as any)[setting](options[setting as keyof typeof options])\n }\n }\n\n return this\n }\n\n /**\n * Remove this interactable from the list of interactables and remove it's\n * action capabilities and event listeners\n */\n unset() {\n if (is.string(this.target)) {\n // remove delegated events\n for (const type in this._scopeEvents.delegatedEvents) {\n const delegated = this._scopeEvents.delegatedEvents[type]\n\n for (let i = delegated.length - 1; i >= 0; i--) {\n const { selector, context, listeners } = delegated[i]\n\n if (selector === this.target && context === this._context) {\n delegated.splice(i, 1)\n }\n\n for (let l = listeners.length - 1; l >= 0; l--) {\n this._scopeEvents.removeDelegate(\n this.target,\n this._context,\n type,\n listeners[l][0],\n listeners[l][1],\n )\n }\n }\n }\n } else {\n this._scopeEvents.remove(this.target, 'all')\n }\n }\n}\n", "import * as arr from '@interactjs/utils/arr'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\n\nimport type { Interactable } from '@interactjs/core/Interactable'\nimport type { OptionsArg, Options } from '@interactjs/core/options'\nimport type { Scope } from '@interactjs/core/scope'\nimport type { Target } from '@interactjs/core/types'\n\ndeclare module '@interactjs/core/scope' {\n interface SignalArgs {\n 'interactable:new': {\n interactable: Interactable\n target: Target\n options: OptionsArg\n win: Window\n }\n }\n}\n\nexport class InteractableSet {\n // all set interactables\n list: Interactable[] = []\n\n selectorMap: {\n [selector: string]: Interactable[]\n } = {}\n\n scope: Scope\n\n constructor(scope: Scope) {\n this.scope = scope\n scope.addListeners({\n 'interactable:unset': ({ interactable }) => {\n const { target } = interactable\n const interactablesOnTarget: Interactable[] = is.string(target)\n ? this.selectorMap[target]\n : (target as any)[this.scope.id]\n\n const targetIndex = arr.findIndex(interactablesOnTarget, (i) => i === interactable)\n interactablesOnTarget.splice(targetIndex, 1)\n },\n })\n }\n\n new(target: Target, options?: any): Interactable {\n options = extend(options || {}, {\n actions: this.scope.actions,\n })\n const interactable = new this.scope.Interactable(target, options, this.scope.document, this.scope.events)\n\n this.scope.addDocument(interactable._doc)\n this.list.push(interactable)\n\n if (is.string(target)) {\n if (!this.selectorMap[target]) {\n this.selectorMap[target] = []\n }\n this.selectorMap[target].push(interactable)\n } else {\n if (!(interactable.target as any)[this.scope.id]) {\n Object.defineProperty(target, this.scope.id, {\n value: [],\n configurable: true,\n })\n }\n\n ;(target as any)[this.scope.id].push(interactable)\n }\n\n this.scope.fire('interactable:new', {\n target,\n options,\n interactable,\n win: this.scope._win,\n })\n\n return interactable\n }\n\n getExisting(target: Target, options?: Options) {\n const context = (options && options.context) || this.scope.document\n const isSelector = is.string(target)\n const interactablesOnTarget: Interactable[] = isSelector\n ? this.selectorMap[target as string]\n : (target as any)[this.scope.id]\n\n if (!interactablesOnTarget) return undefined\n\n return arr.find(\n interactablesOnTarget,\n (interactable) =>\n interactable._context === context && (isSelector || interactable.inContext(target as any)),\n )\n }\n\n forEachMatch(node: Node, callback: (interactable: Interactable) => T): T | void {\n for (const interactable of this.list) {\n let ret: T\n\n if (\n (is.string(interactable.target)\n ? // target is a selector and the element matches\n is.element(node) && domUtils.matchesSelector(node, interactable.target)\n : // target is the element\n node === interactable.target) &&\n // the element is in context\n interactable.inContext(node)\n ) {\n ret = callback(interactable)\n }\n\n if (ret !== undefined) {\n return ret\n }\n }\n }\n}\n", "import browser from '@interactjs/utils/browser'\nimport clone from '@interactjs/utils/clone'\nimport domObjects from '@interactjs/utils/domObjects'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\nimport raf from '@interactjs/utils/raf'\nimport * as win from '@interactjs/utils/window'\n\nimport type Interaction from '@interactjs/core/Interaction'\n\nimport { Eventable } from './Eventable'\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './events'\nimport './interactions'\nimport events from './events'\nimport { Interactable as InteractableBase } from './Interactable'\nimport { InteractableSet } from './InteractableSet'\nimport { InteractEvent } from './InteractEvent'\nimport interactions from './interactions'\n/* eslint-enable import/no-duplicates */\nimport { createInteractStatic } from './InteractStatic'\nimport type { OptionsArg } from './options'\nimport { defaults } from './options'\nimport type { Actions } from './types'\n\nexport interface SignalArgs {\n 'scope:add-document': DocSignalArg\n 'scope:remove-document': DocSignalArg\n 'interactable:unset': { interactable: InteractableBase }\n 'interactable:set': { interactable: InteractableBase; options: OptionsArg }\n 'interactions:destroy': { interaction: Interaction }\n}\n\nexport type ListenerName = keyof SignalArgs\n\nexport type ListenerMap = {\n [P in ListenerName]?: (arg: SignalArgs[P], scope: Scope, signalName: P) => void | boolean\n}\n\ninterface DocSignalArg {\n doc: Document\n window: Window\n scope: Scope\n options: Record\n}\n\nexport interface Plugin {\n [key: string]: any\n id?: string\n listeners?: ListenerMap\n before?: string[]\n install?(scope: Scope, options?: any): void\n}\n\n/** @internal */\nexport class Scope {\n id = `__interact_scope_${Math.floor(Math.random() * 100)}`\n isInitialized = false\n listenerMaps: Array<{\n map: ListenerMap\n id?: string\n }> = []\n\n browser = browser\n defaults = clone(defaults) as typeof defaults\n Eventable = Eventable\n actions: Actions = {\n map: {},\n phases: {\n start: true,\n move: true,\n end: true,\n },\n methodDict: {} as any,\n phaselessTypes: {},\n }\n\n interactStatic = createInteractStatic(this)\n InteractEvent = InteractEvent\n Interactable: typeof InteractableBase\n interactables = new InteractableSet(this)\n\n // main window\n _win!: Window\n\n // main document\n document!: Document\n\n // main window\n window!: Window\n\n // all documents being listened to\n documents: Array<{ doc: Document; options: any }> = []\n\n _plugins: {\n list: Plugin[]\n map: { [id: string]: Plugin }\n } = {\n list: [],\n map: {},\n }\n\n constructor() {\n const scope = this\n\n this.Interactable = class extends InteractableBase {\n get _defaults() {\n return scope.defaults\n }\n\n set(this: T, options: OptionsArg) {\n super.set(options)\n\n scope.fire('interactable:set', {\n options,\n interactable: this,\n })\n\n return this\n }\n\n unset(this: InteractableBase) {\n super.unset()\n\n const index = scope.interactables.list.indexOf(this)\n if (index < 0) return\n\n scope.interactables.list.splice(index, 1)\n scope.fire('interactable:unset', { interactable: this })\n }\n }\n }\n\n addListeners(map: ListenerMap, id?: string) {\n this.listenerMaps.push({ id, map })\n }\n\n fire(name: T, arg: SignalArgs[T]): void | false {\n for (const {\n map: { [name]: listener },\n } of this.listenerMaps) {\n if (!!listener && listener(arg as any, this, name as never) === false) {\n return false\n }\n }\n }\n\n onWindowUnload = (event: BeforeUnloadEvent) => this.removeDocument(event.target as Document)\n\n init(window: Window | typeof globalThis) {\n return this.isInitialized ? this : initScope(this, window)\n }\n\n pluginIsInstalled(plugin: Plugin) {\n const { id } = plugin\n return id ? !!this._plugins.map[id] : this._plugins.list.indexOf(plugin) !== -1\n }\n\n usePlugin(plugin: Plugin, options?: { [key: string]: any }) {\n if (!this.isInitialized) {\n return this\n }\n\n if (this.pluginIsInstalled(plugin)) {\n return this\n }\n\n if (plugin.id) {\n this._plugins.map[plugin.id] = plugin\n }\n this._plugins.list.push(plugin)\n\n if (plugin.install) {\n plugin.install(this, options)\n }\n\n if (plugin.listeners && plugin.before) {\n let index = 0\n const len = this.listenerMaps.length\n const before = plugin.before.reduce((acc, id) => {\n acc[id] = true\n acc[pluginIdRoot(id)] = true\n return acc\n }, {})\n\n for (; index < len; index++) {\n const otherId = this.listenerMaps[index].id\n\n if (otherId && (before[otherId] || before[pluginIdRoot(otherId)])) {\n break\n }\n }\n\n this.listenerMaps.splice(index, 0, { id: plugin.id, map: plugin.listeners })\n } else if (plugin.listeners) {\n this.listenerMaps.push({ id: plugin.id, map: plugin.listeners })\n }\n\n return this\n }\n\n addDocument(doc: Document, options?: any): void | false {\n // do nothing if document is already known\n if (this.getDocIndex(doc) !== -1) {\n return false\n }\n\n const window = win.getWindow(doc)\n\n options = options ? extend({}, options) : {}\n\n this.documents.push({ doc, options })\n this.events.documents.push(doc)\n\n // don't add an unload event for the main document\n // so that the page may be cached in browser history\n if (doc !== this.document) {\n this.events.add(window, 'unload', this.onWindowUnload)\n }\n\n this.fire('scope:add-document', { doc, window, scope: this, options })\n }\n\n removeDocument(doc: Document) {\n const index = this.getDocIndex(doc)\n\n const window = win.getWindow(doc)\n const options = this.documents[index].options\n\n this.events.remove(window, 'unload', this.onWindowUnload)\n\n this.documents.splice(index, 1)\n this.events.documents.splice(index, 1)\n\n this.fire('scope:remove-document', { doc, window, scope: this, options })\n }\n\n getDocIndex(doc: Document) {\n for (let i = 0; i < this.documents.length; i++) {\n if (this.documents[i].doc === doc) {\n return i\n }\n }\n\n return -1\n }\n\n getDocOptions(doc: Document) {\n const docIndex = this.getDocIndex(doc)\n\n return docIndex === -1 ? null : this.documents[docIndex].options\n }\n\n now() {\n return (((this.window as any).Date as typeof Date) || Date).now()\n }\n}\n\n// Keep Scope class internal, but expose minimal interface to avoid broken types when Scope is stripped out\nexport interface Scope {\n fire(name: T, arg: SignalArgs[T]): void | false\n}\n\n/** @internal */\nexport function initScope(scope: Scope, window: Window | typeof globalThis) {\n scope.isInitialized = true\n\n if (is.window(window)) {\n win.init(window)\n }\n\n domObjects.init(window)\n browser.init(window)\n raf.init(window)\n\n // @ts-expect-error\n scope.window = window\n scope.document = window.document\n\n scope.usePlugin(interactions)\n scope.usePlugin(events)\n\n return scope\n}\n\nfunction pluginIdRoot(id: string) {\n return id && id.replace(/\\/.*$/, '')\n}\n", "import browser from '@interactjs/utils/browser'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport is from '@interactjs/utils/is'\nimport isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'\nimport { warnOnce } from '@interactjs/utils/misc'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\n\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { Context, EventTypes, Listener, ListenersArg, Target } from '@interactjs/core/types'\n\nimport type { Interactable } from './Interactable'\nimport type { Options } from './options'\n\n/**\n * ```js\n * interact('#draggable').draggable(true)\n *\n * var rectables = interact('rect')\n * rectables\n * .gesturable(true)\n * .on('gesturemove', function (event) {\n * // ...\n * })\n * ```\n *\n * The methods of this variable can be used to set elements as interactables\n * and also to change various default settings.\n *\n * Calling it as a function and passing an element or a valid CSS selector\n * string returns an Interactable object which has various methods to configure\n * it.\n *\n * @param {Element | string} target The HTML or SVG Element to interact with\n * or CSS selector\n * @return {Interactable}\n */\nexport interface InteractStatic {\n (target: Target, options?: Options): Interactable\n getPointerAverage: typeof pointerUtils.pointerAverage\n getTouchBBox: typeof pointerUtils.touchBBox\n getTouchDistance: typeof pointerUtils.touchDistance\n getTouchAngle: typeof pointerUtils.touchAngle\n getElementRect: typeof domUtils.getElementRect\n getElementClientRect: typeof domUtils.getElementClientRect\n matchesSelector: typeof domUtils.matchesSelector\n closest: typeof domUtils.closest\n /** @internal */ globalEvents: any\n version: string\n /** @internal */ scope: Scope\n /**\n * Use a plugin\n */\n use(\n plugin: Plugin,\n options?: {\n [key: string]: any\n },\n ): any\n /**\n * Check if an element or selector has been set with the `interact(target)`\n * function\n *\n * @return {boolean} Indicates if the element or CSS selector was previously\n * passed to interact\n */\n isSet(\n /* The Element or string being searched for */\n target: Target,\n options?: any,\n ): boolean\n on(type: string | EventTypes, listener: ListenersArg, options?: object): any\n off(type: EventTypes, listener: any, options?: object): any\n debug(): any\n /**\n * Whether or not the browser supports touch input\n */\n supportsTouch(): boolean\n /**\n * Whether or not the browser supports PointerEvents\n */\n supportsPointerEvent(): boolean\n /**\n * Cancels all interactions (end events are not fired)\n */\n stop(): InteractStatic\n /**\n * Returns or sets the distance the pointer must be moved before an action\n * sequence occurs. This also affects tolerance for tap events.\n */\n pointerMoveTolerance(\n /** The movement from the start position must be greater than this value */\n newValue?: number,\n ): InteractStatic | number\n addDocument(doc: Document, options?: object): void\n removeDocument(doc: Document): void\n}\n\nexport function createInteractStatic(scope: Scope): InteractStatic {\n const interact = ((target: Target, options: Options) => {\n let interactable = scope.interactables.getExisting(target, options)\n\n if (!interactable) {\n interactable = scope.interactables.new(target, options)\n interactable.events.global = interact.globalEvents\n }\n\n return interactable\n }) as InteractStatic\n\n // expose the functions used to calculate multi-touch properties\n interact.getPointerAverage = pointerUtils.pointerAverage\n interact.getTouchBBox = pointerUtils.touchBBox\n interact.getTouchDistance = pointerUtils.touchDistance\n interact.getTouchAngle = pointerUtils.touchAngle\n\n interact.getElementRect = domUtils.getElementRect\n interact.getElementClientRect = domUtils.getElementClientRect\n interact.matchesSelector = domUtils.matchesSelector\n interact.closest = domUtils.closest\n\n interact.globalEvents = {} as any\n\n // eslint-disable-next-line no-undef\n interact.version = process.env.npm_package_version\n interact.scope = scope\n interact.use = function (plugin, options) {\n this.scope.usePlugin(plugin, options)\n\n return this\n }\n\n interact.isSet = function (target: Target, options?: { context?: Context }): boolean {\n return !!this.scope.interactables.get(target, options && options.context)\n }\n\n interact.on = warnOnce(function on(type: string | EventTypes, listener: ListenersArg, options?: object) {\n if (is.string(type) && type.search(' ') !== -1) {\n type = type.trim().split(/ +/)\n }\n\n if (is.array(type)) {\n for (const eventType of type as any[]) {\n this.on(eventType, listener, options)\n }\n\n return this\n }\n\n if (is.object(type)) {\n for (const prop in type) {\n this.on(prop, (type as any)[prop], listener)\n }\n\n return this\n }\n\n // if it is an InteractEvent type, add listener to globalEvents\n if (isNonNativeEvent(type, this.scope.actions)) {\n // if this type of event was never bound\n if (!this.globalEvents[type]) {\n this.globalEvents[type] = [listener]\n } else {\n this.globalEvents[type].push(listener)\n }\n }\n // If non InteractEvent type, addEventListener to document\n else {\n this.scope.events.add(this.scope.document, type, listener as Listener, { options })\n }\n\n return this\n }, 'The interact.on() method is being deprecated')\n\n interact.off = warnOnce(function off(type: EventTypes, listener: any, options?: object) {\n if (is.string(type) && type.search(' ') !== -1) {\n type = type.trim().split(/ +/)\n }\n\n if (is.array(type)) {\n for (const eventType of type) {\n this.off(eventType, listener, options)\n }\n\n return this\n }\n\n if (is.object(type)) {\n for (const prop in type) {\n this.off(prop, type[prop], listener)\n }\n\n return this\n }\n\n if (isNonNativeEvent(type, this.scope.actions)) {\n let index: number\n\n if (type in this.globalEvents && (index = this.globalEvents[type].indexOf(listener)) !== -1) {\n this.globalEvents[type].splice(index, 1)\n }\n } else {\n this.scope.events.remove(this.scope.document, type, listener, options)\n }\n\n return this\n }, 'The interact.off() method is being deprecated')\n\n interact.debug = function () {\n return this.scope\n }\n\n interact.supportsTouch = function () {\n return browser.supportsTouch\n }\n\n interact.supportsPointerEvent = function () {\n return browser.supportsPointerEvent\n }\n\n interact.stop = function () {\n for (const interaction of this.scope.interactions.list) {\n interaction.stop()\n }\n\n return this\n }\n\n interact.pointerMoveTolerance = function (newValue?: number) {\n if (is.number(newValue)) {\n this.scope.interactions.pointerMoveTolerance = newValue\n\n return this\n }\n\n return this.scope.interactions.pointerMoveTolerance\n }\n\n interact.addDocument = function (doc: Document, options?: object) {\n this.scope.addDocument(doc, options)\n }\n\n interact.removeDocument = function (doc: Document) {\n this.scope.removeDocument(doc)\n }\n\n return interact\n}\n", "import { Scope } from '@interactjs/core/scope'\n\nconst scope = new Scope()\n\nconst interact = scope.interactStatic\n\nexport default interact\n\nconst _global = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this\nscope.init(_global)\n", "export default () => {}\n", "export default () => {}\n", "import type { Rect, Point } from '@interactjs/core/types'\nimport type { SnapFunction, SnapTarget } from '@interactjs/modifiers/snap/pointer'\n\nexport interface GridOptionsBase {\n range?: number\n limits?: Rect\n offset?: Point\n}\nexport interface GridOptionsXY extends GridOptionsBase {\n x: number\n y: number\n}\nexport interface GridOptionsTopLeft extends GridOptionsBase {\n top?: number\n left?: number\n}\nexport interface GridOptionsBottomRight extends GridOptionsBase {\n bottom?: number\n right?: number\n}\nexport interface GridOptionsWidthHeight extends GridOptionsBase {\n width?: number\n height?: number\n}\n\nexport type GridOptions = GridOptionsXY | GridOptionsTopLeft | GridOptionsBottomRight | GridOptionsWidthHeight\n\nexport default (grid: GridOptions) => {\n const coordFields = (\n [\n ['x', 'y'],\n ['left', 'top'],\n ['right', 'bottom'],\n ['width', 'height'],\n ] as const\n ).filter(([xField, yField]) => xField in grid || yField in grid)\n\n const gridFunc: SnapFunction & {\n grid: typeof grid\n coordFields: typeof coordFields\n } = (x, y) => {\n const {\n range,\n limits = {\n left: -Infinity,\n right: Infinity,\n top: -Infinity,\n bottom: Infinity,\n },\n offset = { x: 0, y: 0 },\n } = grid\n\n const result: SnapTarget & {\n grid: typeof grid\n } = { range, grid, x: null as number, y: null as number }\n\n for (const [xField, yField] of coordFields) {\n const gridx = Math.round((x - offset.x) / (grid as any)[xField])\n const gridy = Math.round((y - offset.y) / (grid as any)[yField])\n\n result[xField] = Math.max(limits.left, Math.min(limits.right, gridx * (grid as any)[xField] + offset.x))\n result[yField] = Math.max(limits.top, Math.min(limits.bottom, gridy * (grid as any)[yField] + offset.y))\n }\n\n return result\n }\n\n gridFunc.grid = grid\n gridFunc.coordFields = coordFields\n\n return gridFunc\n}\n", "import type { Plugin } from '@interactjs/core/scope'\nimport extend from '@interactjs/utils/extend'\n\nimport * as allSnappers from './all'\n\ndeclare module '@interactjs/core/InteractStatic' {\n export interface InteractStatic {\n snappers: typeof allSnappers\n createSnapGrid: typeof allSnappers.grid\n }\n}\n\nconst snappersPlugin: Plugin = {\n id: 'snappers',\n install(scope) {\n const { interactStatic: interact } = scope\n\n interact.snappers = extend(interact.snappers || {}, allSnappers)\n interact.createSnapGrid = interact.snappers.grid\n },\n}\n\nexport default snappersPlugin\n", "/**\n * @module modifiers/aspectRatio\n *\n * @description\n * This modifier forces elements to be resized with a specified dx/dy ratio.\n *\n * ```js\n * interact(target).resizable({\n * modifiers: [\n * interact.modifiers.snapSize({\n * targets: [ interact.snappers.grid({ x: 20, y: 20 }) ],\n * }),\n * interact.aspectRatio({ ratio: 'preserve' }),\n * ],\n * });\n * ```\n */\n\nimport type { Point, Rect, EdgeOptions } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport { addEdges } from '@interactjs/utils/rect'\n\nimport { makeModifier } from './base'\nimport { Modification } from './Modification'\nimport type { Modifier, ModifierModule, ModifierState } from './types'\n\nexport interface AspectRatioOptions {\n ratio?: number | 'preserve'\n equalDelta?: boolean\n modifiers?: Modifier[]\n enabled?: boolean\n}\n\nexport type AspectRatioState = ModifierState<\n AspectRatioOptions,\n {\n startCoords: Point\n startRect: Rect\n linkedEdges: EdgeOptions\n ratio: number\n equalDelta: boolean\n xIsPrimaryAxis: boolean\n edgeSign: {\n x: number\n y: number\n }\n subModification: Modification\n }\n>\n\nconst aspectRatio: ModifierModule = {\n start(arg) {\n const { state, rect, edges, pageCoords: coords } = arg\n let { ratio, enabled } = state.options\n const { equalDelta, modifiers } = state.options\n\n if (ratio === 'preserve') {\n ratio = rect.width / rect.height\n }\n\n state.startCoords = extend({}, coords)\n state.startRect = extend({}, rect)\n state.ratio = ratio\n state.equalDelta = equalDelta\n\n const linkedEdges = (state.linkedEdges = {\n top: edges.top || (edges.left && !edges.bottom),\n left: edges.left || (edges.top && !edges.right),\n bottom: edges.bottom || (edges.right && !edges.top),\n right: edges.right || (edges.bottom && !edges.left),\n })\n\n state.xIsPrimaryAxis = !!(edges.left || edges.right)\n\n if (state.equalDelta) {\n const sign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1)\n state.edgeSign = {\n x: sign,\n y: sign,\n }\n } else {\n state.edgeSign = {\n x: linkedEdges.left ? -1 : 1,\n y: linkedEdges.top ? -1 : 1,\n }\n }\n\n if (enabled !== false) {\n extend(edges, linkedEdges)\n }\n\n if (!modifiers?.length) return\n\n const subModification = new Modification(arg.interaction)\n\n subModification.copyFrom(arg.interaction.modification)\n subModification.prepareStates(modifiers)\n\n state.subModification = subModification\n subModification.startAll({ ...arg })\n },\n\n set(arg) {\n const { state, rect, coords } = arg\n const { linkedEdges } = state\n const initialCoords = extend({}, coords)\n const aspectMethod = state.equalDelta ? setEqualDelta : setRatio\n\n extend(arg.edges, linkedEdges)\n aspectMethod(state, state.xIsPrimaryAxis, coords, rect)\n\n if (!state.subModification) {\n return null\n }\n\n const correctedRect = extend({}, rect)\n\n addEdges(linkedEdges, correctedRect, {\n x: coords.x - initialCoords.x,\n y: coords.y - initialCoords.y,\n })\n\n const result = state.subModification.setAll({\n ...arg,\n rect: correctedRect,\n edges: linkedEdges,\n pageCoords: coords,\n prevCoords: coords,\n prevRect: correctedRect,\n })\n\n const { delta } = result\n\n if (result.changed) {\n const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y)\n\n // do aspect modification again with critical edge axis as primary\n aspectMethod(state, xIsCriticalAxis, result.coords, result.rect)\n extend(coords, result.coords)\n }\n\n return result.eventProps\n },\n\n defaults: {\n ratio: 'preserve',\n equalDelta: false,\n modifiers: [],\n enabled: false,\n },\n}\n\nfunction setEqualDelta({ startCoords, edgeSign }: AspectRatioState, xIsPrimaryAxis: boolean, coords: Point) {\n if (xIsPrimaryAxis) {\n coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign.y\n } else {\n coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign.x\n }\n}\n\nfunction setRatio(\n { startRect, startCoords, ratio, edgeSign }: AspectRatioState,\n xIsPrimaryAxis: boolean,\n coords: Point,\n rect: Rect,\n) {\n if (xIsPrimaryAxis) {\n const newHeight = rect.width / ratio\n\n coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign.y\n } else {\n const newWidth = rect.height * ratio\n\n coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign.x\n }\n}\n\nexport default makeModifier(aspectRatio, 'aspectRatio')\nexport { aspectRatio }\n", "import type { ModifierFunction } from './types'\n\nconst noop = (() => {}) as unknown as ModifierFunction\n\nnoop._defaults = {}\n\nexport default noop\n", "import type Interaction from '@interactjs/core/Interaction'\nimport type { RectResolvable, Rect, Point } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\nimport * as rectUtils from '@interactjs/utils/rect'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg, ModifierModule, ModifierState } from '../types'\n\nexport interface RestrictOptions {\n // where to drag over\n restriction: RectResolvable<[number, number, Interaction]>\n // what part of self is allowed to drag over\n elementRect: Rect\n offset: Rect\n // restrict just before the end drag\n endOnly: boolean\n enabled?: boolean\n}\n\nexport type RestrictState = ModifierState<\n RestrictOptions,\n {\n offset: Rect\n }\n>\n\nfunction start({ rect, startOffset, state, interaction, pageCoords }: ModifierArg) {\n const { options } = state\n const { elementRect } = options\n const offset: Rect = extend(\n {\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n },\n options.offset || {},\n )\n\n if (rect && elementRect) {\n const restriction = getRestrictionRect(options.restriction, interaction, pageCoords)\n\n if (restriction) {\n const widthDiff = restriction.right - restriction.left - rect.width\n const heightDiff = restriction.bottom - restriction.top - rect.height\n\n if (widthDiff < 0) {\n offset.left += widthDiff\n offset.right += widthDiff\n }\n if (heightDiff < 0) {\n offset.top += heightDiff\n offset.bottom += heightDiff\n }\n }\n\n offset.left += startOffset.left - rect.width * elementRect.left\n offset.top += startOffset.top - rect.height * elementRect.top\n\n offset.right += startOffset.right - rect.width * (1 - elementRect.right)\n offset.bottom += startOffset.bottom - rect.height * (1 - elementRect.bottom)\n }\n\n state.offset = offset\n}\n\nfunction set({ coords, interaction, state }: ModifierArg) {\n const { options, offset } = state\n\n const restriction = getRestrictionRect(options.restriction, interaction, coords)\n\n if (!restriction) return\n\n const rect = rectUtils.xywhToTlbr(restriction)\n\n coords.x = Math.max(Math.min(rect.right - offset.right, coords.x), rect.left + offset.left)\n coords.y = Math.max(Math.min(rect.bottom - offset.bottom, coords.y), rect.top + offset.top)\n}\n\nexport function getRestrictionRect(\n value: RectResolvable<[number, number, Interaction]>,\n interaction: Interaction,\n coords?: Point,\n) {\n if (is.func(value)) {\n return rectUtils.resolveRectLike(value, interaction.interactable, interaction.element, [\n coords.x,\n coords.y,\n interaction,\n ])\n } else {\n return rectUtils.resolveRectLike(value, interaction.interactable, interaction.element)\n }\n}\n\nconst defaults: RestrictOptions = {\n restriction: null,\n elementRect: null,\n offset: null,\n endOnly: false,\n enabled: false,\n}\n\nconst restrict: ModifierModule = {\n start,\n set,\n defaults,\n}\n\nexport default makeModifier(restrict, 'restrict')\nexport { restrict }\n", "// This modifier adds the options.resize.restrictEdges setting which sets min and\n// max for the top, left, bottom and right edges of the target being resized.\n//\n// interact(target).resize({\n// edges: { top: true, left: true },\n// restrictEdges: {\n// inner: { top: 200, left: 200, right: 400, bottom: 400 },\n// outer: { top: 0, left: 0, right: 600, bottom: 600 },\n// },\n// })\n\nimport type { Point, Rect } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport * as rectUtils from '@interactjs/utils/rect'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg, ModifierState } from '../types'\n\nimport type { RestrictOptions } from './pointer'\nimport { getRestrictionRect } from './pointer'\n\nexport interface RestrictEdgesOptions {\n inner: RestrictOptions['restriction']\n outer: RestrictOptions['restriction']\n offset?: RestrictOptions['offset']\n endOnly: boolean\n enabled?: boolean\n}\n\nexport type RestrictEdgesState = ModifierState<\n RestrictEdgesOptions,\n {\n inner: Rect\n outer: Rect\n offset: RestrictEdgesOptions['offset']\n }\n>\n\nconst noInner = { top: +Infinity, left: +Infinity, bottom: -Infinity, right: -Infinity }\nconst noOuter = { top: -Infinity, left: -Infinity, bottom: +Infinity, right: +Infinity }\n\nfunction start({ interaction, startOffset, state }: ModifierArg) {\n const { options } = state\n let offset: Point\n\n if (options) {\n const offsetRect = getRestrictionRect(options.offset, interaction, interaction.coords.start.page)\n\n offset = rectUtils.rectToXY(offsetRect)\n }\n\n offset = offset || { x: 0, y: 0 }\n\n state.offset = {\n top: offset.y + startOffset.top,\n left: offset.x + startOffset.left,\n bottom: offset.y - startOffset.bottom,\n right: offset.x - startOffset.right,\n }\n}\n\nfunction set({ coords, edges, interaction, state }: ModifierArg) {\n const { offset, options } = state\n\n if (!edges) {\n return\n }\n\n const page = extend({}, coords)\n const inner = getRestrictionRect(options.inner, interaction, page) || ({} as Rect)\n const outer = getRestrictionRect(options.outer, interaction, page) || ({} as Rect)\n\n fixRect(inner, noInner)\n fixRect(outer, noOuter)\n\n if (edges.top) {\n coords.y = Math.min(Math.max(outer.top + offset.top, page.y), inner.top + offset.top)\n } else if (edges.bottom) {\n coords.y = Math.max(Math.min(outer.bottom + offset.bottom, page.y), inner.bottom + offset.bottom)\n }\n if (edges.left) {\n coords.x = Math.min(Math.max(outer.left + offset.left, page.x), inner.left + offset.left)\n } else if (edges.right) {\n coords.x = Math.max(Math.min(outer.right + offset.right, page.x), inner.right + offset.right)\n }\n}\n\nfunction fixRect(rect: Rect, defaults: Rect) {\n for (const edge of ['top', 'left', 'bottom', 'right']) {\n if (!(edge in rect)) {\n rect[edge] = defaults[edge]\n }\n }\n\n return rect\n}\n\nconst defaults: RestrictEdgesOptions = {\n inner: null,\n outer: null,\n offset: null,\n endOnly: false,\n enabled: false,\n}\n\nconst restrictEdges = {\n noInner,\n noOuter,\n start,\n set,\n defaults,\n}\n\nexport default makeModifier(restrictEdges, 'restrictEdges')\nexport { restrictEdges }\n", "import extend from '@interactjs/utils/extend'\n\nimport { makeModifier } from '../base'\n\nimport { restrict } from './pointer'\n\nconst defaults = extend(\n {\n get elementRect() {\n return { top: 0, left: 0, bottom: 1, right: 1 }\n },\n set elementRect(_) {},\n },\n restrict.defaults,\n)\n\nconst restrictRect = {\n start: restrict.start,\n set: restrict.set,\n defaults,\n}\n\nexport default makeModifier(restrictRect, 'restrictRect')\nexport { restrictRect }\n", "import type { Point, Rect, Size } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport * as rectUtils from '@interactjs/utils/rect'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg, ModifierState } from '../types'\n\nimport type { RestrictEdgesState } from './edges'\nimport { restrictEdges } from './edges'\nimport type { RestrictOptions } from './pointer'\nimport { getRestrictionRect } from './pointer'\n\nconst noMin = { width: -Infinity, height: -Infinity }\nconst noMax = { width: +Infinity, height: +Infinity }\n\nexport interface RestrictSizeOptions {\n min?: Size | Point | RestrictOptions['restriction']\n max?: Size | Point | RestrictOptions['restriction']\n endOnly: boolean\n enabled?: boolean\n}\n\nfunction start(arg: ModifierArg) {\n return restrictEdges.start(arg)\n}\n\nexport type RestrictSizeState = RestrictEdgesState &\n ModifierState<\n RestrictSizeOptions & { inner: Rect; outer: Rect },\n {\n min: Rect\n max: Rect\n }\n >\n\nfunction set(arg: ModifierArg) {\n const { interaction, state, rect, edges } = arg\n const { options } = state\n\n if (!edges) {\n return\n }\n\n const minSize =\n rectUtils.tlbrToXywh(getRestrictionRect(options.min as any, interaction, arg.coords)) || noMin\n const maxSize =\n rectUtils.tlbrToXywh(getRestrictionRect(options.max as any, interaction, arg.coords)) || noMax\n\n state.options = {\n endOnly: options.endOnly,\n inner: extend({}, restrictEdges.noInner),\n outer: extend({}, restrictEdges.noOuter),\n }\n\n if (edges.top) {\n state.options.inner.top = rect.bottom - minSize.height\n state.options.outer.top = rect.bottom - maxSize.height\n } else if (edges.bottom) {\n state.options.inner.bottom = rect.top + minSize.height\n state.options.outer.bottom = rect.top + maxSize.height\n }\n if (edges.left) {\n state.options.inner.left = rect.right - minSize.width\n state.options.outer.left = rect.right - maxSize.width\n } else if (edges.right) {\n state.options.inner.right = rect.left + minSize.width\n state.options.outer.right = rect.left + maxSize.width\n }\n\n restrictEdges.set(arg)\n\n state.options = options\n}\n\nconst defaults: RestrictSizeOptions = {\n min: null,\n max: null,\n endOnly: false,\n enabled: false,\n}\n\nconst restrictSize = {\n start,\n set,\n defaults,\n}\n\nexport default makeModifier(restrictSize, 'restrictSize')\nexport { restrictSize }\n", "import type { Interaction, InteractionProxy } from '@interactjs/core/Interaction'\nimport type { ActionName, Point, RectResolvable, Element } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport getOriginXY from '@interactjs/utils/getOriginXY'\nimport hypot from '@interactjs/utils/hypot'\nimport is from '@interactjs/utils/is'\nimport { resolveRectLike, rectToXY } from '@interactjs/utils/rect'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg, ModifierState } from '../types'\n\nexport interface Offset {\n x: number\n y: number\n index: number\n relativePoint?: Point | null\n}\n\nexport interface SnapPosition {\n x?: number\n y?: number\n range?: number\n offset?: Offset\n [index: string]: any\n}\n\nexport type SnapFunction = (\n x: number,\n y: number,\n interaction: InteractionProxy,\n offset: Offset,\n index: number,\n) => SnapPosition\nexport type SnapTarget = SnapPosition | SnapFunction\nexport interface SnapOptions {\n targets?: SnapTarget[]\n // target range\n range?: number\n // self points for snapping. [0,0] = top left, [1,1] = bottom right\n relativePoints?: Point[]\n // startCoords = offset snapping from drag start page position\n offset?: Point | RectResolvable<[Interaction]> | 'startCoords'\n offsetWithOrigin?: boolean\n origin?: RectResolvable<[Element]> | Point\n endOnly?: boolean\n enabled?: boolean\n}\n\nexport type SnapState = ModifierState<\n SnapOptions,\n {\n offsets?: Offset[]\n closest?: any\n targetFields?: string[][]\n }\n>\n\nfunction start(arg: ModifierArg) {\n const { interaction, interactable, element, rect, state, startOffset } = arg\n const { options } = state\n const origin = options.offsetWithOrigin ? getOrigin(arg) : { x: 0, y: 0 }\n\n let snapOffset: Point\n\n if (options.offset === 'startCoords') {\n snapOffset = {\n x: interaction.coords.start.page.x,\n y: interaction.coords.start.page.y,\n }\n } else {\n const offsetRect = resolveRectLike(options.offset as any, interactable, element, [interaction])\n\n snapOffset = rectToXY(offsetRect) || { x: 0, y: 0 }\n snapOffset.x += origin.x\n snapOffset.y += origin.y\n }\n\n const { relativePoints } = options\n\n state.offsets =\n rect && relativePoints && relativePoints.length\n ? relativePoints.map((relativePoint, index) => ({\n index,\n relativePoint,\n x: startOffset.left - rect.width * relativePoint.x + snapOffset.x,\n y: startOffset.top - rect.height * relativePoint.y + snapOffset.y,\n }))\n : [\n {\n index: 0,\n relativePoint: null,\n x: snapOffset.x,\n y: snapOffset.y,\n },\n ]\n}\n\nfunction set(arg: ModifierArg) {\n const { interaction, coords, state } = arg\n const { options, offsets } = state\n\n const origin = getOriginXY(interaction.interactable!, interaction.element!, interaction.prepared.name)\n const page = extend({}, coords)\n const targets: SnapPosition[] = []\n\n if (!options.offsetWithOrigin) {\n page.x -= origin.x\n page.y -= origin.y\n }\n\n for (const offset of offsets!) {\n const relativeX = page.x - offset.x\n const relativeY = page.y - offset.y\n\n for (let index = 0, len = options.targets!.length; index < len; index++) {\n const snapTarget = options.targets![index]\n let target: SnapPosition\n\n if (is.func(snapTarget)) {\n target = snapTarget(relativeX, relativeY, interaction._proxy, offset, index)\n } else {\n target = snapTarget\n }\n\n if (!target) {\n continue\n }\n\n targets.push({\n x: (is.number(target.x) ? target.x : relativeX) + offset.x,\n y: (is.number(target.y) ? target.y : relativeY) + offset.y,\n\n range: is.number(target.range) ? target.range : options.range,\n source: snapTarget,\n index,\n offset,\n })\n }\n }\n\n const closest = {\n target: null,\n inRange: false,\n distance: 0,\n range: 0,\n delta: { x: 0, y: 0 },\n }\n\n for (const target of targets) {\n const range = target.range\n const dx = target.x - page.x\n const dy = target.y - page.y\n const distance = hypot(dx, dy)\n let inRange = distance <= range\n\n // Infinite targets count as being out of range\n // compared to non infinite ones that are in range\n if (range === Infinity && closest.inRange && closest.range !== Infinity) {\n inRange = false\n }\n\n if (\n !closest.target ||\n (inRange\n ? // is the closest target in range?\n closest.inRange && range !== Infinity\n ? // the pointer is relatively deeper in this target\n distance / range < closest.distance / closest.range\n : // this target has Infinite range and the closest doesn't\n (range === Infinity && closest.range !== Infinity) ||\n // OR this target is closer that the previous closest\n distance < closest.distance\n : // The other is not in range and the pointer is closer to this target\n !closest.inRange && distance < closest.distance)\n ) {\n closest.target = target\n closest.distance = distance\n closest.range = range\n closest.inRange = inRange\n closest.delta.x = dx\n closest.delta.y = dy\n }\n }\n\n if (closest.inRange) {\n coords.x = closest.target.x\n coords.y = closest.target.y\n }\n\n state.closest = closest\n return closest\n}\n\nfunction getOrigin(arg: Partial>) {\n const { element } = arg.interaction\n const optionsOrigin = rectToXY(resolveRectLike(arg.state.options.origin as any, null, null, [element]))\n const origin = optionsOrigin || getOriginXY(arg.interactable, element, arg.interaction.prepared.name)\n\n return origin\n}\n\nconst defaults: SnapOptions = {\n range: Infinity,\n targets: null,\n offset: null,\n offsetWithOrigin: true,\n origin: null,\n relativePoints: null,\n endOnly: false,\n enabled: false,\n}\nconst snap = {\n start,\n set,\n defaults,\n}\n\nexport default makeModifier(snap, 'snap')\nexport { snap }\n", "// This modifier allows snapping of the size of targets during resize\n// interactions.\n\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg } from '../types'\n\nimport type { SnapOptions, SnapState } from './pointer'\nimport { snap } from './pointer'\n\nexport type SnapSizeOptions = Pick\n\nfunction start(arg: ModifierArg) {\n const { state, edges } = arg\n const { options } = state\n\n if (!edges) {\n return null\n }\n\n arg.state = {\n options: {\n targets: null,\n relativePoints: [\n {\n x: edges.left ? 0 : 1,\n y: edges.top ? 0 : 1,\n },\n ],\n offset: options.offset || 'self',\n origin: { x: 0, y: 0 },\n range: options.range,\n },\n }\n\n state.targetFields = state.targetFields || [\n ['width', 'height'],\n ['x', 'y'],\n ]\n\n snap.start(arg)\n state.offsets = arg.state.offsets\n\n arg.state = state\n}\n\nfunction set(arg) {\n const { interaction, state, coords } = arg\n const { options, offsets } = state\n const relative = {\n x: coords.x - offsets[0].x,\n y: coords.y - offsets[0].y,\n }\n\n state.options = extend({}, options)\n state.options.targets = []\n\n for (const snapTarget of options.targets || []) {\n let target\n\n if (is.func(snapTarget)) {\n target = snapTarget(relative.x, relative.y, interaction)\n } else {\n target = snapTarget\n }\n\n if (!target) {\n continue\n }\n\n for (const [xField, yField] of state.targetFields) {\n if (xField in target || yField in target) {\n target.x = target[xField]\n target.y = target[yField]\n\n break\n }\n }\n\n state.options.targets.push(target)\n }\n\n const returnValue = snap.set(arg)\n\n state.options = options\n\n return returnValue\n}\n\nconst defaults: SnapSizeOptions = {\n range: Infinity,\n targets: null,\n offset: null,\n endOnly: false,\n enabled: false,\n}\n\nconst snapSize = {\n start,\n set,\n defaults,\n}\n\nexport default makeModifier(snapSize, 'snapSize')\nexport { snapSize }\n", "/**\n * @module modifiers/snapEdges\n *\n * @description\n * This modifier allows snapping of the edges of targets during resize\n * interactions.\n *\n * ```js\n * interact(target).resizable({\n * snapEdges: {\n * targets: [interact.snappers.grid({ x: 100, y: 50 })],\n * },\n * })\n *\n * interact(target).resizable({\n * snapEdges: {\n * targets: [\n * interact.snappers.grid({\n * top: 50,\n * left: 50,\n * bottom: 100,\n * right: 100,\n * }),\n * ],\n * },\n * })\n * ```\n */\n\nimport clone from '@interactjs/utils/clone'\nimport extend from '@interactjs/utils/extend'\n\nimport { makeModifier } from '../base'\nimport type { ModifierArg, ModifierModule } from '../types'\n\nimport type { SnapOptions, SnapState } from './pointer'\nimport { snapSize } from './size'\n\nexport type SnapEdgesOptions = Pick\n\nfunction start(arg: ModifierArg) {\n const { edges } = arg\n\n if (!edges) {\n return null\n }\n\n arg.state.targetFields = arg.state.targetFields || [\n [edges.left ? 'left' : 'right', edges.top ? 'top' : 'bottom'],\n ]\n\n return snapSize.start(arg)\n}\n\nconst snapEdges: ModifierModule> = {\n start,\n set: snapSize.set,\n defaults: extend(clone(snapSize.defaults), {\n targets: undefined,\n range: undefined,\n offset: { x: 0, y: 0 },\n } as const),\n}\n\nexport default makeModifier(snapEdges, 'snapEdges')\nexport { snapEdges }\n", "/* eslint-disable n/no-extraneous-import, import/no-unresolved */\nimport aspectRatio from './aspectRatio'\nimport avoid from './avoid/avoid'\nimport restrictEdges from './restrict/edges'\nimport restrict from './restrict/pointer'\nimport restrictRect from './restrict/rect'\nimport restrictSize from './restrict/size'\nimport rubberband from './rubberband/rubberband'\nimport snapEdges from './snap/edges'\nimport snap from './snap/pointer'\nimport snapSize from './snap/size'\nimport spring from './spring/spring'\nimport transform from './transform/transform'\n\nexport default {\n aspectRatio,\n restrictEdges,\n restrict,\n restrictRect,\n restrictSize,\n snapEdges,\n snap,\n snapSize,\n\n spring,\n avoid,\n transform,\n rubberband,\n}\n", "import type { Plugin } from '@interactjs/core/scope'\nimport snappers from '@interactjs/snappers/plugin'\n\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './all'\nimport './base'\n\nimport all from './all'\nimport base from './base'\n/* eslint-enable import/no-duplicates */\n\ndeclare module '@interactjs/core/InteractStatic' {\n export interface InteractStatic {\n modifiers: typeof all\n }\n}\n\nconst modifiers: Plugin = {\n id: 'modifiers',\n install(scope) {\n const { interactStatic: interact } = scope\n\n scope.usePlugin(base)\n scope.usePlugin(snappers)\n\n interact.modifiers = all\n\n // for backwrads compatibility\n for (const type in all) {\n const { _defaults, _methods } = all[type as keyof typeof all]\n\n ;(_defaults as any)._methods = _methods\n ;(scope.defaults.perAction as any)[type] = _defaults\n }\n },\n}\n\nexport default modifiers\n", "import { BaseEvent } from '@interactjs/core/BaseEvent'\nimport type Interaction from '@interactjs/core/Interaction'\nimport type { PointerEventType, PointerType, Point } from '@interactjs/core/types'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\n\nexport class PointerEvent extends BaseEvent {\n declare type: T\n declare originalEvent: PointerEventType\n declare pointerId: number\n declare pointerType: string\n declare double: boolean\n declare pageX: number\n declare pageY: number\n declare clientX: number\n declare clientY: number\n declare dt: number\n declare eventable: any;\n [key: string]: any\n\n constructor(\n type: T,\n pointer: PointerType | PointerEvent,\n event: PointerEventType,\n eventTarget: Node,\n interaction: Interaction,\n timeStamp: number,\n ) {\n super(interaction)\n pointerUtils.pointerExtend(this, event)\n\n if (event !== pointer) {\n pointerUtils.pointerExtend(this, pointer)\n }\n\n this.timeStamp = timeStamp\n this.originalEvent = event\n this.type = type\n this.pointerId = pointerUtils.getPointerId(pointer)\n this.pointerType = pointerUtils.getPointerType(pointer)\n this.target = eventTarget\n this.currentTarget = null\n\n if (type === 'tap') {\n const pointerIndex = interaction.getPointerIndex(pointer)\n this.dt = this.timeStamp - interaction.pointers[pointerIndex].downTime\n\n const interval = this.timeStamp - interaction.tapTime\n\n this.double =\n !!interaction.prevTap &&\n interaction.prevTap.type !== 'doubletap' &&\n interaction.prevTap.target === this.target &&\n interval < 500\n } else if (type === 'doubletap') {\n this.dt = (pointer as PointerEvent<'tap'>).timeStamp - interaction.tapTime\n this.double = true\n }\n }\n\n _subtractOrigin({ x: originX, y: originY }: Point) {\n this.pageX -= originX\n this.pageY -= originY\n this.clientX -= originX\n this.clientY -= originY\n\n return this\n }\n\n _addOrigin({ x: originX, y: originY }: Point) {\n this.pageX += originX\n this.pageY += originY\n this.clientX += originX\n this.clientY += originY\n\n return this\n }\n\n /**\n * Prevent the default behaviour of the original Event\n */\n preventDefault() {\n this.originalEvent.preventDefault()\n }\n}\n", "import type { Eventable } from '@interactjs/core/Eventable'\nimport type { Interaction } from '@interactjs/core/Interaction'\nimport type { PerActionDefaults } from '@interactjs/core/options'\nimport type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\nimport type { Point, PointerType, PointerEventType, Element } from '@interactjs/core/types'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport getOriginXY from '@interactjs/utils/getOriginXY'\n\nimport { PointerEvent } from './PointerEvent'\n\nexport type EventTargetList = Array<{\n node: Node\n eventable: Eventable\n props: { [key: string]: any }\n}>\n\nexport interface PointerEventOptions extends PerActionDefaults {\n enabled?: undefined // not used\n holdDuration?: number\n ignoreFrom?: any\n allowFrom?: any\n origin?: Point | string | Element\n}\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n pointerEvents: typeof pointerEvents\n }\n}\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n prevTap?: PointerEvent\n tapTime?: number\n }\n}\n\ndeclare module '@interactjs/core/PointerInfo' {\n interface PointerInfo {\n hold?: {\n duration: number\n timeout: any\n }\n }\n}\n\ndeclare module '@interactjs/core/options' {\n interface ActionDefaults {\n pointerEvents: Options\n }\n}\n\ndeclare module '@interactjs/core/scope' {\n interface SignalArgs {\n 'pointerEvents:new': { pointerEvent: PointerEvent }\n 'pointerEvents:fired': {\n interaction: Interaction\n pointer: PointerType | PointerEvent\n event: PointerEventType | PointerEvent\n eventTarget: Node\n pointerEvent: PointerEvent\n targets?: EventTargetList\n type: string\n }\n 'pointerEvents:collect-targets': {\n interaction: Interaction\n pointer: PointerType | PointerEvent\n event: PointerEventType | PointerEvent\n eventTarget: Node\n targets?: EventTargetList\n type: string\n path: Node[]\n node: null\n }\n }\n}\n\nconst defaults: PointerEventOptions = {\n holdDuration: 600,\n ignoreFrom: null,\n allowFrom: null,\n origin: { x: 0, y: 0 },\n}\n\nconst pointerEvents: Plugin = {\n id: 'pointer-events/base',\n before: ['inertia', 'modifiers', 'auto-start', 'actions'],\n install,\n listeners: {\n 'interactions:new': addInteractionProps,\n 'interactions:update-pointer': addHoldInfo,\n 'interactions:move': moveAndClearHold,\n 'interactions:down': (arg, scope) => {\n downAndStartHold(arg, scope)\n fire(arg, scope)\n },\n 'interactions:up': (arg, scope) => {\n clearHold(arg)\n fire(arg, scope)\n tapAfterUp(arg, scope)\n },\n 'interactions:cancel': (arg, scope) => {\n clearHold(arg)\n fire(arg, scope)\n },\n },\n PointerEvent,\n fire,\n collectEventTargets,\n defaults,\n types: {\n down: true,\n move: true,\n up: true,\n cancel: true,\n tap: true,\n doubletap: true,\n hold: true,\n } as { [type: string]: true },\n}\n\nfunction fire(\n arg: {\n pointer: PointerType | PointerEvent\n event: PointerEventType | PointerEvent\n eventTarget: Node\n interaction: Interaction\n type: T\n targets?: EventTargetList\n },\n scope: Scope,\n) {\n const { interaction, pointer, event, eventTarget, type, targets = collectEventTargets(arg, scope) } = arg\n\n const pointerEvent = new PointerEvent(type, pointer, event, eventTarget, interaction, scope.now())\n\n scope.fire('pointerEvents:new', { pointerEvent })\n\n const signalArg = {\n interaction,\n pointer,\n event,\n eventTarget,\n targets,\n type,\n pointerEvent,\n }\n\n for (let i = 0; i < targets.length; i++) {\n const target = targets[i]\n\n for (const prop in target.props || {}) {\n ;(pointerEvent as any)[prop] = target.props[prop]\n }\n\n const origin = getOriginXY(target.eventable, target.node)\n\n pointerEvent._subtractOrigin(origin)\n pointerEvent.eventable = target.eventable\n pointerEvent.currentTarget = target.node\n\n target.eventable.fire(pointerEvent)\n\n pointerEvent._addOrigin(origin)\n\n if (\n pointerEvent.immediatePropagationStopped ||\n (pointerEvent.propagationStopped &&\n i + 1 < targets.length &&\n targets[i + 1].node !== pointerEvent.currentTarget)\n ) {\n break\n }\n }\n\n scope.fire('pointerEvents:fired', signalArg)\n\n if (type === 'tap') {\n // if pointerEvent should make a double tap, create and fire a doubletap\n // PointerEvent and use that as the prevTap\n const prevTap = pointerEvent.double\n ? fire(\n {\n interaction,\n pointer,\n event,\n eventTarget,\n type: 'doubletap',\n },\n scope,\n )\n : pointerEvent\n\n interaction.prevTap = prevTap\n interaction.tapTime = prevTap.timeStamp\n }\n\n return pointerEvent\n}\n\nfunction collectEventTargets(\n {\n interaction,\n pointer,\n event,\n eventTarget,\n type,\n }: {\n interaction: Interaction\n pointer: PointerType | PointerEvent\n event: PointerEventType | PointerEvent\n eventTarget: Node\n type: T\n },\n scope: Scope,\n) {\n const pointerIndex = interaction.getPointerIndex(pointer)\n const pointerInfo = interaction.pointers[pointerIndex]\n\n // do not fire a tap event if the pointer was moved before being lifted\n if (\n type === 'tap' &&\n (interaction.pointerWasMoved ||\n // or if the pointerup target is different to the pointerdown target\n !(pointerInfo && pointerInfo.downTarget === eventTarget))\n ) {\n return []\n }\n\n const path = domUtils.getPath(eventTarget as Element | Document)\n const signalArg = {\n interaction,\n pointer,\n event,\n eventTarget,\n type,\n path,\n targets: [] as EventTargetList,\n node: null,\n }\n\n for (const node of path) {\n signalArg.node = node\n\n scope.fire('pointerEvents:collect-targets', signalArg)\n }\n\n if (type === 'hold') {\n signalArg.targets = signalArg.targets.filter(\n (target) =>\n target.eventable.options.holdDuration === interaction.pointers[pointerIndex]?.hold?.duration,\n )\n }\n\n return signalArg.targets\n}\n\nfunction addInteractionProps({ interaction }) {\n interaction.prevTap = null // the most recent tap event on this interaction\n interaction.tapTime = 0 // time of the most recent tap event\n}\n\nfunction addHoldInfo({ down, pointerInfo }: SignalArgs['interactions:update-pointer']) {\n if (!down && pointerInfo.hold) {\n return\n }\n\n pointerInfo.hold = { duration: Infinity, timeout: null }\n}\n\nfunction clearHold({ interaction, pointerIndex }) {\n const hold = interaction.pointers[pointerIndex].hold\n\n if (hold && hold.timeout) {\n clearTimeout(hold.timeout)\n hold.timeout = null\n }\n}\n\nfunction moveAndClearHold(arg: SignalArgs['interactions:move'], scope: Scope) {\n const { interaction, pointer, event, eventTarget, duplicate } = arg\n\n if (!duplicate && (!interaction.pointerIsDown || interaction.pointerWasMoved)) {\n if (interaction.pointerIsDown) {\n clearHold(arg)\n }\n\n fire(\n {\n interaction,\n pointer,\n event,\n eventTarget: eventTarget as Element,\n type: 'move',\n },\n scope,\n )\n }\n}\n\nfunction downAndStartHold(\n { interaction, pointer, event, eventTarget, pointerIndex }: SignalArgs['interactions:down'],\n scope: Scope,\n) {\n const timer = interaction.pointers[pointerIndex].hold!\n const path = domUtils.getPath(eventTarget as Element | Document)\n const signalArg = {\n interaction,\n pointer,\n event,\n eventTarget,\n type: 'hold',\n targets: [] as EventTargetList,\n path,\n node: null,\n }\n\n for (const node of path) {\n signalArg.node = node\n\n scope.fire('pointerEvents:collect-targets', signalArg)\n }\n\n if (!signalArg.targets.length) return\n\n let minDuration = Infinity\n\n for (const target of signalArg.targets) {\n const holdDuration = target.eventable.options.holdDuration\n\n if (holdDuration < minDuration) {\n minDuration = holdDuration\n }\n }\n\n timer.duration = minDuration\n timer.timeout = setTimeout(() => {\n fire(\n {\n interaction,\n eventTarget,\n pointer,\n event,\n type: 'hold',\n },\n scope,\n )\n }, minDuration)\n}\n\nfunction tapAfterUp(\n { interaction, pointer, event, eventTarget }: SignalArgs['interactions:up'],\n scope: Scope,\n) {\n if (!interaction.pointerWasMoved) {\n fire({ interaction, eventTarget, pointer, event, type: 'tap' }, scope)\n }\n}\n\nfunction install(scope: Scope) {\n scope.pointerEvents = pointerEvents\n scope.defaults.actions.pointerEvents = pointerEvents.defaults\n extend(scope.actions.phaselessTypes, pointerEvents.types)\n}\n\nexport default pointerEvents\n", "import type Interaction from '@interactjs/core/Interaction'\nimport type { ListenerMap, Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\n\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './base'\nimport basePlugin from './base'\n/* eslint-enable import/no-duplicates */\nimport { type PointerEvent } from './PointerEvent'\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n holdIntervalHandle?: any\n }\n}\n\ndeclare module '@interactjs/pointer-events/PointerEvent' {\n interface PointerEvent {\n count?: number\n }\n}\n\ndeclare module '@interactjs/pointer-events/base' {\n interface PointerEventOptions {\n holdRepeatInterval?: number\n }\n}\n\nfunction install(scope: Scope) {\n scope.usePlugin(basePlugin)\n\n const { pointerEvents } = scope\n\n // don't repeat by default\n pointerEvents.defaults.holdRepeatInterval = 0\n pointerEvents.types.holdrepeat = scope.actions.phaselessTypes.holdrepeat = true\n}\n\nfunction onNew({ pointerEvent }: { pointerEvent: PointerEvent }) {\n if (pointerEvent.type !== 'hold') return\n\n pointerEvent.count = (pointerEvent.count || 0) + 1\n}\n\nfunction onFired(\n { interaction, pointerEvent, eventTarget, targets }: SignalArgs['pointerEvents:fired'],\n scope: Scope,\n) {\n if (pointerEvent.type !== 'hold' || !targets.length) return\n\n // get the repeat interval from the first eventable\n const interval = targets[0].eventable.options.holdRepeatInterval\n\n // don't repeat if the interval is 0 or less\n if (interval <= 0) return\n\n // set a timeout to fire the holdrepeat event\n interaction.holdIntervalHandle = setTimeout(() => {\n scope.pointerEvents.fire(\n {\n interaction,\n eventTarget,\n type: 'hold',\n pointer: pointerEvent,\n event: pointerEvent,\n },\n scope,\n )\n }, interval)\n}\n\nfunction endHoldRepeat({ interaction }: { interaction: Interaction }) {\n // set the interaction's holdStopTime property\n // to stop further holdRepeat events\n if (interaction.holdIntervalHandle) {\n clearInterval(interaction.holdIntervalHandle)\n interaction.holdIntervalHandle = null\n }\n}\n\nconst holdRepeat: Plugin = {\n id: 'pointer-events/holdRepeat',\n install,\n listeners: ['move', 'up', 'cancel', 'endall'].reduce(\n (acc, enderTypes) => {\n ;(acc as any)[`pointerEvents:${enderTypes}`] = endHoldRepeat\n return acc\n },\n {\n 'pointerEvents:new': onNew,\n 'pointerEvents:fired': onFired,\n } as ListenerMap,\n ),\n}\n\nexport default holdRepeat\n", "import type { Interactable } from '@interactjs/core/Interactable'\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { Element } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\n\nimport type { PointerEventOptions } from '@interactjs/pointer-events/base'\n\ndeclare module '@interactjs/core/Interactable' {\n interface Interactable {\n pointerEvents(options: Partial): this\n /** @internal */\n __backCompatOption: (optionName: string, newValue: any) => any\n }\n}\n\nfunction install(scope: Scope) {\n const { Interactable } = scope\n\n Interactable.prototype.pointerEvents = function (\n this: Interactable,\n options: Partial,\n ) {\n extend(this.events.options, options)\n\n return this\n }\n\n const __backCompatOption = Interactable.prototype._backCompatOption\n\n Interactable.prototype._backCompatOption = function (optionName, newValue) {\n const ret = __backCompatOption.call(this, optionName, newValue)\n\n if (ret === this) {\n this.events.options[optionName] = newValue\n }\n\n return ret\n }\n}\n\nconst plugin: Plugin = {\n id: 'pointer-events/interactableTargets',\n install,\n listeners: {\n 'pointerEvents:collect-targets': ({ targets, node, type, eventTarget }, scope) => {\n scope.interactables.forEachMatch(node, (interactable: Interactable) => {\n const eventable = interactable.events\n const options = eventable.options\n\n if (\n eventable.types[type] &&\n eventable.types[type].length &&\n interactable.testIgnoreAllow(options, node, eventTarget)\n ) {\n targets.push({\n node,\n eventable,\n props: { interactable },\n })\n }\n })\n },\n\n 'interactable:new': ({ interactable }) => {\n interactable.events.getRect = function (element: Element) {\n return interactable.getRect(element)\n }\n },\n\n 'interactable:set': ({ interactable, options }, scope) => {\n extend(interactable.events.options, scope.pointerEvents.defaults)\n extend(interactable.events.options, options.pointerEvents || {})\n },\n },\n}\n\nexport default plugin\n", "import type { Plugin } from '@interactjs/core/scope'\n\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './base'\nimport './holdRepeat'\nimport './interactableTargets'\n\nimport * as pointerEvents from './base'\nimport holdRepeat from './holdRepeat'\nimport interactableTargets from './interactableTargets'\n/* eslint-enable import/no-duplicates */\n\nconst plugin: Plugin = {\n id: 'pointer-events',\n install(scope) {\n scope.usePlugin(pointerEvents)\n scope.usePlugin(holdRepeat)\n scope.usePlugin(interactableTargets)\n },\n}\n\nexport default plugin\n", "import type { Interactable } from '@interactjs/core/Interactable'\nimport type { DoAnyPhaseArg, Interaction } from '@interactjs/core/Interaction'\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { ActionName, ActionProps, Element } from '@interactjs/core/types'\nimport * as arr from '@interactjs/utils/arr'\nimport { copyAction } from '@interactjs/utils/misc'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\nimport { tlbrToXywh } from '@interactjs/utils/rect'\n\ndeclare module '@interactjs/core/scope' {\n interface SignalArgs {\n 'interactions:before-action-reflow': Omit\n 'interactions:action-reflow': DoAnyPhaseArg\n 'interactions:after-action-reflow': DoAnyPhaseArg\n }\n}\n\ndeclare module '@interactjs/core/Interactable' {\n interface Interactable {\n /**\n * ```js\n * const interactable = interact(target)\n * const drag = { name: drag, axis: 'x' }\n * const resize = { name: resize, edges: { left: true, bottom: true }\n *\n * interactable.reflow(drag)\n * interactable.reflow(resize)\n * ```\n *\n * Start an action sequence to re-apply modifiers, check drops, etc.\n *\n * @param { Object } action The action to begin\n * @param { string } action.name The name of the action\n * @returns { Promise } A promise that resolves to the `Interactable` when actions on all targets have ended\n */\n reflow(action: ActionProps): ReturnType\n }\n}\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n _reflowPromise: Promise\n _reflowResolve: (...args: unknown[]) => void\n }\n}\n\ndeclare module '@interactjs/core/InteractEvent' {\n interface PhaseMap {\n reflow?: true\n }\n}\n\nfunction install(scope: Scope) {\n const { Interactable } = scope\n\n scope.actions.phases.reflow = true\n\n Interactable.prototype.reflow = function (action: ActionProps) {\n return doReflow(this, action, scope)\n }\n}\n\nfunction doReflow(\n interactable: Interactable,\n action: ActionProps,\n scope: Scope,\n): Promise {\n const elements = interactable.getAllElements()\n\n // tslint:disable-next-line variable-name\n const Promise = (scope.window as any).Promise\n const promises: Array> | null = Promise ? [] : null\n\n for (const element of elements) {\n const rect = interactable.getRect(element as HTMLElement | SVGElement)\n\n if (!rect) {\n break\n }\n\n const runningInteraction = arr.find(scope.interactions.list, (interaction: Interaction) => {\n return (\n interaction.interacting() &&\n interaction.interactable === interactable &&\n interaction.element === element &&\n interaction.prepared.name === action.name\n )\n })\n let reflowPromise: Promise\n\n if (runningInteraction) {\n runningInteraction.move()\n\n if (promises) {\n reflowPromise =\n runningInteraction._reflowPromise ||\n new Promise((resolve: any) => {\n runningInteraction._reflowResolve = resolve\n })\n }\n } else {\n const xywh = tlbrToXywh(rect)\n const coords = {\n page: { x: xywh.x, y: xywh.y },\n client: { x: xywh.x, y: xywh.y },\n timeStamp: scope.now(),\n }\n\n const event = pointerUtils.coordsToEvent(coords)\n reflowPromise = startReflow(scope, interactable, element, action, event)\n }\n\n if (promises) {\n promises.push(reflowPromise)\n }\n }\n\n return promises && Promise.all(promises).then(() => interactable)\n}\n\nfunction startReflow(\n scope: Scope,\n interactable: Interactable,\n element: Element,\n action: ActionProps,\n event: any,\n) {\n const interaction = scope.interactions.new({ pointerType: 'reflow' })\n const signalArg = {\n interaction,\n event,\n pointer: event,\n eventTarget: element,\n phase: 'reflow',\n } as const\n\n interaction.interactable = interactable\n interaction.element = element\n interaction.prevEvent = event\n interaction.updatePointer(event, event, element, true)\n pointerUtils.setZeroCoords(interaction.coords.delta)\n\n copyAction(interaction.prepared, action)\n interaction._doPhase(signalArg)\n\n const { Promise } = scope.window as unknown as { Promise: PromiseConstructor }\n const reflowPromise = Promise\n ? new Promise((resolve) => {\n interaction._reflowResolve = resolve\n })\n : undefined\n\n interaction._reflowPromise = reflowPromise\n interaction.start(action, interactable, element)\n\n if (interaction._interacting) {\n interaction.move(signalArg)\n interaction.end(event)\n } else {\n interaction.stop()\n interaction._reflowResolve()\n }\n\n interaction.removePointer(event, event)\n\n return reflowPromise\n}\n\nconst reflow: Plugin = {\n id: 'reflow',\n install,\n listeners: {\n // remove completed reflow interactions\n 'interactions:stop': ({ interaction }, scope) => {\n if (interaction.pointerType === 'reflow') {\n if (interaction._reflowResolve) {\n interaction._reflowResolve()\n }\n\n arr.remove(scope.interactions.list, interaction)\n }\n },\n },\n}\n\nexport default reflow\n", "// eslint-disable-next-line import/no-extraneous-dependencies\nimport interact from '@interactjs/interactjs'\n\nexport default interact\n\nif (typeof module === 'object' && !!module) {\n try {\n module.exports = interact\n } catch {}\n}\n\n;(interact as any).default = interact\n", "/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport '@interactjs/actions/plugin'\nimport '@interactjs/auto-scroll/plugin'\nimport '@interactjs/auto-start/plugin'\nimport '@interactjs/core/interactablePreventDefault'\nimport '@interactjs/dev-tools/plugin'\nimport '@interactjs/inertia/plugin'\nimport '@interactjs/interact'\nimport '@interactjs/modifiers/plugin'\nimport '@interactjs/offset/plugin'\nimport '@interactjs/pointer-events/plugin'\nimport '@interactjs/reflow/plugin'\n\nimport actions from '@interactjs/actions/plugin'\nimport autoScroll from '@interactjs/auto-scroll/plugin'\nimport autoStart from '@interactjs/auto-start/plugin'\nimport interactablePreventDefault from '@interactjs/core/interactablePreventDefault'\nimport devTools from '@interactjs/dev-tools/plugin'\nimport inertia from '@interactjs/inertia/plugin'\nimport interact from '@interactjs/interact'\nimport modifiers from '@interactjs/modifiers/plugin'\nimport offset from '@interactjs/offset/plugin'\nimport pointerEvents from '@interactjs/pointer-events/plugin'\nimport reflow from '@interactjs/reflow/plugin'\n/* eslint-enable import/no-duplicates */\n\ninteract.use(interactablePreventDefault)\n\ninteract.use(offset)\n\n// pointerEvents\ninteract.use(pointerEvents)\n\n// inertia\ninteract.use(inertia)\n\n// snap, resize, etc.\ninteract.use(modifiers)\n\n// autoStart, hold\ninteract.use(autoStart)\n\n// drag and drop, resize, gesture\ninteract.use(actions)\n\n// autoScroll\ninteract.use(autoScroll)\n\n// reflow\ninteract.use(reflow)\n\n// eslint-disable-next-line no-undef\nif (process.env.NODE_ENV !== 'production') {\n interact.use(devTools)\n}\n\nexport default interact\n;(interact as any).default = interact\n", "if (!Array.prototype.find) {\n Array.prototype.find = function(predicate) {\n if (this === null) {\n throw new TypeError('Array.prototype.find called on null or undefined')\n }\n if (typeof predicate !== 'function') {\n throw new TypeError('predicate must be a function')\n }\n var list = Object(this)\n var length = list.length >>> 0\n var thisArg = arguments[1]\n var value\n\n for (var i = 0; i < length; i++) {\n value = list[i]\n if (predicate.call(thisArg, value, i, list)) {\n return value\n }\n }\n return undefined\n }\n}\n\nif (window && typeof window.CustomEvent !== \"function\") {\n function CustomEvent(event, params) {\n params = params || {\n bubbles: false,\n cancelable: false,\n detail: undefined\n }\n var evt = document.createEvent('CustomEvent')\n evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)\n return evt\n }\n\n if (typeof window.Event !== 'undefined') {\n CustomEvent.prototype = window.Event.prototype\n }\n\n window.CustomEvent = CustomEvent\n}", "class TributeEvents {\n constructor(tribute) {\n this.tribute = tribute;\n this.tribute.events = this;\n }\n\n static keys() {\n return [\n {\n key: 9,\n value: \"TAB\"\n },\n {\n key: 8,\n value: \"DELETE\"\n },\n {\n key: 13,\n value: \"ENTER\"\n },\n {\n key: 27,\n value: \"ESCAPE\"\n },\n {\n key: 32,\n value: \"SPACE\"\n },\n {\n key: 38,\n value: \"UP\"\n },\n {\n key: 40,\n value: \"DOWN\"\n }\n ];\n }\n\n bind(element) {\n element.boundKeydown = this.keydown.bind(element, this);\n element.boundKeyup = this.keyup.bind(element, this);\n element.boundInput = this.input.bind(element, this);\n\n element.addEventListener(\"keydown\", element.boundKeydown, false);\n element.addEventListener(\"keyup\", element.boundKeyup, false);\n element.addEventListener(\"input\", element.boundInput, false);\n }\n\n unbind(element) {\n element.removeEventListener(\"keydown\", element.boundKeydown, false);\n element.removeEventListener(\"keyup\", element.boundKeyup, false);\n element.removeEventListener(\"input\", element.boundInput, false);\n\n delete element.boundKeydown;\n delete element.boundKeyup;\n delete element.boundInput;\n }\n\n keydown(instance, event) {\n if (instance.shouldDeactivate(event)) {\n instance.tribute.isActive = false;\n instance.tribute.hideMenu();\n }\n\n let element = this;\n instance.commandEvent = false;\n\n TributeEvents.keys().forEach(o => {\n if (o.key === event.keyCode) {\n instance.commandEvent = true;\n instance.callbacks()[o.value.toLowerCase()](event, element);\n }\n });\n }\n\n input(instance, event) {\n instance.inputEvent = true;\n instance.keyup.call(this, instance, event);\n }\n\n click(instance, event) {\n let tribute = instance.tribute;\n if (tribute.menu && tribute.menu.contains(event.target)) {\n let li = event.target;\n event.preventDefault();\n event.stopPropagation();\n while (li.nodeName.toLowerCase() !== \"li\") {\n li = li.parentNode;\n if (!li || li === tribute.menu) {\n throw new Error(\"cannot find the container for the click\");\n }\n }\n tribute.selectItemAtIndex(li.getAttribute(\"data-index\"), event);\n tribute.hideMenu();\n\n // TODO: should fire with externalTrigger and target is outside of menu\n } else if (tribute.current.element && !tribute.current.externalTrigger) {\n tribute.current.externalTrigger = false;\n setTimeout(() => tribute.hideMenu());\n }\n }\n\n keyup(instance, event) {\n if (instance.inputEvent) {\n instance.inputEvent = false;\n }\n instance.updateSelection(this);\n\n if (event.keyCode === 27) return;\n\n if (!instance.tribute.allowSpaces && instance.tribute.hasTrailingSpace) {\n instance.tribute.hasTrailingSpace = false;\n instance.commandEvent = true;\n instance.callbacks()[\"space\"](event, this);\n return;\n }\n\n if (!instance.tribute.isActive) {\n if (instance.tribute.autocompleteMode) {\n instance.callbacks().triggerChar(event, this, \"\");\n } else {\n let keyCode = instance.getKeyCode(instance, this, event);\n\n if (isNaN(keyCode) || !keyCode) return;\n\n let trigger = instance.tribute.triggers().find(trigger => {\n return trigger.charCodeAt(0) === keyCode;\n });\n\n if (typeof trigger !== \"undefined\") {\n instance.callbacks().triggerChar(event, this, trigger);\n }\n }\n }\n\n if (\n instance.tribute.current.mentionText.length <\n instance.tribute.current.collection.menuShowMinLength\n ) {\n return;\n }\n\n if (\n ((instance.tribute.current.trigger ||\n instance.tribute.autocompleteMode) &&\n instance.commandEvent === false) ||\n (instance.tribute.isActive && event.keyCode === 8)\n ) {\n instance.tribute.showMenuFor(this, true);\n }\n }\n\n shouldDeactivate(event) {\n if (!this.tribute.isActive) return false;\n\n if (this.tribute.current.mentionText.length === 0) {\n let eventKeyPressed = false;\n TributeEvents.keys().forEach(o => {\n if (event.keyCode === o.key) eventKeyPressed = true;\n });\n\n return !eventKeyPressed;\n }\n\n return false;\n }\n\n getKeyCode(instance, el, event) {\n let char;\n let tribute = instance.tribute;\n let info = tribute.range.getTriggerInfo(\n false,\n tribute.hasTrailingSpace,\n true,\n tribute.allowSpaces,\n tribute.autocompleteMode\n );\n\n if (info) {\n return info.mentionTriggerChar.charCodeAt(0);\n } else {\n return false;\n }\n }\n\n updateSelection(el) {\n this.tribute.current.element = el;\n let info = this.tribute.range.getTriggerInfo(\n false,\n this.tribute.hasTrailingSpace,\n true,\n this.tribute.allowSpaces,\n this.tribute.autocompleteMode\n );\n\n if (info) {\n this.tribute.current.selectedPath = info.mentionSelectedPath;\n this.tribute.current.mentionText = info.mentionText;\n this.tribute.current.selectedOffset = info.mentionSelectedOffset;\n }\n }\n\n callbacks() {\n return {\n triggerChar: (e, el, trigger) => {\n let tribute = this.tribute;\n tribute.current.trigger = trigger;\n\n let collectionItem = tribute.collection.find(item => {\n return item.trigger === trigger;\n });\n\n tribute.current.collection = collectionItem;\n\n if (\n tribute.current.mentionText.length >=\n tribute.current.collection.menuShowMinLength &&\n tribute.inputEvent\n ) {\n tribute.showMenuFor(el, true);\n }\n },\n enter: (e, el) => {\n // choose selection\n if (this.tribute.isActive && this.tribute.current.filteredItems) {\n e.preventDefault();\n e.stopPropagation();\n setTimeout(() => {\n this.tribute.selectItemAtIndex(this.tribute.menuSelected, e);\n this.tribute.hideMenu();\n }, 0);\n }\n },\n escape: (e, el) => {\n if (this.tribute.isActive) {\n e.preventDefault();\n e.stopPropagation();\n this.tribute.isActive = false;\n this.tribute.hideMenu();\n }\n },\n tab: (e, el) => {\n // choose first match\n this.callbacks().enter(e, el);\n },\n space: (e, el) => {\n if (this.tribute.isActive) {\n if (this.tribute.spaceSelectsMatch) {\n this.callbacks().enter(e, el);\n } else if (!this.tribute.allowSpaces) {\n e.stopPropagation();\n setTimeout(() => {\n this.tribute.hideMenu();\n this.tribute.isActive = false;\n }, 0);\n }\n }\n },\n up: (e, el) => {\n // navigate up ul\n if (this.tribute.isActive && this.tribute.current.filteredItems) {\n e.preventDefault();\n e.stopPropagation();\n let count = this.tribute.current.filteredItems.length,\n selected = this.tribute.menuSelected;\n\n if (count > selected && selected > 0) {\n this.tribute.menuSelected--;\n this.setActiveLi();\n } else if (selected === 0) {\n this.tribute.menuSelected = count - 1;\n this.setActiveLi();\n this.tribute.menu.scrollTop = this.tribute.menu.scrollHeight;\n }\n }\n },\n down: (e, el) => {\n // navigate down ul\n if (this.tribute.isActive && this.tribute.current.filteredItems) {\n e.preventDefault();\n e.stopPropagation();\n let count = this.tribute.current.filteredItems.length - 1,\n selected = this.tribute.menuSelected;\n\n if (count > selected) {\n this.tribute.menuSelected++;\n this.setActiveLi();\n } else if (count === selected) {\n this.tribute.menuSelected = 0;\n this.setActiveLi();\n this.tribute.menu.scrollTop = 0;\n }\n }\n },\n delete: (e, el) => {\n if (\n this.tribute.isActive &&\n this.tribute.current.mentionText.length < 1\n ) {\n this.tribute.hideMenu();\n } else if (this.tribute.isActive) {\n this.tribute.showMenuFor(el);\n }\n }\n };\n }\n\n setActiveLi(index) {\n let lis = this.tribute.menu.querySelectorAll(\"li\"),\n length = lis.length >>> 0;\n\n if (index) this.tribute.menuSelected = parseInt(index);\n\n for (let i = 0; i < length; i++) {\n let li = lis[i];\n if (i === this.tribute.menuSelected) {\n li.classList.add(this.tribute.current.collection.selectClass);\n\n let liClientRect = li.getBoundingClientRect();\n let menuClientRect = this.tribute.menu.getBoundingClientRect();\n\n if (liClientRect.bottom > menuClientRect.bottom) {\n let scrollDistance = liClientRect.bottom - menuClientRect.bottom;\n this.tribute.menu.scrollTop += scrollDistance;\n } else if (liClientRect.top < menuClientRect.top) {\n let scrollDistance = menuClientRect.top - liClientRect.top;\n this.tribute.menu.scrollTop -= scrollDistance;\n }\n } else {\n li.classList.remove(this.tribute.current.collection.selectClass);\n }\n }\n }\n\n getFullHeight(elem, includeMargin) {\n let height = elem.getBoundingClientRect().height;\n\n if (includeMargin) {\n let style = elem.currentStyle || window.getComputedStyle(elem);\n return (\n height + parseFloat(style.marginTop) + parseFloat(style.marginBottom)\n );\n }\n\n return height;\n }\n}\n\nexport default TributeEvents;\n", "class TributeMenuEvents {\n constructor(tribute) {\n this.tribute = tribute;\n this.tribute.menuEvents = this;\n this.menu = this.tribute.menu;\n }\n\n bind(menu) {\n this.menuClickEvent = this.tribute.events.click.bind(null, this);\n this.menuContainerScrollEvent = this.debounce(\n () => {\n if (this.tribute.isActive) {\n this.tribute.showMenuFor(this.tribute.current.element, false);\n }\n },\n 300,\n false\n );\n this.windowResizeEvent = this.debounce(\n () => {\n if (this.tribute.isActive) {\n this.tribute.range.positionMenuAtCaret(true);\n }\n },\n 300,\n false\n );\n\n // fixes IE11 issues with mousedown\n this.tribute.range\n .getDocument()\n .addEventListener(\"MSPointerDown\", this.menuClickEvent, false);\n this.tribute.range\n .getDocument()\n .addEventListener(\"mousedown\", this.menuClickEvent, false);\n window.addEventListener(\"resize\", this.windowResizeEvent);\n\n if (this.menuContainer) {\n this.menuContainer.addEventListener(\n \"scroll\",\n this.menuContainerScrollEvent,\n false\n );\n } else {\n window.addEventListener(\"scroll\", this.menuContainerScrollEvent);\n }\n }\n\n unbind(menu) {\n this.tribute.range\n .getDocument()\n .removeEventListener(\"mousedown\", this.menuClickEvent, false);\n this.tribute.range\n .getDocument()\n .removeEventListener(\"MSPointerDown\", this.menuClickEvent, false);\n window.removeEventListener(\"resize\", this.windowResizeEvent);\n\n if (this.menuContainer) {\n this.menuContainer.removeEventListener(\n \"scroll\",\n this.menuContainerScrollEvent,\n false\n );\n } else {\n window.removeEventListener(\"scroll\", this.menuContainerScrollEvent);\n }\n }\n\n debounce(func, wait, immediate) {\n var timeout;\n return () => {\n var context = this,\n args = arguments;\n var later = () => {\n timeout = null;\n if (!immediate) func.apply(context, args);\n };\n var callNow = immediate && !timeout;\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n if (callNow) func.apply(context, args);\n };\n }\n}\n\nexport default TributeMenuEvents;\n", "// Thanks to https://github.com/jeff-collins/ment.io\nimport \"./utils\";\n\nclass TributeRange {\n constructor(tribute) {\n this.tribute = tribute\n this.tribute.range = this\n }\n\n getDocument() {\n let iframe\n if (this.tribute.current.collection) {\n iframe = this.tribute.current.collection.iframe\n }\n\n if (!iframe) {\n return document\n }\n\n return iframe.contentWindow.document\n }\n\n positionMenuAtCaret(scrollTo) {\n let context = this.tribute.current,\n coordinates\n\n let info = this.getTriggerInfo(false, this.tribute.hasTrailingSpace, true, this.tribute.allowSpaces, this.tribute.autocompleteMode)\n\n if (typeof info !== 'undefined') {\n\n if(!this.tribute.positionMenu){\n this.tribute.menu.style.cssText = `display: block;`\n return\n }\n\n if (!this.isContentEditable(context.element)) {\n coordinates = this.getTextAreaOrInputUnderlinePosition(this.tribute.current.element,\n info.mentionPosition)\n }\n else {\n coordinates = this.getContentEditableCaretPosition(info.mentionPosition)\n }\n\n this.tribute.menu.style.cssText = `top: ${coordinates.top}px;\n left: ${coordinates.left}px;\n right: ${coordinates.right}px;\n bottom: ${coordinates.bottom}px;\n position: absolute;\n display: block;`\n\n if (coordinates.left === 'auto') {\n this.tribute.menu.style.left = 'auto'\n }\n\n if (coordinates.top === 'auto') {\n this.tribute.menu.style.top = 'auto'\n }\n\n if (scrollTo) this.scrollIntoView()\n\n window.setTimeout(() => {\n let menuDimensions = {\n width: this.tribute.menu.offsetWidth,\n height: this.tribute.menu.offsetHeight\n }\n let menuIsOffScreen = this.isMenuOffScreen(coordinates, menuDimensions)\n\n let menuIsOffScreenHorizontally = window.innerWidth > menuDimensions.width && (menuIsOffScreen.left || menuIsOffScreen.right)\n let menuIsOffScreenVertically = window.innerHeight > menuDimensions.height && (menuIsOffScreen.top || menuIsOffScreen.bottom)\n if (menuIsOffScreenHorizontally || menuIsOffScreenVertically) {\n this.tribute.menu.style.cssText = 'display: none'\n this.positionMenuAtCaret(scrollTo)\n }\n }, 0)\n\n } else {\n this.tribute.menu.style.cssText = 'display: none'\n }\n }\n\n get menuContainerIsBody() {\n return this.tribute.menuContainer === document.body || !this.tribute.menuContainer;\n }\n\n\n selectElement(targetElement, path, offset) {\n let range\n let elem = targetElement\n\n if (path) {\n for (var i = 0; i < path.length; i++) {\n elem = elem.childNodes[path[i]]\n if (elem === undefined) {\n return\n }\n while (elem.length < offset) {\n offset -= elem.length\n elem = elem.nextSibling\n }\n if (elem.childNodes.length === 0 && !elem.length) {\n elem = elem.previousSibling\n }\n }\n }\n let sel = this.getWindowSelection()\n\n range = this.getDocument().createRange()\n range.setStart(elem, offset)\n range.setEnd(elem, offset)\n range.collapse(true)\n\n try {\n sel.removeAllRanges()\n } catch (error) {}\n\n sel.addRange(range)\n targetElement.focus()\n }\n\n replaceTriggerText(text, requireLeadingSpace, hasTrailingSpace, originalEvent, item) {\n let info = this.getTriggerInfo(true, hasTrailingSpace, requireLeadingSpace, this.tribute.allowSpaces, this.tribute.autocompleteMode)\n\n if (info !== undefined) {\n let context = this.tribute.current\n let replaceEvent = new CustomEvent('tribute-replaced', {\n detail: {\n item: item,\n instance: context,\n context: info,\n event: originalEvent,\n }\n })\n\n if (!this.isContentEditable(context.element)) {\n let myField = this.tribute.current.element\n let textSuffix = typeof this.tribute.replaceTextSuffix == 'string'\n ? this.tribute.replaceTextSuffix\n : ' '\n text += textSuffix\n let startPos = info.mentionPosition\n let endPos = info.mentionPosition + info.mentionText.length + textSuffix.length\n if (!this.tribute.autocompleteMode) {\n endPos += info.mentionTriggerChar.length - 1\n }\n myField.value = myField.value.substring(0, startPos) + text +\n myField.value.substring(endPos, myField.value.length)\n myField.selectionStart = startPos + text.length\n myField.selectionEnd = startPos + text.length\n } else {\n // add a space to the end of the pasted text\n let textSuffix = typeof this.tribute.replaceTextSuffix == 'string'\n ? this.tribute.replaceTextSuffix\n : '\\xA0'\n text += textSuffix\n let endPos = info.mentionPosition + info.mentionText.length\n if (!this.tribute.autocompleteMode) {\n endPos += info.mentionTriggerChar.length\n }\n this.pasteHtml(text, info.mentionPosition, endPos)\n }\n\n context.element.dispatchEvent(new CustomEvent('input', { bubbles: true }))\n context.element.dispatchEvent(replaceEvent)\n }\n }\n\n pasteHtml(html, startPos, endPos) {\n let range, sel\n sel = this.getWindowSelection()\n range = this.getDocument().createRange()\n range.setStart(sel.anchorNode, startPos)\n range.setEnd(sel.anchorNode, endPos)\n range.deleteContents()\n\n let el = this.getDocument().createElement('div')\n el.innerHTML = html\n let frag = this.getDocument().createDocumentFragment(),\n node, lastNode\n while ((node = el.firstChild)) {\n lastNode = frag.appendChild(node)\n }\n range.insertNode(frag)\n\n // Preserve the selection\n if (lastNode) {\n range = range.cloneRange()\n range.setStartAfter(lastNode)\n range.collapse(true)\n sel.removeAllRanges()\n sel.addRange(range)\n }\n }\n\n getWindowSelection() {\n if (this.tribute.collection.iframe) {\n return this.tribute.collection.iframe.contentWindow.getSelection()\n }\n\n return window.getSelection()\n }\n\n getNodePositionInParent(element) {\n if (element.parentNode === null) {\n return 0\n }\n\n for (var i = 0; i < element.parentNode.childNodes.length; i++) {\n let node = element.parentNode.childNodes[i]\n\n if (node === element) {\n return i\n }\n }\n }\n\n getContentEditableSelectedPath(ctx) {\n let sel = this.getWindowSelection()\n let selected = sel.anchorNode\n let path = []\n let offset\n\n if (selected != null) {\n let i\n let ce = selected.contentEditable\n while (selected !== null && ce !== 'true') {\n i = this.getNodePositionInParent(selected)\n path.push(i)\n selected = selected.parentNode\n if (selected !== null) {\n ce = selected.contentEditable\n }\n }\n path.reverse()\n\n // getRangeAt may not exist, need alternative\n offset = sel.getRangeAt(0).startOffset\n\n return {\n selected: selected,\n path: path,\n offset: offset\n }\n }\n }\n\n getTextPrecedingCurrentSelection() {\n let context = this.tribute.current,\n text = ''\n\n if (!this.isContentEditable(context.element)) {\n let textComponent = this.tribute.current.element;\n if (textComponent) {\n let startPos = textComponent.selectionStart\n if (textComponent.value && startPos >= 0) {\n text = textComponent.value.substring(0, startPos)\n }\n }\n\n } else {\n let selectedElem = this.getWindowSelection().anchorNode\n\n if (selectedElem != null) {\n let workingNodeContent = selectedElem.textContent\n let selectStartOffset = this.getWindowSelection().getRangeAt(0).startOffset\n\n if (workingNodeContent && selectStartOffset >= 0) {\n text = workingNodeContent.substring(0, selectStartOffset)\n }\n }\n }\n\n return text\n }\n\n getLastWordInText(text) {\n text = text.replace(/\\u00A0/g, ' '); // https://stackoverflow.com/questions/29850407/how-do-i-replace-unicode-character-u00a0-with-a-space-in-javascript\n let wordsArray = text.split(/\\s+/);\n let worldsCount = wordsArray.length - 1\n return wordsArray[worldsCount].trim()\n }\n\n getTriggerInfo(menuAlreadyActive, hasTrailingSpace, requireLeadingSpace, allowSpaces, isAutocomplete) {\n let ctx = this.tribute.current\n let selected, path, offset\n\n if (!this.isContentEditable(ctx.element)) {\n selected = this.tribute.current.element\n } else {\n let selectionInfo = this.getContentEditableSelectedPath(ctx)\n\n if (selectionInfo) {\n selected = selectionInfo.selected\n path = selectionInfo.path\n offset = selectionInfo.offset\n }\n }\n\n let effectiveRange = this.getTextPrecedingCurrentSelection()\n let lastWordOfEffectiveRange = this.getLastWordInText(effectiveRange)\n\n if (isAutocomplete) {\n return {\n mentionPosition: effectiveRange.length - lastWordOfEffectiveRange.length,\n mentionText: lastWordOfEffectiveRange,\n mentionSelectedElement: selected,\n mentionSelectedPath: path,\n mentionSelectedOffset: offset\n }\n }\n\n if (effectiveRange !== undefined && effectiveRange !== null) {\n let mostRecentTriggerCharPos = -1\n let triggerChar\n\n this.tribute.collection.forEach(config => {\n let c = config.trigger\n let idx = config.requireLeadingSpace ?\n this.lastIndexWithLeadingSpace(effectiveRange, c) :\n effectiveRange.lastIndexOf(c)\n\n if (idx > mostRecentTriggerCharPos) {\n mostRecentTriggerCharPos = idx\n triggerChar = c\n requireLeadingSpace = config.requireLeadingSpace\n }\n })\n\n if (mostRecentTriggerCharPos >= 0 &&\n (\n mostRecentTriggerCharPos === 0 ||\n !requireLeadingSpace ||\n /[\\xA0\\s]/g.test(\n effectiveRange.substring(\n mostRecentTriggerCharPos - 1,\n mostRecentTriggerCharPos)\n )\n )\n ) {\n let currentTriggerSnippet = effectiveRange.substring(mostRecentTriggerCharPos + triggerChar.length,\n effectiveRange.length)\n\n triggerChar = effectiveRange.substring(mostRecentTriggerCharPos, mostRecentTriggerCharPos + triggerChar.length)\n let firstSnippetChar = currentTriggerSnippet.substring(0, 1)\n let leadingSpace = currentTriggerSnippet.length > 0 &&\n (\n firstSnippetChar === ' ' ||\n firstSnippetChar === '\\xA0'\n )\n if (hasTrailingSpace) {\n currentTriggerSnippet = currentTriggerSnippet.trim()\n }\n\n let regex = allowSpaces ? /[^\\S ]/g : /[\\xA0\\s]/g;\n\n this.tribute.hasTrailingSpace = regex.test(currentTriggerSnippet);\n\n if (!leadingSpace && (menuAlreadyActive || !(regex.test(currentTriggerSnippet)))) {\n return {\n mentionPosition: mostRecentTriggerCharPos,\n mentionText: currentTriggerSnippet,\n mentionSelectedElement: selected,\n mentionSelectedPath: path,\n mentionSelectedOffset: offset,\n mentionTriggerChar: triggerChar\n }\n }\n }\n }\n }\n\n lastIndexWithLeadingSpace (str, trigger) {\n let reversedStr = str.split('').reverse().join('')\n let index = -1\n\n for (let cidx = 0, len = str.length; cidx < len; cidx++) {\n let firstChar = cidx === str.length - 1\n let leadingSpace = /\\s/.test(reversedStr[cidx + 1])\n\n let match = true\n for (let triggerIdx = trigger.length - 1; triggerIdx >= 0; triggerIdx--) {\n if (trigger[triggerIdx] !== reversedStr[cidx-triggerIdx]) {\n match = false\n break\n }\n }\n\n if (match && (firstChar || leadingSpace)) {\n index = str.length - 1 - cidx\n break\n }\n }\n\n return index\n }\n\n isContentEditable(element) {\n return element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA'\n }\n\n isMenuOffScreen(coordinates, menuDimensions) {\n let windowWidth = window.innerWidth\n let windowHeight = window.innerHeight\n let doc = document.documentElement\n let windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)\n let windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)\n\n let menuTop = typeof coordinates.top === 'number' ? coordinates.top : windowTop + windowHeight - coordinates.bottom - menuDimensions.height\n let menuRight = typeof coordinates.right === 'number' ? coordinates.right : coordinates.left + menuDimensions.width\n let menuBottom = typeof coordinates.bottom === 'number' ? coordinates.bottom : coordinates.top + menuDimensions.height\n let menuLeft = typeof coordinates.left === 'number' ? coordinates.left : windowLeft + windowWidth - coordinates.right - menuDimensions.width\n\n return {\n top: menuTop < Math.floor(windowTop),\n right: menuRight > Math.ceil(windowLeft + windowWidth),\n bottom: menuBottom > Math.ceil(windowTop + windowHeight),\n left: menuLeft < Math.floor(windowLeft)\n }\n }\n\n getMenuDimensions() {\n // Width of the menu depends of its contents and position\n // We must check what its width would be without any obstruction\n // This way, we can achieve good positioning for flipping the menu\n let dimensions = {\n width: null,\n height: null\n }\n\n this.tribute.menu.style.cssText = `top: 0px;\n left: 0px;\n position: fixed;\n display: block;\n visibility; hidden;`\n dimensions.width = this.tribute.menu.offsetWidth\n dimensions.height = this.tribute.menu.offsetHeight\n\n this.tribute.menu.style.cssText = `display: none;`\n\n return dimensions\n }\n\n getTextAreaOrInputUnderlinePosition(element, position, flipped) {\n let properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX',\n 'overflowY', 'borderTopWidth', 'borderRightWidth',\n 'borderBottomWidth', 'borderLeftWidth', 'paddingTop',\n 'paddingRight', 'paddingBottom', 'paddingLeft',\n 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch',\n 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily',\n 'textAlign', 'textTransform', 'textIndent',\n 'textDecoration', 'letterSpacing', 'wordSpacing'\n ]\n\n let isFirefox = (window.mozInnerScreenX !== null)\n\n let div = this.getDocument().createElement('div')\n div.id = 'input-textarea-caret-position-mirror-div'\n this.getDocument().body.appendChild(div)\n\n let style = div.style\n let computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle\n\n style.whiteSpace = 'pre-wrap'\n if (element.nodeName !== 'INPUT') {\n style.wordWrap = 'break-word'\n }\n\n // position off-screen\n style.position = 'absolute'\n style.visibility = 'hidden'\n\n // transfer the element's properties to the div\n properties.forEach(prop => {\n style[prop] = computed[prop]\n })\n\n if (isFirefox) {\n style.width = `${(parseInt(computed.width) - 2)}px`\n if (element.scrollHeight > parseInt(computed.height))\n style.overflowY = 'scroll'\n } else {\n style.overflow = 'hidden'\n }\n\n div.textContent = element.value.substring(0, position)\n\n if (element.nodeName === 'INPUT') {\n div.textContent = div.textContent.replace(/\\s/g, ' ')\n }\n\n let span = this.getDocument().createElement('span')\n span.textContent = element.value.substring(position) || '.'\n div.appendChild(span)\n\n let rect = element.getBoundingClientRect()\n let doc = document.documentElement\n let windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)\n let windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)\n\n let top = 0;\n let left = 0;\n if (this.menuContainerIsBody) {\n top = rect.top;\n left = rect.left;\n }\n\n let coordinates = {\n top: top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth) + parseInt(computed.fontSize) - element.scrollTop,\n left: left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth)\n }\n\n let windowWidth = window.innerWidth\n let windowHeight = window.innerHeight\n\n let menuDimensions = this.getMenuDimensions()\n let menuIsOffScreen = this.isMenuOffScreen(coordinates, menuDimensions)\n\n if (menuIsOffScreen.right) {\n coordinates.right = windowWidth - coordinates.left\n coordinates.left = 'auto'\n }\n\n let parentHeight = this.tribute.menuContainer\n ? this.tribute.menuContainer.offsetHeight\n : this.getDocument().body.offsetHeight\n\n if (menuIsOffScreen.bottom) {\n let parentRect = this.tribute.menuContainer\n ? this.tribute.menuContainer.getBoundingClientRect()\n : this.getDocument().body.getBoundingClientRect()\n let scrollStillAvailable = parentHeight - (windowHeight - parentRect.top)\n\n coordinates.bottom = scrollStillAvailable + (windowHeight - rect.top - span.offsetTop)\n coordinates.top = 'auto'\n }\n\n menuIsOffScreen = this.isMenuOffScreen(coordinates, menuDimensions)\n if (menuIsOffScreen.left) {\n coordinates.left = windowWidth > menuDimensions.width\n ? windowLeft + windowWidth - menuDimensions.width\n : windowLeft\n delete coordinates.right\n }\n if (menuIsOffScreen.top) {\n coordinates.top = windowHeight > menuDimensions.height\n ? windowTop + windowHeight - menuDimensions.height\n : windowTop\n delete coordinates.bottom\n }\n\n this.getDocument().body.removeChild(div)\n return coordinates\n }\n\n getContentEditableCaretPosition(selectedNodePosition) {\n let range\n let sel = this.getWindowSelection()\n\n range = this.getDocument().createRange()\n range.setStart(sel.anchorNode, selectedNodePosition)\n range.setEnd(sel.anchorNode, selectedNodePosition)\n\n range.collapse(false)\n\n let rect = range.getBoundingClientRect()\n let doc = document.documentElement\n let windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)\n let windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)\n\n let left = rect.left\n let top = rect.top\n\n let coordinates = {\n left: left + windowLeft,\n top: top + rect.height + windowTop\n }\n let windowWidth = window.innerWidth\n let windowHeight = window.innerHeight\n\n let menuDimensions = this.getMenuDimensions()\n let menuIsOffScreen = this.isMenuOffScreen(coordinates, menuDimensions)\n\n if (menuIsOffScreen.right) {\n coordinates.left = 'auto'\n coordinates.right = windowWidth - rect.left - windowLeft\n }\n\n let parentHeight = this.tribute.menuContainer\n ? this.tribute.menuContainer.offsetHeight\n : this.getDocument().body.offsetHeight\n\n if (menuIsOffScreen.bottom) {\n let parentRect = this.tribute.menuContainer\n ? this.tribute.menuContainer.getBoundingClientRect()\n : this.getDocument().body.getBoundingClientRect()\n let scrollStillAvailable = parentHeight - (windowHeight - parentRect.top)\n\n coordinates.top = 'auto'\n coordinates.bottom = scrollStillAvailable + (windowHeight - rect.top)\n }\n\n menuIsOffScreen = this.isMenuOffScreen(coordinates, menuDimensions)\n if (menuIsOffScreen.left) {\n coordinates.left = windowWidth > menuDimensions.width\n ? windowLeft + windowWidth - menuDimensions.width\n : windowLeft\n delete coordinates.right\n }\n if (menuIsOffScreen.top) {\n coordinates.top = windowHeight > menuDimensions.height\n ? windowTop + windowHeight - menuDimensions.height\n : windowTop\n delete coordinates.bottom\n }\n\n if (!this.menuContainerIsBody) {\n coordinates.left = coordinates.left ? coordinates.left - this.tribute.menuContainer.offsetLeft : coordinates.left\n coordinates.top = coordinates.top ? coordinates.top - this.tribute.menuContainer.offsetTop : coordinates.top\n }\n\n return coordinates\n }\n\n scrollIntoView(elem) {\n let reasonableBuffer = 20,\n clientRect\n let maxScrollDisplacement = 100\n let e = this.menu\n\n if (typeof e === 'undefined') return;\n\n while (clientRect === undefined || clientRect.height === 0) {\n clientRect = e.getBoundingClientRect()\n\n if (clientRect.height === 0) {\n e = e.childNodes[0]\n if (e === undefined || !e.getBoundingClientRect) {\n return\n }\n }\n }\n\n let elemTop = clientRect.top\n let elemBottom = elemTop + clientRect.height\n\n if (elemTop < 0) {\n window.scrollTo(0, window.pageYOffset + clientRect.top - reasonableBuffer)\n } else if (elemBottom > window.innerHeight) {\n let maxY = window.pageYOffset + clientRect.top - reasonableBuffer\n\n if (maxY - window.pageYOffset > maxScrollDisplacement) {\n maxY = window.pageYOffset + maxScrollDisplacement\n }\n\n let targetY = window.pageYOffset - (window.innerHeight - elemBottom)\n\n if (targetY > maxY) {\n targetY = maxY\n }\n\n window.scrollTo(0, targetY)\n }\n }\n}\n\n\nexport default TributeRange;\n", "// Thanks to https://github.com/mattyork/fuzzy\nclass TributeSearch {\n constructor(tribute) {\n this.tribute = tribute\n this.tribute.search = this\n }\n\n simpleFilter(pattern, array) {\n return array.filter(string => {\n return this.test(pattern, string)\n })\n }\n\n test(pattern, string) {\n return this.match(pattern, string) !== null\n }\n\n match(pattern, string, opts) {\n opts = opts || {}\n let patternIdx = 0,\n result = [],\n len = string.length,\n totalScore = 0,\n currScore = 0,\n pre = opts.pre || '',\n post = opts.post || '',\n compareString = opts.caseSensitive && string || string.toLowerCase(),\n ch, compareChar\n\n if (opts.skip) {\n return {rendered: string, score: 0}\n }\n\n pattern = opts.caseSensitive && pattern || pattern.toLowerCase()\n\n let patternCache = this.traverse(compareString, pattern, 0, 0, [])\n if (!patternCache) {\n return null\n }\n return {\n rendered: this.render(string, patternCache.cache, pre, post),\n score: patternCache.score\n }\n }\n\n traverse(string, pattern, stringIndex, patternIndex, patternCache) {\n // if the pattern search at end\n if (pattern.length === patternIndex) {\n\n // calculate score and copy the cache containing the indices where it's found\n return {\n score: this.calculateScore(patternCache),\n cache: patternCache.slice()\n }\n }\n\n // if string at end or remaining pattern > remaining string\n if (string.length === stringIndex || pattern.length - patternIndex > string.length - stringIndex) {\n return undefined\n }\n\n let c = pattern[patternIndex]\n let index = string.indexOf(c, stringIndex)\n let best, temp\n\n while (index > -1) {\n patternCache.push(index)\n temp = this.traverse(string, pattern, index + 1, patternIndex + 1, patternCache)\n patternCache.pop()\n\n // if downstream traversal failed, return best answer so far\n if (!temp) {\n return best\n }\n\n if (!best || best.score < temp.score) {\n best = temp\n }\n\n index = string.indexOf(c, index + 1)\n }\n\n return best\n }\n\n calculateScore(patternCache) {\n let score = 0\n let temp = 1\n\n patternCache.forEach((index, i) => {\n if (i > 0) {\n if (patternCache[i - 1] + 1 === index) {\n temp += temp + 1\n }\n else {\n temp = 1\n }\n }\n\n score += temp\n })\n\n return score\n }\n\n render(string, indices, pre, post) {\n var rendered = string.substring(0, indices[0])\n\n indices.forEach((index, i) => {\n rendered += pre + string[index] + post +\n string.substring(index + 1, (indices[i + 1]) ? indices[i + 1] : string.length)\n })\n\n return rendered\n }\n\n filter(pattern, arr, opts) {\n opts = opts || {}\n return arr\n .reduce((prev, element, idx, arr) => {\n let str = element\n\n if (opts.extract) {\n str = opts.extract(element)\n\n if (!str) { // take care of undefineds / nulls / etc.\n str = ''\n }\n }\n\n let rendered = this.match(pattern, str, opts)\n\n if (rendered != null) {\n prev[prev.length] = {\n string: rendered.rendered,\n score: rendered.score,\n index: idx,\n original: element\n }\n }\n\n return prev\n }, [])\n\n .sort((a, b) => {\n let compare = b.score - a.score\n if (compare) return compare\n return a.index - b.index\n })\n }\n}\n\nexport default TributeSearch;\n", "import \"./utils\";\nimport TributeEvents from \"./TributeEvents\";\nimport TributeMenuEvents from \"./TributeMenuEvents\";\nimport TributeRange from \"./TributeRange\";\nimport TributeSearch from \"./TributeSearch\";\n\nclass Tribute {\n constructor({\n values = null,\n iframe = null,\n selectClass = \"highlight\",\n containerClass = \"tribute-container\",\n itemClass = \"\",\n trigger = \"@\",\n autocompleteMode = false,\n selectTemplate = null,\n menuItemTemplate = null,\n lookup = \"key\",\n fillAttr = \"value\",\n collection = null,\n menuContainer = null,\n noMatchTemplate = null,\n requireLeadingSpace = true,\n allowSpaces = false,\n replaceTextSuffix = null,\n positionMenu = true,\n spaceSelectsMatch = false,\n searchOpts = {},\n menuItemLimit = null,\n menuShowMinLength = 0\n }) {\n this.autocompleteMode = autocompleteMode;\n this.menuSelected = 0;\n this.current = {};\n this.inputEvent = false;\n this.isActive = false;\n this.menuContainer = menuContainer;\n this.allowSpaces = allowSpaces;\n this.replaceTextSuffix = replaceTextSuffix;\n this.positionMenu = positionMenu;\n this.hasTrailingSpace = false;\n this.spaceSelectsMatch = spaceSelectsMatch;\n\n if (this.autocompleteMode) {\n trigger = \"\";\n allowSpaces = false;\n }\n\n if (values) {\n this.collection = [\n {\n // symbol that starts the lookup\n trigger: trigger,\n\n // is it wrapped in an iframe\n iframe: iframe,\n\n // class applied to selected item\n selectClass: selectClass,\n\n // class applied to the Container\n containerClass: containerClass,\n\n // class applied to each item\n itemClass: itemClass,\n\n // function called on select that retuns the content to insert\n selectTemplate: (\n selectTemplate || Tribute.defaultSelectTemplate\n ).bind(this),\n\n // function called that returns content for an item\n menuItemTemplate: (\n menuItemTemplate || Tribute.defaultMenuItemTemplate\n ).bind(this),\n\n // function called when menu is empty, disables hiding of menu.\n noMatchTemplate: (t => {\n if (typeof t === \"string\") {\n if (t.trim() === \"\") return null;\n return t;\n }\n if (typeof t === \"function\") {\n return t.bind(this);\n }\n\n return (\n noMatchTemplate ||\n function() {\n return \"No Match Found!\";\n }.bind(this)\n );\n })(noMatchTemplate),\n\n // column to search against in the object\n lookup: lookup,\n\n // column that contains the content to insert by default\n fillAttr: fillAttr,\n\n // array of objects or a function returning an array of objects\n values: values,\n\n requireLeadingSpace: requireLeadingSpace,\n\n searchOpts: searchOpts,\n\n menuItemLimit: menuItemLimit,\n\n menuShowMinLength: menuShowMinLength\n }\n ];\n } else if (collection) {\n if (this.autocompleteMode)\n console.warn(\n \"Tribute in autocomplete mode does not work for collections\"\n );\n this.collection = collection.map(item => {\n return {\n trigger: item.trigger || trigger,\n iframe: item.iframe || iframe,\n selectClass: item.selectClass || selectClass,\n containerClass: item.containerClass || containerClass,\n itemClass: item.itemClass || itemClass,\n selectTemplate: (\n item.selectTemplate || Tribute.defaultSelectTemplate\n ).bind(this),\n menuItemTemplate: (\n item.menuItemTemplate || Tribute.defaultMenuItemTemplate\n ).bind(this),\n // function called when menu is empty, disables hiding of menu.\n noMatchTemplate: (t => {\n if (typeof t === \"string\") {\n if (t.trim() === \"\") return null;\n return t;\n }\n if (typeof t === \"function\") {\n return t.bind(this);\n }\n\n return (\n noMatchTemplate ||\n function() {\n return \"No Match Found!\";\n }.bind(this)\n );\n })(noMatchTemplate),\n lookup: item.lookup || lookup,\n fillAttr: item.fillAttr || fillAttr,\n values: item.values,\n requireLeadingSpace: item.requireLeadingSpace,\n searchOpts: item.searchOpts || searchOpts,\n menuItemLimit: item.menuItemLimit || menuItemLimit,\n menuShowMinLength: item.menuShowMinLength || menuShowMinLength\n };\n });\n } else {\n throw new Error(\"[Tribute] No collection specified.\");\n }\n\n new TributeRange(this);\n new TributeEvents(this);\n new TributeMenuEvents(this);\n new TributeSearch(this);\n }\n\n get isActive() {\n return this._isActive;\n }\n\n set isActive(val) {\n if (this._isActive != val) {\n this._isActive = val;\n if (this.current.element) {\n let noMatchEvent = new CustomEvent(`tribute-active-${val}`);\n this.current.element.dispatchEvent(noMatchEvent);\n }\n }\n }\n\n static defaultSelectTemplate(item) {\n if (typeof item === \"undefined\")\n return `${this.current.collection.trigger}${this.current.mentionText}`;\n if (this.range.isContentEditable(this.current.element)) {\n return (\n '' +\n (this.current.collection.trigger +\n item.original[this.current.collection.fillAttr]) +\n \"\"\n );\n }\n\n return (\n this.current.collection.trigger +\n item.original[this.current.collection.fillAttr]\n );\n }\n\n static defaultMenuItemTemplate(matchItem) {\n return matchItem.string;\n }\n\n static inputTypes() {\n return [\"TEXTAREA\", \"INPUT\"];\n }\n\n triggers() {\n return this.collection.map(config => {\n return config.trigger;\n });\n }\n\n attach(el) {\n if (!el) {\n throw new Error(\"[Tribute] Must pass in a DOM node or NodeList.\");\n }\n\n // Check if it is a jQuery collection\n if (typeof jQuery !== \"undefined\" && el instanceof jQuery) {\n el = el.get();\n }\n\n // Is el an Array/Array-like object?\n if (\n el.constructor === NodeList ||\n el.constructor === HTMLCollection ||\n el.constructor === Array\n ) {\n let length = el.length;\n for (var i = 0; i < length; ++i) {\n this._attach(el[i]);\n }\n } else {\n this._attach(el);\n }\n }\n\n _attach(el) {\n if (el.hasAttribute(\"data-tribute\")) {\n console.warn(\"Tribute was already bound to \" + el.nodeName);\n }\n\n this.ensureEditable(el);\n this.events.bind(el);\n el.setAttribute(\"data-tribute\", true);\n }\n\n ensureEditable(element) {\n if (Tribute.inputTypes().indexOf(element.nodeName) === -1) {\n if (element.contentEditable) {\n element.contentEditable = true;\n } else {\n throw new Error(\"[Tribute] Cannot bind to \" + element.nodeName);\n }\n }\n }\n\n createMenu(containerClass) {\n let wrapper = this.range.getDocument().createElement(\"div\"),\n ul = this.range.getDocument().createElement(\"ul\");\n wrapper.className = containerClass;\n wrapper.appendChild(ul);\n\n if (this.menuContainer) {\n return this.menuContainer.appendChild(wrapper);\n }\n\n return this.range.getDocument().body.appendChild(wrapper);\n }\n\n showMenuFor(element, scrollTo) {\n // Only proceed if menu isn't already shown for the current element & mentionText\n if (\n this.isActive &&\n this.current.element === element &&\n this.current.mentionText === this.currentMentionTextSnapshot\n ) {\n return;\n }\n this.currentMentionTextSnapshot = this.current.mentionText;\n\n // create the menu if it doesn't exist.\n if (!this.menu) {\n this.menu = this.createMenu(this.current.collection.containerClass);\n element.tributeMenu = this.menu;\n this.menuEvents.bind(this.menu);\n }\n\n this.isActive = true;\n this.menuSelected = 0;\n\n if (!this.current.mentionText) {\n this.current.mentionText = \"\";\n }\n\n const processValues = values => {\n // Tribute may not be active any more by the time the value callback returns\n if (!this.isActive) {\n return;\n }\n\n let items = this.search.filter(this.current.mentionText, values, {\n pre: this.current.collection.searchOpts.pre || \"\",\n post: this.current.collection.searchOpts.post || \"\",\n skip: this.current.collection.searchOpts.skip,\n extract: el => {\n if (typeof this.current.collection.lookup === \"string\") {\n return el[this.current.collection.lookup];\n } else if (typeof this.current.collection.lookup === \"function\") {\n return this.current.collection.lookup(el, this.current.mentionText);\n } else {\n throw new Error(\n \"Invalid lookup attribute, lookup must be string or function.\"\n );\n }\n }\n });\n\n if (this.current.collection.menuItemLimit) {\n items = items.slice(0, this.current.collection.menuItemLimit);\n }\n\n this.current.filteredItems = items;\n\n let ul = this.menu.querySelector(\"ul\");\n\n this.range.positionMenuAtCaret(scrollTo);\n\n if (!items.length) {\n let noMatchEvent = new CustomEvent(\"tribute-no-match\", {\n detail: this.menu\n });\n this.current.element.dispatchEvent(noMatchEvent);\n if (\n (typeof this.current.collection.noMatchTemplate === \"function\" &&\n !this.current.collection.noMatchTemplate()) ||\n !this.current.collection.noMatchTemplate\n ) {\n this.hideMenu();\n } else {\n typeof this.current.collection.noMatchTemplate === \"function\"\n ? (ul.innerHTML = this.current.collection.noMatchTemplate())\n : (ul.innerHTML = this.current.collection.noMatchTemplate);\n }\n\n return;\n }\n\n ul.innerHTML = \"\";\n let fragment = this.range.getDocument().createDocumentFragment();\n\n items.forEach((item, index) => {\n let li = this.range.getDocument().createElement(\"li\");\n li.setAttribute(\"data-index\", index);\n li.className = this.current.collection.itemClass;\n li.addEventListener(\"mousemove\", e => {\n let [li, index] = this._findLiTarget(e.target);\n if (e.movementY !== 0) {\n this.events.setActiveLi(index);\n }\n });\n if (this.menuSelected === index) {\n li.classList.add(this.current.collection.selectClass);\n }\n li.innerHTML = this.current.collection.menuItemTemplate(item);\n fragment.appendChild(li);\n });\n ul.appendChild(fragment);\n };\n\n if (typeof this.current.collection.values === \"function\") {\n this.current.collection.values(this.current.mentionText, processValues);\n } else {\n processValues(this.current.collection.values);\n }\n }\n\n _findLiTarget(el) {\n if (!el) return [];\n const index = el.getAttribute(\"data-index\");\n return !index ? this._findLiTarget(el.parentNode) : [el, index];\n }\n\n showMenuForCollection(element, collectionIndex) {\n if (element !== document.activeElement) {\n this.placeCaretAtEnd(element);\n }\n\n this.current.collection = this.collection[collectionIndex || 0];\n this.current.externalTrigger = true;\n this.current.element = element;\n\n if (element.isContentEditable)\n this.insertTextAtCursor(this.current.collection.trigger);\n else this.insertAtCaret(element, this.current.collection.trigger);\n\n this.showMenuFor(element);\n }\n\n // TODO: make sure this works for inputs/textareas\n placeCaretAtEnd(el) {\n el.focus();\n if (\n typeof window.getSelection != \"undefined\" &&\n typeof document.createRange != \"undefined\"\n ) {\n var range = document.createRange();\n range.selectNodeContents(el);\n range.collapse(false);\n var sel = window.getSelection();\n sel.removeAllRanges();\n sel.addRange(range);\n } else if (typeof document.body.createTextRange != \"undefined\") {\n var textRange = document.body.createTextRange();\n textRange.moveToElementText(el);\n textRange.collapse(false);\n textRange.select();\n }\n }\n\n // for contenteditable\n insertTextAtCursor(text) {\n var sel, range, html;\n sel = window.getSelection();\n range = sel.getRangeAt(0);\n range.deleteContents();\n var textNode = document.createTextNode(text);\n range.insertNode(textNode);\n range.selectNodeContents(textNode);\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n }\n\n // for regular inputs\n insertAtCaret(textarea, text) {\n var scrollPos = textarea.scrollTop;\n var caretPos = textarea.selectionStart;\n\n var front = textarea.value.substring(0, caretPos);\n var back = textarea.value.substring(\n textarea.selectionEnd,\n textarea.value.length\n );\n textarea.value = front + text + back;\n caretPos = caretPos + text.length;\n textarea.selectionStart = caretPos;\n textarea.selectionEnd = caretPos;\n textarea.focus();\n textarea.scrollTop = scrollPos;\n }\n\n hideMenu() {\n if (this.menu) {\n this.menu.style.cssText = \"display: none;\";\n this.isActive = false;\n this.menuSelected = 0;\n this.current = {};\n }\n }\n\n selectItemAtIndex(index, originalEvent) {\n index = parseInt(index);\n if (typeof index !== \"number\" || isNaN(index)) return;\n let item = this.current.filteredItems[index];\n let content = this.current.collection.selectTemplate(item);\n if (content !== null) this.replaceText(content, originalEvent, item);\n }\n\n replaceText(content, originalEvent, item) {\n this.range.replaceTriggerText(content, true, true, originalEvent, item);\n }\n\n _append(collection, newValues, replace) {\n if (typeof collection.values === \"function\") {\n throw new Error(\"Unable to append to values, as it is a function.\");\n } else if (!replace) {\n collection.values = collection.values.concat(newValues);\n } else {\n collection.values = newValues;\n }\n }\n\n append(collectionIndex, newValues, replace) {\n let index = parseInt(collectionIndex);\n if (typeof index !== \"number\")\n throw new Error(\"please provide an index for the collection to update.\");\n\n let collection = this.collection[index];\n\n this._append(collection, newValues, replace);\n }\n\n appendCurrent(newValues, replace) {\n if (this.isActive) {\n this._append(this.current.collection, newValues, replace);\n } else {\n throw new Error(\n \"No active state. Please use append instead and pass an index.\"\n );\n }\n }\n\n detach(el) {\n if (!el) {\n throw new Error(\"[Tribute] Must pass in a DOM node or NodeList.\");\n }\n\n // Check if it is a jQuery collection\n if (typeof jQuery !== \"undefined\" && el instanceof jQuery) {\n el = el.get();\n }\n\n // Is el an Array/Array-like object?\n if (\n el.constructor === NodeList ||\n el.constructor === HTMLCollection ||\n el.constructor === Array\n ) {\n let length = el.length;\n for (var i = 0; i < length; ++i) {\n this._detach(el[i]);\n }\n } else {\n this._detach(el);\n }\n }\n\n _detach(el) {\n this.events.unbind(el);\n if (el.tributeMenu) {\n this.menuEvents.unbind(el.tributeMenu);\n }\n\n setTimeout(() => {\n el.removeAttribute(\"data-tribute\");\n this.isActive = false;\n if (el.tributeMenu) {\n el.tributeMenu.remove();\n }\n });\n }\n}\n\nexport default Tribute;\n", "/*!\n * Cropper.js v1.6.2\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2024-04-21T07:43:05.335Z\n */\n\n(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Cropper = factory());\n})(this, (function () { 'use strict';\n\n function ownKeys(e, r) {\n var t = Object.keys(e);\n if (Object.getOwnPropertySymbols) {\n var o = Object.getOwnPropertySymbols(e);\n r && (o = o.filter(function (r) {\n return Object.getOwnPropertyDescriptor(e, r).enumerable;\n })), t.push.apply(t, o);\n }\n return t;\n }\n function _objectSpread2(e) {\n for (var r = 1; r < arguments.length; r++) {\n var t = null != arguments[r] ? arguments[r] : {};\n r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {\n _defineProperty(e, r, t[r]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {\n Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));\n });\n }\n return e;\n }\n function _toPrimitive(t, r) {\n if (\"object\" != typeof t || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != typeof i) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n }\n function _toPropertyKey(t) {\n var i = _toPrimitive(t, \"string\");\n return \"symbol\" == typeof i ? i : i + \"\";\n }\n function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n }\n function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n }\n function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);\n }\n }\n function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n }\n function _defineProperty(obj, key, value) {\n key = _toPropertyKey(key);\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n return obj;\n }\n function _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n }\n function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n }\n function _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n }\n function _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n }\n function _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n return arr2;\n }\n function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n\n var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n var WINDOW = IS_BROWSER ? window : {};\n var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;\n var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;\n var NAMESPACE = 'cropper';\n\n // Actions\n var ACTION_ALL = 'all';\n var ACTION_CROP = 'crop';\n var ACTION_MOVE = 'move';\n var ACTION_ZOOM = 'zoom';\n var ACTION_EAST = 'e';\n var ACTION_WEST = 'w';\n var ACTION_SOUTH = 's';\n var ACTION_NORTH = 'n';\n var ACTION_NORTH_EAST = 'ne';\n var ACTION_NORTH_WEST = 'nw';\n var ACTION_SOUTH_EAST = 'se';\n var ACTION_SOUTH_WEST = 'sw';\n\n // Classes\n var CLASS_CROP = \"\".concat(NAMESPACE, \"-crop\");\n var CLASS_DISABLED = \"\".concat(NAMESPACE, \"-disabled\");\n var CLASS_HIDDEN = \"\".concat(NAMESPACE, \"-hidden\");\n var CLASS_HIDE = \"\".concat(NAMESPACE, \"-hide\");\n var CLASS_INVISIBLE = \"\".concat(NAMESPACE, \"-invisible\");\n var CLASS_MODAL = \"\".concat(NAMESPACE, \"-modal\");\n var CLASS_MOVE = \"\".concat(NAMESPACE, \"-move\");\n\n // Data keys\n var DATA_ACTION = \"\".concat(NAMESPACE, \"Action\");\n var DATA_PREVIEW = \"\".concat(NAMESPACE, \"Preview\");\n\n // Drag modes\n var DRAG_MODE_CROP = 'crop';\n var DRAG_MODE_MOVE = 'move';\n var DRAG_MODE_NONE = 'none';\n\n // Events\n var EVENT_CROP = 'crop';\n var EVENT_CROP_END = 'cropend';\n var EVENT_CROP_MOVE = 'cropmove';\n var EVENT_CROP_START = 'cropstart';\n var EVENT_DBLCLICK = 'dblclick';\n var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';\n var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';\n var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';\n var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;\n var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;\n var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;\n var EVENT_READY = 'ready';\n var EVENT_RESIZE = 'resize';\n var EVENT_WHEEL = 'wheel';\n var EVENT_ZOOM = 'zoom';\n\n // Mime types\n var MIME_TYPE_JPEG = 'image/jpeg';\n\n // RegExps\n var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;\n var REGEXP_DATA_URL = /^data:/;\n var REGEXP_DATA_URL_JPEG = /^data:image\\/jpeg;base64,/;\n var REGEXP_TAG_NAME = /^img|canvas$/i;\n\n // Misc\n // Inspired by the default width and height of a canvas element.\n var MIN_CONTAINER_WIDTH = 200;\n var MIN_CONTAINER_HEIGHT = 100;\n\n var DEFAULTS = {\n // Define the view mode of the cropper\n viewMode: 0,\n // 0, 1, 2, 3\n\n // Define the dragging mode of the cropper\n dragMode: DRAG_MODE_CROP,\n // 'crop', 'move' or 'none'\n\n // Define the initial aspect ratio of the crop box\n initialAspectRatio: NaN,\n // Define the aspect ratio of the crop box\n aspectRatio: NaN,\n // An object with the previous cropping result data\n data: null,\n // A selector for adding extra containers to preview\n preview: '',\n // Re-render the cropper when resize the window\n responsive: true,\n // Restore the cropped area after resize the window\n restore: true,\n // Check if the current image is a cross-origin image\n checkCrossOrigin: true,\n // Check the current image's Exif Orientation information\n checkOrientation: true,\n // Show the black modal\n modal: true,\n // Show the dashed lines for guiding\n guides: true,\n // Show the center indicator for guiding\n center: true,\n // Show the white modal to highlight the crop box\n highlight: true,\n // Show the grid background\n background: true,\n // Enable to crop the image automatically when initialize\n autoCrop: true,\n // Define the percentage of automatic cropping area when initializes\n autoCropArea: 0.8,\n // Enable to move the image\n movable: true,\n // Enable to rotate the image\n rotatable: true,\n // Enable to scale the image\n scalable: true,\n // Enable to zoom the image\n zoomable: true,\n // Enable to zoom the image by dragging touch\n zoomOnTouch: true,\n // Enable to zoom the image by wheeling mouse\n zoomOnWheel: true,\n // Define zoom ratio when zoom the image by wheeling mouse\n wheelZoomRatio: 0.1,\n // Enable to move the crop box\n cropBoxMovable: true,\n // Enable to resize the crop box\n cropBoxResizable: true,\n // Toggle drag mode between \"crop\" and \"move\" when click twice on the cropper\n toggleDragModeOnDblclick: true,\n // Size limitation\n minCanvasWidth: 0,\n minCanvasHeight: 0,\n minCropBoxWidth: 0,\n minCropBoxHeight: 0,\n minContainerWidth: MIN_CONTAINER_WIDTH,\n minContainerHeight: MIN_CONTAINER_HEIGHT,\n // Shortcuts of events\n ready: null,\n cropstart: null,\n cropmove: null,\n cropend: null,\n crop: null,\n zoom: null\n };\n\n var TEMPLATE = '' + '
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '
';\n\n /**\n * Check if the given value is not a number.\n */\n var isNaN = Number.isNaN || WINDOW.isNaN;\n\n /**\n * Check if the given value is a number.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a number, else `false`.\n */\n function isNumber(value) {\n return typeof value === 'number' && !isNaN(value);\n }\n\n /**\n * Check if the given value is a positive number.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a positive number, else `false`.\n */\n var isPositiveNumber = function isPositiveNumber(value) {\n return value > 0 && value < Infinity;\n };\n\n /**\n * Check if the given value is undefined.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is undefined, else `false`.\n */\n function isUndefined(value) {\n return typeof value === 'undefined';\n }\n\n /**\n * Check if the given value is an object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is an object, else `false`.\n */\n function isObject(value) {\n return _typeof(value) === 'object' && value !== null;\n }\n var hasOwnProperty = Object.prototype.hasOwnProperty;\n\n /**\n * Check if the given value is a plain object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.\n */\n function isPlainObject(value) {\n if (!isObject(value)) {\n return false;\n }\n try {\n var _constructor = value.constructor;\n var prototype = _constructor.prototype;\n return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');\n } catch (error) {\n return false;\n }\n }\n\n /**\n * Check if the given value is a function.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a function, else `false`.\n */\n function isFunction(value) {\n return typeof value === 'function';\n }\n var slice = Array.prototype.slice;\n\n /**\n * Convert array-like or iterable object to an array.\n * @param {*} value - The value to convert.\n * @returns {Array} Returns a new array.\n */\n function toArray(value) {\n return Array.from ? Array.from(value) : slice.call(value);\n }\n\n /**\n * Iterate the given data.\n * @param {*} data - The data to iterate.\n * @param {Function} callback - The process function for each element.\n * @returns {*} The original data.\n */\n function forEach(data, callback) {\n if (data && isFunction(callback)) {\n if (Array.isArray(data) || isNumber(data.length) /* array-like */) {\n toArray(data).forEach(function (value, key) {\n callback.call(data, value, key, data);\n });\n } else if (isObject(data)) {\n Object.keys(data).forEach(function (key) {\n callback.call(data, data[key], key, data);\n });\n }\n }\n return data;\n }\n\n /**\n * Extend the given object.\n * @param {*} target - The target object to extend.\n * @param {*} args - The rest objects for merging to the target object.\n * @returns {Object} The extended object.\n */\n var assign = Object.assign || function assign(target) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n if (isObject(target) && args.length > 0) {\n args.forEach(function (arg) {\n if (isObject(arg)) {\n Object.keys(arg).forEach(function (key) {\n target[key] = arg[key];\n });\n }\n });\n }\n return target;\n };\n var REGEXP_DECIMALS = /\\.\\d*(?:0|9){12}\\d*$/;\n\n /**\n * Normalize decimal number.\n * Check out {@link https://0.30000000000000004.com/}\n * @param {number} value - The value to normalize.\n * @param {number} [times=100000000000] - The times for normalizing.\n * @returns {number} Returns the normalized number.\n */\n function normalizeDecimalNumber(value) {\n var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;\n return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;\n }\n var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;\n\n /**\n * Apply styles to the given element.\n * @param {Element} element - The target element.\n * @param {Object} styles - The styles for applying.\n */\n function setStyle(element, styles) {\n var style = element.style;\n forEach(styles, function (value, property) {\n if (REGEXP_SUFFIX.test(property) && isNumber(value)) {\n value = \"\".concat(value, \"px\");\n }\n style[property] = value;\n });\n }\n\n /**\n * Check if the given element has a special class.\n * @param {Element} element - The element to check.\n * @param {string} value - The class to search.\n * @returns {boolean} Returns `true` if the special class was found.\n */\n function hasClass(element, value) {\n return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;\n }\n\n /**\n * Add classes to the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be added.\n */\n function addClass(element, value) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n addClass(elem, value);\n });\n return;\n }\n if (element.classList) {\n element.classList.add(value);\n return;\n }\n var className = element.className.trim();\n if (!className) {\n element.className = value;\n } else if (className.indexOf(value) < 0) {\n element.className = \"\".concat(className, \" \").concat(value);\n }\n }\n\n /**\n * Remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be removed.\n */\n function removeClass(element, value) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n removeClass(elem, value);\n });\n return;\n }\n if (element.classList) {\n element.classList.remove(value);\n return;\n }\n if (element.className.indexOf(value) >= 0) {\n element.className = element.className.replace(value, '');\n }\n }\n\n /**\n * Add or remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be toggled.\n * @param {boolean} added - Add only.\n */\n function toggleClass(element, value, added) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n toggleClass(elem, value, added);\n });\n return;\n }\n\n // IE10-11 doesn't support the second parameter of `classList.toggle`\n if (added) {\n addClass(element, value);\n } else {\n removeClass(element, value);\n }\n }\n var REGEXP_CAMEL_CASE = /([a-z\\d])([A-Z])/g;\n\n /**\n * Transform the given string from camelCase to kebab-case\n * @param {string} value - The value to transform.\n * @returns {string} The transformed value.\n */\n function toParamCase(value) {\n return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();\n }\n\n /**\n * Get data from the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to get.\n * @returns {string} The data value.\n */\n function getData(element, name) {\n if (isObject(element[name])) {\n return element[name];\n }\n if (element.dataset) {\n return element.dataset[name];\n }\n return element.getAttribute(\"data-\".concat(toParamCase(name)));\n }\n\n /**\n * Set data to the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to set.\n * @param {string} data - The data value.\n */\n function setData(element, name, data) {\n if (isObject(data)) {\n element[name] = data;\n } else if (element.dataset) {\n element.dataset[name] = data;\n } else {\n element.setAttribute(\"data-\".concat(toParamCase(name)), data);\n }\n }\n\n /**\n * Remove data from the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to remove.\n */\n function removeData(element, name) {\n if (isObject(element[name])) {\n try {\n delete element[name];\n } catch (error) {\n element[name] = undefined;\n }\n } else if (element.dataset) {\n // #128 Safari not allows to delete dataset property\n try {\n delete element.dataset[name];\n } catch (error) {\n element.dataset[name] = undefined;\n }\n } else {\n element.removeAttribute(\"data-\".concat(toParamCase(name)));\n }\n }\n var REGEXP_SPACES = /\\s\\s*/;\n var onceSupported = function () {\n var supported = false;\n if (IS_BROWSER) {\n var once = false;\n var listener = function listener() {};\n var options = Object.defineProperty({}, 'once', {\n get: function get() {\n supported = true;\n return once;\n },\n /**\n * This setter can fix a `TypeError` in strict mode\n * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}\n * @param {boolean} value - The value to set\n */\n set: function set(value) {\n once = value;\n }\n });\n WINDOW.addEventListener('test', listener, options);\n WINDOW.removeEventListener('test', listener, options);\n }\n return supported;\n }();\n\n /**\n * Remove event listener from the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\n function removeListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (!onceSupported) {\n var listeners = element.listeners;\n if (listeners && listeners[event] && listeners[event][listener]) {\n handler = listeners[event][listener];\n delete listeners[event][listener];\n if (Object.keys(listeners[event]).length === 0) {\n delete listeners[event];\n }\n if (Object.keys(listeners).length === 0) {\n delete element.listeners;\n }\n }\n }\n element.removeEventListener(event, handler, options);\n });\n }\n\n /**\n * Add event listener to the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\n function addListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var _handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (options.once && !onceSupported) {\n var _element$listeners = element.listeners,\n listeners = _element$listeners === void 0 ? {} : _element$listeners;\n _handler = function handler() {\n delete listeners[event][listener];\n element.removeEventListener(event, _handler, options);\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n listener.apply(element, args);\n };\n if (!listeners[event]) {\n listeners[event] = {};\n }\n if (listeners[event][listener]) {\n element.removeEventListener(event, listeners[event][listener], options);\n }\n listeners[event][listener] = _handler;\n element.listeners = listeners;\n }\n element.addEventListener(event, _handler, options);\n });\n }\n\n /**\n * Dispatch event on the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Object} data - The additional event data.\n * @returns {boolean} Indicate if the event is default prevented or not.\n */\n function dispatchEvent(element, type, data) {\n var event;\n\n // Event and CustomEvent on IE9-11 are global objects, not constructors\n if (isFunction(Event) && isFunction(CustomEvent)) {\n event = new CustomEvent(type, {\n detail: data,\n bubbles: true,\n cancelable: true\n });\n } else {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent(type, true, true, data);\n }\n return element.dispatchEvent(event);\n }\n\n /**\n * Get the offset base on the document.\n * @param {Element} element - The target element.\n * @returns {Object} The offset data.\n */\n function getOffset(element) {\n var box = element.getBoundingClientRect();\n return {\n left: box.left + (window.pageXOffset - document.documentElement.clientLeft),\n top: box.top + (window.pageYOffset - document.documentElement.clientTop)\n };\n }\n var location = WINDOW.location;\n var REGEXP_ORIGINS = /^(\\w+:)\\/\\/([^:/?#]*):?(\\d*)/i;\n\n /**\n * Check if the given URL is a cross origin URL.\n * @param {string} url - The target URL.\n * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`.\n */\n function isCrossOriginURL(url) {\n var parts = url.match(REGEXP_ORIGINS);\n return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);\n }\n\n /**\n * Add timestamp to the given URL.\n * @param {string} url - The target URL.\n * @returns {string} The result URL.\n */\n function addTimestamp(url) {\n var timestamp = \"timestamp=\".concat(new Date().getTime());\n return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;\n }\n\n /**\n * Get transforms base on the given object.\n * @param {Object} obj - The target object.\n * @returns {string} A string contains transform values.\n */\n function getTransforms(_ref) {\n var rotate = _ref.rotate,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n translateX = _ref.translateX,\n translateY = _ref.translateY;\n var values = [];\n if (isNumber(translateX) && translateX !== 0) {\n values.push(\"translateX(\".concat(translateX, \"px)\"));\n }\n if (isNumber(translateY) && translateY !== 0) {\n values.push(\"translateY(\".concat(translateY, \"px)\"));\n }\n\n // Rotate should come first before scale to match orientation transform\n if (isNumber(rotate) && rotate !== 0) {\n values.push(\"rotate(\".concat(rotate, \"deg)\"));\n }\n if (isNumber(scaleX) && scaleX !== 1) {\n values.push(\"scaleX(\".concat(scaleX, \")\"));\n }\n if (isNumber(scaleY) && scaleY !== 1) {\n values.push(\"scaleY(\".concat(scaleY, \")\"));\n }\n var transform = values.length ? values.join(' ') : 'none';\n return {\n WebkitTransform: transform,\n msTransform: transform,\n transform: transform\n };\n }\n\n /**\n * Get the max ratio of a group of pointers.\n * @param {string} pointers - The target pointers.\n * @returns {number} The result ratio.\n */\n function getMaxZoomRatio(pointers) {\n var pointers2 = _objectSpread2({}, pointers);\n var maxRatio = 0;\n forEach(pointers, function (pointer, pointerId) {\n delete pointers2[pointerId];\n forEach(pointers2, function (pointer2) {\n var x1 = Math.abs(pointer.startX - pointer2.startX);\n var y1 = Math.abs(pointer.startY - pointer2.startY);\n var x2 = Math.abs(pointer.endX - pointer2.endX);\n var y2 = Math.abs(pointer.endY - pointer2.endY);\n var z1 = Math.sqrt(x1 * x1 + y1 * y1);\n var z2 = Math.sqrt(x2 * x2 + y2 * y2);\n var ratio = (z2 - z1) / z1;\n if (Math.abs(ratio) > Math.abs(maxRatio)) {\n maxRatio = ratio;\n }\n });\n });\n return maxRatio;\n }\n\n /**\n * Get a pointer from an event object.\n * @param {Object} event - The target event object.\n * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.\n * @returns {Object} The result pointer contains start and/or end point coordinates.\n */\n function getPointer(_ref2, endOnly) {\n var pageX = _ref2.pageX,\n pageY = _ref2.pageY;\n var end = {\n endX: pageX,\n endY: pageY\n };\n return endOnly ? end : _objectSpread2({\n startX: pageX,\n startY: pageY\n }, end);\n }\n\n /**\n * Get the center point coordinate of a group of pointers.\n * @param {Object} pointers - The target pointers.\n * @returns {Object} The center point coordinate.\n */\n function getPointersCenter(pointers) {\n var pageX = 0;\n var pageY = 0;\n var count = 0;\n forEach(pointers, function (_ref3) {\n var startX = _ref3.startX,\n startY = _ref3.startY;\n pageX += startX;\n pageY += startY;\n count += 1;\n });\n pageX /= count;\n pageY /= count;\n return {\n pageX: pageX,\n pageY: pageY\n };\n }\n\n /**\n * Get the max sizes in a rectangle under the given aspect ratio.\n * @param {Object} data - The original sizes.\n * @param {string} [type='contain'] - The adjust type.\n * @returns {Object} The result sizes.\n */\n function getAdjustedSizes(_ref4) {\n var aspectRatio = _ref4.aspectRatio,\n height = _ref4.height,\n width = _ref4.width;\n var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';\n var isValidWidth = isPositiveNumber(width);\n var isValidHeight = isPositiveNumber(height);\n if (isValidWidth && isValidHeight) {\n var adjustedWidth = height * aspectRatio;\n if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) {\n height = width / aspectRatio;\n } else {\n width = height * aspectRatio;\n }\n } else if (isValidWidth) {\n height = width / aspectRatio;\n } else if (isValidHeight) {\n width = height * aspectRatio;\n }\n return {\n width: width,\n height: height\n };\n }\n\n /**\n * Get the new sizes of a rectangle after rotated.\n * @param {Object} data - The original sizes.\n * @returns {Object} The result sizes.\n */\n function getRotatedSizes(_ref5) {\n var width = _ref5.width,\n height = _ref5.height,\n degree = _ref5.degree;\n degree = Math.abs(degree) % 180;\n if (degree === 90) {\n return {\n width: height,\n height: width\n };\n }\n var arc = degree % 90 * Math.PI / 180;\n var sinArc = Math.sin(arc);\n var cosArc = Math.cos(arc);\n var newWidth = width * cosArc + height * sinArc;\n var newHeight = width * sinArc + height * cosArc;\n return degree > 90 ? {\n width: newHeight,\n height: newWidth\n } : {\n width: newWidth,\n height: newHeight\n };\n }\n\n /**\n * Get a canvas which drew the given image.\n * @param {HTMLImageElement} image - The image for drawing.\n * @param {Object} imageData - The image data.\n * @param {Object} canvasData - The canvas data.\n * @param {Object} options - The options.\n * @returns {HTMLCanvasElement} The result canvas.\n */\n function getSourceCanvas(image, _ref6, _ref7, _ref8) {\n var imageAspectRatio = _ref6.aspectRatio,\n imageNaturalWidth = _ref6.naturalWidth,\n imageNaturalHeight = _ref6.naturalHeight,\n _ref6$rotate = _ref6.rotate,\n rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,\n _ref6$scaleX = _ref6.scaleX,\n scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,\n _ref6$scaleY = _ref6.scaleY,\n scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;\n var aspectRatio = _ref7.aspectRatio,\n naturalWidth = _ref7.naturalWidth,\n naturalHeight = _ref7.naturalHeight;\n var _ref8$fillColor = _ref8.fillColor,\n fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor,\n _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,\n imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,\n _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,\n imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,\n _ref8$maxWidth = _ref8.maxWidth,\n maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,\n _ref8$maxHeight = _ref8.maxHeight,\n maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,\n _ref8$minWidth = _ref8.minWidth,\n minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,\n _ref8$minHeight = _ref8.minHeight,\n minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n var maxSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: maxWidth,\n height: maxHeight\n });\n var minSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: minWidth,\n height: minHeight\n }, 'cover');\n var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));\n var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));\n\n // Note: should always use image's natural sizes for drawing as\n // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90\n var destMaxSizes = getAdjustedSizes({\n aspectRatio: imageAspectRatio,\n width: maxWidth,\n height: maxHeight\n });\n var destMinSizes = getAdjustedSizes({\n aspectRatio: imageAspectRatio,\n width: minWidth,\n height: minHeight\n }, 'cover');\n var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));\n var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));\n var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];\n canvas.width = normalizeDecimalNumber(width);\n canvas.height = normalizeDecimalNumber(height);\n context.fillStyle = fillColor;\n context.fillRect(0, 0, width, height);\n context.save();\n context.translate(width / 2, height / 2);\n context.rotate(rotate * Math.PI / 180);\n context.scale(scaleX, scaleY);\n context.imageSmoothingEnabled = imageSmoothingEnabled;\n context.imageSmoothingQuality = imageSmoothingQuality;\n context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {\n return Math.floor(normalizeDecimalNumber(param));\n }))));\n context.restore();\n return canvas;\n }\n var fromCharCode = String.fromCharCode;\n\n /**\n * Get string from char code in data view.\n * @param {DataView} dataView - The data view for read.\n * @param {number} start - The start index.\n * @param {number} length - The read length.\n * @returns {string} The read result.\n */\n function getStringFromCharCode(dataView, start, length) {\n var str = '';\n length += start;\n for (var i = start; i < length; i += 1) {\n str += fromCharCode(dataView.getUint8(i));\n }\n return str;\n }\n var REGEXP_DATA_URL_HEAD = /^data:.*,/;\n\n /**\n * Transform Data URL to array buffer.\n * @param {string} dataURL - The Data URL to transform.\n * @returns {ArrayBuffer} The result array buffer.\n */\n function dataURLToArrayBuffer(dataURL) {\n var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');\n var binary = atob(base64);\n var arrayBuffer = new ArrayBuffer(binary.length);\n var uint8 = new Uint8Array(arrayBuffer);\n forEach(uint8, function (value, i) {\n uint8[i] = binary.charCodeAt(i);\n });\n return arrayBuffer;\n }\n\n /**\n * Transform array buffer to Data URL.\n * @param {ArrayBuffer} arrayBuffer - The array buffer to transform.\n * @param {string} mimeType - The mime type of the Data URL.\n * @returns {string} The result Data URL.\n */\n function arrayBufferToDataURL(arrayBuffer, mimeType) {\n var chunks = [];\n\n // Chunk Typed Array for better performance (#435)\n var chunkSize = 8192;\n var uint8 = new Uint8Array(arrayBuffer);\n while (uint8.length > 0) {\n // XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9\n // eslint-disable-next-line prefer-spread\n chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));\n uint8 = uint8.subarray(chunkSize);\n }\n return \"data:\".concat(mimeType, \";base64,\").concat(btoa(chunks.join('')));\n }\n\n /**\n * Get orientation value from given array buffer.\n * @param {ArrayBuffer} arrayBuffer - The array buffer to read.\n * @returns {number} The read orientation value.\n */\n function resetAndGetOrientation(arrayBuffer) {\n var dataView = new DataView(arrayBuffer);\n var orientation;\n\n // Ignores range error when the image does not have correct Exif information\n try {\n var littleEndian;\n var app1Start;\n var ifdStart;\n\n // Only handle JPEG image (start by 0xFFD8)\n if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {\n var length = dataView.byteLength;\n var offset = 2;\n while (offset + 1 < length) {\n if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {\n app1Start = offset;\n break;\n }\n offset += 1;\n }\n }\n if (app1Start) {\n var exifIDCode = app1Start + 4;\n var tiffOffset = app1Start + 10;\n if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {\n var endianness = dataView.getUint16(tiffOffset);\n littleEndian = endianness === 0x4949;\n if (littleEndian || endianness === 0x4D4D /* bigEndian */) {\n if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {\n var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);\n if (firstIFDOffset >= 0x00000008) {\n ifdStart = tiffOffset + firstIFDOffset;\n }\n }\n }\n }\n }\n if (ifdStart) {\n var _length = dataView.getUint16(ifdStart, littleEndian);\n var _offset;\n var i;\n for (i = 0; i < _length; i += 1) {\n _offset = ifdStart + i * 12 + 2;\n if (dataView.getUint16(_offset, littleEndian) === 0x0112 /* Orientation */) {\n // 8 is the offset of the current tag's value\n _offset += 8;\n\n // Get the original orientation value\n orientation = dataView.getUint16(_offset, littleEndian);\n\n // Override the orientation with its default value\n dataView.setUint16(_offset, 1, littleEndian);\n break;\n }\n }\n }\n } catch (error) {\n orientation = 1;\n }\n return orientation;\n }\n\n /**\n * Parse Exif Orientation value.\n * @param {number} orientation - The orientation to parse.\n * @returns {Object} The parsed result.\n */\n function parseOrientation(orientation) {\n var rotate = 0;\n var scaleX = 1;\n var scaleY = 1;\n switch (orientation) {\n // Flip horizontal\n case 2:\n scaleX = -1;\n break;\n\n // Rotate left 180\u00B0\n case 3:\n rotate = -180;\n break;\n\n // Flip vertical\n case 4:\n scaleY = -1;\n break;\n\n // Flip vertical and rotate right 90\u00B0\n case 5:\n rotate = 90;\n scaleY = -1;\n break;\n\n // Rotate right 90\u00B0\n case 6:\n rotate = 90;\n break;\n\n // Flip horizontal and rotate right 90\u00B0\n case 7:\n rotate = 90;\n scaleX = -1;\n break;\n\n // Rotate left 90\u00B0\n case 8:\n rotate = -90;\n break;\n }\n return {\n rotate: rotate,\n scaleX: scaleX,\n scaleY: scaleY\n };\n }\n\n var render = {\n render: function render() {\n this.initContainer();\n this.initCanvas();\n this.initCropBox();\n this.renderCanvas();\n if (this.cropped) {\n this.renderCropBox();\n }\n },\n initContainer: function initContainer() {\n var element = this.element,\n options = this.options,\n container = this.container,\n cropper = this.cropper;\n var minWidth = Number(options.minContainerWidth);\n var minHeight = Number(options.minContainerHeight);\n addClass(cropper, CLASS_HIDDEN);\n removeClass(element, CLASS_HIDDEN);\n var containerData = {\n width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),\n height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)\n };\n this.containerData = containerData;\n setStyle(cropper, {\n width: containerData.width,\n height: containerData.height\n });\n addClass(element, CLASS_HIDDEN);\n removeClass(cropper, CLASS_HIDDEN);\n },\n // Canvas (image wrapper)\n initCanvas: function initCanvas() {\n var containerData = this.containerData,\n imageData = this.imageData;\n var viewMode = this.options.viewMode;\n var rotated = Math.abs(imageData.rotate) % 180 === 90;\n var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;\n var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;\n var aspectRatio = naturalWidth / naturalHeight;\n var canvasWidth = containerData.width;\n var canvasHeight = containerData.height;\n if (containerData.height * aspectRatio > containerData.width) {\n if (viewMode === 3) {\n canvasWidth = containerData.height * aspectRatio;\n } else {\n canvasHeight = containerData.width / aspectRatio;\n }\n } else if (viewMode === 3) {\n canvasHeight = containerData.width / aspectRatio;\n } else {\n canvasWidth = containerData.height * aspectRatio;\n }\n var canvasData = {\n aspectRatio: aspectRatio,\n naturalWidth: naturalWidth,\n naturalHeight: naturalHeight,\n width: canvasWidth,\n height: canvasHeight\n };\n this.canvasData = canvasData;\n this.limited = viewMode === 1 || viewMode === 2;\n this.limitCanvas(true, true);\n canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);\n canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);\n canvasData.left = (containerData.width - canvasData.width) / 2;\n canvasData.top = (containerData.height - canvasData.height) / 2;\n canvasData.oldLeft = canvasData.left;\n canvasData.oldTop = canvasData.top;\n this.initialCanvasData = assign({}, canvasData);\n },\n limitCanvas: function limitCanvas(sizeLimited, positionLimited) {\n var options = this.options,\n containerData = this.containerData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n var viewMode = options.viewMode;\n var aspectRatio = canvasData.aspectRatio;\n var cropped = this.cropped && cropBoxData;\n if (sizeLimited) {\n var minCanvasWidth = Number(options.minCanvasWidth) || 0;\n var minCanvasHeight = Number(options.minCanvasHeight) || 0;\n if (viewMode > 1) {\n minCanvasWidth = Math.max(minCanvasWidth, containerData.width);\n minCanvasHeight = Math.max(minCanvasHeight, containerData.height);\n if (viewMode === 3) {\n if (minCanvasHeight * aspectRatio > minCanvasWidth) {\n minCanvasWidth = minCanvasHeight * aspectRatio;\n } else {\n minCanvasHeight = minCanvasWidth / aspectRatio;\n }\n }\n } else if (viewMode > 0) {\n if (minCanvasWidth) {\n minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0);\n } else if (minCanvasHeight) {\n minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0);\n } else if (cropped) {\n minCanvasWidth = cropBoxData.width;\n minCanvasHeight = cropBoxData.height;\n if (minCanvasHeight * aspectRatio > minCanvasWidth) {\n minCanvasWidth = minCanvasHeight * aspectRatio;\n } else {\n minCanvasHeight = minCanvasWidth / aspectRatio;\n }\n }\n }\n var _getAdjustedSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: minCanvasWidth,\n height: minCanvasHeight\n });\n minCanvasWidth = _getAdjustedSizes.width;\n minCanvasHeight = _getAdjustedSizes.height;\n canvasData.minWidth = minCanvasWidth;\n canvasData.minHeight = minCanvasHeight;\n canvasData.maxWidth = Infinity;\n canvasData.maxHeight = Infinity;\n }\n if (positionLimited) {\n if (viewMode > (cropped ? 0 : 1)) {\n var newCanvasLeft = containerData.width - canvasData.width;\n var newCanvasTop = containerData.height - canvasData.height;\n canvasData.minLeft = Math.min(0, newCanvasLeft);\n canvasData.minTop = Math.min(0, newCanvasTop);\n canvasData.maxLeft = Math.max(0, newCanvasLeft);\n canvasData.maxTop = Math.max(0, newCanvasTop);\n if (cropped && this.limited) {\n canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width));\n canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height));\n canvasData.maxLeft = cropBoxData.left;\n canvasData.maxTop = cropBoxData.top;\n if (viewMode === 2) {\n if (canvasData.width >= containerData.width) {\n canvasData.minLeft = Math.min(0, newCanvasLeft);\n canvasData.maxLeft = Math.max(0, newCanvasLeft);\n }\n if (canvasData.height >= containerData.height) {\n canvasData.minTop = Math.min(0, newCanvasTop);\n canvasData.maxTop = Math.max(0, newCanvasTop);\n }\n }\n }\n } else {\n canvasData.minLeft = -canvasData.width;\n canvasData.minTop = -canvasData.height;\n canvasData.maxLeft = containerData.width;\n canvasData.maxTop = containerData.height;\n }\n }\n },\n renderCanvas: function renderCanvas(changed, transformed) {\n var canvasData = this.canvasData,\n imageData = this.imageData;\n if (transformed) {\n var _getRotatedSizes = getRotatedSizes({\n width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),\n height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),\n degree: imageData.rotate || 0\n }),\n naturalWidth = _getRotatedSizes.width,\n naturalHeight = _getRotatedSizes.height;\n var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);\n var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);\n canvasData.left -= (width - canvasData.width) / 2;\n canvasData.top -= (height - canvasData.height) / 2;\n canvasData.width = width;\n canvasData.height = height;\n canvasData.aspectRatio = naturalWidth / naturalHeight;\n canvasData.naturalWidth = naturalWidth;\n canvasData.naturalHeight = naturalHeight;\n this.limitCanvas(true, false);\n }\n if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {\n canvasData.left = canvasData.oldLeft;\n }\n if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {\n canvasData.top = canvasData.oldTop;\n }\n canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);\n canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);\n this.limitCanvas(false, true);\n canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);\n canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);\n canvasData.oldLeft = canvasData.left;\n canvasData.oldTop = canvasData.top;\n setStyle(this.canvas, assign({\n width: canvasData.width,\n height: canvasData.height\n }, getTransforms({\n translateX: canvasData.left,\n translateY: canvasData.top\n })));\n this.renderImage(changed);\n if (this.cropped && this.limited) {\n this.limitCropBox(true, true);\n }\n },\n renderImage: function renderImage(changed) {\n var canvasData = this.canvasData,\n imageData = this.imageData;\n var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);\n var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);\n assign(imageData, {\n width: width,\n height: height,\n left: (canvasData.width - width) / 2,\n top: (canvasData.height - height) / 2\n });\n setStyle(this.image, assign({\n width: imageData.width,\n height: imageData.height\n }, getTransforms(assign({\n translateX: imageData.left,\n translateY: imageData.top\n }, imageData))));\n if (changed) {\n this.output();\n }\n },\n initCropBox: function initCropBox() {\n var options = this.options,\n canvasData = this.canvasData;\n var aspectRatio = options.aspectRatio || options.initialAspectRatio;\n var autoCropArea = Number(options.autoCropArea) || 0.8;\n var cropBoxData = {\n width: canvasData.width,\n height: canvasData.height\n };\n if (aspectRatio) {\n if (canvasData.height * aspectRatio > canvasData.width) {\n cropBoxData.height = cropBoxData.width / aspectRatio;\n } else {\n cropBoxData.width = cropBoxData.height * aspectRatio;\n }\n }\n this.cropBoxData = cropBoxData;\n this.limitCropBox(true, true);\n\n // Initialize auto crop area\n cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);\n cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);\n\n // The width/height of auto crop area must large than \"minWidth/Height\"\n cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);\n cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);\n cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;\n cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;\n cropBoxData.oldLeft = cropBoxData.left;\n cropBoxData.oldTop = cropBoxData.top;\n this.initialCropBoxData = assign({}, cropBoxData);\n },\n limitCropBox: function limitCropBox(sizeLimited, positionLimited) {\n var options = this.options,\n containerData = this.containerData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData,\n limited = this.limited;\n var aspectRatio = options.aspectRatio;\n if (sizeLimited) {\n var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;\n var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;\n var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;\n var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height;\n\n // The min/maxCropBoxWidth/Height must be less than container's width/height\n minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);\n minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);\n if (aspectRatio) {\n if (minCropBoxWidth && minCropBoxHeight) {\n if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {\n minCropBoxHeight = minCropBoxWidth / aspectRatio;\n } else {\n minCropBoxWidth = minCropBoxHeight * aspectRatio;\n }\n } else if (minCropBoxWidth) {\n minCropBoxHeight = minCropBoxWidth / aspectRatio;\n } else if (minCropBoxHeight) {\n minCropBoxWidth = minCropBoxHeight * aspectRatio;\n }\n if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {\n maxCropBoxHeight = maxCropBoxWidth / aspectRatio;\n } else {\n maxCropBoxWidth = maxCropBoxHeight * aspectRatio;\n }\n }\n\n // The minWidth/Height must be less than maxWidth/Height\n cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);\n cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);\n cropBoxData.maxWidth = maxCropBoxWidth;\n cropBoxData.maxHeight = maxCropBoxHeight;\n }\n if (positionLimited) {\n if (limited) {\n cropBoxData.minLeft = Math.max(0, canvasData.left);\n cropBoxData.minTop = Math.max(0, canvasData.top);\n cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width;\n cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height;\n } else {\n cropBoxData.minLeft = 0;\n cropBoxData.minTop = 0;\n cropBoxData.maxLeft = containerData.width - cropBoxData.width;\n cropBoxData.maxTop = containerData.height - cropBoxData.height;\n }\n }\n },\n renderCropBox: function renderCropBox() {\n var options = this.options,\n containerData = this.containerData,\n cropBoxData = this.cropBoxData;\n if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {\n cropBoxData.left = cropBoxData.oldLeft;\n }\n if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {\n cropBoxData.top = cropBoxData.oldTop;\n }\n cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);\n cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);\n this.limitCropBox(false, true);\n cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);\n cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);\n cropBoxData.oldLeft = cropBoxData.left;\n cropBoxData.oldTop = cropBoxData.top;\n if (options.movable && options.cropBoxMovable) {\n // Turn to move the canvas when the crop box is equal to the container\n setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);\n }\n setStyle(this.cropBox, assign({\n width: cropBoxData.width,\n height: cropBoxData.height\n }, getTransforms({\n translateX: cropBoxData.left,\n translateY: cropBoxData.top\n })));\n if (this.cropped && this.limited) {\n this.limitCanvas(true, true);\n }\n if (!this.disabled) {\n this.output();\n }\n },\n output: function output() {\n this.preview();\n dispatchEvent(this.element, EVENT_CROP, this.getData());\n }\n };\n\n var preview = {\n initPreview: function initPreview() {\n var element = this.element,\n crossOrigin = this.crossOrigin;\n var preview = this.options.preview;\n var url = crossOrigin ? this.crossOriginUrl : this.url;\n var alt = element.alt || 'The image to preview';\n var image = document.createElement('img');\n if (crossOrigin) {\n image.crossOrigin = crossOrigin;\n }\n image.src = url;\n image.alt = alt;\n this.viewBox.appendChild(image);\n this.viewBoxImage = image;\n if (!preview) {\n return;\n }\n var previews = preview;\n if (typeof preview === 'string') {\n previews = element.ownerDocument.querySelectorAll(preview);\n } else if (preview.querySelector) {\n previews = [preview];\n }\n this.previews = previews;\n forEach(previews, function (el) {\n var img = document.createElement('img');\n\n // Save the original size for recover\n setData(el, DATA_PREVIEW, {\n width: el.offsetWidth,\n height: el.offsetHeight,\n html: el.innerHTML\n });\n if (crossOrigin) {\n img.crossOrigin = crossOrigin;\n }\n img.src = url;\n img.alt = alt;\n\n /**\n * Override img element styles\n * Add `display:block` to avoid margin top issue\n * Add `height:auto` to override `height` attribute on IE8\n * (Occur only when margin-top <= -height)\n */\n img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;\"';\n el.innerHTML = '';\n el.appendChild(img);\n });\n },\n resetPreview: function resetPreview() {\n forEach(this.previews, function (element) {\n var data = getData(element, DATA_PREVIEW);\n setStyle(element, {\n width: data.width,\n height: data.height\n });\n element.innerHTML = data.html;\n removeData(element, DATA_PREVIEW);\n });\n },\n preview: function preview() {\n var imageData = this.imageData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n var cropBoxWidth = cropBoxData.width,\n cropBoxHeight = cropBoxData.height;\n var width = imageData.width,\n height = imageData.height;\n var left = cropBoxData.left - canvasData.left - imageData.left;\n var top = cropBoxData.top - canvasData.top - imageData.top;\n if (!this.cropped || this.disabled) {\n return;\n }\n setStyle(this.viewBoxImage, assign({\n width: width,\n height: height\n }, getTransforms(assign({\n translateX: -left,\n translateY: -top\n }, imageData))));\n forEach(this.previews, function (element) {\n var data = getData(element, DATA_PREVIEW);\n var originalWidth = data.width;\n var originalHeight = data.height;\n var newWidth = originalWidth;\n var newHeight = originalHeight;\n var ratio = 1;\n if (cropBoxWidth) {\n ratio = originalWidth / cropBoxWidth;\n newHeight = cropBoxHeight * ratio;\n }\n if (cropBoxHeight && newHeight > originalHeight) {\n ratio = originalHeight / cropBoxHeight;\n newWidth = cropBoxWidth * ratio;\n newHeight = originalHeight;\n }\n setStyle(element, {\n width: newWidth,\n height: newHeight\n });\n setStyle(element.getElementsByTagName('img')[0], assign({\n width: width * ratio,\n height: height * ratio\n }, getTransforms(assign({\n translateX: -left * ratio,\n translateY: -top * ratio\n }, imageData))));\n });\n }\n };\n\n var events = {\n bind: function bind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n if (isFunction(options.cropstart)) {\n addListener(element, EVENT_CROP_START, options.cropstart);\n }\n if (isFunction(options.cropmove)) {\n addListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n if (isFunction(options.cropend)) {\n addListener(element, EVENT_CROP_END, options.cropend);\n }\n if (isFunction(options.crop)) {\n addListener(element, EVENT_CROP, options.crop);\n }\n if (isFunction(options.zoom)) {\n addListener(element, EVENT_ZOOM, options.zoom);\n }\n addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));\n if (options.zoomable && options.zoomOnWheel) {\n addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {\n passive: false,\n capture: true\n });\n }\n if (options.toggleDragModeOnDblclick) {\n addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));\n }\n addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this));\n addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this));\n if (options.responsive) {\n addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));\n }\n },\n unbind: function unbind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n if (isFunction(options.cropstart)) {\n removeListener(element, EVENT_CROP_START, options.cropstart);\n }\n if (isFunction(options.cropmove)) {\n removeListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n if (isFunction(options.cropend)) {\n removeListener(element, EVENT_CROP_END, options.cropend);\n }\n if (isFunction(options.crop)) {\n removeListener(element, EVENT_CROP, options.crop);\n }\n if (isFunction(options.zoom)) {\n removeListener(element, EVENT_ZOOM, options.zoom);\n }\n removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);\n if (options.zoomable && options.zoomOnWheel) {\n removeListener(cropper, EVENT_WHEEL, this.onWheel, {\n passive: false,\n capture: true\n });\n }\n if (options.toggleDragModeOnDblclick) {\n removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);\n }\n removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);\n removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);\n if (options.responsive) {\n removeListener(window, EVENT_RESIZE, this.onResize);\n }\n }\n };\n\n var handlers = {\n resize: function resize() {\n if (this.disabled) {\n return;\n }\n var options = this.options,\n container = this.container,\n containerData = this.containerData;\n var ratioX = container.offsetWidth / containerData.width;\n var ratioY = container.offsetHeight / containerData.height;\n var ratio = Math.abs(ratioX - 1) > Math.abs(ratioY - 1) ? ratioX : ratioY;\n\n // Resize when width changed or height changed\n if (ratio !== 1) {\n var canvasData;\n var cropBoxData;\n if (options.restore) {\n canvasData = this.getCanvasData();\n cropBoxData = this.getCropBoxData();\n }\n this.render();\n if (options.restore) {\n this.setCanvasData(forEach(canvasData, function (n, i) {\n canvasData[i] = n * ratio;\n }));\n this.setCropBoxData(forEach(cropBoxData, function (n, i) {\n cropBoxData[i] = n * ratio;\n }));\n }\n }\n },\n dblclick: function dblclick() {\n if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {\n return;\n }\n this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);\n },\n wheel: function wheel(event) {\n var _this = this;\n var ratio = Number(this.options.wheelZoomRatio) || 0.1;\n var delta = 1;\n if (this.disabled) {\n return;\n }\n event.preventDefault();\n\n // Limit wheel speed to prevent zoom too fast (#21)\n if (this.wheeling) {\n return;\n }\n this.wheeling = true;\n setTimeout(function () {\n _this.wheeling = false;\n }, 50);\n if (event.deltaY) {\n delta = event.deltaY > 0 ? 1 : -1;\n } else if (event.wheelDelta) {\n delta = -event.wheelDelta / 120;\n } else if (event.detail) {\n delta = event.detail > 0 ? 1 : -1;\n }\n this.zoom(-delta * ratio, event);\n },\n cropStart: function cropStart(event) {\n var buttons = event.buttons,\n button = event.button;\n if (this.disabled\n\n // Handle mouse event and pointer event and ignore touch event\n || (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && (\n // No primary button (Usually the left button)\n isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0\n\n // Open context menu\n || event.ctrlKey)) {\n return;\n }\n var options = this.options,\n pointers = this.pointers;\n var action;\n if (event.changedTouches) {\n // Handle touch event\n forEach(event.changedTouches, function (touch) {\n pointers[touch.identifier] = getPointer(touch);\n });\n } else {\n // Handle mouse event and pointer event\n pointers[event.pointerId || 0] = getPointer(event);\n }\n if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {\n action = ACTION_ZOOM;\n } else {\n action = getData(event.target, DATA_ACTION);\n }\n if (!REGEXP_ACTIONS.test(action)) {\n return;\n }\n if (dispatchEvent(this.element, EVENT_CROP_START, {\n originalEvent: event,\n action: action\n }) === false) {\n return;\n }\n\n // This line is required for preventing page zooming in iOS browsers\n event.preventDefault();\n this.action = action;\n this.cropping = false;\n if (action === ACTION_CROP) {\n this.cropping = true;\n addClass(this.dragBox, CLASS_MODAL);\n }\n },\n cropMove: function cropMove(event) {\n var action = this.action;\n if (this.disabled || !action) {\n return;\n }\n var pointers = this.pointers;\n event.preventDefault();\n if (dispatchEvent(this.element, EVENT_CROP_MOVE, {\n originalEvent: event,\n action: action\n }) === false) {\n return;\n }\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n // The first parameter should not be undefined (#432)\n assign(pointers[touch.identifier] || {}, getPointer(touch, true));\n });\n } else {\n assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));\n }\n this.change(event);\n },\n cropEnd: function cropEnd(event) {\n if (this.disabled) {\n return;\n }\n var action = this.action,\n pointers = this.pointers;\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n delete pointers[touch.identifier];\n });\n } else {\n delete pointers[event.pointerId || 0];\n }\n if (!action) {\n return;\n }\n event.preventDefault();\n if (!Object.keys(pointers).length) {\n this.action = '';\n }\n if (this.cropping) {\n this.cropping = false;\n toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);\n }\n dispatchEvent(this.element, EVENT_CROP_END, {\n originalEvent: event,\n action: action\n });\n }\n };\n\n var change = {\n change: function change(event) {\n var options = this.options,\n canvasData = this.canvasData,\n containerData = this.containerData,\n cropBoxData = this.cropBoxData,\n pointers = this.pointers;\n var action = this.action;\n var aspectRatio = options.aspectRatio;\n var left = cropBoxData.left,\n top = cropBoxData.top,\n width = cropBoxData.width,\n height = cropBoxData.height;\n var right = left + width;\n var bottom = top + height;\n var minLeft = 0;\n var minTop = 0;\n var maxWidth = containerData.width;\n var maxHeight = containerData.height;\n var renderable = true;\n var offset;\n\n // Locking aspect ratio in \"free mode\" by holding shift key\n if (!aspectRatio && event.shiftKey) {\n aspectRatio = width && height ? width / height : 1;\n }\n if (this.limited) {\n minLeft = cropBoxData.minLeft;\n minTop = cropBoxData.minTop;\n maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);\n maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);\n }\n var pointer = pointers[Object.keys(pointers)[0]];\n var range = {\n x: pointer.endX - pointer.startX,\n y: pointer.endY - pointer.startY\n };\n var check = function check(side) {\n switch (side) {\n case ACTION_EAST:\n if (right + range.x > maxWidth) {\n range.x = maxWidth - right;\n }\n break;\n case ACTION_WEST:\n if (left + range.x < minLeft) {\n range.x = minLeft - left;\n }\n break;\n case ACTION_NORTH:\n if (top + range.y < minTop) {\n range.y = minTop - top;\n }\n break;\n case ACTION_SOUTH:\n if (bottom + range.y > maxHeight) {\n range.y = maxHeight - bottom;\n }\n break;\n }\n };\n switch (action) {\n // Move crop box\n case ACTION_ALL:\n left += range.x;\n top += range.y;\n break;\n\n // Resize crop box\n case ACTION_EAST:\n if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {\n renderable = false;\n break;\n }\n check(ACTION_EAST);\n width += range.x;\n if (width < 0) {\n action = ACTION_WEST;\n width = -width;\n left -= width;\n }\n if (aspectRatio) {\n height = width / aspectRatio;\n top += (cropBoxData.height - height) / 2;\n }\n break;\n case ACTION_NORTH:\n if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n if (height < 0) {\n action = ACTION_SOUTH;\n height = -height;\n top -= height;\n }\n if (aspectRatio) {\n width = height * aspectRatio;\n left += (cropBoxData.width - width) / 2;\n }\n break;\n case ACTION_WEST:\n if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {\n renderable = false;\n break;\n }\n check(ACTION_WEST);\n width -= range.x;\n left += range.x;\n if (width < 0) {\n action = ACTION_EAST;\n width = -width;\n left -= width;\n }\n if (aspectRatio) {\n height = width / aspectRatio;\n top += (cropBoxData.height - height) / 2;\n }\n break;\n case ACTION_SOUTH:\n if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n check(ACTION_SOUTH);\n height += range.y;\n if (height < 0) {\n action = ACTION_NORTH;\n height = -height;\n top -= height;\n }\n if (aspectRatio) {\n width = height * aspectRatio;\n left += (cropBoxData.width - width) / 2;\n }\n break;\n case ACTION_NORTH_EAST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {\n renderable = false;\n break;\n }\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n width = height * aspectRatio;\n } else {\n check(ACTION_NORTH);\n check(ACTION_EAST);\n if (range.x >= 0) {\n if (right < maxWidth) {\n width += range.x;\n } else if (range.y <= 0 && top <= minTop) {\n renderable = false;\n }\n } else {\n width += range.x;\n }\n if (range.y <= 0) {\n if (top > minTop) {\n height -= range.y;\n top += range.y;\n }\n } else {\n height -= range.y;\n top += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_SOUTH_WEST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_NORTH_WEST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_SOUTH_EAST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_NORTH_WEST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || left <= minLeft)) {\n renderable = false;\n break;\n }\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n width = height * aspectRatio;\n left += cropBoxData.width - width;\n } else {\n check(ACTION_NORTH);\n check(ACTION_WEST);\n if (range.x <= 0) {\n if (left > minLeft) {\n width -= range.x;\n left += range.x;\n } else if (range.y <= 0 && top <= minTop) {\n renderable = false;\n }\n } else {\n width -= range.x;\n left += range.x;\n }\n if (range.y <= 0) {\n if (top > minTop) {\n height -= range.y;\n top += range.y;\n }\n } else {\n height -= range.y;\n top += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_SOUTH_EAST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_NORTH_EAST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_SOUTH_WEST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_SOUTH_WEST:\n if (aspectRatio) {\n if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {\n renderable = false;\n break;\n }\n check(ACTION_WEST);\n width -= range.x;\n left += range.x;\n height = width / aspectRatio;\n } else {\n check(ACTION_SOUTH);\n check(ACTION_WEST);\n if (range.x <= 0) {\n if (left > minLeft) {\n width -= range.x;\n left += range.x;\n } else if (range.y >= 0 && bottom >= maxHeight) {\n renderable = false;\n }\n } else {\n width -= range.x;\n left += range.x;\n }\n if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_EAST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_SOUTH_EAST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_NORTH_WEST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_SOUTH_EAST:\n if (aspectRatio) {\n if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {\n renderable = false;\n break;\n }\n check(ACTION_EAST);\n width += range.x;\n height = width / aspectRatio;\n } else {\n check(ACTION_SOUTH);\n check(ACTION_EAST);\n if (range.x >= 0) {\n if (right < maxWidth) {\n width += range.x;\n } else if (range.y >= 0 && bottom >= maxHeight) {\n renderable = false;\n }\n } else {\n width += range.x;\n }\n if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_WEST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_SOUTH_WEST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_NORTH_EAST;\n height = -height;\n top -= height;\n }\n break;\n\n // Move canvas\n case ACTION_MOVE:\n this.move(range.x, range.y);\n renderable = false;\n break;\n\n // Zoom canvas\n case ACTION_ZOOM:\n this.zoom(getMaxZoomRatio(pointers), event);\n renderable = false;\n break;\n\n // Create crop box\n case ACTION_CROP:\n if (!range.x || !range.y) {\n renderable = false;\n break;\n }\n offset = getOffset(this.cropper);\n left = pointer.startX - offset.left;\n top = pointer.startY - offset.top;\n width = cropBoxData.minWidth;\n height = cropBoxData.minHeight;\n if (range.x > 0) {\n action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;\n } else if (range.x < 0) {\n left -= width;\n action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;\n }\n if (range.y < 0) {\n top -= height;\n }\n\n // Show the crop box if is hidden\n if (!this.cropped) {\n removeClass(this.cropBox, CLASS_HIDDEN);\n this.cropped = true;\n if (this.limited) {\n this.limitCropBox(true, true);\n }\n }\n break;\n }\n if (renderable) {\n cropBoxData.width = width;\n cropBoxData.height = height;\n cropBoxData.left = left;\n cropBoxData.top = top;\n this.action = action;\n this.renderCropBox();\n }\n\n // Override\n forEach(pointers, function (p) {\n p.startX = p.endX;\n p.startY = p.endY;\n });\n }\n };\n\n var methods = {\n // Show the crop box manually\n crop: function crop() {\n if (this.ready && !this.cropped && !this.disabled) {\n this.cropped = true;\n this.limitCropBox(true, true);\n if (this.options.modal) {\n addClass(this.dragBox, CLASS_MODAL);\n }\n removeClass(this.cropBox, CLASS_HIDDEN);\n this.setCropBoxData(this.initialCropBoxData);\n }\n return this;\n },\n // Reset the image and crop box to their initial states\n reset: function reset() {\n if (this.ready && !this.disabled) {\n this.imageData = assign({}, this.initialImageData);\n this.canvasData = assign({}, this.initialCanvasData);\n this.cropBoxData = assign({}, this.initialCropBoxData);\n this.renderCanvas();\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n return this;\n },\n // Clear the crop box\n clear: function clear() {\n if (this.cropped && !this.disabled) {\n assign(this.cropBoxData, {\n left: 0,\n top: 0,\n width: 0,\n height: 0\n });\n this.cropped = false;\n this.renderCropBox();\n this.limitCanvas(true, true);\n\n // Render canvas after crop box rendered\n this.renderCanvas();\n removeClass(this.dragBox, CLASS_MODAL);\n addClass(this.cropBox, CLASS_HIDDEN);\n }\n return this;\n },\n /**\n * Replace the image's src and rebuild the cropper\n * @param {string} url - The new URL.\n * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.\n * @returns {Cropper} this\n */\n replace: function replace(url) {\n var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n if (!this.disabled && url) {\n if (this.isImg) {\n this.element.src = url;\n }\n if (hasSameSize) {\n this.url = url;\n this.image.src = url;\n if (this.ready) {\n this.viewBoxImage.src = url;\n forEach(this.previews, function (element) {\n element.getElementsByTagName('img')[0].src = url;\n });\n }\n } else {\n if (this.isImg) {\n this.replaced = true;\n }\n this.options.data = null;\n this.uncreate();\n this.load(url);\n }\n }\n return this;\n },\n // Enable (unfreeze) the cropper\n enable: function enable() {\n if (this.ready && this.disabled) {\n this.disabled = false;\n removeClass(this.cropper, CLASS_DISABLED);\n }\n return this;\n },\n // Disable (freeze) the cropper\n disable: function disable() {\n if (this.ready && !this.disabled) {\n this.disabled = true;\n addClass(this.cropper, CLASS_DISABLED);\n }\n return this;\n },\n /**\n * Destroy the cropper and remove the instance from the image\n * @returns {Cropper} this\n */\n destroy: function destroy() {\n var element = this.element;\n if (!element[NAMESPACE]) {\n return this;\n }\n element[NAMESPACE] = undefined;\n if (this.isImg && this.replaced) {\n element.src = this.originalUrl;\n }\n this.uncreate();\n return this;\n },\n /**\n * Move the canvas with relative offsets\n * @param {number} offsetX - The relative offset distance on the x-axis.\n * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis.\n * @returns {Cropper} this\n */\n move: function move(offsetX) {\n var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;\n var _this$canvasData = this.canvasData,\n left = _this$canvasData.left,\n top = _this$canvasData.top;\n return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));\n },\n /**\n * Move the canvas to an absolute point\n * @param {number} x - The x-axis coordinate.\n * @param {number} [y=x] - The y-axis coordinate.\n * @returns {Cropper} this\n */\n moveTo: function moveTo(x) {\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;\n var canvasData = this.canvasData;\n var changed = false;\n x = Number(x);\n y = Number(y);\n if (this.ready && !this.disabled && this.options.movable) {\n if (isNumber(x)) {\n canvasData.left = x;\n changed = true;\n }\n if (isNumber(y)) {\n canvasData.top = y;\n changed = true;\n }\n if (changed) {\n this.renderCanvas(true);\n }\n }\n return this;\n },\n /**\n * Zoom the canvas with a relative ratio\n * @param {number} ratio - The target ratio.\n * @param {Event} _originalEvent - The original event if any.\n * @returns {Cropper} this\n */\n zoom: function zoom(ratio, _originalEvent) {\n var canvasData = this.canvasData;\n ratio = Number(ratio);\n if (ratio < 0) {\n ratio = 1 / (1 - ratio);\n } else {\n ratio = 1 + ratio;\n }\n return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);\n },\n /**\n * Zoom the canvas to an absolute ratio\n * @param {number} ratio - The target ratio.\n * @param {Object} pivot - The zoom pivot point coordinate.\n * @param {Event} _originalEvent - The original event if any.\n * @returns {Cropper} this\n */\n zoomTo: function zoomTo(ratio, pivot, _originalEvent) {\n var options = this.options,\n canvasData = this.canvasData;\n var width = canvasData.width,\n height = canvasData.height,\n naturalWidth = canvasData.naturalWidth,\n naturalHeight = canvasData.naturalHeight;\n ratio = Number(ratio);\n if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {\n var newWidth = naturalWidth * ratio;\n var newHeight = naturalHeight * ratio;\n if (dispatchEvent(this.element, EVENT_ZOOM, {\n ratio: ratio,\n oldRatio: width / naturalWidth,\n originalEvent: _originalEvent\n }) === false) {\n return this;\n }\n if (_originalEvent) {\n var pointers = this.pointers;\n var offset = getOffset(this.cropper);\n var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {\n pageX: _originalEvent.pageX,\n pageY: _originalEvent.pageY\n };\n\n // Zoom from the triggering point of the event\n canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);\n canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);\n } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {\n canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width);\n canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height);\n } else {\n // Zoom from the center of the canvas\n canvasData.left -= (newWidth - width) / 2;\n canvasData.top -= (newHeight - height) / 2;\n }\n canvasData.width = newWidth;\n canvasData.height = newHeight;\n this.renderCanvas(true);\n }\n return this;\n },\n /**\n * Rotate the canvas with a relative degree\n * @param {number} degree - The rotate degree.\n * @returns {Cropper} this\n */\n rotate: function rotate(degree) {\n return this.rotateTo((this.imageData.rotate || 0) + Number(degree));\n },\n /**\n * Rotate the canvas to an absolute degree\n * @param {number} degree - The rotate degree.\n * @returns {Cropper} this\n */\n rotateTo: function rotateTo(degree) {\n degree = Number(degree);\n if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {\n this.imageData.rotate = degree % 360;\n this.renderCanvas(true, true);\n }\n return this;\n },\n /**\n * Scale the image on the x-axis.\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @returns {Cropper} this\n */\n scaleX: function scaleX(_scaleX) {\n var scaleY = this.imageData.scaleY;\n return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1);\n },\n /**\n * Scale the image on the y-axis.\n * @param {number} scaleY - The scale ratio on the y-axis.\n * @returns {Cropper} this\n */\n scaleY: function scaleY(_scaleY) {\n var scaleX = this.imageData.scaleX;\n return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY);\n },\n /**\n * Scale the image\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.\n * @returns {Cropper} this\n */\n scale: function scale(scaleX) {\n var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;\n var imageData = this.imageData;\n var transformed = false;\n scaleX = Number(scaleX);\n scaleY = Number(scaleY);\n if (this.ready && !this.disabled && this.options.scalable) {\n if (isNumber(scaleX)) {\n imageData.scaleX = scaleX;\n transformed = true;\n }\n if (isNumber(scaleY)) {\n imageData.scaleY = scaleY;\n transformed = true;\n }\n if (transformed) {\n this.renderCanvas(true, true);\n }\n }\n return this;\n },\n /**\n * Get the cropped area position and size data (base on the original image)\n * @param {boolean} [rounded=false] - Indicate if round the data values or not.\n * @returns {Object} The result cropped data.\n */\n getData: function getData() {\n var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var options = this.options,\n imageData = this.imageData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n var data;\n if (this.ready && this.cropped) {\n data = {\n x: cropBoxData.left - canvasData.left,\n y: cropBoxData.top - canvasData.top,\n width: cropBoxData.width,\n height: cropBoxData.height\n };\n var ratio = imageData.width / imageData.naturalWidth;\n forEach(data, function (n, i) {\n data[i] = n / ratio;\n });\n if (rounded) {\n // In case rounding off leads to extra 1px in right or bottom border\n // we should round the top-left corner and the dimension (#343).\n var bottom = Math.round(data.y + data.height);\n var right = Math.round(data.x + data.width);\n data.x = Math.round(data.x);\n data.y = Math.round(data.y);\n data.width = right - data.x;\n data.height = bottom - data.y;\n }\n } else {\n data = {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n }\n if (options.rotatable) {\n data.rotate = imageData.rotate || 0;\n }\n if (options.scalable) {\n data.scaleX = imageData.scaleX || 1;\n data.scaleY = imageData.scaleY || 1;\n }\n return data;\n },\n /**\n * Set the cropped area position and size with new data\n * @param {Object} data - The new data.\n * @returns {Cropper} this\n */\n setData: function setData(data) {\n var options = this.options,\n imageData = this.imageData,\n canvasData = this.canvasData;\n var cropBoxData = {};\n if (this.ready && !this.disabled && isPlainObject(data)) {\n var transformed = false;\n if (options.rotatable) {\n if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {\n imageData.rotate = data.rotate;\n transformed = true;\n }\n }\n if (options.scalable) {\n if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) {\n imageData.scaleX = data.scaleX;\n transformed = true;\n }\n if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {\n imageData.scaleY = data.scaleY;\n transformed = true;\n }\n }\n if (transformed) {\n this.renderCanvas(true, true);\n }\n var ratio = imageData.width / imageData.naturalWidth;\n if (isNumber(data.x)) {\n cropBoxData.left = data.x * ratio + canvasData.left;\n }\n if (isNumber(data.y)) {\n cropBoxData.top = data.y * ratio + canvasData.top;\n }\n if (isNumber(data.width)) {\n cropBoxData.width = data.width * ratio;\n }\n if (isNumber(data.height)) {\n cropBoxData.height = data.height * ratio;\n }\n this.setCropBoxData(cropBoxData);\n }\n return this;\n },\n /**\n * Get the container size data.\n * @returns {Object} The result container data.\n */\n getContainerData: function getContainerData() {\n return this.ready ? assign({}, this.containerData) : {};\n },\n /**\n * Get the image position and size data.\n * @returns {Object} The result image data.\n */\n getImageData: function getImageData() {\n return this.sized ? assign({}, this.imageData) : {};\n },\n /**\n * Get the canvas position and size data.\n * @returns {Object} The result canvas data.\n */\n getCanvasData: function getCanvasData() {\n var canvasData = this.canvasData;\n var data = {};\n if (this.ready) {\n forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) {\n data[n] = canvasData[n];\n });\n }\n return data;\n },\n /**\n * Set the canvas position and size with new data.\n * @param {Object} data - The new canvas data.\n * @returns {Cropper} this\n */\n setCanvasData: function setCanvasData(data) {\n var canvasData = this.canvasData;\n var aspectRatio = canvasData.aspectRatio;\n if (this.ready && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n canvasData.left = data.left;\n }\n if (isNumber(data.top)) {\n canvasData.top = data.top;\n }\n if (isNumber(data.width)) {\n canvasData.width = data.width;\n canvasData.height = data.width / aspectRatio;\n } else if (isNumber(data.height)) {\n canvasData.height = data.height;\n canvasData.width = data.height * aspectRatio;\n }\n this.renderCanvas(true);\n }\n return this;\n },\n /**\n * Get the crop box position and size data.\n * @returns {Object} The result crop box data.\n */\n getCropBoxData: function getCropBoxData() {\n var cropBoxData = this.cropBoxData;\n var data;\n if (this.ready && this.cropped) {\n data = {\n left: cropBoxData.left,\n top: cropBoxData.top,\n width: cropBoxData.width,\n height: cropBoxData.height\n };\n }\n return data || {};\n },\n /**\n * Set the crop box position and size with new data.\n * @param {Object} data - The new crop box data.\n * @returns {Cropper} this\n */\n setCropBoxData: function setCropBoxData(data) {\n var cropBoxData = this.cropBoxData;\n var aspectRatio = this.options.aspectRatio;\n var widthChanged;\n var heightChanged;\n if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n cropBoxData.left = data.left;\n }\n if (isNumber(data.top)) {\n cropBoxData.top = data.top;\n }\n if (isNumber(data.width) && data.width !== cropBoxData.width) {\n widthChanged = true;\n cropBoxData.width = data.width;\n }\n if (isNumber(data.height) && data.height !== cropBoxData.height) {\n heightChanged = true;\n cropBoxData.height = data.height;\n }\n if (aspectRatio) {\n if (widthChanged) {\n cropBoxData.height = cropBoxData.width / aspectRatio;\n } else if (heightChanged) {\n cropBoxData.width = cropBoxData.height * aspectRatio;\n }\n }\n this.renderCropBox();\n }\n return this;\n },\n /**\n * Get a canvas drawn the cropped image.\n * @param {Object} [options={}] - The config options.\n * @returns {HTMLCanvasElement} - The result canvas.\n */\n getCroppedCanvas: function getCroppedCanvas() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n if (!this.ready || !window.HTMLCanvasElement) {\n return null;\n }\n var canvasData = this.canvasData;\n var source = getSourceCanvas(this.image, this.imageData, canvasData, options);\n\n // Returns the source canvas if it is not cropped.\n if (!this.cropped) {\n return source;\n }\n var _this$getData = this.getData(options.rounded),\n initialX = _this$getData.x,\n initialY = _this$getData.y,\n initialWidth = _this$getData.width,\n initialHeight = _this$getData.height;\n var ratio = source.width / Math.floor(canvasData.naturalWidth);\n if (ratio !== 1) {\n initialX *= ratio;\n initialY *= ratio;\n initialWidth *= ratio;\n initialHeight *= ratio;\n }\n var aspectRatio = initialWidth / initialHeight;\n var maxSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.maxWidth || Infinity,\n height: options.maxHeight || Infinity\n });\n var minSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.minWidth || 0,\n height: options.minHeight || 0\n }, 'cover');\n var _getAdjustedSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.width || (ratio !== 1 ? source.width : initialWidth),\n height: options.height || (ratio !== 1 ? source.height : initialHeight)\n }),\n width = _getAdjustedSizes.width,\n height = _getAdjustedSizes.height;\n width = Math.min(maxSizes.width, Math.max(minSizes.width, width));\n height = Math.min(maxSizes.height, Math.max(minSizes.height, height));\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n canvas.width = normalizeDecimalNumber(width);\n canvas.height = normalizeDecimalNumber(height);\n context.fillStyle = options.fillColor || 'transparent';\n context.fillRect(0, 0, width, height);\n var _options$imageSmoothi = options.imageSmoothingEnabled,\n imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,\n imageSmoothingQuality = options.imageSmoothingQuality;\n context.imageSmoothingEnabled = imageSmoothingEnabled;\n if (imageSmoothingQuality) {\n context.imageSmoothingQuality = imageSmoothingQuality;\n }\n\n // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage\n var sourceWidth = source.width;\n var sourceHeight = source.height;\n\n // Source canvas parameters\n var srcX = initialX;\n var srcY = initialY;\n var srcWidth;\n var srcHeight;\n\n // Destination canvas parameters\n var dstX;\n var dstY;\n var dstWidth;\n var dstHeight;\n if (srcX <= -initialWidth || srcX > sourceWidth) {\n srcX = 0;\n srcWidth = 0;\n dstX = 0;\n dstWidth = 0;\n } else if (srcX <= 0) {\n dstX = -srcX;\n srcX = 0;\n srcWidth = Math.min(sourceWidth, initialWidth + srcX);\n dstWidth = srcWidth;\n } else if (srcX <= sourceWidth) {\n dstX = 0;\n srcWidth = Math.min(initialWidth, sourceWidth - srcX);\n dstWidth = srcWidth;\n }\n if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) {\n srcY = 0;\n srcHeight = 0;\n dstY = 0;\n dstHeight = 0;\n } else if (srcY <= 0) {\n dstY = -srcY;\n srcY = 0;\n srcHeight = Math.min(sourceHeight, initialHeight + srcY);\n dstHeight = srcHeight;\n } else if (srcY <= sourceHeight) {\n dstY = 0;\n srcHeight = Math.min(initialHeight, sourceHeight - srcY);\n dstHeight = srcHeight;\n }\n var params = [srcX, srcY, srcWidth, srcHeight];\n\n // Avoid \"IndexSizeError\"\n if (dstWidth > 0 && dstHeight > 0) {\n var scale = width / initialWidth;\n params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);\n }\n\n // All the numerical parameters should be integer for `drawImage`\n // https://github.com/fengyuanchen/cropper/issues/476\n context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {\n return Math.floor(normalizeDecimalNumber(param));\n }))));\n return canvas;\n },\n /**\n * Change the aspect ratio of the crop box.\n * @param {number} aspectRatio - The new aspect ratio.\n * @returns {Cropper} this\n */\n setAspectRatio: function setAspectRatio(aspectRatio) {\n var options = this.options;\n if (!this.disabled && !isUndefined(aspectRatio)) {\n // 0 -> NaN\n options.aspectRatio = Math.max(0, aspectRatio) || NaN;\n if (this.ready) {\n this.initCropBox();\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n }\n return this;\n },\n /**\n * Change the drag mode.\n * @param {string} mode - The new drag mode.\n * @returns {Cropper} this\n */\n setDragMode: function setDragMode(mode) {\n var options = this.options,\n dragBox = this.dragBox,\n face = this.face;\n if (this.ready && !this.disabled) {\n var croppable = mode === DRAG_MODE_CROP;\n var movable = options.movable && mode === DRAG_MODE_MOVE;\n mode = croppable || movable ? mode : DRAG_MODE_NONE;\n options.dragMode = mode;\n setData(dragBox, DATA_ACTION, mode);\n toggleClass(dragBox, CLASS_CROP, croppable);\n toggleClass(dragBox, CLASS_MOVE, movable);\n if (!options.cropBoxMovable) {\n // Sync drag mode to crop box when it is not movable\n setData(face, DATA_ACTION, mode);\n toggleClass(face, CLASS_CROP, croppable);\n toggleClass(face, CLASS_MOVE, movable);\n }\n }\n return this;\n }\n };\n\n var AnotherCropper = WINDOW.Cropper;\n var Cropper = /*#__PURE__*/function () {\n /**\n * Create a new Cropper.\n * @param {Element} element - The target element for cropping.\n * @param {Object} [options={}] - The configuration options.\n */\n function Cropper(element) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n _classCallCheck(this, Cropper);\n if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {\n throw new Error('The first argument is required and must be an
or