huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Event payloads for DOM event types

This commit is contained in:
Gutemberg Ribeiro 2018-05-05 20:20:01 -03:00 committed by Steve Sanderson
parent 866368192f
commit ad501dc77f
8 changed files with 702 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.editorconfig Normal file
View File

@ -0,0 +1,21 @@
# All Files
[*]
charset = utf-8
end_of_line = crlf
indent_style = space
indent_size = 4
insert_final_newline = false
trim_trailing_whitespace = true
# Solution Files
[*.sln]
indent_style = tab
# Markdown Files
[*.md]
trim_trailing_whitespace = false
# Web Files
[*.{htm,html,js,ts,css,scss,less}]
insert_final_newline = true
indent_size = 2

238
src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts
View File

@ -1,4 +1,4 @@
export class EventForDotNet<TData extends UIEventArgs> {
export class EventForDotNet<TData extends UIEventArgs> {
constructor(public readonly type: EventArgsType, public readonly data: TData) {
}
@ -9,13 +9,13 @@
case 'change': {
const targetIsCheckbox = isCheckbox(element);
const newValue = targetIsCheckbox ? !!element['checked'] : element['value'];
return new EventForDotNet<UIChangeEventArgs>('change', { Type: event.type, Value: newValue });
return new EventForDotNet<UIChangeEventArgs>('change', { type: event.type, value: newValue });
}
case 'copy':
case 'cut':
case 'paste':
return new EventForDotNet<UIClipboardEventArgs>('clipboard', { Type: event.type });
return new EventForDotNet<UIClipboardEventArgs>('clipboard', { type: event.type });
case 'drag':
case 'dragend':
@ -24,21 +24,18 @@
case 'dragover':
case 'dragstart':
case 'drop':
return new EventForDotNet<UIDragEventArgs>('drag', { Type: event.type });
case 'error':
return new EventForDotNet<UIProgressEventArgs>('error', { Type: event.type });
return new EventForDotNet<UIDragEventArgs>('drag', parseDragEvent(event));
case 'focus':
case 'blur':
case 'focusin':
case 'focusout':
return new EventForDotNet<UIFocusEventArgs>('focus', { Type: event.type });
return new EventForDotNet<UIFocusEventArgs>('focus', { type: event.type });
case 'keydown':
case 'keyup':
case 'keypress':
return new EventForDotNet<UIKeyboardEventArgs>('keyboard', { Type: event.type, Key: (event as any).key });
return new EventForDotNet<UIKeyboardEventArgs>('keyboard', parseKeyboardEvent(<KeyboardEvent>event));
case 'contextmenu':
case 'click':
@ -48,16 +45,24 @@
case 'mousedown':
case 'mouseup':
case 'dblclick':
return new EventForDotNet<UIMouseEventArgs>('mouse', { Type: event.type });
return new EventForDotNet<UIMouseEventArgs>('mouse', parseMouseEvent(<MouseEvent>event));
case 'loadstart':
case 'timeout':
case 'abort':
case 'load':
case 'loadend':
case 'error':
case 'progress':
return new EventForDotNet<UIProgressEventArgs>('progress', { Type: event.type });
return new EventForDotNet<UIProgressEventArgs>('progress', parseProgressEvent(<ProgressEvent>event));
case 'touchcancel':
case 'touchend':
case 'touchmove':
case 'touchenter':
case 'touchleave':
case 'touchstart':
return new EventForDotNet<UITouchEventArgs>('touch', { Type: event.type });
return new EventForDotNet<UITouchEventArgs>('touch', parseTouchEvent(<TouchEvent>event));
case 'gotpointercapture':
case 'lostpointercapture':
@ -69,18 +74,133 @@
case 'pointerout':
case 'pointerover':
case 'pointerup':
return new EventForDotNet<UIPointerEventArgs>('pointer', { Type: event.type });
return new EventForDotNet<UIPointerEventArgs>('pointer', parsePointerEvent(<PointerEvent>event));
case 'wheel':
case 'mousewheel':
return new EventForDotNet<UIWheelEventArgs>('wheel', { Type: event.type });
return new EventForDotNet<UIWheelEventArgs>('wheel', parseWheelEvent(<WheelEvent>event));
default:
return new EventForDotNet<UIEventArgs>('unknown', { Type: event.type });
return new EventForDotNet<UIEventArgs>('unknown', { type: event.type });
}
}
}
function parseDragEvent(event: any) {
return {
type: event.type,
detail: event.detail,
dataTransfer: event.dataTransfer,
screenX: event.screenX,
screenY: event.screenY,
clientX: event.clientX,
clientY: event.clientY,
button: event.button,
buttons: event.buttons,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey
}
}
function parseWheelEvent(event: WheelEvent) {
return {
...parseMouseEvent(event),
deltaX: event.deltaX,
deltaY: event.deltaY,
deltaZ: event.deltaZ,
deltaMode: event.deltaMode
};
}
function parseProgressEvent(event: ProgressEvent) {
return {
type: event.type,
lengthComputable: event.lengthComputable,
loaded: event.loaded,
total: event.total
};
}
function parseTouchEvent(event: TouchEvent) {
function parseTouch(touchList: TouchList) {
const touches: UITouchPoint[] = [];
for (let i = 0; i < touchList.length; i++) {
const touch = touchList[i];
touches.push({
identifier: touch.identifier,
clientX: touch.clientX,
clientY: touch.clientY,
screenX: touch.screenX,
screenY: touch.screenY,
pageX: touch.pageX,
pageY: touch.pageY
});
}
return touches;
}
return {
type: event.type,
detail: event.detail,
touches: parseTouch(event.touches),
targetTouches: parseTouch(event.targetTouches),
changedTouches: parseTouch(event.changedTouches),
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey
};
}
function parseKeyboardEvent(event: KeyboardEvent) {
return {
type: event.type,
key: event.key,
code: event.code,
location: event.location,
repeat: event.repeat,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey
};
}
function parsePointerEvent(event: PointerEvent) {
return {
...parseMouseEvent(event),
pointerId: event.pointerId,
width: event.width,
height: event.height,
pressure: event.pressure,
tiltX: event.tiltX,
tiltY: event.tiltY,
pointerType: event.pointerType,
isPrimary: event.isPrimary
};
}
function parseMouseEvent(event: MouseEvent) {
return {
type: event.type,
detail: event.detail,
screenX: event.screenX,
screenY: event.screenY,
clientX: event.clientX,
clientY: event.clientY,
button: event.button,
buttons: event.buttons,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey
};
}
function isCheckbox(element: Element | null) {
return element && element.tagName === 'INPUT' && element.getAttribute('type') === 'checkbox';
}
@ -90,40 +210,116 @@ function isCheckbox(element: Element | null) {
type EventArgsType = 'change' | 'clipboard' | 'drag' | 'error' | 'focus' | 'keyboard' | 'mouse' | 'pointer' | 'progress' | 'touch' | 'unknown' | 'wheel';
export interface UIEventArgs {
Type: string;
type: string;
}
interface UIChangeEventArgs extends UIEventArgs {
Value: string | boolean;
value: string | boolean;
}
interface UIClipboardEventArgs extends UIEventArgs {
}
interface UIDragEventArgs extends UIEventArgs {
detail: number;
dataTransfer: UIDataTransfer;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
button: number;
buttons: number;
ctrlKey: boolean;
shiftKey: boolean;
altKey: boolean;
metaKey: boolean;
}
interface UIErrorEventArgs extends UIEventArgs {
interface UIDataTransfer {
dropEffect: string;
effectAllowed: string;
files: string[];
items: UIDataTransferItem[];
types: string[];
}
interface UIDataTransferItem {
kind: string;
type: string;
}
interface UIErrorEventArgs extends UIProgressEventArgs {
}
interface UIFocusEventArgs extends UIEventArgs {
}
interface UIKeyboardEventArgs extends UIEventArgs {
Key: string;
key: string;
code: string;
location: number;
repeat: boolean;
ctrlKey: boolean;
shiftKey: boolean;
altKey: boolean;
metaKey: boolean;
}
interface UIMouseEventArgs extends UIEventArgs {
detail: number;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
button: number;
buttons: number;
ctrlKey: boolean;
shiftKey: boolean;
altKey: boolean;
metaKey: boolean;
}
interface UIPointerEventArgs extends UIMouseEventArgs {
pointerId: number;
width: number;
height: number;
pressure: number;
tiltX: number;
tiltY: number;
pointerType: string;
isPrimary: boolean;
}
interface UIProgressEventArgs extends UIEventArgs {
lengthComputable: boolean;
loaded: number;
total: number;
}
interface UITouchEventArgs extends UIEventArgs {
detail: number;
touches: UITouchPoint[];
targetTouches: UITouchPoint[];
changedTouches: UITouchPoint[];
ctrlKey: boolean;
shiftKey: boolean;
altKey: boolean;
metaKey: boolean;
}
interface UIWheelEventArgs extends UIEventArgs {
interface UITouchPoint {
identifier: number;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
pageX: number;
pageY: number;
}
interface UIWheelEventArgs extends UIMouseEventArgs {
deltaX: number;
deltaY: number;
deltaZ: number;
deltaMode: number;
}

19
src/Microsoft.AspNetCore.Blazor/Components/EventHandlers.cs
View File

@ -1,4 +1,4 @@
// Copyright (c) .NET Foundation. All rights reserved.
// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
using System;
@ -24,6 +24,7 @@ namespace Microsoft.AspNetCore.Blazor.Components
[EventHandler("onmouseup", typeof(UIMouseEventArgs))]
[EventHandler("onclick", typeof(UIMouseEventArgs))]
[EventHandler("ondblclick", typeof(UIMouseEventArgs))]
[EventHandler("onwheel", typeof(UIWheelEventArgs))]
[EventHandler("onmousewheel", typeof(UIWheelEventArgs))]
[EventHandler("oncontextmenu", typeof(UIMouseEventArgs))]
@ -64,6 +65,8 @@ namespace Microsoft.AspNetCore.Blazor.Components
[EventHandler("ontouchend", typeof(UITouchEventArgs))]
[EventHandler("ontouchmove", typeof(UITouchEventArgs))]
[EventHandler("ontouchstart", typeof(UITouchEventArgs))]
[EventHandler("ontouchenter", typeof(UITouchEventArgs))]
[EventHandler("ontouchleave", typeof(UITouchEventArgs))]
// Pointer events
[EventHandler("gotpointercapture", typeof(UIPointerEventArgs))]
@ -96,14 +99,16 @@ namespace Microsoft.AspNetCore.Blazor.Components
[EventHandler("onvolumechange", typeof(UIEventArgs))]
[EventHandler("onwaiting", typeof(UIEventArgs))]
// Error events
// Progress events
[EventHandler("onloadstart", typeof(UIProgressEventArgs))]
[EventHandler("ontimeout", typeof(UIProgressEventArgs))]
[EventHandler("onabort", typeof(UIProgressEventArgs))]
[EventHandler("onload", typeof(UIProgressEventArgs))]
[EventHandler("onloadend", typeof(UIProgressEventArgs))]
[EventHandler("onprogress", typeof(UIProgressEventArgs))]
[EventHandler("onerror", typeof(UIErrorEventArgs))]
// Progress events
[EventHandler("onprogress", typeof(UIProgressEventArgs))]
// General events
[EventHandler("onabort", typeof(UIEventArgs))]
[EventHandler("onactivate", typeof(UIEventArgs))]
[EventHandler("onbeforeactivate", typeof(UIEventArgs))]
[EventHandler("onbeforedeactivate", typeof(UIEventArgs))]
@ -111,10 +116,8 @@ namespace Microsoft.AspNetCore.Blazor.Components
[EventHandler("onended", typeof(UIEventArgs))]
[EventHandler("onfullscreenchange", typeof(UIEventArgs))]
[EventHandler("onfullscreenerror", typeof(UIEventArgs))]
[EventHandler("onload", typeof(UIEventArgs))]
[EventHandler("onloadeddata", typeof(UIEventArgs))]
[EventHandler("onloadedmetadata", typeof(UIEventArgs))]
[EventHandler("onloadstart", typeof(UIEventArgs))]
[EventHandler("onpointerlockchange", typeof(UIEventArgs))]
[EventHandler("onpointerlockerror", typeof(UIEventArgs))]
[EventHandler("onreadystatechange", typeof(UIEventArgs))]

405
src/Microsoft.AspNetCore.Blazor/UIEventArgs.cs
View File

@ -1,4 +1,4 @@
// Copyright (c) .NET Foundation. All rights reserved.
// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
namespace Microsoft.AspNetCore.Blazor
@ -38,12 +38,137 @@ namespace Microsoft.AspNetCore.Blazor
/// </summary>
public class UIDragEventArgs : UIEventArgs
{
/// <summary>
/// A count of consecutive clicks that happened in a short amount of time, incremented by one.
/// </summary>
public float Detail { get; set; }
/// <summary>
/// The data that underlies a drag-and-drop operation, known as the drag data store.
/// See <see cref="Blazor.DataTransfer"/>.
/// </summary>
public DataTransfer DataTransfer { get; set; }
/// <summary>
/// The X coordinate of the mouse pointer in global (screen) coordinates.
/// </summary>
public long ScreenX { get; set; }
/// <summary>
/// The Y coordinate of the mouse pointer in global (screen) coordinates.
/// </summary>
public long ScreenY { get; set; }
/// <summary>
/// The X coordinate of the mouse pointer in local (DOM content) coordinates.
/// </summary>
public long ClientX { get; set; }
/// <summary>
/// The Y coordinate of the mouse pointer in local (DOM content) coordinates.
/// </summary>
public long ClientY { get; set; }
/// <summary>
/// The button number that was pressed when the mouse event was fired:
/// Left button=0,
/// middle button=1 (if present),
/// right button=2.
/// For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
/// </summary>
public long Button { get; set; }
/// <summary>
/// The buttons being pressed when the mouse event was fired:
/// Left button=1,
/// Right button=2,
/// Middle (wheel) button=4,
/// 4th button (typically, "Browser Back" button)=8,
/// 5th button (typically, "Browser Forward" button)=16.
/// If two or more buttons are pressed, returns the logical sum of the values.
/// E.g., if Left button and Right button are pressed, returns 3 (=1 | 2).
/// </summary>
public long Buttons { get; set; }
/// <summary>
/// true if the control key was down when the event was fired. false otherwise.
/// </summary>
public bool CtrlKey { get; set; }
/// <summary>
/// true if the shift key was down when the event was fired. false otherwise.
/// </summary>
public bool ShiftKey { get; set; }
/// <summary>
/// true if the alt key was down when the event was fired. false otherwise.
/// </summary>
public bool AltKey { get; set; }
/// <summary>
/// true if the meta key was down when the event was fired. false otherwise.
/// </summary>
public bool MetaKey { get; set; }
}
/// <summary>
/// The <see cref="DataTransfer"/> object is used to hold the data that is being dragged during a drag and drop operation.
/// It may hold one or more <see cref="UIDataTransferItem"/>, each of one or more data types.
/// For more information about drag and drop, see HTML Drag and Drop API.
/// </summary>
public class DataTransfer
{
/// <summary>
/// Gets the type of drag-and-drop operation currently selected or sets the operation to a new type.
/// The value must be none, copy, link or move.
/// </summary>
public string DropEffect { get; set; }
/// <summary>
/// Provides all of the types of operations that are possible.
/// Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
/// </summary>
public string EffectAllowed { get; set; }
/// <summary>
/// Contains a list of all the local files available on the data transfer.
/// If the drag operation doesn't involve dragging files, this property is an empty list.
/// </summary>
public string[] Files { get; set; }
/// <summary>
/// Gives a <see cref="UIDataTransferItem"/> array which is a list of all of the drag data.
/// </summary>
public UIDataTransferItem[] Items { get; set; }
/// <summary>
/// An array of <see cref="string"/> giving the formats that were set in the dragstart event.
/// </summary>
public string[] Types { get; set; }
}
/// <summary>
/// The <see cref="UIDataTransferItem"/> object represents one drag data item.
/// During a drag operation, each drag event has a dataTransfer property which contains a list of drag data items.
/// Each item in the list is a <see cref="UIDataTransferItem"/> object.
/// </summary>
public class UIDataTransferItem
{
/// <summary>
/// The kind of drag data item, string or file
/// </summary>
public string Kind { get; set; }
/// <summary>
/// The drag data item's type, typically a MIME type
/// </summary>
public string Type { get; set; }
}
/// <summary>
/// Supplies information about an error event that is being raised.
/// </summary>
public class UIErrorEventArgs : UIEventArgs
public class UIErrorEventArgs : UIProgressEventArgs
{
}
@ -62,9 +187,48 @@ namespace Microsoft.AspNetCore.Blazor
public class UIKeyboardEventArgs : UIEventArgs
{
/// <summary>
/// If applicable, gets or sets the key that produced the event.
/// The key value of the key represented by the event.
/// If the value has a printed representation, this attribute's value is the same as the char attribute.
/// Otherwise, it's one of the key value strings specified in 'Key values'.
/// If the key can't be identified, this is the string "Unidentified"
/// </summary>
public string Key { get; set; }
/// <summary>
/// Holds a string that identifies the physical key being pressed.
/// The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.
/// </summary>
public string Code { get; set; }
/// <summary>
/// The location of the key on the device.
/// </summary>
public float Location { get; set; }
/// <summary>
/// true if a key has been depressed long enough to trigger key repetition, otherwise false.
/// </summary>
public bool Repeat { get; set; }
/// <summary>
/// true if the control key was down when the event was fired. false otherwise.
/// </summary>
public bool CtrlKey { get; set; }
/// <summary>
/// true if the shift key was down when the event was fired. false otherwise.
/// </summary>
public bool ShiftKey { get; set; }
/// <summary>
/// true if the alt key was down when the event was fired. false otherwise.
/// </summary>
public bool AltKey { get; set; }
/// <summary>
/// true if the meta key was down when the event was fired. false otherwise.
/// </summary>
public bool MetaKey { get; set; }
}
/// <summary>
@ -72,6 +236,71 @@ namespace Microsoft.AspNetCore.Blazor
/// </summary>
public class UIMouseEventArgs : UIEventArgs
{
/// <summary>
/// A count of consecutive clicks that happened in a short amount of time, incremented by one.
/// </summary>
public float Detail { get; set; }
/// <summary>
/// The X coordinate of the mouse pointer in global (screen) coordinates.
/// </summary>
public long ScreenX { get; set; }
/// <summary>
/// The Y coordinate of the mouse pointer in global (screen) coordinates.
/// </summary>
public long ScreenY { get; set; }
/// <summary>
/// The X coordinate of the mouse pointer in local (DOM content) coordinates.
/// </summary>
public long ClientX { get; set; }
/// <summary>
/// The Y coordinate of the mouse pointer in local (DOM content) coordinates.
/// </summary>
public long ClientY { get; set; }
/// <summary>
/// The button number that was pressed when the mouse event was fired:
/// Left button=0,
/// middle button=1 (if present),
/// right button=2.
/// For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
/// </summary>
public long Button { get; set; }
/// <summary>
/// The buttons being pressed when the mouse event was fired:
/// Left button=1,
/// Right button=2,
/// Middle (wheel) button=4,
/// 4th button (typically, "Browser Back" button)=8,
/// 5th button (typically, "Browser Forward" button)=16.
/// If two or more buttons are pressed, returns the logical sum of the values.
/// E.g., if Left button and Right button are pressed, returns 3 (=1 | 2).
/// </summary>
public long Buttons { get; set; }
/// <summary>
/// true if the control key was down when the event was fired. false otherwise.
/// </summary>
public bool CtrlKey { get; set; }
/// <summary>
/// true if the shift key was down when the event was fired. false otherwise.
/// </summary>
public bool ShiftKey { get; set; }
/// <summary>
/// true if the alt key was down when the event was fired. false otherwise.
/// </summary>
public bool AltKey { get; set; }
/// <summary>
/// true if the meta key was down when the event was fired. false otherwise.
/// </summary>
public bool MetaKey { get; set; }
}
/// <summary>
@ -79,13 +308,72 @@ namespace Microsoft.AspNetCore.Blazor
/// </summary>
public class UIPointerEventArgs : UIMouseEventArgs
{
/// <summary>
/// A unique identifier for the pointer causing the event.
/// </summary>
public string PointerId { get; set; }
/// <summary>
/// The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
/// </summary>
public float Width { get; set; }
/// <summary>
/// The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
/// </summary>
public float Height { get; set; }
/// <summary>
/// The normalized pressure of the pointer input in the range of 0 to 1,
/// where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
/// </summary>
public float Pressure { get; set; }
/// <summary>
/// The plane angle (in degrees, in the range of -90 to 90) between the Y-Z plane
/// and the plane containing both the transducer (e.g. pen stylus) axis and the Y axis.
/// </summary>
public float TiltX { get; set; }
/// <summary>
/// The plane angle (in degrees, in the range of -90 to 90) between the X-Z plane
/// and the plane containing both the transducer (e.g. pen stylus) axis and the X axis.
/// </summary>
public float TiltY { get; set; }
/// <summary>
/// Indicates the device type that caused the event.
/// Must be one of the strings mouse, pen or touch, or an empty string.
/// </summary>
public string PointerType { get; set; }
/// <summary>
/// Indicates if the pointer represents the primary pointer of this pointer type.
/// </summary>
public bool IsPrimary { get; set; }
}
/// <summary>
/// Supplies information about a progress event that is being raised.
/// </summary>
public class UIProgressEventArgs : UIMouseEventArgs
public class UIProgressEventArgs : UIEventArgs
{
/// <summary>
/// Whether or not the total size of the transfer is known.
/// </summary>
public bool LengthComputable { get; set; }
/// <summary>
/// The number of bytes transferred since the beginning of the operation.
/// This doesn't include headers and other overhead, but only the content itself.
/// </summary>
public long Loaded { get; set; }
/// <summary>
/// The total number of bytes of content that will be transferred during the operation.
/// If the total size is unknown, this value is zero.
/// </summary>
public long Total { get; set; }
}
/// <summary>
@ -93,12 +381,119 @@ namespace Microsoft.AspNetCore.Blazor
/// </summary>
public class UITouchEventArgs : UIEventArgs
{
/// <summary>
/// A count of consecutive clicks that happened in a short amount of time, incremented by one.
/// </summary>
public float Detail { get; set; }
/// <summary>
/// A list of <see cref="UITouchPoint"/> for every point of contact currently touching the surface.
/// </summary>
public UITouchPoint[] Touches { get; set; }
/// <summary>
/// A list of <see cref="UITouchPoint"/> for every point of contact that is touching the surface and started on the element that is the target of the current event.
/// </summary>
public UITouchPoint[] TargetTouches { get; set; }
/// <summary>
/// A list of Touches for every point of contact which contributed to the event.
/// For the touchstart event this must be a list of the touch points that just became active with the current event.
/// For the touchmove event this must be a list of the touch points that have moved since the last event.
/// For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.
/// </summary>
public UITouchPoint[] ChangedTouches { get; set; }
/// <summary>
/// true if the control key was down when the event was fired. false otherwise.
/// </summary>
public bool CtrlKey { get; set; }
/// <summary>
/// true if the shift key was down when the event was fired. false otherwise.
/// </summary>
public bool ShiftKey { get; set; }
/// <summary>
/// true if the alt key was down when the event was fired. false otherwise.
/// </summary>
public bool AltKey { get; set; }
/// <summary>
/// true if the meta key was down when the event was fired. false otherwise.
/// </summary>
public bool MetaKey { get; set; }
}
/// <summary>
/// Represents a single contact point on a touch-sensitive device.
/// The contact point is commonly a finger or stylus and the device may be a touchscreen or trackpad.
/// </summary>
public class UITouchPoint
{
/// <summary>
/// A unique identifier for this Touch object.
/// A given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface.
/// This lets you ensure that you're tracking the same touch all the time.
/// </summary>
public long Identifier { get; set; }
/// <summary>
/// The X coordinate of the touch point relative to the left edge of the screen.
/// </summary>
public long ScreenX { get; set; }
/// <summary>
/// The Y coordinate of the touch point relative to the top edge of the screen.
/// </summary>
public long ScreenY { get; set; }
/// <summary>
/// The X coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.
/// </summary>
public long ClientX { get; set; }
/// <summary>
/// The Y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.
/// </summary>
public long ClientY { get; set; }
/// <summary>
/// The X coordinate of the touch point relative to the left edge of the document.
/// Unlike <see cref="ClientX"/>, this value includes the horizontal scroll offset, if any.
/// </summary>
public long PageX { get; set; }
/// <summary>
/// The Y coordinate of the touch point relative to the top of the document.
/// Unlike <see cref="ClientY"/>, this value includes the vertical scroll offset, if any.
/// </summary>
public long PageY { get; set; }
}
/// <summary>
/// Supplies information about a mouse wheel event that is being raised.
/// </summary>
public class UIWheelEventArgs : UIEventArgs
public class UIWheelEventArgs : UIMouseEventArgs
{
/// <summary>
/// The horizontal scroll amount.
/// </summary>
public double DeltaX { get; set; }
/// <summary>
/// The vertical scroll amount.
/// </summary>
public double DeltaY { get; set; }
/// <summary>
/// The scroll amount for the z-axis.
/// </summary>
public double DeltaZ { get; set; }
/// <summary>
/// The unit of the delta values scroll amount.
/// </summary>
public long DeltaMode { get; set; }
}
}

3
test/testapps/BasicTestApp/KeyPressEventComponent.cshtml
View File

@ -1,4 +1,4 @@
@using System.Collections.Generic
@using System.Collections.Generic
Type here: <input onkeypress=@OnKeyPressed />
<ul>
@ -13,6 +13,7 @@ Type here: <input onkeypress=@OnKeyPressed />
void OnKeyPressed(UIKeyboardEventArgs eventArgs)
{
Console.WriteLine(JsonUtil.Serialize(eventArgs));
keysPressed.Add(eventArgs.Key);
}
}

12
test/testapps/BasicTestApp/MouseEventComponent.cshtml
View File

@ -1,4 +1,4 @@
@using System.Collections.Generic
@using System.Collections.Generic
<div>
<h2>Mouse position</h2>
@ -29,34 +29,44 @@
void OnMouseOver(UIMouseEventArgs e)
{
DumpEvent(e);
message += "onmouseover,";
StateHasChanged();
}
void OnMouseOut(UIMouseEventArgs e)
{
DumpEvent(e);
message += "onmouseout,";
StateHasChanged();
}
void OnMouseMove(UIMouseEventArgs e)
{
DumpEvent(e);
message += "onmousemove,";
StateHasChanged();
}
void OnMouseDown(UIMouseEventArgs e)
{
DumpEvent(e);
message += "onmousedown,";
StateHasChanged();
}
void OnMouseUp(UIMouseEventArgs e)
{
DumpEvent(e);
message += "onmouseup,";
StateHasChanged();
}
void DumpEvent(UIMouseEventArgs e)
{
Console.WriteLine(JsonUtil.Serialize(e));
}
void Clear()
{
message = string.Empty;

38
test/testapps/BasicTestApp/TouchEventComponent.cshtml Normal file
View File

@ -0,0 +1,38 @@
@using System.Collections.Generic
<div>
<h2>Touch position</h2>
<p>
Output: <span id="output">@message</span>
</p>
<p>
<button ontouchstart=@OnTouch
ontouchcancel=@OnTouch
ontouchenter=@OnTouch
ontouchleave=@OnTouch
ontouchend=@OnTouch
ontouchmove=@OnTouch>
TOUCH ME
</button>
</p>
<p>
<button onclick="@Clear">Clear</button>
</p>
</div>
@functions {
string message;
void OnTouch(UITouchEventArgs e)
{
message += e.Type;
Console.WriteLine(JsonUtil.Serialize(e));
StateHasChanged();
}
void Clear()
{
message = string.Empty;
}
}

3
test/testapps/BasicTestApp/wwwroot/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
@ -18,6 +18,7 @@
<option value="BasicTestApp.FocusEventComponent">Focus events</option>
<option value="BasicTestApp.KeyPressEventComponent">Key press event</option>
<option value="BasicTestApp.MouseEventComponent">Mouse events</option>
<option value="BasicTestApp.TouchEventComponent">Touch events</option>
<option value="BasicTestApp.ParentChildComponent">Parent component with child</option>
<option value="BasicTestApp.PropertiesChangedHandlerParent">Parent component that changes parameters on child</option>
<option value="BasicTestApp.RedTextComponent">Red text</option>