Add yet-another-react-lightbox package and update .gitignore to exclude node_modules

This commit is contained in:
IGNY8 VPS (Salman)
2025-11-12 18:50:30 +00:00
parent bd2a5570a9
commit c92f4a5edd
9304 changed files with 29 additions and 2008667 deletions

View File

@@ -1,13 +0,0 @@
import { memoize } from './utils/js_utils.js'
declare global {
interface Window extends HTMLElement {
safari: any
}
}
export type Predicate = () => boolean
export const isFirefox: Predicate = memoize(() =>
/firefox/i.test(navigator.userAgent),
)
export const isSafari: Predicate = memoize(() => Boolean(window.safari))

View File

@@ -1,39 +0,0 @@
import { union, without } from './utils/js_utils.js'
type NodePredicate = (node: Node | null | undefined) => boolean
export class EnterLeaveCounter {
private entered: any[] = []
private isNodeInDocument: NodePredicate
public constructor(isNodeInDocument: NodePredicate) {
this.isNodeInDocument = isNodeInDocument
}
public enter(enteringNode: EventTarget | null): boolean {
const previousLength = this.entered.length
const isNodeEntered = (node: Node): boolean =>
this.isNodeInDocument(node) &&
(!node.contains || node.contains(enteringNode as Node))
this.entered = union(this.entered.filter(isNodeEntered), [enteringNode])
return previousLength === 0 && this.entered.length > 0
}
public leave(leavingNode: EventTarget | null): boolean {
const previousLength = this.entered.length
this.entered = without(
this.entered.filter(this.isNodeInDocument),
leavingNode,
)
return previousLength > 0 && this.entered.length === 0
}
public reset(): void {
this.entered = []
}
}

View File

@@ -1,758 +0,0 @@
import type {
Backend,
DragDropActions,
DragDropManager,
DragDropMonitor,
HandlerRegistry,
Identifier,
Unsubscribe,
XYCoord,
} from 'dnd-core'
import { EnterLeaveCounter } from './EnterLeaveCounter.js'
import {
createNativeDragSource,
matchNativeItemType,
} from './NativeDragSources/index.js'
import type { NativeDragSource } from './NativeDragSources/NativeDragSource.js'
import * as NativeTypes from './NativeTypes.js'
import {
getDragPreviewOffset,
getEventClientOffset,
getNodeClientOffset,
} from './OffsetUtils.js'
import { OptionsReader } from './OptionsReader.js'
import type { HTML5BackendContext, HTML5BackendOptions } from './types.js'
type RootNode = Node & { __isReactDndBackendSetUp: boolean | undefined }
export class HTML5BackendImpl implements Backend {
private options: OptionsReader
// React-Dnd Components
private actions: DragDropActions
private monitor: DragDropMonitor
private registry: HandlerRegistry
// Internal State
private enterLeaveCounter: EnterLeaveCounter
private sourcePreviewNodes: Map<string, Element> = new Map()
private sourcePreviewNodeOptions: Map<string, any> = new Map()
private sourceNodes: Map<string, Element> = new Map()
private sourceNodeOptions: Map<string, any> = new Map()
private dragStartSourceIds: string[] | null = null
private dropTargetIds: string[] = []
private dragEnterTargetIds: string[] = []
private currentNativeSource: NativeDragSource | null = null
private currentNativeHandle: Identifier | null = null
private currentDragSourceNode: Element | null = null
private altKeyPressed = false
private mouseMoveTimeoutTimer: number | null = null
private asyncEndDragFrameId: number | null = null
private dragOverTargetIds: string[] | null = null
private lastClientOffset: XYCoord | null = null
private hoverRafId: number | null = null
public constructor(
manager: DragDropManager,
globalContext?: HTML5BackendContext,
options?: HTML5BackendOptions,
) {
this.options = new OptionsReader(globalContext, options)
this.actions = manager.getActions()
this.monitor = manager.getMonitor()
this.registry = manager.getRegistry()
this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument)
}
/**
* Generate profiling statistics for the HTML5Backend.
*/
public profile(): Record<string, number> {
return {
sourcePreviewNodes: this.sourcePreviewNodes.size,
sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
sourceNodeOptions: this.sourceNodeOptions.size,
sourceNodes: this.sourceNodes.size,
dragStartSourceIds: this.dragStartSourceIds?.length || 0,
dropTargetIds: this.dropTargetIds.length,
dragEnterTargetIds: this.dragEnterTargetIds.length,
dragOverTargetIds: this.dragOverTargetIds?.length || 0,
}
}
// public for test
public get window(): Window | undefined {
return this.options.window
}
public get document(): Document | undefined {
return this.options.document
}
/**
* Get the root element to use for event subscriptions
*/
private get rootElement(): Node | undefined {
return this.options.rootElement as Node
}
public setup(): void {
const root = this.rootElement as RootNode | undefined
if (root === undefined) {
return
}
if (root.__isReactDndBackendSetUp) {
throw new Error('Cannot have two HTML5 backends at the same time.')
}
root.__isReactDndBackendSetUp = true
this.addEventListeners(root)
}
public teardown(): void {
const root = this.rootElement as RootNode
if (root === undefined) {
return
}
root.__isReactDndBackendSetUp = false
this.removeEventListeners(this.rootElement as Element)
this.clearCurrentDragSourceNode()
if (this.asyncEndDragFrameId) {
this.window?.cancelAnimationFrame(this.asyncEndDragFrameId)
}
}
public connectDragPreview(
sourceId: string,
node: Element,
options: any,
): Unsubscribe {
this.sourcePreviewNodeOptions.set(sourceId, options)
this.sourcePreviewNodes.set(sourceId, node)
return (): void => {
this.sourcePreviewNodes.delete(sourceId)
this.sourcePreviewNodeOptions.delete(sourceId)
}
}
public connectDragSource(
sourceId: string,
node: Element,
options: any,
): Unsubscribe {
this.sourceNodes.set(sourceId, node)
this.sourceNodeOptions.set(sourceId, options)
const handleDragStart = (e: any) => this.handleDragStart(e, sourceId)
const handleSelectStart = (e: any) => this.handleSelectStart(e)
node.setAttribute('draggable', 'true')
node.addEventListener('dragstart', handleDragStart)
node.addEventListener('selectstart', handleSelectStart)
return (): void => {
this.sourceNodes.delete(sourceId)
this.sourceNodeOptions.delete(sourceId)
node.removeEventListener('dragstart', handleDragStart)
node.removeEventListener('selectstart', handleSelectStart)
node.setAttribute('draggable', 'false')
}
}
public connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe {
const handleDragEnter = (e: DragEvent) => this.handleDragEnter(e, targetId)
const handleDragOver = (e: DragEvent) => this.handleDragOver(e, targetId)
const handleDrop = (e: DragEvent) => this.handleDrop(e, targetId)
node.addEventListener('dragenter', handleDragEnter)
node.addEventListener('dragover', handleDragOver)
node.addEventListener('drop', handleDrop)
return (): void => {
node.removeEventListener('dragenter', handleDragEnter)
node.removeEventListener('dragover', handleDragOver)
node.removeEventListener('drop', handleDrop)
}
}
private addEventListeners(target: Node) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.addEventListener) {
return
}
target.addEventListener(
'dragstart',
this.handleTopDragStart as EventListener,
)
target.addEventListener('dragstart', this.handleTopDragStartCapture, true)
target.addEventListener('dragend', this.handleTopDragEndCapture, true)
target.addEventListener(
'dragenter',
this.handleTopDragEnter as EventListener,
)
target.addEventListener(
'dragenter',
this.handleTopDragEnterCapture as EventListener,
true,
)
target.addEventListener(
'dragleave',
this.handleTopDragLeaveCapture as EventListener,
true,
)
target.addEventListener('dragover', this.handleTopDragOver as EventListener)
target.addEventListener(
'dragover',
this.handleTopDragOverCapture as EventListener,
true,
)
target.addEventListener('drop', this.handleTopDrop as EventListener)
target.addEventListener(
'drop',
this.handleTopDropCapture as EventListener,
true,
)
}
private removeEventListeners(target: Node) {
// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
if (!target.removeEventListener) {
return
}
target.removeEventListener('dragstart', this.handleTopDragStart as any)
target.removeEventListener(
'dragstart',
this.handleTopDragStartCapture,
true,
)
target.removeEventListener('dragend', this.handleTopDragEndCapture, true)
target.removeEventListener(
'dragenter',
this.handleTopDragEnter as EventListener,
)
target.removeEventListener(
'dragenter',
this.handleTopDragEnterCapture as EventListener,
true,
)
target.removeEventListener(
'dragleave',
this.handleTopDragLeaveCapture as EventListener,
true,
)
target.removeEventListener(
'dragover',
this.handleTopDragOver as EventListener,
)
target.removeEventListener(
'dragover',
this.handleTopDragOverCapture as EventListener,
true,
)
target.removeEventListener('drop', this.handleTopDrop as EventListener)
target.removeEventListener(
'drop',
this.handleTopDropCapture as EventListener,
true,
)
}
private getCurrentSourceNodeOptions() {
const sourceId = this.monitor.getSourceId() as string
const sourceNodeOptions = this.sourceNodeOptions.get(sourceId)
return {
dropEffect: this.altKeyPressed ? 'copy' : 'move',
...(sourceNodeOptions || {}),
}
}
private getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy'
}
return this.getCurrentSourceNodeOptions().dropEffect
}
private getCurrentSourcePreviewNodeOptions() {
const sourceId = this.monitor.getSourceId() as string
const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId)
return {
anchorX: 0.5,
anchorY: 0.5,
captureDraggingState: false,
...(sourcePreviewNodeOptions || {}),
}
}
private getSourceClientOffset = (sourceId: string): XYCoord | null => {
const source = this.sourceNodes.get(sourceId)
return (source && getNodeClientOffset(source as HTMLElement)) || null
}
private isDraggingNativeItem() {
const itemType = this.monitor.getItemType()
return Object.keys(NativeTypes).some(
(key: string) => (NativeTypes as any)[key] === itemType,
)
}
private beginDragNativeItem(type: string, dataTransfer?: DataTransfer) {
this.clearCurrentDragSourceNode()
this.currentNativeSource = createNativeDragSource(type, dataTransfer)
this.currentNativeHandle = this.registry.addSource(
type,
this.currentNativeSource,
)
this.actions.beginDrag([this.currentNativeHandle])
}
private endDragNativeItem = (): void => {
if (!this.isDraggingNativeItem()) {
return
}
this.actions.endDrag()
if (this.currentNativeHandle) {
this.registry.removeSource(this.currentNativeHandle)
}
this.currentNativeHandle = null
this.currentNativeSource = null
}
private isNodeInDocument = (node: Node | null | undefined): boolean => {
// Check the node either in the main document or in the current context
return Boolean(
node &&
this.document &&
this.document.body &&
this.document.body.contains(node),
)
}
private endDragIfSourceWasRemovedFromDOM = (): void => {
const node = this.currentDragSourceNode
if (node == null || this.isNodeInDocument(node)) {
return
}
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
this.actions.endDrag()
}
this.cancelHover()
}
private setCurrentDragSourceNode(node: Element | null) {
this.clearCurrentDragSourceNode()
this.currentDragSourceNode = node
// A timeout of > 0 is necessary to resolve Firefox issue referenced
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
const MOUSE_MOVE_TIMEOUT = 1000
// Receiving a mouse event in the middle of a dragging operation
// means it has ended and the drag source node disappeared from DOM,
// so the browser didn't dispatch the dragend event.
//
// We need to wait before we start listening for mousemove events.
// This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
// immediately in some browsers.
//
// See:
// * https://github.com/react-dnd/react-dnd/pull/928
// * https://github.com/react-dnd/react-dnd/issues/869
//
this.mouseMoveTimeoutTimer = setTimeout(() => {
return this.rootElement?.addEventListener(
'mousemove',
this.endDragIfSourceWasRemovedFromDOM,
true,
)
}, MOUSE_MOVE_TIMEOUT) as any as number
}
private clearCurrentDragSourceNode() {
if (this.currentDragSourceNode) {
this.currentDragSourceNode = null
if (this.rootElement) {
this.window?.clearTimeout(this.mouseMoveTimeoutTimer || undefined)
this.rootElement.removeEventListener(
'mousemove',
this.endDragIfSourceWasRemovedFromDOM,
true,
)
}
this.mouseMoveTimeoutTimer = null
return true
}
return false
}
private scheduleHover = (dragOverTargetIds: string[] | null) => {
if (
this.hoverRafId === null &&
typeof requestAnimationFrame !== 'undefined'
) {
this.hoverRafId = requestAnimationFrame(() => {
if (this.monitor.isDragging()) {
this.actions.hover(dragOverTargetIds || [], {
clientOffset: this.lastClientOffset,
})
}
this.hoverRafId = null
})
}
}
private cancelHover = () => {
if (
this.hoverRafId !== null &&
typeof cancelAnimationFrame !== 'undefined'
) {
cancelAnimationFrame(this.hoverRafId)
this.hoverRafId = null
}
}
public handleTopDragStartCapture = (): void => {
this.clearCurrentDragSourceNode()
this.dragStartSourceIds = []
}
public handleDragStart(e: DragEvent, sourceId: string): void {
if (e.defaultPrevented) {
return
}
if (!this.dragStartSourceIds) {
this.dragStartSourceIds = []
}
this.dragStartSourceIds.unshift(sourceId)
}
public handleTopDragStart = (e: DragEvent): void => {
if (e.defaultPrevented) {
return
}
const { dragStartSourceIds } = this
this.dragStartSourceIds = null
const clientOffset = getEventClientOffset(e)
// Avoid crashing if we missed a drop event or our previous drag died
if (this.monitor.isDragging()) {
this.actions.endDrag()
this.cancelHover()
}
// Don't publish the source just yet (see why below)
this.actions.beginDrag(dragStartSourceIds || [], {
publishSource: false,
getSourceClientOffset: this.getSourceClientOffset,
clientOffset,
})
const { dataTransfer } = e
const nativeType = matchNativeItemType(dataTransfer)
if (this.monitor.isDragging()) {
if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
// Use custom drag image if user specifies it.
// If child drag source refuses drag but parent agrees,
// use parent's node as drag image. Neither works in IE though.
const sourceId: string = this.monitor.getSourceId() as string
const sourceNode = this.sourceNodes.get(sourceId)
const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode
if (dragPreview) {
const { anchorX, anchorY, offsetX, offsetY } =
this.getCurrentSourcePreviewNodeOptions()
const anchorPoint = { anchorX, anchorY }
const offsetPoint = { offsetX, offsetY }
const dragPreviewOffset = getDragPreviewOffset(
sourceNode as HTMLElement,
dragPreview as HTMLElement,
clientOffset,
anchorPoint,
offsetPoint,
)
dataTransfer.setDragImage(
dragPreview,
dragPreviewOffset.x,
dragPreviewOffset.y,
)
}
}
try {
// Firefox won't drag without setting data
dataTransfer?.setData('application/json', {} as any)
} catch (err) {
// IE doesn't support MIME types in setData
}
// Store drag source node so we can check whether
// it is removed from DOM and trigger endDrag manually.
this.setCurrentDragSourceNode(e.target as Element)
// Now we are ready to publish the drag source.. or are we not?
const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions()
if (!captureDraggingState) {
// Usually we want to publish it in the next tick so that browser
// is able to screenshot the current (not yet dragging) state.
//
// It also neatly avoids a situation where render() returns null
// in the same tick for the source element, and browser freaks out.
setTimeout(() => this.actions.publishDragSource(), 0)
} else {
// In some cases the user may want to override this behavior, e.g.
// to work around IE not supporting custom drag previews.
//
// When using a custom drag layer, the only way to prevent
// the default drag preview from drawing in IE is to screenshot
// the dragging state in which the node itself has zero opacity
// and height. In this case, though, returning null from render()
// will abruptly end the dragging, which is not obvious.
//
// This is the reason such behavior is strictly opt-in.
this.actions.publishDragSource()
}
} else if (nativeType) {
// A native item (such as URL) dragged from inside the document
this.beginDragNativeItem(nativeType)
} else if (
dataTransfer &&
!dataTransfer.types &&
((e.target && !(e.target as Element).hasAttribute) ||
!(e.target as Element).hasAttribute('draggable'))
) {
// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
// Just let it drag. It's a native type (URL or text) and will be picked up in
// dragenter handler.
return
} else {
// If by this time no drag source reacted, tell browser not to drag.
e.preventDefault()
}
}
public handleTopDragEndCapture = (): void => {
if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
// Firefox can dispatch this event in an infinite loop
// if dragend handler does something like showing an alert.
// Only proceed if we have not handled it already.
this.actions.endDrag()
}
this.cancelHover()
}
public handleTopDragEnterCapture = (e: DragEvent): void => {
this.dragEnterTargetIds = []
if (this.isDraggingNativeItem()) {
this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
}
const isFirstEnter = this.enterLeaveCounter.enter(e.target)
if (!isFirstEnter || this.monitor.isDragging()) {
return
}
const { dataTransfer } = e
const nativeType = matchNativeItemType(dataTransfer)
if (nativeType) {
// A native item (such as file or URL) dragged from outside the document
this.beginDragNativeItem(nativeType, dataTransfer as DataTransfer)
}
}
public handleDragEnter(_e: DragEvent, targetId: string): void {
this.dragEnterTargetIds.unshift(targetId)
}
public handleTopDragEnter = (e: DragEvent): void => {
const { dragEnterTargetIds } = this
this.dragEnterTargetIds = []
if (!this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return
}
this.altKeyPressed = e.altKey
// If the target changes position as the result of `dragenter`, `dragover` might still
// get dispatched despite target being no longer there. The easy solution is to check
// whether there actually is a target before firing `hover`.
if (dragEnterTargetIds.length > 0) {
this.actions.hover(dragEnterTargetIds, {
clientOffset: getEventClientOffset(e),
})
}
const canDrop = dragEnterTargetIds.some((targetId) =>
this.monitor.canDropOnTarget(targetId),
)
if (canDrop) {
// IE requires this to fire dragover events
e.preventDefault()
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.getCurrentDropEffect()
}
}
}
public handleTopDragOverCapture = (e: DragEvent): void => {
this.dragOverTargetIds = []
if (this.isDraggingNativeItem()) {
this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
}
}
public handleDragOver(_e: DragEvent, targetId: string): void {
if (this.dragOverTargetIds === null) {
this.dragOverTargetIds = []
}
this.dragOverTargetIds.unshift(targetId)
}
public handleTopDragOver = (e: DragEvent): void => {
const { dragOverTargetIds } = this
this.dragOverTargetIds = []
if (!this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
// Prevent default "drop and blow away the whole document" action.
e.preventDefault()
if (e.dataTransfer) {
e.dataTransfer.dropEffect = 'none'
}
return
}
this.altKeyPressed = e.altKey
this.lastClientOffset = getEventClientOffset(e)
this.scheduleHover(dragOverTargetIds)
const canDrop = (dragOverTargetIds || []).some((targetId) =>
this.monitor.canDropOnTarget(targetId),
)
if (canDrop) {
// Show user-specified drop effect.
e.preventDefault()
if (e.dataTransfer) {
e.dataTransfer.dropEffect = this.getCurrentDropEffect()
}
} else if (this.isDraggingNativeItem()) {
// Don't show a nice cursor but still prevent default
// "drop and blow away the whole document" action.
e.preventDefault()
} else {
e.preventDefault()
if (e.dataTransfer) {
e.dataTransfer.dropEffect = 'none'
}
}
}
public handleTopDragLeaveCapture = (e: DragEvent): void => {
if (this.isDraggingNativeItem()) {
e.preventDefault()
}
const isLastLeave = this.enterLeaveCounter.leave(e.target)
if (!isLastLeave) {
return
}
if (this.isDraggingNativeItem()) {
setTimeout(() => this.endDragNativeItem(), 0)
}
this.cancelHover()
}
public handleTopDropCapture = (e: DragEvent): void => {
this.dropTargetIds = []
if (this.isDraggingNativeItem()) {
e.preventDefault()
this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
} else if (matchNativeItemType(e.dataTransfer)) {
// Dragging some elements, like <a> and <img> may still behave like a native drag event,
// even if the current drag event matches a user-defined type.
// Stop the default behavior when we're not expecting a native item to be dropped.
e.preventDefault()
}
this.enterLeaveCounter.reset()
}
public handleDrop(_e: DragEvent, targetId: string): void {
this.dropTargetIds.unshift(targetId)
}
public handleTopDrop = (e: DragEvent): void => {
const { dropTargetIds } = this
this.dropTargetIds = []
this.actions.hover(dropTargetIds, {
clientOffset: getEventClientOffset(e),
})
this.actions.drop({ dropEffect: this.getCurrentDropEffect() })
if (this.isDraggingNativeItem()) {
this.endDragNativeItem()
} else if (this.monitor.isDragging()) {
this.actions.endDrag()
}
this.cancelHover()
}
public handleSelectStart = (e: DragEvent): void => {
const target = e.target as HTMLElement & { dragDrop: () => void }
// Only IE requires us to explicitly say
// we want drag drop operation to start
if (typeof target.dragDrop !== 'function') {
return
}
// Inputs and textareas should be selectable
if (
target.tagName === 'INPUT' ||
target.tagName === 'SELECT' ||
target.tagName === 'TEXTAREA' ||
target.isContentEditable
) {
return
}
// For other targets, ask IE
// to enable drag and drop
e.preventDefault()
target.dragDrop()
}
}

View File

@@ -1,101 +0,0 @@
export class MonotonicInterpolant {
private xs: any
private ys: any
private c1s: any
private c2s: any
private c3s: any
public constructor(xs: number[], ys: number[]) {
const { length } = xs
// Rearrange xs and ys so that xs is sorted
const indexes = []
for (let i = 0; i < length; i++) {
indexes.push(i)
}
indexes.sort((a, b) => ((xs[a] as number) < (xs[b] as number) ? -1 : 1))
// Get consecutive differences and slopes
const dys = []
const dxs = []
const ms = []
let dx
let dy
for (let i = 0; i < length - 1; i++) {
dx = (xs[i + 1] as number) - (xs[i] as number)
dy = (ys[i + 1] as number) - (ys[i] as number)
dxs.push(dx)
dys.push(dy)
ms.push(dy / dx)
}
// Get degree-1 coefficients
const c1s = [ms[0]]
for (let i = 0; i < dxs.length - 1; i++) {
const m2 = ms[i] as number
const mNext = ms[i + 1] as number
if (m2 * mNext <= 0) {
c1s.push(0)
} else {
dx = dxs[i] as number
const dxNext = dxs[i + 1] as number
const common = dx + dxNext
c1s.push(
(3 * common) / ((common + dxNext) / m2 + (common + dx) / mNext),
)
}
}
c1s.push(ms[ms.length - 1])
// Get degree-2 and degree-3 coefficients
const c2s = []
const c3s = []
let m
for (let i = 0; i < c1s.length - 1; i++) {
m = ms[i] as number
const c1 = c1s[i] as number
const invDx = 1 / (dxs[i] as number)
const common = c1 + (c1s[i + 1] as number) - m - m
c2s.push((m - c1 - common) * invDx)
c3s.push(common * invDx * invDx)
}
this.xs = xs
this.ys = ys
this.c1s = c1s
this.c2s = c2s
this.c3s = c3s
}
public interpolate(x: number): number {
const { xs, ys, c1s, c2s, c3s } = this
// The rightmost point in the dataset should give an exact result
let i = xs.length - 1
if (x === xs[i]) {
return ys[i]
}
// Search for the interval x is in, returning the corresponding y if x is one of the original xs
let low = 0
let high = c3s.length - 1
let mid
while (low <= high) {
mid = Math.floor(0.5 * (low + high))
const xHere = xs[mid]
if (xHere < x) {
low = mid + 1
} else if (xHere > x) {
high = mid - 1
} else {
return ys[mid]
}
}
i = Math.max(0, high)
// Interpolate
const diff = x - xs[i]
const diffSq = diff * diff
return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq
}
}

View File

@@ -1,63 +0,0 @@
import type { DragDropMonitor } from 'dnd-core'
import type { NativeItemConfig } from './nativeTypesConfig.js'
export class NativeDragSource {
public item: any
private config: NativeItemConfig
public constructor(config: NativeItemConfig) {
this.config = config
this.item = {}
this.initializeExposedProperties()
}
private initializeExposedProperties() {
Object.keys(this.config.exposeProperties).forEach((property) => {
Object.defineProperty(this.item, property, {
configurable: true, // This is needed to allow redefining it later
enumerable: true,
get() {
// eslint-disable-next-line no-console
console.warn(
`Browser doesn't allow reading "${property}" until the drop event.`,
)
return null
},
})
})
}
public loadDataTransfer(dataTransfer: DataTransfer | null | undefined): void {
if (dataTransfer) {
const newProperties: PropertyDescriptorMap = {}
Object.keys(this.config.exposeProperties).forEach((property) => {
const propertyFn = this.config.exposeProperties[property]
if (propertyFn != null) {
newProperties[property] = {
value: propertyFn(dataTransfer, this.config.matchesTypes),
configurable: true,
enumerable: true,
}
}
})
Object.defineProperties(this.item, newProperties)
}
}
public canDrag(): boolean {
return true
}
public beginDrag(): any {
return this.item
}
public isDragging(monitor: DragDropMonitor, handle: string): boolean {
return handle === monitor.getSourceId()
}
public endDrag(): void {
// empty
}
}

View File

@@ -1,12 +0,0 @@
export function getDataFromDataTransfer(
dataTransfer: DataTransfer,
typesToTry: string[],
defaultValue: string,
): string {
const result = typesToTry.reduce(
(resultSoFar, typeToTry) => resultSoFar || dataTransfer.getData(typeToTry),
'',
)
return result != null ? result : defaultValue
}

View File

@@ -1,36 +0,0 @@
import { NativeDragSource } from './NativeDragSource.js'
import { nativeTypesConfig } from './nativeTypesConfig.js'
export function createNativeDragSource(
type: string,
dataTransfer?: DataTransfer,
): NativeDragSource {
const config = nativeTypesConfig[type]
if (!config) {
throw new Error(`native type ${type} has no configuration`)
}
const result = new NativeDragSource(config)
result.loadDataTransfer(dataTransfer)
return result
}
export function matchNativeItemType(
dataTransfer: DataTransfer | null,
): string | null {
if (!dataTransfer) {
return null
}
const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || [])
return (
Object.keys(nativeTypesConfig).filter((nativeItemType) => {
const typeConfig = nativeTypesConfig[nativeItemType]
if (!typeConfig?.matchesTypes) {
return false
}
return typeConfig.matchesTypes.some(
(t) => dataTransferTypes.indexOf(t) > -1,
)
})[0] || null
)
}

View File

@@ -1,53 +0,0 @@
import * as NativeTypes from '../NativeTypes.js'
import { getDataFromDataTransfer } from './getDataFromDataTransfer.js'
export interface NativeItemConfigExposePropreties {
[property: string]: (
dataTransfer: DataTransfer,
matchesTypes: string[],
) => any
}
export interface NativeItemConfig {
exposeProperties: NativeItemConfigExposePropreties
matchesTypes: string[]
}
export const nativeTypesConfig: {
[key: string]: NativeItemConfig
} = {
[NativeTypes.FILE]: {
exposeProperties: {
files: (dataTransfer: DataTransfer): File[] =>
Array.prototype.slice.call(dataTransfer.files),
items: (dataTransfer: DataTransfer): DataTransferItemList =>
dataTransfer.items,
dataTransfer: (dataTransfer: DataTransfer): DataTransfer => dataTransfer,
},
matchesTypes: ['Files'],
},
[NativeTypes.HTML]: {
exposeProperties: {
html: (dataTransfer: DataTransfer, matchesTypes: string[]): string =>
getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
dataTransfer: (dataTransfer: DataTransfer): DataTransfer => dataTransfer,
},
matchesTypes: ['Html', 'text/html'],
},
[NativeTypes.URL]: {
exposeProperties: {
urls: (dataTransfer: DataTransfer, matchesTypes: string[]): string[] =>
getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'),
dataTransfer: (dataTransfer: DataTransfer): DataTransfer => dataTransfer,
},
matchesTypes: ['Url', 'text/uri-list'],
},
[NativeTypes.TEXT]: {
exposeProperties: {
text: (dataTransfer: DataTransfer, matchesTypes: string[]): string =>
getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
dataTransfer: (dataTransfer: DataTransfer): DataTransfer => dataTransfer,
},
matchesTypes: ['Text', 'text/plain'],
},
}

View File

@@ -1,4 +0,0 @@
export const FILE = '__NATIVE_FILE__'
export const URL = '__NATIVE_URL__'
export const TEXT = '__NATIVE_TEXT__'
export const HTML = '__NATIVE_HTML__'

View File

@@ -1,123 +0,0 @@
import type { XYCoord } from 'dnd-core'
import { isFirefox, isSafari } from './BrowserDetector.js'
import { MonotonicInterpolant } from './MonotonicInterpolant.js'
const ELEMENT_NODE = 1
export function getNodeClientOffset(node: Node): XYCoord | null {
const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement
if (!el) {
return null
}
const { top, left } = (el as HTMLElement).getBoundingClientRect()
return { x: left, y: top }
}
export function getEventClientOffset(e: MouseEvent): XYCoord {
return {
x: e.clientX,
y: e.clientY,
}
}
function isImageNode(node: any) {
return (
node.nodeName === 'IMG' &&
(isFirefox() || !document.documentElement?.contains(node))
)
}
function getDragPreviewSize(
isImage: boolean,
dragPreview: any,
sourceWidth: number,
sourceHeight: number,
) {
let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth
let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight
// Work around @2x coordinate discrepancies in browsers
if (isSafari() && isImage) {
dragPreviewHeight /= window.devicePixelRatio
dragPreviewWidth /= window.devicePixelRatio
}
return { dragPreviewWidth, dragPreviewHeight }
}
export function getDragPreviewOffset(
sourceNode: HTMLElement,
dragPreview: HTMLElement,
clientOffset: XYCoord,
anchorPoint: { anchorX: number; anchorY: number },
offsetPoint: { offsetX: number; offsetY: number },
): XYCoord {
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
const isImage = isImageNode(dragPreview)
const dragPreviewNode = isImage ? sourceNode : dragPreview
const dragPreviewNodeOffsetFromClient = getNodeClientOffset(
dragPreviewNode,
) as XYCoord
const offsetFromDragPreview = {
x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
y: clientOffset.y - dragPreviewNodeOffsetFromClient.y,
}
const { offsetWidth: sourceWidth, offsetHeight: sourceHeight } = sourceNode
const { anchorX, anchorY } = anchorPoint
const { dragPreviewWidth, dragPreviewHeight } = getDragPreviewSize(
isImage,
dragPreview,
sourceWidth,
sourceHeight,
)
const calculateYOffset = () => {
const interpolantY = new MonotonicInterpolant(
[0, 0.5, 1],
[
// Dock to the top
offsetFromDragPreview.y,
// Align at the center
(offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
// Dock to the bottom
offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
],
)
let y = interpolantY.interpolate(anchorY)
// Work around Safari 8 positioning bug
if (isSafari() && isImage) {
// We'll have to wait for @3x to see if this is entirely correct
y += (window.devicePixelRatio - 1) * dragPreviewHeight
}
return y
}
const calculateXOffset = () => {
// Interpolate coordinates depending on anchor point
// If you know a simpler way to do this, let me know
const interpolantX = new MonotonicInterpolant(
[0, 0.5, 1],
[
// Dock to the left
offsetFromDragPreview.x,
// Align at the center
(offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
// Dock to the right
offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
],
)
return interpolantX.interpolate(anchorX)
}
// Force offsets if specified in the options.
const { offsetX, offsetY } = offsetPoint
const isManualOffsetX = offsetX === 0 || offsetX
const isManualOffsetY = offsetY === 0 || offsetY
return {
x: isManualOffsetX ? offsetX : calculateXOffset(),
y: isManualOffsetY ? offsetY : calculateYOffset(),
}
}

View File

@@ -1,38 +0,0 @@
import type { HTML5BackendContext, HTML5BackendOptions } from './types.js'
export class OptionsReader {
public ownerDocument: Document | null = null
private globalContext: HTML5BackendContext
private optionsArgs: HTML5BackendOptions | undefined
public constructor(
globalContext: HTML5BackendContext,
options?: HTML5BackendOptions,
) {
this.globalContext = globalContext
this.optionsArgs = options
}
public get window(): Window | undefined {
if (this.globalContext) {
return this.globalContext
} else if (typeof window !== 'undefined') {
return window
}
return undefined
}
public get document(): Document | undefined {
if (this.globalContext?.document) {
return this.globalContext.document
} else if (this.window) {
return this.window.document
} else {
return undefined
}
}
public get rootElement(): Node | undefined {
return this.optionsArgs?.rootElement || this.window
}
}

View File

@@ -1,11 +0,0 @@
let emptyImage: HTMLImageElement | undefined
export function getEmptyImage(): HTMLImageElement {
if (!emptyImage) {
emptyImage = new Image()
emptyImage.src =
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
}
return emptyImage
}

View File

@@ -1,15 +0,0 @@
import type { BackendFactory, DragDropManager } from 'dnd-core'
import { HTML5BackendImpl } from './HTML5BackendImpl.js'
import type { HTML5BackendContext, HTML5BackendOptions } from './types.js'
export { getEmptyImage } from './getEmptyImage.js'
export * as NativeTypes from './NativeTypes.js'
export type { HTML5BackendContext, HTML5BackendOptions } from './types.js'
export const HTML5Backend: BackendFactory = function createBackend(
manager: DragDropManager,
context?: HTML5BackendContext,
options?: HTML5BackendOptions,
): HTML5BackendImpl {
return new HTML5BackendImpl(manager, context, options)
}

View File

@@ -1,16 +0,0 @@
//
// HACK: copied from dnd-core. duplicating here to fix a CI issue
//
import type { Identifier, SourceType, TargetType } from 'dnd-core'
export function matchesType(
targetType: TargetType | null,
draggedItemType: SourceType | null,
): boolean {
if (draggedItemType === null) {
return targetType === null
}
return Array.isArray(targetType)
? (targetType as Identifier[]).some((t) => t === draggedItemType)
: targetType === draggedItemType
}

View File

@@ -1,11 +0,0 @@
export type HTML5BackendContext = Window | undefined
/**
* Configuration options for the HTML5Backend
*/
export interface HTML5BackendOptions {
/**
* The root DOM node to use for subscribing to events. Default=Window
*/
rootElement: Node
}

View File

@@ -1,30 +0,0 @@
// cheap lodash replacements
export function memoize<T>(fn: () => T): () => T {
let result: T | null = null
const memoized = () => {
if (result == null) {
result = fn()
}
return result
}
return memoized
}
/**
* drop-in replacement for _.without
*/
export function without<T>(items: T[], item: T) {
return items.filter((i) => i !== item)
}
export function union<T extends string | number>(itemsA: T[], itemsB: T[]) {
const set = new Set<T>()
const insertItem = (item: T) => set.add(item)
itemsA.forEach(insertItem)
itemsB.forEach(insertItem)
const result: T[] = []
set.forEach((key) => result.push(key))
return result
}