UNPKG

@ryusei/code

Version:

<div align="center"> <a href="https://code.ryuseijs.com"> <img alt="RyuseiCode" src="https://code.ryuseijs.com/images/svg/logo.svg" width="70"> </a>

298 lines 11 kB
import { Elements, Position, Range } from '@ryusei/code'; import { Component } from '../../classes/Component/Component'; import * as STATES from '../../constants/selection-states'; import { State } from './State'; /** * The class for handing both a native and custom selection. * * @since 0.1.0 */ export declare class Selection extends Component { /** * The collection of selection states. * * | State | Description | * |---|---| * | `IDLE` | The editor is not active. | * | `COLLAPSED` | The selection is collapsed. | * | `START` | The selection will change soon. The native selection has not been updated at this timing. | * | `CHANGED` | The selection has just changed after the `START` or `EXTEND` state. The native selection has been updated. | * | `UPDATE` | The selection has been manually updated via `update()`. | * | `SELECTING` | An user starts selecting texts. | * | `EXTEND` | The existing selection will be extended soon. | * | `END` | An user finishes selection. The native selection has not been updated at this timing (in Gecko). | * | `SELECTED` | The selection which is not collapsed has been settled. | * | `SELECTED_ALL` | All contents has been selected. | * | `CLICKED_RIGHT` | The selection is right-clicked. | */ readonly STATES: typeof STATES; /** * The State instance that manages the selection states. * * @readonly */ state: State; /** * The position where the selection starts. * * @readonly */ anchor: Position; /** * The position where the selection ends. * * @readonly */ focus: Position; /** * Keeps the latest scrollTop amount. */ private scrollTop; /** * Initializes the component. * * @internal * * @param elements - A collection of essential elements. */ mount(elements: Elements): void; /** * Listens to some events. */ private listen; /** * Called whenever the selection is changed. * Be aware that this is fired even when the editor is not focused. */ private onSelectionChange; /** * Called when the mouse button is pressed. * Detects the double-click earlier than the `dblclick` to prevent the native smart selection. * * @param e - A MouseEvent object. */ private onMouseDown; /** * Called when the code element is double-clicked. * If a word is clicked, selects it. Otherwise, selects a clicked node. */ private onDblClick; /** * Called whenever the selection state is changed. * * - Updating positions at the `START` state is too early * because the native selection has not been updated yet. * - Jumps to the focus position just before extending the existing selection by a keyboard * so that the native selection is able to be updated. * - The `EVENT_SELECTING` event must be emitted after `EVENT_SELECTED` event * for listeners to prepare something at the `SELECTING` state. * - When the state goes into `SELECTED` state, the custom selection may be collapsed, * e.g. single backward selection -> shift + arrow. To make sure the state becomes `COLLAPSED`, * sets the native selection. * * @param e - An EventBusEvent object. * @param state - A state number. * @param prev - A previous state number. */ private onStateChanged; /** * Called when the window or scroller scrolls. */ private onScroll; /** * Sets a new selection. * * @param anchor - An anchor position. * @param focus - Optional. A focus position. If omitted, the selection will be collapsed to the anchor. */ set(anchor: Position, focus?: Position): void; /** * Returns positions of the current selection. * If the `normalize` is `true`, the `start` will be always preceding position. * * @param normalize - Optional. Whether to normalize the position or not. * * @return An object literal with anchor and focus positions. */ get(normalize?: boolean): Range; /** * Updates the custom selection range without using the native selection. * * @param anchor - An anchor position. * @param focus - Optional. A focus position. * @param silently - Optional. Whether to change the state or not. */ update(anchor: Position, focus?: Position, silently?: boolean): void; /** * Selects the current or specified line. * * @param row - Optional. A row index where to select. * @param refresh - Optional. Determines whether to refresh the current selection or not. * @param backwards - Optional. Determines whether to select a line backwards or not. */ selectLine(row?: number, refresh?: boolean, backwards?: boolean): void; /** * Selects again the current selection. */ reselect(): void; /** * Selects the whole code. */ selectAll(): void; /** * Holds the current state so that it won't change. */ hold(): void; /** * Disables to hold the state so that it will change. */ release(): void; /** * Converts the selection to a string. * This returns an empty string when the selection is collapsed. * * @return A string representing the current selection. */ toString(): string; /** * Returns the DOMRect object of the native selection boundary. * Note that the boundary node is usually a Text node, * but sometimes the line or the editable element. * * @param focus - Determines whether to get the DOMRect of the focus or anchor node. * * @return A DOMRect object if available, or otherwise `null`. */ getRect(focus: boolean): DOMRect | null; /** * Returns the current location as a string formatted by the i18n definition, such as `'Line: %s, Column: %s'`. * * @return A string that describes the current location. */ getLocation(): string; /** * Checks if the selection state is one of the provided states or not. * This is just an alias of the `state.is()` method. * * @example * ```ts * // Checks if the state is COLLAPSED or not: * Selection.is( Selection.STATES.COLLAPSED ); * * // Checks if the state is START, EXTEND or not: * Selection.is( Selection.STATES.START, Selection.STATES.EXTEND ); * ``` * * @param states - A state or states to check. * * @return `true` if the current state is one of the provided states, or otherwise `false`. */ is(...states: number[]): boolean; /** * Collapses the selection to the anchor or focus position. * * @param toFocus - Optional. Collapses the selection to the focus position. */ collapse(toFocus?: boolean): void; /** * Checks is the selection is backward or not. * * @return `true` if the selection is backward, or otherwise `false`. */ isBackward(): boolean; /** * Checks if the selection is collapsed or not. * * @return `true` if the selection is collapsed, or otherwise `false`. */ isCollapsed(): boolean; /** * Checks if more than one line is selected or not. * * @return `true` if more than one line is selected or otherwise `false`. */ isMultiline(): boolean; /** * Checks if the provided client position is inside the current selection or not. * * @param clientX - The X position that is relative to the client. * @param clientY - The Y position that is relative to the client. * * @return `true` if the position is inside the selection, or otherwise `false`. */ isInside(clientX: number, clientY: number): boolean; /** * Destroys the instance. * * @internal */ destroy(): void; /** * Sets a native selection range. * Be aware that calling `setSelection` emits `selectionchange` only in IE, but does not in others. * * @param start - A start position. * @param end - Optional. An end position. If omitted, the start position is used alternatively. * * @return `true` if the selection is successfully changed, or otherwise `undefined`. */ private setNativeSelection; /** * Converts the native selection boundary to a position represented as [ row, col ]. * In FF, the selection * * @param focus - Optional. Whether to returns a position on the focus boundary or not. * * @return A converted position. If the position is not found, always returns [ 0, 0 ]. */ private getNativeSelection; /** * Finds a line where the native anchor node belongs. * If the `focus` is set to `true`, finds a line where the native focus node belongs. * * @param focus - Determines whether to find a line that has focus node or not. * * @return A line where an anchor or a focus node belongs. */ private findActiveLine; /** * Converts the provided position to the range for wrapping the word at the position. * If the text at the position is not a word, such as `/` or `-`, this returns `null`. * * @param row - A row index. * @param col - A col index. * * @return An object that describes the range of the word at the position. * If the text is not a word, returns `null`. */ private getWordRangeAt; /** * Returns a boundary node and offset of the native selection. * Be aware that the target node must be in the chunk, * or otherwise this method returns `null`. * Besides, IE returns a parent node as a boundary node, and child index as a offset * if the boundary is `<br>`(an empty line). * * @param focus - Whether to get the focus boundary or not. * * @return An object literal with a node and offset. */ private getNativeSelectionBoundary; /** * Detects selection of all contents in a immediate way, such as the `Select All` iOS context menu. * * @return `true` if all contents are selected, or otherwise `false`. */ private detectSelectAll; /** * The dirty code to ensure the selection contains the latest nodes. */ private ensureSelection; /** * Checks if the editor is focused or not. * * @return `true` if the editor is focused, or otherwise `false`. */ private isFocused; } //# sourceMappingURL=../../../../src/js/components/Selection/Selection.d.ts.map