phosphor-domutil - npm Package Compare versions

Comparing version 1.1.0-alpha.0 to 1.1.0-alpha.1

448

lib/index.d.ts

		@@ -10,3 +10,3 @@ import { IDisposable } from 'phosphor-disposable';
		* #### Notes
		* The most recent call to `overrideCursor` takes precendence. Disposing
		* The most recent call to `overrideCursor` takes precedence. Disposing
		* an old override is a no-op and will not effect the current override.
		@@ -53,3 +53,3 @@ *
		*/
		export declare function hitTest(node: HTMLElement, clientX: number, clientY: number): boolean;
		export declare function hitTest(node: Element, clientX: number, clientY: number): boolean;
		/**
		@@ -166,293 +166,389 @@ * The box sizing (border and padding) for a a DOM node.
		/**
		* The data object for a single drag and drop life cycle.
		* The data object for a drag and drop operation.
		*
		* Instances of this class are created automatically as needed.
		*/
		export interface IDragDropData {
		export declare class DragData {
		/**
		* A reference to the HTML element that follows the cursor.
		* Construct a new drag data object.
		*
		* @param ghost - The HTML element which follows the cursor.
		*/
		constructor(ghost: HTMLElement);
		/**
		* The HTML element which follows the cursor.
		*
		* #### Notes
		* This is a read-only property.
		*/
		ghost: HTMLElement;
		/**
		* A disposable invoked on drag end.
		* Get the current drop action.
		*
		* This can be useful in conjunction with [[overrideCursor]].
		* #### Notes
		* This will be one of `'copy'`, `'link'`, `'move'`, or `'none'`.
		*/
		override: IDisposable;
		/**
		* A key/value map of MIMEs/payloads for different drop targets.
		* Set the current drop action.
		*
		* #### Notes
		* This must be one of `'copy'`, `'link'`, `'move'`, or `'none'`.
		*
		* The current cursor style will be updated to reflect the action.
		*/
		payload: {
		[mime: string]: any;
		};
		dropAction: string;
		/**
		* The starting X coordinate of a drag operation.
		* List the mime types added to the drag data.
		*
		* @returns A new array of the mime types added to the drag data.
		*/
		startX: number;
		types(): string[];
		/**
		* The starting Y coordinate of a drag operation.
		* Get the data for a particular mime type.
		*
		* @param mime - The mime type for the data.
		*
		* @returns The data for the mime type, or `undefined`.
		*/
		startY: number;
		getData(mime: string): any;
		/**
		* Set the data for a particular mime type.
		*
		* @param mime - The mime type for the data.
		*
		* @param data - The data for the mime type.
		*/
		setData(mime: string, data: any): void;
		/**
		* Remove the data for a particular mime type.
		*
		* @param mime - The mime type for the data.
		*/
		clearData(mime: string): void;
		private _action;
		private _ghost;
		private _override;
		private _data;
		}
		/**
		* A handler that provides a simple interface to make a node a drop target.
		* A class for implementing drag targets.
		*
		* #### Example
		* ```typescript
		* import { DropHandler, IDragDropData } from 'phosphor-domutil';
		* import { Widget } from 'phosphor-widget';
		* import {
		* DragData, DragHandler
		* } from 'phosphor-domutil';
		*
		* class DroppableWidget extends Widget {
		* class DragTarget {
		*
		* constructor() {
		* super();
		* this._dropHandler = new DropHandler(this.node, this);
		* this._dropHandler.onDragEnter = this._onDragEnter;
		* this._dropHandler.onDragLeave = this._onDragLeave;
		* this._dropHandler.onDrag = this._onDrag;
		* this._dropHandler.onDrop = this._onDrop;
		* this._node = someNodeFactory();
		* this._dragHandler = new DragHandler(this._node, this);
		* this._dragHandler.onDragStart = this._onDragStart;
		* this._dragHandler.onDragEnd = this._onDragEnd;
		* }
		*
		* dispose(): void {
		* this._dropHandler.dispose();
		* super.dispose();
		* this._dragHandler.dispose();
		* }
		* private _onDragEnter(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag enter', dragData);
		*
		* private _onDragStart(event: MouseEvent, data: DragData): void {
		* data.setData('text/plain', 'hello');
		* data.setData('application/x-my-custom-type', { foo: 42 });
		* console.log('drag start', data);
		* }
		* private _onDragLeave(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag leave', dragData);
		*
		* private _onDrag(event: MouseEvent, data: DragData): void {
		* console.log('drag', data);
		* }
		* private _onDrag(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag', dragData);
		*
		* private _onDragEnd(event: MouseEvent, data: DragData): void {
		* console.log('drag end', data);
		* }
		* private _onDrop(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drop', dragData);
		* }
		* private _dropHandler: DropHandler;
		*
		* private _node: HTMLElement;
		* private _dragHandler: DragHandler;
		* }
		* ```
		*/
		export declare class DropHandler implements IDisposable {
		export declare class DragHandler implements IDisposable {
		/**
		* Add a drop handler instance to the registry.
		* Construct a new drag handler.
		*
		* @param handler - The drop handler being registered.
		* @param node - The node which acts as the drag target.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* @param context - The `this` context for the drag handlers.
		*/
		static register(handler: DropHandler): void;
		constructor(node: HTMLElement, context?: any);
		/**
		* Remove a drop handler instance from the registry.
		* Dispose of the drag handler and remove its event listeners.
		*/
		dispose(): void;
		/**
		* Test if the drag handler is disposed.
		*/
		isDisposed: boolean;
		/**
		* Get the DOM node for the drag handler.
		*
		* @param handler - The drop handler being deregistered.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* This is a read-only property.
		*/
		static deregister(handler: DropHandler): void;
		node: HTMLElement;
		/**
		* Expire the cached values tied to a specific drag/drop lifecycle.
		* Get the `this` context for the drag handlers.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* This is a read-only property.
		*/
		static invalidateCache(): void;
		context: any;
		/**
		* Deploy a drag event to the relevant drop handlers.
		* The drag distance threshold for the drag handler.
		*
		* @param action - The event type being deployed (either `'drag'` or
		* `'drop'`).
		* This is distance the mouse must move before the drag operation
		* starts. The default value is `5`.
		*/
		threshold: number;
		/**
		* A function called when the drag operation starts.
		*
		* @param event - The native mouse event that underlies the operation.
		* @param event - The underlying native mouse event.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* The creator of the drag handler should assign a function to this
		* property to handle the drag start event.
		*
		* The handler should populate the data with the relevant mime data.
		*/
		static deploy(action: string, event: MouseEvent, dragData: IDragDropData): void;
		onDragStart: (event: MouseEvent, data: DragData) => void;
		/**
		* Construct a new drop handler.
		* A function called when the mouse cursor moves during the drag.
		*
		* @param node - The node that event listeners are attached to.
		* @param event - The underlying native mouse event.
		*
		* @param context - The context within which to fire event handlers.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drag handler should assign a function to this
		* property to handle the drag event.
		*
		* This handler will not typically be provided. It is only useful in
		* special cases where the drag source wants to take action during
		* drag move events.
		*/
		constructor(node: Node, context: any);
		onDrag: (event: MouseEvent, data: DragData) => void;
		/**
		* Dispose of the reference to a drop handler in the registry.
		* A function called when the drag operation ends.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drag handler should assign a function to this
		* property to handle the drag end event.
		*
		* The handler should read the `dropAction` property to determine
		* whether and how the drop target handled the drop action. If the
		* value is `'none'`, it indicates that the drop was not handled.
		*/
		dispose(): void;
		onDragEnd: (event: MouseEvent, data: DragData) => void;
		/**
		* Check if a drop handler is disposed.
		* Create the HTML element that will follow the cursor.
		*
		* #### Notes
		* This can be reimplemented by a subclass to create a custom ghost
		* node. The default implementation clones the handler's `node`.
		*/
		isDisposed: boolean;
		createGhost(): HTMLElement;
		/**
		* Handle the drag enter event.
		* Synthetically start the drag operation.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param clientX - The current client X position of the mouse.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param clientY - The current client Y position of the mouse.
		*
		* #### Notes
		* This acts as a synthetic mouse press for the cases where a drag
		* operation needs to be started from other mouse handling code.
		*/
		onDragEnter: (event: MouseEvent, dragData: IDragDropData) => void;
		start(clientX: number, clientY: number): void;
		/**
		* Handle the drag event.
		* Handle the DOM events for the drag handler.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The DOM event sent to the drag handler.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* #### Notes
		* This method implements the DOM `EventListener` interface and is
		* called in response to events on the drag handler's DOM node. It
		* should not be called directly by user code.
		*/
		onDrag: (event: MouseEvent, dragData: IDragDropData) => void;
		handleEvent(event: Event): void;
		/**
		* Handle the drag leave event.
		*
		* @param event - The native mouse event that underlies the drag operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* Handle the `'mousedown'` event for the drag handler.
		*/
		onDragLeave: (event: MouseEvent, dragData: IDragDropData) => void;
		private _evtMouseDown(event);
		/**
		* Handle the drop event.
		*
		* @param event - The native mouse event that underlies the drop operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* Handle the `'mousemove'` event for the drag handler.
		*/
		onDrop: (event: MouseEvent, dragData: IDragDropData) => void;
		private _id;
		private _evtMouseMove(event);
		/**
		* Handle the `'mouseup'` event for the drag handler.
		*/
		private _evtMouseUp(event);
		/**
		* Dispose of the resources held by the drag data.
		*/
		private _disposeDragData();
		private _pressX;
		private _pressY;
		private _context;
		private _node;
		private _context;
		private _dragData;
		}
		/**
		* A handler that provides a simple interface to make a node draggable.
		* A class for implementing drop targets.
		*
		* #### Example
		* ```typescript
		* import { DragHandler, IDragDropData } from 'phosphor-domutil';
		* import { Widget } from 'phosphor-widget';
		* import {
		* DragData, DropHandler
		* } from 'phosphor-domutil';
		*
		* class DraggableWidget extends Widget {
		* class DropTarget {
		*
		* constructor() {
		* super();
		* this._payload = () => { return new Widget(); };
		* this._dragHandler = new DragHandler(this.node, this);
		* this._dragHandler.onDragStart = this._onDragStart;
		* this._dragHandler.onDragEnd = this._onDragEnd;
		* this._node = someNodeFactory();
		* this._dropHandler = new DropHandler(this._node, this);
		* this._dropHandler.onDragEnter = this._onDragEnter;
		* this._dropHandler.onDragLeave = this._onDragLeave;
		* this._dropHandler.onDragOver = this._onDragOver;
		* this._dropHandler.onDrop = this._onDrop;
		* }
		*
		* dispose(): void {
		* this._dragHandler.dispose();
		* super.dispose();
		* this._dropHandler.dispose();
		* }
		* private _onDragStart(event: MouseEvent, dragData: IDragDropData): void {
		* dragData.payload['application/x-phosphor-example'] = this._payload;
		* console.log('drag start', dragData);
		*
		* private _onDragEnter(event: MouseEvent, data: DragData): void {
		* console.log('drag enter', data);
		* }
		* private _onDragEnd(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag end', dragData);
		*
		* private _onDragLeave(event: MouseEvent, data: DragData): void {
		* console.log('drag leave', data);
		* }
		* private _dragHandler: DragHandler = null;
		* private _payload: () => Widget = null;
		*
		* private _onDragOver(event: MouseEvent, data: DragData): void {
		* console.log('drag', data);
		* }
		*
		* private _onDrop(event: MouseEvent, data: DragData): void {
		* console.log(data.getData('text/plain'));
		* console.log(data.getData('application/x-my-custom-type'));
		* console.log('drop', data);
		* }
		*
		* private _node: HTMLElement;
		* private _dropHandler: DropHandler;
		* }
		* ```
		*/
		export declare class DragHandler implements IDisposable {
		export declare class DropHandler implements IDisposable {
		/**
		* Flag to determine if a drag handler will automatically catch drag events.
		* Construct a new drop handler.
		*
		* #### Notes
		* If set to `false`, dragging will not automatically begin once the
		* `threshold` has been crossed. The `startDrag` method will need to be
		* invoked in order to inform the drag handler that a drag operation has
		* started.
		* @param node - The node which acts as the drop target.
		*
		* See also: [[startDrag]]
		* @param context - The `this` context for the drop handlers.
		*/
		autostart: boolean;
		constructor(node: HTMLElement, context?: any);
		/**
		* The default dragging threshold in pixels.
		* Dispose of the resources held by the drop handler.
		*/
		dragThreshold: number;
		/**
		* Construct a new drag handler.
		*
		* @param node - The node that is being dragged.
		*
		* @param context - The context within which to fire event handlers.
		*/
		constructor(node: Node, context: any);
		/**
		* Dispose of the resources the drag handler created.
		*/
		dispose(): void;
		/**
		* Check if a drag handler is disposed.
		* Test if the drop handler is disposed.
		*/
		isDisposed: boolean;
		/**
		* Create an HTML element that will follow the cursor in drag/drop operations.
		* Get the DOM node for the drop handler.
		*
		* #### Notes
		* This is a read-only property.
		*/
		ghost(): HTMLElement;
		node: HTMLElement;
		/**
		* Handle the DOM events for the drag handler.
		* Get the `this` context for the drop handlers.
		*
		* @param event - The DOM event sent to the drag handler.
		*
		* #### Notes
		* This method implements the DOM `EventListener` interface and is
		* called in response to events on the drag handler's parent DOM node. It
		* should not be called directly by user code.
		* This is a read-only property.
		*/
		handleEvent(event: Event): void;
		context: any;
		/**
		* Handle the drag start event.
		* A function called when the drag enters the DOM node.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The underlying native mouse event.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drag enter event.
		*
		* The handler should update the `dropAction` of the data to reflect
		* whether or not it can accept drops from the given drag data.
		*/
		onDragStart: (event: MouseEvent, dragData: IDragDropData) => void;
		onDragEnter: (event: MouseEvent, data: DragData) => void;
		/**
		* Handle the drag end event.
		* A function called when the drag moves over the DOM node.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The underlying native mouse event.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drag over event.
		*
		* The handler should update the `dropAction` of the data if the
		* result is different than the action set by the enter handler.
		*/
		onDragEnd: (event: MouseEvent, dragData: IDragDropData) => void;
		onDragOver: (event: MouseEvent, data: DragData) => void;
		/**
		* Start a drag operation manually.
		* A function called when the drag leaves the DOM node.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* This method only needs to be used if the `autostart` flag for a drag
		* handler has been set to `false`.
		* The creator of the drop handler should assign a function to this
		* property to handle the drag leave event.
		*
		* See also: [[autostart]]
		* The `dropAction` is set to `'none'` after this handler returns.
		*/
		startDrag(event: MouseEvent): void;
		onDragLeave: (event: MouseEvent, data: DragData) => void;
		/**
		* Create drag data for a drag and drop lifecycle.
		* A function called when a drop occurs on the DOM node.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drop event.
		*
		* The handler should update the `dropAction` of the data if the
		* result is different than the action which was previously set.
		*
		* The `dropAction` will be set to `'none'` if the handler is `null`.
		*/
		private _createDragData(event);
		/**
		* Handle the `'mousedown'` event for the drag handler.
		*/
		private _evtMouseDown(event);
		/**
		* Handle the `'mousemove'` event for the drag handler.
		*/
		private _evtMouseMove(event);
		/**
		* Handle the `'mouseup'` event for the drag handler.
		*/
		private _evtMouseUp(event);
		private _dragData;
		onDrop: (event: MouseEvent, data: DragData) => void;
		private _context;
		private _node;
		private _context;
		private _id;
		private _mouseover;
		}

886

lib/index.js

		@@ -16,10 +16,6 @@ /*-----------------------------------------------------------------------------
		/**
		* The class name added to the ghost node that follows the cursor during drags.
		* The class name added to a drag ghost node.
		*/
		var DRAG_GHOST_CLASS = 'p-mod-ghost';
		var GHOST_CLASS = 'p-mod-ghost';
		/**
		* The id for the active cursor override.
		*/
		var overrideID = 0;
		/**
		* Override the cursor for the entire document.
		@@ -32,3 +28,3 @@ *
		* #### Notes
		* The most recent call to `overrideCursor` takes precendence. Disposing
		* The most recent call to `overrideCursor` takes precedence. Disposing
		* an old override is a no-op and will not effect the current override.
		@@ -61,2 +57,6 @@ *
		/**
		* The internal id for the active cursor override.
		*/
		var overrideID = 0;
		/**
		* Test whether a client position lies within a node.
		@@ -89,10 +89,12 @@ *
		function hitTest(node, clientX, clientY) {
		var rect = node.getBoundingClientRect();
		return (clientX >= rect.left &&
		clientX < rect.right &&
		clientY >= rect.top &&
		clientY < rect.bottom);
		return hitTestRect(node.getBoundingClientRect(), clientX, clientY);
		}
		exports.hitTest = hitTest;
		/**
		* Test whether a client position lies within a client rect.
		*/
		function hitTestRect(r, x, y) {
		return x >= r.left && x < r.right && y >= r.top && y < r.bottom;
		}
		/**
		* Compute the box sizing for a DOM node.
		@@ -176,248 +178,152 @@ *
		/**
		* The id for drop handle instances.
		*/
		var dropHandlerID = 0;
		/**
		* The registry of drop records.
		*/
		var dropHandlerRegistry = Object.create(null);
		/**
		* A handler that provides a simple interface to make a node a drop target.
		* The data object for a drag and drop operation.
		*
		* #### Example
		* ```typescript
		* import { DropHandler, IDragDropData } from 'phosphor-domutil';
		* import { Widget } from 'phosphor-widget';
		*
		* class DroppableWidget extends Widget {
		* constructor() {
		* super();
		* this._dropHandler = new DropHandler(this.node, this);
		* this._dropHandler.onDragEnter = this._onDragEnter;
		* this._dropHandler.onDragLeave = this._onDragLeave;
		* this._dropHandler.onDrag = this._onDrag;
		* this._dropHandler.onDrop = this._onDrop;
		* }
		* dispose(): void {
		* this._dropHandler.dispose();
		* super.dispose();
		* }
		* private _onDragEnter(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag enter', dragData);
		* }
		* private _onDragLeave(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag leave', dragData);
		* }
		* private _onDrag(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag', dragData);
		* }
		* private _onDrop(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drop', dragData);
		* }
		* private _dropHandler: DropHandler;
		* }
		* ```
		* Instances of this class are created automatically as needed.
		*/
		var DropHandler = (function () {
		var DragData = (function () {
		/**
		* Construct a new drop handler.
		* Construct a new drag data object.
		*
		* @param node - The node that event listeners are attached to.
		*
		* @param context - The context within which to fire event handlers.
		* @param ghost - The HTML element which follows the cursor.
		*/
		function DropHandler(node, context) {
		function DragData(ghost) {
		this._data = Object.create(null);
		this._ghost = ghost;
		this._action = 'none';
		this._override = overrideCursor('no-drop');
		}
		Object.defineProperty(DragData.prototype, "ghost", {
		/**
		* Handle the drag enter event.
		* The HTML element which follows the cursor.
		*
		* @param event - The native mouse event that underlies the drag operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* #### Notes
		* This is a read-only property.
		*/
		this.onDragEnter = null;
		get: function () {
		return this._ghost;
		},
		enumerable: true,
		configurable: true
		});
		Object.defineProperty(DragData.prototype, "dropAction", {
		/**
		* Handle the drag event.
		* Get the current drop action.
		*
		* @param event - The native mouse event that underlies the drag operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* #### Notes
		* This will be one of `'copy'`, `'link'`, `'move'`, or `'none'`.
		*/
		this.onDrag = null;
		get: function () {
		return this._action;
		},
		/**
		* Handle the drag leave event.
		* Set the current drop action.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* #### Notes
		* This must be one of `'copy'`, `'link'`, `'move'`, or `'none'`.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* The current cursor style will be updated to reflect the action.
		*/
		this.onDragLeave = null;
		/**
		* Handle the drop event.
		*
		* @param event - The native mouse event that underlies the drop operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		*/
		this.onDrop = null;
		this._id = null;
		this._node = null;
		this._context = null;
		this._node = node;
		this._context = context;
		DropHandler.register(this);
		}
		set: function (value) {
		if (value === this._action) {
		return;
		}
		switch (value) {
		case 'copy':
		this._action = value;
		this._override = overrideCursor('copy');
		break;
		case 'link':
		this._action = value;
		this._override = overrideCursor('alias');
		break;
		case 'move':
		this._action = value;
		this._override = overrideCursor('move');
		break;
		case 'none':
		this._action = value;
		this._override = overrideCursor('no-drop');
		break;
		}
		},
		enumerable: true,
		configurable: true
		});
		/**
		* Add a drop handler instance to the registry.
		* List the mime types added to the drag data.
		*
		* @param handler - The drop handler being registered.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* @returns A new array of the mime types added to the drag data.
		*/
		DropHandler.register = function (handler) {
		var id = ++dropHandlerID;
		handler._id = id;
		dropHandlerRegistry[id] = {
		entered: false,
		handler: handler,
		rect: null
		};
		DragData.prototype.types = function () {
		return Object.keys(this._data);
		};
		/**
		* Remove a drop handler instance from the registry.
		* Get the data for a particular mime type.
		*
		* @param handler - The drop handler being deregistered.
		* @param mime - The mime type for the data.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* @returns The data for the mime type, or `undefined`.
		*/
		DropHandler.deregister = function (handler) {
		if (handler._id && dropHandlerRegistry[handler._id]) {
		delete dropHandlerRegistry[handler._id];
		}
		DragData.prototype.getData = function (mime) {
		return this._data[mime];
		};
		/**
		* Expire the cached values tied to a specific drag/drop lifecycle.
		* Set the data for a particular mime type.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* @param mime - The mime type for the data.
		*
		* @param data - The data for the mime type.
		*/
		DropHandler.invalidateCache = function () {
		Object.keys(dropHandlerRegistry).forEach(function (key) {
		dropHandlerRegistry[key].rect = null;
		});
		DragData.prototype.setData = function (mime, data) {
		this._data[mime] = data;
		};
		/**
		* Deploy a drag event to the relevant drop handlers.
		* Remove the data for a particular mime type.
		*
		* @param action - The event type being deployed (either `'drag'` or
		* `'drop'`).
		*
		* @param event - The native mouse event that underlies the operation.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		*
		* #### Notes
		* This method should not need to be used by any clients of this library.
		* @param mime - The mime type for the data.
		*/
		DropHandler.deploy = function (action, event, dragData) {
		var x = event.clientX;
		var y = event.clientY;
		var keys = Object.keys(dropHandlerRegistry);
		for (var _i = 0; _i < keys.length; _i++) {
		var key = keys[_i];
		// Multiple drop targets might match. For now, all of them will be fired,
		// but in the future, this behavior might change.
		var droppable = dropHandlerRegistry[key];
		var context = droppable.handler._context;
		var node = droppable.handler._node;
		// At the beginning of a drag, cache the bounding rectangle.
		if (!droppable.rect) {
		droppable.rect = node.getBoundingClientRect();
		}
		var _a = droppable.rect, left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
		if (x >= left && y >= top_1 && x < right && y < bottom) {
		if (!droppable.entered) {
		droppable.entered = true;
		if (droppable.handler.onDragEnter) {
		droppable.handler.onDragEnter.call(context, event, dragData);
		}
		}
		switch (action) {
		case 'drag':
		if (droppable.handler.onDrag) {
		droppable.handler.onDrag.call(context, event, dragData);
		}
		break;
		case 'drop':
		if (droppable.handler.onDrop) {
		droppable.handler.onDrop.call(context, event, dragData);
		}
		break;
		}
		}
		else if (droppable.entered) {
		droppable.entered = false;
		if (droppable.handler.onDragLeave) {
		droppable.handler.onDragLeave.call(context, event, dragData);
		}
		}
		}
		;
		DragData.prototype.clearData = function (mime) {
		delete this._data[mime];
		};
		/**
		* Dispose of the reference to a drop handler in the registry.
		*/
		DropHandler.prototype.dispose = function () {
		DropHandler.deregister(this);
		this._context = null;
		this._node = null;
		};
		Object.defineProperty(DropHandler.prototype, "isDisposed", {
		/**
		* Check if a drop handler is disposed.
		*/
		get: function () {
		return this._node === null;
		},
		enumerable: true,
		configurable: true
		});
		return DropHandler;
		return DragData;
		})();
		exports.DropHandler = DropHandler;
		exports.DragData = DragData;
		/**
		* A handler that provides a simple interface to make a node draggable.
		* A class for implementing drag targets.
		*
		* #### Example
		* ```typescript
		* import { DragHandler, IDragDropData } from 'phosphor-domutil';
		* import { Widget } from 'phosphor-widget';
		* import {
		* DragData, DragHandler
		* } from 'phosphor-domutil';
		*
		* class DraggableWidget extends Widget {
		* class DragTarget {
		*
		* constructor() {
		* super();
		* this._payload = () => { return new Widget(); };
		* this._dragHandler = new DragHandler(this.node, this);
		* this._node = someNodeFactory();
		* this._dragHandler = new DragHandler(this._node, this);
		* this._dragHandler.onDragStart = this._onDragStart;
		* this._dragHandler.onDragEnd = this._onDragEnd;
		* }
		*
		* dispose(): void {
		* this._dragHandler.dispose();
		* super.dispose();
		* }
		* private _onDragStart(event: MouseEvent, dragData: IDragDropData): void {
		* dragData.payload['application/x-phosphor-example'] = this._payload;
		* console.log('drag start', dragData);
		*
		* private _onDragStart(event: MouseEvent, data: DragData): void {
		* data.setData('text/plain', 'hello');
		* data.setData('application/x-my-custom-type', { foo: 42 });
		* console.log('drag start', data);
		* }
		* private _onDragEnd(event: MouseEvent, dragData: IDragDropData): void {
		* console.log('drag end', dragData);
		*
		* private _onDrag(event: MouseEvent, data: DragData): void {
		* console.log('drag', data);
		* }
		* private _dragHandler: DragHandler = null;
		* private _payload: () => Widget = null;
		*
		* private _onDragEnd(event: MouseEvent, data: DragData): void {
		* console.log('drag end', data);
		* }
		*
		* private _node: HTMLElement;
		* private _dragHandler: DragHandler;
		* }
		@@ -430,44 +336,63 @@ * ```
		*
		* @param node - The node that is being dragged.
		* @param node - The node which acts as the drag target.
		*
		* @param context - The context within which to fire event handlers.
		* @param context - The `this` context for the drag handlers.
		*/
		function DragHandler(node, context) {
		/**
		* Flag to determine if a drag handler will automatically catch drag events.
		* The drag distance threshold for the drag handler.
		*
		* This is distance the mouse must move before the drag operation
		* starts. The default value is `5`.
		*/
		this.threshold = 5;
		/**
		* A function called when the drag operation starts.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* If set to `false`, dragging will not automatically begin once the
		* `threshold` has been crossed. The `startDrag` method will need to be
		* invoked in order to inform the drag handler that a drag operation has
		* started.
		* The creator of the drag handler should assign a function to this
		* property to handle the drag start event.
		*
		* See also: [[startDrag]]
		* The handler should populate the data with the relevant mime data.
		*/
		this.autostart = true;
		this.onDragStart = null;
		/**
		* The default dragging threshold in pixels.
		*/
		this.dragThreshold = 5;
		/**
		* Handle the drag start event.
		* A function called when the mouse cursor moves during the drag.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The underlying native mouse event.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drag handler should assign a function to this
		* property to handle the drag event.
		*
		* This handler will not typically be provided. It is only useful in
		* special cases where the drag source wants to take action during
		* drag move events.
		*/
		this.onDragStart = null;
		this.onDrag = null;
		/**
		* Handle the drag end event.
		* A function called when the drag operation ends.
		*
		* @param event - The native mouse event that underlies the drag operation.
		* @param event - The underlying native mouse event.
		*
		* @param dragData - A reference to the drag/drop context used to pass data
		* between the different stages of the drag and drop lifecycle.
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drag handler should assign a function to this
		* property to handle the drag end event.
		*
		* The handler should read the `dropAction` property to determine
		* whether and how the drop target handled the drop action. If the
		* value is `'none'`, it indicates that the drop was not handled.
		*/
		this.onDragEnd = null;
		this._pressX = -1;
		this._pressY = -1;
		this._dragData = null;
		this._node = null;
		this._context = null;
		this._node = node;
		@@ -478,12 +403,18 @@ this._context = context;
		/**
		* Dispose of the resources the drag handler created.
		* Dispose of the drag handler and remove its event listeners.
		*/
		DragHandler.prototype.dispose = function () {
		document.removeEventListener('mousemove', this, true);
		document.removeEventListener('mouseup', this, true);
		this._node.removeEventListener('mousedown', this);
		this._node = null;
		this._context = null;
		this._disposeDragData();
		this.onDragStart = null;
		this.onDrag = null;
		this.onDragEnd = null;
		};
		Object.defineProperty(DragHandler.prototype, "isDisposed", {
		/**
		* Check if a drag handler is disposed.
		* Test if the drag handler is disposed.
		*/
		@@ -496,14 +427,67 @@ get: function () {
		});
		Object.defineProperty(DragHandler.prototype, "node", {
		/**
		* Get the DOM node for the drag handler.
		*
		* #### Notes
		* This is a read-only property.
		*/
		get: function () {
		return this._node;
		},
		enumerable: true,
		configurable: true
		});
		Object.defineProperty(DragHandler.prototype, "context", {
		/**
		* Get the `this` context for the drag handlers.
		*
		* #### Notes
		* This is a read-only property.
		*/
		get: function () {
		return this._context;
		},
		enumerable: true,
		configurable: true
		});
		/**
		* Create an HTML element that will follow the cursor in drag/drop operations.
		* Create the HTML element that will follow the cursor.
		*
		* #### Notes
		* This can be reimplemented by a subclass to create a custom ghost
		* node. The default implementation clones the handler's `node`.
		*/
		DragHandler.prototype.ghost = function () {
		var node = this._node.cloneNode(true);
		var rect = this._node.getBoundingClientRect();
		DragHandler.prototype.createGhost = function () {
		var node = this.node.cloneNode(true);
		var rect = this.node.getBoundingClientRect();
		node.style.height = rect.height + "px";
		node.style.width = rect.width + "px";
		node.classList.add(DRAG_GHOST_CLASS);
		node.classList.add(GHOST_CLASS);
		return node;
		};
		/**
		* Synthetically start the drag operation.
		*
		* @param clientX - The current client X position of the mouse.
		*
		* @param clientY - The current client Y position of the mouse.
		*
		* #### Notes
		* This acts as a synthetic mouse press for the cases where a drag
		* operation needs to be started from other mouse handling code.
		*/
		DragHandler.prototype.start = function (clientX, clientY) {
		// Do nothing if the drag is already started.
		if (this._dragData) {
		return;
		}
		// Store the initial mouse press position.
		this._pressX = clientX;
		this._pressY = clientY;
		// Add the document mouse listeners.
		document.addEventListener('mousemove', this, true);
		document.addEventListener('mouseup', this, true);
		};
		/**
		* Handle the DOM events for the drag handler.
		@@ -515,3 +499,3 @@ *
		* This method implements the DOM `EventListener` interface and is
		* called in response to events on the drag handler's parent DOM node. It
		* called in response to events on the drag handler's DOM node. It
		* should not be called directly by user code.
		@@ -533,51 +517,21 @@ */
		/**
		* Start a drag operation manually.
		*
		* @param event - The native mouse event that underlies the drag operation.
		*
		* #### Notes
		* This method only needs to be used if the `autostart` flag for a drag
		* handler has been set to `false`.
		*
		* See also: [[autostart]]
		* Handle the `'mousedown'` event for the drag handler.
		*/
		DragHandler.prototype.startDrag = function (event) {
		if (!this._dragData) {
		this._createDragData(event);
		}
		if (this._dragData._started) {
		DragHandler.prototype._evtMouseDown = function (event) {
		// Do nothing if the drag is already started.
		if (this._dragData) {
		return;
		}
		this._dragData._started = true;
		this._dragData.ghost = this.ghost();
		document.body.appendChild(this._dragData.ghost);
		if (this.onDragStart) {
		this.onDragStart.call(this._context, event, this._dragData);
		}
		};
		/**
		* Create drag data for a drag and drop lifecycle.
		*/
		DragHandler.prototype._createDragData = function (event) {
		this._dragData = {
		_started: false,
		ghost: null,
		override: null,
		payload: Object.create(null),
		startX: event.clientX,
		startY: event.clientY
		};
		};
		/**
		* Handle the `'mousedown'` event for the drag handler.
		*/
		DragHandler.prototype._evtMouseDown = function (event) {
		// Do nothing if the left button is not pressed.
		if (event.button !== 0) {
		return;
		}
		event.preventDefault();
		event.stopPropagation();
		// TODO should we stop propagation here?
		// We may want to allow it in order to allow focus change.
		// Store the initial mouse press position.
		this._pressX = event.clientX;
		this._pressY = event.clientY;
		// Add the document mouse listeners.
		document.addEventListener('mousemove', this, true);
		document.addEventListener('mouseup', this, true);
		this._createDragData(event);
		};
		@@ -588,18 +542,30 @@ /**
		DragHandler.prototype._evtMouseMove = function (event) {
		if (!this._dragData._started) {
		if (!this.autostart) {
		// Mouse move events are never propagated since this handler
		// is only installed when during a left mouse drag operation.
		event.preventDefault();
		event.stopPropagation();
		// Check to see if the drag threshold has been exceeded, and
		// start the drag operation the first time that event occurs.
		if (!this._dragData) {
		var dx = Math.abs(event.clientX - this._pressX);
		var dy = Math.abs(event.clientY - this._pressY);
		if (dx < this.threshold && dy < this.threshold) {
		return;
		}
		var dx = Math.abs(event.clientX - this._dragData.startX);
		var dy = Math.abs(event.clientY - this._dragData.startY);
		if (Math.sqrt(dx * dx + dy * dy) >= this.dragThreshold) {
		this.startDrag(event);
		}
		else {
		return;
		}
		// Invalidate the cached drop data before starting the drag.
		invalidateCachedDropData();
		// Setup the drag data and attach the ghost node.
		this._dragData = new DragData(this.createGhost());
		document.body.appendChild(this._dragData.ghost);
		// Run the drag start handler.
		runDragStart(this, event, this._dragData);
		}
		this._dragData.ghost.style.top = event.clientY + "px";
		this._dragData.ghost.style.left = event.clientX + "px";
		DropHandler.deploy('drag', event, this._dragData);
		// Move the ghost node to the new mouse position.
		var style = this._dragData.ghost.style;
		style.top = event.clientY + "px";
		style.left = event.clientX + "px";
		// Run the drop handlers for the drag event.
		runDropHandlers(0 /* Drag */, event, this._dragData);
		// Run the drag event handler.
		runDrag(this, event, this._dragData);
		};
		@@ -610,18 +576,37 @@ /**
		DragHandler.prototype._evtMouseUp = function (event) {
		// Do nothing if the left mouse button is not released.
		if (event.button !== 0) {
		return;
		}
		// Mouse up events are never propagated since this handler
		// is only installed when during a left mouse drag operation.
		event.preventDefault();
		event.stopPropagation();
		// Remove the extra mouse handlers.
		document.removeEventListener('mousemove', this, true);
		document.removeEventListener('mouseup', this, true);
		if (this._dragData._started) {
		if (this._dragData.ghost) {
		document.body.removeChild(this._dragData.ghost);
		}
		DropHandler.invalidateCache();
		DropHandler.deploy('drop', event, this._dragData);
		if (this.onDragEnd) {
		this.onDragEnd.call(this._context, event, this._dragData);
		}
		// Bail if no drag is in progress.
		if (!this._dragData) {
		return;
		}
		if (this._dragData.override) {
		this._dragData.override.dispose();
		// Run the drop and end handlers, then dispose the drag data.
		try {
		runDropHandlers(1 /* Drop */, event, this._dragData);
		runDragEnd(this, event, this._dragData);
		}
		finally {
		this._disposeDragData();
		}
		};
		/**
		* Dispose of the resources held by the drag data.
		*/
		DragHandler.prototype._disposeDragData = function () {
		var data = this._dragData;
		if (!data) {
		return;
		}
		this._dragData = null;
		document.body.removeChild(data.ghost);
		data._override.dispose();
		};
		@@ -631,2 +616,287 @@ return DragHandler;
		exports.DragHandler = DragHandler;
		/**
		* A class for implementing drop targets.
		*
		* #### Example
		* ```typescript
		* import {
		* DragData, DropHandler
		* } from 'phosphor-domutil';
		*
		* class DropTarget {
		*
		* constructor() {
		* this._node = someNodeFactory();
		* this._dropHandler = new DropHandler(this._node, this);
		* this._dropHandler.onDragEnter = this._onDragEnter;
		* this._dropHandler.onDragLeave = this._onDragLeave;
		* this._dropHandler.onDragOver = this._onDragOver;
		* this._dropHandler.onDrop = this._onDrop;
		* }
		*
		* dispose(): void {
		* this._dropHandler.dispose();
		* }
		*
		* private _onDragEnter(event: MouseEvent, data: DragData): void {
		* console.log('drag enter', data);
		* }
		*
		* private _onDragLeave(event: MouseEvent, data: DragData): void {
		* console.log('drag leave', data);
		* }
		*
		* private _onDragOver(event: MouseEvent, data: DragData): void {
		* console.log('drag', data);
		* }
		*
		* private _onDrop(event: MouseEvent, data: DragData): void {
		* console.log(data.getData('text/plain'));
		* console.log(data.getData('application/x-my-custom-type'));
		* console.log('drop', data);
		* }
		*
		* private _node: HTMLElement;
		* private _dropHandler: DropHandler;
		* }
		* ```
		*/
		var DropHandler = (function () {
		/**
		* Construct a new drop handler.
		*
		* @param node - The node which acts as the drop target.
		*
		* @param context - The `this` context for the drop handlers.
		*/
		function DropHandler(node, context) {
		/**
		* A function called when the drag enters the DOM node.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drag enter event.
		*
		* The handler should update the `dropAction` of the data to reflect
		* whether or not it can accept drops from the given drag data.
		*/
		this.onDragEnter = null;
		/**
		* A function called when the drag moves over the DOM node.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drag over event.
		*
		* The handler should update the `dropAction` of the data if the
		* result is different than the action set by the enter handler.
		*/
		this.onDragOver = null;
		/**
		* A function called when the drag leaves the DOM node.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drag leave event.
		*
		* The `dropAction` is set to `'none'` after this handler returns.
		*/
		this.onDragLeave = null;
		/**
		* A function called when a drop occurs on the DOM node.
		*
		* @param event - The underlying native mouse event.
		*
		* @param data - The drag data object for the drag operation.
		*
		* #### Notes
		* The creator of the drop handler should assign a function to this
		* property to handle the drop event.
		*
		* The handler should update the `dropAction` of the data if the
		* result is different than the action which was previously set.
		*
		* The `dropAction` will be set to `'none'` if the handler is `null`.
		*/
		this.onDrop = null;
		this._id = nextDropID();
		this._mouseover = false;
		this._node = node;
		this._context = context;
		dropRegistry[this._id] = createDropRecord(this);
		}
		/**
		* Dispose of the resources held by the drop handler.
		*/
		DropHandler.prototype.dispose = function () {
		delete dropRegistry[this._id];
		this.onDragEnter = null;
		this.onDragOver = null;
		this.onDragLeave = null;
		this.onDrop = null;
		this._context = null;
		this._node = null;
		};
		Object.defineProperty(DropHandler.prototype, "isDisposed", {
		/**
		* Test if the drop handler is disposed.
		*/
		get: function () {
		return this._node === null;
		},
		enumerable: true,
		configurable: true
		});
		Object.defineProperty(DropHandler.prototype, "node", {
		/**
		* Get the DOM node for the drop handler.
		*
		* #### Notes
		* This is a read-only property.
		*/
		get: function () {
		return this._node;
		},
		enumerable: true,
		configurable: true
		});
		Object.defineProperty(DropHandler.prototype, "context", {
		/**
		* Get the `this` context for the drop handlers.
		*
		* #### Notes
		* This is a read-only property.
		*/
		get: function () {
		return this._context;
		},
		enumerable: true,
		configurable: true
		});
		return DropHandler;
		})();
		exports.DropHandler = DropHandler;
		/**
		* A function which computes successive unique drop ids.
		*/
		var nextDropID = (function () { var id = 0; return function () { return 'dropID-' + id++; }; })();
		/**
		* The registry of drop records.
		*/
		var dropRegistry = Object.create(null);
		/**
		* Create a drop record for the given drop handler.
		*/
		function createDropRecord(handler) {
		return { handler: handler, entered: false, rect: null };
		}
		/**
		* Invalidate the cached drop record data.
		*/
		function invalidateCachedDropData() {
		for (var key in dropRegistry) {
		var record = dropRegistry[key];
		record.entered = false;
		record.rect = null;
		}
		}
		/**
		* Run the relevant drop handlers for the given parameters.
		*/
		function runDropHandlers(action, event, data) {
		for (var key in dropRegistry) {
		// Fetch common variables.
		var record = dropRegistry[key];
		var handler = record.handler;
		// Compute and cache the client drop rect if necessary.
		if (!record.rect) {
		record.rect = handler.node.getBoundingClientRect();
		}
		// Dispatch to the appropriate drop event handlers.
		if (hitTestRect(record.rect, event.clientX, event.clientY)) {
		if (!record.entered) {
		record.entered = true;
		runDragEnter(record.handler, event, data);
		}
		if (action === 0 /* Drag */) {
		runDragOver(record.handler, event, data);
		}
		else if (action === 1 /* Drop */) {
		runDrop(record.handler, event, data);
		}
		}
		else if (record.entered) {
		record.entered = false;
		runDragLeave(record.handler, event, data);
		}
		}
		}
		/**
		* Run a drag handler's drag start event handler, if it exists.
		*/
		function runDragStart(handler, event, data) {
		if (handler.onDragStart) {
		handler.onDragStart.call(handler.context, event, data);
		}
		}
		/**
		* Run a drag handler's drag event handler, if it exists.
		*/
		function runDrag(handler, event, data) {
		if (handler.onDrag) {
		handler.onDrag.call(handler.context, event, data);
		}
		}
		/**
		* Run a drag handler's drag end event handler, if it exists.
		*/
		function runDragEnd(handler, event, data) {
		if (handler.onDragEnd) {
		handler.onDragEnd.call(handler.context, event, data);
		}
		}
		/**
		* Run a drop handler's drag enter event handler, if it exists.
		*/
		function runDragEnter(handler, event, data) {
		if (handler.onDragEnter) {
		handler.onDragEnter.call(handler.context, event, data);
		}
		}
		/**
		* Run a drop handler's drag over event handler, if it exists.
		*/
		function runDragOver(handler, event, data) {
		if (handler.onDragOver) {
		handler.onDragOver.call(handler.context, event, data);
		}
		}
		/**
		* Run a drop handler's drag leave event handler, if it exists.
		*/
		function runDragLeave(handler, event, data) {
		if (handler.onDragLeave) {
		handler.onDragLeave.call(handler.context, event, data);
		}
		}
		/**
		* Run a drop handler's drop event handler, if it exists.
		*/
		function runDrop(handler, event, data) {
		if (handler.onDrop) {
		handler.onDrop.call(handler.context, event, data);
		}
		}
		//# sourceMappingURL=index.js.map

package.json

		{
		"name": "phosphor-domutil",
		"version": "1.1.0-alpha.0",
		"version": "1.1.0-alpha.1",
		"description": "Utilities for working with the DOM.",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

phosphor-domutil - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics