Match-id-95ee7f82826ded00bc5284017d8d79defc7976e7
This commit is contained in:
*
*
commit
e6e2cbdf2c
|
|
@ -0,0 +1,39 @@
|
||||||
|
import {getVNodeProps} from '../dom/DOMInternalKeys';
|
||||||
|
import {resetValue} from '../dom/valueHandler';
|
||||||
|
import {getDomTag} from '../dom/utils/Common';
|
||||||
|
|
||||||
|
let updateList = null;
|
||||||
|
|
||||||
|
// 受控组件值重新赋值
|
||||||
|
function updateValue(target: Element) {
|
||||||
|
const props = getVNodeProps(target);
|
||||||
|
if (props) {
|
||||||
|
const type = getDomTag(target);
|
||||||
|
resetValue(target, type, props);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 存储队列中缓存组件
|
||||||
|
export function addValueUpdateList(target: EventTarget): void {
|
||||||
|
if (updateList) {
|
||||||
|
updateList.push(target);
|
||||||
|
} else {
|
||||||
|
updateList = [target];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否需要重新赋值
|
||||||
|
export function shouldUpdateValue(): boolean {
|
||||||
|
return updateList !== null && updateList.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从缓存队列中对受控组件进行赋值
|
||||||
|
export function updateControlledValue() {
|
||||||
|
if (!updateList) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
updateList.forEach(item => {
|
||||||
|
updateValue(item);
|
||||||
|
});
|
||||||
|
updateList = null;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
/**
|
||||||
|
* 事件绑定实现
|
||||||
|
*/
|
||||||
|
import {allDelegatedNativeEvents} from './EventCollection';
|
||||||
|
import {isDocument} from '../dom/utils/Common';
|
||||||
|
import {
|
||||||
|
getEventListeners,
|
||||||
|
getEventToListenerMap,
|
||||||
|
} from '../dom/DOMInternalKeys';
|
||||||
|
import {createCustomEventListener} from './WrapperListener';
|
||||||
|
import {CustomBaseEvent} from './customEvents/CustomBaseEvent';
|
||||||
|
|
||||||
|
const listeningMarker =
|
||||||
|
'_horizonListening' +
|
||||||
|
Math.random()
|
||||||
|
.toString(36)
|
||||||
|
.slice(4);
|
||||||
|
|
||||||
|
// 获取节点上已经委托事件名称
|
||||||
|
function getListenerSetKey(nativeEvtName: string, isCapture: boolean): string {
|
||||||
|
const sufix = isCapture ? 'capture' : 'bubble';
|
||||||
|
return `${nativeEvtName}__${sufix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function listenToNativeEvent(
|
||||||
|
nativeEvtName: string,
|
||||||
|
delegatedElement: Element,
|
||||||
|
isCapture: boolean,
|
||||||
|
): void {
|
||||||
|
let target: Element | Document = delegatedElement;
|
||||||
|
// document层次可能触发selectionchange事件，为了捕获这类事件，selectionchange事件绑定在document节点上
|
||||||
|
if (nativeEvtName === 'selectionchange' && !isDocument(delegatedElement)) {
|
||||||
|
target = delegatedElement.ownerDocument;
|
||||||
|
}
|
||||||
|
|
||||||
|
const listenerSet = getEventListeners(target);
|
||||||
|
const listenerSetKey = getListenerSetKey(nativeEvtName, isCapture);
|
||||||
|
|
||||||
|
if (!listenerSet.has(listenerSetKey)) {
|
||||||
|
const listener = createCustomEventListener(
|
||||||
|
target,
|
||||||
|
nativeEvtName,
|
||||||
|
isCapture,
|
||||||
|
);
|
||||||
|
target.addEventListener(nativeEvtName, listener, !!isCapture);
|
||||||
|
listenerSet.add(listenerSetKey);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听所有委托事件
|
||||||
|
export function listenDelegatedEvents(dom: Element) {
|
||||||
|
if (dom[listeningMarker]) {
|
||||||
|
// 不需要重复注册事件
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dom[listeningMarker] = true;
|
||||||
|
allDelegatedNativeEvents.forEach((eventName: string) => {
|
||||||
|
// 委托冒泡事件
|
||||||
|
listenToNativeEvent(eventName, dom, false);
|
||||||
|
// 委托捕获事件
|
||||||
|
listenToNativeEvent(eventName, dom, true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过horizon事件名获取到native事件名
|
||||||
|
function getNativeEvtName(horizonEventName, capture) {
|
||||||
|
let nativeName;
|
||||||
|
if (capture) {
|
||||||
|
nativeName = horizonEventName.slice(2, -7);
|
||||||
|
} else {
|
||||||
|
nativeName = horizonEventName.slice(2);
|
||||||
|
}
|
||||||
|
if (!nativeName) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return nativeName.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 是否捕获事件
|
||||||
|
function getIsCapture(horizonEventName) {
|
||||||
|
if (horizonEventName === 'onLostPointerCapture' || horizonEventName === 'onGotPointerCapture') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return horizonEventName.slice(-7) === 'Capture';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 封装监听函数
|
||||||
|
function getWrapperListener(horizonEventName, nativeEvtName, targetElement, listener) {
|
||||||
|
return (event) => {
|
||||||
|
const customEvent = new CustomBaseEvent(horizonEventName, nativeEvtName, event, null, targetElement);
|
||||||
|
listener(customEvent);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 非委托事件单独监听到各自dom节点
|
||||||
|
export function listenNonDelegatedEvent(
|
||||||
|
horizonEventName: string,
|
||||||
|
domElement: Element,
|
||||||
|
listener,
|
||||||
|
): void {
|
||||||
|
const isCapture = getIsCapture(horizonEventName);
|
||||||
|
const nativeEvtName = getNativeEvtName(horizonEventName, isCapture);
|
||||||
|
|
||||||
|
// 先判断是否存在老的监听事件，若存在则移除
|
||||||
|
const eventToListenerMap = getEventToListenerMap(domElement);
|
||||||
|
if (eventToListenerMap.get(horizonEventName)) {
|
||||||
|
domElement.removeEventListener(nativeEvtName, eventToListenerMap.get(horizonEventName));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof listener !== 'function') {
|
||||||
|
eventToListenerMap.delete(nativeEvtName);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为了和委托事件对外行为一致，将事件对象封装成CustomBaseEvent
|
||||||
|
const wrapperListener = getWrapperListener(horizonEventName, nativeEvtName, domElement, listener);
|
||||||
|
// 添加新的监听
|
||||||
|
eventToListenerMap.set(horizonEventName, wrapperListener);
|
||||||
|
domElement.addEventListener(nativeEvtName, wrapperListener, isCapture);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {horizonEventToNativeMap} from './const';
|
||||||
|
|
||||||
|
// 需要委托的horizon事件和原生事件对应关系
|
||||||
|
export const allDelegatedHorizonEvents = new Map();
|
||||||
|
// 所有委托的原生事件集合
|
||||||
|
export const allDelegatedNativeEvents = new Set();
|
||||||
|
|
||||||
|
horizonEventToNativeMap.forEach((dependencies, horizonEvent) => {
|
||||||
|
allDelegatedHorizonEvents.set(horizonEvent, dependencies);
|
||||||
|
allDelegatedHorizonEvents.set(horizonEvent + 'Capture', dependencies);
|
||||||
|
dependencies.forEach(d => {
|
||||||
|
allDelegatedNativeEvents.add(d);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import {
|
||||||
|
STYLE_AMT_END,
|
||||||
|
STYLE_AMT_ITERATION,
|
||||||
|
STYLE_AMT_START,
|
||||||
|
STYLE_TRANS_END
|
||||||
|
} from './StyleEventNames';
|
||||||
|
|
||||||
|
// Horizon事件和原生事件对应关系
|
||||||
|
export const horizonEventToNativeMap = new Map([
|
||||||
|
['onKeyPress', ['keypress']],
|
||||||
|
['onTextInput', ['textInput']],
|
||||||
|
['onClick', ['click']],
|
||||||
|
['onDoubleClick', ['dblclick']],
|
||||||
|
['onFocus', ['focusin']],
|
||||||
|
['onBlur', ['focusout']],
|
||||||
|
['onInput', ['input']],
|
||||||
|
['onMouseOut', ['mouseout']],
|
||||||
|
['onMouseOver', ['mouseover']],
|
||||||
|
['onPointerOut', ['pointerout']],
|
||||||
|
['onPointerOver', ['pointerover']],
|
||||||
|
['onContextMenu', ['contextmenu']],
|
||||||
|
['onDragEnd', ['dragend']],
|
||||||
|
['onKeyDown', ['keydown']],
|
||||||
|
['onKeyUp', ['keyup']],
|
||||||
|
['onMouseDown', ['mousedown']],
|
||||||
|
['onMouseMove', ['mousemove']],
|
||||||
|
['onMouseUp', ['mouseup']],
|
||||||
|
['onSelectChange', ['selectionchange']],
|
||||||
|
['onTouchEnd', ['touchend']],
|
||||||
|
['onTouchMove', ['touchmove']],
|
||||||
|
['onTouchStart', ['touchstart']],
|
||||||
|
|
||||||
|
['onCompositionEnd', ['compositionend']],
|
||||||
|
['onCompositionStart', ['compositionstart']],
|
||||||
|
['onCompositionUpdate', ['compositionupdate']],
|
||||||
|
['onBeforeInput', ['compositionend', 'keypress', 'textInput']],
|
||||||
|
['onChange', ['change', 'click', 'focusout', 'input',]],
|
||||||
|
['onSelect', ['focusout', 'contextmenu', 'dragend', 'focusin', 'keydown', 'keyup', 'mousedown', 'mouseup', 'selectionchange']],
|
||||||
|
|
||||||
|
['onAnimationEnd', [STYLE_AMT_END]],
|
||||||
|
['onAnimationIteration', [STYLE_AMT_ITERATION]],
|
||||||
|
['onAnimationStart', [STYLE_AMT_START]],
|
||||||
|
['onTransitionEnd', [STYLE_TRANS_END]]
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const CommonEventToHorizonMap = {
|
||||||
|
click: 'click',
|
||||||
|
dblclick: 'doubleClick',
|
||||||
|
contextmenu: 'contextMenu',
|
||||||
|
dragend: 'dragEnd',
|
||||||
|
focusin: 'focus',
|
||||||
|
focusout: 'blur',
|
||||||
|
input: 'input',
|
||||||
|
keydown: 'keyDown',
|
||||||
|
keypress: 'keyPress',
|
||||||
|
keyup: 'keyUp',
|
||||||
|
mousedown: 'mouseDown',
|
||||||
|
mouseup: 'mouseUp',
|
||||||
|
touchend: 'touchEnd',
|
||||||
|
touchstart: 'touchStart',
|
||||||
|
mousemove: 'mouseMove',
|
||||||
|
mouseout: 'mouseOut',
|
||||||
|
mouseover: 'mouseOver',
|
||||||
|
pointermove: 'pointerMove',
|
||||||
|
pointerout: 'pointerOut',
|
||||||
|
pointerover: 'pointerOver',
|
||||||
|
selectionchange: 'selectChange',
|
||||||
|
textInput: 'textInput',
|
||||||
|
touchmove: 'touchMove',
|
||||||
|
[STYLE_AMT_END]: 'animationEnd',
|
||||||
|
[STYLE_AMT_ITERATION]: 'animationIteration',
|
||||||
|
[STYLE_AMT_START]: 'animationStart',
|
||||||
|
[STYLE_TRANS_END]: 'transitionEnd',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CHAR_CODE_ENTER = 13;
|
||||||
|
export const CHAR_CODE_SPACE = 32;
|
||||||
|
|
||||||
|
|
||||||
|
export const EVENT_TYPE_BUBBLE = 'Bubble';
|
||||||
|
export const EVENT_TYPE_CAPTURE = 'Capture';
|
||||||
|
export const EVENT_TYPE_ALL = 'All';
|
||||||
|
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
/**
|
||||||
|
* 自定义的基本事件类型
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {VNode} from '../../renderer/Types';
|
||||||
|
|
||||||
|
export class CustomBaseEvent {
|
||||||
|
|
||||||
|
data: string;
|
||||||
|
defaultPrevented: boolean;
|
||||||
|
customEventName: string;
|
||||||
|
targetVNode: VNode;
|
||||||
|
type: string;
|
||||||
|
nativeEvent: any;
|
||||||
|
target: EventTarget;
|
||||||
|
timeStamp: number;
|
||||||
|
isDefaultPrevented: () => boolean;
|
||||||
|
isPropagationStopped: () => boolean;
|
||||||
|
currentTarget: EventTarget;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
customEvtName: string | null,
|
||||||
|
nativeEvtName: string,
|
||||||
|
nativeEvt: { [propName: string]: any },
|
||||||
|
vNode: VNode,
|
||||||
|
target: null | EventTarget
|
||||||
|
) {
|
||||||
|
// 复制原生属性到自定义事件
|
||||||
|
extendAttribute(this, nativeEvt);
|
||||||
|
|
||||||
|
// custom事件自定义属性
|
||||||
|
this.customEventName = customEvtName;
|
||||||
|
this.targetVNode = vNode;
|
||||||
|
this.type = nativeEvtName;
|
||||||
|
this.nativeEvent = nativeEvt;
|
||||||
|
this.target = target;
|
||||||
|
this.timeStamp = nativeEvt.timeStamp || Date.now();
|
||||||
|
|
||||||
|
const defaultPrevented = nativeEvt.defaultPrevented != null ? nativeEvt.defaultPrevented : nativeEvt.returnValue === false;
|
||||||
|
this.defaultPrevented = defaultPrevented;
|
||||||
|
|
||||||
|
this.preventDefault = this.preventDefault.bind(this);
|
||||||
|
this.stopPropagation = this.stopPropagation.bind(this);
|
||||||
|
this.isDefaultPrevented = () => defaultPrevented;
|
||||||
|
this.isPropagationStopped = () => false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 兼容性方法
|
||||||
|
persist() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 阻止默认行为
|
||||||
|
preventDefault() {
|
||||||
|
this.defaultPrevented = true;
|
||||||
|
if (!this.nativeEvent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof this.nativeEvent.preventDefault === 'function') {
|
||||||
|
this.nativeEvent.preventDefault();
|
||||||
|
}
|
||||||
|
this.nativeEvent.returnValue = false;
|
||||||
|
this.isDefaultPrevented = () => true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 停止冒泡
|
||||||
|
stopPropagation() {
|
||||||
|
if (!this.nativeEvent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof this.nativeEvent.stopPropagation === 'function') {
|
||||||
|
this.nativeEvent.stopPropagation();
|
||||||
|
}
|
||||||
|
this.nativeEvent.cancelBubble = true;
|
||||||
|
this.isPropagationStopped = () => true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从原生事件中复制属性到自定义事件中
|
||||||
|
function extendAttribute(target, source) {
|
||||||
|
const attributes = [
|
||||||
|
// AnimationEvent
|
||||||
|
'animationName', 'elapsedTime', 'pseudoElement',
|
||||||
|
// CompositionEvent、InputEvent
|
||||||
|
'data',
|
||||||
|
// DragEvent
|
||||||
|
'dataTransfer',
|
||||||
|
// FocusEvent
|
||||||
|
'relatedTarget',
|
||||||
|
// KeyboardEvent
|
||||||
|
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey', 'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
|
||||||
|
// MouseEvent
|
||||||
|
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY', 'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
|
||||||
|
// PointerEvent
|
||||||
|
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure', 'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
|
||||||
|
// TouchEvent
|
||||||
|
'touches', 'targetTouches', 'changedTouches',
|
||||||
|
// TransitionEvent
|
||||||
|
'propertyName',
|
||||||
|
// UIEvent
|
||||||
|
'view', 'detail',
|
||||||
|
// WheelEvent
|
||||||
|
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
|
||||||
|
];
|
||||||
|
|
||||||
|
attributes.forEach(attr => {
|
||||||
|
if (typeof source[attr] !== 'undefined') {
|
||||||
|
if (typeof source[attr] === 'function') {
|
||||||
|
target[attr] = function() {
|
||||||
|
return source[attr].apply(source, arguments);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
target[attr] = source[attr];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/**
|
||||||
|
* 自定义键盘事件
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type {VNode} from '../../renderer/Types';
|
||||||
|
import {uniqueCharCode} from '../utils';
|
||||||
|
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||||
|
import {CHAR_CODE_ENTER} from '../const';
|
||||||
|
|
||||||
|
const uniqueKeyMap = new Map([
|
||||||
|
['Esc', 'Escape'],
|
||||||
|
['Spacebar', ' '],
|
||||||
|
['Left', 'ArrowLeft'],
|
||||||
|
['Up', 'ArrowUp'],
|
||||||
|
['Right', 'ArrowRight'],
|
||||||
|
['Down', 'ArrowDown'],
|
||||||
|
['Del', 'Delete'],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const charCodeToKeyMap = new Map([
|
||||||
|
[8, 'Backspace'],
|
||||||
|
[9, 'Tab'],
|
||||||
|
[13, 'Enter'],
|
||||||
|
[16, 'Shift'],
|
||||||
|
[17, 'Control'],
|
||||||
|
[18, 'Alt'],
|
||||||
|
[19, 'Pause'],
|
||||||
|
[27, 'Escape'],
|
||||||
|
[32, ' '],
|
||||||
|
[33, 'PageUp'],
|
||||||
|
[34, 'PageDown'],
|
||||||
|
[35, 'End'],
|
||||||
|
[36, 'Home'],
|
||||||
|
[37, 'ArrowLeft'],
|
||||||
|
[38, 'ArrowUp'],
|
||||||
|
[39, 'ArrowRight'],
|
||||||
|
[40, 'ArrowDown'],
|
||||||
|
[46, 'Delete']
|
||||||
|
]);
|
||||||
|
|
||||||
|
function getKey(event) {
|
||||||
|
if (event.key) {
|
||||||
|
return uniqueKeyMap.get(event.key) || event.key;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'keypress') {
|
||||||
|
const charCode = uniqueCharCode(event);
|
||||||
|
return charCode === CHAR_CODE_ENTER ? 'Enter' : String.fromCharCode(charCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'keydown' || event.type === 'keyup') {
|
||||||
|
return charCodeToKeyMap.get(event.keyCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CustomKeyboardEvent extends CustomBaseEvent {
|
||||||
|
|
||||||
|
key: string;
|
||||||
|
charCode: number;
|
||||||
|
keyCode: number;
|
||||||
|
which: number;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
customEvtName: string | null,
|
||||||
|
nativeEvtName: string,
|
||||||
|
nativeEvt: { [propName: string]: any },
|
||||||
|
vNode: VNode,
|
||||||
|
target: null | EventTarget
|
||||||
|
) {
|
||||||
|
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
|
||||||
|
this.key = getKey(nativeEvt);
|
||||||
|
this.charCode = nativeEvtName === 'keypress' ? uniqueCharCode(nativeEvt) : 0;
|
||||||
|
this.keyCode = (nativeEvtName === 'keydown' || nativeEvtName === 'keyup') ? nativeEvt.keyCode : 0;
|
||||||
|
this.which = this.charCode || this.keyCode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import type {VNode} from '../../renderer/Types';
|
||||||
|
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||||
|
|
||||||
|
export class CustomMouseEvent extends CustomBaseEvent {
|
||||||
|
relatedTarget: EventTarget;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
customEvtName: string | null,
|
||||||
|
nativeEvtName: string,
|
||||||
|
nativeEvt: { [propName: string]: any },
|
||||||
|
vNode: VNode,
|
||||||
|
target: null | EventTarget
|
||||||
|
) {
|
||||||
|
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
|
||||||
|
|
||||||
|
let relatedTarget = nativeEvt.relatedTarget;
|
||||||
|
if (relatedTarget === undefined) {
|
||||||
|
if (nativeEvt.fromElement === nativeEvt.srcElement) {
|
||||||
|
relatedTarget = nativeEvt.toElement;
|
||||||
|
} else {
|
||||||
|
relatedTarget = nativeEvt.fromElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.relatedTarget = relatedTarget;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import {CustomKeyboardEvent} from './CustomKeyboardEvent';
|
||||||
|
import {CustomMouseEvent} from './CustomMouseEvent';
|
||||||
|
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||||
|
|
||||||
|
const CommonEventToCustom = {
|
||||||
|
keypress: CustomKeyboardEvent,
|
||||||
|
keydown: CustomKeyboardEvent,
|
||||||
|
keyup: CustomKeyboardEvent,
|
||||||
|
click: CustomMouseEvent,
|
||||||
|
dblclick: CustomMouseEvent,
|
||||||
|
mousedown: CustomMouseEvent,
|
||||||
|
mousemove: CustomMouseEvent,
|
||||||
|
mouseup: CustomMouseEvent,
|
||||||
|
mouseout: CustomMouseEvent,
|
||||||
|
mouseover: CustomMouseEvent,
|
||||||
|
contextmenu: CustomMouseEvent,
|
||||||
|
pointercancel: CustomMouseEvent,
|
||||||
|
pointerdown: CustomMouseEvent,
|
||||||
|
pointermove: CustomMouseEvent,
|
||||||
|
pointerout: CustomMouseEvent,
|
||||||
|
pointerover: CustomMouseEvent,
|
||||||
|
pointerup: CustomMouseEvent,
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建普通自定义事件对象实例，和原生事件对应
|
||||||
|
export function createCommonCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||||
|
const EventConstructor = CommonEventToCustom[nativeEvtName] || CustomBaseEvent;
|
||||||
|
return new EventConstructor(
|
||||||
|
customEventName,
|
||||||
|
nativeEvtName,
|
||||||
|
nativeEvent,
|
||||||
|
vNode,
|
||||||
|
currentTarget,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建模拟事件实例对象,需要handler特殊处理
|
||||||
|
export function createHandlerCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||||
|
return new CustomMouseEvent(
|
||||||
|
customEventName,
|
||||||
|
nativeEvtName,
|
||||||
|
nativeEvent,
|
||||||
|
vNode,
|
||||||
|
currentTarget,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import type {VNode} from '../../renderer/Types';
|
||||||
|
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||||
|
import {getListenersFromTree} from '../ListenerGetter';
|
||||||
|
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||||
|
import {CHAR_CODE_SPACE, EVENT_TYPE_ALL} from '../const';
|
||||||
|
import {CustomBaseEvent} from '../customEvents/CustomBaseEvent';
|
||||||
|
const SPACE_CHAR = String.fromCharCode(CHAR_CODE_SPACE);
|
||||||
|
|
||||||
|
function getInputCharsByNative(
|
||||||
|
eventName: string,
|
||||||
|
nativeEvent: any,
|
||||||
|
): string | void {
|
||||||
|
if (eventName === 'compositionend') {
|
||||||
|
return (nativeEvent.detail && nativeEvent.detail.data) || null;
|
||||||
|
}
|
||||||
|
if (eventName === 'keypress') {
|
||||||
|
return nativeEvent.which === CHAR_CODE_SPACE ? SPACE_CHAR : null;
|
||||||
|
}
|
||||||
|
if (eventName === 'textInput') {
|
||||||
|
return nativeEvent.data === SPACE_CHAR ? null : nativeEvent.data;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自定义beforeInput的hook事件处理
|
||||||
|
export function getListeners(
|
||||||
|
nativeEvtName: string,
|
||||||
|
nativeEvent: AnyNativeEvent,
|
||||||
|
vNode: null | VNode,
|
||||||
|
target: null | EventTarget,
|
||||||
|
): ProcessingListenerList {
|
||||||
|
const chars = getInputCharsByNative(nativeEvtName, nativeEvent);
|
||||||
|
// 无字符将要输入，无需处理
|
||||||
|
if (!chars) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const event: CustomBaseEvent = createHandlerCustomEvent(
|
||||||
|
'onBeforeInput',
|
||||||
|
'beforeinput',
|
||||||
|
nativeEvent,
|
||||||
|
null,
|
||||||
|
target,
|
||||||
|
);
|
||||||
|
event.data = chars;
|
||||||
|
|
||||||
|
return getListenersFromTree(vNode, 'onBeforeInput', event, EVENT_TYPE_ALL);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||||
|
import {getDom} from '../../dom/DOMInternalKeys';
|
||||||
|
import {isInputValueChanged} from '../../dom/valueHandler/ValueChangeHandler';
|
||||||
|
import {addValueUpdateList} from '../ControlledValueUpdater';
|
||||||
|
import {isTextInputElement} from '../utils';
|
||||||
|
import {EVENT_TYPE_ALL} from '../const';
|
||||||
|
import {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||||
|
import {
|
||||||
|
getListenersFromTree,
|
||||||
|
} from '../ListenerGetter';
|
||||||
|
import {VNode} from '../../renderer/Types';
|
||||||
|
import {getDomTag} from '../../dom/utils/Common';
|
||||||
|
|
||||||
|
// 返回是否需要触发change事件标记
|
||||||
|
function shouldTriggerChangeEvent(targetDom, evtName) {
|
||||||
|
const { type } = targetDom;
|
||||||
|
const domTag = getDomTag(targetDom);
|
||||||
|
|
||||||
|
if (domTag === 'select' || (domTag === 'input' && type === 'file')) {
|
||||||
|
return evtName === 'change';
|
||||||
|
} else if (isTextInputElement(targetDom)) {
|
||||||
|
if (evtName === 'input' || evtName === 'change') {
|
||||||
|
return isInputValueChanged(targetDom);
|
||||||
|
}
|
||||||
|
} else if (domTag === 'input' && (type === 'checkbox' || type === 'radio')) {
|
||||||
|
if (evtName === 'click') {
|
||||||
|
return isInputValueChanged(targetDom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 支持input/textarea/select的onChange事件
|
||||||
|
*/
|
||||||
|
export function getListeners(
|
||||||
|
nativeEvtName: string,
|
||||||
|
nativeEvt: AnyNativeEvent,
|
||||||
|
vNode: null | VNode,
|
||||||
|
target: null | EventTarget,
|
||||||
|
): ProcessingListenerList {
|
||||||
|
if (!vNode) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const targetDom = getDom(vNode);
|
||||||
|
|
||||||
|
// 判断是否需要触发change事件
|
||||||
|
if (shouldTriggerChangeEvent(targetDom, nativeEvtName)) {
|
||||||
|
addValueUpdateList(target);
|
||||||
|
const event = createHandlerCustomEvent(
|
||||||
|
'onChange',
|
||||||
|
'change',
|
||||||
|
nativeEvt,
|
||||||
|
null,
|
||||||
|
target,
|
||||||
|
);
|
||||||
|
return getListenersFromTree(vNode, 'onChange', event, EVENT_TYPE_ALL);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import type {VNode} from '../../renderer/Types';
|
||||||
|
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||||
|
import {getListenersFromTree} from '../ListenerGetter';
|
||||||
|
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||||
|
import {EVENT_TYPE_ALL} from '../const';
|
||||||
|
|
||||||
|
const compositionEventObj = {
|
||||||
|
compositionstart: 'onCompositionStart',
|
||||||
|
compositionend: 'onCompositionEnd',
|
||||||
|
compositionupdate: 'onCompositionUpdate',
|
||||||
|
};
|
||||||
|
|
||||||
|
// compoisition事件主要处理中文输入法输入时的触发事件
|
||||||
|
export function getListeners(
|
||||||
|
evtName: string,
|
||||||
|
nativeEvt: AnyNativeEvent,
|
||||||
|
vNode: null | VNode,
|
||||||
|
target: null | EventTarget,
|
||||||
|
): ProcessingListenerList {
|
||||||
|
const evtType = compositionEventObj[evtName];
|
||||||
|
|
||||||
|
const event = createHandlerCustomEvent(
|
||||||
|
evtType,
|
||||||
|
evtName,
|
||||||
|
nativeEvt,
|
||||||
|
null,
|
||||||
|
target,
|
||||||
|
);
|
||||||
|
return getListenersFromTree(vNode, evtType, event, EVENT_TYPE_ALL);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||||
|
import {shallowCompare} from '../../renderer/utils/compare';
|
||||||
|
import {getFocusedDom} from '../../dom/utils/Common';
|
||||||
|
import {getDom} from '../../dom/DOMInternalKeys';
|
||||||
|
import {isDocument} from '../../dom/utils/Common';
|
||||||
|
import {isTextInputElement} from '../utils';
|
||||||
|
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||||
|
import {getListenersFromTree} from '../ListenerGetter';
|
||||||
|
import type {VNode} from '../../renderer/Types';
|
||||||
|
import {EVENT_TYPE_ALL} from '../const';
|
||||||
|
|
||||||
|
const horizonEventName = 'onSelect'
|
||||||
|
|
||||||
|
let currentElement = null;
|
||||||
|
let currentVNode = null;
|
||||||
|
let lastSelection = null;
|
||||||
|
|
||||||
|
function initTargetCache(dom, vNode) {
|
||||||
|
if (isTextInputElement(dom) || dom.contentEditable === 'true') {
|
||||||
|
currentElement = dom;
|
||||||
|
currentVNode = vNode;
|
||||||
|
lastSelection = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearTargetCache() {
|
||||||
|
currentElement = null;
|
||||||
|
currentVNode = null;
|
||||||
|
lastSelection = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标记是否在鼠标事件过程中
|
||||||
|
let isInMouseEvent = false;
|
||||||
|
|
||||||
|
// 获取节点所在的document对象
|
||||||
|
function getDocument(eventTarget) {
|
||||||
|
if (eventTarget.window === eventTarget) {
|
||||||
|
return eventTarget.document;
|
||||||
|
}
|
||||||
|
if (isDocument(eventTarget)) {
|
||||||
|
return eventTarget;
|
||||||
|
}
|
||||||
|
return eventTarget.ownerDocument;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSelectEvent(nativeEvent, target) {
|
||||||
|
const doc = getDocument(target);
|
||||||
|
if (isInMouseEvent || currentElement == null || currentElement !== getFocusedDom(doc)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSelection = window.getSelection();
|
||||||
|
if (!shallowCompare(lastSelection, currentSelection)) {
|
||||||
|
lastSelection = currentSelection;
|
||||||
|
|
||||||
|
const event = createHandlerCustomEvent(
|
||||||
|
horizonEventName,
|
||||||
|
'select',
|
||||||
|
nativeEvent,
|
||||||
|
null,
|
||||||
|
target,
|
||||||
|
);
|
||||||
|
event.target = currentElement;
|
||||||
|
|
||||||
|
return getListenersFromTree(
|
||||||
|
currentVNode,
|
||||||
|
horizonEventName,
|
||||||
|
event,
|
||||||
|
EVENT_TYPE_ALL
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 该插件创建一个onSelect事件
|
||||||
|
* 支持元素： input、textarea、contentEditable元素
|
||||||
|
* 触发场景：用户输入、折叠选择、文本选择
|
||||||
|
*/
|
||||||
|
export function getListeners(
|
||||||
|
name: string,
|
||||||
|
nativeEvt: AnyNativeEvent,
|
||||||
|
vNode: null | VNode,
|
||||||
|
target: null | EventTarget,
|
||||||
|
): ProcessingListenerList {
|
||||||
|
const targetNode = vNode ? getDom(vNode) : window;
|
||||||
|
let eventUnitList = [];
|
||||||
|
switch (name) {
|
||||||
|
case 'focusin':
|
||||||
|
initTargetCache(targetNode, vNode);
|
||||||
|
return eventUnitList;
|
||||||
|
case 'focusout':
|
||||||
|
clearTargetCache();
|
||||||
|
return eventUnitList;
|
||||||
|
case 'mousedown':
|
||||||
|
isInMouseEvent = true;
|
||||||
|
return eventUnitList;
|
||||||
|
case 'contextmenu':
|
||||||
|
case 'mouseup':
|
||||||
|
case 'dragend':
|
||||||
|
isInMouseEvent = false;
|
||||||
|
eventUnitList = getSelectEvent(nativeEvt, target);
|
||||||
|
break;
|
||||||
|
case 'selectionchange':
|
||||||
|
case 'keydown':
|
||||||
|
case 'keyup':
|
||||||
|
eventUnitList = getSelectEvent(nativeEvt, target);
|
||||||
|
}
|
||||||
|
return eventUnitList;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue